/* ---------------------------------------------------------------------
   Ofertalia — hoja de estilos
   Sistema visual heredado del prototipo: papel crema, tinta casi negra,
   ámbar y frambuesa, esquinas rectas y bordes de 2px.
   --------------------------------------------------------------------- */

:root{
  --bg:#F7F4EC; --ink:#14171C; --ink-soft:#4B5058; --card:#FFFFFF; --line:#14171C;
  --amber:#FFB100; --raspberry:#FF4D6D; --green:#1E8A5F;
  /* El fondo del recuadro de la foto (la «losa»). En tema claro es el color
     del papel, no el blanco de la tarjeta: sobre blanco la losa desaparecía y
     la foto parecía no llegar a las líneas laterales de la tarjeta. En tema
     oscuro es blanca, que es como se ve entera sobre la tarjeta oscura. */
  --losa:#F7F4EC;
  --radius:2px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#14171C; --ink:#F2F0EA; --ink-soft:#ABAEB3; --card:#1D2129; --line:#3A3F47;
    --losa:#FFFFFF;
  }
}
:root[data-theme="dark"]{
  --bg:#14171C; --ink:#F2F0EA; --ink-soft:#ABAEB3; --card:#1D2129; --line:#3A3F47;
  --losa:#FFFFFF;
}
:root[data-theme="light"]{ --losa:#F7F4EC; }

*{box-sizing:border-box;}
/* El `hidden` del navegador es `display:none`, pero CUALQUIER `display` de una
   clase lo anula — y entonces el elemento se ve aunque el código lo esconda.
   Nos ha pasado TRES veces (la barra de borrado en lote, el chip de la fecha tope
   y los botones del flotante de lanzar). Esta regla hace que `hidden` gane
   siempre, que es lo que cualquiera espera al escribir `elemento.hidden = true`. */
[hidden]{display:none !important;}
html{scroll-padding-top:env(safe-area-inset-top,0px);}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  -webkit-font-smoothing:antialiased;
}
.display{font-family:"Archivo Black","Arial Black",sans-serif;}
a{color:inherit;}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px;}

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

header{
  position:sticky; top:0; z-index:10; background:var(--bg);
  /* El aire lateral va en la banda (así sigue tapando lo que pasa por debajo al
     hacer scroll) y la línea de abajo, en la barra de dentro: de ese modo la
     línea queda del mismo ancho que las tarjetas, que es lo que se pedía. */
  padding:calc(14px + env(safe-area-inset-top,0px)) 20px 0;
}
.topbar{
  display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;
  padding:0 0 14px;max-width:1040px;margin:0 auto;gap:12px;
  border-bottom:2px solid var(--line);
}
.logo{font-size:22px;letter-spacing:.5px;display:flex;align-items:center;gap:8px;}
.logo span.tag{
  background:var(--amber);color:var(--ink);
  padding:2px 8px;border:2px solid var(--line);border-radius:var(--radius);
  font-family:Inter,sans-serif;font-weight:700;font-size:13px;
}
/* La marca es el logotipo de la casa, en un <picture>: la variante de fondo
   transparente para el tema claro y la de tinta blanca para el oscuro (la
   elige el propio navegador con la media query, sin JavaScript). Aquí sólo se
   le da el tamaño y se cuadra con la etiqueta que lleva al lado. */
