/* =========================================================
   BITÁCORA VITAL — sistema visual
   ---------------------------------------------------------
   TIPOGRAFÍA · dos familias, sin excepciones
     Instrument Serif → títulos, frases emocionales, citas, cursivas
     Manrope          → navegación, párrafos, botones, formularios,
                        listas y textos auxiliares
   Instrument Serif es una serif de display: por debajo de ~20px sus
   trazos finos se deshacen. Vive sólo en el registro grande.

   COLOR · tres papeles que no se solapan
     NEGRO  estructura (franjas profundas, títulos)
     ORO    adorna (filetes, etiquetas, puntos)
     VINO   acción, y nada más que acción
   Al ser el vino el único color saturado, cualquier cosa vino se lee
   como "esto se pulsa". El oro nunca es acción sobre claro (2,8:1).

   VIDRIO · el glassmorphism necesita algo que desenfocar.
   Sobre una franja blanca, blanco al 14% + blur = invisible. Por eso
   las secciones con tarjetas van sobre foto (.s--foto) o sobre negro
   (.s--noche). Las de sólo texto siguen en blanco.
   ========================================================= */

/* ---------------- Tokens ---------------- */
:root{
  /* ============================================================
     PALETA (Vanessa, 18 jul 2026 · corrección):
     Fondos de sección rotan NEGRO · BLANCO · GRIS CLARO. El AZUL OSCURO
     #0c1c29 se reserva para los banners de cierre (antes del pie). El ORO
     #d4ab62 es el acento y viste los botones. Los nombres = papel, no tono.
     Contrastes: oro/negro 8,5:1 · oro/azul 8:1 · negro/blanco 18:1.
     ============================================================ */

  /* Superficies claras — blanco y dos grises claros, para alternar */
  --blanco:      #FFFFFF;
  --papel:       #F1F0ED;   /* gris claro */
  --humo-pale:   #E8E7E3;   /* gris claro, un paso más */

  /* Oscuro = NEGRO (franjas oscuras de mitad de página, pie). */
  --negro:       #121316;
  --negro-hondo: #0B0B0D;

  /* Azul oscuro: SOLO banners de cierre (.s--azul) y botón principal sobre
     claro. No se usa como franja de mitad de página. */
  --azul:      #0C1C29;
  --azul-alt:  #16344C;   /* al pasar el cursor */
  /* Alias histórico: muchas reglas usan --accion como "el botón sobre claro". */
  --accion:     var(--azul);
  --accion-alt: var(--azul-alt);

  /* Neutro tras las imágenes mientras cargan (apenas se ve). */
  --humo:       #B7A99D;

  /* Oro */
  --oro:        #C79A55;   /* filete/gráfico sobre claro */
  --oro-texto:  #8A6A2F;   /* oro legible como TEXTO sobre claro (5:1) */
  --oro-claro:  #D4AB62;   /* oro · botones y eyebrows sobre oscuro */
  --oro-brillante: #EBC873; /* oro brillante · texto del botón azul (sobre azul 9:1) */

  /* WhatsApp. No es de la paleta: es la marca de otra empresa, y ese verde
     es justo lo que hace que el botón se reconozca sin leerlo. Se usa sólo
     en el botón flotante, nunca en un botón editorial. */
  --whatsapp:     #25D366;
  --whatsapp-alt: #1CB854;

  /* Tinta */
  --titulo:      #121316;  /* negro */
  --tinta:       #1C1D20;
  --tinta-suave: #55524E;  /* gris cálido, texto secundario (7,4:1 sobre blanco) */
  --tinta-clara: rgba(255,255,255,.88);
  --tinta-tenue: rgba(255,255,255,.70);

  /* Líneas */
  --linea:       rgba(18,19,22,.16);
  --linea-tenue: rgba(18,19,22,.10);
  --linea-oro:   rgba(212,171,98,.55);

  /* Vidrio */
  --vidrio:        rgba(255,255,255,.14);
  --vidrio-alta:   rgba(255,255,255,.18);
  --vidrio-borde:  rgba(255,255,255,.15);
  --vidrio-borde-h:rgba(255,255,255,.34);
  --vidrio-blur:   80px;
  --vidrio-sombra: 0 28px 70px -34px rgba(0,0,0,.42);

  /* Tipografía */
  --serif: "Instrument Serif", "Times New Roman", Georgia, serif;
  --sans:  "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Medidas */
  --gutter:  clamp(1.5rem, 5vw, 3.5rem);
  --wrap:    100rem;
  --narrow:  48rem;
  --lectura: 40rem;
  --paso:    clamp(4.5rem, 9vw, 9rem);   /* espaciado generoso entre bloques */
  --radio:   8px;

  --t: 300ms ease;
}

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

html{ scroll-behavior:smooth; scroll-padding-top:6rem; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--blanco);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:1.125rem;           /* 18px */
  font-weight:400;
  line-height:1.7;
}

img{ max-width:100%; height:auto; display:block; }
h1,h2,h3,h4{ margin:0; }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }
a{ color:var(--accion); }

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

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--accion); color:var(--blanco);
  padding:.75rem 1.25rem; text-decoration:none;
}
.skip-link:focus{ left:1rem; top:1rem; }

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

/* ---------------- Layout ---------------- */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.wrap--narrow{ max-width:calc(var(--narrow) + var(--gutter) * 2); }
.wrap--lectura{ max-width:calc(var(--lectura) + var(--gutter) * 2); }

.s{ padding-block:var(--paso); }
.s--top0{ padding-top:0; }
.s--bot0{ padding-bottom:0; }

/* Franjas claras (para alternar sin repetir): blanca · gris claro · gris claro. */
.s--blanco{ background:var(--blanco); }
.s--marfil{ background:var(--papel); }
.s--salvia{ background:var(--humo-pale); }
/* Franjas oscuras de mitad de página = NEGRO. */
.s--noche { background:var(--negro);       color:var(--tinta-clara); }
.s--hondo { background:var(--negro-hondo); color:var(--tinta-clara); }
/* Banner de cierre (antes del pie) = AZUL OSCURO. Único uso del azul como fondo. */
.s--azul  { background:var(--azul);        color:var(--tinta-clara); }

/* Franja fotográfica: es el fondo que el vidrio desenfoca. El velo azul al
   74% mantiene el texto sobre vidrio por encima de 6:1 incluso donde la foto
   tiene estrellas. Sostiene las tarjetas (tres rutas, Chequeo). */
.s--foto{
  background-size:cover;
  background-position:center;
  background-attachment:scroll;
  color:var(--tinta-clara);
  background-image:
    linear-gradient(rgba(8,21,33,.78), rgba(8,21,33,.78)),
    url("../img/mapa-constelaciones.jpg");
}

/* :not(.btn) es obligatorio: sin él esta regla pisa el color de texto
   de los botones y les deja letra clara sobre fondo claro. */
.s--noche a:not(.btn), .s--hondo a:not(.btn), .s--foto a:not(.btn), .s--azul a:not(.btn){ color:var(--blanco); }

/* Una franja oscura aclara su propio texto. Sin esto hay que acordarse de
   poner --claro en cada elemento al cambiar el fondo de una sección, y se
   olvida: es exactamente el fallo que apareció al mover las tarjetas. */
:is(.s--noche, .s--hondo, .s--foto, .s--azul) :is(.h1, .h2, .h3, .lede, .pull){ color:var(--blanco); }
:is(.s--noche, .s--hondo, .s--foto, .s--azul) .h4{ color:var(--blanco); }
:is(.s--noche, .s--hondo, .s--foto, .s--azul) :is(.prose, .fineprint, .small, .micro){ color:var(--tinta-clara); }
:is(.s--noche, .s--hondo, .s--foto, .s--azul) .eyebrow{ color:var(--oro-claro); }
:is(.s--noche, .s--hondo, .s--foto, .s--azul) .quote__head{ color:var(--blanco); }
:is(.s--noche, .s--hondo, .s--foto, .s--azul) .quote figcaption{ color:var(--oro-claro); }

.center{ text-align:center; }

/* ---------------- Escala tipográfica ----------------
   Instrument Serif (sólo ≥20px)      Manrope
     h1 hero    48 → 96                nav      18
     h1 página  40 → 72                párrafo  18
     h2         32 → 56                artículo 20
     h3         28 → 36                botón    14 · lg 16
     lede       22 → 28                etiqueta 11-13
   Tracking negativo en títulos, interlineado 1.5–1.7.
--------------------------------------------------- */
.h1, .h2{
  font-family:var(--serif);
  font-weight:400;
  color:var(--titulo);
  letter-spacing:-.022em;
}

