/* Strike Digital — sistema visual del sitio. Tokens y componentes descritos en DESIGN.md */

@font-face {
  font-family: "Barlow";
  src: url("/fonts/barlow-700.woff2") format("woff2"), url("/fonts/Barlow-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Texto: Nunito Sans (licencia abierta), la más cercana al Avenir del manual que se puede alojar en la web. */
@font-face {
  font-family: "Nunito Sans";
  src: url("/fonts/nunito-sans.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --papel: #efecdd;
  --papel-hondo: #e3dfca;
  --hoja: #fbfaf4;
  --rojo: #b5302b;
  --rojo-hondo: #96241f;
  --amarillo: #f9b222;
  --azul: #293c43;
  --carbon: #2d2d2d;
  --tinta-suave: #4d5356;

  --titular: "Barlow", "Arial Narrow", sans-serif;
  --texto: "Nunito Sans", "Avenir Next", Avenir, "Segoe UI", Roboto, sans-serif;

  --t-xs: 0.8125rem;
  --t-sm: 0.9375rem;
  --t-base: 1.0625rem;
  --t-lg: 1.25rem;
  --t-xl: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  --t-2xl: clamp(2.1rem, 1.5rem + 3vw, 3.5rem);
  --t-3xl: clamp(2.5rem, 1.5rem + 4.2vw, 4.75rem);

  --e-1: 0.5rem;
  --e-2: 1rem;
  --e-3: 1.5rem;
  --e-4: 2.5rem;
  --e-5: 4rem;
  --e-6: clamp(4.5rem, 3rem + 6vw, 8rem);

  --ancho: 76rem;
  --margen: clamp(1.25rem, 0.6rem + 3vw, 3rem);
  --sombra-papel: 0 1px 1px rgba(45, 45, 45, 0.18), 0 14px 26px -14px rgba(45, 45, 45, 0.45);
  --salida: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: var(--rojo) var(--papel-hondo); }
body {
  margin: 0;
  background: var(--papel);
  color: var(--carbon);
  font: 400 var(--t-base)/1.6 var(--texto);
  overflow-x: hidden;
}
::selection { background: var(--amarillo); color: var(--carbon); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 0.09em; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }
.campo-oscuro :focus-visible, .campo-rojo :focus-visible, .plan--destacado :focus-visible, .pie :focus-visible { outline-color: var(--amarillo); }

h1, h2, h3 {
  font-family: var(--titular);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.98;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); line-height: 1.05; }
p { margin: 0 0 var(--e-2); max-width: 62ch; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }
.seccion { padding-block: var(--e-6); position: relative; }
.entrada { font-size: var(--t-lg); line-height: 1.5; max-width: 54ch; }
.nota { font-size: var(--t-sm); color: var(--tinta-suave); }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a.solo-lectores:focus { position: fixed; z-index: 100; top: 0.5rem; left: 0.5rem; width: auto; height: auto; clip: auto; padding: 0.85rem 1.1rem; background: var(--carbon); color: var(--papel); font-weight: 700; outline-color: var(--amarillo); }
.tras-titular { margin-top: var(--e-3); }
.tras-bloque { margin-top: var(--e-4); }
[id] { scroll-margin-top: 5rem; }

/* Palabras recortadas: bloque de papel azul pegado sobre el titular */
.recorte {
  display: inline-block;
  background: var(--azul);
  color: var(--papel);
  padding: 0.06em 0.22em 0.1em;
  transform: rotate(-1.6deg);
  margin-block: 0.06em;
}
.recorte--rojo { background: var(--rojo); }
.recorte--amarillo { background: var(--amarillo); color: var(--carbon); }

/* Campos de color que ocupan la sección completa */
.campo-oscuro { background: var(--azul); color: var(--papel); }
.campo-rojo { background: var(--rojo); color: var(--hoja); }
.campo-amarillo { background: var(--amarillo); color: var(--carbon); }
.campo-hondo { background: var(--papel-hondo); }
.campo-oscuro .nota { color: #c5cdc9; }
.campo-rojo .nota { color: #f3d6d2; }

/* Trama de semitonos del manual de marca */
.trama::before {
  content: "";
  position: absolute;
  inset: auto 0 0 auto;
  width: min(22rem, 60vw);
  aspect-ratio: 1;
  background-image: radial-gradient(circle, currentColor 1.4px, transparent 1.6px);
  background-size: 13px 13px;
  opacity: 0.1;
  -webkit-mask-image: radial-gradient(circle at 100% 100%, #000 10%, transparent 70%);
  mask-image: radial-gradient(circle at 100% 100%, #000 10%, transparent 70%);
  pointer-events: none;
}
.trama--arriba::before { inset: 0 auto auto 0; -webkit-mask-image: radial-gradient(circle at 0 0, #000 10%, transparent 70%); mask-image: radial-gradient(circle at 0 0, #000 10%, transparent 70%); }

/* Botones */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 3.25rem;
  padding: 0.7rem 1.5rem;
  background: var(--rojo);
  color: var(--hoja);
  font: 700 1rem/1.1 var(--titular);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 2px solid var(--rojo);
  cursor: pointer;
  transition: transform 0.25s var(--salida), background-color 0.2s ease-out, border-color 0.2s ease-out;
}
.boton:hover { background: var(--rojo-hondo); border-color: var(--rojo-hondo); transform: rotate(-1.2deg) scale(1.03); }
.boton:active { transform: scale(0.98); }
.boton svg { width: 1.25em; height: 1.25em; flex: none; }
.boton--linea { background: transparent; color: var(--carbon); border-color: var(--carbon); }
.boton--linea:hover { background: var(--carbon); border-color: var(--carbon); color: var(--papel); }
.campo-oscuro .boton--linea, .campo-rojo .boton--linea { color: var(--hoja); border-color: var(--hoja); }
.campo-oscuro .boton--linea:hover, .campo-rojo .boton--linea:hover { background: var(--hoja); color: var(--carbon); }
.campo-rojo .boton:not(.boton--linea), .campo-amarillo .boton:not(.boton--linea) { background: var(--azul); border-color: var(--azul); }
.campo-rojo .boton:not(.boton--linea):hover, .campo-amarillo .boton:not(.boton--linea):hover { background: var(--carbon); border-color: var(--carbon); }
.botones { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-4); }

/* Cabecera */
.cabecera { position: sticky; top: 0; z-index: 50; background: var(--papel); border-bottom: 2px solid var(--carbon); }
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); min-height: 4.25rem; }
.cabecera__logo img { width: 8.25rem; height: auto; }
.menu-boton {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 2.75rem; padding: 0 0.9rem;
  background: none; border: 2px solid var(--carbon); color: var(--carbon);
  font: 700 0.9375rem/1 var(--titular); text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer;
}
.menu-boton b { font-weight: inherit; }
.cabecera__hablar { margin-left: auto; min-height: 2.75rem; padding: 0.4rem 0.9rem; font-size: 0.9375rem; }
.cabecera__fila { gap: 0.6rem; }
@media (max-width: 25.99rem) {
  .cabecera__logo img { width: 7rem; }
  .menu-boton { padding: 0 0.75rem; }
  .menu-boton b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.menu-boton span { width: 1.1rem; height: 2px; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; }
.navegacion { display: none; position: absolute; inset: 100% 0 auto 0; background: var(--papel); border-bottom: 2px solid var(--carbon); padding: var(--e-2) var(--margen) var(--e-3); }
.navegacion.abierta { display: block; }
.navegacion ul { display: grid; gap: 0.25rem; }
.navegacion a { display: flex; align-items: center; min-height: 2.75rem; font: 700 1.125rem/1 var(--titular); text-transform: uppercase; letter-spacing: 0.03em; text-decoration: none; }
.navegacion a[aria-current="page"] { color: var(--rojo); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.35em; }
.navegacion a:not(.boton):hover { color: var(--rojo); }
.navegacion .boton { margin-top: var(--e-1); color: var(--hoja); }
@media (min-width: 56rem) {
  .menu-boton, .cabecera__hablar { display: none; }
  .cabecera__fila { gap: var(--e-2); }
  .navegacion { display: block; position: static; border: 0; padding: 0; }
  .navegacion ul { display: flex; align-items: center; gap: var(--e-3); }
  .navegacion a { font-size: 1rem; }
  .navegacion .boton { margin: 0; min-height: 2.75rem; padding-block: 0.4rem; }
}

/* Portada */
.portada { padding-block: var(--e-4) var(--e-6); position: relative; overflow: hidden; }
.portada__grilla { display: grid; gap: var(--e-4); align-items: center; }
.portada h1 { max-width: 17ch; }
.portada .entrada { margin-top: var(--e-3); }
@media (max-width: 29.99rem) { .portada { padding-top: var(--e-3); } .portada .entrada { font-size: 1.125rem; } }
.portada--inicio h1 { font-size: clamp(2.1rem, 1.25rem + 3.7vw, 4.25rem); max-width: 20ch; }
.collage { position: relative; width: min(100%, 30rem); margin-inline: auto; aspect-ratio: 1 / 1.02; }
.collage > * { position: absolute; }
.collage__trama { inset: 4% 0 auto auto; width: 78%; opacity: 0.55; }
.collage__destello { inset: -4% auto auto 2%; width: 44%; }
.collage__figura { inset: 6% 0 auto 8%; width: 88%; filter: drop-shadow(0 18px 14px rgba(45, 45, 45, 0.28)); }
.estallido {
  display: grid; place-items: center; text-align: center;
  background: url("/img/05-estallido-cta.svg") center / 100% 100% no-repeat;
  color: var(--hoja);
  font-family: var(--titular); font-weight: 700; text-transform: uppercase; line-height: 1;
}
.collage__precio { inset: auto auto -9% -7%; width: 56%; aspect-ratio: 1; transform: rotate(-8deg); padding: 22% 18% 20%; }
.estallido small { display: block; font-size: 0.8125rem; letter-spacing: 0.06em; }
.estallido strong { display: block; font-size: clamp(1.5rem, 6vw, 2.1rem); margin-block: 0.12em; }
@media (min-width: 56rem) {
  .portada__grilla { grid-template-columns: 1.15fr 0.85fr; gap: var(--e-5); }
  .collage { width: 100%; max-width: 34rem; }
  .portada--inicio .portada__grilla { grid-template-columns: 1.35fr 0.65fr; }
}
@media (prefers-reduced-motion: no-preference) {
  .collage__figura { animation: pegar 0.9s var(--salida) both; }
  .collage__destello { animation: pegar 0.9s 0.12s var(--salida) both; }
  .collage__precio { animation: pegar-precio 0.9s 0.26s var(--salida) both; }
  @keyframes pegar { from { transform: translateY(-28px) rotate(7deg) scale(1.1); } }
  @keyframes pegar-precio { from { transform: translateY(-34px) rotate(10deg) scale(1.25); } to { transform: rotate(-8deg); } }
}

/* Portadas interiores */
.portada--interior .portada__grilla { align-items: end; }
.portada--interior h1 { max-width: 15ch; font-size: clamp(2.4rem, 1.5rem + 4.4vw, 4.75rem); }
.portada__figura { width: min(72%, 21rem); margin-inline: auto; filter: drop-shadow(0 16px 12px rgba(45, 45, 45, 0.26)); transform: rotate(3deg); }

/* Escalera de servicios */
.escalera { display: grid; gap: var(--e-2); margin-top: var(--e-5); }
.peldano {
  background: var(--papel); color: var(--carbon);
  padding: var(--e-3);
  display: grid; gap: var(--e-1); align-content: start;
  text-decoration: none;
  box-shadow: var(--sombra-papel);
  transition: transform 0.3s var(--salida);
}
.peldano:hover { transform: translateY(-6px) rotate(-0.6deg); }
.peldano img { width: 4.5rem; height: 4.5rem; object-fit: contain; }
.peldano h3 { margin-top: var(--e-1); }
.peldano__precio { font: 700 1.5rem/1.1 var(--titular); color: var(--rojo); text-transform: uppercase; }
.peldano__precio small { display: block; font: 400 var(--t-sm)/1.4 var(--texto); color: var(--tinta-suave); text-transform: none; margin-top: 0.2rem; }
.peldano p { margin: 0; }
.peldano p:not(.peldano__precio) { font-size: 1rem; }
.peldano__ir { margin-top: var(--e-2); font: 700 0.9375rem/1 var(--titular); text-transform: uppercase; letter-spacing: 0.05em; text-decoration: underline; text-underline-offset: 0.25em; }
.peldano:nth-child(2) { margin-left: 0.75rem; }
.peldano:nth-child(3) { margin-left: 1.5rem; }
.peldano:nth-child(4) { margin-left: 2.25rem; background: var(--amarillo); }
.peldano:nth-child(4) .peldano__precio { color: var(--carbon); }
.peldano:nth-child(4) .peldano__precio small { color: var(--carbon); }
@media (min-width: 40rem) and (max-width: 61.99rem) {
  .escalera { grid-template-columns: 1fr 1fr; }
  .peldano, .peldano:nth-child(n) { margin-left: 0; }
  .peldano:nth-child(even) { transform: translateY(var(--e-2)); }
  .peldano:nth-child(even):hover { transform: translateY(calc(var(--e-2) - 6px)) rotate(-0.6deg); }
}
@media (min-width: 62rem) {
  .escalera { grid-template-columns: repeat(4, 1fr); align-items: end; }
  .peldano, .peldano:nth-child(n) { margin-left: 0; }
  .peldano:nth-child(1) { min-height: 21rem; }
  .peldano:nth-child(2) { min-height: 25rem; }
  .peldano:nth-child(3) { min-height: 29rem; }
  .peldano:nth-child(4) { min-height: 33rem; }
}

/* Dos columnas genéricas */
.dos { display: grid; gap: var(--e-4); align-items: center; }
@media (min-width: 56rem) { .dos { grid-template-columns: 1fr 1fr; gap: var(--e-5); } .dos--texto-ancho { grid-template-columns: 1.2fr 0.8fr; } }

/* Titular con figura: una pieza del collage por sección, pegada junto al titular (ver DESIGN.md, "Imágenes") */
.con-figura { display: grid; gap: var(--e-3) var(--e-5); align-items: center; }
.con-figura > * { min-width: 0; }
.figura { width: min(46%, 10.5rem); justify-self: end; margin-block: -2rem -1.25rem; transform: rotate(4deg); filter: drop-shadow(0 10px 8px rgba(45, 45, 45, 0.2)); }
.figura--grande { width: min(52%, 12rem); }
.figura--collage { width: min(50%, 12rem); margin-block: -0.5rem 0; filter: drop-shadow(0 16px 12px rgba(45, 45, 45, 0.26)); }
.figura--giro-izq { transform: rotate(-5deg); }
.figura--firma { transform: rotate(-9deg); }
.figura--suelta { justify-self: start; margin-block: 0; }
.campo-oscuro .figura, .campo-rojo .figura { filter: drop-shadow(0 14px 12px rgba(0, 0, 0, 0.32)); }
@media (min-width: 44rem) {
  .con-figura { grid-template-columns: minmax(0, 1fr) auto; }
  .con-figura--izq { grid-template-columns: auto minmax(0, 1fr); gap: var(--e-4); }
  .con-figura--izq .figura { order: -1; justify-self: start; }
  .figura { width: clamp(11rem, 19vw, 15rem); margin-block: -1rem; }
  .figura--grande { width: clamp(12.5rem, 22vw, 17.5rem); }
  .figura--collage { width: clamp(13rem, 25vw, 19.5rem); margin-block: 0; }
  .con-figura + .propiedad, .con-figura + .filas, .con-figura + .trabajos { margin-top: var(--e-3); }
  .figura--baja { width: clamp(12rem, 21vw, 16rem); }
  .figura--suelta { width: clamp(11rem, 22vw, 17rem); margin-block: var(--e-2) 0; }
}

/* Pegatina: gráfico chico pegado en la esquina de otra pieza */
.panel-caja { position: relative; max-width: 30rem; margin-inline: auto; }
.pegatina { position: absolute; z-index: 1; top: -2.9rem; right: -0.4rem; width: 6rem; transform: rotate(13deg); filter: drop-shadow(0 8px 6px rgba(45, 45, 45, 0.22)); }
@media (min-width: 56rem) { .pegatina { width: 7.5rem; top: -3.75rem; right: -2rem; } }

/* Lista con marca de estrella */
.lista { display: grid; gap: 0.75rem; margin-top: var(--e-3); }
.lista li { position: relative; padding-left: 1.9rem; max-width: 58ch; }
.lista li::before {
  content: ""; position: absolute; left: 0; top: 0.28em; width: 1.15rem; height: 1.15rem;
  background: url("/img/post2-09-destello-amarillo.svg") center / contain no-repeat;
}
.campo-amarillo .lista li::before, .lista--rojo li::before { background-image: url("/img/recurso-07-estallido-rojo.svg"); }

/* Panel de ejemplo */
.panel-demo { background: var(--hoja); border: 2px solid var(--carbon); box-shadow: var(--sombra-papel); transform: rotate(1.2deg); max-width: 30rem; margin-inline: auto; width: 100%; }
.panel-demo__barra { display: flex; align-items: center; gap: 0.4rem; padding: 0.6rem 0.9rem; background: var(--azul); color: var(--papel); font: 700 0.875rem/1 var(--titular); text-transform: uppercase; letter-spacing: 0.06em; }
.panel-demo__barra i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--rojo); }
.panel-demo__barra i:nth-child(2) { background: var(--amarillo); }
.panel-demo__barra i:nth-child(3) { background: var(--papel); margin-right: 0.5rem; }
.panel-demo__cuerpo { padding: var(--e-2) var(--e-2) var(--e-1); }
.panel-demo__resumen { display: flex; gap: var(--e-3); padding-bottom: var(--e-2); border-bottom: 2px solid var(--carbon); }
.panel-demo__resumen b { display: block; font: 700 2rem/1 var(--titular); font-variant-numeric: tabular-nums; }
.panel-demo__resumen span { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--tinta-suave); }
.panel-demo li { display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 0.75rem; padding: 0.7rem 0; border-bottom: 1px solid #d6d2bf; }
.panel-demo li:last-child { border-bottom: 0; }
.panel-demo li b { font-weight: 700; }
.panel-demo li span { grid-column: 1; font-size: var(--t-sm); color: var(--tinta-suave); }
.estado { grid-row: 1 / span 2; grid-column: 2; align-self: center; font: 700 0.75rem/1 var(--titular); text-transform: uppercase; letter-spacing: 0.06em; padding: 0.4rem 0.55rem; border: 2px solid var(--carbon); }
.estado--nuevo { background: var(--amarillo); }
.estado--cerrado { background: var(--azul); color: var(--papel); border-color: var(--azul); }
.pie-demo { text-align: center; margin-top: var(--e-2); font-size: var(--t-xs); color: var(--tinta-suave); }

/* Pasos del proceso: el orden importa, por eso van numerados */
.pasos { counter-reset: paso; display: grid; gap: var(--e-3) var(--e-5); margin-top: var(--e-5); }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 3.4rem 1fr; gap: 0 var(--e-2); align-items: start; }
.pasos li::before { content: counter(paso); font: 700 3.4rem/0.85 var(--titular); color: var(--rojo); }
.pasos h3 { font-size: 1.375rem; }
.pasos p { margin: 0.35rem 0 0; font-size: 1rem; }
@media (min-width: 56rem) { .pasos { grid-template-columns: 1fr 1fr; } }

/* Lo que incluye toda web */
.incluye { display: grid; gap: var(--e-4); margin-top: var(--e-5); }
.incluye h3 { font-size: 1.5rem; padding-bottom: 0.6rem; border-bottom: 2px solid currentColor; }
.incluye .lista { margin-top: var(--e-2); }
.incluye .lista li { font-size: 1rem; }
@media (min-width: 56rem) { .incluye { grid-template-columns: repeat(3, 1fr); gap: var(--e-5); } }

/* Branding: muestra del sistema de marca */
.muestra { display: grid; gap: var(--e-4); margin-top: var(--e-5); align-items: center; }
.muestra__colores { display: grid; grid-template-columns: repeat(5, 1fr); }
.muestra__colores span { display: flex; align-items: flex-end; min-height: 7rem; padding: 0.5rem; font: 700 var(--t-xs)/1.25 var(--texto); color: var(--hoja); }
.muestra__titular { font: 700 var(--t-2xl)/1 var(--titular); text-transform: uppercase; margin: 0 0 var(--e-1); }
.muestra__tipo p:last-child { margin: 0; font-size: var(--t-lg); }
.muestra__piezas { display: flex; align-items: center; gap: var(--e-2); }
.muestra__piezas img { width: 30%; filter: drop-shadow(0 14px 12px rgba(0, 0, 0, 0.32)); }
.muestra__piezas img:nth-child(1) { transform: rotate(-5deg); }
.muestra__piezas img:nth-child(2) { width: 24%; filter: none; }
.muestra__piezas img:nth-child(3) { transform: rotate(4deg); }
@media (max-width: 30rem) { .muestra__colores span { min-height: 5rem; font-size: 0.6875rem; padding: 0.35rem; } }
@media (min-width: 56rem) { .muestra { grid-template-columns: 1.1fr 0.9fr; } .muestra__piezas { grid-column: 1 / -1; justify-content: center; } .muestra__piezas img { width: 16%; } .muestra__piezas img:nth-child(2) { width: 12%; } }

/* Tuyo / servicio */
.propiedad { display: grid; gap: var(--e-4); margin-top: var(--e-5); }
.propiedad h3 { font-size: 1.5rem; padding-bottom: 0.6rem; border-bottom: 2px solid currentColor; }
.propiedad li { padding: 0.65rem 0; border-bottom: 1px solid rgba(251, 250, 244, 0.35); }
@media (min-width: 48rem) { .propiedad { grid-template-columns: 1fr 1fr; gap: var(--e-5); } }

/* Trabajos: cada web en su ventana de navegador; al pasar el cursor la captura recorre la página */
.trabajos {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(84%, 22rem); gap: var(--e-3);
  margin: var(--e-4) calc(var(--margen) * -1) 0; padding: 0.5rem var(--margen) var(--e-3);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margen);
  scrollbar-width: thin; scrollbar-color: var(--rojo) transparent; overscroll-behavior-x: contain;
}
.trabajo { display: grid; gap: 0.3rem; align-content: start; text-decoration: none; scroll-snap-align: start; }
.trabajo__ventana { display: block; background: var(--hoja); border: 2px solid var(--carbon); box-shadow: var(--sombra-papel); margin-bottom: 0.85rem; transition: transform 0.45s var(--salida), box-shadow 0.45s var(--salida); }
.trabajo__barra { display: flex; align-items: center; gap: 0.35rem; padding: 0.5rem 0.7rem; background: var(--carbon); color: var(--papel); }
.trabajo__barra i { flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--rojo); }
.trabajo__barra i:nth-child(2) { background: var(--amarillo); }
.trabajo__barra i:nth-child(3) { background: var(--papel); }
.trabajo__barra em { flex: 1; min-width: 0; margin-left: 0.4rem; padding: 0.22rem 0.6rem; background: rgba(239, 236, 221, 0.14); font: 600 0.75rem/1.2 var(--texto); font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trabajo__vista { display: block; aspect-ratio: 8 / 5; overflow: hidden; container-type: size; background: var(--papel-hondo); }
.trabajo__vista img { width: 100%; height: auto; transition: transform 0.9s var(--salida); }
.trabajo b { font: 700 var(--t-xl)/1.05 var(--titular); text-transform: uppercase; }
.trabajo__texto { color: var(--tinta-suave); font-size: var(--t-sm); max-width: 38ch; }
.trabajo:hover .trabajo__ventana, .trabajo:focus-visible .trabajo__ventana { transform: translateY(-6px) rotate(-0.7deg); box-shadow: 0 1px 1px rgba(45, 45, 45, 0.18), 0 26px 34px -16px rgba(45, 45, 45, 0.6); }
.trabajo:hover .trabajo__vista img, .trabajo:focus-visible .trabajo__vista img { transform: translateY(calc(100cqh - 100%)); transition: transform 5s cubic-bezier(0.45, 0, 0.3, 1) 0.15s; }
.trabajo:hover b { color: var(--rojo); }
/* En pantallas táctiles no hay cursor: la captura de la web que está a la vista recorre su página sola, ida y vuelta (js/strike.js pone .viendo) */
@media (prefers-reduced-motion: no-preference) {
  .trabajo.viendo .trabajo__vista img { animation: recorrer 8s 0.2s cubic-bezier(0.45, 0, 0.3, 1) infinite alternate both; }
  @keyframes recorrer { 0%, 6% { transform: translateY(0); } 94%, 100% { transform: translateY(calc(100cqh - 100%)); } }
}
/* En celular los trabajos son un carrusel: la tarjeta siguiente asoma y hay flechas con el número de web */
.trabajos { grid-auto-columns: min(78%, 21rem); gap: var(--e-2); }
.trabajos-control { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); margin-top: var(--e-1); }
.trabajos-control[hidden] { display: none; }
.trabajos-control p { margin: 0; font-size: var(--t-sm); color: var(--tinta-suave); text-align: center; }
.trabajos-control b { font: 700 1.25rem/1 var(--titular); color: var(--carbon); }
.trabajos-control button { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; padding: 0; cursor: pointer; background: var(--carbon); color: var(--papel); border: 2px solid var(--carbon); transition: background-color 0.2s ease-out, transform 0.25s var(--salida); }
.trabajos-control button:active { transform: scale(0.94); }
.trabajos-control button:disabled { background: transparent; color: var(--tinta-suave); border-color: currentColor; opacity: 0.45; cursor: default; }
.trabajos-control svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: square; }
@media (prefers-reduced-motion: no-preference) {
  .trabajos-control:not([hidden]) button[data-ir="1"]:not(:disabled) { animation: asoma 1.6s 1s var(--salida) 3; }
  @keyframes asoma { 50% { transform: translateX(6px); } }
}
@media (min-width: 44rem) {
  .trabajos-control { display: none; }
  .trabajos { grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-auto-columns: auto; gap: var(--e-4) var(--e-3); margin-inline: 0; padding: 0; overflow: visible; }
}
@media (min-width: 62rem) { .trabajos { grid-template-columns: repeat(3, 1fr); gap: var(--e-5) var(--e-4); } }