.logo picture{display:flex;align-items:center;}
.logo img,.marca img{height:34px;width:auto;display:block;}
@media (max-width:620px){.logo img,.marca img{height:28px;}}
.search-wrap{flex:1 1 220px;min-width:160px;order:2;}
.search-wrap input{
  width:100%;font-family:Inter,sans-serif;font-size:14px;padding:9px 12px;
  border:2px solid var(--line);border-radius:var(--radius);background:var(--card);color:var(--ink);
}
.search-wrap input::placeholder{color:var(--ink-soft);}
.head-actions{display:flex;gap:8px;order:3;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
/* Los botones de entrar/crear cuenta viven en un span: si no se le da flex, en
   el móvil se montaban unos encima de otros y la fila se salía de la pantalla. */
.head-actions > span{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
/* OJO: una regla con `display` anula el `[hidden]` del navegador. Sin esta
   línea, la zona de sesión («Mi panel» y «Salir») se veía aunque no hubiera
   nadie conectado, y esos dos botones de más empujaban el resto a otra línea. */
.head-actions > span[hidden]{display:none;}

.btn{
  font-family:Inter,sans-serif;font-weight:700;font-size:14px;cursor:pointer;
  border:2px solid var(--line);border-radius:var(--radius);background:var(--raspberry);
  color:#fff;padding:9px 16px;white-space:nowrap;text-decoration:none;display:inline-block;
}
.btn-ghost{background:none;color:var(--ink);}
.btn-amber{background:var(--amber);color:var(--ink);}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.btn:focus-visible,.chip:focus-visible,.vote:focus-visible,.icon-btn:focus-visible{
  outline:3px solid var(--amber);outline-offset:2px;
}

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

/* La franja de arriba: una luz ámbar, la tienda dibujada a línea y el texto.
   Todo es CSS y SVG en línea: no descarga ninguna imagen. El dibujo se apaga
   por debajo de 900px y la columna de texto se corta antes de donde empieza,
   así que el titular nunca se mete debajo. Los colores salen de las variables
   del tema, de modo que en oscuro queda igual de bien. */
.hero{
  position:relative;overflow:hidden;
  /* Arriba y abajo, y CUATRO píxeles a los lados: sin ellos el texto tocaba el
     borde de la banda. Los lados del texto los sigue marcando el contenedor
     (.wrap) para que la columna cuadre con la rejilla de tarjetas; esto es
     sólo el respiro del borde, y va aquí y no en `.wrap` para no tocar nada
     más de la portada (el carrusel, por ejemplo). */
  padding:34px 4px 30px;
  background-color:var(--bg);
  background-image:
    radial-gradient(120% 90% at 88% 10%, rgba(255,177,0,.20) 0%, rgba(255,177,0,0) 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--card) 100%);
  border-bottom:2px solid var(--line);
}
.hero .txt{position:relative;max-width:72%;}
.hero .arte{
  position:absolute;right:0;bottom:-6px;width:380px;max-width:36%;
  opacity:.85;pointer-events:none;color:var(--ink);
}
.hero h1{font-size:clamp(30px,4vw,40px);line-height:1.03;margin:0 0 14px;}
.hero h1 em{font-style:normal;background:var(--amber);padding:0 4px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;}
.hero p{color:var(--ink-soft);font-size:16.5px;margin:0;line-height:1.55;max-width:46ch;}
.hero .hero-stats{display:flex;gap:34px;flex-wrap:wrap;margin-top:22px;position:relative;}
.hero-stats{display:flex;gap:34px;flex-wrap:wrap;margin-top:24px;}
@media (max-width:900px){
  .hero .arte{display:none;}
  .hero .txt{max-width:100%;}
}
/* El titular tiene que caber en UNA línea: con la columna al 58% y la letra a
   44px medía 674px y saltaba de línea. A 40px y con la columna al 72% cabe, y
   sigue por encima del dibujo (que empieza más abajo), así que no se pisan. */

.ticker{
  border-top:2px solid var(--line);border-bottom:2px solid var(--line);overflow:hidden;
  white-space:nowrap;padding:10px 0;background:var(--card);margin-top:20px;
}
/* La cinta del carrusel. La velocidad es la DURACIÓN de la animación: recorre su
   propio ancho una vez cada 26 s. El 29/09 él pidió bajarla un 25 %, o sea
   velocidad × 0,75, que en duración es ÷ 0,75 = × 4/3: 26 -> 34,67 s. Si algún día
   se quiere subir o bajar otra vez, se hace igual (duración = 26 / velocidad). */
.ticker-track{display:inline-block;padding-left:100%;animation:ticker-scroll 34.67s linear infinite;font-weight:700;font-size:14px;}
.ticker-track a{margin-right:40px;color:inherit;text-decoration:none;}
.ticker-track a:hover{text-decoration:underline;}
/* Al pasar por encima se para, para poder leerlo y pinchar en él. */
.ticker:hover .ticker-track{animation-play-state:paused;}
@keyframes ticker-scroll{from{transform:translateX(0);}to{transform:translateX(-100%);}}
@media (prefers-reduced-motion: reduce){.ticker-track{animation:none;}}

.stat{font-size:14px;color:var(--ink-soft);}
.stat b{display:block;font-size:22px;color:var(--ink);font-family:"Archivo Black",sans-serif;}

/* -------------------------------------------------------- filtros */

.filters{display:flex;gap:6px;flex-wrap:wrap;padding:18px 0;align-items:center;}
.chip{
  border:2px solid var(--line);border-radius:999px;padding:7px 11px;font-size:14px;font-weight:600;
  background:var(--card);cursor:pointer;color:var(--ink);
  display:inline-flex;align-items:center;gap:6px;
}
.chip-ico{font-size:15px;line-height:1;}
/* Selector de frecuencia en el listado de motores */
select.frecuencia-select{
  padding:6px 8px;border:2px solid var(--line);border-radius:var(--radius);
  background:var(--card);color:var(--ink);font-family:Inter,sans-serif;font-size:13px;cursor:pointer;
}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);}

