/* ==========================================================================
   helpygoris.com · sistema de diseño v2

   Color: el de la portada de "De Cazador a Agricultor". El dorado #C8893B es
   el del titular "Agricultor" y los azules salen de las facetas del fondo,
   muestreadas de la propia imagen. El fondo del héroe es esa misma retícula de
   triángulos, regenerada a tamaño de pantalla. El sitio y el libro tienen que
   parecer la misma cosa.

   Estructura: la de thecontractorfight.com. Héroe a sangre con foto detrás del
   titular, cintas de consigna que corren, marco numerado, cifras grandes de
   prueba, remate a todo color.

   Compromiso deliberado: un solo mundo visual, oscuro. Todos los colores se
   pintan explícitamente, sin depender del tema del navegador.

   Reglas que no se rompen:
   - Sobre dorado, el texto va en azul oscuro. Blanco sobre #C8893B da 2,6:1.
   - Anton solo en mayúsculas y solo en titulares. Barlow para todo lo demás.
   - Todo legible en celular a 375 px sin zoom. Objetivos táctiles de 44 px.
   - El contenido nunca depende del JavaScript para verse.
   ========================================================================== */

:root{
  color-scheme:dark;

  --tinta:#04182C;        /* el fondo: la faceta más oscura de la portada */
  --azul:#063054;         /* el azul medio de la portada: paneles */
  --azul-2:#064E84;       /* la faceta más clara de la portada */
  --linea:#0B3A63;        /* filetes y bordes */

  --oro:#C8893B;          /* EL dorado del titular "Agricultor" */
  --oro-claro:#DEA55C;    /* el mismo, aclarado, para hover */

  --blanco:#FFFFFF;
  --hueso:#E9EFF5;        /* texto principal */
  --humo:#93A7BC;         /* texto secundario */

  --error:#FF9B8A;

  --medida:62ch;
  --borde:clamp(1.1rem,4vw,2.5rem);
  --ancho:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--tinta);
  color:var(--hueso);
  font-family:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:1.0625rem;line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:var(--oro);text-underline-offset:.18em}
:focus-visible{outline:3px solid var(--oro);outline-offset:3px}

/* --------------------------------------------------------------------------
   Tipografía. Anton grita en mayúsculas, Barlow explica. Nunca al revés.
   -------------------------------------------------------------------------- */

h1,h2,h3,.cifra b,.marca,.consigna span,.pilar-numero,.portada-libro strong{
  font-family:"Anton","Barlow Condensed",system-ui,sans-serif;
  font-weight:400;text-transform:uppercase;
  letter-spacing:.005em;line-height:.92;
  text-wrap:balance;margin:0;
}

h1{font-size:clamp(2.7rem,7.5vw,6rem)}
h2{font-size:clamp(2.1rem,5.4vw,4rem)}
h3{font-size:clamp(1.2rem,2.2vw,1.6rem)}

p{margin:0;max-width:var(--medida)}
strong{font-weight:600;color:var(--blanco)}
.destaca{color:var(--oro)}

.lede{font-size:clamp(1.1rem,1.7vw,1.35rem);line-height:1.5;color:var(--humo);max-width:56ch}
.lede strong{color:var(--blanco);font-weight:500}

.fina{font-size:.95rem;color:var(--humo);margin-top:1rem;max-width:48ch}

/* Etiqueta de sección: la pastilla con borde dorado. */
.rotulo{
  display:inline-block;
  font-family:"Barlow Condensed",sans-serif;
  font-size:.88rem;font-weight:700;text-transform:uppercase;letter-spacing:.2em;
  color:var(--oro);
  border:2px solid rgba(200,137,59,.5);
  border-radius:999px;
  padding:.5rem 1.15rem;margin:0;
}

/* --------------------------------------------------------------------------
   Estructura
   -------------------------------------------------------------------------- */

.faja{padding:clamp(4rem,9vw,7.5rem) var(--borde);position:relative}
.faja-corta{padding-block:clamp(3rem,6vw,4.5rem)}
.centro{max-width:var(--ancho);margin-inline:auto;position:relative}
.centro-angosto{max-width:760px;margin-inline:auto;position:relative}
.pila{display:flex;flex-direction:column;gap:1.5rem;align-items:flex-start}
.pila-ancha{display:flex;flex-direction:column;gap:3rem}

.panel{background:var(--azul)}