.h1{
  font-size:clamp(2.5rem, 1.7rem + 3.4vw, 4.5rem);   /* 40 → 72 */
  line-height:1.05;
  margin:0 0 1.5rem;
  max-width:17ch;
}
.h2{
  font-size:clamp(2rem, 1.25rem + 3.1vw, 3.5rem);     /* 32 → 56 */
  line-height:1.1;
  margin:0 0 1.25rem;
  max-width:19ch;
}
.h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.75rem, 1.45rem + 1.3vw, 2.25rem); /* 28 → 36 */
  line-height:1.15;
  letter-spacing:-.018em;
  color:var(--titulo);
  margin:0 0 .75rem;
}
/* h4 es texto auxiliar, no título: Manrope */
.h4{
  font-family:var(--sans);
  font-size:1rem;
  font-weight:700;
  line-height:1.4;
  letter-spacing:.005em;
  color:var(--titulo);
  margin:0 0 .5rem;
}

.h1--claro, .h2--claro, .h3--claro{ color:var(--blanco); }
.h2--center, .h1--center{ margin-inline:auto; text-align:center; }

/* Frase emocional → Instrument Serif */
.lede{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.375rem, 1.15rem + .9vw, 1.75rem);  /* 22 → 28 */
  line-height:1.35;
  letter-spacing:-.01em;
  color:var(--titulo);
  max-width:40ch;
  margin:0 0 2rem;
}
.lede--center{ margin-inline:auto; text-align:center; }
.lede--claro{ color:var(--blanco); }

.prose{ max-width:62ch; color:var(--tinta-suave); }
.prose--center{ margin-inline:auto; text-align:center; }
.prose--claro{ color:var(--tinta-clara); }

.small{ font-size:1rem; }
.micro{ font-size:.8125rem; }
.fineprint{ font-size:1rem; color:var(--tinta-suave); }

/* ---------------- Etiqueta de sección (remate del logotipo) ---------------- */
.eyebrow{
  display:flex; align-items:center; gap:.9rem;
  margin:0 0 1.5rem;
  font-family:var(--sans);
  font-size:.6875rem; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--oro-texto);
}
.eyebrow::before{
  content:""; flex:none; width:2.5rem; height:6px;
  background-image:
    radial-gradient(circle at 3px 50%, var(--oro) 0 3px, transparent 3.5px),
    linear-gradient(90deg, var(--oro), var(--oro));
  background-size:100% 100%, calc(100% - 10px) 1px;
  background-position:left center, right center;
  background-repeat:no-repeat;
}
.eyebrow--center{ justify-content:center; }
.eyebrow--center::after{
  content:""; flex:none; width:2.5rem; height:6px;
  background-image:
    radial-gradient(circle at calc(100% - 3px) 50%, var(--oro) 0 3px, transparent 3.5px),
    linear-gradient(90deg, var(--oro), var(--oro));
  background-size:100% 100%, calc(100% - 10px) 1px;
  background-position:right center, left center;
  background-repeat:no-repeat;
}
.eyebrow--claro{ color:var(--oro-claro); }

/* ---------------- Botones ---------------- */
.btn{
  --bg:transparent; --fg:var(--accion); --bd:var(--accion);
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  padding:1.05rem 2rem;
  background:var(--bg); color:var(--fg);
  border:1px solid var(--bd);
  border-radius:6px;
  font-family:var(--sans);
  font-size:.875rem; font-weight:600;    /* 14px */
  letter-spacing:.06em;
  text-decoration:none; text-align:center;
  line-height:1.3;
  cursor:pointer;
  /* box-shadow va aquí: es lo que enciende el halo al pasar el cursor.
     Sin él el resplandor aparecería de golpe en vez de en 300ms. */
  transition:background var(--t), color var(--t), border-color var(--t), box-shadow var(--t);
}
.btn--lg{ padding:1.2rem 2.25rem; font-size:1rem; }   /* 16px */
.btn--sm{ padding:.8rem 1.35rem; font-size:.875rem; }

/* REGLAS DE BOTÓN (Vanessa, 18 jul):
   · Sobre CLARO: azul oscuro con letra dorada (principal). Si van dos juntos,
     el segundo es negro con letra dorada (.btn--linea).
   · Sobre OSCURO: oro y DEBE BRILLAR (glow siempre visible). Si van dos juntos,
     uno oro y el otro blanco (.btn--linea-claro). */

/* Principal sobre CLARO — azul oscuro con TEXTO DORADO BRILLANTE. Oro brillante
   sobre azul: 9:1. */
.btn--accion{
  --bg:var(--azul); --fg:var(--oro-brillante); --bd:var(--azul);
  box-shadow:0 8px 26px -14px rgba(12,28,41,.7);
}
.btn--accion:hover{
  --bg:var(--azul-alt); --bd:var(--azul-alt);
  box-shadow:0 0 26px -6px rgba(235,200,115,.4), 0 8px 26px -14px rgba(12,28,41,.7);
}
.btn--accion:active{ box-shadow:none; transform:translateY(1px); }

/* Segundo botón sobre CLARO — LÍNEA NEGRA, TEXTO NEGRO (contorno). */
.btn--linea{ --bg:transparent; --fg:var(--negro); --bd:var(--negro); }
.btn--linea:hover{ --bg:rgba(18,19,22,.06); }

/* Principal sobre OSCURO — oro sólido con letra negra, y BRILLA siempre.
   El halo se intensifica al pasar; al pulsar se vacía dejando el borde oro. */
.btn--accion-claro{
  --bg:var(--oro-claro); --fg:var(--negro); --bd:var(--oro-claro);
  box-shadow:0 0 24px -2px rgba(212,171,98,.55), 0 8px 26px -14px rgba(0,0,0,.7);
}
.btn--accion-claro:hover{
  box-shadow:0 0 40px 0 rgba(212,171,98,.85), 0 8px 26px -14px rgba(0,0,0,.7);
}
.btn--accion-claro:active{
  --bg:transparent; --fg:var(--oro-claro); --bd:var(--oro-claro);
  box-shadow:none;
}

/* Segundo botón sobre OSCURO — blanco (contorno). */
.btn--linea-claro{ --bg:transparent; --fg:var(--blanco); --bd:rgba(255,255,255,.55); }
.btn--linea-claro:hover{ --bg:rgba(255,255,255,.12); --bd:var(--blanco); }

/* Terciaria (enlace-botón). Sobre claro: azul con raya dorada. */
.btn--texto{
  --bg:transparent; --fg:var(--azul); --bd:transparent;
  padding-inline:.5rem;
  text-decoration:underline; text-underline-offset:6px;
  text-decoration-color:var(--oro);
  text-decoration-thickness:1px;
}
.btn--texto:hover{ --fg:var(--azul-alt); text-decoration-color:var(--oro-claro); }
.btn--texto-claro{ --fg:var(--tinta-clara); text-decoration-color:var(--oro-claro); }
.btn--texto-claro:hover{ --fg:var(--blanco); text-decoration-color:var(--blanco); }

.actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.25rem; }
.actions--center{ justify-content:center; }

/* La raya del enlace es del color del botón de su fondo: vino sobre claro,
   oro claro sobre oscuro. Antes era --oro en ambos, y sobre negro convivía
   con botones --oro-claro: dos dorados distintos a un palmo de distancia. */
.link{
  display:inline-block;
  font-family:var(--sans);
  font-size:.875rem; font-weight:600;
  letter-spacing:.06em;
  color:var(--accion);
  text-decoration:none;
  border-bottom:1px solid var(--accion);
  padding-bottom:.35rem;
  transition:color var(--t), border-color var(--t);
}
.link::after{ content:" →"; }
.link:hover{ color:var(--accion-alt); border-color:var(--accion-alt); }
.link--claro{ color:var(--blanco); border-bottom-color:var(--oro-claro); }
.link--claro:hover{ color:var(--oro-claro); border-color:var(--oro-claro); }

/* ---------------- Barra de navegación ---------------- */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linea-tenue);
}
.nav__inner{
  width:100%; max-width:var(--wrap);
  margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:center; gap:1.5rem;
  min-height:5.75rem;
}
.nav__logo{ flex:none; display:block; line-height:0; }
.nav__logo img{ width:clamp(11rem, 15vw, 13.5rem); }   /* logo más grande (Vanessa, 18 jul) */

.nav__links{ display:flex; gap:1.75rem; margin-left:auto; }
.nav__links a{
  position:relative;
  font-family:var(--sans);
  font-size:1.125rem; font-weight:500;   /* 18px */
  letter-spacing:.005em;
  color:var(--titulo); text-decoration:none;
  padding-block:.5rem;
  transition:color var(--t);
}
/* La raya de la pestaña activa va en vino, igual que el botón Agendar que
   tiene al lado. En oro leían como dos acciones distintas en la misma barra. */
.nav__links a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--accion);
  transform:scaleX(0); transform-origin:center;
  transition:transform var(--t);
}
.nav__links a:hover{ color:var(--accion); }
.nav__links a:hover::after{ transform:scaleX(1); }
.nav__links a[aria-current="page"]{ color:var(--accion); }
.nav__links a[aria-current="page"]::after{ transform:scaleX(1); }

/* El "Agendar" del menú brilla siempre con un halo dorado, para que sea el
   punto más llamativo de la barra. Se intensifica al pasar el cursor. */