/* La categoría de marcas: un chip más, el ÚLTIMO de la fila, que al pasar por
   encima despliega las marcas con más de un artículo. El hueco entre el chip y
   el menú va DENTRO del menú (padding-top), para que al bajar el ratón no se
   corte el hover y el desplegable no se cierre solo. */
.chip-menu{position:relative;display:inline-flex;}
.chip-flecha{font-size:10px;line-height:1;opacity:.7;}
.menu-opciones{
  display:none;position:absolute;top:100%;left:0;z-index:30;
  padding-top:6px;min-width:190px;max-height:320px;overflow-y:auto;
}
.chip-menu:hover .menu-opciones,.chip-menu.abierto .menu-opciones{display:block;}
.menu-opciones .menu-opcion{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;padding:8px 14px;text-align:left;cursor:pointer;
  border:2px solid var(--line);border-top:none;background:var(--card);color:var(--ink);
  font-family:Inter,sans-serif;font-size:13.5px;font-weight:600;
}
.menu-opciones .menu-opcion:first-child{border-top:2px solid var(--line);border-radius:var(--radius) var(--radius) 0 0;}
.menu-opciones .menu-opcion:last-child{border-radius:0 0 var(--radius) var(--radius);}
.menu-opciones .menu-opcion:hover{background:var(--ink);color:var(--bg);}
.menu-opciones .menu-opcion[aria-current="true"]{background:var(--amber);color:var(--ink);}
.menu-opciones .menu-opcion .n{font-weight:400;opacity:.7;}
.filters .orden-grupo{
  display:flex;align-items:center;gap:7px;margin-left:auto;flex:0 0 auto;white-space:nowrap;
}
.filters .orden-grupo label{font-size:13px;color:var(--ink-soft);}
.filters select{
  padding:6px 8px;border:2px solid var(--line);border-radius:var(--radius);
  background:var(--card);color:var(--ink);font-family:Inter,sans-serif;font-size:13px;
}

/* --------------------------------------------------------- tarjetas */

.grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;
  padding:6px 0 60px;
}
.card{
  border:2px solid var(--line);border-radius:var(--radius);background:var(--card);
  display:flex;flex-direction:column;position:relative;
}
.card .swatch{
  aspect-ratio:16 / 9;border-bottom:2px dashed var(--line);
  display:flex;align-items:center;justify-content:center;font-size:42px;overflow:hidden;
  /* El fondo del recuadro es la losa (`--losa`), no el de la tarjeta: aquí va
     una foto de una tienda, y lo que sobre alrededor tiene que verse, como en
     cualquier escaparate. Se pinta también debajo del emoji de respaldo. */
  background:var(--losa);position:relative;
}
/* La foto LLENA el recuadro (`cover`): es lo que eligió el usuario el 27/09
   entre las cinco variantes que se le enseñaron en una página de comparación
   (opción C; esa página ya se borró, que la decisión está tomada). Se recorta
   por arriba y por abajo lo que sobre, pero el recuadro queda lleno de lado a
   lado. Ojo con lo que esto trae de vuelta: si una foto tiene fondo de color
   (las de estudio azul de algunos agregadores), ese color vuelve a verse a los
   lados al recortarla — es lo que se arregló antes con `contain`. Si se cuela
   alguna, hay que verla y decidir. El fondo opaco de debajo (la losa) sigue ahí
   para el emoji de respaldo y para los PNG con transparencia. */
.card .swatch-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;background:var(--losa);
}
.card .body{padding:16px;display:flex;flex-direction:column;gap:10px;flex:1;}
.card .cat{font-size:12px;color:var(--ink-soft);font-weight:600;}
.card h3{margin:0;font-size:16.5px;line-height:1.3;}
.card h3 a{text-decoration:none;}
.card h3 a:hover{text-decoration:underline;text-underline-offset:3px;}
.price-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.price-now{font-family:"Archivo Black",sans-serif;font-size:22px;}
.price-old{color:var(--ink-soft);text-decoration:line-through;font-size:14px;}
.off{background:var(--raspberry);color:#fff;font-weight:700;font-size:12px;padding:2px 7px;border-radius:var(--radius);}
.meta{font-size:12.5px;color:var(--ink-soft);}

/* La fecha tope de la promoción: «Válido hasta el 07/10/2026».
   Va PEGADA AL PRECIO, en la tarjeta y en la ficha, y no enterrada en la lista
   de datos: era donde estaba antes en la ficha y no se veía. Vacía quiere decir
   que la oferta no anuncia ninguna fecha, y entonces no se pinta nada. */
.caduca{
  display:inline-flex;align-items:center;align-self:flex-start;
  font-size:12.5px;font-weight:700;padding:3px 9px;
  border:2px solid var(--line);border-radius:var(--radius);
  background:var(--amber);color:#14171C;   /* fijo: el ink cambia en tema oscuro y sobre ámbar no se leería */
}
/* El `display:inline-flex` de arriba GANA al `hidden` del navegador, así que sin
   esta línea el chip vacío se vería igual (una pastilla ámbar sin texto en
   todas las ofertas sin fecha). Es la misma trampa que la barra de lote del
   panel. */
.caduca[hidden]{display:none;}
/* Ya caducada: se dice igual de claro, pero sin el amarillo de «aprovecha
   ahora», que en una oferta que ya no vale sería engañoso. */
.caduca.pasada{background:transparent;color:var(--ink-soft);border-color:var(--ink-soft);font-weight:600;}
/* Línea secundaria en celdas con varias líneas */
.meta-line{display:block;font-size:11.5px;color:var(--ink-soft);margin-top:2px;}
.title-cell .url-cell{display:block;margin-top:2px;}
.card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:6px;gap:8px;flex-wrap:wrap;}

.vote-group{display:flex;align-items:center;gap:6px;border:2px solid var(--line);border-radius:999px;padding:3px 4px;}
.vote{background:none;border:none;cursor:pointer;font-size:15px;padding:2px 6px;color:var(--ink);}
.vote[aria-pressed="true"]{color:var(--raspberry);}
.vote-count{font-family:"Archivo Black",sans-serif;font-size:14px;min-width:2.2ch;text-align:center;}
.goto{font-size:13.5px;font-weight:700;text-decoration:underline;text-underline-offset:3px;}
.side-actions{display:flex;gap:4px;}
.icon-btn{
  background:none;border:2px solid var(--line);border-radius:var(--radius);cursor:pointer;
  font-size:14px;padding:3px 7px;color:var(--ink-soft);
}
.icon-btn.active{color:var(--amber);border-color:var(--amber);}
.icon-btn.flag.active{color:var(--raspberry);border-color:var(--raspberry);}

