/* =========================================================
   LemonWeb — negro, como el polo del limón
   Cinco colores y nada más. El limón sale del logotipo.
   Contraste medido sobre el negro base #0C0C0D:
     hueso 17,33:1 · limón 13,28:1 · gris 5,48:1
   ========================================================= */

:root {
  --negro:  #0C0C0D;   /* base, la mayor parte de la superficie */
  --carbon: #17171A;   /* superficies elevadas y tarjetas */
  --limon:  #FCD102;   /* acento — del logotipo */
  --hueso:  #F4F1EA;   /* texto */
  --gris:   #A5A099;   /* texto secundario — 7,5:1 sobre el negro.
                          Era #8B8781 y daba 5,48:1: pasaba el mínimo
                          y aun así se leía descolorido, que es de lo
                          que venía la sensación de letra sosa. */

  /* Derivados, no colores nuevos: el hueso a poca opacidad. Así los
     bordes se ven sobre el negro y sobre el carbón sin inventar tonos. */
  --linea:       rgba(244, 241, 234, .11);
  --linea-fuerte: rgba(244, 241, 234, .22);
  --velo:        rgba(12, 12, 13, .72);

  --ancho: 1180px;
  --curva: 14px;
  --muelle: cubic-bezier(.2, .7, .2, 1);

  /* En negro una sombra no se ve: lo que eleva es el borde y un halo
     muy tenue de luz, no una sombra más oscura que el fondo. */
  --elevacion: 0 1px 0 rgba(244,241,234,.06) inset, 0 18px 40px -28px rgba(0,0,0,.9);
}

/* =========================================================
   TEXTURA
   El negro plano es la superficie más vacía que existe. Tres capas muy
   tenues y ninguna toca el contraste: grano fino sobre todo, degradado
   hacia el carbón en las bandas y un filete de luz donde una sección
   se apoya en la siguiente.
   ========================================================= */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: .05;
}
body > * { position: relative; z-index: 1; }

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--negro);
  color: var(--hueso);
  font: 400 18px/1.7 Inter, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { color: var(--hueso); }

:focus-visible {
  outline: 2px solid var(--limon);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--limon); color: var(--negro); }

.oculto-visual {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.saltar {
  position: absolute; left: 12px; top: -60px; z-index: 20;
  background: var(--limon); color: var(--negro);
  padding: 12px 18px; border-radius: 999px; font-size: .9rem; font-weight: 500;
  text-decoration: none;
  transition: transform .2s var(--muelle);
}
.saltar:focus { top: 12px; }

.envoltura { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }

/* ---------------- tipografía ---------------- */

/* Fraunces es variable y trae eje de TAMAÑO ÓPTICO. Ese eje no cambia
   el cuerpo: cambia el dibujo de la letra. En "opsz" 100 la fuente está
   dibujada para un titular enorme —trazo fino, letras estrechas, poco
   hueco entre ellas—, y aplicado a un h3 de 20 px sale comprimido y
   cuesta leerlo. Medido con el mismo texto a 20 px: 277 px de ancho en
   opsz 100 contra 350 en opsz 14, un 26 % más estrecho.

   Por eso la BASE es el tamaño óptico pequeño y son los titulares
   grandes los que piden el de display, y no al revés: así un h3 nuevo
   nace legible sin que nadie se acuerde de nada, que es la única forma
   de que una regla de tipografía envejezca bien. */
.display {
  font-family: Fraunces, Georgia, serif;
  font-weight: 400;
  letter-spacing: -.008em;
  line-height: 1.22;
  font-variation-settings: "SOFT" 20, "WONK" 1, "opsz" 26;
}

/* Solo h1 y h2, que son los que pasan de 40 px. Comprobado: en este
   build .display únicamente lo llevan h1, h2 y h3. */
h1.display, h2.display {
  letter-spacing: -.035em;
  line-height: 1.04;
  font-variation-settings: "SOFT" 20, "WONK" 1, "opsz" 100;
}

h1.display { font-size: clamp(2.4rem, 7vw, 5.4rem); margin: 0 0 1.2rem; }
h2.display { font-size: clamp(1.9rem, 4.6vw, 3.4rem); margin: 0 0 1rem; }
h3.display { font-size: clamp(1.25rem, 2vw, 1.6rem); margin: 0 0 .6rem; }

/* El subrayado de limón: sobre negro se apoya en la línea de base y no
   tapa el texto, que sigue siendo hueso. */
.display em {
  font-style: italic;
  background-image: linear-gradient(var(--limon), var(--limon));
  background-size: 100% .16em;
  background-position: 0 92%;
  background-repeat: no-repeat;
}

.cejilla {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 1.2rem;
  font: 400 .69rem/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gris);
}
.cejilla::before { content: ""; width: 26px; height: 2px; background: var(--limon); flex: none; }

.entradilla { font-size: clamp(1.12rem, 1.5vw, 1.3rem); line-height: 1.62; max-width: 44ch; color: #D8D4CC; }
.suave { color: var(--gris); }
.medida { max-width: 62ch; }

/* ---------------- botones y enlaces ---------------- */

.boton {
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--limon); color: var(--negro);
  padding: 15px 24px; border-radius: 999px;
  font-size: .95rem; font-weight: 600; text-decoration: none;
  border: 1px solid var(--limon);
  transition: transform .25s var(--muelle);
}
.boton:hover { transform: translateY(-2px); }
.boton:active { transform: translateY(0); }

.boton.claro {
  background: transparent; color: var(--hueso); border-color: var(--linea-fuerte);
  font-weight: 500;
}
.boton.claro:hover { border-color: var(--hueso); }

.enlace-sub {
  display: inline-block; text-decoration: none;
  border-bottom: 1.5px solid var(--limon); padding-bottom: 2px;
  font-size: .95rem;
  transition: transform .25s var(--muelle);
}
.enlace-sub:hover { transform: translateX(3px); }

