/* Llorens Servicios Digitales — sistema visual
   ────────────────────────────────────────────────────────────────────────
   Cuarta versión. Las tres anteriores fallaron por el mismo motivo: se
   construían antes de saber la dirección. El recorrido, para no repetirlo —
     1ª  editorial de serifa       → «un texto en blanco y negro con formato»
     2ª  la misma, con cifras      → «no está ni cerca de valer»
     3ª  copiando su web de Diosas → arregla el «parece una página de error»,
         pero «no parece una web de tecnología» y «la paleta no me gusta»
     4ª  ESTA.

   Izan la definió así: «tipo Apple, mostrando calidad y diseño más que mira
   qué futurista soy» — y a la vez «no copies el diseño exacto de Apple» y «no
   quiero ser un calco de los demás».

   Así que de Apple se toma el MÉTODO, no la piel:
     · materiales translúcidos con el contenido pasando por debajo
     · interletrado específico del tamaño (negativo al crecer, cero en cuerpo)
     · redondeo generoso y sombras grandes y suaves, nunca duras
     · respuesta en el pointer-down, no al soltar
     · simplicidad ≠ minimalismo: quitar hasta que no queda nada fue el error
       de las tres primeras versiones

   Y NADA de su piel: ni sus grises exactos, ni su azul, ni su barra. Los
   neutros llevan una gota de verde-gris propia, y el acento es un azul tinta
   profundo, no el azul eléctrico de las landings de IA. */

:root {
  /* Neutros propios: tintados hacia el gris-verde, no hacia el azul de Apple
     ni hacia el crema. Es la familia que no se adivina sabiendo el sector. */
  --ground:   #FAFAF8;
  --surface:  #FFFFFF;
  --sunk:     #F0F1EE;
  --deep:     #14161A;
  --deep-2:   #1E2126;
  --ink:      #191B1E;
  --ink-soft: #53575C;
  --ink-mute: #6C7075;
  --on-deep:  #F2F3F0;
  --on-deep-soft: #A8ACAF;
  --rule:     #DCDDD8;
  --rule-sutil: rgba(20, 22, 26, .08);

  /* Un solo acento, usado con avaricia. Azul tinta: 8,86:1 sobre blanco, así
     que sirve igual como texto y como fondo de botón con blanco encima. El azul
     de las landings de IA (#2563EB) se queda en 5,17 y no aguanta las dos.

     Y hay una razón de fondo para que la marca NO sea roja: --grave también lo
     era, así que el color de marca y la señal de «esto está mal» del informe
     eran el mismo. Con la marca en azul, el rojo vuelve a significar una sola
     cosa. */
  --acento:      #0F4C81;
  --acento-alto: #8FBEF2;   /* su paso claro, 9,33:1 sobre fondo oscuro */
  --sobre-acento: #FFFFFF;  /* 8,86:1 sobre el acento */

  /* Señales del informe: aquí el color SIGNIFICA algo, y es la única
     saturación que se permite además del acento. Los tres medidos. */
  --grave: #B0303F;   /* 6,29:1 sobre blanco */
  --medio: #8C6011;   /* 5,53:1 — el ocre directo se queda en 3,98 */
  --bien:  #2F6B43;   /* 6,35:1 */

  --sans: "Segoe UI Variable Display", "Segoe UI", -apple-system,
          BlinkMacSystemFont, system-ui, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  --r-s: 12px;
  --r-m: 20px;
  --r-l: 28px;
  --r-pill: 980px;

  /* Sombras grandes y suaves. Una sombra dura parece un recorte pegado; una
     amplia y difusa parece un objeto apoyado en una superficie. */
  --sombra-s: 0 2px 8px rgba(20, 22, 26, .05), 0 1px 2px rgba(20, 22, 26, .06);
  --sombra-m: 0 14px 36px rgba(20, 22, 26, .09), 0 3px 8px rgba(20, 22, 26, .05);
  --sombra-l: 0 44px 100px rgba(20, 22, 26, .16), 0 10px 28px rgba(20, 22, 26, .08);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0C0E11;
    --surface: #16191D;
    --sunk: #101318;
    --deep: #08090B;
    --deep-2: #16191D;
    --ink: #F0F1EE;
    --ink-soft: #A9ADB2;
    --ink-mute: #878B90;
    --rule: #2C3036;
    --rule-sutil: rgba(255, 255, 255, .10);
    --acento: #8FBEF2;
    /* En oscuro el acento se aclara, asi que encima va tinta y no blanco: el
       blanco sobre el acento claro daba 1,94:1. Con el rojo anterior ya daba
       3,37 y tambien fallaba; se arregla ahora que el token se toca. */
    --sobre-acento: #0B1B2B;
    --grave: #E5606E;
    --medio: #E0A93F;
    --bien:  #5FC27E;
    --sombra-s: 0 2px 8px rgba(0, 0, 0, .5);
    --sombra-m: 0 14px 36px rgba(0, 0, 0, .55);
    --sombra-l: 0 44px 100px rgba(0, 0, 0, .7);
  }
}

* { box-sizing: border-box; }

/* Tipografía del sistema: ya trae ajustes ópticos y tablas de interletrado que
   ninguna fuente cargada iguala, y no bloquea el renderizado. */
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: 0;          /* el cuerpo va a cero: solo se aprieta lo grande */
  -webkit-font-smoothing: antialiased;
}

/* ── Rejilla ─────────────────────────────────────────────────────────── */
.banda    { padding: clamp(3.2rem, 8vw, 6.5rem) clamp(1.2rem, 4vw, 2rem); }
.caja     { max-width: 74rem; margin: 0 auto; }
.estrecho { max-width: 46rem; }
.hundida  { background: var(--sunk); }

/* ── Tipografía ──────────────────────────────────────────────────────────
   El interletrado es específico del tamaño: negativo cuando el texto crece —a
   tamaño grande las letras se leen demasiado separadas— y cero en el cuerpo.
   Un único valor para todo está mal en algún sitio. */
h1, h2, h3 { font-weight: 650; text-wrap: balance; margin: 0 0 .6em; }
h1 { font-size: clamp(2.15rem, 4.9vw, 3.35rem); line-height: 1.06; letter-spacing: -.028em; }
h2 { font-size: clamp(1.85rem, 4.2vw, 2.8rem); line-height: 1.1;  letter-spacing: -.024em; }
h3 { font-size: clamp(1.22rem, 2.6vw, 1.5rem); line-height: 1.25; letter-spacing: -.014em; }

p, li { text-wrap: pretty; margin: 0 0 1rem; }
p  { max-width: 38em; color: var(--ink-soft); }
li { color: var(--ink-soft); margin-bottom: .5rem; }
p strong, li strong { color: var(--ink); font-weight: 600; }

.lead {
  font-size: clamp(1.1rem, 2.2vw, 1.32rem);
  line-height: 1.48; letter-spacing: -.008em;
  color: var(--ink-soft); max-width: 32em;
}

/* Etiqueta: es texto pequeño, así que su interletrado va POSITIVO. */
.etiqueta {
  font-size: .79rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--acento);
  margin: 0 0 1rem;
}

a { color: var(--acento); text-underline-offset: .2em; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 6px;
}

/* ── Material translúcido ────────────────────────────────────────────────
   La barra no es una franja opaca que se come un trozo de pantalla: es una
   lámina de material con el contenido pasando por debajo. */
