/* ==========================================================================
   Asesoría Cervantes SL · «Pluma»
   --------------------------------------------------------------------------
   La web se escribe sola: el logotipo es una firma caligráfica y cada área de
   trabajo es un capítulo. Fondo papel, verde salvia como tinta de pluma,
   verde tinta oscuro para el texto y los bloques, arena SOLO en los numerales.
   (Nota temporal: mientras dura el control de paleta de más abajo, el :root
   lleva el rojo de Dourado & Fernández y su papel blanco en vez del verde
   salvia y el crema real del sitio — ver esa sección para el porqué y para
   recuperarlos con un clic.)

   Los estados «ocultos» de la animación viven todos bajo html.has-motion, que
   solo añade main.js cuando GSAP ha cargado y el visitante no ha pedido menos
   movimiento. Sin JS, sin CDN o con reduced-motion la página se ve entera y
   quieta: el wordmark aparece ya escrito.
   ========================================================================== */

:root {
  --papel:      #FFFFFF;
  --papel-2:    #F2F0EA;
  --papel-3:    #EAE6DC;
  --salvia:     #D68A8D;
  --salvia-osc: #7A1418;
  --oliva:      #9C2A2E;
  --tinta:      #22332B;
  --tinta-80:   #3B4E44;
  --tinta-60:   #64766B;
  --arena:      #C4585C;

  --serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --nav-h: 4.75rem;
  --stack-top: 7.5rem;
  --ancho: 76rem;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
}

/* -------------------------- Control de paleta --------------------------
   BLOQUE DE DEMOSTRACIÓN: se borra entero al entregar la web ya como
   oficial (ver README, "El control de paleta"). Cambia el color de marca Y
   el papel — la tinta es la misma en las cuatro, y el logo real no cambia
   de color con el mando.

   El :root (sin clase) YA NO es el verde salvia ni el crema reales: de
   momento lleva el rojo Y el papel blanco de Dourado & Fernández
   (dourado-fernandez-asesores-carballo-web), para que este sitio y sus 6
   hermanos lleguen a un mismo cliente por correo ya con SU color y SU
   fondo, y la comparación sea solo de estructura, no de marca. --salvia/
   --arena son un aclarado (tint) de su --oro-claro (mismo matiz e
   intensidad, más claro) porque un rojo necesita mucha más luz que un
   verde para el mismo contraste — usado en texto claro sobre --tinta
   oscura y como fondo de botón bajo texto oscuro (ver .pie h4 y
   .btn-pluma); --salvia-osc es su --oro-tinta tal cual (~10:1 sobre
   --papel, como en la web de Dourado); --oliva es su --oro tal cual.
   --papel es su --crema (#FFFFFF puro, no el crema propio de este sitio);
   --papel-2 es su --crema-2 (#F2F0EA) tal cual; --papel-3 no tiene
   equivalente en la web de Dourado (allí no hay un tercer tono de fondo,
   solo --plata como color de borde/línea) así que sigue el mismo paso de
   gris cálido que el resto de la escala, un punto más oscuro que
   --papel-2, para conservar la jerarquía de tres tonos que este sitio sí
   usa (ver .map-consent:hover).

   El verde salvia y el crema reales (la paleta oficial del sitio) siguen
   existiendo, ahora como html.paleta-original, elegible con el mando igual
   que Añil o Sepia. Añil (azul, registro financiero) y Sepia (tinta
   cálida, coherente con el concepto «Pluma») no se han tocado: mantienen
   el papel crema propio del sitio, no el blanco de Dourado. Contrastes
   WCAG comprobados contra --papel y --tinta antes de fijar cada tono. */