/* ---------------- cabecera ---------------- */

.cabecera { background: var(--negro); border-bottom: 1px solid var(--linea); }
.cabecera .envoltura {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding-top: 14px; padding-bottom: 14px;
}

.marca { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.marca img { width: 38px; height: 38px; border-radius: 50%; }
.rotulo { font: 700 1.05rem/1 Inter, sans-serif; letter-spacing: -.02em; text-transform: uppercase; color: var(--hueso); }
.rotulo i { font-style: normal; color: var(--limon); }

.menu { display: flex; align-items: center; gap: 22px; }
.menu a { font-size: .92rem; text-decoration: none; color: #C6C2BB; transition: opacity .2s var(--muelle); }
.menu a:hover { color: var(--hueso); }
.menu a[aria-current="page"] { color: var(--hueso); box-shadow: inset 0 -2px 0 var(--limon); }

.cabecera .boton { padding: 10px 17px; font-size: .85rem; }

.filete { height: 3px; background: var(--limon); }

.abrir-menu { display: none; }

/* ---------------- secciones ---------------- */

main { counter-reset: seccion; }

/* Más aire entre secciones: el relieve no se hace solo con color, se
   hace con el hueco que queda entre una cosa y la siguiente. */
.seccion { padding: clamp(4rem, 9vw, 8rem) 0; position: relative; }
.seccion.hondo {
  /* Translúcido, no opaco. La lluvia de limones vive en una capa fija a
     z-index 0 y estas bandas pintan a z-index 1: con el fondo opaco la
     tapaban entera, y los limones solo asomaban en las secciones sin
     fondo propio. Se veía como un efecto que va y viene, que es peor
     que no tenerlo. Mismos tonos, con alfa. */
  background: linear-gradient(180deg, rgba(25,25,32,.86) 0%, rgba(23,23,26,.86) 42%, rgba(19,19,23,.86) 100%);
  box-shadow: inset 0 1px 0 rgba(244,241,234,.06), inset 0 -1px 0 rgba(0,0,0,.6);
}
.seccion.linea { border-top: 1px solid var(--linea); }

.seccion .rotulo-seccion {
  counter-increment: seccion;
  display: flex; align-items: baseline; gap: 12px;
  font: 400 .69rem/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gris);
  margin: 0 0 1.1rem;
}
.seccion .rotulo-seccion::before {
  content: counter(seccion, decimal-leading-zero);
  color: var(--limon);
}

.cab-seccion { display: grid; grid-template-columns: 1.25fr .75fr; gap: 40px; align-items: end; margin-bottom: 2.4rem; }
.cab-seccion p { margin: 0; }

/* ---------------- hero ---------------- */

.hero { padding: clamp(2.6rem, 6vw, 4.6rem) 0 clamp(2.2rem, 4vw, 3.2rem); }
.hero .envoltura { display: grid; grid-template-columns: 1.06fr .94fr; gap: clamp(28px, 4vw, 52px); align-items: center; }
.hero p.entradilla { margin: 0 0 1.8rem; }
.acciones { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

.marco-video {
  position: relative; aspect-ratio: 4/5; border-radius: var(--curva); overflow: hidden;
  border: 1px solid var(--linea-fuerte); background: var(--carbon);
  box-shadow: var(--elevacion);
}
.marco-video video, .marco-video img { width: 100%; height: 100%; object-fit: cover; }

.pie-foto {
  position: absolute; left: 12px; bottom: 12px;
  font: 400 .62rem/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--velo); color: var(--hueso);
  border: 1px solid var(--linea);
  padding: 7px 10px; border-radius: 6px;
}

/* ---------------- el peaje ---------------- */

.peaje { border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); background: var(--carbon); }
.peaje .envoltura { display: flex; gap: 32px; align-items: baseline; flex-wrap: wrap; padding-top: 26px; padding-bottom: 26px; }
.peaje p { margin: 0; font-family: Fraunces, Georgia, serif; font-size: clamp(1.15rem, 2.1vw, 1.5rem); letter-spacing: -.02em; line-height: 1.4; color: var(--hueso); max-width: 36ch; }
.portales { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.portales li {
  font-size: .82rem; color: var(--gris);
  border: 1px solid var(--linea); background: var(--negro);
  padding: 6px 12px; border-radius: 999px; text-decoration: line-through;
}

/* ---------------- rejillas y tarjetas ---------------- */

.rejilla { display: grid; gap: 18px; }
.rejilla.dos { grid-template-columns: repeat(2, 1fr); }
.rejilla.tres { grid-template-columns: repeat(3, 1fr); }
/* Las capturas son el contenido, no un icono: a dos por fila se leen. */
.rejilla.portfolio { grid-template-columns: repeat(2, 1fr); gap: 28px; }
/* Los sectores se reparten solos. Con tres fijas, el cuarto sector
   —tatuaje— caía solo en una segunda fila y se leía como un hueco de
   maqueta. Con auto-fit la fila se rellena sea cual sea el número, así
   que añadir o quitar un sector no vuelve a descuadrar nada. */
.rejilla.sectores { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

.tarjeta {
  position: relative; background: var(--carbon); border-radius: var(--curva);
  border: 1px solid var(--linea);
  overflow: hidden;
  transition: transform .3s var(--muelle), border-color .3s var(--muelle);
}
.tarjeta::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--curva);
  box-shadow: var(--elevacion); opacity: 0; pointer-events: none;
  transition: opacity .3s var(--muelle);
}
.tarjeta:hover { transform: translateY(-3px); border-color: var(--linea-fuerte); }
.tarjeta:hover::after, .tarjeta:focus-within::after { opacity: 1; }

.seccion.hondo .tarjeta { background: var(--negro); }

.tarjeta.destacada { border-top: 3px solid var(--limon); }