.chrome {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--ground) 74%, transparent);
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  border-bottom: 1px solid var(--rule-sutil);
}
.chrome-in {
  max-width: 74rem; margin: 0 auto; min-height: 54px;
  display: flex; align-items: center; gap: 1rem;
  padding: .5rem clamp(1.2rem, 4vw, 2rem);
}

.logo {
  text-decoration: none; display: flex; align-items: baseline; gap: .5rem;
  min-height: 44px; align-content: center; flex-wrap: wrap;
}
.logo-nombre { font-size: 1.16rem; font-weight: 650; letter-spacing: -.022em; color: var(--ink); }
.logo-cola {
  font-size: .61rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-mute);
}

/* Navegación en píldora: deja de ser cuatro enlaces sueltos y pasa a ser un
   control con estado. Era lo de «el menú es muy plano y sin personalidad». */
.nav {
  display: none; margin: 0 auto; gap: .15rem;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border-radius: var(--r-pill); padding: .22rem;
}
@media (min-width: 64rem) { .nav { display: flex; } }
.nav a {
  text-decoration: none; color: var(--ink-soft);
  font-size: .88rem; font-weight: 550; letter-spacing: -.006em;
  padding: .45rem .95rem; border-radius: var(--r-pill);
  transition: color 200ms ease-out, background 200ms ease-out;
}
.nav a:hover { color: var(--ink); background: color-mix(in srgb, var(--surface) 85%, transparent); }
.nav a[aria-current="page"] { color: var(--ink); background: var(--surface); box-shadow: var(--sombra-s); }

/* ── Botones ─────────────────────────────────────────────────────────────
   Respuesta en el pointer-down, no al soltar: en cuanto se pulsa, se hunde.
   Esperar al click para dar señal es lo que hace que algo parezca muerto. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: .75rem 1.5rem;
  border-radius: var(--r-pill); border: 0; cursor: pointer;
  font-family: inherit; font-size: .97rem; font-weight: 600;
  letter-spacing: -.01em; text-decoration: none; text-align: center;
  transition: transform 120ms ease-out, background 200ms ease-out, box-shadow 200ms ease-out;
}
.btn:active { transform: scale(.97); }
.btn-primario { background: var(--acento); color: var(--sobre-acento); box-shadow: var(--sombra-s); }
.btn-primario:hover { background: color-mix(in srgb, var(--acento) 87%, #000); box-shadow: var(--sombra-m); }
.btn-secundario { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.btn-secundario:hover { background: color-mix(in srgb, var(--ink) 11%, transparent); }
.btn-chico { min-height: 38px; padding: .45rem 1.05rem; font-size: .87rem; }

.dato { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ── Ficha de identidad (páginas legales) ───────────────────────────── */
.ficha {
  background: var(--surface); border-radius: var(--r-m);
  box-shadow: var(--sombra-s); padding: clamp(1.2rem, 3vw, 1.8rem); margin: 1.5rem 0;
}
.ficha dl { margin: 0; display: grid; gap: .6rem 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 34rem) { .ficha dl { grid-template-columns: max-content 1fr; } }
.ficha dt { color: var(--ink-mute); font-size: .86rem; }
.ficha dd { margin: 0; color: var(--ink); }
.ficha dd a { display: inline-block; padding: .62rem 0; }

.indice { list-style: none; padding: 0; margin: 1.8rem 0 0; }
.indice li { margin-bottom: .3rem; }
.indice a { display: inline-block; min-height: 44px; line-height: 44px; }

.sello {
  display: inline-block; font-size: .78rem; font-weight: 600; letter-spacing: .04em;
  color: var(--ink-mute); background: color-mix(in srgb, var(--ink) 5%, transparent);
  padding: .32rem .8rem; border-radius: var(--r-pill);
}

/* ── Pie ────────────────────────────────────────────────────────────── */
.pie { background: var(--sunk); color: var(--ink-soft); }
.pie a { color: var(--ink-soft); }
.pie-in { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 46rem) { .pie-in { grid-template-columns: 1fr auto; } }

/* El titular va en --ink-soft y no en --ink-mute a proposito: sobre --sunk el
   mute se queda en 4,40:1 y no llega. Pasa 4,5 sobre --ground, que es donde se
   midio en su dia, pero el pie no es --ground. Medido, no estimado. */
.pie-titular { margin: 0 0 .9rem; font-size: .93rem; color: var(--ink-soft); }

.pie-legal { display: flex; flex-wrap: wrap; gap: 0 1.2rem; margin: 0; font-size: .93rem; }
.pie-legal a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ink-soft); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--rule);
}
.pie-legal a:hover { color: var(--ink); text-decoration-color: currentColor; }

/* ── Accesibilidad ──────────────────────────────────────────────────────
   Movimiento reducido no es «sin señal»: es una señal más suave. Y si el
   sistema pide menos transparencia, el material se vuelve sólido en vez de
   dejar el texto ilegible encima. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .chrome { background: var(--ground); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav { background: var(--sunk); }
}
@media (prefers-contrast: more) {
  .chrome { background: var(--ground); backdrop-filter: none; }
}

/* ── Portada ─────────────────────────────────────────────────────────────
   Estructura corregida por dos cosas que dijo Izan:

   «La sección de las opciones está demasiado abajo» → las dos puertas suben al
   primer golpe de vista. Es coherente con ARQUITECTURA.md: el único trabajo de
   la portada es clasificarte, así que hacerte bajar para elegir es hacerle
   perder el tiempo a todo el mundo.

   «Todo es muy plano» → la profundidad viene de material y luz, no de neones:
   luz difusa detrás de lo importante, superficies con el canto superior
   iluminado, y elevación al pasar por encima. */

/* ── Hero ────────────────────────────────────────────────────────────────
   La luz de fondo es muy tenue a propósito: solo se nota si la quitas. Ese es
   justamente el punto — textura, no decoración. */
.hero-banda {
  position: relative; overflow: hidden;
  padding-top: clamp(2.8rem, 7vw, 5rem);
}
.hero-banda::before {
  content: ""; position: absolute; inset: -30% -10% auto -10%; height: 80%;
  background:
    radial-gradient(60% 60% at 70% 20%, color-mix(in srgb, var(--acento) 11%, transparent), transparent 70%),
    radial-gradient(50% 50% at 15% 0%, color-mix(in srgb, var(--ink) 7%, transparent), transparent 72%);
  pointer-events: none;
}
.hero-banda > * { position: relative; }

.hero-txt { max-width: 40rem; }
.acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin: 2rem 0 0; }

/* La promesa ocupa el sitio que dejó el precio. Va como nota, no como párrafo:
   se lee distinto y no compite con el titular. */
.promesa {
  margin: 1.6rem 0 0; font-size: .95rem; color: var(--ink-mute);
  max-width: 34em; display: flex; gap: .7rem;
}
.promesa::before {
  content: ""; flex: 0 0 2px; border-radius: 2px;
  background: color-mix(in srgb, var(--acento) 55%, transparent);
}


/* El bloque entero es un <a>, asi que h3 y p heredaban el color del enlace y
   salian en rojo. El acento se queda SOLO en la linea de accion. */

/* ── El informe, enseñado grande ────────────────────────────────────────
   Es el producto. Se presenta como se presenta un objeto: grande, centrado,
   con luz difusa detrás y apoyado sobre su propia sombra. */
.escaparate { position: relative; }
.escaparate::before {
  content: ""; position: absolute; left: 50%; top: 8%;
  width: min(78%, 42rem); height: 70%; transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--acento) 16%, transparent), transparent 70%);
  filter: blur(46px); pointer-events: none;
}
/* La señal es una pastilla con TEXTO, no dos signos de admiración sueltos: el
   color nunca puede ser el único portador del significado. */