/* Una sección sobre las facetas del libro o sobre una foto de obra. */
/* El velo va DEBAJO del contenido, siempre.

   Estaba `position:absolute` sin z-index, así que se pintaba encima de todo lo
   que no estuviera posicionado. Las demás secciones se salvaban de casualidad,
   porque su contenido va dentro de `.centro`, que es `position:relative`. El
   artículo de "La historia completa" no lleva `.centro`: se leía entero a través
   de una sábana de azul al 74-94%, y por eso se veía lavado.

   `isolation:isolate` crea el contexto de apilamiento y el z-index negativo deja
   el velo por delante de la imagen de fondo y por detrás del texto. Es el mismo
   truco que ya usa el héroe. */
.con-fondo{background-size:cover;background-position:center;isolation:isolate}
.con-fondo::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(4,24,44,.9),rgba(4,24,44,.74) 45%,rgba(4,24,44,.94));
}

/* Una sección larga de texto sobre las facetas.

   Con "cover", una sección de 1.800 px de alto obliga a ampliar la imagen 1,65
   veces y a enseñar solo su 40% central: los triángulos se deshacen en una
   neblina azul grisácea y la sección se ve lavada al lado del resto del sitio,
   que es azul tinta limpio. Aquí la imagen va a su ancho natural arriba, donde
   entran el rótulo y el primer titular, y debajo queda el azul de siempre para
   leer el texto largo. */
.con-fondo-largo{
  background-size:100% auto;
  background-repeat:no-repeat;
  background-position:top center;
  background-color:var(--tinta);
}
.con-fondo-largo::before{
  background:linear-gradient(180deg,rgba(4,24,44,.72),rgba(4,24,44,.9) 30%,var(--tinta) 48%);
}

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */

.techo{
  position:sticky;top:0;z-index:40;
  background:rgba(4,24,44,.94);
  backdrop-filter:blur(10px);
  border-bottom:2px solid var(--oro);
}
.techo-interior{
  max-width:var(--ancho);margin-inline:auto;padding:.8rem var(--borde);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;position:relative;
}
.marca{
  font-size:1.35rem;color:var(--blanco);text-decoration:none;
  display:inline-flex;align-items:center;gap:.6rem;
}
.marca i{width:12px;height:24px;background:var(--oro);flex:none;font-style:normal}

.timon{display:flex;align-items:center;gap:1.8rem}
.timon a{
  font-family:"Barlow Condensed",sans-serif;
  text-transform:uppercase;letter-spacing:.11em;font-weight:600;font-size:1rem;
  color:var(--hueso);text-decoration:none;
}
.timon a:hover{color:var(--oro)}
.timon a[aria-current]{color:var(--oro);box-shadow:inset 0 -2px 0 var(--oro)}
.abrir{display:none}

/* --------------------------------------------------------------------------
   Botones. Sobre dorado el texto va oscuro: es la regla que no se rompe.
   -------------------------------------------------------------------------- */

.boton{
  display:inline-block;
  font-family:"Barlow Condensed",sans-serif;
  font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  font-size:1.05rem;line-height:1;
  padding:1.15rem 1.9rem;text-decoration:none;
  border:2px solid var(--oro);cursor:pointer;
  transition:transform .16s ease,background-color .16s ease,color .16s ease,border-color .16s ease;
}
.boton-solido{background:var(--oro);color:var(--tinta)}
.boton-solido:hover{background:var(--oro-claro);border-color:var(--oro-claro);transform:translateY(-2px)}
.boton-hueco{background:transparent;color:var(--hueso);border-color:var(--linea)}
.boton-hueco:hover{border-color:var(--oro);color:var(--oro);transform:translateY(-2px)}
.boton-tinta{background:var(--tinta);color:var(--blanco);border-color:var(--tinta)}
.boton-tinta:hover{transform:translateY(-2px)}
.boton[disabled]{opacity:.6;cursor:progress;transform:none}
.fila-botones{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}

/* --------------------------------------------------------------------------
   Héroe
   -------------------------------------------------------------------------- */

.heroe{
  position:relative;isolation:isolate;
  display:flex;align-items:center;
  padding:clamp(3.5rem,9vw,7rem) var(--borde);
  text-align:center;
  background-size:cover;background-position:50% 42%;
}
.heroe-alto{min-height:min(88vh,760px)}

/* La foto de obra, fantasma sobre las facetas del libro. Textura de trabajo
   real sin robarle la página a la portada. */