/* =========================================================
   LA PIEZA DESTACADA
   El trabajo es el contenido, así que va arriba y va grande: una
   captura a ancho casi completo, justo debajo del hero.
   ========================================================= */
.destacada { padding: 0 0 clamp(3rem, 6vw, 5rem); }
.destacada .envoltura { max-width: 1400px; }
.destacada-marco {
  position: relative; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--linea-fuerte); background: var(--carbon);
  box-shadow: 0 40px 90px -60px rgba(0,0,0,1);
  aspect-ratio: 16/10;
}
/* Las que no tocan van con visibility además de opacidad: así no las
   lee un lector de pantalla ni cuentan como «está en el DOM y no se
   ve». El retardo en la transición deja que el fundido termine. */
.destacada-marco img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  opacity: 0; visibility: hidden;
  transition: opacity .9s var(--muelle), visibility 0s .9s;
}
.destacada-marco img.puesta {
  opacity: 1; visibility: visible;
  transition: opacity .9s var(--muelle), visibility 0s;
}
/* Sin JavaScript se ve la primera y no un marco vacío. */
.destacada-marco img:first-of-type { opacity: 1; visibility: visible; }
.destacada-pie {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding: clamp(18px, 3vw, 34px);
  background: linear-gradient(to top, rgba(12,12,13,.92) 30%, rgba(12,12,13,0));
}
.destacada-pie b { font-family: Fraunces, Georgia, serif; font-weight: 400; font-size: clamp(1.4rem, 3vw, 2.4rem); letter-spacing: -.03em; }
.destacada-pie span { font: 400 .7rem/1.5 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); display: block; }
.destacada-puntos { display: flex; gap: 8px; }
.destacada-puntos button {
  width: 34px; height: 4px; border: 0; border-radius: 999px; padding: 0;
  background: var(--linea-fuerte); cursor: pointer;
  transition: transform .25s var(--muelle);
}
.destacada-puntos button[aria-current="true"] { background: var(--limon); }
.destacada-puntos button:hover { transform: scaleY(2); }

/* El bloque del COMPARADOR ANTES / DESPUÉS vivía aquí, y se fue con su
   sección: enseñaba en público la web actual de un negocio que todavía
   no es cliente. Se retira también el estilo, no solo el marcado — el
   CSS de un componente inalcanzable pesa en el paquete y, sobre todo,
   deja la pieza montada para que alguien la reenchufe sin saber por qué
   se quitó. El motivo está en el README, en «Fuera el antes y después». */

/* ---------------- portfolio ---------------- */

.filtros { display: none; gap: 10px; flex-wrap: wrap; margin-bottom: 1.8rem; }
@media (scripting: enabled) { .filtros { display: flex; } }

.filtros button {
  font: 400 .82rem/1 Inter, sans-serif; color: var(--hueso);
  background: transparent; border: 1px solid var(--linea-fuerte);
  padding: 9px 15px; border-radius: 999px; cursor: pointer;
  transition: transform .2s var(--muelle), border-color .2s var(--muelle);
}
.filtros button:hover { transform: translateY(-1px); border-color: var(--hueso); }
.filtros button[aria-pressed="true"] { background: var(--limon); color: var(--negro); border-color: var(--limon); font-weight: 600; }

/* Cinco de las trece demos son de base negra —Jenny, eContainer,
   Cardinal, AS Reformas y Mary—. Sobre este fondo, sus capturas se
   funden con la página y la rejilla se lee como agujeros.
   Por eso la captura va enmarcada: un filete claro alrededor y un hueco
   de carbón detrás. La tarjeta se lee como pieza aparte, sea del color
   que sea la web que enseña. */
.demo .lienzo {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 16/10; background: var(--carbon);
  margin: 10px 10px 0; border-radius: 8px;
  border: 1px solid var(--linea-fuerte);
}
.demo .lienzo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.demo .lienzo.sin-foto { display: grid; place-content: center; text-align: center; padding: 20px; gap: 8px; }
.demo .lienzo.sin-foto b {
  font-family: Fraunces, Georgia, serif; font-weight: 400; letter-spacing: -.03em;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem); color: var(--hueso);
}
.demo .lienzo.sin-foto span { font: 400 .68rem/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.demo .lienzo.sin-foto::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--limon); }

.demo .datos { padding: 14px 17px 16px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.demo .datos b { font-size: 1rem; font-weight: 600; color: var(--hueso); }
.demo .datos span { font-size: .78rem; color: var(--gris); text-align: right; }
.demo .ir { display: block; text-decoration: none; }
.demo .ir::after { content: ""; position: absolute; inset: 0; }

/* La naturaleza de cada demo, en la propia tarjeta. Va en mono y en
   gris: informa sin competir con el nombre. */
.naturaleza {
  margin: 0; padding: 0 17px 15px;
  font: 400 .64rem/1.4 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gris);
  display: flex; align-items: center; gap: 7px;
}
.naturaleza::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--gris);
}
.naturaleza.real::before { background: var(--limon); }

/* --- las poses de la mascota, enmarcadas en tarjeta --- */
.escena {
  border-radius: var(--curva); overflow: hidden;
  border: 1px solid var(--linea-fuerte); background: var(--carbon);
  line-height: 0;
}
.escena img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* El original es 800×1422 y en una caja 3/4 se recortaba un 25 % del
   alto: le cortaba la hoja por arriba y las manos por abajo, así que el
   muñeco parecía descentrado dentro de su propio marco. Con 2/3 el
   recorte baja al 16 %, y el encuadre al 38 % —en vez del centro— deja
   la hoja entera dentro y las manos apoyadas abajo. Comparado a ojo
   contra 3/4, 5/7 y la proporción original antes de elegir. */
