/* ============================================================
   laOra · COLECCIÓN, REDISEÑO 2026  ·  «Lujo técnico»
   ------------------------------------------------------------
   Encargo de Óscar (14/08/2026), sobre el modelo de Stitch
   «Precisión Refinada»: modo claro, JetBrains Mono para títulos
   y etiquetas, Inter para el cuerpo, bordes RECTOS —ni un radio—,
   líneas de 1px al 10-15 % y el Dorado Táctico #D4AF37 solo como
   acento. Nada de sombras: la profundidad la dan las capas de
   color (blanco → crema #FDFDFB) y los contornos.

   La cabecera y el pie del sitio no se tocan: esto viste solo el
   <main>. Todo va con prefijo cv2- para no pisar laora.css.

   LEGIBILIDAD (la regla de la casa): el suelo del texto son 13px
   y la ficha técnica desplegada va a 14px como pidió Óscar
   —«texto pequeño, una vez desplegada en 14px mínimo»—.
   ============================================================ */

.cv2{
  --cv2-negro:#121414;
  --cv2-gris:#4A4A4A;
  --cv2-crema:#FDFDFB;
  /* el crema DEL PRIMER ACTO: el #FDFDFB de las tarjetas es casi blanco
     y sobre el fondo no se veía; este sí se ve y sigue siendo cálido */
  --cv2-crema-hero:#F8F5EE;
  --cv2-oro:#D4AF37;
  --cv2-linea:rgba(74,74,74,.14);
  --cv2-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* EL PAPEL DE CADA MODELO: crema y gris, tan suaves que no compiten
     con la foto, pero bastan para que al bajar se note el salto de un
     reloj al siguiente sin meter ni una línea de más. */
  --cv2-papel-crema:#FAF6EE;
  --cv2-papel-gris:#F1F3F3;
  --cv2-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  background:#fff;color:var(--cv2-negro);
  font-family:var(--cv2-sans);
}
.cv2 *{box-sizing:border-box}

/* ---------- EL HERO ---------- */
/* El primer acto entero —kicker, titular y barra de modelos— va sobre
   crema (Óscar, 14/08/2026), el mismo de las tarjetas. */
.cv2-hero{
  background:var(--cv2-crema-hero);
}
.cv2-hero>div{
  max-width:1440px;margin:0 auto;
  padding:72px 64px 40px;
}
/* Más grande (Óscar, 21/08/2026): era una etiqueta de 13 px perdida
   encima del titular. El logotipo dibujado sube con ella, que va en em
   y arrastra su círculo. */
.cv2-kicker{
  font-family:var(--cv2-mono);font-size:clamp(16px,1.7vw,22px);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--cv2-gris);
  /* Nada de flex: el rótulo es UNA línea de texto con el logotipo
     dentro. Con display:flex, cada trozo se volvía un ítem y el
     «· 2026» acababa pegado al borde derecho en el teléfono. */
  margin:0 0 24px;
}
/* El logotipo dibujado viene pensado para fondo oscuro —color #fff—
   y aquí el hero es blanco: sin este color era invisible. */
.cv2-kicker .cb-marca{
  font-size:clamp(21px,2.2vw,29px);text-transform:none;letter-spacing:0;
  color:var(--cv2-negro);
}
.cv2-hero h1{
  font-family:var(--cv2-mono);font-weight:700;
  font-size:clamp(28px,4.6vw,48px);line-height:1.16;
  letter-spacing:-.02em;margin:0;text-transform:none;
}
.cv2-hero h1 em{
  font-family:var(--cv2-mono);font-style:normal;display:block;
  color:var(--cv2-gris);font-weight:600;
  font-size:clamp(20px,3vw,32px);margin-top:10px;letter-spacing:-.01em;
}

/* ---------- LA BARRA DE MODELOS ---------- */
/* Anclas a cada modelo dentro de esta misma hoja. En pantalla
   estrecha la fila se desliza de lado; `sticky` para que acompañe. */
.cv2-modelos{
  position:sticky;top:0;z-index:40;background:var(--cv2-crema-hero);
  border-top:1px solid var(--cv2-linea);
  border-bottom:1px solid var(--cv2-linea);
}
.cv2-modelos div{
  max-width:1440px;margin:0 auto;padding:0 64px;
  display:flex;gap:28px;overflow-x:auto;
  -ms-overflow-style:none;scrollbar-width:none;
}
.cv2-modelos div::-webkit-scrollbar{display:none}
.cv2-modelos a{
  font-family:var(--cv2-mono);font-size:13px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--cv2-gris);text-decoration:none;
  padding:16px 0 14px;border-bottom:2px solid transparent;
  white-space:nowrap;
}
.cv2-modelos a:hover{color:var(--cv2-negro)}
.cv2-modelos a.activo{color:var(--cv2-negro);border-bottom-color:var(--cv2-oro)}

/* ---------- CADA MODELO ---------- */
.cv2-modelo{
  max-width:1440px;margin:0 auto;
  padding:72px 64px 64px;
  /* El ancla no debe esconderse bajo la barra pegajosa */
  scroll-margin-top:64px;
  background:var(--cv2-papel-crema);
}
/* Alternan crema y gris en el orden en que se bajan */
#lunar,#precisa{background:var(--cv2-papel-gris)}
.cv2-modelo>header{max-width:820px}
.cv2-chip{
  display:inline-block;background:var(--cv2-negro);color:#fff;
  font-family:var(--cv2-mono);font-size:12.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;margin:0 0 18px;
}
/* EL NOMBRE DEL MODELO (Óscar, 20/08/2026): solo el nombre —el «laOra»
   ya está en la cabecera, en el chip y en el pie— y con la misma letra
   que el código del calibre, que es la que le da aire de instrumento. */
.cv2-modelo h2{
  font-family:var(--cv2-mono);font-weight:700;
  font-size:clamp(32px,4.2vw,50px);line-height:1.05;letter-spacing:-.02em;
  margin:0 0 12px;
}
.cv2-homenaje{
  font-family:var(--cv2-mono);font-size:15px;font-weight:500;
  color:var(--cv2-negro);margin:0 0 14px;
}
.cv2-homenaje b{color:var(--cv2-oro);font-weight:700}
.cv2-intro{
  font-size:16px;line-height:1.55;color:rgba(18,20,20,.8);margin:0;
}