.card.flagged{opacity:.5;}
.card.flagged .swatch{filter:grayscale(1);}
.caducado-badge{
  position:absolute;top:8px;right:8px;background:var(--ink);color:var(--bg);
  font-size:11px;font-weight:700;padding:3px 8px;border-radius:var(--radius);
  display:none;z-index:2;
}
.card.flagged .caducado-badge{display:block;}

/* --------------------------------------------------------- avisos */

.aviso{
  border:2px solid var(--line);border-radius:var(--radius);padding:12px 14px;
  font-size:14px;margin:16px 0;background:var(--card);
}
.aviso.error{background:var(--raspberry);color:#fff;border-color:var(--raspberry);}
.aviso.ok{background:var(--green);color:#fff;border-color:var(--green);}
.aviso[hidden]{display:none;}
/* Un enlace dentro de un aviso (p. ej. la palabra «Búsquedas» del mensaje que
   sale al lanzar una búsqueda): hereda el color del aviso —blanco sobre el
   verde— y se subraya, que es lo que lo delata como enlace. */
.aviso .enlace-aviso{color:inherit;text-decoration:underline;text-underline-offset:2px;font-weight:700;}

.skeleton{color:var(--ink-soft);padding:40px 0;text-align:center;}

/* -------------------------------------------------- publicar / modales */

.cta{border-top:2px solid var(--line);padding:50px 0;text-align:center;}
.cta h2{font-size:clamp(22px,4vw,32px);margin:0 0 10px;}
.cta p{color:var(--ink-soft);margin:0 0 20px;}

.modal-overlay{
  position:fixed;inset:0;background:rgba(20,23,28,.55);display:none;
  align-items:center;justify-content:center;z-index:20;padding:20px;
}
.modal-overlay.open{display:flex;}
.modal{
  background:var(--card);border:2px solid var(--line);border-radius:var(--radius);
  padding:24px;max-width:420px;width:100%;max-height:90vh;overflow:auto;position:relative;
}
/* La X de la esquina: cerrar sin tener que acertar en el fondo. */
.modal-x{
  position:absolute;top:10px;right:10px;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--line);border-radius:var(--radius);
  background:var(--card);color:var(--ink);
  font-family:Inter,sans-serif;font-size:17px;font-weight:700;line-height:1;cursor:pointer;
}
.modal-x:hover{background:var(--ink);color:var(--bg);}
.modal-x:focus-visible{outline:3px solid var(--amber);outline-offset:2px;}
.modal h3{margin:0 0 6px;font-size:20px;}
.modal p{color:var(--ink-soft);font-size:14px;margin:0 0 16px;}
.modal label{display:block;font-size:13px;font-weight:600;margin-bottom:4px;}
.modal input,.modal select,.modal textarea{
  width:100%;padding:10px 12px;border:2px solid var(--line);border-radius:var(--radius);
  background:var(--bg);color:var(--ink);font-family:Inter,sans-serif;font-size:14px;margin-bottom:10px;
}
.modal textarea{resize:vertical;min-height:56px;line-height:1.45;}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;}

/* En pantallas bajas (un móvil de pie, un portátil pequeño) las ventanas se
   aprietan: menos relleno y menos aire entre campos. El objetivo es que los
   formularios largos —los de oferta y candidata— quepan SIN scroll; con el
   tamaño de escritorio se pasaban de largo. */
@media (max-height: 900px){
  .modal{padding:18px;max-height:94vh;}
  .modal input,.modal select,.modal textarea{margin-bottom:8px;padding:9px 11px;}
  .modal p{margin:0 0 10px;}
  .modal h3{margin:0 0 4px;font-size:19px;}
  .modal label{margin-bottom:3px;}
}

/* Casillas de aceptación del alta de cuenta. Van con su propio estilo porque
   no son campos de texto: la casilla y su explicación comparten línea. */