/* Sobre la barra blanca un halo dorado solo no se ve: se le añade un aro
   dorado de 1px, y así el botón se lee dorado Y brillante. */
.nav__cta{
  flex:none;
  box-shadow:0 0 0 1px rgba(235,200,115,.75), 0 0 22px 2px rgba(235,200,115,.7);
}
.nav__cta:hover{
  box-shadow:0 0 0 1px rgba(235,200,115,.95), 0 0 34px 5px rgba(235,200,115,.95);
}

.nav__toggle{
  display:none; margin-left:auto;
  width:2.75rem; height:2.75rem;
  background:none; border:1px solid var(--linea); border-radius:6px;
  cursor:pointer; padding:.75rem;
}
.nav__toggle span{ display:block; height:1px; background:var(--titulo); transition:transform var(--t), opacity var(--t); }
.nav__toggle span + span{ margin-top:5px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.nav__mobile{
  display:none;
  flex-direction:column;
  padding:.5rem var(--gutter) 2rem;
  border-top:1px solid var(--linea-tenue);
  background:var(--blanco);
}
.nav__mobile a:not(.btn){
  font-family:var(--sans);
  font-size:1.125rem; font-weight:500;
  letter-spacing:.005em;
  color:var(--titulo); text-decoration:none;
  padding:1.05rem 0;
  border-bottom:1px solid var(--linea-tenue);
}
.nav__mobile a[aria-current="page"]{ color:var(--accion); }
.nav__mobile .btn{ margin-top:1.5rem; }

/* ---------------- Migas ---------------- */
.crumbs{
  padding-block:1.5rem 0;
  font-size:.8125rem;
  color:var(--tinta-suave);
}
.crumbs ol{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; margin:0; padding:0; }
.crumbs li:not(:last-child)::after{ content:"·"; margin-left:.5rem; color:var(--oro); }
.crumbs a{ color:var(--tinta-suave); text-decoration:none; }
.crumbs a:hover{ color:var(--oro-texto); }
.crumbs [aria-current="page"]{ color:var(--titulo); }

/* ---------------- Hero ---------------- */
.hero{
  position:relative;
  background:var(--negro-hondo);
  color:var(--blanco);
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0; }
.hero__media picture{ display:block; height:100%; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 38%; }
.hero__media::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(7,6,7,.6) 0%, rgba(7,6,7,.24) 32%, rgba(7,6,7,.94) 100%),
    linear-gradient(90deg, rgba(7,6,7,.9) 0%, rgba(7,6,7,.36) 62%, rgba(7,6,7,.12) 100%);
}
.hero__body{
  position:relative;
  width:100%; max-width:var(--wrap);
  margin-inline:auto; padding-inline:var(--gutter);
  padding-block:clamp(5.5rem, 14vh, 10rem) clamp(3rem, 5vh, 4rem);
}
.hero__inner{ max-width:54rem; }

.hero__title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(3rem, 1.9rem + 4.4vw, 6rem);   /* 48 → 96 */
  line-height:1.02;
  letter-spacing:-.028em;
  color:var(--blanco);
  margin:0 0 1.75rem;
  max-width:16ch;
}
.hero__title .r{ display:inline; }
@media (min-width:60rem){
  .hero__title .r{ display:block; }
  .hero__title{ max-width:none; }
}

.hero__lede{ max-width:46ch; color:var(--blanco); }
.hero__coda{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.5rem, 1.2rem + 1vw, 2rem);
  color:var(--oro-claro);
  line-height:1.35;
  letter-spacing:-.01em;
  max-width:36ch;
  margin-bottom:2.5rem;
}
.hero__micro{ margin-top:1.75rem; font-size:.875rem; color:var(--tinta-tenue); }

.hero__trust{
  position:relative;
  list-style:none; margin:0;
  width:100%; max-width:var(--wrap);
  margin-inline:auto;
  padding:1.25rem var(--gutter);
  border-top:1px solid var(--linea-oro);
  display:flex; flex-wrap:wrap; gap:.5rem 2.5rem;
  font-size:.6875rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--oro-claro);
}
.hero__trust li{ display:flex; align-items:center; gap:.65rem; }
.hero__trust li::before{ content:""; width:4px; height:4px; border-radius:50%; background:var(--oro); flex:none; }

/* ---------------- Hero de cabecera (igual en las 6 páginas) ----------------
   Un solo componente para todas: misma altura, imagen de fondo por página con
   un velo azul para que el texto siempre se lea. El velo va DENTRO de
   background-image (encima de la foto), así el contenido no necesita z-index. */
.phead{
  position:relative;
  padding-block:clamp(4rem, 9vw, 7rem);
  background:var(--negro);
  color:var(--tinta-clara);
  overflow:hidden;
}
/* Las 6 páginas hero llevan además .phead--img: misma altura e imagen de fondo.
   Contacto y las legales usan .phead a secas (compacta, sin imagen). */
.phead--img{
  display:flex; align-items:center;
  /* La imagen se ve ENTERA: 36.4583vw es la proporción 1920:700 del ancho, así
     que a 1920px de ancho el hero mide los 700px del original. Se topa en 700
     para que no crezca de más en pantallas enormes, y no baja de 28rem.
     Es min-height (no height): si el texto fuera más alto, el hero crece y
     NUNCA recorta títulos ni botones. */
  min-height:max(28rem, min(700px, 36.4583vw));
  padding-block:3rem;
  background-size:cover; background-position:center;
}
/* En móvil la proporción 16:9 dejaría el hero muy bajo (56vw de 375px son
   211px): ahí manda el suelo y el propio contenido. */
@media (max-width:48rem){
  .phead--img{ min-height:26rem; padding-block:4rem 3rem; }
}
.phead > .wrap{ width:100%; }

/* Velo azul + imagen por página. La primera declaración (jpg) es el respaldo;
   la segunda añade webp donde el navegador lo soporta. */
.phead--inicio,
.phead--servicios,
.phead--sobremi,
.phead--blog,
.phead--chequeo,
.phead--faq{ background-position:center; }

.phead--inicio   { background-image:linear-gradient(90deg,rgba(8,21,33,.86),rgba(8,21,33,.5) 55%,rgba(8,21,33,.24)),url("../img/hero-inicio.jpg"); }
.phead--servicios{ background-image:linear-gradient(90deg,rgba(8,21,33,.9),rgba(8,21,33,.55) 55%,rgba(8,21,33,.28)),url("../img/hero-servicios.jpg"); }
.phead--sobremi  { background-image:linear-gradient(90deg,rgba(8,21,33,.86),rgba(8,21,33,.5) 55%,rgba(8,21,33,.24)),url("../img/hero-sobre-mi.jpg"); }
.phead--blog     { background-image:linear-gradient(90deg,rgba(8,21,33,.86),rgba(8,21,33,.5) 55%,rgba(8,21,33,.24)),url("../img/mapa-constelaciones.jpg"); }
.phead--chequeo  { background-image:linear-gradient(90deg,rgba(8,21,33,.86),rgba(8,21,33,.5) 55%,rgba(8,21,33,.24)),url("../img/hero-chequeo.jpg"); }
.phead--faq      { background-image:linear-gradient(90deg,rgba(8,21,33,.86),rgba(8,21,33,.5) 55%,rgba(8,21,33,.24)),url("../img/hero-faq.jpg"); }
.phead--agenda   { background-image:linear-gradient(90deg,rgba(8,21,33,.88),rgba(8,21,33,.52) 55%,rgba(8,21,33,.26)),url("../img/hero-agenda.jpg"); }

@supports (background-image: image-set(url("x.webp") type("image/webp"))){
  .phead--agenda   { background-image:linear-gradient(90deg,rgba(8,21,33,.88),rgba(8,21,33,.52) 55%,rgba(8,21,33,.26)),image-set(url("../img/hero-agenda.webp") type("image/webp"),url("../img/hero-agenda.jpg") type("image/jpeg")); }
  .phead--inicio   { background-image:linear-gradient(90deg,rgba(8,21,33,.86),rgba(8,21,33,.5) 55%,rgba(8,21,33,.24)),image-set(url("../img/hero-inicio.webp") type("image/webp"),url("../img/hero-inicio.jpg") type("image/jpeg")); }
  .phead--servicios{ background-image:linear-gradient(90deg,rgba(8,21,33,.9),rgba(8,21,33,.55) 55%,rgba(8,21,33,.28)),image-set(url("../img/hero-servicios.webp") type("image/webp"),url("../img/hero-servicios.jpg") type("image/jpeg")); }
  .phead--sobremi  { background-image:linear-gradient(90deg,rgba(8,21,33,.86),rgba(8,21,33,.5) 55%,rgba(8,21,33,.24)),image-set(url("../img/hero-sobre-mi.webp") type("image/webp"),url("../img/hero-sobre-mi.jpg") type("image/jpeg")); }
  .phead--blog     { background-image:linear-gradient(90deg,rgba(8,21,33,.86),rgba(8,21,33,.5) 55%,rgba(8,21,33,.24)),image-set(url("../img/mapa-constelaciones.webp") type("image/webp"),url("../img/mapa-constelaciones.jpg") type("image/jpeg")); }
  .phead--chequeo  { background-image:linear-gradient(90deg,rgba(8,21,33,.86),rgba(8,21,33,.5) 55%,rgba(8,21,33,.24)),image-set(url("../img/hero-chequeo.webp") type("image/webp"),url("../img/hero-chequeo.jpg") type("image/jpeg")); }
  .phead--faq      { background-image:linear-gradient(90deg,rgba(8,21,33,.86),rgba(8,21,33,.5) 55%,rgba(8,21,33,.24)),image-set(url("../img/hero-faq.webp") type("image/webp"),url("../img/hero-faq.jpg") type("image/jpeg")); }
}