html.paleta-original {
  --papel: #F4F0E8; --papel-2: #EFEADF; --papel-3: #E7E0D1;
  --salvia: #8CAA88; --salvia-osc: #6E8C6B; --oliva: #93A86D; --arena: #E8B469;
}
html.paleta-anil {
  --papel: #F4F0E8; --papel-2: #EFEADF; --papel-3: #E7E0D1;
  --salvia: #909FC1; --salvia-osc: #3E4F7E; --oliva: #6194AE; --arena: #E4A758;
}
html.paleta-sepia {
  --papel: #F4F0E8; --papel-2: #EFEADF; --papel-3: #E7E0D1;
  --salvia: #C78D70; --salvia-osc: #79412A; --oliva: #C9664A; --arena: #E2A350;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--serif);
  font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.18rem);
  line-height: 1.68;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

a { color: inherit; }

::selection { background: var(--salvia); color: var(--papel); }

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

.saltar {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--tinta); color: var(--papel);
  padding: 0.7rem 1.1rem; border-radius: 0.4rem;
  font-family: var(--sans); font-size: 0.9rem; text-decoration: none;
  transition: top 0.2s;
}
.saltar:focus { top: 1rem; }

.pendiente {
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--salvia-osc);
  background: rgba(140, 170, 136, 0.13);
  border: 1px dashed rgba(110, 140, 107, 0.5);
  border-radius: 0.35rem;
  padding: 0.35rem 0.6rem;
  display: inline-block;
  margin: 0.2rem 0;
}

.nota-mini {
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--tinta-60);
  margin: 0.6rem 0 0;
}
.centrado { text-align: center; }

/* ---------- Botones -------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.92rem; font-weight: 500; letter-spacing: 0.01em;
  padding: 0.82rem 1.6rem;
  border-radius: 2rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.28s ease, color 0.28s ease, border-color 0.28s ease;
  will-change: transform;
}
.btn-pluma { background: var(--salvia); color: #14211B; }
.btn-pluma:hover { background: var(--salvia-osc); color: var(--papel); }
.btn-linea { background: transparent; color: var(--tinta); border-color: rgba(34, 51, 43, 0.28); }
.btn-linea:hover { border-color: var(--tinta); background: rgba(34, 51, 43, 0.05); }

/* ---------- Cortina de entrada (preloader) ----------
   La portada del tomo: el filete se dibuja, el nombre sube desde una
   máscara y luego la hoja se PASA (rotateY sobre el lomo izquierdo).
   Ningún otro sitio de la carpeta sale así, y aquí encaja porque la
   página entera está montada por capítulos.
   Los estados "vacíos" viven bajo html.has-motion: sin GSAP la cortina se
   retira al instante y nadie ve una portada a medias.
   Ojo: .cortina usa display:grid, así que [hidden] necesita su regla. */
.cortina { position: fixed; inset: 0; z-index: 400; display: grid; perspective: 1600px; }
.cortina[hidden] { display: none; }
html.cortina-puesta { overflow: hidden; }

.cortina-hoja {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(105deg, #1A2820 0%, var(--tinta) 38%, #2B4036 100%);
  transform-origin: left center;
  backface-visibility: hidden;
  will-change: transform;
}
/* la sombra del canto: se enciende mientras la hoja gira, como el pliegue
   de un papel grueso al levantarlo. El degradado va hacia el lomo (izquierda),
   que es por donde se dobla. */
.cortina-canto {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.18) 34%, rgba(0,0,0,0) 62%);
  opacity: 0;
}

.cortina-marco { position: absolute; width: min(74vw, 30rem); height: min(46vh, 20rem); fill: none; stroke: var(--salvia); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .65; }
.cortina-centro { position: relative; display: grid; justify-items: center; gap: .55rem; text-align: center; padding: 0 2rem; }
.cortina-tomo { font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .38em; text-transform: uppercase; color: var(--salvia); }
.cortina-marca { overflow: hidden; padding-bottom: .1em; }
.cortina-marca span {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.6rem, 9vw, 4.6rem); line-height: 1; color: var(--papel);
}
.cortina-filete { display: block; width: min(30vw, 190px); height: 1px; background: var(--arena); transform-origin: 50% 50%; }
.cortina-pie { font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: rgba(244,240,232,.6); }