.heroe::after{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:var(--foto-heroe,none);
  background-size:cover;background-position:50% 60%;
  opacity:.3;mix-blend-mode:luminosity;
}
.heroe::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(100% 78% at 50% 46%,rgba(4,24,44,.34),rgba(4,24,44,.9) 74%),
    linear-gradient(180deg,rgba(4,24,44,.55),rgba(4,24,44,.35) 38%,var(--tinta));
}
.heroe-interior{max-width:1080px;margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:1.8rem}
.heroe h1{text-shadow:0 4px 40px rgba(4,24,44,.9)}
.heroe .lede{font-size:clamp(1.15rem,1.9vw,1.45rem)}
.heroe .fila-botones{justify-content:center}

/* --------------------------------------------------------------------------
   Cinta de consigna que corre
   -------------------------------------------------------------------------- */

.consigna{
  overflow:hidden;padding:1rem 0;
  border-block:2px solid var(--oro);
  background:var(--oro);color:var(--tinta);
}
.consigna.apagada{background:var(--azul);border-color:var(--linea);color:var(--hueso)}
/* La via lleva diez grupos iguales y la animación solo recorre uno (el 10%).
   Así, por ancha que sea la pantalla, detrás del grupo que sale siempre quedan
   nueve: nunca aparece el hueco ni el salto al reiniciar. */
.consigna-via{display:flex;width:max-content;animation:correr var(--duracion,30s) linear infinite}
.consigna-grupo{display:flex}
.consigna-via span{
  font-size:clamp(1rem,1.7vw,1.35rem);
  padding-inline:1.5rem;white-space:nowrap;
  display:inline-flex;align-items:center;gap:1.5rem;
}
.consigna-via span::after{content:"";width:9px;height:9px;background:currentColor;transform:rotate(45deg);opacity:.6}
.consigna.apagada .consigna-via span::after{background:var(--oro);opacity:1}

@keyframes correr{from{transform:translateX(0)}to{transform:translateX(-10%)}}

/* --------------------------------------------------------------------------
   Marco numerado. Van numerados porque el orden es la mitad del mensaje.
   -------------------------------------------------------------------------- */

.pilares{border-top:1px solid var(--linea);width:100%}
.pilar{
  display:grid;grid-template-columns:6rem minmax(0,1fr) minmax(0,1.3fr);
  gap:clamp(1rem,3vw,2.5rem);align-items:baseline;
  padding:clamp(1.6rem,3vw,2.3rem) 0;
  border-bottom:1px solid var(--linea);
  transition:background-color .18s ease;
}
.pilar:hover{background:rgba(6,48,84,.55)}
.pilar-numero{font-size:clamp(1.7rem,3.4vw,2.4rem);color:var(--oro);font-variant-numeric:tabular-nums}
.pilar p{color:var(--humo);font-size:1.02rem}

/* --------------------------------------------------------------------------
   Cifras de prueba
   -------------------------------------------------------------------------- */

.cifras{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--linea);border:1px solid var(--linea);width:100%;
}
.cifra{background:var(--azul);padding:clamp(1.6rem,3vw,2.4rem) 1.4rem;text-align:center}
.cifra b{display:block;font-size:clamp(2.6rem,6vw,4.4rem);color:var(--oro);font-variant-numeric:tabular-nums;line-height:1}
.cifra span{
  display:block;margin-top:.7rem;color:var(--humo);
  font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;
  letter-spacing:.13em;font-size:.9rem;line-height:1.4;
}

/* --------------------------------------------------------------------------
   Tarjetas: escalones de la escalera de productos
   -------------------------------------------------------------------------- */