.phead__title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.75rem, 1.9rem + 3.6vw, 4.5rem);   /* 44 → 72 */
  line-height:1.04;
  letter-spacing:-.026em;
  color:var(--blanco);
  margin:0 0 1.5rem;
  max-width:18ch;
}
.phead .lede{ color:var(--blanco); }
.phead .prose{ color:var(--tinta-clara); max-width:52ch; }
.phead__micro{
  margin-top:2rem;
  font-size:.6875rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--oro-claro);
}

/* ---------------- Cintillo de introducción (justo bajo el hero) ----------
   Una afirmación fuerte + una frase que la desarrolla. Todas las páginas
   llevan la misma cantidad de texto para que los cintillos midan igual;
   el min-height lo garantiza aunque una línea rompa distinto. */
.intro{ padding-block:clamp(3rem, 6vw, 4.5rem); }
.intro__inner{
  min-height:11rem;
  display:flex; flex-direction:column; justify-content:center;
}
.intro__t{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem);   /* 28 → 40 */
  line-height:1.15;
  letter-spacing:-.02em;
  color:var(--titulo);
  margin:0 0 1rem;
  max-width:26ch;
}
.intro__p{
  font-family:var(--sans);
  font-size:1.125rem;          /* 18px */
  line-height:1.7;
  color:var(--tinta-suave);
  margin:0;
  max-width:62ch;
}
@media (max-width:44rem){ .intro__inner{ min-height:0; } }

/* ---------------- Rejillas ---------------- */
.grid{ display:grid; gap:1.75rem; margin-top:3.5rem; }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }

.grid--rules{
  gap:0;
  border-top:1px solid var(--linea-tenue);
  margin-top:3.5rem;
}
.grid--rules > *{
  padding:2.5rem 2.5rem 2.5rem 0;
  border-bottom:1px solid var(--linea-tenue);
}
.grid--rules.grid--3 > *:not(:nth-child(3n)),
.grid--rules.grid--2 > *:not(:nth-child(2n)),
.grid--rules.grid--4 > *:not(:nth-child(4n)){
  border-right:1px solid var(--linea-tenue);
}
.grid--rules.grid--3 > *:not(:nth-child(3n+1)),
.grid--rules.grid--2 > *:not(:nth-child(2n+1)),
.grid--rules.grid--4 > *:not(:nth-child(4n+1)){ padding-left:2.5rem; }

/* =========================================================
   VIDRIO — Glassmorphism Editorial
   Un solo bloque de reglas para todas las tarjetas.
   Sin degradados, sin brillos. La interacción es sólo el borde.
   ========================================================= */
.card, .ruta, .chan, .plan, .quiz, .ccard{
  background:var(--vidrio);
  backdrop-filter:blur(var(--vidrio-blur));
  -webkit-backdrop-filter:blur(var(--vidrio-blur));
  border:1px solid var(--vidrio-borde);
  border-radius:var(--radio);
  box-shadow:var(--vidrio-sombra);
  padding:clamp(2.5rem, 3vw, 3.5rem);   /* 40 → 56 */
  transition:border-color var(--t), background var(--t);
}
.card:hover, .ruta:hover, .chan:hover, .plan:hover{
  border-color:var(--vidrio-borde-h);
  background:var(--vidrio-alta);
}

/* Sin soporte de backdrop-filter: el panel sigue siendo legible */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .card, .ruta, .chan, .plan, .quiz, .ccard{ background:rgba(255,255,255,.1); }
}

/* Contenido dentro del vidrio: siempre claro */
.card, .ruta, .chan, .plan, .quiz, .ccard{ color:var(--tinta-clara); }
:where(.card, .ruta, .chan, .plan, .quiz, .ccard) p{ color:var(--tinta-clara); font-size:1rem; }

.card, .ruta, .chan, .plan{
  display:flex; flex-direction:column; align-items:flex-start;
}
.card .link, .card .btn,
.chan .btn, .plan .btn{ margin-top:auto; }
.card > p:last-of-type{ margin-bottom:2rem; }

.card__kicker{
  font-family:var(--sans);
  font-size:.6875rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--oro-claro);
  margin:0 0 1rem;
}

/* Tarjeta de ruta */
.ruta{ text-decoration:none; }
.ruta__n{
  font-family:var(--sans);
  font-weight:600;
  font-size:.8125rem;
  letter-spacing:.02em;
  color:var(--oro-claro);
  border:1px solid var(--linea-oro);
  border-radius:50%;
  width:2.25rem; height:2.25rem;
  display:grid; place-items:center;
  margin-bottom:1.75rem;
}
.ruta__q{
  font-family:var(--sans);
  font-size:.6875rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--oro-claro);
  margin:0 0 .85rem;
}
.ruta__t{
  font-family:var(--serif);
  font-weight:400;
  font-size:1.75rem;          /* 28px — el mínimo de Instrument Serif */
  letter-spacing:-.018em;
  color:var(--blanco);
  margin:0 0 1rem;
  line-height:1.15;
}
:where(.ruta) p{ margin-bottom:2rem; }
.ruta__go{
  margin-top:auto;
  font-family:var(--sans);
  font-size:.875rem; font-weight:600;
  letter-spacing:.06em;
  /* Letra en blanco: cualquier color de acento sobre vidrio se queda en 3:1.
     El filete va en oro claro, que es el color de los botones de este fondo.
     Estaba en --humo, un rosa sobrante del botón oscuro descartado. */
  color:var(--blanco);
  border-bottom:1px solid var(--oro-claro);
  padding-bottom:.35rem;
}
.ruta__go::after{ content:" →"; }

/* Canal de contacto */
.chan__t{
  font-family:var(--serif);
  font-weight:400;
  font-size:1.75rem;
  letter-spacing:-.018em;
  color:var(--blanco);
  margin:0 0 .75rem;
  line-height:1.15;
}
:where(.chan) p{ margin-bottom:2rem; }
.chan .btn{ width:100%; word-break:break-word; }

/* Plan */
.plan{ position:relative; }
.plan--destacado{ border-color:var(--linea-oro); }
.plan__tag{
  position:absolute; top:-.75rem; left:2.5rem;
  background:var(--oro); color:#241017;
  font-family:var(--sans);
  font-size:.625rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  padding:.35rem .8rem; border-radius:4px;
}
.plan__t{
  font-family:var(--serif);
  font-weight:400;
  font-size:1.75rem;
  letter-spacing:-.018em;
  color:var(--blanco);
  margin:.5rem 0 .25rem;
  line-height:1.15;
}
.plan__p{
  font-family:var(--serif);
  font-weight:400;
  font-size:3rem;
  letter-spacing:-.026em;
  color:var(--blanco);
  line-height:1.05;
  margin:.75rem 0 .25rem;
}
.plan__sub{
  font-family:var(--sans);
  font-size:.875rem; font-weight:600;
  color:var(--oro-claro);
  margin:0 0 1.5rem;
}

/* ---------------- Listas ---------------- */
.ticks{ list-style:none; padding:0; margin:2rem 0; display:grid; gap:1rem; }
.ticks li{ position:relative; padding-left:1.85rem; color:var(--tinta); }
.ticks li::before{
  content:""; position:absolute; left:0; top:.66em;
  width:.7rem; height:1px; background:var(--oro);
}
.ticks--claro li{ color:var(--tinta-clara); }
.s--noche .ticks li, .s--hondo .ticks li, .s--foto .ticks li, .s--azul .ticks li{ color:var(--tinta-clara); }

.crosses{ list-style:none; padding:0; margin:1.75rem 0; display:grid; gap:.85rem; }
.crosses li{ position:relative; padding-left:1.85rem; color:var(--tinta-suave); }
.crosses li::before{
  content:"×"; position:absolute; left:.1rem; top:-.05em;
  color:var(--oro-texto); font-size:1.1rem;
}

.signals{
  list-style:none; padding:0; margin:2.5rem 0;
  border-top:1px solid var(--linea-tenue);
}
.signals li{
  border-bottom:1px solid var(--linea-tenue);
  padding:1.35rem 0 1.35rem 2rem;
  position:relative;
  color:var(--tinta);
}
.signals li::before{
  content:""; position:absolute; left:.3rem; top:2rem;
  width:5px; height:5px; border-radius:50%; background:var(--oro);
}