html.has-motion .cortina-marco-l { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.has-motion .cortina-marca span { transform: translateY(112%); }
html.has-motion .cortina-tomo { opacity: 0; }
html.has-motion .cortina-filete { transform: scaleX(0); }
html.has-motion .cortina-pie { opacity: 0; letter-spacing: .62em; }

/* con movimiento reducido no debe verse ni un fotograma */
@media (prefers-reduced-motion: reduce) { .cortina { display: none; } }

/* ---------- Cabecera ------------------------------------------------------- */
.cabecera {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0 var(--gutter);
  background: rgba(244, 240, 232, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.cabecera.is-scrolled { border-bottom-color: rgba(34, 51, 43, 0.12); }

.marca { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; margin-right: auto; }
.marca-c { width: 1.9rem; height: 1.9rem; color: var(--salvia-osc); flex: none; }
.marca-txt {
  font-family: var(--sans); font-size: 0.86rem; font-weight: 400;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-80);
}
.marca-txt b { font-weight: 600; color: var(--tinta); }

.nav { display: flex; gap: 1.6rem; }
.nav a {
  font-family: var(--sans); font-size: 0.88rem; text-decoration: none;
  color: var(--tinta-80); position: relative; padding: 0.25rem 0;
  transition: color 0.25s ease;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--salvia-osc);
  transition: right 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav a:hover, .nav a.is-active { color: var(--tinta); }
.nav a:hover::after, .nav a.is-active::after { right: 0; }

.cab-cta { padding: 0.6rem 1.25rem; font-size: 0.86rem; }

.nav-toggle {
  display: none; width: 2.75rem; height: 2.75rem;
  background: none; border: 1px solid rgba(34, 51, 43, 0.22); border-radius: 50%;
  cursor: pointer; padding: 0; place-items: center; gap: 5px;
}
.nav-toggle span { display: block; width: 16px; height: 1px; background: var(--tinta); transition: transform 0.3s; }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }

.nav-movil {
  position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 89;
  background: var(--papel); border-bottom: 1px solid rgba(34, 51, 43, 0.12);
  padding: 1rem var(--gutter) 1.6rem;
  display: flex; flex-direction: column; gap: 0.2rem;
}
.nav-movil[hidden] { display: none; }
.nav-movil a {
  font-family: var(--serif); font-size: 1.3rem; text-decoration: none;
  padding: 0.55rem 0; border-bottom: 1px solid rgba(34, 51, 43, 0.08);
}

/* ---------- Hero ----------------------------------------------------------- */
.hero {
  min-height: 100svh;
  display: grid; place-items: center;
  padding: calc(var(--nav-h) + 3rem) var(--gutter) 4rem;
  position: relative;
  text-align: center;
  /* dos veladuras muy suaves: el papel no es un color plano */
  background:
    radial-gradient(60% 45% at 50% 18%, rgba(140, 170, 136, 0.13), transparent 70%),
    radial-gradient(50% 40% at 82% 88%, rgba(232, 180, 105, 0.10), transparent 72%),
    var(--papel);
}
.hero-caja { max-width: 60rem; width: 100%; }

.wordmark { margin: 0 auto clamp(1.2rem, 3vw, 2rem); width: min(100%, 44rem); }
.wm { width: 100%; height: auto; display: block; overflow: visible; }

.hero-sub {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.05rem, 0.9rem + 0.75vw, 1.5rem);
  color: var(--tinta-80);
  margin: 0 0 0.9rem;
  text-wrap: balance;
}
.hero-sub .pt { color: var(--salvia-osc); font-style: normal; padding: 0 0.15em; }

.hero-capitulo {
  font-family: var(--sans); font-size: 0.78rem;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--salvia-osc);
  margin: 0 0 1.6rem;
}

.hero-badge {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--sans); font-size: 0.85rem; color: var(--tinta-80);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(34, 51, 43, 0.12);
  border-radius: 2rem; padding: 0.45rem 1.05rem;
  margin: 0 0 2rem;
}
.hero-badge b { font-weight: 600; color: var(--tinta); }