.escalera{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1.2rem;width:100%}
.escalon{
  background:var(--azul);border:1px solid var(--linea);border-top:5px solid var(--linea);
  padding:1.9rem 1.6rem;display:flex;flex-direction:column;gap:1rem;
  transition:border-top-color .18s ease,transform .18s ease;
}
.escalon:hover{border-top-color:var(--oro);transform:translateY(-5px)}
.escalon.marcado{border-top-color:var(--oro);background:#08355C}
.escalon p{color:var(--humo);font-size:1rem;flex:1}
.escalon .boton{align-self:flex-start;padding:.9rem 1.35rem;font-size:.95rem}

.chapa{
  align-self:flex-start;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;font-size:.76rem;
  padding:.34rem .75rem;border:1px solid var(--linea);color:var(--humo);
}
.chapa.viva{background:var(--oro);color:var(--tinta);border-color:var(--oro)}
.chapa.disponible{border-color:var(--oro);color:var(--oro)}

/* --------------------------------------------------------------------------
   Herramientas

   La cuadrícula es la misma escalera del inicio, en lista. Toda la tarjeta se
   puede tocar: el enlace real es el título, y su ::after la cubre entera. Así
   hay un solo enlace por tarjeta para los lectores de pantalla.
   -------------------------------------------------------------------------- */

.herramientas{list-style:none;margin:0;padding:0}
.herramientas .escalon{position:relative}
.herramientas h3{margin:0}
.tarjeta-enlace{color:var(--blanco);text-decoration:none}
.tarjeta-enlace::after{content:"";position:absolute;inset:0}
.tarjeta-enlace:focus-visible{outline:none}
.herramientas .escalon:has(.tarjeta-enlace:focus-visible){outline:3px solid var(--oro);outline-offset:3px}
.herramientas .escalon:hover .boton{background:var(--oro-claro);border-color:var(--oro-claro)}

/* Próximamente: se ve, pero en gris, sin enlace y sin el salto al pasar. */
.escalon.proximo{background:transparent;border-style:dashed;border-top-style:solid}
.escalon.proximo:hover{border-top-color:var(--linea);transform:none}
.escalon.proximo h3{color:var(--humo)}
.tarjeta-pronto{
  font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;
  letter-spacing:.12em;font-size:.85rem;color:var(--humo);
}

/* Los pasos cortos de arriba de la pieza gratis. */
.pasos-cortos{margin:0;padding-left:1.4rem;display:grid;gap:.5rem;color:var(--hueso);max-width:60ch}
.pasos-cortos li::marker{color:var(--oro);font-weight:700}

/* La pieza gratis: el texto a la vista, con su botón de copiar encima. */
.pieza{width:100%;background:var(--azul);border:1px solid var(--linea);border-top:5px solid var(--oro)}
.pieza-barra{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem;
  padding:1rem clamp(1rem,3vw,1.6rem);border-bottom:1px solid var(--linea);
  /* Se queda pegada debajo de la cabecera mientras se baja por el encargo, para
     que el botón de copiar esté siempre a mano. --alto-techo lo mide sitio.js;
     el valor de respaldo es el alto real de la cabecera. */
  position:sticky;top:var(--alto-techo,4.2rem);z-index:5;background:var(--azul);
}
.pieza-nombre{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:.95rem;color:var(--oro);
}
.pieza-barra .boton{padding:.95rem 1.4rem;min-height:48px}
.pieza-texto{
  padding:clamp(1.1rem,3vw,1.8rem);
  white-space:pre-wrap;overflow-wrap:anywhere;
  font-size:1rem;line-height:1.65;color:var(--hueso);
  -webkit-user-select:text;user-select:text;
}
.pieza-texto:focus-visible{outline:2px solid var(--oro);outline-offset:-4px}
/* Lo que el lector rellena: igual dentro del encargo que cuando se nombra fuera. */
mark{background:rgba(200,137,59,.16);color:var(--oro-claro);padding:0 .15em}
.pieza-estado{margin:0;padding:0 clamp(1rem,3vw,1.6rem);color:var(--oro-claro);font-size:.95rem}
.pieza-estado:not(:empty){padding-bottom:1rem}

/* La revisión: seis puntos numerados. */
.revision{list-style:none;margin:0;padding:0;counter-reset:r;display:grid;gap:1px;background:var(--linea);border:1px solid var(--linea);width:100%}
.revision li{
  counter-increment:r;background:var(--tinta);
  display:grid;grid-template-columns:3rem 1fr;column-gap:1rem;
  padding:1.2rem clamp(1rem,3vw,1.6rem);color:var(--humo);
}
.revision li::before{content:counter(r,decimal-leading-zero);font-family:"Anton",sans-serif;font-size:1.6rem;color:var(--oro);line-height:1.1;grid-row:span 2}
.revision li strong{color:var(--blanco);display:block}

/* Dónde va cada cosa: pieza del encargo y campo del perfil. */
.destinos{width:100%;border-collapse:collapse;border:1px solid var(--linea)}
.destinos th,.destinos td{text-align:left;vertical-align:top;padding:1rem clamp(.9rem,2.5vw,1.4rem);border-bottom:1px solid var(--linea)}
.destinos thead th{
  background:var(--azul);color:var(--oro);
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.88rem;
}
.destinos tbody th{color:var(--blanco);font-weight:600;width:36%}
.destinos td{color:var(--humo)}
@media (max-width:640px){
  /* En celular cada fila se apila: la pieza arriba, el campo debajo. */
  .destinos thead{display:none}
  .destinos tr{display:block;border-bottom:1px solid var(--linea)}
  .destinos tbody th,.destinos td{display:block;width:auto;border:0}
  .destinos tbody th{padding-bottom:.2rem}
  .destinos td{padding-top:0}
}

.advertencias{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;width:100%}
.advertencias .destacado{height:100%}

/* Aviso de afiliados, al pie de las herramientas que llevan enlaces de afiliado. */
.aviso-afiliados{padding:1.4rem var(--borde);border-top:1px solid var(--linea)}
.aviso-afiliados p{max-width:var(--ancho);margin-inline:auto;color:var(--humo);font-size:.92rem}

/* --------------------------------------------------------------------------
   Dos columnas contrapuestas: para quién es / para quién no
   -------------------------------------------------------------------------- */

.caminos{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;width:100%;align-items:start}
.camino{
  border:2px solid var(--linea);padding:clamp(1.8rem,3.5vw,2.6rem);
  display:flex;flex-direction:column;gap:1.1rem;align-items:flex-start;
  background:rgba(6,48,84,.5);
  transition:border-color .18s ease;
}
.camino:hover{border-color:var(--oro)}
.camino.marcado{border-color:var(--oro);background:rgba(6,48,84,.85)}
.camino p{color:var(--humo)}
.camino .boton{margin-top:.4rem}

/* --------------------------------------------------------------------------
   Listas con marca dorada
   -------------------------------------------------------------------------- */

.lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.95rem;width:100%}
.lista li{position:relative;padding-left:2rem;color:var(--humo);max-width:60ch}
.lista li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:10px;height:10px;background:var(--oro);transform:rotate(45deg);
}
.lista li strong{color:var(--blanco)}