/* ---------------- Aviso / nota ---------------- */
.note{
  background:var(--humo-pale);
  border-left:2px solid var(--oro);
  padding:1.75rem 1.85rem;
  margin:2.5rem 0;
  border-radius:0 6px 6px 0;
}
.note--claro{ background:rgba(255,255,255,.08); }
.note__title{
  font-family:var(--sans);
  font-size:.6875rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--oro-texto);
  margin:0 0 .75rem;
}
.note--claro .note__title{ color:var(--oro-claro); }
:where(.note) p{ font-size:1rem; color:var(--tinta-suave); margin-bottom:.85rem; }
.note--claro p{ color:var(--tinta-clara); }
.s--noche .note, .s--hondo .note, .s--foto .note, .s--azul .note{
  background:rgba(255,255,255,.08);
  border-left-color:var(--oro);
}
.s--noche .note p, .s--hondo .note p, .s--foto .note p, .s--azul .note p{ color:var(--tinta-clara); }
.s--noche .note__title, .s--hondo .note__title, .s--foto .note__title, .s--azul .note__title{ color:var(--oro-claro); }

/* Los cuatro datos operativos dentro de una sola nota. */
.note__data{ margin:0; display:grid; grid-template-columns:1fr 1fr; gap:1.4rem 2.5rem; }
.note__data dt{
  font-family:var(--sans); font-weight:600; font-size:.9375rem;
  color:var(--titulo); margin-bottom:.3rem;
}
.note__data dd{ margin:0; font-size:.9375rem; line-height:1.55; color:var(--tinta-suave); }
.s--noche .note__data dt, .s--hondo .note__data dt, .s--foto .note__data dt, .s--azul .note__data dt{ color:var(--blanco); }
.s--noche .note__data dd, .s--hondo .note__data dd, .s--foto .note__data dd, .s--azul .note__data dd{ color:var(--tinta-clara); }
@media (max-width:44rem){ .note__data{ grid-template-columns:1fr; gap:1.25rem; } }

/* ---------------- Cita destacada ---------------- */
.pull{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
  line-height:1.2;
  letter-spacing:-.02em;
  color:var(--titulo);
  max-width:26ch;
  margin:3rem 0;
  padding-left:1.75rem;
  border-left:1px solid var(--oro);
}
.pull--center{ margin-inline:auto; }
.pull--claro{ color:var(--blanco); }

/* ---------------- Split texto/imagen ---------------- */
.split{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(2.5rem, 5vw, 5rem);
  align-items:center;
}
.split--media-izq .split__text{ order:2; }
.split--media-izq .split__media{ order:1; }

.split__media{ margin:0; }
.split__media img{ width:100%; border-radius:6px; }
.split__media figcaption{
  margin-top:1rem; font-size:.875rem;
  color:var(--oro-texto); font-style:italic;
  /* Manrope: a 14px los trazos finos de Instrument Serif se deshacen. */
  font-family:var(--sans);
}

.bleed{ padding-block:0; }
.bleed .split{ gap:clamp(2.5rem, 5vw, 5rem); align-items:stretch; }
.bleed .split__text{ padding-block:var(--paso); align-self:center; }
.portrait{ margin:0; position:relative; }
.portrait picture{ display:block; height:100%; }
.portrait img{
  width:100%; height:100%; object-fit:cover; object-position:center 18%;
  min-height:30rem; border-radius:0;
}

/* ---------------- El proceso: línea de rumbo ---------------- */
.course{
  list-style:none;
  margin:4rem 0 3.5rem;
  padding:0 0 0 4.5rem;
  position:relative;
}
.course::before{
  content:"";
  position:absolute; left:1.25rem; top:1rem; bottom:1rem;
  width:1px;
  background:linear-gradient(180deg, transparent, var(--oro) 6%, var(--oro) 94%, transparent);
  transform:scaleY(0); transform-origin:top center;
  transition:transform 1400ms cubic-bezier(.22,.61,.36,1);
}
.course.is-drawn::before{ transform:scaleY(1); }

.course__step{ position:relative; padding-bottom:3rem; }
.course__step:last-child{ padding-bottom:0; }
.course__n{
  position:absolute; left:-4.5rem; top:-.1rem;
  width:2.5rem; height:2.5rem;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--negro);
  border:1px solid var(--oro);
  color:var(--oro-claro);
  font-family:var(--sans);
  font-weight:600;
  font-size:.875rem;
}
.course__title{
  font-family:var(--serif);
  font-weight:400;
  font-size:1.75rem;
  letter-spacing:-.018em;
  color:var(--blanco);
  margin:0 0 .6rem;
  line-height:1.15;
}
.course__step p{ color:var(--tinta-clara); font-size:1.125rem; max-width:52ch; margin:0; }

.course--claro .course__n{ background:var(--blanco); color:var(--oro-texto); }
.course--claro .course__title{ color:var(--titulo); }
.course--claro .course__step p{ color:var(--tinta-suave); }

/* ---------------- Precio ---------------- */
.precio{
  display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap;
  margin:2rem 0 .75rem;
}
.precio__n{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(3rem, 2.2rem + 2.6vw, 4.5rem);
  letter-spacing:-.028em;
  color:var(--titulo);
  line-height:1;
}
.precio__m{
  font-family:var(--sans);
  font-size:.6875rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--oro-texto);
}
.precio--claro .precio__n{ color:var(--blanco); }
.precio--claro .precio__m{ color:var(--oro-claro); }

/* ---------------- Comparativa ---------------- */
.compare{ margin-top:3.5rem; overflow-x:auto; }
.compare table{
  width:100%; border-collapse:collapse;
  min-width:46rem;
  font-size:1rem;
}
.compare th, .compare td{
  text-align:left; padding:1.25rem 1.35rem;
  border-bottom:1px solid rgba(255,255,255,.14);
  vertical-align:top;
}
.compare thead th{
  font-family:var(--serif);
  font-weight:400;
  font-size:1.5rem;
  letter-spacing:-.018em;
  color:var(--blanco);
  border-bottom:1px solid var(--oro);
}
.compare tbody th{
  font-family:var(--sans);
  font-size:.6875rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--oro-claro);
  width:10rem;
}
.compare td{ color:var(--tinta-clara); }

/* La comparativa está sobre fondo claro (gris): texto e hilos oscuros. */
.compare-sec .compare th, .compare-sec .compare td{ border-bottom-color:var(--linea); }
.compare-sec .compare thead th{ color:var(--titulo); border-bottom-color:var(--oro); }
.compare-sec .compare tbody th{ color:var(--oro-texto); }
.compare-sec .compare td{ color:var(--tinta-suave); }

.compare__cards{ display:none; }
.ccard{ margin-bottom:1.25rem; }
.ccard__t{
  font-family:var(--serif);
  font-weight:400;
  font-size:1.75rem;
  letter-spacing:-.018em;
  color:var(--blanco); margin:0 0 1.25rem;
  line-height:1.15;
}
.ccard dl{ margin:0; display:grid; gap:.85rem; }
.ccard dt{
  font-family:var(--sans);
  font-size:.6875rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--oro-claro);
}
.ccard dd{ margin:0 0 .5rem; color:var(--tinta-clara); font-size:1rem; }
/* Tarjetas de comparación en móvil, sobre fondo claro. */
.compare-sec .ccard__t{ color:var(--titulo); }
.compare-sec .ccard dt{ color:var(--oro-texto); }
.compare-sec .ccard dd{ color:var(--tinta-suave); }

/* ---------------- Testimonios ---------------- */
.quote{
  margin:0;
  border-top:1px solid var(--oro);
  padding-top:2rem;
  display:flex; flex-direction:column;
}
.quote blockquote{ margin:0 0 2rem; }
.quote__head{
  font-family:var(--serif);
  font-weight:400;
  font-size:1.75rem;          /* 28px */
  line-height:1.2;
  letter-spacing:-.018em;
  color:var(--titulo);
  margin:0 0 1.25rem;
}
.quote blockquote p:not(.quote__head){ color:var(--tinta-suave); font-size:1rem; margin:0; }
.quote figcaption{
  margin-top:auto;
  font-family:var(--sans);
  font-size:.6875rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--oro-texto);
}