.escena-formulario {
  position: absolute; top: -34px; right: 22px;
  width: 148px; aspect-ratio: 2/3; z-index: 2;
}
.escena-formulario img { object-position: center 38%; }
.escena-pie { max-width: 210px; aspect-ratio: 4/5; margin-top: 1.2rem; }
.escena-peaje { width: 148px; aspect-ratio: 1; flex: none; }
.escena-404 { max-width: 260px; aspect-ratio: 3/4; margin: 0 auto 1.8rem; }
.escena-nicho { max-width: 100%; aspect-ratio: 16/9; margin-top: 1.6rem; }
@media (max-width: 760px) {
  .escena-formulario { width: 104px; top: -26px; right: 14px; }
  .escena-peaje { display: none; }
}

.aviso-fotos {
  margin: 1.6rem 0 0;
  font-size: .8rem; line-height: 1.6; color: var(--gris);
  max-width: 74ch;
  padding-left: 14px; border-left: 2px solid var(--linea-fuerte);
}

/* =========================================================
   EL LIMÓN, SUELTO
   La mascota en tres tamaños, el aro del logotipo como recurso
   gráfico, la hoja como marca de lista y la silueta de marca de agua.
   Todo lo decorativo va con aria-hidden y pointer-events: none, y
   ninguno se cruza con texto: eso se comprueba en pantalla.
   ========================================================= */

.mascota { border-radius: 50%; transition: transform .35s var(--muelle); }
.mascota:hover { transform: rotate(-6deg) scale(1.04); }

/* La mascota va FUERA del marco del vídeo, en un envoltorio relativo:
   dentro la recortaría el overflow hidden del marco. */
.hero-media { position: relative; }
.mascota-hero {
  position: absolute; top: -30px; right: -22px;
  width: 168px; height: 168px; z-index: 2;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.7));
}
@media (max-width: 760px) { .mascota-hero { width: 104px; height: 104px; top: -18px; right: -8px; } }

.formulario { position: relative; }
.mascota-formulario { position: absolute; top: -34px; right: 22px; }
@media (max-width: 620px) { .mascota-formulario { width: 64px; height: 64px; top: -26px; right: 16px; } }
/* Gana a `.marca img`, que fija 38 px en la cabecera y 54 en el pie:
   sin esto la mascota del pie se quedaba en el tamaño de antes. */
.mascota-media,
.pie-web .marca img.mascota-media { width: 88px; height: 88px; }
.mascota-404 { width: 232px; height: 232px; margin: 0 auto 1.6rem; }

/* El aro amarillo del logotipo, suelto. Es un trazo, no un relleno:
   enmarca sin tapar y no cambia el fondo por el que pasa el texto. */
.aro-remate {
  position: absolute; left: 50%; top: 50%;
  width: min(470px, 84vw); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 2px solid var(--limon); border-radius: 50%;
  opacity: .55; pointer-events: none;
}
.con-aro { position: relative; }
.seccion:has(.con-aro) { overflow: hidden; }
/* Dentro del aro el texto va estrecho a propósito: así el trazo pasa
   por fuera de las líneas y no cruza ni una palabra. */
.con-aro .medida, .con-aro h2 { max-width: 30ch; margin-inline: auto; }

/* Una sola silueta para todo el fondo: se declara aquí y la reutilizan
   la marca de agua y las partículas. Es un SVG en línea, así que no hay
   ni una petición de red por mucho que se repita. Y la mascota grande
   apunta siempre al MISMO archivo que ya carga el hero: una copia por
   elemento sería multiplicar el peso por nada. */
:root {
  --silueta-limon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='%23FCD102'%3E%3Cpath d='M64 31c1-12 10-21 22-20-1 12-10 21-21 20z'/%3E%3Cellipse cx='60' cy='66' rx='44' ry='33'/%3E%3Ccircle cx='11' cy='66' r='5'/%3E%3Ccircle cx='109' cy='66' r='5'/%3E%3C/g%3E%3C/svg%3E");
}

/* El fondo va SIEMPRE detrás y sin ratón, y el contenido de la sección
   sube a su propia capa: así ninguna silueta puede quedar por encima de
   una línea de texto, pase lo que pase con el orden del HTML. */
.seccion { position: relative; }
.seccion > .envoltura { position: relative; z-index: 1; }
.fondo-limon {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}

.marca-agua::before {
  content: ""; position: absolute;
  right: -8%; top: 50%;
  width: min(760px, 82vw); aspect-ratio: 1;
  margin-top: min(-380px, -41vw);
  background: var(--silueta-limon) center / contain no-repeat;
  opacity: .035;
}

/* Deriva larga: 46 s de ida y otros tantos de vuelta. Se percibe si te
   quedas un rato y no distrae al leer. Solo transform. */
.marca-agua.deriva::before { animation: deriva-limon 46s ease-in-out infinite alternate; }
@keyframes deriva-limon {
  from { transform: translate3d(0, 0, 0) rotate(-5deg) scale(1); }
  to   { transform: translate3d(-7%, -5%, 0) rotate(5deg) scale(1.07); }
}

/* Limones pequeños subiendo, cada uno a lo suyo. Sin JavaScript: el
   sitio, el tamaño, la velocidad y el retardo llegan en variables. */
.particulas i {
  position: absolute; display: block;
  left: var(--x); bottom: -22vh;
  width: var(--t); aspect-ratio: 1;
  background: var(--silueta-limon) center / contain no-repeat;
  opacity: .04;
  animation: sube-limon var(--dur) linear infinite;
  animation-delay: var(--esp);
}
@keyframes sube-limon {
  from { transform: translate3d(0, 0, 0) rotate(0); }
  to   { transform: translate3d(0, -150vh, 0) rotate(28deg); }
}

/* La mascota asomando por el borde, medio recortada por la sección.
   Fuera en pantallas estrechas: ahí no hay hueco libre y acabaría
   debajo del texto. */