/* --------------------------------------------------------------------------
   Bloque destacado
   -------------------------------------------------------------------------- */

.destacado{
  border-left:5px solid var(--oro);
  background:rgba(6,48,84,.6);
  padding:1.5rem 1.7rem;width:100%;
}
.destacado p{color:var(--hueso);max-width:70ch}
.destacado p + p{margin-top:.9rem}

/* Cifra suelta dentro de un artículo: la fórmula del precio, los subtotales. */
.formula{
  font-family:"Barlow Condensed",sans-serif;font-weight:600;
  font-size:clamp(1.1rem,2vw,1.35rem);
  background:var(--azul);border-left:5px solid var(--oro);
  padding:1rem 1.3rem;margin:1.6rem 0;color:var(--blanco);
  max-width:none;
}

/* --------------------------------------------------------------------------
   Fotos
   -------------------------------------------------------------------------- */

.foto{position:relative;margin:0}
.foto img{width:100%;height:clamp(320px,42vw,540px);object-fit:cover;filter:contrast(1.05) saturate(.8) brightness(.9)}
.foto::after{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--oro)}
.foto-ancha img{height:clamp(240px,30vw,420px)}
.pie-foto{
  font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;
  letter-spacing:.15em;font-size:.78rem;color:var(--humo);margin-top:.9rem;
}

/* Marcador mientras no haya foto. El sitio funciona igual sin ellas. */
.foto.marcador{
  background:var(--azul);border:1px dashed var(--linea);
  display:grid;place-items:center;min-height:clamp(320px,42vw,540px);
}
.foto.marcador svg{width:56px;height:56px;color:var(--linea);margin-inline:auto}
.foto.marcador span{
  display:block;margin-top:.9rem;color:var(--humo);
  font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;
  letter-spacing:.14em;font-size:.8rem;text-align:center;
}