.senal {
  grid-row: span 2; font-size: .68rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; padding: .3rem .62rem; border-radius: var(--r-pill);
  white-space: nowrap; margin-top: .12rem;
}
.senal.grave { color: var(--grave); background: color-mix(in srgb, var(--grave) 11%, transparent); }
.senal.medio { color: var(--medio); background: color-mix(in srgb, var(--medio) 13%, transparent); }
.senal.bien  { color: var(--bien);  background: color-mix(in srgb, var(--bien) 12%, transparent); }


/* ── Cifras ─────────────────────────────────────────────────────────────
   Cada una responde a una pregunta distinta, y la última dice lo que TODAVÍA
   no se puede afirmar — que es lo que hace creíbles a las otras tres. */
.cifras { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.cifra {
  background: var(--surface); border-radius: var(--r-m);
  box-shadow: var(--sombra-s); padding: 1.7rem 1.4rem;
}
.cifra b {
  display: block; font-size: clamp(2.1rem, 4.4vw, 2.7rem);
  font-weight: 650; line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.cifra span { display: block; margin-top: .6rem; font-size: .88rem; color: var(--ink-soft); line-height: 1.45; }
.cifra.destacada b { color: var(--acento); }
.cifra.callada b { color: var(--ink-mute); }

/* ── Secciones de contenido ──────────────────────────────────────────────
   Izan, tras ver aivalencia.dev: «sigue estando muy escueto, sobre todo el
   contenido; falta que te apetezca quedarte en la web y claridad».

   Tenía razón y el dato es duro: esa referencia tiene 13 secciones y la portada
   tenía 4. Se copia su ORDEN ARGUMENTAL —problema → método → qué sale → caso →
   para quién → preguntas → acción— y NO sus cifras, que son de folleto sin
   medir («reducción de costes 30-60 %», «3× decisiones»). Publicar eso iría
   justo contra la regla de no afirmar resultados antes de su fecha de medición.

   La sección que más «claridad» aporta es la de preguntas, porque contesta en
   vez de insinuar. Va en <details>, así que funciona sin una línea de JS. */

.centrado { text-align: center; }
.centrado .etiqueta, .centrado h2 { text-align: center; }
.lead.centrada { margin-inline: auto; }
.estrecho { margin-inline: 0; }
.centrado .lead { margin-inline: auto; }
.accion-suelta { margin: clamp(2rem, 4vw, 2.8rem) 0 0; }
.centrado.accion-suelta { margin-inline: auto; }
.sin-margen { margin: 0; }
.logo-pie { margin: 0 0 .4rem; }

.escaparate { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.cifras, .hallazgos, .duo, .faq, .pasos { margin-top: clamp(2rem, 4vw, 2.8rem); }

/* ── Pasos del método ────────────────────────────────────────────────────
   El número es grande y en gris muy claro: ordena sin gritar. Cuatro pasos SÍ
   son una secuencia, así que numerarlos informa — que es la condición que pone
   DESIGN.md para poder numerar algo. */
.pasos {
  list-style: none; padding: 0; display: grid; gap: 1rem;
  grid-template-columns: 1fr; counter-reset: paso;
}
@media (min-width: 46rem) { .pasos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 72rem) { .pasos { grid-template-columns: repeat(4, 1fr); } }

.pasos li {
  position: relative; margin: 0; color: inherit;
  background: var(--surface); border-radius: var(--r-l);
  box-shadow: var(--sombra-s); padding: clamp(1.5rem, 3.5vw, 2rem);
}
.paso-num {
  display: block; font-size: 2.4rem; font-weight: 650; line-height: 1;
  letter-spacing: -.04em; color: var(--rule);
  font-variant-numeric: tabular-nums; margin-bottom: .9rem;
}
.pasos h3 { margin: 0 0 .5rem; }
.pasos p  { margin: 0; font-size: .95rem; }

/* ── Hallazgos ───────────────────────────────────────────────────────────
   Es la sección que sustituye al catálogo de servicios. Se lista lo que SALE
   MEDIDO, no lo que se vende: misma información, mensaje opuesto. Por eso no
   lleva icono ni precio ni botón de «saber más». */
.hallazgos {
  display: grid; gap: 1px; background: var(--rule-sutil);
  border-radius: var(--r-l); overflow: hidden;
  grid-template-columns: 1fr;
}
@media (min-width: 44rem) { .hallazgos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 68rem) { .hallazgos { grid-template-columns: repeat(3, 1fr); } }
.hallazgo-item { background: var(--surface); padding: clamp(1.4rem, 3vw, 1.9rem); }
.hallazgo-item h3 { margin: 0 0 .5rem; font-size: 1.12rem; }
.hallazgo-item p  { margin: 0; font-size: .94rem; }

/* ── Para quién sí / para quién no ───────────────────────────────────── */
.duo { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 46rem) { .duo { grid-template-columns: 1fr 1fr; } }
.lista {
  background: var(--surface); border-radius: var(--r-l);
  box-shadow: var(--sombra-s); padding: clamp(1.5rem, 3.5vw, 2.1rem);
}
.lista h3 { margin: 0 0 1rem; }
.lista ul { margin: 0; padding: 0; list-style: none; }
/* Marcador colocado, NO una rejilla de dos columnas. Con rejilla, cualquier
   <li> que lleve dentro un <strong> seguido de texto produce DOS items: el
   segundo cae en la columna de 1,4rem del marcador y sale una palabra por
   línea. Y el texto suelto es un item anónimo, así que no hay selector que lo
   rescate — el arreglo tiene que ser no usar rejilla aquí. */
.lista li {
  position: relative; padding-left: 2rem;
  margin-bottom: .8rem; font-size: .95rem;
}
.lista li::before {
  position: absolute; left: 0; top: 0;
  font-weight: 700; line-height: 1.5;
}
.lista.si  li::before { content: "+"; color: var(--bien); }
.lista.no  li::before { content: "–"; color: var(--ink-mute); }

/* ── Preguntas ───────────────────────────────────────────────────────────
   <details> nativo: funciona sin JavaScript, es accesible por teclado y el
   navegador se encarga del estado. El signo gira al abrir, que es la única
   señal de movimiento que hace falta. */
.faq {
  background: var(--surface); border-radius: var(--r-l);
  box-shadow: var(--sombra-s); overflow: hidden;
}
.faq details { border-bottom: 1px solid var(--rule-sutil); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.15rem clamp(1.2rem, 3vw, 1.8rem);
  font-size: 1.05rem; font-weight: 600; letter-spacing: -.012em;
  color: var(--ink); display: flex; align-items: center; gap: 1rem;
  min-height: 44px;
  transition: background 180ms ease-out;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; margin-left: auto; font-size: 1.4rem; font-weight: 400;
  color: var(--ink-mute); line-height: 1;
  transition: transform 220ms cubic-bezier(.2,.7,.3,1);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.faq details > p {
  margin: 0; padding: 0 clamp(1.2rem, 3vw, 1.8rem) 1.4rem;
  max-width: 46em; font-size: .97rem;
}

/* ── Cierre ─────────────────────────────────────────────────────────────
   Sin urgencia falsa: ni contadores ni «plazas limitadas». Lo que se promete
   es una expectativa concreta y cumplible. */
.cierre { background: var(--deep); color: var(--on-deep); }
.cierre h2 { color: var(--on-deep); }
.cierre .lead { color: var(--on-deep-soft); }
.acciones-centro {
  display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center;
  margin: 2rem 0 0; max-width: none;
}
.cierre .btn-secundario {
  background: rgba(255, 255, 255, .12); color: var(--on-deep);
}
.cierre .btn-secundario:hover { background: rgba(255, 255, 255, .2); }
.microcopia {
  margin: 1.4rem 0 0; font-size: .87rem; color: var(--on-deep-soft);
  max-width: none;
}

/* ── Contenido visual ────────────────────────────────────────────────────
   Izan: «le falta contenido visual», y además la bifurcación en dos rutas se
   retira — «mejor que no nos centremos en esas dos cosas concretas, sino en la
   auditoría general de negocios», y la particularización por tipo de negocio se
   va al mensaje que se le manda a cada prospecto.

   Consecuencia buena y no obvia: al no publicar una página que prometa
   recepcionistas, DESAPARECE el bloqueo de la ruta local. Ya no hace falta una
   demo propia para poder publicar la web.

   Lo visual no son fotos de banco: son las fotos reales del catálogo de
   Marieta (con su permiso escrito), el propio informe, y un set de iconos de
   una sola familia dibujado a mano — trazo 1.6, sin relleno, sin emoji. */

/* ── Hero asimétrico ─────────────────────────────────────────────────── */
.hero {
  display: grid; gap: clamp(2.4rem, 5vw, 3.5rem);
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 64rem) { .hero { grid-template-columns: 1.03fr .97fr; } }
.hero-vis { position: relative; }
.hero .acciones { max-width: none; }

/* ── Iconos ──────────────────────────────────────────────────────────────
   Una sola familia y el color lo pone el contenedor, así que responden al tema
   sin duplicar reglas. */
.ico {
  width: 26px; height: 26px; display: block; margin-bottom: 1rem;
  fill: none; stroke: var(--acento); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── Los ocho campos ─────────────────────────────────────────────────────
   Ocho en horizontal, cuatro por fila. Y al abrir uno, EL DETALLE OCUPA LA
   TABLA ENTERA: la rejilla deja de ser rejilla, las otras siete celdas se
   retiran y queda el campo abierto a lo ancho.

   Antes de esto se probaron dos cosas y las dos estaban peor. Dos columnas con
   un cajon debajo: rompia la forma de ocho, que es lo que hace la seccion. Y un
   panel flotando sobre la celda: cabia mal, se salia por los bordes y habia que
   anclarlo de cuatro maneras segun la fila y la columna — cuatro reglas para
   que algo no se rompa es la señal de que la forma estaba mal elegida.

   El «volver» es el propio <summary>: pulsarlo cierra, y eso lo hace el
   navegador. Por eso esto sigue siendo <details> y no un div con manejadores. */
.rejilla-mira {
  display: grid; gap: 0; background: var(--surface);
  border-radius: var(--r-l);
  grid-template-columns: 1fr; margin-top: clamp(2rem, 4vw, 2.8rem);
}
@media (min-width: 40rem) { .rejilla-mira { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .rejilla-mira { grid-template-columns: repeat(4, 1fr); } }

/* Con un campo abierto la rejilla se retira entera. Sin `:has` el campo abierto
   se ensancharia dentro de la rejilla en vez de sustituirla: peor, pero no
   roto. */
.rejilla-mira:has(.mira[open]) { display: block; }
.rejilla-mira:has(.mira[open]) .mira:not([open]) { display: none; }

.mira {
  background: var(--surface);
  outline: 1px solid var(--rule-sutil); outline-offset: -1px;
}
/* El redondeo del conjunto lo ponen las celdas de las esquinas, y cuales son
   depende de cuantas columnas haya. */
.mira:first-child { border-start-start-radius: var(--r-l); border-start-end-radius: var(--r-l); }
.mira:last-child  { border-end-start-radius: var(--r-l);   border-end-end-radius: var(--r-l); }
@media (min-width: 40rem) {
  .mira:first-child { border-start-end-radius: 0; }
  .mira:nth-child(2) { border-start-end-radius: var(--r-l); }
  .mira:last-child { border-end-start-radius: 0; }
  .mira:nth-child(7) { border-end-start-radius: var(--r-l); }
}
@media (min-width: 64rem) {
  .mira:nth-child(2) { border-start-end-radius: 0; }
  .mira:nth-child(4) { border-start-end-radius: var(--r-l); }
  .mira:nth-child(7) { border-end-start-radius: 0; }
  .mira:nth-child(5) { border-end-start-radius: var(--r-l); }
}
/* Abierto ocupa toda la caja, asi que se redondea por los cuatro lados. */
.mira[open] { border-radius: var(--r-l); }

.mira > summary {
  cursor: pointer; list-style: none;
  padding: clamp(1.4rem, 3vw, 1.8rem);
  transition: background 180ms ease-out;
}
.mira > summary::-webkit-details-marker { display: none; }
.mira > summary:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.mira h3 { margin: 0 0 .45rem; font-size: 1.06rem; }
.mira-corta { display: block; font-size: .92rem; line-height: 1.6; color: var(--ink-soft); max-width: 48em; }

/* La invitacion se dice con palabras, no solo con un signo. */
.mira-abrir, .mira-volver {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: .85rem; font-size: .87rem; font-weight: 600; color: var(--acento);
}
.mira-abrir::after { content: "+"; font-size: 1.15rem; font-weight: 400; line-height: 1; }
/* La flecha va literal, no como escape CSS. El escape se coló por un
   generador en Python, donde una barra invertida seguida de dos-uno se lee
   como octal: salió el byte 0x11 y luego «90», o sea un cuadrito y un
   número en pantalla. El carácter directo no tiene esa trampa, y el
   archivo es UTF-8 con su charset declarado. */
.mira-volver::before { content: "←"; font-size: 1.05rem; line-height: 1; }
.mira:not([open]) .mira-volver { display: none; }
.mira[open] .mira-abrir { display: none; }

/* Abierto: el titulo pasa a ser la cabecera del detalle y la puerta de vuelta. */
.mira[open] > summary { border-bottom: 1px solid var(--rule-sutil); }
.mira[open] h3 { font-size: clamp(1.15rem, 2.4vw, 1.4rem); }

.mira-detalle {
  padding: clamp(1.3rem, 3vw, 1.8rem);
  animation: abrir-campo 200ms ease-out;
}
.mira-detalle p { margin: 0; font-size: .97rem; max-width: 46em; }
@keyframes abrir-campo {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}



/* La última tarjeta es la que dice «si falta algo, se construye». Se marca
   como distinta porque no es un área más: es la respuesta a la objeción. */
.mira.construimos { background: color-mix(in srgb, var(--acento) 6%, var(--surface)); }
.mira.construimos h3 { color: var(--acento); }

/* ── Marca ───────────────────────────────────────────────────────────────
   Segundo intento. El primero era «la idea es buena, pero la ejecución no»: una
   L de trazo fino con graduaciones diminutas que a 22 px se leía como ruido.

   Ahora es una PASTILLA con la escuadra en negativo. Funciona a tamaño pequeño
   por lo mismo que funciona un icono de aplicación: una silueta maciza con una
   forma sencilla dentro. Sigue siendo una escuadra de medir y sigue siendo la L
   de Llorens, con dos graduaciones en el brazo horizontal — las justas para que
   se lea instrumento, no letra. */
/* Los dos catetos gruesos son la L; la hipotenusa fina y las graduaciones la
   convierten en escuadra. El peso de trazo decide el orden de lectura: primero
   la letra, despues el instrumento. Sin eso solo era una L en un cuadro rojo. */
.marca { width: 30px; height: 30px; flex: 0 0 auto; align-self: center; }
.marca-fondo { fill: var(--acento); }
.marca .marca-tinta { fill: #FFFFFF; }

/* ── Banner del concepto ─────────────────────────────────────────────────
   Izan: «falta un banner que explique un poco el concepto entero y le dé una
   estética más visual». Va en banda oscura para que corte la página, y los
   cuatro pasos van encadenados por una línea: aquí la línea ES información,
   porque el orden importa de verdad — el tercero no empieza sin los dos
   primeros. Cuatro tarjetas blancas sueltas no decían eso. */
.banner { background: var(--deep); color: var(--on-deep); position: relative; overflow: hidden; }
.banner::before {
  content: ""; position: absolute; inset: auto -10% -40% -10%; height: 70%;
  background: radial-gradient(50% 60% at 50% 100%, color-mix(in srgb, var(--acento) 26%, transparent), transparent 70%);
  pointer-events: none;
}
.banner > * { position: relative; }
.banner h2 { color: var(--on-deep); }
.banner-cab { text-align: center; max-width: 46rem; margin: 0 auto; }
.banner-cab .lead { color: var(--on-deep-soft); margin-inline: auto; }
.etiqueta.clara { color: var(--acento-alto); }

.via {
  list-style: none; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 0;
  display: grid; gap: 2rem; grid-template-columns: 1fr; position: relative;
}
@media (min-width: 56rem) {
  .via { grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
  /* La línea que encadena los pasos. Se dibuja por detrás de los puntos. */
  .via::before {
    content: ""; position: absolute; top: 21px; left: 12.5%; right: 12.5%;
    height: 1px; background: linear-gradient(90deg,
      transparent, rgba(255,255,255,.28) 12%, rgba(255,255,255,.28) 88%, transparent);
  }
}
.via li { margin: 0; position: relative; }
.via-punto {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--deep); border: 1px solid rgba(255,255,255,.28);
  margin-bottom: 1.1rem;
}
.via-punto b {
  font-size: .82rem; font-weight: 650; letter-spacing: .02em;
  color: var(--acento-alto); font-variant-numeric: tabular-nums;
}
.via h3 { color: var(--on-deep); margin: 0 0 .5rem; font-size: 1.14rem; }
.via p  { color: var(--on-deep-soft); margin: 0; font-size: .93rem; }

/* ── Galería de trabajo ──────────────────────────────────────────────────
   Izan: «en las imágenes del caso no has puesto nada que hayamos hecho
   nosotros, les has metido fotos del catálogo por la cara». Tenía razón: las
   fotos de producto son del CLIENTE y no demuestran nada.

   Esto son capturas de los frentes reales, cada una con su etiqueta: la tienda
   rehecha con el SEO español, el canal inglés, Etsy como canal nuevo, Pinterest
   y el blog. Recortadas para que no salga el panel de administración de nadie. */
.trabajos {
  display: grid; gap: 1rem; grid-template-columns: 1fr;
  margin-top: clamp(2rem, 4vw, 2.8rem);
}
@media (min-width: 46rem) { .trabajos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 68rem) { .trabajos { grid-template-columns: repeat(3, 1fr); } }

.trabajo {
  margin: 0; background: var(--surface); border-radius: var(--r-m);
  box-shadow: var(--sombra-m); overflow: hidden;
  display: flex; flex-direction: column;
}
/* Todas iguales. Antes una ocupaba dos columnas y arrastraba la altura de la
   fila, asi que la de al lado se estiraba y se veia mal escalada. */
.trabajo img {
  /* `height: auto` es imprescindible: el atributo height="760" del HTML se
     mapea a la propiedad height y gana sobre aspect-ratio, asi que sin esto la
     imagen se renderiza a 760 px de alto por muy estrecha que sea la tarjeta. */
  width: 100%; height: auto; display: block; aspect-ratio: 1440 / 760;
  object-fit: cover; object-position: top center;
  background: var(--sunk); border-bottom: 1px solid var(--rule-sutil);
}
.trabajo figcaption {
  padding: 1rem 1.15rem 1.2rem; font-size: .89rem; color: var(--ink-soft);
}
.trabajo figcaption b {
  display: block; color: var(--ink); font-size: 1rem;
  font-weight: 600; letter-spacing: -.01em; margin-bottom: .25rem;
}




/* ── El oficio, en piezas ────────────────────────────────────────────────
   Izan: «eso es una parte demasiado importante de la web como para darle tan
   poca importancia, y el header de la primera sección llama demasiado la
   atención». Las dos cosas eran la misma: la jerarquía estaba invertida — lo
   que hace vivía en una tira fina y el gancho se comía la pantalla.

   Ahora el oficio es el titular, la enumeración se ve sin leerse (es lo que
   resuelve el «no sabes a qué me dedico nada más entrar») y el gancho baja a
   bloque destacado, donde sigue diferenciando sin competir. */
.oficio {
  list-style: none; margin: 1.4rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.oficio li {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0;
  font-size: .92rem; font-weight: 550; color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule);
  box-shadow: var(--sombra-s);
  padding: .48rem .85rem .48rem .7rem; border-radius: var(--r-pill);
}
.oficio svg {
  width: 17px; height: 17px; flex: 0 0 auto;
  fill: none; stroke: var(--acento); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* El giro: el argumento que lo separa de una agencia. Lleva la única superficie
   teñida de acento del hero, para que se lea después del titular y antes que
   los botones. */
.giro {
  margin: 1.6rem 0 0; max-width: 34em;
  font-size: 1.02rem; line-height: 1.5; color: var(--ink-soft);
  background: color-mix(in srgb, var(--acento) 7%, transparent);
  border-left: 3px solid var(--acento);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  padding: .95rem 1.15rem;
}
.giro b { color: var(--ink); font-weight: 650; }

/* ── Contacto ────────────────────────────────────────────────────────────
   La página tiene que entregar lo que promete el botón que trae aquí: «pedir
   mi informe», no un «contacta con nosotros» genérico. Por eso el primer campo
   es la dirección de la web —lo único que de verdad hace falta— y todo lo demás
   es opcional o de un toque.

   Sin servidor: el formulario compone un correo. Y como eso depende de que
   corra el JavaScript, los canales directos van EN LA PROPIA PÁGINA y no
   escondidos en el pie — si el envío falla, nadie se queda sin poder escribir. */
.contacto {
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: 1fr; align-items: start;
}
@media (min-width: 62rem) { .contacto { grid-template-columns: 1.15fr .85fr; } }

.formulario { margin-top: clamp(1.8rem, 4vw, 2.4rem); max-width: 34rem; }
.campo { margin-bottom: 1.3rem; border: 0; padding: 0; }

/* Etiqueta visible SIEMPRE encima del campo, nunca solo el marcador de
   posición: en cuanto escribes, un placeholder-etiqueta desaparece y ya no
   sabes qué te estaban preguntando. */
.campo label, .campo legend {
  display: block; font-size: .93rem; font-weight: 600;
  color: var(--ink); margin-bottom: .4rem; padding: 0;
}
.opcional {
  font-weight: 500; font-size: .8rem; color: var(--ink-mute);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  padding: .1rem .5rem; border-radius: var(--r-pill); margin-left: .3rem;
}
.campo input[type=text], .campo textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-s); padding: .78rem .9rem; min-height: 48px;
  transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
}
.campo textarea { min-height: 92px; resize: vertical; }
.campo input:focus, .campo textarea:focus {
  outline: none; border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 18%, transparent);
}
.campo small { display: block; margin-top: .35rem; font-size: .84rem; color: var(--ink-mute); }

.opciones { display: flex; flex-wrap: wrap; gap: .5rem; }
.opciones label {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0;
  font-weight: 500; font-size: .93rem; cursor: pointer;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-pill); padding: .5rem .9rem; min-height: 44px;
}
.opciones input { accent-color: var(--acento); width: 17px; height: 17px; }
.opciones label:has(input:checked) {
  border-color: var(--acento);
  background: color-mix(in srgb, var(--acento) 8%, var(--surface));
}

.nota-envio { margin: .9rem 0 0; font-size: .87rem; color: var(--ink-mute); max-width: 32em; }

/* ── Lateral ─────────────────────────────────────────────────────────── */
.lateral { display: grid; gap: 1rem; }
.tarjeta-lateral {
  background: var(--surface); border-radius: var(--r-l);
  box-shadow: var(--sombra-m); padding: clamp(1.4rem, 3vw, 1.8rem);
}
.tarjeta-lateral h2 { font-size: 1.15rem; margin: 0 0 .9rem; letter-spacing: -.014em; }
.despues { margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.despues li {
  position: relative; padding-left: 1.9rem; margin-bottom: .8rem;
  font-size: .94rem; counter-increment: paso;
}
.despues li:last-child { margin-bottom: 0; }
.despues li::before {
  content: counter(paso); position: absolute; left: 0; top: .05rem;
  width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background: color-mix(in srgb, var(--acento) 12%, transparent);
  color: var(--acento); font-size: .74rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.despues b { color: var(--ink); }

.canales { display: grid; gap: .3rem; margin: 0; }
.canales a {
  display: flex; align-items: center; min-height: 46px;
  font-weight: 600; font-size: 1rem; color: var(--acento);
  text-decoration: none; border-bottom: 1px solid var(--rule-sutil);
}
.canales a:last-child { border-bottom: 0; }
.canales a:hover { text-decoration: underline; text-underline-offset: .2em; }
.nota-lateral { font-size: .86rem; color: var(--ink-mute); margin: .9rem 0 0; }

.contacto-pie { font-size: 1rem; line-height: 2; }
.contacto-pie a { display: inline-block; min-height: 44px; line-height: 44px; color: var(--ink); font-weight: 550; }
.respaldo {
  margin: .8rem 0 0; font-size: .88rem; color: var(--ink-soft);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border-radius: var(--r-s); padding: .75rem .9rem; max-width: 34em;
}

/* ── Cabecera de oferta ─────────────────────────────────────────────────
   Izan: «un header inspirado en el de aivalencia.dev, con otra animación».

   De esa referencia se toma el PLANTEAMIENTO —superficie oscura a sangre,
   contenido centrado, luz ambiente de color detrás— y no su piel. Su animación
   son tres orbes flotando y un degradado que rota: es el fondo por defecto de
   cualquier landing de IA de 2026, y copiarlo es justo lo que Izan descartó.

   Aquí la animación es un BARRIDO DE MEDICIÓN sobre una escala graduada: una
   luz recorre la banda de izquierda a derecha como el cabezal de un
   instrumento, y las marcas de la regla se encienden a su paso. Dice lo mismo
   que dice la página — aquí primero se mide — en vez de decir «esto va de IA».

   Va oscura, no en acento a sangre: con el azul, una banda saturada a todo lo
   ancho compite con el hero. Oscura sigue siendo lo primero que ve el ojo, pero
   por contraste con la página clara y no por saturación. */
.cabecera {
  position: relative; isolation: isolate; overflow: hidden;
  background: color-mix(in srgb, var(--acento) 26%, var(--deep));
  color: var(--on-deep);
  /* Alta, pero NO a pantalla completa. A pantalla completa el hero de debajo
     —el que dice a qué se dedica— se iría entero bajo el pliegue, y esa era la
     queja que originó todo esto. Al 58 % el hero sigue asomando y se ve que hay
     página debajo. */
  min-height: clamp(22rem, 58vh, 38rem);
  padding: clamp(3.2rem, 8vw, 5.5rem) 0;
  display: flex; align-items: center;
  text-align: center;
}
.cabecera-fondo { position: absolute; inset: 0; z-index: -1; }

/* Luz ambiente fija: sostiene la banda cuando el barrido está fuera de cuadro
   y cuando el usuario ha pedido no ver movimiento. */
.cabecera-fondo::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(78% 130% at 50% -10%,
      color-mix(in srgb, var(--acento) 72%, transparent), transparent 68%),
    radial-gradient(46% 100% at 88% 108%,
      color-mix(in srgb, var(--acento-alto) 13%, transparent), transparent 70%);
}

/* La regla graduada, apoyada en el borde inferior: marca corta cada 26 px y
   marca larga cada 130 px, como una escuadra. Es la textura de la marca. */
.cabecera-escala {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.34) 0 1px, transparent 1px 130px);
  background-size: 100% 9px, 100% 19px;
  background-position: left bottom, left bottom;
  background-repeat: repeat-x, repeat-x;
  animation: regla 1.5s cubic-bezier(.22, .7, .3, 1) .25s backwards;
}
@keyframes regla {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* El cabezal. Sobre transform y opacity, así que anima en el compositor. */
.cabecera-barrido {
  position: absolute; top: -45%; bottom: -45%; left: -44%; width: 44%;
  background: radial-gradient(50% 50% at 50% 50%,
    color-mix(in srgb, var(--acento-alto) 46%, transparent), transparent 72%);
  filter: blur(8px); mix-blend-mode: plus-lighter;
  animation: barrido 17s cubic-bezier(.5, 0, .5, 1) 1.7s infinite backwards;
}
@keyframes barrido {
  0%   { transform: translateX(0);    opacity: 0; }
  14%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { transform: translateX(330%); opacity: 0; }
}

.cabecera-in { position: relative; width: 100%; padding-inline: clamp(1.2rem, 4vw, 2rem); }
.cabecera-titulo {
  margin: .7rem 0 0; color: #FFFFFF; max-width: none;
  font-size: clamp(2rem, 4.8vw, 3.25rem);
  line-height: 1.08; letter-spacing: -.028em; text-wrap: balance;
}
.cabecera-desc {
  margin: 1.1rem auto 0; max-width: 56ch;
  color: #E2E5E7; font-size: clamp(1rem, 1.4vw, 1.12rem); line-height: 1.6;
}
.cabecera-acciones {
  margin: 2.1rem 0 0; display: flex; flex-wrap: wrap;
  gap: .8rem 1.5rem; justify-content: center; align-items: center;
}
/* Botón claro sobre la banda oscura: invertido respecto al de la página,
   porque el azul de marca sobre fondo oscuro pierde presencia. */
.cabecera-btn {
  background: #FFFFFF; color: var(--deep); flex: 0 0 auto;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
}
.cabecera-btn:hover { background: #EDEEEA; }
.cabecera-link {
  color: var(--on-deep); font-size: .95rem; font-weight: 550;
  text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35);
  padding: .3rem 0; min-height: 44px; display: inline-flex; align-items: center;
}
.cabecera-link:hover { border-bottom-color: #FFFFFF; }

@keyframes surge {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.cabecera-in > * { animation: surge .75s cubic-bezier(.2, .7, .3, 1) backwards; }
.cabecera-in > :nth-child(1) { animation-delay: .10s; }
.cabecera-in > :nth-child(2) { animation-delay: .22s; }
.cabecera-in > :nth-child(3) { animation-delay: .36s; }
.cabecera-in > :nth-child(4) { animation-delay: .50s; }

@media (prefers-reduced-motion: reduce) {
  /* No se apaga: se aparca. Quien pide no ver movimiento sigue viendo la banda
     iluminada, solo que quieta. */
  .cabecera-barrido { animation: none; transform: translateX(165%); opacity: .9; }
  /* La entrada y el trazado de la regla no se sustituyen por nada: se entrega
     el estado final. Aparecer no es informacion aqui, solo adorno. */
  .cabecera-in > *, .cabecera-escala { animation: none; }
}
@media (prefers-contrast: more) {
  .cabecera-escala, .cabecera-barrido { display: none; }
  .cabecera-desc { color: #FFFFFF; }
}

/* ── La sección del informe en la portada ────────────────────────────────
   Era el hero. Dejó de serlo cuando la cabecera creció: competían por lo mismo
   —titular contra titular, los mismos dos botones, la misma promesa— y Izan lo
   zanjó: «el header la canibaliza y el header se queda».

   Ahora tiene un solo tema, el informe, y la identidad va de acompañamiento:
   columna estrecha, titular en H2 y de la mitad de cuerpo que el de arriba. */
.informe-doble {
  display: grid; gap: clamp(2.2rem, 5vw, 3.4rem);
  grid-template-columns: 1fr; align-items: start;
}
@media (min-width: 64rem) {
  /* La columna de la captura era la ancha (1,18 contra 0,82) y hacia que el
     texto de al lado pareciera de nota al pie. Ahora manda el texto. */
  .informe-doble { grid-template-columns: 1.08fr .92fr; }
  /* La columna de identidad es bastante mas corta que la tarjeta: centrada
     equilibra, alineada arriba deja un hueco muerto debajo. */
  .informe-quien { align-self: center; }
}

/* Sube de 1,95 a 2,6 rem y de 15 a 18ch. El 20/08 se encogio para que dejara
   de pelearse con el titular de la cabecera, y se paso de frenada: quedo tan
   pequeño que la seccion no tenia entrada.

   El limite sigue siendo el mismo y por eso no vuelve al tamaño de antes: el
   h1 de la cabecera llega a 3,35 rem, asi que este techo de 2,6 sigue estando
   por debajo con holgura. Manda el header; este ya no compite, pero se ve. */
.titulo-oficio {
  margin: .5rem 0 0; max-width: 18ch;
  font-size: clamp(1.85rem, 3.4vw, 2.6rem);
  line-height: 1.08; letter-spacing: -.024em;
}
.informe-quien .oficio { margin-top: 1.4rem; }
.informe-quien .giro   { margin-top: 1.5rem; }
.informe-quien .promesa { margin-top: 1.4rem; }

/* ── La hoja del informe ─────────────────────────────────────────────────
   Es un documento, no una página de venta: por eso lleva ficha de cabecera con
   qué se miró y qué NO se tocó, y por eso cada hallazgo separa LO MEDIDO de lo
   que significa. Esa separación es la que distingue un informe de una opinión. */
.hoja-cab .lead { max-width: 60ch; }
.hoja-ficha {
  margin: clamp(1.8rem, 4vw, 2.4rem) 0 0; padding: 0;
  display: grid; gap: 1px; background: var(--rule-sutil);
  border-radius: var(--r-m); overflow: hidden;
  grid-template-columns: 1fr;
}
@media (min-width: 46rem) { .hoja-ficha { grid-template-columns: 1fr 1fr; } }
.hoja-ficha > div { background: var(--surface); padding: 1.05rem 1.3rem; }
.hoja-ficha dt {
  font-size: .74rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: .35rem;
}
.hoja-ficha dd { margin: 0; font-size: .95rem; }

/* Barra de gravedad: la proporción se ve antes de leer un solo hallazgo. */
.marcador { margin: clamp(1.6rem, 3.5vw, 2.2rem) 0 0; }
.marcador-barra {
  display: flex; gap: 3px; height: 10px;
  border-radius: var(--r-pill); overflow: hidden;
}
.tramo { display: block; border-radius: var(--r-pill); }
.tramo.grave { background: var(--grave); }
.tramo.medio { background: var(--medio); }
.tramo.bien  { background: var(--bien); }
.marcador-txt { margin: .8rem 0 0; font-size: .95rem; color: var(--ink-soft); }
.grave-txt { color: var(--grave); }
.medio-txt { color: var(--medio); }
.bien-txt  { color: var(--bien); }

.grupo-hallazgos + .grupo-hallazgos { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.grupo-titulo { display: flex; align-items: center; gap: .7rem; margin: 0; }
.punto {
  width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto;
}
.punto.grave { background: var(--grave); }
.punto.medio { background: var(--medio); }
.punto.bien  { background: var(--bien); }
.grupo-entrada {
  margin: .7rem 0 0; max-width: 62ch; color: var(--ink-soft); font-size: 1rem;
}

.rejilla-hallazgos {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  display: grid; gap: 1rem; grid-template-columns: 1fr;
}
@media (min-width: 56rem) { .rejilla-hallazgos { grid-template-columns: 1fr 1fr; } }

/* El raíl de color a la izquierda hace que la gravedad se lea sin leer la
   etiqueta, que es como se hojea un informe de verdad. */
.hallazgo-card {
  background: var(--surface); border-radius: var(--r-l);
  box-shadow: var(--sombra-s); padding: clamp(1.4rem, 3vw, 1.85rem);
  border-left: 4px solid var(--rule);
}
.hallazgo-card.grave { border-left-color: var(--grave); }
.hallazgo-card.medio { border-left-color: var(--medio); }
.hallazgo-card.bien  { border-left-color: var(--bien); }
.hallazgo-cab {
  display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem;
}
.hallazgo-eje {
  font-size: .74rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-mute);
}
.hallazgo-card h3 { margin: 0 0 1rem; font-size: 1.12rem; }
.hallazgo-clave {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: .28rem;
}
/* Lo medido va en mono y sobre fondo hundido: es la cita literal del dato, y
   tiene que distinguirse de la interpretación que viene debajo. */
.hallazgo-dato {
  margin: 0 0 .95rem; padding: .8rem .95rem;
  background: var(--sunk); border-radius: var(--r-s);
  font-family: var(--mono); font-size: .87rem; line-height: 1.5;
  font-variant-numeric: tabular-nums; max-width: none;
}
.hallazgo-dato .hallazgo-clave { font-family: var(--sans); }
.hallazgo-txt { margin: 0 0 .95rem; font-size: .95rem; max-width: none; }
.hallazgo-txt:last-child { margin-bottom: 0; }

.limites, .plan { margin: clamp(1.6rem, 3.5vw, 2.2rem) 0 0; padding-left: 1.3rem; }
.limites { list-style: none; padding-left: 0; }
.limites li {
  padding-left: 1.5rem; position: relative; margin-bottom: 1rem;
  max-width: 64ch; font-size: 1rem;
}
.limites li::before {
  content: "—"; position: absolute; left: 0; color: var(--ink-mute);
}
.plan li { margin-bottom: 1rem; max-width: 64ch; font-size: 1rem; }
.plan-cierre { margin: 1.8rem 0 0; max-width: 64ch; color: var(--ink-soft); }

/* ── La muestra de trabajo real ──────────────────────────────────────────
   Ocupa el sitio donde estaba la tarjeta del informe. Izan: «quita la muestra
   del informe de la landing… en el lado derecho pon alguna imagen o gráfico».

   Y la razón de fondo es buena: si el informe se ve entero en la portada, el
   botón que lleva a él deja de prometer nada. La muestra tenía que salir.

   Lo que entra no es una ilustración de banco ni un gráfico inventado: es una
   captura del trabajo real, enmarcada en una ventana y COTADA como un plano.
   Es el mismo motivo de regla graduada de la cabecera, aplicado a una web de
   verdad — que es literalmente lo que se ofrece. */
.muestra { margin: 0; position: relative; }

.muestra-marco {
  position: relative;
  border-radius: var(--r-l); overflow: hidden;
  background: var(--surface); box-shadow: var(--sombra-l);
  border: 1px solid var(--rule-sutil);
}
.muestra-barra {
  display: flex; align-items: center; gap: .42rem;
  padding: .72rem .95rem; background: var(--sunk);
  border-bottom: 1px solid var(--rule-sutil);
}
/* .punto-barra y .muestra-url se han ido con la barra de navegador falsa: lo que
   hay dentro del marco ya no es una captura de una web, asi que fingir un
   navegador alrededor era mentir sobre lo que se enseña. */
/* height:auto es obligatorio: el atributo height del HTML gana a aspect-ratio y
   descuadra la escala. Ya paso una vez con la galería del caso. */
.muestra-marco img { display: block; width: 100%; height: auto; }

/* ── La captura, montada como pantalla ───────────────────────────────────
   El panel es de un cliente y viste su marca: crema y rosa (#A65D57). El fondo
   de la web es un neutro claro casi del mismo valor, asi que la captura se
   fundia con la pagina y solo asomaban los acentos rosas — parecia una mancha,
   no una herramienta.

   No se recolorea la captura: es el producto de otro y su marca es suya. Lo que
   cambia es el MONTAJE. Sobre banda oscura se lee como una pantalla encendida,
   que es lo que es, y el choque de temperatura deja de ser un choque porque ya
   no comparten fondo. */
.muestra-marco--pantalla {
  background: var(--deep);
  padding: clamp(.5rem, 1.4vw, .85rem);
  padding-top: 0;
}
.muestra-marco--pantalla .muestra-barra {
  background: transparent; border-bottom: 0;
  padding-inline: clamp(.4rem, 1vw, .6rem);
}
.muestra-marco--pantalla .muestra-titulo { color: var(--on-deep-soft); }
.muestra-marco--pantalla img { border-radius: var(--r-s); }
/* La captura termina a media fila de productos, y sin esto parece que la imagen
   se ha roto. Con el desvanecido parece lo que es: una pagina que sigue. */
/* Solo cuando dentro hay una captura: la pieza de los ocho ejes termina donde
   tiene que terminar y un desvanecido ahí solo comería la última fila. */
.muestra-marco:has(img)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%;
  background: linear-gradient(transparent, var(--surface));
  pointer-events: none;
}

/* El titulo de la barra de la ventana. --ink-soft y no --ink-mute a proposito:
   la barra va sobre --sunk, y ahi el mute se queda en 4,40:1. Medido. */
.muestra-titulo {
  font-family: var(--mono); font-size: .74rem;
  color: var(--ink-soft); letter-spacing: .01em;
}

/* La cota. Dos topes y una línea graduada: mide el ancho de lo que hay encima,
   igual que la regla de la cabecera mide el suyo. */
.cota {
  display: flex; align-items: center; gap: 0;
  margin-top: .9rem; height: 14px;
}
.cota-tope {
  width: 1px; height: 14px; flex: 0 0 auto;
  background: var(--ink-mute);
}
.cota-linea {
  flex: 1 1 auto; height: 9px; align-self: flex-end;
  background-image:
    repeating-linear-gradient(90deg, var(--ink-mute) 0 1px, transparent 1px 22px),
    linear-gradient(var(--rule), var(--rule));
  background-size: 100% 6px, 100% 1px;
  background-position: left bottom, left bottom;
  background-repeat: repeat-x, no-repeat;
}

.muestra figcaption {
  margin-top: 1.1rem; font-size: .93rem; line-height: 1.55;
  color: var(--ink-soft); max-width: 46ch;
}
.muestra figcaption a { font-weight: 600; white-space: nowrap; }

/* ── Sobre mí ────────────────────────────────────────────────────────────
   Bajo la premisa de esta web —el lector viene a comprobar que existes, no a
   que le convenzan— esta es de las cosas que más se miran. Por eso la banda va
   arriba, entre el caso y «para quién no», y no escondida en el pie. */
.presenta {
  display: grid; gap: clamp(1.6rem, 4vw, 2.8rem);
  grid-template-columns: 1fr; align-items: start;
}
@media (min-width: 46rem) {
  .presenta { grid-template-columns: minmax(0, 15rem) 1fr; }
}

.retrato {
  margin: 0; width: 100%; max-width: 15rem;
  border-radius: var(--r-l); overflow: hidden;
  box-shadow: var(--sombra-m); background: var(--sunk);
}
/* height:auto explícito. En HTML el atributo `height` gana sobre cualquier
   aspect-ratio de CSS, y ya descuadró la rejilla de capturas del 20/08. */
.retrato img { display: block; width: 100%; height: auto; }

.presenta h2 { margin-top: 0; }
.presenta > div > p:last-child { margin-bottom: 0; }

/* La página propia: misma foto, más sitio, y un bloque aparte para el «por qué
   te ha llegado un correo mío», que es la pregunta con la que llega media
   audiencia y merece marco propio en vez de un párrafo más. */
.aviso-prospeccion {
  /* Acotada a la medida de su propio texto. A ancho completo el parrafo se
     corta a 38em y queda media tarjeta vacia a la derecha. */
  max-width: 46rem;
  margin: clamp(2.2rem, 4.5vw, 3rem) 0 0;
  padding: clamp(1.4rem, 3.2vw, 1.9rem);
  background: var(--surface); border-radius: var(--r-l);
  box-shadow: var(--sombra-s);
  border-left: none;   /* DESIGN.md prohíbe la franja de color al borde */
}
.aviso-prospeccion h2 { margin: 0 0 .8rem; font-size: clamp(1.15rem, 2.4vw, 1.4rem); }
.aviso-prospeccion p:last-child { margin-bottom: 0; }

/* ── Formulario ──────────────────────────────────────────────────────────
   El campo trampa. No se oculta con display:none ni con hidden: hay robots que
   se saltan lo que el navegador no pinta. Se saca de la pantalla, que sí lo
   rellenan. Y va con aria-hidden y tabindex -1 para que ni el lector de
   pantalla ni el teclado lleguen a él. */
.trampa {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

/* El error se dice AL LADO del campo y explica cómo arreglarlo. */
.error { display: block; margin-top: .35rem; color: var(--grave); font-weight: 550; }
.formulario [aria-invalid="true"] { border-color: var(--grave); }

/* Estado de envío: el botón se hunde y lo dice, en vez de quedarse mudo
   mientras el visitante se pregunta si ha pulsado bien. */
#enviar[disabled] { opacity: .6; cursor: progress; }

.enviado {
  background: var(--surface); border-radius: var(--r-l);
  box-shadow: var(--sombra-s); padding: clamp(1.5rem, 3.5vw, 2.1rem);
}
.enviado h3 { margin: 0 0 .6rem; }
.enviado p { margin: 0; }