/* EL LIENZO DEL MODELO (Óscar, 20/08/2026). La foto no se incrusta: es
   el fondo de la tarjeta que lleva la presentación y los calibres. Se
   come el padding de la sección con márgenes negativos —arriba también—
   para que la foto empiece en el borde mismo del papel. Encima va un
   velo oscuro en degradado: cerrado a la izquierda, que es donde cae el
   texto, y abierto a la derecha, que es donde está lo que se quiere
   ver. En el teléfono el degradado se pone vertical, porque ahí el
   texto ocupa el ancho entero. */
.cv2-lienzo{
  margin:-72px -64px 0;padding:72px 64px 60px;
  position:relative;color:#fff;
  background-color:#14150f;
  background-position:72% 34%;background-size:cover;background-repeat:no-repeat;
}
.cv2-lienzo header{max-width:820px}
.cv2-lienzo-trinchera{
  background-image:
    linear-gradient(100deg, rgba(6,7,6,.92) 0%, rgba(6,7,6,.84) 32%, rgba(6,7,6,.46) 64%, rgba(6,7,6,.50) 100%),
    url("/assets/img/trinchera-2026/editorial/soldado-1600.avif");
  /* Sin image-set y sin 2560: el máster que quedó de esta escena mide
     1672 px de ancho, así que el 1600 es todo lo que hay. Ampliar para
     fingir una versión de retina solo pesaría más sin verse mejor. */
}
/* El Lunar ya viene oscuro de fábrica —cielo negro—, así que el velo
   lateral es más suave que el del Trinchera. Lo que sí necesita es un
   segundo velo vertical que cierre por abajo, donde el regolito es
   claro y el texto se le perdería encima. */
.cv2-lienzo-lunar{
  background-color:#07080b;
  background-image:
    linear-gradient(100deg, rgba(4,5,8,.90) 0%, rgba(4,5,8,.78) 34%, rgba(4,5,8,.34) 66%, rgba(4,5,8,.40) 100%),
    linear-gradient(180deg, rgba(4,5,8,0) 0%, rgba(4,5,8,0) 46%, rgba(4,5,8,.52) 100%),
    url("/assets/img/lunar-v2/editorial/luna-1600.avif");
  background-image:
    linear-gradient(100deg, rgba(4,5,8,.90) 0%, rgba(4,5,8,.78) 34%, rgba(4,5,8,.34) 66%, rgba(4,5,8,.40) 100%),
    linear-gradient(180deg, rgba(4,5,8,0) 0%, rgba(4,5,8,0) 46%, rgba(4,5,8,.52) 100%),
    image-set(url("/assets/img/lunar-v2/editorial/luna-1600.avif") 1x,
              url("/assets/img/lunar-v2/editorial/luna-2560.avif") 2x);
  background-position:68% 46%;
}

/* El Cero Cero: noche en la costa, ya oscurísima por la izquierda —mar
   y cielo— y con las luces del casino a la derecha. El velo casi solo
   tiene que apuntalar el texto; pasarse aquí sería apagar esas luces,
   que son lo que cuenta la escena. */
.cv2-lienzo-cerocero{
  background-color:#05070c;
  background-image:
    linear-gradient(100deg, rgba(3,5,10,.86) 0%, rgba(3,5,10,.74) 34%, rgba(3,5,10,.30) 66%, rgba(3,5,10,.36) 100%),
    url("/assets/img/cero-cero/editorial/espionaje-1600.avif");
  background-image:
    linear-gradient(100deg, rgba(3,5,10,.86) 0%, rgba(3,5,10,.74) 34%, rgba(3,5,10,.30) 66%, rgba(3,5,10,.36) 100%),
    image-set(url("/assets/img/cero-cero/editorial/espionaje-1600.avif") 1x,
              url("/assets/img/cero-cero/editorial/espionaje-2560.avif") 2x);
  background-position:60% 46%;
}
/* LA CABECERA, EN UNA LÍNEA (Óscar, 24/08/2026). El tipo, el rótulo, el
   código y el dato que de verdad importa —la autonomía o la reserva de
   marcha— iban uno debajo de otro y el bloque se comía media pantalla.
   Ahora van seguidos y el bloque mide la mitad. */
.cv2-cal-cab{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;
}
.cv2-cal-cab>p{margin:0}
.cv2-cal-dato{
  font-size:15px;color:var(--cv2-gris);
}
/* El enlace a la laOrateca: pequeño, subrayado y sin gritar. Quien ya
   sabe lo que es un cuarzo pasa de largo; quien no, tiene dónde ir. */
.cv2-cal-quees{margin:8px 0 0;font-size:13.5px}
.cv2-cal-quees a{
  color:var(--cv2-gris);text-decoration:underline;text-underline-offset:3px;
}
.cv2-cal-quees a:hover{color:var(--cv2-negro)}

/* Mientras un modelo no tenga su bloque de calibres, las dos líneas de
   movimiento y materiales también se aclaran sobre el lienzo. */