/* Planes */
.planes { display: grid; gap: var(--e-3); margin-top: var(--e-5); align-items: stretch; }
.plan { background: var(--hoja); border: 2px solid var(--carbon); padding: var(--e-3); display: flex; flex-direction: column; gap: var(--e-2); }
.plan > p { margin-bottom: 0; }
.plan > .boton { margin-top: auto; }
.plan > .lista { margin-bottom: var(--e-1); }
.plan--destacado { background: var(--azul); color: var(--papel); border-color: var(--azul); box-shadow: var(--sombra-papel); }
.plan h3 { font-size: 1.75rem; }
.plan__desde { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; margin: 0; }
.plan__precio { font: 700 clamp(2.4rem, 2rem + 2vw, 3rem)/0.95 var(--titular); color: var(--rojo); margin: 0; font-variant-numeric: tabular-nums; }
.plan--destacado .plan__precio { color: var(--amarillo); }
.plan__precio small { font: 400 var(--t-sm)/1.3 var(--texto); display: block; margin-top: 0.35rem; color: var(--carbon); text-transform: none; }
.plan--destacado .plan__precio small { color: var(--papel); }
.plan__suscripcion { border-block: 2px solid currentColor; padding-block: 0.8rem; margin: 0; font-size: 1rem; }
.con-iva { display: block; margin-top: 0.3rem; font: 600 var(--t-sm)/1.3 var(--texto); opacity: 0.82; }
.plan__suscripcion b { font: 700 1.25rem/1.1 var(--titular); }
.plan .lista { margin-top: 0; }
.plan .lista li { font-size: 1rem; }
.plan--destacado .boton--linea { color: var(--papel); border-color: var(--papel); }
.plan--destacado .boton--linea:hover { background: var(--papel); color: var(--carbon); }
.plan--ancho { background: var(--amarillo); }
.plan--ancho > div { display: grid; gap: var(--e-2); align-content: start; }
.plan--ancho .plan__precio { color: var(--carbon); text-transform: uppercase; }
.plan--ancho .boton { justify-self: start; background: var(--azul); border-color: var(--azul); }
.plan--ancho .boton:hover { background: var(--carbon); border-color: var(--carbon); }
.plan--ancho .lista li::before { background-image: url("/img/recurso-07-estallido-rojo.svg"); }
@media (min-width: 60rem) { .planes { grid-template-columns: repeat(3, 1fr); } .planes--dos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) {
  .plan--destacado { transform: translateY(-0.75rem) rotate(-0.5deg); }
  .plan--ancho { display: grid; grid-column: 1 / -1; grid-template-columns: 1.1fr 0.9fr; gap: var(--e-5); align-items: center; }
}