.mascota-asoma {
  position: absolute; right: -78px; bottom: -52px;
  width: 236px; height: 236px; z-index: 0;
  opacity: .9; pointer-events: none;
}
@media (max-width: 1100px) { .mascota-asoma { display: none; } }
/* Por debajo de 720 px el aro es más estrecho que la columna de texto,
   así que su trazo cruzaría las líneas. Medido: dejaba el párrafo en
   3,14:1. En estrecho no se pinta. */
@media (max-width: 720px) { .aro-remate { display: none; } }

/* ---------------- comprobaciones ---------------- */

/* El ✓ va en hueso y no en el verde del logotipo: ese verde sobre negro
   da 3,14:1 y no llega ni para texto pequeño. El limón sí llegaría
   —13,28:1— pero el limón no hace de texto: es filete, subrayado,
   cejilla y mascota. */
/* La marca de lista es la hoja del logotipo, no un visto. Va con la
   cara clara de su verde —#5D7E0F, 4,15:1 sobre el negro—, porque el
   verde oscuro de la hoja se queda en 3,14:1 y a 14 px no se lee. */
/* Las comprobaciones se leen, no se ojean, así que van en la de cuerpo.
   Estaban en mono a 14 px y hasta 93 caracteres por línea: la mono da a
   todas las letras el mismo ancho, el ojo pierde la forma de la palabra y
   deja de poder saltar. Como motivo la mono se queda donde es una etiqueta
   corta —cejillas, raíl de fases, pies de foto—, que es donde aporta. */
.checks {
  margin: 0; padding: 0; list-style: none;
  font: 400 1.02rem/1.66 Inter, system-ui, sans-serif;
  display: grid; gap: .55rem;
  max-width: 70ch;
}
.checks li { display: flex; gap: 12px; align-items: baseline; color: #D8D4CC; }
.checks li::before {
  content: ""; flex: none;
  width: 16px; height: 16px;
  /* A la altura de la PRIMERA línea, no al centro del bloque: centrada,
     un punto que se parte en dos líneas deja la hoja flotando en medio
     y el ✓ deja de leerse como principio de la frase. */
  align-self: flex-start; margin-top: .22em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 3c-1 10-7 15-13 15-2 0-4-1-5-2 2-8 9-13 18-13z' fill='%235D7E0F'/%3E%3Cpath d='M3 21c3-6 8-11 14-14' stroke='%2374AF03' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.comprobacion { padding: 22px 24px; border-radius: var(--curva); background: var(--carbon); border: 1px solid var(--linea); }
.seccion.hondo .comprobacion { background: var(--negro); }
.comprobacion h3 { margin: 0 0 .45rem; font-size: 1.02rem; font-weight: 600; display: flex; gap: 10px; align-items: baseline; }
.comprobacion h3::before { content: "\2713"; color: var(--limon); font-family: "JetBrains Mono", monospace; flex: none; }
.comprobacion p { margin: 0; font-size: .95rem; line-height: 1.65; color: var(--gris); }

/* ---------------- pasos ---------------- */

.pasos { counter-reset: paso; display: grid; gap: 2px; }
.paso {
  counter-increment: paso;
  display: grid; grid-template-columns: 92px 1fr; gap: 24px;
  padding: 26px 0; border-top: 1px solid var(--linea);
}
.paso:last-child { border-bottom: 1px solid var(--linea); }
.paso::before {
  content: counter(paso, decimal-leading-zero);
  font-family: Fraunces, Georgia, serif; font-style: italic; font-weight: 400;
  font-size: 2.4rem; line-height: 1; letter-spacing: -.04em; color: var(--limon);
}
.paso h3 { margin: 0 0 .35rem; font-size: 1.1rem; font-weight: 600; }
.paso p { margin: 0; max-width: 60ch; color: var(--gris); }

/* ---------------- precios ---------------- */

.plan { padding: 30px; display: flex; flex-direction: column; }
.plan .nombre { font-family: Fraunces, Georgia, serif; font-size: 1.7rem; letter-spacing: -.03em; margin: 0 0 .5rem; color: var(--hueso); }
.plan .para { font-size: .95rem; color: var(--gris); margin: .3rem 0 1.4rem; }
.plan ul { margin: 0 0 1.2rem; padding: 0; list-style: none; }
.plan ul li { display: flex; gap: 10px; align-items: baseline; font-size: .95rem; line-height: 1.6; padding: 5px 0; color: #D8D4CC; }
.plan ul li::before { content: "\2713"; color: var(--limon); font-family: "JetBrains Mono", monospace; font-size: .85rem; flex: none; }
.plan .apartado { font: 400 .68rem/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); margin: .4rem 0 .7rem; }
.plan .boton { margin-top: auto; align-self: flex-start; }

/* ---------------- contacto ---------------- */

.canales { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.canal { display: flex; gap: 14px; align-items: baseline; padding: 18px 20px; border-radius: var(--curva); border: 1px solid var(--linea); background: var(--carbon); }
.seccion.hondo .canal { background: var(--negro); }
.canal .que { font: 400 .68rem/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); min-width: 92px; }
.canal a { font-size: 1.05rem; text-decoration: none; border-bottom: 1.5px solid var(--limon); }
.canal a:hover { border-bottom-color: var(--hueso); }

/* ---------------- formulario y voz ---------------- */

.formulario {
  border: 1px solid var(--linea-fuerte); border-radius: var(--curva);
  background: var(--negro); padding: clamp(22px, 4vw, 34px);
  position: relative;
}
.formulario::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px;
  background: var(--limon); border-radius: var(--curva) var(--curva) 0 0;
}
.rotulo-formulario {
  font: 400 .69rem/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gris);
  margin: 0 0 1rem;
}
.formulario .checks { margin-top: 1.4rem; }

/* Hueco del formulario de terceros: aquí no hay iframe hasta que la
   persona pulsa. Lo que se ve mientras tanto es esta caja. */