/* ---------------- FAQ ---------------- */
.faq{ margin-top:3.5rem; border-top:1px solid var(--linea-tenue); }
.faq__item{ border-bottom:1px solid var(--linea-tenue); }
.faq__item summary{
  list-style:none; cursor:pointer;
  padding:1.75rem 3rem 1.75rem 0;
  position:relative;
  font-family:var(--serif);
  font-weight:400;
  font-size:1.5rem;            /* 24px — Instrument Serif aguanta */
  line-height:1.25;
  letter-spacing:-.015em;
  color:var(--titulo);
  transition:color var(--t);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary:hover{ color:var(--oro-texto); }
.faq__item summary::after{
  content:""; position:absolute; right:.5rem; top:50%;
  width:10px; height:10px;
  border-right:1px solid var(--oro); border-bottom:1px solid var(--oro);
  transform:translateY(-70%) rotate(45deg);
  transition:transform var(--t);
}
.faq__item[open] summary::after{ transform:translateY(-30%) rotate(-135deg); }
.faq__body{ padding:0 3rem 2rem 0; }
.faq__body p{ color:var(--tinta-suave); font-size:1.125rem; max-width:64ch; }

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

/* Portada del artículo. Las fotos vienen ya recortadas a 3:2 desde
   blogimg.py, así que aquí no hace falta object-fit. */
.cover{
  margin:0 0 3.5rem;
  border-radius:var(--radio);
  overflow:hidden;
  background:var(--humo-pale);
}
.cover img{ display:block; width:100%; height:auto; }

/* ---- Índice del blog: cabecera centrada + rejilla de tarjetas ---- */
.s--humo{ background:var(--humo-pale); }

.bhead{ padding-bottom:3rem; }
.bhead__t{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.75rem, 1.6rem + 4.6vw, 5rem);
  line-height:1.05;
  letter-spacing:.06em;      /* versalitas: necesitan aire, no lo contrario */
  text-transform:uppercase;
  color:var(--titulo);
  margin:0 0 1.5rem;
}
.bhead__lede{
  font-family:var(--serif);
  font-size:clamp(1.25rem, 1.05rem + .8vw, 1.625rem);
  line-height:1.5;
  color:var(--accion);
  margin:0 auto 2rem;
  max-width:32ch;
}
.bhead .prose{ max-width:54ch; }
.bhead__coda{ font-family:var(--serif); font-style:italic; color:var(--tinta-suave); }

.tarjetas{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:3rem 2.5rem;
}
.tarjeta{ display:flex; flex-direction:column; text-decoration:none; }
.tarjeta__img{
  display:block;
  border-radius:var(--radio);
  overflow:hidden;
  background:var(--humo);
  margin-bottom:1.5rem;
}
.tarjeta__img img{
  display:block; width:100%; height:auto;
  transition:transform 600ms ease;
}
.tarjeta:hover .tarjeta__img img{ transform:scale(1.03); }
.tarjeta__cat{
  display:block;
  font-family:var(--sans);
  font-size:.6875rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--oro-texto);
  margin-bottom:.75rem;
}
.tarjeta__t{
  display:block;
  font-family:var(--serif);
  font-weight:400;
  font-size:1.5rem;          /* 24px — Instrument Serif aguanta */
  line-height:1.2;
  letter-spacing:-.015em;
  color:var(--accion);
  margin-bottom:.75rem;
  transition:color var(--t);
}
.tarjeta:hover .tarjeta__t{ color:var(--accion-alt); }
.tarjeta__d{
  display:block;
  font-family:var(--sans);
  font-size:.9375rem;
  line-height:1.6;
  color:var(--tinta-suave);
}

.posts{ display:grid; gap:0; margin-top:3.5rem; border-top:1px solid var(--linea-tenue); }
.post{
  display:grid;
  grid-template-columns:auto auto 1fr auto;   /* nº · miniatura · texto · flecha */
  gap:2.5rem;
  align-items:start;
  padding:2.75rem 0;
  border-bottom:1px solid var(--linea-tenue);
  text-decoration:none;
  transition:padding-inline var(--t);
}
.post:hover{ padding-inline:.75rem; }
.post:hover .post__t{ color:var(--oro-texto); }

.post__img{
  width:11rem;
  border-radius:var(--radio);
  overflow:hidden;
  background:var(--humo-pale);
  /* Un pelín de gris en reposo: la foto acompaña, no compite con el titular.
     Al pasar el cursor recupera el color. */
  filter:saturate(.85);
  transition:filter var(--t);
}
.post:hover .post__img{ filter:saturate(1); }
.post__img img{ display:block; width:100%; height:auto; }
.post__n{
  font-family:var(--sans);
  font-size:.8125rem; font-weight:600;
  letter-spacing:.1em;
  color:var(--oro-texto);
  min-width:1.5rem;
}
.post__cat{
  display:block;
  font-family:var(--sans);
  font-size:.6875rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--oro-texto);
  margin:0 0 .75rem;
}
.post__t{
  display:block;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
  letter-spacing:-.022em;
  color:var(--titulo);
  line-height:1.1;
  margin:0 0 .75rem;
  transition:color var(--t);
}
.post__d{ display:block; color:var(--tinta-suave); font-size:1rem; margin:0; max-width:58ch; }
.post__go{ color:var(--oro-texto); font-size:1.25rem; align-self:center; }

/* Artículo */
.article{ padding-block:var(--paso); }
.article__meta{
  display:flex; flex-wrap:wrap; gap:.5rem 1.25rem;
  font-family:var(--sans);
  font-size:.6875rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--oro-claro);
  margin-top:2rem;
}
.article__body{ font-size:1.25rem; }        /* 20px */
.article__body > p{ color:var(--tinta-suave); margin-bottom:1.5em; line-height:1.65; }
.article__body h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2rem, 1.6rem + 1.4vw, 2.5rem);
  letter-spacing:-.022em;
  color:var(--titulo);
  line-height:1.15;
  margin:3.5rem 0 1.25rem;
}
.article__body ul{ padding-left:0; list-style:none; margin:2rem 0; display:grid; gap:.85rem; }
.article__body ul li{ position:relative; padding-left:1.85rem; color:var(--tinta-suave); }
.article__body ul li::before{
  content:""; position:absolute; left:0; top:.66em;
  width:.7rem; height:1px; background:var(--oro);
}
.article__cta{
  margin-top:4rem; padding-top:3rem;
  border-top:1px solid var(--oro);
}
.article__nav{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  margin-top:3.5rem; padding-top:2.5rem;
  border-top:1px solid var(--linea-tenue);
  font-size:.875rem;
}

/* ---------------- Documento legal ---------------- */
.legal{ padding-block:var(--paso); }
/* Índice de página. Lo comparten las legales y las preguntas frecuentes. */
.legal__toc, .toc{
  background:var(--humo-pale);
  border-radius:6px;
  padding:2rem;
  margin-bottom:3.5rem;
}
.toc{ margin-top:3.5rem; }
.legal__toc h2, .toc__h{
  font-family:var(--sans);
  font-size:.6875rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--oro-texto);
  margin:0 0 1.25rem;
}
.legal__toc ol, .toc ol{ margin:0; padding-left:1.25rem; columns:2; column-gap:2rem; }
.legal__toc li, .toc li{ margin-bottom:.5rem; break-inside:avoid; }
.legal__toc a, .toc a{ color:var(--accion); text-decoration:none; font-size:1rem; }
.legal__toc a:hover, .toc a:hover{ color:var(--accion-alt); text-decoration:underline; }

.legal__body h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:2rem;
  letter-spacing:-.02em;
  color:var(--titulo);
  margin:3.5rem 0 1.25rem;
  padding-top:2rem;
  border-top:1px solid var(--linea-tenue);
  line-height:1.15;
}
.legal__body h3{
  font-family:var(--sans);
  font-size:1rem; font-weight:700;
  color:var(--titulo);
  margin:2.5rem 0 .75rem;
}
.legal__body p, .legal__body li{ color:var(--tinta-suave); font-size:1.125rem; }
.legal__body ul{ padding-left:0; list-style:none; margin:1.5rem 0; display:grid; gap:.7rem; }
.legal__body ul li{ position:relative; padding-left:1.6rem; }
.legal__body ul li::before{
  content:""; position:absolute; left:0; top:.7em;
  width:.55rem; height:1px; background:var(--oro);
}
.legal__updated{
  font-family:var(--sans);
  font-size:.6875rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--oro-claro);
  margin-top:2rem;
}

/* ---------------- Formularios ---------------- */
.form{ margin-top:3rem; }
.field{ margin-bottom:1.75rem; }

/* Honeypot anti-robots: fuera de la pantalla, nunca visible ni tabulable.
   No uso display:none porque algunos bots saltan lo que está oculto así. */
.hp{
  position:absolute !important;
  left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.field__label{
  display:block;
  font-family:var(--sans);
  font-size:.6875rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--titulo);
  margin-bottom:.6rem;
}
.field__opt{ color:var(--tinta-suave); font-weight:500; letter-spacing:.06em; text-transform:none; }
.field__hint{ font-size:.875rem; color:var(--tinta-suave); margin:.4rem 0 0; }

.input, .select, .textarea{
  width:100%;
  padding:1rem 1.15rem;
  background:var(--blanco);
  border:1px solid var(--linea);
  border-radius:6px;
  color:var(--tinta);
  font-family:var(--sans);
  font-size:1.0625rem;
  transition:border-color var(--t), box-shadow var(--t);
}
.input::placeholder, .textarea::placeholder{ color:#8E8189; }
.input:focus, .select:focus, .textarea:focus{
  outline:none;
  border-color:var(--oro);
  box-shadow:0 0 0 3px rgba(212,171,98,.25);
}
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"]{ border-color:#A6362F; }
.textarea{ min-height:10rem; resize:vertical; }
.select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23AE8342' stroke-width='1.2' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1.15rem center;
  background-size:12px;
  padding-right:2.75rem;
}