/* Tabla simple de adicionales */
.filas { margin-top: var(--e-4); border-top: 2px solid currentColor; }
.filas > div { display: grid; gap: 0.2rem var(--e-3); padding: var(--e-2) 0; border-bottom: 1px solid currentColor; }
.filas b { font: 700 1.25rem/1.15 var(--titular); text-transform: uppercase; }
.filas strong { font: 700 1.25rem/1.15 var(--titular); color: var(--rojo); white-space: nowrap; font-variant-numeric: tabular-nums; }
.campo-oscuro .filas strong { color: var(--amarillo); }
.filas p { margin: 0; font-size: 1rem; }
@media (min-width: 48rem) { .filas > div { grid-template-columns: 15rem 1fr auto; align-items: baseline; } }

/* Preguntas */
.preguntas { margin-top: var(--e-4); border-top: 2px solid var(--carbon); max-width: 52rem; }
.preguntas details { border-bottom: 2px solid var(--carbon); }
.preguntas summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--e-2); align-items: center; min-height: 3.5rem; padding: 0.75rem 0; font: 700 1.25rem/1.2 var(--titular); text-transform: uppercase; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; font-size: 1.75rem; line-height: 1; color: var(--rojo); transition: transform 0.3s var(--salida); }
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas details p { padding-bottom: var(--e-2); margin: 0; }