.incrustado {
  margin-top: 1.8rem; padding: 20px; border-radius: 10px;
  border: 1px dashed var(--linea-fuerte); background: var(--carbon);
}
.incrustado p { margin: 0 0 1rem; font-size: .92rem; line-height: 1.65; color: var(--gris); }
.incrustado p:last-child { margin-bottom: 0; }
.incrustado a { color: var(--hueso); }
.incrustado iframe { width: 100%; min-height: 620px; border: 0; border-radius: 10px; display: block; }

.por-voz {
  margin-top: 2.2rem; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.por-voz p { margin: 0 100% 0 0; font-size: 1.05rem; color: var(--hueso); }
@media (min-width: 620px) { .por-voz p { margin-right: 0; flex: 1 1 100%; } }

.boton.wa { gap: .6rem; }

.icono-social {
  display: inline-grid; place-items: center; width: 50px; height: 50px;
  border-radius: 50%; border: 1px solid var(--linea-fuerte); color: var(--hueso);
  transition: transform .25s var(--muelle), border-color .25s var(--muelle);
}
.icono-social:hover { transform: translateY(-2px); border-color: var(--limon); color: var(--limon); }

/* ---------------- texto legal ---------------- */

.texto h2 { font-size: 1.3rem; margin: 2.2rem 0 .6rem; }
.texto h2:first-child { margin-top: 0; }
.texto p, .texto li { font-size: .98rem; line-height: 1.75; max-width: 68ch; color: #D3CFC7; }
.texto ul { padding-left: 1.1rem; }
.texto a { color: var(--hueso); text-decoration-color: var(--limon); }

/* ---------------- pie ---------------- */

.pie-web { background: var(--carbon); color: var(--gris); padding: clamp(2.4rem, 5vw, 3.6rem) 0 2rem; border-top: 1px solid var(--linea); }
.pie-web .rotulo { color: var(--hueso); }
.pie-web .marca img { width: 54px; height: 54px; }
.pie-web .columnas { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 34px; }
.pie-web h4 { color: var(--hueso); font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; font-family: "JetBrains Mono", ui-monospace, monospace; margin: 0 0 .9rem; }
.pie-web ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.pie-web a { color: var(--gris); text-decoration: none; font-size: .92rem; }
.pie-web a:hover { color: var(--hueso); }
.pie-web .lema { margin: 1rem 0 0; font-size: .92rem; max-width: 34ch; color: var(--gris); }
.pie-web .fondo-pie { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--linea); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .82rem; color: var(--gris); }

/* =========================================================
   MOVIMIENTO
   Solo transform y opacity. Nada de scroll secuestrado, nada
   de parallax encadenado: la página baja como baja el navegador.
   ========================================================= */

@media (scripting: enabled) {
  /* Estado de partida de lo que aparece al entrar en pantalla. Solo
     existe si hay JavaScript: sin él todo nace visible. */
  .aparece { opacity: 0; transform: translateY(16px); }
  .aparece.dentro {
    opacity: 1; transform: none;
    transition: opacity .55s var(--muelle), transform .55s var(--muelle);
  }

  /* Las tarjetas del portfolio entran escalonadas. El retardo va por
     posición en la rejilla, no por un temporizador: si una tarjeta se
     filtra y desaparece, las demás siguen ordenadas. */
  .rejilla .aparece:nth-child(1)  { transition-delay: 0ms; }
  .rejilla .aparece:nth-child(2)  { transition-delay: 70ms; }
  .rejilla .aparece:nth-child(3)  { transition-delay: 140ms; }
  .rejilla .aparece:nth-child(4)  { transition-delay: 40ms; }
  .rejilla .aparece:nth-child(5)  { transition-delay: 110ms; }
  .rejilla .aparece:nth-child(6)  { transition-delay: 180ms; }
  .rejilla .aparece:nth-child(7)  { transition-delay: 80ms; }
  .rejilla .aparece:nth-child(8)  { transition-delay: 150ms; }
  .rejilla .aparece:nth-child(9)  { transition-delay: 220ms; }
  .rejilla .aparece:nth-child(n+10) { transition-delay: 200ms; }

  /* La lista de comprobaciones se escribe línea a línea. Cada línea
     entra por su cuenta, con el ✓ un pelo antes que el texto. */
  .checks.aparece li { opacity: 0; transform: translateX(-8px); }
  .checks.aparece.dentro li {
    opacity: 1; transform: none;
    transition: opacity .4s var(--muelle), transform .4s var(--muelle);
  }
  .checks.aparece.dentro li:nth-child(1) { transition-delay: 40ms; }
  .checks.aparece.dentro li:nth-child(2) { transition-delay: 130ms; }
  .checks.aparece.dentro li:nth-child(3) { transition-delay: 220ms; }
  .checks.aparece.dentro li:nth-child(4) { transition-delay: 310ms; }
  .checks.aparece.dentro li:nth-child(5) { transition-delay: 400ms; }
  .checks.aparece.dentro li:nth-child(6) { transition-delay: 490ms; }
  .checks.aparece.dentro li:nth-child(7) { transition-delay: 580ms; }
  .checks.aparece.dentro li:nth-child(n+8) { transition-delay: 660ms; }

  /* El limón entra con un rebote corto. Va con transición y curva de
     retroceso, no con @keyframes: una animación con fill both se queda
     dueña del transform y deja el :hover muerto. Así rebota al entrar y
     luego sigue inclinándose al pasar el ratón. */
  .rebota { opacity: 0; transform: scale(.86); }
  .rebota.dentro {
    opacity: 1; transform: none;
    transition: opacity .45s var(--muelle), transform .62s cubic-bezier(.34, 1.56, .64, 1);
  }

  /* El hero entra al cargar, sin esperar a ningún observador. */
  .hero .envoltura > * { animation: entra .7s var(--muelle) both; }
  .hero .envoltura > *:nth-child(2) { animation-delay: .12s; }
  @keyframes entra {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---------------- anchos ---------------- */

@media (max-width: 1000px) {
  .cab-seccion { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  .rejilla.tres { grid-template-columns: repeat(2, 1fr); }
  .pie-web .columnas { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .envoltura { padding: 0 20px; }
  .hero .envoltura { grid-template-columns: 1fr; }
  .marco-video { aspect-ratio: 4/5; max-height: 62vh; }
  .rejilla.dos, .rejilla.tres { grid-template-columns: 1fr; }
  .paso { grid-template-columns: 1fr; gap: 6px; }
  .paso::before { font-size: 1.9rem; }
  .pie-web .columnas { grid-template-columns: 1fr; gap: 26px; }
  .peaje .envoltura { gap: 18px; }

  .menu { display: none; }
  .abrir-menu { display: block; }
  details.plegable { position: relative; }
  details.plegable > summary {
    list-style: none; cursor: pointer;
    font: 400 .8rem/1 "JetBrains Mono", ui-monospace, monospace;
    letter-spacing: .12em; text-transform: uppercase;
    padding: 10px 14px; border: 1px solid var(--linea-fuerte); border-radius: 999px;
    color: var(--hueso);
  }
  details.plegable > summary::-webkit-details-marker { display: none; }
  details.plegable[open] > summary { background: var(--limon); color: var(--negro); border-color: var(--limon); }
  details.plegable .desplegado { display: grid; gap: 2px; padding: 10px 0 2px; }
  details.plegable .desplegado a {
    display: block; padding: 11px 2px; text-decoration: none;
    border-bottom: 1px solid var(--linea); font-size: .98rem;
  }
  .cabecera .envoltura { flex-wrap: wrap; }
  .cabecera .boton { padding: 9px 15px; }
}

@media (max-width: 420px) {
  .cabecera .boton { display: none; }
  .rotulo { font-size: .98rem; }
}

/* =========================================================
   EL HERO AVANZA CON EL SCROLL
   El vídeo no se reproduce: su fotograma lo manda la posición del
   scroll. El contenedor es alto y su interior se queda pegado, así que
   mientras se recorre esa altura la web del vídeo se monta sola y acaba
   comprobada. Es el argumento de la portada hecho gesto: quien baja la
   está construyendo.

   La altura extra se declara SOLO aquí, dentro de la consulta, y nunca
   desde JavaScript. Si la pusiera el script habría un salto de
   maquetación al arrancar; y sin script quedarían dos pantallas de nada
   que nadie podría mover. Tres condiciones, y las tres hacen falta:

     · sin movimiento reducido — es movimiento, y ese lo manda el usuario
     · ancho de escritorio — en móvil no se puede buscar en el vídeo con
       fluidez, así que allí se queda el bucle de siempre
     · con JavaScript — es quien mueve el fotograma

   Donde no se cumplan, esto es exactamente el hero de antes: una
   pantalla, y el vídeo en bucle o en el póster según la preferencia.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) and (min-width: 761px) and (scripting: enabled) {
  .hero-scroll { height: 240vh; padding-top: 0; padding-bottom: 0; }
  .hero-scroll .hero-pegado {
    position: sticky; top: 0;
    min-height: 100vh;
    display: flex; align-items: center;
    padding: clamp(2.6rem, 6vw, 4.6rem) 0 clamp(2.2rem, 4vw, 3.2rem);
  }
  .hero-scroll .hero-pegado > .envoltura { width: 100%; }
}

/* El raíl de fases, en mono como el resto de las comprobaciones. Nace
   sin pintar y lo enciende la consulta de arriba: fuera del scrubbing no
   hay avance que marcar, así que no habría nada que decir. */
.fases-hero {
  display: none;
  margin: 1.9rem 0 0; padding: 0;
  font: 400 .66rem/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .14em; text-transform: uppercase;
}
.fases-hero span {
  position: relative;
  padding: 10px 0 0; margin-right: 26px;
  color: var(--gris);
  transition: color .3s var(--muelle);
}
.fases-hero span::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  background: var(--linea-fuerte);
}
/* El relleno lo escribe el script en --llenado, de 0 a 1, y va sin
   transición a propósito: sigue al dedo, no lo persigue con retraso. */
.fases-hero span::after {
  content: ""; position: absolute; inset: 0 auto auto 0; height: 2px;
  width: calc(var(--llenado, 0) * 100%);
  background: var(--limon);
}
.fases-hero span[data-viva] { color: var(--hueso); }

/* La barra de avance vive dentro del marco, pegada al borde de abajo:
   el mismo dato que el raíl, pero junto a lo que se está moviendo. El
   limón aquí es filete, no fondo ni texto, que es donde le toca. */
.barra-scrub {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 0;
  background: var(--limon);
  opacity: 0;
}
.marco-video[data-scrub-activo] .barra-scrub { opacity: 1; }

/* El raíl se enciende aquí y no dentro del bloque de arriba: la regla
   base que lo apaga vive por encima, y con la misma especificidad gana
   la última que se lee. Dentro de aquella consulta el display:none la
   pisaba siempre y el raíl no se pintaba en ningún caso —ni con el
   efecto activo—, que es un fallo que una captura del hero sí enseña
   pero solo si uno sabe que ese raíl tenía que estar. */
@media (prefers-reduced-motion: no-preference) and (min-width: 761px) and (scripting: enabled) {
  .fases-hero { display: flex; }
}

/* =========================================================
   SERVICIOS Y FRANQUEZA
   ========================================================= */

/* Las tres tarjetas de servicio de la portada. El filete de limón arriba
   es el mismo motivo de la barra y de los bloques destacados: acento y
   firma, nunca fondo. */
.tarjeta.servicio {
  padding: 28px 26px 24px;
  display: flex; flex-direction: column; gap: .5rem;
  position: relative; overflow: hidden;
}
.tarjeta.servicio::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: var(--limon);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--muelle);
}
.tarjeta.servicio:hover::before,
.tarjeta.servicio:focus-within::before { transform: scaleX(1); }
.tarjeta.servicio .cejilla { margin-bottom: .2rem; }
.tarjeta.servicio h3 { margin: 0; font-size: 1.28rem; line-height: 1.25; }
.tarjeta.servicio .suave { margin: 0 0 1rem; flex: 1; }
.tarjeta.servicio .enlace-sub { align-self: start; }

/* El bloque de franqueza. Va destacado a propósito: decir qué NO depende
   de nosotros es el argumento de la página, no su letra pequeña, así que
   no puede parecer un descargo escondido al pie. */
.franqueza {
  border: 1px solid var(--linea-fuerte);
  border-top: 3px solid var(--limon);
  border-radius: var(--curva);
  background: var(--carbon);
  padding: clamp(26px, 4vw, 40px);
  /* Centrado y no pegado a la izquierda: suelto en una sección ancha
     dejaba media pantalla vacía a su derecha y se leía como un cajón
     olvidado, justo lo contrario de lo que tiene que transmitir. */
  max-width: 68ch;
  margin-inline: auto;
  box-shadow: var(--elevacion);
}
.seccion.hondo .franqueza { background: var(--negro); }
.franqueza h3 { margin: 0 0 .7rem; font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.2; }
.franqueza p { margin: 0; color: #D8D4CC; line-height: 1.68; }

@media (max-width: 760px) {
  .tarjeta.servicio { padding: 24px 22px 22px; }
}

/* =========================================================
   LLUVIA DE LIMONES
   Capa fija detrás de todo, en todas las páginas. Caen despacio y a
   velocidades distintas. La referencia es el código de Matrix, pero
   bajado de volumen hasta donde no compite con el texto.

   `body > .lluvia` y no `.lluvia` a secas: hay una regla anterior
   —`body > * { position: relative; z-index: 1 }`— que le ganaría en el
   orden y la sacaría de `fixed`, dejando catorce limones quietos en la
   primera pantalla.

   Nacen apagados y los enciende la propia animación, así que el apagado
   global del movimiento reducido los deja invisibles sin que haya que
   nombrarlos en ninguna regla.
   ========================================================= */
body > .lluvia {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  contain: strict;
}
.lluvia i {
  position: absolute; display: block;
  left: var(--x); top: -16vh;
  width: var(--t); aspect-ratio: 1;
  background: var(--silueta-limon) center / contain no-repeat;
  opacity: 0;
  will-change: transform;
  animation: cae-limon var(--dur) linear infinite;
  animation-delay: var(--esp);
}
@keyframes cae-limon {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  10%  { opacity: var(--op); }
  86%  { opacity: var(--op); }
  100% { transform: translate3d(0, 132vh, 0) rotate(32deg); opacity: 0; }
}

/* En pantallas estrechas, la mitad: el mismo número de limones sobre un
   tercio del ancho se lee como suciedad en la pantalla, no como fondo. */
@media (max-width: 760px) {
  .lluvia i:nth-child(2n) { display: none; }
}

/* =========================================================
   EL DOLOR
   Apilado y a línea completa, no en rejilla de tres: la portada ya lleva
   dos rejillas de tres y esto tiene que cambiar de marcha para que se
   lea despacio en vez de ojearse.
   ========================================================= */
.dolores { display: grid; gap: 0; }
.dolor {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 28px;
  padding: clamp(28px, 4vw, 44px) 0;
  border-top: 1px solid var(--linea);
}
.dolor:last-child { border-bottom: 1px solid var(--linea); }

/* El número, en la cursiva de la display y grande: es el detalle
   editorial que marca que aquí se cambia de ritmo. */
/* .dolor .dolor-n y no .dolor-n a secas: el número es un <p>, y
   `.dolor p` —una clase más un tipo— le gana en especificidad a una
   clase sola. Le estaba imponiendo su color y su margen, así que el
   número salía en gris de párrafo y no en limón. Se vio midiendo el
   color computado; en una captura pasa por decisión de diseño. */
.dolor .dolor-n {
  margin: 0;
  font: 400 clamp(2.4rem, 5vw, 3.6rem)/1 Fraunces, Georgia, serif;
  font-style: italic;
  font-variation-settings: "SOFT" 20, "WONK" 1, "opsz" 100;
  color: var(--limon);
  /* A .28 el limón sobre negro se lee gris oliva y deja de ser limón.
     .42 lo devuelve a la marca sin que compita con el titular. */
  opacity: .42;
}
.dolor h3 {
  margin: 0 0 .7rem;
  font-size: clamp(1.5rem, 3.1vw, 2.15rem);
  max-width: 26ch;
}
.dolor p {
  margin: 0 0 .9rem;
  color: #D8D4CC;
  max-width: 64ch;
  line-height: 1.68;
}

/* El remate es la frase que se recuerda, así que se separa del párrafo
   y sube de cuerpo. Lleva filete de limón a la izquierda, el mismo
   motivo de la casa. */
.dolor-remate {
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  line-height: 1.4;
  letter-spacing: -.008em;
  color: var(--hueso) !important;
  border-left: 3px solid var(--limon);
  padding-left: 16px;
  margin: 0 0 1.2rem !important;
}

@media (max-width: 760px) {
  .dolor { grid-template-columns: 1fr; gap: 10px; }
  .dolor-n { opacity: .34; }
}

/* ---------------- movimiento reducido ----------------
   En global sobre *, nunca nombrando elementos: el día que un hero pasa
   de <img> a <video>, una regla por selector deja de alcanzarlo, la
   animación sigue corriendo y en una captura sale igual que una parada.
   Las excepciones son para que algo SE VEA, no para quitar movimiento. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }

  .aparece, .rebota, .checks.aparece li { opacity: 1 !important; transform: none !important; }
  .mascota:hover { transform: none !important; }
}