.radios{ display:grid; gap:.7rem; }
.radio, .check{
  display:flex; align-items:flex-start; gap:.85rem;
  font-family:var(--sans);
  font-size:1rem; color:var(--tinta-suave);
  cursor:pointer;
}
.radio input, .check input{
  margin:.35rem 0 0; flex:none;
  width:1.05rem; height:1.05rem;
  accent-color:var(--accion);
}
.check + .check{ margin-top:1rem; }
.checks{ margin:2.5rem 0; display:grid; gap:1.1rem; }
.check a{ color:var(--accion); }

.field__error{
  display:block;
  font-family:var(--sans);
  font-size:.875rem;
  color:#A6362F;
  margin-top:.45rem;
  min-height:1.1em;
}

.form__msg{
  margin-top:1.75rem;
  padding:1.4rem 1.5rem;
  border-radius:6px;
  border-left:2px solid var(--oro);
  background:var(--humo-pale);
  font-family:var(--sans);
  font-size:1rem;
  color:var(--tinta-suave);
}
.form__msg:empty{ display:none; }
.form__msg--ok{ border-left-color:var(--accion); }

/* ---------------- Chequeo Express ---------------- */
.quiz__bar{
  display:flex; align-items:center; gap:1.25rem;
  margin-bottom:2.5rem;
}
.quiz__track{
  flex:1; height:2px; background:rgba(255,255,255,.2);
  border-radius:2px; overflow:hidden;
}
.quiz__fill{
  display:block; height:100%; width:25%;
  background:var(--oro);
  transition:width var(--t);
}
.quiz__count{
  font-family:var(--sans);
  font-size:.6875rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--oro-claro);
  flex:none;
}
.quiz__q{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  letter-spacing:-.02em;
  color:var(--blanco);
  line-height:1.15;
  margin:0 0 2.25rem;
}
.quiz .prose{ color:var(--tinta-clara); }
.quiz__opts{ display:grid; gap:1rem; }
.quiz__opt{
  display:flex; align-items:flex-start; gap:1.1rem;
  width:100%; text-align:left;
  padding:1.3rem 1.4rem;
  background:rgba(255,255,255,.06);
  border:1px solid var(--vidrio-borde);
  border-radius:6px;
  color:var(--tinta-clara);
  font-family:var(--sans); font-size:1.0625rem; line-height:1.5;
  cursor:pointer;
  transition:border-color var(--t), background var(--t);
}
.quiz__opt:hover{ border-color:var(--vidrio-borde-h); background:rgba(255,255,255,.12); }
.quiz__opt[aria-pressed="true"]{ border-color:var(--oro-claro); background:rgba(212,171,98,.18); }
.quiz__k{
  flex:none;
  width:1.85rem; height:1.85rem;
  display:grid; place-items:center;
  border:1px solid var(--linea-oro); border-radius:50%;
  font-family:var(--sans); font-size:.75rem; font-weight:700;
  color:var(--oro-claro);
}
.quiz__opt[aria-pressed="true"] .quiz__k{ background:var(--oro-claro); border-color:var(--oro-claro); color:#1F1608; }

.quiz__foot{
  display:flex; justify-content:space-between; align-items:center;
  gap:1rem; margin-top:2.5rem;
  padding-top:1.75rem; border-top:1px solid rgba(255,255,255,.16);
}
.quiz__back{
  background:none; border:none; cursor:pointer;
  font-family:var(--sans);
  font-size:.875rem; font-weight:600;
  letter-spacing:.06em;
  color:var(--tinta-tenue);
  padding:.5rem 0;
}
.quiz__back:hover{ color:var(--blanco); }
.quiz__back[hidden]{ display:none; }

.quiz .field__label{ color:var(--tinta-clara); }
.quiz .input{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.28); color:var(--blanco); }
.quiz .input::placeholder{ color:rgba(255,255,255,.5); }
.quiz .check{ color:var(--tinta-clara); }
.quiz .check a{ color:var(--oro-claro); }
.quiz .form__msg{ background:rgba(255,255,255,.08); color:var(--tinta-clara); }
.quiz .note{ background:rgba(255,255,255,.08); }
.quiz .note p{ color:var(--tinta-clara); }
.quiz .note__title{ color:var(--oro-claro); }

.quiz__res-k{
  font-family:var(--sans);
  font-size:.6875rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--oro-claro);
  margin:0 0 1rem;
}
.quiz__res-t{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2rem, 1.5rem + 1.8vw, 2.75rem);
  letter-spacing:-.022em;
  color:var(--blanco);
  line-height:1.1;
  margin:0 0 1.5rem;
}

/* ---------------- Pie ---------------- */
.foot{
  background:var(--negro-hondo);
  color:var(--tinta-clara);
  padding-block:clamp(4rem, 8vw, 6rem) 3rem;
}
.foot__grid{
  display:grid;
  grid-template-columns:1.6fr .9fr 1.1fr 1fr;
  gap:3rem;
}
.foot__logo{
  width:11rem;
  margin:0 0 1.25rem;
}
.foot__tag{ font-family:var(--sans); font-size:.875rem; color:var(--tinta-tenue); max-width:32ch; }
.foot__h{
  font-family:var(--sans);
  font-size:.6875rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--oro-claro);
  margin:0 0 1.25rem;
}
.foot__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.75rem; }
.foot__col a{
  font-family:var(--sans);
  color:var(--tinta-clara); font-size:1rem;
  text-decoration:none; transition:color var(--t);
}
.foot__col a:hover{ color:var(--oro-claro); }

.foot__legal{
  margin:4rem 0 0; padding-top:2.5rem;
  border-top:1px solid rgba(255,255,255,.16);
  font-family:var(--sans);
  font-size:.875rem; color:var(--tinta-tenue);
  max-width:88ch;
}
.foot__copy{ margin-top:1.25rem; font-family:var(--sans); font-size:.875rem; color:var(--tinta-tenue); }

/* ---------------- WhatsApp flotante ---------------- */
/* Botón flotante de WhatsApp — verde de la app y glifo blanco, como manda
   su marca. El glifo blanco sobre ese verde da 2:1, por debajo del 3:1 de
   la 1.4.11, pero es un logotipo y los logotipos están exentos: cambiarle
   el color le quitaría justo lo que lo hace reconocible.
   El borde oscuro sí es necesario: el verde sobre franja blanca se queda
   en 2:1 y sin borde el botón no tendría contorno. */
.wafloat{
  position:fixed; right:1.5rem; bottom:1.5rem; z-index:90;
  width:3.5rem; height:3.5rem;
  display:grid; place-items:center;
  background:var(--whatsapp);
  border:1px solid rgba(0,0,0,.22);
  border-radius:50%;
  box-shadow:0 12px 34px rgba(0,0,0,.34);
  transition:background var(--t);
}
.wafloat svg{ width:1.6rem; height:1.6rem; fill:var(--blanco); }
.wafloat:hover{ background:var(--whatsapp-alt); }

/* ---------------- Movimiento — sutil, sin rebotes ----------------
   El revelado usa `animation`, no `transition`: muchas tarjetas llevan
   .reveal, y una `transition` aquí pisaría la de 300ms del vidrio
   (esta regla va después en el archivo y ganaría). */
.reveal{ opacity:0; transform:translateY(12px); }
.reveal.is-in{ animation:rise 700ms ease forwards; }

.hero__title .r,
.hero__lede, .hero__coda, .hero__actions, .hero__micro{
  opacity:0;
  animation:rise 800ms ease forwards;
}
.hero__title .r:nth-child(1){ animation-delay:100ms; }
.hero__title .r:nth-child(2){ animation-delay:210ms; }
.hero__title .r:nth-child(3){ animation-delay:320ms; }
.hero__lede   { animation-delay:430ms; }
.hero__coda   { animation-delay:530ms; }
.hero__actions{ animation-delay:630ms; }
.hero__micro  { animation-delay:730ms; }
@keyframes rise{ to{ opacity:1; transform:none; } }

/* ---------------- Adaptación ---------------- */
@media (max-width:64rem){
  .nav__links, .nav__cta{ display:none; }
  .nav__toggle{ display:block; }
  .nav__mobile[data-open="true"]{ display:flex; }

  .split{ grid-template-columns:1fr; }
  .split--media-izq .split__text{ order:1; }
  .split--media-izq .split__media{ order:2; }

  .bleed{ padding-block:var(--paso); }
  .bleed .split__text{ padding-block:0; }
  .portrait img{ min-height:26rem; }

  .grid--3, .grid--4{ grid-template-columns:repeat(2,1fr); }
  .tarjetas{ grid-template-columns:repeat(2,1fr); }

  .grid--rules > *{ padding:2rem 1.75rem 2rem 0; }
  .grid--rules.grid--3 > *:not(:nth-child(3n)),
  .grid--rules.grid--4 > *:not(:nth-child(4n)){ border-right:none; }
  .grid--rules.grid--3 > *:not(:nth-child(3n+1)),
  .grid--rules.grid--4 > *:not(:nth-child(4n+1)){ padding-left:0; }
  .grid--rules.grid--3 > *:nth-child(odd),
  .grid--rules.grid--4 > *:nth-child(odd){ border-right:1px solid var(--linea-tenue); }
  .grid--rules.grid--3 > *:nth-child(even),
  .grid--rules.grid--4 > *:nth-child(even){ padding-left:1.75rem; }

  .foot__grid{ grid-template-columns:repeat(2,1fr); gap:3rem 2rem; }
  .foot__news{ grid-column:1 / -1; }

  .legal__toc ol, .toc ol{ columns:1; }
}