.dos-columnas{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.dos-columnas.invertida{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}

/* --------------------------------------------------------------------------
   Carrusel de obras

   La vía es un contenedor con scroll y ajuste por diapositiva: sin JavaScript
   se arrastra con el dedo y se recorre con el teclado igual. Las flechas y los
   puntos los añade sitio.js, por eso el mando nace oculto.
   -------------------------------------------------------------------------- */

.carrusel{width:100%}
.carrusel-via{
  display:flex;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
}
.carrusel-via::-webkit-scrollbar{display:none}
.carrusel-via:focus-visible{outline:2px solid var(--oro);outline-offset:4px}

.obra{flex:0 0 100%;min-width:0;margin:0;scroll-snap-align:start}
.obra img{
  display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-left:6px solid var(--oro);
  filter:contrast(1.03) saturate(.92);
}
.obra figcaption{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.1rem;
  margin-top:1.1rem;padding-left:6px;
}
.obra figcaption b{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;
  font-size:clamp(1.05rem,1.9vw,1.3rem);color:var(--hueso);
}
.obra-detalle{
  font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;
  letter-spacing:.15em;font-size:.78rem;color:var(--humo);
}

.carrusel-mando{display:flex;align-items:center;gap:.75rem;margin-top:1.5rem;padding-left:6px}
.carrusel-flecha{
  width:46px;height:46px;flex:0 0 auto;
  display:grid;place-items:center;
  background:transparent;border:2px solid var(--linea);color:var(--hueso);
  cursor:pointer;
  transition:border-color .16s ease,color .16s ease;
}
.carrusel-flecha:hover{border-color:var(--oro);color:var(--oro)}
.carrusel-flecha:focus-visible{outline:2px solid var(--oro);outline-offset:3px}
.carrusel-flecha svg{width:20px;height:20px}

.carrusel-puntos{display:flex;gap:.5rem;margin-left:auto}
.carrusel-punto{
  width:36px;padding:8px 0;background:none;border:0;cursor:pointer;
  -webkit-appearance:none;appearance:none;
}
.carrusel-punto::before{
  content:"";display:block;height:4px;background:var(--linea);
  transition:background-color .2s ease;
}
.carrusel-punto[aria-current="true"]::before{background:var(--oro)}
.carrusel-punto:hover::before{background:var(--oro-claro)}
.carrusel-punto:focus-visible{outline:2px solid var(--oro);outline-offset:2px}

/* --------------------------------------------------------------------------
   La página del libro

   El héroe de esta página no va centrado: la portada manda a la izquierda y el
   texto se lee a su lado. En celular la portada va arriba y el texto debajo,
   con la portada más pequeña para que el titular no quede fuera de pantalla.
   -------------------------------------------------------------------------- */

.heroe-libro{text-align:left;display:block;padding-block:clamp(2.5rem,6vw,5rem)}
.libro-cabeza{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);align-items:center}
.heroe-libro h1{font-size:clamp(2.4rem,6vw,4.6rem)}
.heroe-libro .lede{color:var(--hueso);max-width:30ch}
.heroe-libro .pila p{color:var(--humo)}

.portada-real{margin:0;justify-self:center}
.portada-real img{
  width:100%;max-width:380px;height:auto;
  border:1px solid var(--linea);
  box-shadow:0 26px 60px rgba(0,0,0,.55);
}

/* La oferta: el renglón que hay que leer sí o sí. */
.oferta{
  border-left:5px solid var(--oro);background:rgba(6,48,84,.75);
  padding:1.1rem 1.3rem;
}
.oferta p{color:var(--hueso);max-width:46ch}
.oferta strong{color:var(--oro)}

@media (max-width:900px){
  .libro-cabeza{grid-template-columns:1fr;justify-items:start;gap:2rem}
  .portada-real img{max-width:220px}
}

/* --------------------------------------------------------------------------
   Portada del libro, dibujada con CSS
   -------------------------------------------------------------------------- */

.portada-libro{
  background:var(--azul);border:1px solid var(--linea);border-top:5px solid var(--oro);
  padding:2.5rem 2rem;display:flex;flex-direction:column;gap:1rem;text-align:center;
  max-width:340px;
}
.portada-libro small{
  font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;
  letter-spacing:.2em;font-size:.78rem;color:var(--oro);
}
.portada-libro strong{font-size:1.6rem;color:var(--blanco);line-height:1.05}
.portada-libro em{
  font-style:normal;font-family:"Barlow Condensed",sans-serif;
  text-transform:uppercase;letter-spacing:.18em;font-size:.85rem;color:var(--humo);
}

/* --------------------------------------------------------------------------
   Formularios
   -------------------------------------------------------------------------- */

.form{display:grid;gap:1.1rem;max-width:520px;width:100%}
.campo{display:grid;gap:.4rem}
.campo label{
  font-family:"Barlow Condensed",sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;font-size:.92rem;color:var(--hueso);
}
.campo input,.campo select,.campo textarea{
  font-family:inherit;font-size:1.05rem;
  background:rgba(4,24,44,.75);color:var(--blanco);
  border:2px solid var(--linea);
  padding:.85rem 1rem;min-height:52px;width:100%;
  border-radius:0;
}
.campo textarea{min-height:130px;resize:vertical}
.campo input:hover,.campo select:hover,.campo textarea:hover{border-color:var(--azul-2)}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--oro);outline:none}
.campo input.is-invalid,.campo select.is-invalid,.campo textarea.is-invalid{border-color:var(--error)}
.campo select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--oro) 50%),linear-gradient(135deg,var(--oro) 50%,transparent 50%);background-position:calc(100% - 20px) 24px,calc(100% - 14px) 24px;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.form .boton{justify-self:start;margin-top:.4rem}