.estrellas { display: inline-flex; gap: 2px; }
.estrellas svg { width: 0.95rem; height: 0.95rem; display: block; }
.estrellas .fondo { fill: rgba(34, 51, 43, 0.18); }
.estrellas .relleno { fill: var(--arena); }

.hero-botones { display: flex; gap: 0.85rem; justify-content: center; flex-wrap: wrap; }

.hero-scroll {
  position: absolute; bottom: 1.8rem; left: 50%; transform: translateX(-50%);
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--tinta-60); margin: 0;
}
.hero-scroll::after {
  content: ""; display: block; width: 1px; height: 2.2rem; margin: 0.65rem auto 0;
  background: linear-gradient(var(--salvia), transparent);
}

/* la pluma escribe el wordmark; sin movimiento se ve ya relleno */
.wm-pluma { opacity: 0; }
.wm-tinta { opacity: 1; }
html.has-motion .wm-pluma { opacity: 1; }
html.has-motion .wm-tinta { opacity: 0; }
html.has-motion .wm-pluma path { stroke-dasharray: 1 1.04; stroke-dashoffset: 1; opacity: 0; }

/* ---------- Secciones y titulares ------------------------------------------ */
.seccion {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(4.5rem, 9vw, 8rem) var(--gutter) 0;
}

.titular {
  font-size: clamp(2.1rem, 1.2rem + 3.6vw, 3.9rem);
  margin: 0 0 1.4rem;
  max-width: 22ch;
}
.titular .tit-1 { position: relative; display: inline-block; font-style: italic; color: var(--tinta); }
.titular .tit-r { color: var(--tinta-80); }

/* el trazo de pluma que escribe la primera palabra, superpuesto a ella */
.pluma-svg {
  position: absolute; left: 50%; top: 52%;
  transform: translate(-50%, -50%);
  width: 114%; pointer-events: none;
}
.pluma-svg svg { width: 100%; height: auto; display: block; overflow: visible; }
.pluma-svg path {
  fill: none; stroke: var(--salvia); stroke-width: 4.4;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 1.04; stroke-dashoffset: 1; opacity: 0;
}

.seccion-pie {
  font-family: var(--sans); font-size: 0.95rem; color: var(--tinta-60);
  margin: 0 0 2.6rem; max-width: 46ch;
}

/* separador: una línea fina que acaba en un pequeño rasgo de pluma */
.separador {
  display: flex; align-items: center; gap: 0.6rem;
  margin: clamp(3.5rem, 7vw, 6rem) 0 0;
}
.sep-linea { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(34, 51, 43, 0.22) 12%, rgba(34, 51, 43, 0.22)); }
.sep-rasgo {
  width: 2.6rem; height: 1.6rem; flex: none;
  background: var(--salvia); mask: var(--rasgo) center / contain no-repeat;
  -webkit-mask: var(--rasgo) center / contain no-repeat;
  --rasgo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 32'%3E%3Cpath d='M1 16c10 0 16-13 26-13 7 0 9 7 4 11-6 5-17 4-17 10 0 4 6 5 12 3 6-2 11-6 15-11' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- Prólogo -------------------------------------------------------- */
.prologo-cuerpo {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.entradilla {
  font-size: clamp(1.18rem, 1rem + 0.7vw, 1.5rem);
  line-height: 1.55; color: var(--tinta);
  margin: 0 0 1.4rem;
}
.entradilla em { font-style: italic; color: var(--salvia-osc); }
.prologo-texto p { margin: 0 0 1.15rem; color: var(--tinta-80); }

.prologo-foto, .clientes-foto { margin: 0; }
.prologo-foto img, .clientes-foto img {
  width: 100%; border-radius: 0.5rem;
  box-shadow: 0 1.5rem 3rem -1.75rem rgba(34, 51, 43, 0.45);
}
figcaption {
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--tinta-60); margin-top: 0.6rem;
}

.notas {
  list-style: none; padding: 0;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem);
}
.notas li { border-top: 1px solid rgba(34, 51, 43, 0.18); padding-top: 1.1rem; }
.notas h3 { font-size: 1.22rem; font-style: italic; margin-bottom: 0.45rem; }
.notas p { font-family: var(--sans); font-size: 0.9rem; color: var(--tinta-60); margin: 0; line-height: 1.6; }