.aceptaciones{margin:2px 0 14px;display:flex;flex-direction:column;gap:10px;}
/* Las casillas de aceptación valen igual dentro de una ventana flotante (el
   alta de la portada) que en una página suelta (alta.html), así que el estilo no
   se ata al modal. El selector lleva `label.` a propósito: tiene que ganarle a
   `.modal label{display:block}`, que es de la línea de arriba. */
label.casilla{
  display:flex;gap:8px;align-items:flex-start;margin:0;
  font-size:12.5px;font-weight:400;line-height:1.45;color:var(--ink-soft);
}
label.casilla input{width:auto;padding:0;margin:2px 0 0;flex:0 0 auto;}
label.casilla a{color:var(--ink);}
/* La nota de cookies del formulario de alta: informa, no asusta. */
.nota-cookies{margin:0;font-size:12px;line-height:1.45;color:var(--ink-soft);}
.nota-cookies a{color:var(--ink);}
.campo-doble{display:flex;gap:10px;}
.campo-doble > div{flex:1;}

footer{
  /* La línea va en el contenedor de dentro, y con el ancho de la columna de
     datos (igual que la de la cabecera). */
  padding:0 20px calc(22px + env(safe-area-inset-bottom,0px));
  font-size:13px;color:var(--ink-soft);
}
footer .wrap{max-width:1040px;padding:22px 0 0;border-top:2px solid var(--line);}

@media (prefers-reduced-motion: no-preference){
  .card{transition:transform .15s ease;}
  .card:hover{transform:translateY(-3px);}
}

/* -------------------------------------------------------- aviso de cookies
   Fijo abajo, sin tapar el contenido de golpe: se puede leer la web con él
   puesto. Dos botones, mismos tamaños que los de siempre. */
.aviso-cookies{
  /* z-index 15: por encima del contenido de la página y por DEBAJO de las
     ventanas flotantes (20). Con 60 tapaba los botones de abajo de una ventana
     en pantallas bajas y no se podía pulsar «Crear una cuenta» o «Publicar». */
  position:fixed; left:0; right:0; bottom:0; z-index:15;
  display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center;
  padding:14px 20px calc(14px + env(safe-area-inset-bottom,0px));
  background:var(--card); color:var(--ink);
  border-top:2px solid var(--line);
  box-shadow:0 -6px 18px rgba(0,0,0,.10);
}
.aviso-cookies p{
  margin:0; flex:1 1 380px; max-width:760px;
  font-size:12.5px; line-height:1.5; color:var(--ink-soft);
}
.aviso-cookies p b{color:var(--ink);}
.aviso-cookies p a{color:var(--ink);}
.aviso-cookies-botones{display:flex; gap:8px; flex:0 0 auto; margin-left:auto;}
.aviso-cookies .btn{padding:8px 14px; font-size:13px;}
footer a{color:var(--ink);}

/* --------------------------------------------------- las ventanas en móvil
   En una pantalla pequeña, una ventana flotante tiene que caber ENTERA sin
   scroll. Se aprietan márgenes y rellenos —no los campos, que hay que poder
   escribir cómodamente— y los textos legales bajan un punto de tamaño. */
@media (max-width: 560px){
  .modal-overlay{padding:8px;}
  .modal{padding:14px 14px 12px;}
  /* `dvh` es el alto que se VE de verdad en un móvil (la barra del navegador no
     cuenta). Donde no se entiende, se queda el `vh` de la regla de arriba. */
  .modal{max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);}
  .modal h3{margin-bottom:2px;}
  .modal label{margin-bottom:1px;font-size:12.5px;}
  .modal input,.modal select,.modal textarea{padding:7px 9px;margin-bottom:6px;}
  .modal-actions{gap:6px;}
  .modal-actions .btn{padding:8px 10px;font-size:13px;}
  .aceptaciones{gap:6px;margin:2px 0 10px;}
  .nota-cookies{font-size:11.5px;line-height:1.35;}
}