.campo-error{margin:.1rem 0 0;font-size:.92rem;color:var(--error);min-height:1.2em}

.form-estado{
  margin:.4rem 0 0;font-weight:600;font-size:1rem;
  padding:.9rem 1.1rem;border-left:5px solid transparent;background:rgba(6,48,84,.7);
}
.form-estado.es-pendiente{border-color:var(--oro);color:var(--hueso)}
.form-estado.es-ok{border-color:var(--oro);color:var(--blanco)}
.form-estado.es-fallo{border-color:var(--error);color:var(--error)}

/* Trampa para robots: fuera de pantalla, nunca display:none. */
.hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* --------------------------------------------------------------------------
   Preguntas
   -------------------------------------------------------------------------- */

.preguntas{border-top:1px solid var(--linea);width:100%}
.preguntas details{border-bottom:1px solid var(--linea)}
.preguntas summary{
  cursor:pointer;list-style:none;padding:1.4rem 3rem 1.4rem 0;position:relative;
  font-family:"Barlow Condensed",sans-serif;font-weight:600;
  font-size:clamp(1.15rem,2.1vw,1.4rem);text-transform:uppercase;color:var(--hueso);
  min-height:44px;
}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary::after{
  content:"";position:absolute;right:.4rem;top:50%;width:14px;height:14px;margin-top:-9px;
  border-right:3px solid var(--oro);border-bottom:3px solid var(--oro);
  transform:rotate(45deg);transition:transform .2s ease;
}
.preguntas details[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.preguntas details[open] summary{color:var(--oro)}
.preguntas p{color:var(--humo);padding:0 0 1.7rem;max-width:78ch}

/* --------------------------------------------------------------------------
   Blog
   -------------------------------------------------------------------------- */

.entradas{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea);width:100%}
.entradas li{border-bottom:1px solid var(--linea);padding:1.7rem 0}
.entradas time{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.16em;font-size:.82rem;color:var(--oro)}
.entradas h3{margin:.55rem 0 .65rem;max-width:26ch}
.entradas a{color:var(--hueso);text-decoration:none}
.entradas a:hover{color:var(--oro)}
.entradas p{color:var(--humo);font-size:1rem}

/* Cuerpo de un artículo */
.articulo{max-width:760px;margin-inline:auto}
.articulo .firma{
  font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;
  letter-spacing:.15em;font-size:.85rem;color:var(--oro);margin-bottom:2rem;
}
.articulo h2{font-size:clamp(1.8rem,4vw,2.6rem);margin:2.6rem 0 1rem}
.articulo h3{margin:2rem 0 .8rem;color:var(--oro)}
.articulo p{margin-bottom:1.15em;color:var(--hueso)}
.articulo ol,.articulo ul{color:var(--hueso);padding-left:1.3rem;margin:0 0 1.4rem}
.articulo li{margin-bottom:.7rem}
.articulo .lead,.articulo .lede{color:var(--humo)}