.equipo-pendiente {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 1.6rem; align-items: center;
  background: var(--papel-2);
  border: 1px dashed rgba(110, 140, 107, 0.5);
  border-radius: 0.6rem; padding: 1.5rem;
}
.equipo-marco svg { width: 100%; height: auto; }
.equipo-marco path, .equipo-marco circle {
  fill: none; stroke: var(--salvia); stroke-width: 3; stroke-linecap: round;
}
.equipo-pendiente h3 { font-size: 1.25rem; font-style: italic; margin-bottom: 0.5rem; }

/* ---------- Marquesina ----------------------------------------------------- */
.marquesina {
  overflow: hidden; margin: clamp(3.5rem, 7vw, 6rem) 0 0;
  border-block: 1px solid rgba(34, 51, 43, 0.14);
  padding: clamp(0.9rem, 2vw, 1.4rem) 0;
  background: var(--papel-2);
}
.marquesina-pista {
  display: flex; width: max-content;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.5rem, 1rem + 2.4vw, 3rem);
  color: var(--tinta-60); white-space: nowrap;
}
.marquesina-pista span { padding-right: 0.4em; }

/* ---------- Capítulos (sticky-stack) --------------------------------------- */
/* El sticky es el propio <li> y su margin-bottom ES el recorrido; la lista va
   en flow-root para que ese margen no se colapse con ella y el último capítulo
   llegue a pegarse arriba como los demás. */
.capitulos { list-style: none; padding: 0; margin: 0; display: flow-root; }
.cap { position: sticky; top: var(--stack-top); margin-bottom: 22vh; }

.cap-tarjeta {
  display: grid; grid-template-columns: 11rem 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start;
  background: var(--papel-2);                 /* opaca: tapa a la anterior */
  border: 1px solid rgba(34, 51, 43, 0.13);
  border-radius: 0.7rem;
  padding: clamp(1.8rem, 4vw, 3.2rem);
  min-height: 26rem;
  box-shadow: 0 1.5rem 3rem -2rem rgba(34, 51, 43, 0.5);
}
.cap-num { padding-top: 0.4rem; }
.cap-num svg { width: 100%; height: auto; overflow: visible; }
.cap-num path {
  fill: none; stroke: var(--arena); stroke-width: 5;
  stroke-linecap: round; stroke-linejoin: round;
}
html.has-motion .cap-num path { stroke-dasharray: 1 1.04; stroke-dashoffset: 1; opacity: 0; }

.cap-eyebrow {
  font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--salvia-osc); margin: 0 0 0.6rem;
}
.cap-titulo { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); margin-bottom: 0.8rem; }
.cap-intro { color: var(--tinta-80); margin: 0 0 1.5rem; max-width: 46ch; font-style: italic; }
.cap-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.cap-lista li {
  font-family: var(--sans); font-size: 0.95rem; color: var(--tinta-80);
  padding-left: 1.5rem; position: relative; line-height: 1.55;
}
.cap-lista li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 0.8rem; height: 1px; background: var(--salvia);
}

/* ---------- Acceso clientes ------------------------------------------------ */
.clientes-caja {
  display: grid; grid-template-columns: 1fr 0.85fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.clientes-lista { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: 0.7rem; }
.clientes-lista li {
  font-family: var(--sans); font-size: 0.95rem; color: var(--tinta-80);
  padding-left: 1.5rem; position: relative;
}
.clientes-lista li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 0.8rem; height: 1px; background: var(--salvia);
}
.aviso-url {
  font-family: var(--sans); font-size: 0.8rem; color: var(--tinta-60);
  margin: 0 0 1.3rem; max-width: 42ch;
}
.aviso-url b { color: var(--salvia-osc); }