/* Cierre */
.cierre__grilla { display: grid; gap: var(--e-3); align-items: center; }
.cierre img { width: min(64%, 17rem); margin-inline: auto; filter: drop-shadow(0 14px 10px rgba(45, 45, 45, 0.28)); transform: rotate(-4deg); }
.cierre h2 { font-size: var(--t-3xl); max-width: 11ch; }
@media (min-width: 56rem) { .cierre__grilla { grid-template-columns: 0.7fr 1.3fr; gap: var(--e-5); } .cierre img { width: 100%; max-width: 22rem; } }

/* Formulario de contacto */
.formulario { display: grid; gap: var(--e-2); background: var(--hoja); border: 2px solid var(--carbon); padding: var(--e-3); box-shadow: var(--sombra-papel); }
.formulario label { display: grid; gap: 0.35rem; font-weight: 700; font-size: 1rem; }
.formulario input, .formulario select, .formulario textarea {
  font: 400 1.0625rem/1.4 var(--texto); color: var(--carbon);
  background: var(--papel); border: 2px solid var(--carbon); border-radius: 0;
  min-height: 3rem; padding: 0.6rem 0.75rem; width: 100%; caret-color: var(--rojo);
}
.formulario textarea { min-height: 7.5rem; resize: vertical; }
.formulario input:focus-visible, .formulario select:focus-visible, .formulario textarea:focus-visible { outline-offset: 0; background: var(--hoja); }
.formulario .error { color: var(--rojo); font-weight: 700; font-size: var(--t-sm); min-height: 1.3em; margin: 0; }
.formulario [aria-invalid="true"] { border-color: var(--rojo); }
.contacto-directo { display: grid; justify-items: start; gap: 0.25rem; margin-top: var(--e-3); }
.contacto-directo a { display: inline-flex; align-items: center; min-height: 2.75rem; font: 700 var(--t-lg)/1.2 var(--titular); text-transform: uppercase; overflow-wrap: anywhere; }
.contacto-directo a:hover { color: var(--rojo); }