/* Paginación */
.paginacion{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:2.6rem}
.paginacion .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:48px;min-height:48px;padding:0 .9rem;
  border:2px solid var(--linea);color:var(--hueso);text-decoration:none;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
}
.paginacion .page-numbers:hover{border-color:var(--oro);color:var(--oro)}
.paginacion .page-numbers.current{background:var(--oro);border-color:var(--oro);color:var(--tinta)}
.screen-reader-text{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --------------------------------------------------------------------------
   Remate. El único sitio donde el dorado se lleva la pantalla entera.
   -------------------------------------------------------------------------- */

.remate{background:var(--oro);text-align:center}
.remate h2{color:var(--tinta);max-width:17ch;margin-inline:auto}
.remate p{color:rgba(4,24,44,.82);margin:1.5rem auto 0;max-width:54ch;font-size:1.2rem;line-height:1.45}
.remate .fila-botones{justify-content:center;margin-top:2.3rem}

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */

.suelo{background:#031222;border-top:1px solid var(--linea);padding:clamp(3rem,6vw,4rem) var(--borde) 2.5rem}
.suelo-reja{max-width:var(--ancho);margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:start}
.suelo p{color:var(--humo);font-size:.98rem;margin-top:.9rem}
.suelo nav{display:flex;flex-wrap:wrap;gap:1.2rem}
.suelo nav a{
  color:var(--hueso);text-decoration:none;font-family:"Barlow Condensed",sans-serif;
  text-transform:uppercase;letter-spacing:.11em;font-weight:600;font-size:.95rem;
}
.suelo nav a:hover{color:var(--oro)}
.legal{max-width:var(--ancho);margin:2.5rem auto 0;padding-top:1.5rem;border-top:1px solid var(--linea);color:#5C7288;font-size:.82rem;line-height:1.5}

/* --------------------------------------------------------------------------
   Barra fija de aviso al pie. Es el sitio donde va la oferta del momento:
   una sola frase y un solo botón. Se cierra y no vuelve en toda la sesión.
   -------------------------------------------------------------------------- */

.barra-baja{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;align-items:center;gap:1rem;
  padding:.85rem clamp(1rem,3vw,2rem);
  background:var(--azul);border-top:2px solid var(--oro);
  box-shadow:0 -10px 30px -18px rgba(0,0,0,.9);
}
.barra-baja p{
  margin:0;flex:1;max-width:none;
  font-family:"Barlow Condensed",sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;
  font-size:clamp(.86rem,1.5vw,1.05rem);color:var(--hueso);line-height:1.25;
}
.barra-baja .boton{padding:.8rem 1.3rem;font-size:.95rem;flex:none}
.barra-cerrar{
  flex:none;background:none;border:0;color:var(--humo);
  font-size:1.7rem;line-height:1;cursor:pointer;
  width:44px;height:44px;display:grid;place-items:center;
}
.barra-cerrar:hover{color:var(--oro)}

@media (max-width:640px){
  .barra-baja{flex-wrap:wrap;gap:.7rem;padding-bottom:1rem}
  .barra-baja p{flex-basis:100%;padding-right:2.5rem}
  .barra-baja .boton{flex:1}
  .barra-cerrar{position:absolute;top:.35rem;right:.35rem}
}

/* --------------------------------------------------------------------------
   Barra de administración de WordPress: es fija hasta 600 px y se metía
   debajo de la cabecera pegajosa. Solo lo ve quien tiene sesión abierta.
   -------------------------------------------------------------------------- */

body.admin-bar .techo{top:32px}
@media (max-width:782px){body.admin-bar .techo{top:46px}}
@media (max-width:600px){body.admin-bar .techo{top:0}}

/* --------------------------------------------------------------------------
   Móvil
   -------------------------------------------------------------------------- */

@media (max-width:900px){
  .dos-columnas,.dos-columnas.invertida{grid-template-columns:1fr}
  .pilar{grid-template-columns:3.4rem 1fr;row-gap:.5rem}
  .pilar p{grid-column:2}
  .suelo-reja{grid-template-columns:1fr}
  .cifras{grid-template-columns:1fr}
  .portada-libro{max-width:none}

  /* El pie de la obra se apila: en pantalla estrecha la chapa, el nombre y el
     detalle en una sola línea se parten mal. */
  .obra figcaption{flex-direction:column;align-items:flex-start;gap:.55rem}
  .carrusel-mando{gap:.5rem}
  .carrusel-punto{width:28px}
}

@media (max-width:700px){
  .timon{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--azul);border-bottom:2px solid var(--oro);
    padding:.5rem var(--borde) 1.1rem;
  }
  .timon.abierto{display:flex}
  .timon a{padding:.9rem 0;border-bottom:1px solid var(--linea);min-height:44px;display:flex;align-items:center}
  .timon .boton{margin-top:1rem;justify-content:center;text-align:center}
  .abrir{
    display:inline-flex;align-items:center;background:none;border:2px solid var(--linea);
    color:var(--hueso);font-family:"Barlow Condensed",sans-serif;font-weight:700;
    text-transform:uppercase;letter-spacing:.1em;font-size:.95rem;
    padding:.6rem .9rem;min-height:44px;cursor:pointer;
  }
  .abrir:hover{border-color:var(--oro);color:var(--oro)}
}

/* --------------------------------------------------------------------------
   Movimiento reducido: se apaga todo. Nada del contenido depende de ello.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .consigna-via{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .consigna-grupo{flex-wrap:wrap;justify-content:center}
  .consigna-grupo:not(:first-child){display:none}
  .carrusel-via{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}