@media (max-width:44rem){
  :root{ --paso:clamp(3.5rem, 12vw, 5rem); }

  .grid--2, .grid--3, .grid--4{ grid-template-columns:1fr; }

  /* El padding de 40px deja 247px de contenido en un móvil de 375px.
     Aquí baja a 28px para que el texto respire. */
  .card, .ruta, .chan, .plan, .quiz, .ccard{ padding:1.75rem; }

  .grid--rules > *,
  .grid--rules.grid--2 > *:nth-child(odd),
  .grid--rules.grid--2 > *:nth-child(even),
  .grid--rules.grid--3 > *:nth-child(odd),
  .grid--rules.grid--3 > *:nth-child(even){
    border-right:none; padding:1.75rem 0;
  }

  .hero__body{ padding-block:4rem 2.5rem; }
  .hero__actions .btn,
  .actions .btn{ width:100%; }
  .hero__trust{ gap:.4rem 1.25rem; font-size:.625rem; }

  .h1, .h2, .lede, .prose{ max-width:none; }

  .course{ padding-left:3.25rem; }
  .course::before{ left:.9rem; }
  .course__n{ left:-3.25rem; width:1.8rem; height:1.8rem; font-size:.75rem; }

  .compare{ display:none; }
  .compare__cards{ display:block; margin-top:3rem; }

  /* En una columna la miniatura pasa a ser una banda sobre el titular. */
  .post{ grid-template-columns:1fr; gap:.35rem; padding:2rem 0; }
  .post:hover{ padding-inline:0; }
  .post__go, .post__n{ display:none; }
  .post__img{ width:100%; margin-bottom:1.25rem; }

  .cover{ margin-bottom:2.5rem; }

  .tarjetas{ grid-template-columns:1fr; gap:3rem; }

  .foot__grid{ grid-template-columns:1fr; }

  .pull{ margin-inline:0; }
  .wafloat{ right:1rem; bottom:1rem; width:3.1rem; height:3.1rem; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hero__title .r, .hero__lede, .hero__coda, .hero__actions, .hero__micro{ opacity:1; transform:none; }
  .course::before{ transform:scaleY(1); }
  .post:hover{ padding-inline:0; }
}

@media print{
  .nav, .wafloat, .hero__media, .foot__news{ display:none; }
  body{ background:#fff; }
}

/* ===================================================================
   COMPONENTE: Grupos de pestañas de servicios (Bitácora Vital y
   Acompañamiento Vital) — servicios.html
   =================================================================== */
.grupo{ margin-bottom:5rem; }

.grupo__head{ display:flex; align-items:center; gap:3rem; margin-bottom:2.4rem; }
.grupo__texto{ flex:1 1 55%; }
.grupo__h{ margin-bottom:.5rem; }
.grupo__sub{
  font-family:var(--sans); font-size:.95rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--oro-texto); margin:0 0 1rem;
}
.grupo__lede{ color:var(--tinta-suave); margin:0; }
.grupo__foto{ flex:1 1 45%; }
/* Cuadro 1:1 vía truco de padding-top, no depende de aspect-ratio (soporte
   parejo en cualquier navegador, incluso los más viejos). */
.grupo__foto-ratio{
  display:block; position:relative; width:100%; padding-top:100%;
  background:var(--papel); border-radius:14px; overflow:hidden;
  box-shadow:0 20px 40px rgba(18,19,22,.16);
}
.grupo__foto-ratio img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center;
}
@media (max-width:820px){
  .grupo__head{ flex-direction:column; gap:1.6rem; }
  .grupo__foto{ width:100%; }
}

/* ===================================================================
   COMPONENTE: Sección partida — foto a sangre + panel de texto
   (servicios.html: "Qué incluye" / "Cómo funcionan las sesiones")
   =================================================================== */
.partido{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
  min-height:clamp(30rem, 44vw, 38rem);
}
.partido__foto{ position:relative; margin:0; overflow:hidden; background:var(--humo); }
.partido__foto img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
}
.partido__panel{ display:flex; align-items:center; padding:var(--paso) var(--gutter); }
.partido__panel-inner{ max-width:34rem; margin-inline:auto; width:100%; }
.partido__lista{
  list-style:none; margin:2rem 0 2.25rem; padding:0;
  display:grid; gap:1.15rem;
}
.partido__item{ display:flex; align-items:center; gap:1rem; }
.partido__marca{
  flex:none; width:2.75rem; height:2.75rem; border-radius:10px;
  background:var(--papel); color:var(--oro-texto);
  display:flex; align-items:center; justify-content:center;
  font-size:1.05rem; font-weight:700;
}
.partido__texto{
  font-family:var(--sans); font-weight:600; font-size:.9375rem;
  line-height:1.5; color:var(--tinta);
}
.partido__cta{
  display:inline-flex; align-items:center; gap:.75rem;
  font-family:var(--sans); font-weight:700; font-size:.8125rem;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--accion); text-decoration:none;
}
.partido__flecha{
  display:inline-flex; align-items:center; justify-content:center;
  flex:none; width:1.9rem; height:1.9rem; border-radius:50%;
  background:var(--oro); color:var(--negro); font-size:.85rem; line-height:1;
  transition:background var(--t), transform var(--t);
}
.partido__cta:hover .partido__flecha{ background:var(--oro-claro); transform:translateX(3px); }

.partido--invertida{ grid-template-columns:1fr 1fr; }
.partido--invertida .partido__foto{ order:2; }
.partido--invertida .partido__panel{ order:1; }

@media (max-width:56rem){
  .partido{ grid-template-columns:1fr; min-height:0; }
  .partido__foto{ height:20rem; order:initial; }
  .partido__panel{ padding:2.75rem var(--gutter); order:initial; }
}

/* Barra de pestañas: cuadrada, en línea continua. Inactivas en blanco,
   activa en azul con letras doradas y un borde de luz para destacar. */
.tabbar{
  list-style:none; margin:0; padding:0; display:flex; width:100%;
  border:1px solid rgba(18,19,22,.16); border-bottom:none; border-radius:2px 2px 0 0;
  overflow:hidden;
}
.tabbar li{ flex:1 1 0; position:relative; }
.tabbar li + li{ border-left:1px solid rgba(18,19,22,.16); }
.tabbar__btn{
  width:100%; height:100%; background:var(--blanco); border:none; cursor:pointer;
  font-family:var(--sans); font-size:.82rem; font-weight:700; letter-spacing:.01em;
  color:var(--tinta-suave); padding:1.05rem .8rem; border-radius:0; text-align:center;
  position:relative; z-index:1; transition:background .18s ease, color .18s ease, box-shadow .18s ease;
}
.tabbar__btn:hover{ background:rgba(199,154,85,.1); color:var(--titulo); }
.tabbar__btn.is-active{
  background:var(--azul); color:var(--oro-brillante);
  box-shadow:inset 0 0 0 1px var(--oro), 0 0 18px 2px rgba(235,200,115,.55);
}
@media (max-width:640px){
  .tabbar{ flex-wrap:wrap; border-radius:2px; }
  .tabbar li{ flex:1 1 50%; }
}

/* Panel: base blanca, ancho completo. */
.panel{ display:none; }
.panel.is-active{
  display:block; background:var(--blanco); border:1px solid rgba(18,19,22,.16);
  border-radius:0 0 10px 10px; padding:2.4rem clamp(1.4rem,4vw,3rem);
}
.panel__t{ margin:0 0 .6rem; }
.panel__p{ color:var(--tinta-suave); margin-bottom:1.8rem; max-width:70ch; }
.panel__cols{ display:grid; grid-template-columns:1fr 1fr; gap:2.4rem; margin-bottom:1.8rem; }
.panel__cols h4{ margin-bottom:.6rem; }
@media (max-width:640px){ .panel__cols{ grid-template-columns:1fr; } }
.panel__note{
  font-size:.92rem; color:var(--tinta-suave); background:var(--papel);
  border:1px solid rgba(18,19,22,.12); border-radius:8px; padding:.9rem 1.1rem; margin-bottom:1.8rem;
}
.panel__note strong{ color:var(--titulo); }
.panel__foot{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.2rem;
  border-top:1px solid rgba(18,19,22,.1); padding-top:1.6rem;
}
.panel__precio{ margin:0; }
.panel__foot .actions{ margin:0; }