/* ---------- Noticias ------------------------------------------------------- */
.noticias {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
}
.noticia {
  display: flex; flex-direction: column;
  background: var(--papel-2);
  border: 1px solid rgba(34, 51, 43, 0.13);
  border-radius: 0.6rem; padding: 1.5rem;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s;
}
.noticia:hover { transform: translateY(-4px); border-color: rgba(140, 170, 136, 0.7); }
.noticia-fecha {
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--salvia-osc); margin: 0 0 0.7rem;
}
.noticia-titulo { font-size: 1.22rem; font-style: italic; margin: 0 0 0.7rem; }
.noticia-titulo a { text-decoration: none; }
.noticia-titulo a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.noticia-resumen {
  font-family: var(--sans); font-size: 0.88rem; line-height: 1.6;
  color: var(--tinta-60); margin: 0 0 1.1rem;
}
.noticia-mas {
  margin-top: auto; font-family: var(--sans); font-size: 0.8rem;
  letter-spacing: 0.06em; color: var(--tinta-80); text-decoration: none;
}
.noticia-mas::after { content: " →"; color: var(--salvia-osc); }
.noticias-mas { font-family: var(--sans); font-size: 0.9rem; margin: 2rem 0 0; }
.noticias-mas a { color: var(--salvia-osc); text-underline-offset: 0.25em; }

/* ---------- Reseñas -------------------------------------------------------- */
.resenas-dato { text-align: center; margin-bottom: 2.8rem; }
.resenas-nota {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-size: clamp(2.6rem, 1.5rem + 4vw, 4.4rem); line-height: 1; margin: 0 0 0.5rem;
}
.resenas-nota .estrellas svg { width: 1.5rem; height: 1.5rem; }
.resenas-total { font-family: var(--sans); font-size: 0.9rem; color: var(--tinta-60); margin: 0; }
.resenas-total b { color: var(--tinta); font-weight: 600; }

.resenas {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
}
.resenas li {
  border-top: 1px solid rgba(34, 51, 43, 0.18); padding-top: 1.2rem;
  display: flex; flex-direction: column;
}
.resenas .estrellas { margin-bottom: 0.7rem; }
.resenas .estrellas svg { width: 0.85rem; height: 0.85rem; }
.resenas blockquote { margin: 0 0 1rem; }
.resenas blockquote p {
  margin: 0; font-size: 1.02rem; line-height: 1.6;
  color: var(--tinta); text-wrap: pretty;
}
.resenas cite {
  margin-top: auto;
  font-family: var(--sans); font-style: normal; font-size: 0.88rem;
  font-weight: 500; color: var(--tinta);
}
.resena-fuente {
  display: block; font-weight: 400; font-size: 0.76rem;
  letter-spacing: 0.06em; color: var(--tinta-60); margin-top: 0.15rem;
}

/* ---------- Contacto ------------------------------------------------------- */
.contacto-caja {
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.contacto-datos h3, .horario h3 {
  font-size: 1.4rem; font-style: italic; margin-bottom: 1rem;
}
.contacto-datos address { font-style: normal; color: var(--tinta-80); margin-bottom: 1rem; }
.contacto-lineas { margin: 0 0 1.6rem; }
.contacto-lineas a { color: var(--tinta); text-decoration-color: var(--salvia); text-underline-offset: 0.25em; }

.horario-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); }
.temporada { border-top: 2px solid var(--salvia); padding-top: 1rem; }
.temporada-nombre {
  font-family: var(--sans); font-size: 0.76rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--salvia-osc); margin: 0 0 1rem; line-height: 1.5;
}
.temporada dl { margin: 0; display: grid; gap: 0.9rem; }
.temporada dt {
  font-family: var(--sans); font-size: 0.82rem; color: var(--tinta-60);
}
.temporada dd {
  margin: 0.15rem 0 0; font-size: 1.12rem; font-variant-numeric: tabular-nums; color: var(--tinta);
}