/* Calendario de reservas */
.agenda { display: block; width: 100%; height: 46rem; margin-top: var(--e-4); border: 2px solid var(--carbon); background: var(--hoja); }

/* Texto legal */
.legal h2 { font-size: var(--t-xl); margin-top: var(--e-4); margin-bottom: var(--e-1); }
.legal p, .legal li { max-width: 68ch; }
.legal ul { list-style: disc; padding-left: 1.2rem; display: grid; gap: 0.4rem; margin-bottom: var(--e-2); }

/* Pie */
.pie { background: var(--carbon); color: var(--papel); padding-block: var(--e-5) var(--e-3); }
.pie__grilla { display: grid; gap: var(--e-4); }
.pie__logo img { width: 9.5rem; }
.pie__lema { margin-top: var(--e-2); }
.pie h2 { font-size: 1rem; letter-spacing: 0.06em; margin-bottom: var(--e-1); color: var(--amarillo); }
.pie a { text-decoration: none; display: inline-flex; align-items: center; min-height: 2.75rem; }
.pie a:hover { text-decoration: underline; color: var(--amarillo); }
.pie__base { margin-top: var(--e-4); padding-top: var(--e-2); border-top: 1px solid rgba(239, 236, 221, 0.3); font-size: var(--t-sm); color: #c9c6b6; display: flex; flex-wrap: wrap; gap: 0.25rem var(--e-3); justify-content: space-between; }
.pie__base p { margin: 0; }
@media (min-width: 48rem) { .pie__grilla { grid-template-columns: 1.4fr 1fr 1fr; } }

/* ───────── Portada de inicio: primera plana ───────── */
.portada--inicio { padding-bottom: calc(var(--e-6) + 1.5rem); }
.portada--inicio h1 { font-size: clamp(2.2rem, 1.1rem + 4.7vw, 4.9rem); max-width: 16ch; letter-spacing: -0.02em; }
.portada--inicio .collage { width: min(100%, 26rem); }
.collage > * { translate: calc(var(--mx, 0) * var(--p, 10px)) calc(var(--my, 0) * var(--p, 10px) + var(--sy, 0) * var(--s, 0px)); transition: translate 0.6s var(--salida); will-change: translate; }
.collage__trama { --p: 6px; --s: 30px; }
.collage__destello { --p: 22px; --s: -50px; }
.collage__figura { --p: 12px; --s: -16px; }
.collage__bocadillo { inset: auto auto 3% -4%; width: 34%; --p: 30px; --s: -90px; rotate: -9deg; filter: drop-shadow(0 12px 10px rgba(45, 45, 45, 0.26)); }
.collage__cursor { inset: auto 0 10% auto; width: 30%; --p: 38px; --s: -120px; rotate: 6deg; filter: drop-shadow(0 12px 10px rgba(45, 45, 45, 0.26)); }
@media (min-width: 56rem) {
  .portada--inicio { min-height: calc(100svh - 4.4rem); display: grid; align-items: center; padding-top: var(--e-4); }
  .portada--inicio .contenedor { max-width: 86rem; }
  .portada--inicio .portada__grilla { grid-template-columns: 1.22fr 0.78fr; gap: var(--e-3); }
  .portada--inicio .collage { width: 122%; max-width: 42rem; margin-right: -14%; justify-self: end; }
}
@media (prefers-reduced-motion: no-preference) {
  .portada--inicio .recorte { animation: pegar-recorte 0.7s 0.25s var(--salida) both; }
  .collage__bocadillo { animation: pegar-suelto 0.9s 0.3s var(--salida) both; }
  .collage__cursor { animation: pegar-suelto 0.9s 0.42s var(--salida) both; }
  @keyframes pegar-recorte { from { transform: rotate(3deg) scale(1.18); opacity: 0; } }
  @keyframes pegar-suelto { from { transform: translateY(-30px) rotate(12deg) scale(1.2); opacity: 0; } }
}

main { overflow-x: clip; }
/* Cinta de servicios: una tira de papel que cruza entre la portada y la sección siguiente */
.cinta { position: relative; z-index: 3; width: 106vw; margin: -2.4rem -3vw -2.1rem; overflow: hidden; background: var(--amarillo); color: var(--carbon); border-block: 2px solid var(--carbon); transform: rotate(-1.4deg); box-shadow: 0 14px 22px -14px rgba(45, 45, 45, 0.55); }
.cinta__pista { display: flex; align-items: center; gap: 1.4rem; width: max-content; padding-block: 0.7rem; font: 700 clamp(1.25rem, 0.9rem + 1.6vw, 2.1rem)/1 var(--titular); text-transform: uppercase; letter-spacing: 0.01em; white-space: nowrap; }
.cinta__pista img { width: 1.1em; height: 1.1em; flex: none; }
.cinta__pista > :last-child { margin-right: 1.4rem; }
@media (prefers-reduced-motion: no-preference) {
  .cinta__pista { animation: cinta 38s linear infinite; }
  .cinta:hover .cinta__pista { animation-play-state: paused; }
  @keyframes cinta { to { transform: translateX(-50%); } }
}
.cinta + .seccion { padding-top: calc(var(--e-6) + 1.5rem); }

/* Piezas que se pegan al entrar en pantalla. Solo con JavaScript y fuera de la primera pantalla (js/strike.js). */
.pegable { transition: opacity 0.5s ease-out, translate 0.85s var(--salida), rotate 0.85s var(--salida), scale 0.85s var(--salida), transform 0.3s var(--salida); transition-delay: calc(var(--i, 0) * 90ms); }
.pegable.por-pegar { opacity: 0; }
.figura.por-pegar, .pegatina.por-pegar, .cierre img.por-pegar, .portada__figura.por-pegar { translate: 0 -26px; rotate: 9deg; scale: 1.14; }
.recorte.por-pegar { rotate: 4deg; scale: 1.2; }
.peldano.por-pegar, .plan.por-pegar, .trabajo.por-pegar { translate: 0 2.5rem; }
.panel-demo li.por-pegar { translate: 1.75rem 0; }
.pasos li.por-pegar { translate: -1.25rem 0; }
@media (prefers-reduced-motion: no-preference) {
  .cierre img.visto { animation: sonar 0.5s 0.9s 3; }
  @keyframes sonar { 25% { transform: rotate(-9deg); } 75% { transform: rotate(1deg); } }
}

/* Aviso de cookies: una nota de papel abajo a la izquierda; la medición parte solo si la persona acepta */
.cookies { position: fixed; z-index: 80; left: 1rem; bottom: 1rem; width: min(24rem, calc(100vw - 2rem)); padding: 1rem 1.1rem; background: var(--hoja); color: var(--carbon); border: 2px solid var(--carbon); box-shadow: var(--sombra-papel); transform: rotate(-0.6deg); font-size: var(--t-sm); }
.cookies p { margin: 0 0 0.8rem; max-width: none; }
.cookies div { display: flex; gap: 0.5rem; }
.cookies .boton { flex: 1; min-height: 2.75rem; padding: 0.4rem 0.8rem; font-size: 0.875rem; }
@media (prefers-reduced-motion: no-preference) { .cookies { animation: pegar-cookies 0.6s 0.8s var(--salida) both; } @keyframes pegar-cookies { from { opacity: 0; translate: 0 1.5rem; rotate: 3deg; } } }

/* Cambio de página con fundido, donde el navegador lo permite */
@view-transition { navigation: auto; }

@media (hover: none) {
  .boton:hover, .peldano:hover, .trabajo:hover .trabajo__ventana { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; animation-duration: 0.01ms !important; }
  .trabajo:hover .trabajo__vista img, .trabajo:focus-visible .trabajo__vista img { transform: none; }
}