/* La palabra resaltada del titular («mira aquí»), cuando el titular se estrecha
   y el recuadro ámbar cae al principio de una línea.
   OJO, medido: en ese caso el recuadro empieza a los 4 px como el resto del
   texto, pero su relleno de 8 px mete la palabra a 12 px — y la línea parece
   meter más sangría que las demás. Aquí el recuadro se descuelga 4 px (queda a
   ras del borde de la banda) y el relleno baja a 4, así la palabra cae en los
   mismos 4 px que el resto de la línea. Sólo por debajo de 520 px, que es donde
   se ha medido que el recuadro cambia de línea; por encima va en mitad de la
   línea y no hay nada que ajustar. */
@media (max-width: 520px){
  .hero h1 em{margin-left:-4px;}
}


/* =====================================================================
   Portadas (propuestas B, C y L), menú de la cuenta y tema claro/oscuro
   ===================================================================== */

/* ----------------------------------------------------- el menú de la cuenta

   Las tres rallas van junto a la estrella de favoritos y son la única puerta:
   dentro está identificarse (o la cuenta) y el cambio de tema. Los elementos
   se enseñan o se esconden según haya sesión y según el rol. */
.menu-wrap{position:relative;display:flex;}
.menu-btn{padding:9px 11px;}
.rallas{display:flex;flex-direction:column;gap:3px;}
.rallas i{display:block;width:16px;height:2px;background:currentColor;border-radius:1px;}
.menu-capa{
  position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:190px;
  background:var(--card);border:2px solid var(--line);border-radius:var(--radius);
  box-shadow:0 3px 0 var(--line);padding:4px;display:flex;flex-direction:column;gap:2px;
}
/* OJO: un `display` anula el `hidden` del navegador; sin esta línea el menú
   se vería siempre desplegado. */
.menu-capa[hidden]{display:none;}
.menu-item{
  font-family:Inter,sans-serif;font-size:14px;font-weight:600;color:var(--ink);
  text-align:left;background:none;border:none;padding:9px 10px;cursor:pointer;
  border-radius:var(--radius);text-decoration:none;display:block;width:100%;
}
.menu-item:hover{background:var(--bg);}
.menu-item[hidden]{display:none;}

/* --------------------------------------------------------------- el tema

   El tema elegido a mano manda sobre el del sistema. Los dos logotipos están
   en el documento y se enseña uno u otro: antes lo elegía el navegador con una
   media query y no había forma de cambiarlo desde la web. */
.logo-claro{display:block;}
.logo-oscuro{display:none;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logo-claro{display:none;}
  :root:not([data-theme="light"]) .logo-oscuro{display:block;}
}
:root[data-theme="dark"] .logo-claro{display:none;}
:root[data-theme="dark"] .logo-oscuro{display:block;}
:root[data-theme="light"] .logo-claro{display:block;}
:root[data-theme="light"] .logo-oscuro{display:none;}

/* ------------------------------------------------- las cabeceras nuevas

   Cada una necesita su juego de colores: las de la propuesta son de papel
   crema y tinta, y en tema oscuro no valen tal cual. */
:root{
  --heroB-fondo:#FFFDF7;
  --trama-clara:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'><g fill='none' stroke='%2314171C' stroke-opacity='.07' stroke-width='2'><circle cx='16' cy='16' r='7'/><path d='M12 20l8-8M40 52l8-8'/><circle cx='48' cy='48' r='7'/></g></svg>");
  --trama-oscura:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'><g fill='none' stroke='%23F2F0EA' stroke-opacity='.09' stroke-width='2'><circle cx='16' cy='16' r='7'/><path d='M12 20l8-8M40 52l8-8'/><circle cx='48' cy='48' r='7'/></g></svg>");
  --heroC-fondo:#14171C; --heroC-texto:#F7F4EC; --heroC-suave:#C9C6BE;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --heroB-fondo:#1D2129; --heroC-fondo:#0F1216;
    --heroC-texto:#F2F0EA; --heroC-suave:#ABAEB3;
  }
}
:root[data-theme="dark"]{
  --heroB-fondo:#1D2129; --heroC-fondo:#0F1216;
  --heroC-texto:#F2F0EA; --heroC-suave:#ABAEB3;
}