.mapa { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.map-consent {
  width: 100%; min-height: 15rem;
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  background: var(--papel-2); border: 1px dashed rgba(34, 51, 43, 0.28);
  border-radius: 0.6rem; cursor: pointer; padding: 2rem; text-align: left;
  color: var(--tinta); font-family: var(--sans);
  transition: border-color 0.3s, background-color 0.3s;
}
.map-consent:hover { border-color: var(--salvia); background: var(--papel-3); }
.map-icono svg { width: 2rem; height: 2rem; fill: none; stroke: var(--salvia-osc); stroke-width: 1.5; }
.map-txt b { display: block; font-size: 1rem; margin-bottom: 0.25rem; }
.map-txt small { display: block; font-size: 0.8rem; color: var(--tinta-60); max-width: 34ch; line-height: 1.5; }
.mapa iframe { width: 100%; height: 26rem; border: 0; border-radius: 0.6rem; display: block; }

/* ---------- Contraportada -------------------------------------------------- */
.pie {
  background: var(--tinta); color: rgba(244, 240, 232, 0.8);
  margin-top: clamp(5rem, 10vw, 9rem);
  padding: clamp(3.5rem, 7vw, 6rem) var(--gutter) 2rem;
  font-family: var(--sans); font-size: 0.88rem; line-height: 1.7;
}
.pie-caja {
  max-width: var(--ancho); margin: 0 auto;
  display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
}
.pie-c { width: 3rem; height: 3rem; color: var(--salvia); margin-bottom: 0.9rem; }
.pie-nombre {
  font-family: var(--serif); font-size: 1.35rem; color: var(--papel); margin: 0 0 0.4rem;
}
.pie-sub { margin: 0; color: rgba(244, 240, 232, 0.6); }
.pie h4 {
  font-family: var(--sans); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--salvia); margin-bottom: 1rem;
}
.pie-col p { margin: 0 0 0.8rem; }
.pie a { color: rgba(244, 240, 232, 0.85); text-decoration-color: rgba(140, 170, 136, 0.6); text-underline-offset: 0.25em; }
.pie a:hover { color: var(--papel); text-decoration-color: var(--salvia); }
.pie-enlaces { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.kit-logo { width: 100%; max-width: 17rem; margin: 0.6rem 0 0.8rem; opacity: 0.92; }
.pie-pendiente { font-size: 0.76rem; color: var(--salvia); }

.pie-fin {
  max-width: var(--ancho); margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  padding-top: 1.6rem; border-top: 1px solid rgba(244, 240, 232, 0.16);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: 0.8rem; color: rgba(244, 240, 232, 0.55);
}
.pie-fin p { margin: 0; }
.pie-rasgo {
  width: 3rem; height: 1.7rem; flex: none;
  background: var(--salvia); mask: var(--rasgo) center / contain no-repeat;
  -webkit-mask: var(--rasgo) center / contain no-repeat;
  --rasgo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 32'%3E%3Cpath d='M1 16c10 0 16-13 26-13 7 0 9 7 4 11-6 5-17 4-17 10 0 4 6 5 12 3 6-2 11-6 15-11' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- Aviso de cookies ----------------------------------------------- */
/* [hidden] necesita esta regla propia: display:flex tiene la misma
   especificidad que la del navegador y si no, el botón «Entendido» no cierra. */
.cookie-banner {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 120;
  max-width: 34rem; margin-inline: auto;
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  background: var(--tinta); color: rgba(244, 240, 232, 0.86);
  border-radius: 0.6rem; padding: 1.1rem 1.3rem;
  font-family: var(--sans); font-size: 0.82rem; line-height: 1.6;
  box-shadow: 0 1.5rem 3rem -1.5rem rgba(0, 0, 0, 0.6);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin: 0; flex: 1 1 16rem; }
.cookie-ack { flex: none; padding: 0.6rem 1.3rem; }

/* ---------- Control de paleta (demostración, ver nota arriba en :root) ----------
   Esta web no tenía ya un botón flotante (WhatsApp, etc.) con el que compartir
   convención de "no tapar el aviso de cookies", así que main.js calcula
   --cookie-h (alto del aviso + margen) mientras esté visible y aquí solo se
   suma al bottom. */
.paleta { display: none; }
.paleta:not([hidden]) {
  display: flex; position: fixed; z-index: 130; left: 1.2rem; bottom: calc(1.2rem + var(--cookie-h, 0px));
  align-items: center; gap: 0.6rem; background: var(--papel); border: 1px solid rgba(34, 51, 43, 0.18);
  border-radius: 999px; padding: 0.4rem 0.5rem 0.4rem 0.9rem;
  box-shadow: 0 16px 32px -18px rgba(34, 51, 43, 0.45);
  transition: bottom 0.3s ease;
}
.paleta-rotulo {
  margin: 0; font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--tinta-60);
}
.paleta-botones { display: flex; gap: 0.3rem; }
.paleta-botones button {
  font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.04em; cursor: pointer;
  background: transparent; color: var(--tinta-60);
  border: 1px solid rgba(34, 51, 43, 0.18); border-radius: 999px; padding: 0.34rem 0.75rem;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.paleta-botones button:hover { color: var(--tinta); border-color: rgba(34, 51, 43, 0.32); }
.paleta-botones button[aria-pressed="true"] { background: var(--salvia-osc); color: var(--papel); border-color: var(--salvia-osc); }
@media (max-width: 480px) {
  .paleta:not([hidden]) { left: 0.9rem; bottom: calc(0.9rem + var(--cookie-h, 0px)); padding: 0.3rem 0.4rem 0.3rem 0.7rem; }
  .paleta-rotulo { display: none; }
}

/* ---------- Estados de entrada (solo con movimiento) ----------------------- */
html.has-motion [data-reveal] { opacity: 0; transform: translateY(1.4rem); }
html.has-motion .split-char { display: inline-block; opacity: 0; transform: translateY(0.5em); }
.split-word { display: inline-block; white-space: nowrap; }

/* ---------- Responsive ------------------------------------------------------ */
@media (max-width: 62rem) {
  .nav, .cab-cta { display: none; }
  .nav-toggle { display: grid; }
  .prologo-cuerpo, .clientes-caja, .contacto-caja { grid-template-columns: 1fr; }
  .notas { grid-template-columns: 1fr; gap: 1.5rem; }
  .cap-tarjeta { grid-template-columns: 1fr; min-height: 0; }
  .cap-num { width: 6rem; padding-top: 0; }
  :root { --stack-top: 6rem; }
  .cap { margin-bottom: 14vh; }
}

@media (max-width: 40rem) {
  :root { --nav-h: 4.25rem; --stack-top: 5.25rem; }
  .horario-cols { grid-template-columns: 1fr; gap: 1.8rem; }
  .equipo-pendiente { grid-template-columns: 1fr; text-align: left; }
  .equipo-marco { width: 6rem; }
  .pie-caja { grid-template-columns: 1fr; }
  .pie-fin { flex-direction: column; align-items: flex-start; }
  .map-consent { flex-direction: column; text-align: center; }
  .map-txt small { max-width: none; }
  .mapa iframe { height: 20rem; }
  .resenas, .noticias { grid-template-columns: 1fr; }
  .hero-botones .btn { flex: 1 1 auto; }
}

@media (max-width: 26rem) {
  .titular { font-size: clamp(1.75rem, 1rem + 4vw, 2.4rem); }
  .cap-tarjeta { padding: 1.4rem; }
  .equipo-pendiente { padding: 1.1rem; }
  .cookie-banner { left: 0.6rem; right: 0.6rem; bottom: 0.6rem; }
}

/* ---------- Menos movimiento ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .marquesina-pista { animation: none !important; }
  .noticia { transition: none; }
}