.cv2-lienzo .cv2-sub{color:rgba(255,255,255,.66)}
.cv2-lienzo .cv2-sub-grande{color:#fff}
.cv2-lienzo .cv2-sub-linea{color:rgba(255,255,255,.72)}

/* La Precisa: el escultor y su pieza de acero en un estudio de hormigón.
   Es la foto más clara de las cuatro —gris medio de pared—, así que el
   velo se cierra a la izquierda casi como el del Trinchera y se abre a
   la derecha, que es donde están la escultura y el hombre. */
.cv2-lienzo-precisa{
  background-color:#141618;
  background-image:
    linear-gradient(100deg, rgba(8,9,11,.92) 0%, rgba(8,9,11,.84) 33%, rgba(8,9,11,.44) 66%, rgba(8,9,11,.50) 100%),
    url("/assets/img/precisa/editorial/escultor-1600.avif");
  background-image:
    linear-gradient(100deg, rgba(8,9,11,.92) 0%, rgba(8,9,11,.84) 33%, rgba(8,9,11,.44) 66%, rgba(8,9,11,.50) 100%),
    image-set(url("/assets/img/precisa/editorial/escultor-1600.avif") 1x,
              url("/assets/img/precisa/editorial/escultor-2560.avif") 2x);
  background-position:66% 44%;
}

/* La Bitácora: la mesa de cartas de un camarote, con el ojo de buey, el
   compás y el cuaderno abierto. Es la más oscura de las cinco, así que
   el velo apenas apuntala el texto por la izquierda y se abre del todo
   a la derecha, donde está el quinqué —la única luz de la escena—. */
.cv2-lienzo-bitacora{
  background-color:#0b0906;
  background-image:
    linear-gradient(100deg, rgba(6,5,4,.84) 0%, rgba(6,5,4,.70) 34%, rgba(6,5,4,.26) 66%, rgba(6,5,4,.32) 100%),
    url("/assets/img/bitacora/editorial/camarote-1600.avif");
  background-image:
    linear-gradient(100deg, rgba(6,5,4,.84) 0%, rgba(6,5,4,.70) 34%, rgba(6,5,4,.26) 66%, rgba(6,5,4,.32) 100%),
    image-set(url("/assets/img/bitacora/editorial/camarote-1600.avif") 1x,
              url("/assets/img/bitacora/editorial/camarote-2560.avif") 2x);
  background-position:50% 52%;
}

/* EL TORTUGA TODAVÍA NO TIENE FOTO DE AMBIENTE (31/08/2026). Los otros
   cinco lienzos son una escena —la trinchera, la luna, el camarote— y sin
   una el bloque se queda transparente: el texto es blanco y desaparece
   sobre el crema de la página. Hasta que llegue la suya, un degradado de
   fondo de mar, que es donde va este reloj. */
.cv2-lienzo-tortuga{
  background-color:#05171d;
  background-image:
    linear-gradient(103deg, rgba(3,12,16,.92) 0%, rgba(4,22,29,.72) 46%, rgba(7,44,56,.58) 100%),
    radial-gradient(120% 90% at 78% 18%, rgba(58,150,168,.42) 0%, rgba(5,23,29,0) 62%);
}

/* LA TORTUGA DEL LIENZO (Óscar, 01/09/2026): «coloca esta imagen (…) en la
   parte derecha superior que ocupe el 30% del espacio». Es el único lienzo
   sin foto: los otros cinco llevan una escena de fondo a sangre y éste sólo
   tenía degradados. Aquí no cabía una foto de fondo —la entrega es un
   recorte con alfa, no una escena— así que va montada encima, nadando en la
   esquina, que es justo para lo que la hicieron (el archivo se llama
   «overlay»).

   Va DETRÁS del texto (z-index 0 contra el 1 del contenido) y con
   `pointer-events:none`, para que no se coma ni un clic de la comparativa.
   El 30% es del ancho del lienzo, como pidió. */
.cv2-lienzo-tortuga > *{position:relative;z-index:1}
.cv2-fauna{
  position:absolute;top:0;right:0;z-index:0;
  width:30%;height:auto;
  pointer-events:none;user-select:none;
}

/* CONTRA QUIÉN SE MIDE CADA MODELO (Óscar, 27/08/2026). La regla de la
   casa: la comparativa mira SIEMPRE hacia arriba —o a la misma altura
   dando mucho más—, nunca hacia abajo. Van el homenajeado y dos
   superventas de su liga, y el nuestro al final, que es el remate. */
.cv2-vs{margin:34px 0 0}
.cv2-vs-titulo{
  font-family:var(--cv2-mono);font-weight:700;
  font-size:clamp(15px,1.7vw,20px);line-height:1.3;letter-spacing:.07em;
  text-transform:uppercase;margin:0 0 16px;
}
.cv2-vs-titulo span{color:var(--cv2-gris)}
.cv2-vs-lista{list-style:none;margin:0;padding:0;max-width:760px}
.cv2-vs-lista li{
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:12px 0;border-bottom:1px solid var(--cv2-linea);
  font-size:16px;line-height:1.3;color:var(--cv2-gris);
}
.cv2-vs-lista b{color:var(--cv2-negro);font-weight:700}
.cv2-vs-lista em{
  font-family:var(--cv2-mono);font-style:normal;font-weight:700;
  font-size:17px;color:var(--cv2-negro);white-space:nowrap;
}
/* El nuestro cierra la lista y se ve que es el nuestro. */
.cv2-vs-lista li.cv2-vs-nuestro{
  border-bottom:0;border-top:2px solid var(--cv2-negro);
  margin-top:6px;padding-top:14px;
}
.cv2-vs-lista li.cv2-vs-nuestro b,
.cv2-vs-lista li.cv2-vs-nuestro em{color:var(--cv2-oro)}
.cv2-vs-lista li.cv2-vs-nuestro em{font-size:20px}

/* LO QUE GANA EL NUESTRO (Óscar, 27/08/2026). Debajo de la comparativa de
   precios: tres razones, y las tres con una cifra NUESTRA delante. Ni un
   dato de la competencia aquí —esos viven en la tabla de arriba, con su
   aviso—, así que este bloque no depende de comprobar nada ajeno. */
.cv2-vs-gana{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:18px 30px;margin:22px 0 0;max-width:900px;
}
.cv2-vs-gana div{border-top:2px solid var(--cv2-oro);padding-top:12px}
.cv2-vs-gana b{
  display:block;font-family:var(--cv2-mono);font-weight:700;
  font-size:19px;color:var(--cv2-negro);margin-bottom:4px;
}
.cv2-vs-gana span{font-size:15px;line-height:1.45;color:var(--cv2-gris)}

/* Lo que va encima del lienzo se vuelve claro. El dorado, que sobre
   blanco andaba justo de contraste, aquí por fin brilla. */
.cv2-lienzo .cv2-chip{background:#fff;color:var(--cv2-negro)}
.cv2-lienzo h2{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.6)}
.cv2-lienzo .cv2-homenaje{color:#fff}
.cv2-lienzo .cv2-intro{color:rgba(255,255,255,.86)}
.cv2-lienzo .cv2-cal-titulo{color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.55)}
.cv2-lienzo .cv2-cal-titulo span{color:rgba(255,255,255,.64)}
.cv2-lienzo .cv2-cal-caja{
  background:rgba(9,10,9,.80);border-color:rgba(255,255,255,.18);
  border-top-color:#fff;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.cv2-lienzo .cv2-cal-tipo{background:#fff;color:var(--cv2-negro)}
.cv2-lienzo .cv2-cal-rotulo{color:rgba(255,255,255,.62)}
.cv2-lienzo .cv2-cal-codigo{color:#fff}
.cv2-lienzo .cv2-cal-lead{border-top-color:rgba(255,255,255,.20)}
.cv2-lienzo .cv2-cal-refs li{color:rgba(255,255,255,.72)}
.cv2-lienzo .cv2-cal-dato{color:rgba(255,255,255,.72)}
.cv2-lienzo .cv2-cal-quees a{color:rgba(255,255,255,.72)}
.cv2-lienzo .cv2-cal-quees a:hover{color:#fff}
.cv2-lienzo .cv2-cal-refs b,
.cv2-lienzo .cv2-cal-refs em{color:#fff}
.cv2-lienzo .cv2-cal-aviso{color:rgba(255,255,255,.62)}
.cv2-lienzo .cv2-vs-titulo{color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.55)}
.cv2-lienzo .cv2-vs-titulo span{color:rgba(255,255,255,.64)}
.cv2-lienzo .cv2-vs-lista li{color:rgba(255,255,255,.72);border-bottom-color:rgba(255,255,255,.16)}
.cv2-lienzo .cv2-vs-lista b{color:#fff}
.cv2-lienzo .cv2-vs-lista em{color:#fff}
.cv2-lienzo .cv2-vs-lista li.cv2-vs-nuestro{border-top-color:rgba(255,255,255,.55)}
.cv2-lienzo .cv2-vs-gana b{color:#fff}
.cv2-lienzo .cv2-vs-gana span{color:rgba(255,255,255,.78)}

/* ---------- LOS CALIBRES (Óscar, 20/08/2026) ----------
   Ocupa el sitio del antiguo «Movimientos Suizos» y de la línea de
   materiales. Dice lo mismo con más fuerza: qué motor lleva el reloj
   y qué mueve ese mismo tipo de motor ahí fuera. Las marcas se citan
   por su nombre —jamás con su logotipo— y el aviso legal va debajo,
   con el mismo texto que ya usa la portada. */
.cv2-cal{margin:52px 0 40px}
/* El titular lleva la letra del chip —mono, versal y espaciada— pero
   en grande: es el rótulo de la infografía, no una etiqueta. */
.cv2-cal-titulo{
  font-family:var(--cv2-mono);font-weight:700;
  font-size:clamp(17px,2.1vw,27px);line-height:1.3;letter-spacing:.07em;
  text-transform:uppercase;
  margin:0 0 26px;max-width:1000px;
}
/* EL TITULAR VA EN DOS RENGLONES, y son los que Óscar escribió
   (31/08/2026): «NUESTROS CALIBRES HAN MOVIDO» arriba y «LO MEJOR DE LA
   RELOJERÍA MUNDIAL» debajo. Antes se partía por donde cayera el ancho de
   la pantalla, así que en cada modelo rompía en un sitio distinto. */
.cv2-cal-titulo span{color:var(--cv2-gris)}
/* ⚠️ SÓLO EN EL TITULAR DE ETIQUETA, no en la frase del Lunar: allí el
   `span` va al PRINCIPIO de la oración y partirlo en bloque la rompe por
   la mitad. */
.cv2-cal-titulo:not(.cv2-cal-frase) span{display:block}
/* Cuando el rótulo no es una etiqueta sino una FRASE (Óscar, 21/08/2026,
   en el Lunar), se le quita la versalita y el espaciado: cien caracteres
   en mayúsculas espaciadas no se leen, se descifran. Se queda el mono,
   que es lo que la hace de la casa, y el remate en claro con la primera
   mitad un tono por debajo. */
.cv2-cal-frase{
  text-transform:none;letter-spacing:0;
  font-size:clamp(19px,2.4vw,32px);line-height:1.32;
}

/* ⚠️ CADA CAJA, DE SU ALTO (Óscar, 31/08/2026: «las tarjetas mucho menos
   altas»). Iban con `align-items:stretch`, así que las dos crecían hasta
   la más alta: la del automático lleva nombres de modelo que hacen dos
   renglones —Tudor Submariner, Breitling Superocean— y la del cuarzo,
   que sólo lleva marcas, se quedaba con un palmo de fondo vacío debajo.
   Con `start` cada una mide lo que dice. */
.cv2-cal-rejilla{
  display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start;
}
.cv2-cal-caja{
  background:#fff;border:1px solid var(--cv2-linea);
  border-top:3px solid var(--cv2-negro);
  padding:24px 26px 22px;
}
.cv2-cal-tipo{
  display:inline-block;background:var(--cv2-negro);color:#fff;
  font-family:var(--cv2-mono);font-size:12.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  padding:4px 10px;margin:0;
}
.cv2-cal-rotulo{
  font-family:var(--cv2-mono);font-size:12px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--cv2-gris);
  margin:0;
}
.cv2-cal-codigo{
  font-family:var(--cv2-mono);font-weight:700;
  font-size:clamp(24px,2.8vw,34px);letter-spacing:-.02em;
  color:var(--cv2-negro);margin:0;
}
.cv2-cal-lead{
  font-size:15px;font-weight:700;color:var(--cv2-oro);
  margin:0 0 10px;padding-top:14px;border-top:1px solid var(--cv2-linea);
}
/* LAS REFERENCIAS, EN FILA (Óscar, 24/08/2026): una columna por marca,
   el nombre arriba y el precio debajo. Antes era una lista de tres
   renglones y sumaba altura sin decir nada más. */
.cv2-cal-refs{
  list-style:none;margin:0;padding:0;
  /* En fila y pegadas a la izquierda, no repartidas: con dos marcas, una
     rejilla de columnas iguales las mandaba a los extremos de la caja. */
  display:flex;flex-wrap:wrap;gap:14px 28px;
}
.cv2-cal-refs li{
  display:flex;flex-direction:column;gap:1px;min-width:92px;
  font-size:15px;line-height:1.3;color:var(--cv2-gris);
}
/* La marca y el modelo, en la MISMA línea (Óscar, 24/08/2026), y el
   precio debajo: dos renglones por referencia en vez de tres. */
.cv2-cal-nom{font-size:14px;line-height:1.25}
.cv2-cal-refs b{color:var(--cv2-negro);font-weight:700}
.cv2-cal-refs em{
  font-family:var(--cv2-mono);font-style:normal;font-weight:700;
  font-size:17px;color:var(--cv2-negro);white-space:nowrap;margin-top:3px;
}
/* Un solo motor —el Lunar, el Cero Cero— y la caja ocupa todo el ancho. */
.cv2-cal-sola{grid-template-columns:1fr}

.cv2-cal-aviso{
  font-size:13px;line-height:1.5;color:var(--cv2-gris);
  margin:16px 0 0;max-width:900px;
}

/* ---------- LAS COMBINACIONES FIRMADAS ---------- */
.cv2-sub{
  font-family:var(--cv2-mono);font-size:13px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--cv2-gris);
  margin:56px 0 6px;
}
.cv2-sub b{color:var(--cv2-negro)}
/* El titular de la fila de tarjetas (Óscar, 14/08/2026): «Movimientos
   Suizos», más grande y en mayúsculas; debajo, los materiales en una
   línea con separadores. */
.cv2-sub-grande{
  font-size:clamp(19px,2.2vw,26px);letter-spacing:.06em;
  color:var(--cv2-negro);margin-bottom:8px;
}
.cv2-sub-linea{
  font-size:14px;color:var(--cv2-gris);margin:0 0 26px;
}
.cv2-tarjetas{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
}
/* AIRE ENTRE EL LIENZO Y LAS FOTOS (Óscar, 31/08/2026: «justo debajo de la
   tarjeta espacio libre y las 4 fotos de promoción de ese reloj»). El lienzo
   cierra con 60 px de relleno, así que las fotos se le quedaban pegadas: un
   respiro de papel crema y se ve dónde acaba la tarjeta y dónde empiezan los
   relojes. El Trinchera no lo necesita: entre los dos lleva las cajas de
   envío y garantía. */
.cv2-lienzo + .cv2-tarjetas{margin-top:44px}
.cv2-tarjeta{
  background:var(--cv2-crema);border:1px solid var(--cv2-linea);
  display:flex;flex-direction:column;
}
.cv2-foto{
  position:relative;aspect-ratio:1/1;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  /* el gris del estudio de las fotos, como en el configurador */
  background:#eae8e8;
}
.cv2-foto img{
  width:78%;height:92%;object-fit:contain;display:block;
}
/* ⛔ EL LUNAR YA NO SE ACERCA. Lo pidió Óscar el 21/08/2026 —«sus fotos
   vienen de las capas del configurador y salía pequeño»— y lo derogó él
   mismo el 01/09/2026: «el reloj debe presentarse SIEMPRE más alejado con
   más correa o brazalete». Hoy TODAS las tarjetas salen de las capas y
   todas se arman al 72 %, así que el Lunar no tiene nada de particular: con
   su 1,24 sería el único modelo enseñado de cerca y el único sin correa
   entera. Si algún día vuelve a hacer falta acercar una tarjeta, se acerca
   REHACIÉNDOLA con otra escala, no estirándola con CSS.

   z-index: aquel zoom creaba contexto de apilado y la foto se comía el
   chip, que va antes en el HTML. Se queda por si vuelve un transform. */
.cv2-foto .cv2-chip{
  position:absolute;top:12px;left:12px;margin:0;font-size:12px;z-index:2;
}
.cv2-cuerpo{
  padding:18px 18px 20px;display:flex;flex-direction:column;
  gap:10px;flex:1;
}
.cv2-tarjeta h3{
  font-family:var(--cv2-mono);font-size:19px;font-weight:700;
  letter-spacing:-.01em;margin:0;
}
/* El precio, solo, bajo el nombre (Óscar, 14/08/2026) */
.cv2-precio-solo{
  font-family:var(--cv2-mono);font-size:19px;font-weight:700;
  margin:0;border-bottom:1px solid var(--cv2-linea);padding-bottom:10px;
}

/* ---------- LA LISTA DE LA TARJETA ---------- */
/* El formato que fijó Óscar (14/08/2026): nombres cortos, mínimas
   palabras y sin explicar más. Una línea por dato, a 14px, con
   filos de 1px como las tablas de especificación de la maqueta.
   La primera línea es el movimiento y va en mono, destacada. */
.cv2-lista{
  list-style:none;margin:0;padding:0;flex:1;
}
.cv2-lista li{
  /* 12px por orden expresa de Óscar (14/08/2026) */
  font-size:12px;line-height:1.5;color:var(--cv2-gris);
  padding:6px 0;border-bottom:1px solid var(--cv2-linea);
}
.cv2-lista li:first-child{
  font-family:var(--cv2-mono);font-weight:700;font-size:14px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--cv2-negro);
}
.cv2-lista li:last-child{border-bottom:0}

/* ---------- EL BOTÓN ---------- */
.cv2-comprar{
  font-family:var(--cv2-mono);font-size:13px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  background:var(--cv2-negro);color:#fff;border:0;border-radius:0;
  padding:16px 12px;cursor:pointer;width:100%;
  transition:background .2s;
}
/* El mismo botón, cuando es un enlace: los modelos que aún no se
   venden desde aquí llevan a su ficha en vez de a la cesta. */
a.cv2-comprar{display:block;text-align:center;text-decoration:none}
.cv2-comprar:hover{background:#2f3131}
.cv2-comprar:active{opacity:.85}

/* ---------- LAS TARJETAS DE CONFIANZA ---------- */
.cv2-confianza{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px;
}
.cv2-confianza article{
  background:var(--cv2-crema);border:1px solid var(--cv2-linea);
  padding:22px 24px;display:flex;align-items:center;gap:16px;
}
.cv2-confianza svg{
  width:28px;height:28px;flex:0 0 auto;stroke:var(--cv2-oro);
}
.cv2-confianza b{
  font-family:var(--cv2-mono);font-size:14px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;display:block;
}
.cv2-confianza p{font-size:14px;color:var(--cv2-gris);margin:2px 0 0}

/* ---------- EL ENLACE AL CONFIGURADOR ---------- */
/* «¿No encuentras el tuyo?» (Óscar, 20/08/2026): con el dibujo de dos
   piezas de puzle —una oscura con su pestaña y otra dorada con su
   hueco— y la frase en negrita, un punto más grande. El puzle va de
   fondo en el ::before para no repetir el mismo SVG cinco veces. */
.cv2-configura{
  margin-top:30px;font-size:17px;font-weight:700;color:var(--cv2-negro);
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.cv2-configura::before{
  content:"";flex:0 0 auto;width:66px;height:32px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 27'%3E%3Cpath d='M2 3h18v6a5.5 5.5 0 1 1 0 9v6H2Z' fill='none' stroke='%23121414' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M31 3h23v21H31v-6a5.5 5.5 0 1 0 0-9Z' fill='none' stroke='%23D4AF37' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.cv2-configura a{
  font-family:var(--cv2-mono);font-weight:700;font-size:16px;
  color:var(--cv2-negro);text-decoration:none;
  border-bottom:2px solid var(--cv2-oro);padding-bottom:2px;
}
.cv2-configura a:hover{color:var(--cv2-oro)}

/* ---------- LOS MODELOS QUE AÚN NO SE HAN MUDADO ---------- */
/* Una fila sobria por modelo, con su ancla, hasta que cada uno
   reciba su sección completa como la del Trinchera. */
.cv2-pendiente{
  max-width:1440px;margin:0 auto;padding:0 64px;
}
.cv2-pendiente article{
  border-top:1px solid var(--cv2-linea);
  padding:26px 0;display:flex;align-items:baseline;gap:18px;
  scroll-margin-top:64px;
}
.cv2-pendiente h2{
  font-family:var(--cv2-mono);font-size:22px;font-weight:700;margin:0;
  min-width:180px;letter-spacing:-.02em;
}
.cv2-pendiente p{font-size:14px;color:var(--cv2-gris);margin:0;flex:1}
.cv2-pendiente a{
  font-family:var(--cv2-mono);font-size:13px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--cv2-negro);text-decoration:none;white-space:nowrap;
  border-bottom:2px solid var(--cv2-oro);padding-bottom:2px;
}
.cv2-pendiente a:hover{color:var(--cv2-oro)}
.cv2-pendiente .cv2-desde{
  font-family:var(--cv2-mono);font-size:14px;font-weight:500;
  color:var(--cv2-gris);flex:0 0 auto;
}

/* ---------- TELÉFONO ---------- */
@media (max-width:1100px){
  .cv2-tarjetas{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .cv2-hero>div{padding:44px 20px 28px}
  .cv2-puertas{gap:10px;margin-top:26px}
  .cv2-puerta{width:100%;text-align:left;font-size:15px;padding:16px 18px}
  .cv2-modelos div{padding:0 20px;gap:20px}
  .cv2-modelo{padding:48px 20px 40px}
  .cv2-lienzo{margin:-48px -20px 0;padding:48px 20px 36px;background-position:60% 28%}
  /* La tortuga, del móvil para abajo. Aquí el texto pasa a ocupar el ancho
     entero y el párrafo de presentación sube hasta la altura del bicho, así
     que el tamaño no se elige a ojo: es el mayor que NO se mete debajo del
     texto. Medido a 820, 768, 640, 560 y 430 px: a 820 sólo cabe el 36 %; de
     560 para abajo el párrafo ya baja lo suficiente y cabe el 52 %.
     Y apagada, que va por detrás y no debe pelearse con lo que hay que leer
     —ver [legibilidad por encima de todo]—. */
  .cv2-fauna{width:36%;opacity:.5}
  /* En el teléfono el texto ocupa el ancho entero, así que el velo se
     cierra arriba —donde cae— y se abre abajo, que es donde las cajas
     traen su propio fondo y la foto puede respirar. */
  .cv2-lienzo-trinchera{
    background-image:
      linear-gradient(180deg, rgba(6,7,6,.92) 0%, rgba(6,7,6,.89) 42%, rgba(6,7,6,.62) 74%, rgba(6,7,6,.72) 100%),
      url("/assets/img/trinchera-2026/editorial/soldado-1600.avif");
  }
  .cv2-lienzo-bitacora{
    background-position:54% 50%;
    background-image:
      linear-gradient(180deg, rgba(6,5,4,.88) 0%, rgba(6,5,4,.84) 46%, rgba(6,5,4,.52) 76%, rgba(6,5,4,.64) 100%),
      url("/assets/img/bitacora/editorial/camarote-1600.avif");
  }
  .cv2-lienzo-precisa{
    background-position:64% 42%;
    background-image:
      linear-gradient(180deg, rgba(8,9,11,.93) 0%, rgba(8,9,11,.90) 44%, rgba(8,9,11,.66) 74%, rgba(8,9,11,.76) 100%),
      url("/assets/img/precisa/editorial/escultor-1600.avif");
  }
  .cv2-lienzo-cerocero{
    background-position:58% 44%;
    background-image:
      linear-gradient(180deg, rgba(3,5,10,.90) 0%, rgba(3,5,10,.86) 46%, rgba(3,5,10,.54) 78%, rgba(3,5,10,.66) 100%),
      url("/assets/img/cero-cero/editorial/espionaje-1600.avif");
  }
  .cv2-lienzo-lunar{
    background-position:66% 40%;
    background-image:
      linear-gradient(180deg, rgba(4,5,8,.88) 0%, rgba(4,5,8,.84) 44%, rgba(4,5,8,.58) 72%, rgba(4,5,8,.78) 100%),
      url("/assets/img/lunar-v2/editorial/luna-1600.avif");
  }
  .cv2-cal{margin:36px 0 32px}
  .cv2-cal-rejilla{grid-template-columns:1fr;gap:16px}
  .cv2-cal-caja{padding:20px}
  .cv2-cal-refs li{font-size:14px}
  .cv2-configura{font-size:15px;gap:12px}
  .cv2-configura::before{width:48px;height:23px}
  .cv2-configura a{font-size:14px}
  .cv2-pendiente{padding:0 20px}
  .cv2-confianza{grid-template-columns:1fr}
  .cv2-pendiente article{flex-wrap:wrap;gap:8px 18px}
}
@media (max-width:560px){
  .cv2-fauna{width:52%;opacity:.42}
}

/* En el teléfono las fichas se deslizan de lado (Óscar, 14/08/2026):
   una tira horizontal con parada tarjeta a tarjeta, en vez de apilarse
   en una columna que no acaba nunca. */
@media (max-width:820px){
  .cv2-tarjetas{
    display:flex;overflow-x:auto;gap:16px;
    scroll-snap-type:x mandatory;
    margin:0 -20px;padding:0 20px 6px;
    -ms-overflow-style:none;scrollbar-width:none;
  }
  .cv2-tarjetas::-webkit-scrollbar{display:none}
  .cv2-tarjeta{flex:0 0 min(78vw,320px);scroll-snap-align:start}
}

/* ---------- LAS MINIATURAS DE OTROS ACABADOS (patrón Hamilton) ----------
   Óscar, 14/08/2026: al pasar el cursor por la tarjeta aparecen tres
   miniaturas del mismo modelo y un «+N» que lleva al configurador.
   Pulsar una miniatura cambia la foto grande de la tarjeta. En el
   teléfono no hay cursor: no se pintan. */
.cv2-minis{
  position:absolute;left:10px;right:10px;bottom:10px;z-index:2;
  display:flex;align-items:center;gap:8px;
  opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .18s,transform .18s;
}
.cv2-tarjeta:hover .cv2-minis,
.cv2-tarjeta:focus-within .cv2-minis{
  opacity:1;transform:none;pointer-events:auto;
}
.cv2-minis button{
  width:52px;height:52px;padding:3px;border-radius:0;cursor:pointer;
  background:#fff;border:1px solid var(--cv2-linea);
}
.cv2-minis button:hover{border-color:var(--cv2-negro)}
.cv2-minis img{width:100%;height:100%;object-fit:contain;display:block}
.cv2-minis a{
  margin-left:auto;font-family:var(--cv2-mono);font-size:13px;font-weight:700;
  color:var(--cv2-negro);text-decoration:none;background:#fff;
  border:1px solid var(--cv2-linea);padding:6px 9px;
}
.cv2-minis a:hover{border-color:var(--cv2-oro);color:var(--cv2-oro)}

/* ---------- EL AVISO DE LOS 15 SEGUNDOS ---------- */
.cv2-velo{
  position:fixed;inset:0;z-index:80;background:rgba(18,20,20,.46);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
/* el display:flex de arriba le ganaba al atributo hidden del navegador
   y el velo salía desde el primer segundo: aquí se le devuelve el mando */
.cv2-velo[hidden]{display:none}
.cv2-aviso{
  position:relative;background:#fff;border:1px solid var(--cv2-linea);
  max-width:760px;width:100%;display:grid;grid-template-columns:1fr 1fr;
}
.cv2-aviso-x{
  position:absolute;top:8px;right:12px;z-index:2;
  font-size:26px;line-height:1;color:var(--cv2-gris);
  background:none;border:0;cursor:pointer;
}
.cv2-aviso-x:hover{color:var(--cv2-negro)}
.cv2-aviso-foto{
  background:#eae8e8;display:flex;align-items:center;justify-content:center;
  min-height:340px;
}
.cv2-aviso-foto img{width:82%;height:92%;object-fit:contain}
.cv2-aviso-cuerpo{
  padding:28px 26px;display:flex;flex-direction:column;gap:12px;
  background:var(--cv2-crema);
}
.cv2-aviso-cuerpo h3{
  font-family:var(--cv2-mono);font-size:24px;font-weight:700;margin:0;
}
.cv2-aviso-desde{
  font-family:var(--cv2-mono);font-size:17px;font-weight:700;margin:0;
}
.cv2-aviso-boton{display:block;text-align:center;text-decoration:none;margin-top:4px}
.cv2-aviso-cajas{display:grid;gap:10px;margin-top:6px}
.cv2-aviso-cajas>div{
  display:flex;align-items:center;gap:12px;
  background:#fff;border:1px solid var(--cv2-linea);padding:12px 14px;
}
.cv2-aviso-cajas svg{width:24px;height:24px;flex:0 0 auto;stroke:var(--cv2-oro)}
.cv2-aviso-cajas b{
  font-family:var(--cv2-mono);font-size:13px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;display:block;
}
.cv2-aviso-cajas p{font-size:13px;color:var(--cv2-gris);margin:1px 0 0}
@media (max-width:820px){
  .cv2-minis{display:none}
  .cv2-aviso{grid-template-columns:1fr;max-width:420px}
  .cv2-aviso-foto{min-height:230px}
}

/* ---------- LA TARJETA MÍNIMA (Óscar, 15/08/2026) ----------
   Sin nombre y sin línea de precio aparte: cuatro especificaciones y el
   precio EN DORADO como última línea. Al pasar el cursor, las
   especificaciones se cambian por las tres miniaturas con su «+N» y el
   botón de añadir. En el teléfono no hay cursor: se ve todo, sin trueque. */
.cv2-t2 .cv2-cuerpo{position:relative}
/* con .cv2-lista li delante para ganarle la especificidad a la regla
   general de la lista, que lo dejaba gris y a 12px */
.cv2-lista li.cv2-precio-lista{
  font-family:var(--cv2-mono);font-weight:700;font-size:17px;
  color:var(--cv2-oro);border-bottom:0;
}
/* debajo del precio, la vía de los tres plazos (Óscar, 20/08/2026) */
.cv2-lista li.cv2-plazos{
  font-size:12px;color:var(--cv2-gris,#777);border-bottom:0;margin-top:-6px;
}
.cv2-t2 .cv2-encima{
  position:absolute;inset:0;padding:18px;
  display:flex;flex-direction:column;justify-content:space-between;gap:12px;
  background:var(--cv2-crema);
  opacity:0;pointer-events:none;transition:opacity .18s;
}
.cv2-t2:hover .cv2-encima,
.cv2-t2:focus-within .cv2-encima{opacity:1;pointer-events:auto}
.cv2-minis2{display:flex;align-items:center;gap:10px}
.cv2-minis2 button{
  width:64px;height:64px;padding:4px;border-radius:0;cursor:pointer;
  background:#fff;border:1px solid var(--cv2-linea);
}
.cv2-minis2 button:hover{border-color:var(--cv2-negro)}
/* La miniatura elegida se señala, que si no no se sabe cuál manda. */
.cv2-minis2 button[aria-pressed="true"]{
  border-color:var(--cv2-negro);box-shadow:inset 0 0 0 2px var(--cv2-oro);
}
.cv2-minis2 img{width:100%;height:100%;object-fit:contain;display:block}
.cv2-minis2 a{
  margin-left:auto;font-family:var(--cv2-mono);font-size:14px;font-weight:700;
  color:var(--cv2-negro);text-decoration:none;
  border-bottom:2px solid var(--cv2-oro);padding-bottom:2px;
}
.cv2-minis2 a:hover{color:var(--cv2-oro)}
@media (max-width:820px){
  /* sin cursor no hay trueque: especificaciones y botón, todo a la vista */
  .cv2-t2 .cv2-encima{
    position:static;opacity:1;pointer-events:auto;padding:0;
  }
  .cv2-minis2{display:none}
}

/* Fotos «tal cual» (régimen del 15/08): la foto llena la tarjeta y su
   fondo de estudio hace de marco, con la sombra natural. */
.cv2-foto-llena{background:none}
.cv2-foto-llena img{width:100%;height:100%;object-fit:cover}

/* ============================================================
   LAS TRES PREGUNTAS  ·  18/08/2026
   ------------------------------------------------------------
   La entrada del que llega sin saber de relojes: muñeca, uso y
   presupuesto, y como mucho tres relojes con el motivo escrito.

   Va antes que la barra de modelos a propósito: quien sabe lo que
   busca se salta esto en un vistazo; quien no lo sabe, aquí tiene
   por dónde empezar en vez de veinte tarjetas de golpe.

   Sin radios y con líneas de 1px, como el resto de la colección.
   Los botones son grandes de verdad —56 px de alto— porque esto se
   usa con el pulgar y porque el suelo de legibilidad de la casa son
   13 px, y aquí no bajamos de 15.
   ============================================================ */
/* LAS DOS PUERTAS (Óscar, 20/08/2026). Debajo del titular: una para
   el que se compra el reloj y otra para el que lo regala. Hasta que
   no se pulsa una, las tres preguntas ni aparecen. */
.cv2-puertas{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px }
.cv2-puertas[hidden]{ display:none }
.cv2-puerta{
  font-family:var(--cv2-mono); font-size:16px; font-weight:700;
  padding:17px 26px; border:2px solid var(--cv2-negro); border-radius:0;
  background:#fff; color:var(--cv2-negro); cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.cv2-puerta:hover{ background:var(--cv2-negro); color:#fff }
.cv2-puerta-fuerte{ background:var(--cv2-negro); color:#fff }
.cv2-puerta-fuerte:hover{ background:var(--cv2-oro); border-color:var(--cv2-oro); color:var(--cv2-negro) }
.cv2-puerta:focus-visible{ outline:2px solid var(--cv2-oro); outline-offset:3px }
.cv2-puerta[aria-expanded="true"]{ border-color:var(--cv2-oro) }

.rec[hidden]{ display:none }
.rec{ padding:56px 6vw 60px; background:var(--cv2-crema-hero); border-bottom:1px solid var(--cv2-linea) }
.rec-caja{ max-width:1000px; margin:0 auto }

.rec-paso{ margin:0 0 10px; font-family:var(--cv2-mono); font-size:12px; font-weight:700;
           letter-spacing:.18em; text-transform:uppercase; color:var(--cv2-gris) }
.rec-titulo{ margin:0 0 26px; font-size:clamp(26px,3.4vw,42px); line-height:1.08; letter-spacing:-.02em; font-weight:600 }

.rec-opciones{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px }
.rec-opcion{ min-height:56px; padding:14px 18px; display:flex; flex-direction:column; justify-content:center; gap:3px;
             text-align:left; border:1px solid var(--cv2-linea); background:#fff; color:var(--cv2-negro);
             font-family:var(--cv2-sans); cursor:pointer; transition:border-color .15s ease, background .15s ease }
.rec-opcion:hover{ border-color:var(--cv2-oro); background:#fff }
.rec-opcion:focus-visible{ outline:2px solid var(--cv2-negro); outline-offset:2px }
.rec-opcion b{ font-size:17px; font-weight:600 }
.rec-opcion span{ font-size:14px; color:var(--cv2-gris) }

.rec-pie{ margin:20px 0 0; font-size:15px; line-height:1.45; color:var(--cv2-gris) }
.rec-atras{ margin-top:22px; padding:0; border:0; background:none; color:var(--cv2-gris);
            font-family:var(--cv2-mono); font-size:13px; font-weight:600; letter-spacing:.08em; cursor:pointer }
.rec-atras:hover{ color:var(--cv2-negro) }

.rec-aviso{ margin:0 0 22px; padding:14px 16px; border-left:2px solid var(--cv2-oro);
            background:#fff; font-size:15px; line-height:1.45 }

/* Cuando las respuestas salen de su ficha y no de sus clics, se dice:
   que la página acierte sin preguntar está bien; que no se sepa por
   qué, no. */
/* El recordatorio de los 30 días: solo sale cuando el reloj es para
   otro, que es cuando de verdad tranquiliza. */
.rec-red{ margin:0 0 22px; padding:14px 16px; border-left:2px solid var(--cv2-oro);
          background:var(--cv2-crema); font-size:15px; line-height:1.45; font-weight:600 }

.rec-recordado{ margin:0 0 22px; padding:14px 16px; background:var(--cv2-crema);
                font-size:15px; line-height:1.5 }
.rec-recordado b{ font-weight:700 }

.rec-fichas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px }
.rec-ficha{ border:1px solid var(--cv2-linea); background:#fff; display:flex; flex-direction:column }
.rec-ficha img{ width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--cv2-crema) }
.rec-ficha-cuerpo{ padding:16px 18px 18px; display:flex; flex-direction:column; flex:1 }
.rec-ficha-nombre{ margin:0; font-size:18px; font-weight:600 }
.rec-ficha-nombre span{ color:var(--cv2-gris); font-weight:400 }
.rec-ficha-precio{ margin:4px 0 12px; font-family:var(--cv2-mono); font-size:19px; font-weight:700 }
.rec-porque{ margin:0 0 12px; padding:0; list-style:none; display:grid; gap:6px }
.rec-porque li{ position:relative; padding-left:16px; font-size:15px; line-height:1.35 }
.rec-porque li::before{ content:""; position:absolute; left:0; top:.55em; width:7px; height:1px; background:var(--cv2-oro) }
.rec-pero{ margin:0 0 16px; font-size:14px; line-height:1.4; color:var(--cv2-gris) }
.rec-pero b{ color:var(--cv2-negro) }
.rec-ir{ margin-top:auto; min-height:46px; display:inline-flex; align-items:center; justify-content:center;
         border:1px solid var(--cv2-negro); font-family:var(--cv2-mono); font-size:13px; font-weight:700;
         letter-spacing:.08em; text-transform:uppercase }
.rec-ir:hover{ background:var(--cv2-negro); color:#fff }

@media (max-width:720px){
  .rec{ padding:40px 20px 44px }
  .rec-opciones{ grid-template-columns:1fr }
  .rec-titulo{ margin-bottom:20px }
}