/* ---------- B · sello de descuento: crema con un patrón casi invisible de
     porcentajes y un sello grande a la derecha. */
.heroB{
  position:relative;overflow:hidden;padding:34px 26px 30px;color:var(--ink);
  background-color:var(--heroB-fondo);
  background-image:var(--trama-clara),
    linear-gradient(180deg,var(--heroB-fondo) 0%,var(--card) 100%);
  border-bottom:2px solid var(--line);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .heroB{
    background-image:var(--trama-oscura),
      linear-gradient(180deg,var(--heroB-fondo) 0%,var(--card) 100%);
  }
}
:root[data-theme="dark"] .heroB{
  background-image:var(--trama-oscura),
    linear-gradient(180deg,var(--heroB-fondo) 0%,var(--card) 100%);
}
.heroB .txt{position:relative;max-width:56%;}
.heroB h1{font-size:clamp(28px,5vw,46px);line-height:1.03;margin:0 0 14px;}
.heroB h1 em{font-style:normal;color:var(--raspberry);}
.heroB p{margin:0;color:var(--ink-soft);font-size:16.5px;line-height:1.55;max-width:46ch;}
.heroB .hero-stats{margin-top:22px;position:relative;}
.heroB .sello{
  position:absolute;right:28px;top:50%;transform:translateY(-50%);
  width:230px;max-width:32%;pointer-events:none;
}

/* ---------- C · franja de precios: fondo de tinta con una cinta ámbar arriba
     (el lenguaje de la marquesina). En los dos temas es un bloque oscuro: es
     su gracia, así que no se invierte con `--ink`. */
.heroC{
  position:relative;overflow:hidden;padding:0;border-bottom:2px solid var(--line);
  background:var(--heroC-fondo);color:var(--heroC-texto);
}
.heroC .cinta{
  height:74px;overflow:hidden;white-space:nowrap;
  background:var(--amber);color:#14171C;border-bottom:2px solid var(--heroC-fondo);
}
.heroC .cinta span{display:inline-block;padding:25px 0 0 34px;font-family:"Archivo Black",sans-serif;font-size:17px;}
.heroC .cuerpo{padding:30px 26px 32px;position:relative;}
.heroC .cuerpo .txt-c{max-width:62%;}
.heroC h1{font-size:clamp(28px,4.6vw,44px);line-height:1.03;margin:0 0 14px;color:var(--heroC-texto);}
.heroC h1 em{font-style:normal;background:var(--amber);color:#14171C;padding:0 8px;box-decoration-break:clone;}
.heroC p{margin:0;color:var(--heroC-suave);font-size:16.5px;line-height:1.55;max-width:52ch;}
.heroC .hero-stats{margin-top:22px;position:relative;}
.heroC .stat{color:var(--heroC-suave);}
.heroC .stat b{color:var(--amber);}
.heroC .arte{position:absolute;right:22px;bottom:18px;width:220px;max-width:26%;opacity:.5;pointer-events:none;}

/* ---------- L · filete de ámbar arriba y reclamo corto: el color, sólo en una
     raya de 4 px. Se apoya en `--card`, así que ya vale en los dos temas. */
.heroL{border-bottom:2px solid var(--line);background:var(--card);border-top:4px solid var(--amber);padding:14px 24px 15px;}
.heroL h1{font-size:clamp(18px,2vw,24px);line-height:1.12;margin:0 0 7px;letter-spacing:-.01em;font-weight:700;}
.heroL h1 em{font-style:normal;}
.heroL .linea{display:flex;gap:9px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--ink-soft);}
.heroL .linea b{color:var(--ink);}
.heroL .punto-sep{width:3px;height:3px;border-radius:999px;background:var(--ink-soft);opacity:.5;flex:none;}

@media (max-width:900px){
  .heroB .sello,.heroC .arte{display:none;}
  .heroB .txt,.heroC .cuerpo .txt-c{max-width:100%;}
}