/* ==========================================================================
   CYQ — Sistema de diseño del Club de Yates de Quintero
   Registro visual: club náutico clásico europeo.
   Azul marino profundo + latón, ángulos rectos, filetes finos, serif y
   versalitas espaciadas. Sobriedad antes que efectismo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Azules — del portón del club y del escudo */
  --nv-950:#08101f;
  --nv-900:#0d1830;
  --nv-800:#142445;
  --nv-700:#1c3160;
  --nv-600:#2a4680;
  --nv-050:#eceff5;

  /* Latón: el acento del club. Se usa poco y siempre en piezas pequeñas.
     --oro        filetes, bordes e iconos (grafismo: basta 3:1)
     --oro-texto  versión oscurecida para TEXTO sobre fondo claro (4,9:1)
     --oro-claro  para texto sobre fondo marino (8,4:1) */
  --oro:#a8863a;
  --oro-texto:#8a6d28;
  --oro-claro:#c8a95e;
  --oro-tenue:#e8dfc6;

  /* Rojo del escudo. Reservado, casi nunca en interfaz. */
  --rojo:#9e1f27;

  --tinta:#12172a;
  --gris:#565d70;
  --gris-tenue:#6b7386;
  --linea:#d9dde6;
  --linea-tenue:#e9ecf2;
  --hueso:#f6f5f1;
  --blanco:#ffffff;

  /* Tipografía */
  --font-display:Georgia,"Iowan Old Style","Times New Roman",serif;
  --font-ui:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* Espaciado (base 4px) */
  --s-1:.25rem; --s-2:.5rem;  --s-3:.75rem; --s-4:1rem;
  --s-5:1.5rem; --s-6:2rem;   --s-7:3rem;   --s-8:4rem;  --s-9:6rem;

  /* Geometría: ángulos rectos. El radio es casi nulo a propósito. */
  --r-sm:2px; --r-md:2px; --r-lg:3px;

  /* Sombras muy contenidas */
  --sh-1:0 1px 2px rgba(13,24,48,.05);
  --sh-2:0 2px 4px rgba(13,24,48,.06), 0 8px 24px rgba(13,24,48,.07);
  --sh-3:0 4px 10px rgba(13,24,48,.10), 0 20px 48px rgba(13,24,48,.14);

  /* Layout */
  --ancho:1180px;
  --ancho-texto:68ch;
  --gutter:clamp(1.25rem,4vw,3rem);
  --header-h:78px;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,ul,ol,dl,dd,blockquote{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,svg,iframe{display:block;max-width:100%}
img{height:auto}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit}
table{border-collapse:collapse;width:100%}
summary::-webkit-details-marker{display:none}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1rem)}

body{
  font-family:var(--font-ui);
  font-size:1.0625rem;
  line-height:1.7;
  color:var(--tinta);
  background:var(--blanco);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

/* --------------------------------------------------------------------------
   3. UTILIDADES
   -------------------------------------------------------------------------- */
.container{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:var(--gutter)}

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

.skip-link{
  position:absolute;top:-100%;left:var(--s-4);z-index:200;
  padding:var(--s-3) var(--s-5);
  background:var(--nv-800);color:#fff;font-weight:600;text-decoration:none;
  letter-spacing:.04em;
}
.skip-link:focus{top:0}

:where(a,button,input,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--oro);
  outline-offset:3px;
}

/* Antetítulo: versalitas espaciadas con filete de latón */
.eyebrow{
  display:flex;align-items:center;gap:.85em;
  font-size:.7rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--oro-texto);margin-bottom:var(--s-4);
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--oro-tenue);max-width:5rem}

h1,h2,h3{font-family:var(--font-display);font-weight:400;line-height:1.18;letter-spacing:-.01em}
h2{font-size:clamp(1.7rem,1.2rem + 1.8vw,2.4rem);color:var(--nv-900)}
h3{font-size:1.18rem;line-height:1.35;color:var(--nv-800)}

.seccion{padding-block:clamp(4rem,8vw,7rem)}
.seccion--corta{padding-block:clamp(2.75rem,5vw,4.5rem)}
.seccion--hueso{background:var(--hueso)}
.seccion--linea{border-top:1px solid var(--linea-tenue)}
.seccion__head{max-width:60ch;margin-bottom:clamp(2.25rem,4vw,3.25rem)}
.seccion__head p{color:var(--gris);margin-top:var(--s-4)}

/* Botones: rectangulares, versalitas, filete fino */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.65em;
  padding:.95em 2em;border-radius:var(--r-sm);
  font-size:.78rem;font-weight:700;line-height:1.2;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  border:1px solid transparent;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.btn--primary{background:var(--nv-800);color:#fff;border-color:var(--nv-800)}
.btn--primary:hover{background:var(--nv-950);border-color:var(--nv-950)}
.btn--oro{background:transparent;color:var(--oro-texto);border-color:var(--oro)}
.btn--oro:hover{background:var(--oro);color:#fff}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn--ghost:hover{background:#fff;color:var(--nv-900);border-color:#fff}
.btn--linea{background:#fff;color:var(--nv-800);border-color:var(--linea)}
.btn--linea:hover{border-color:var(--nv-800)}
.btn + .btn{margin-left:var(--s-3)}

/* --------------------------------------------------------------------------
   4. CABECERA + NAVEGACIÓN
   -------------------------------------------------------------------------- */
.header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  height:var(--header-h);
  display:flex;align-items:center;
  background:transparent;
  transition:background-color .3s ease,box-shadow .3s ease,backdrop-filter .3s ease;
}
.header.is-solid{
  background:rgba(8,16,31,.95);
  backdrop-filter:saturate(140%) blur(10px);
  box-shadow:0 1px 0 rgba(200,169,94,.22);
}
.header__inner{
  width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:var(--gutter);
  display:flex;align-items:center;gap:var(--s-5);
}

.marca{display:flex;align-items:center;gap:.85rem;text-decoration:none;color:#fff;flex:0 0 auto}
.marca img{width:36px;height:48px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.marca__txt{display:flex;flex-direction:column;line-height:1.15}
.marca__txt b{font-family:var(--font-display);font-size:1rem;font-weight:400;letter-spacing:.03em}
.marca__txt span{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--oro-claro)}

.nav{margin-left:auto;display:flex;align-items:center}
.nav__list{display:flex;align-items:center;gap:0}
.nav__item{position:relative}
.nav__link{
  display:flex;align-items:center;gap:.45em;
  padding:.65rem .85rem;
  color:rgba(255,255,255,.82);
  font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:color .2s ease,border-color .2s ease;
}
.nav__link:hover{color:#fff;border-bottom-color:rgba(200,169,94,.55)}
.nav__link svg{width:9px;height:9px;opacity:.6;transition:transform .2s ease}
.nav__link[aria-current="page"],
.nav__link.is-active{color:#fff;border-bottom-color:var(--oro)}

.nav__sub{
  position:absolute;top:calc(100% + .5rem);left:0;min-width:225px;
  padding:var(--s-3) 0;border-radius:var(--r-sm);
  background:#fff;box-shadow:var(--sh-3);
  border-top:2px solid var(--oro);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.nav__sub a{
  display:block;padding:.6rem 1.35rem;
  color:var(--nv-800);font-size:.9rem;text-decoration:none;
  transition:background-color .15s ease,color .15s ease;
}
.nav__sub a:hover{background:var(--nv-050);color:var(--nv-900)}
.nav__sub a[aria-current="page"]{color:var(--oro);font-weight:650}

/* Acceso socios: filete de latón, discreto */
.nav__cta{
  display:inline-flex;align-items:center;gap:.6em;
  margin-left:var(--s-4);padding:.6rem 1.1rem;border-radius:var(--r-sm);
  border:1px solid rgba(200,169,94,.6);
  color:var(--oro-claro);font-size:.68rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.nav__cta:hover{background:var(--oro);color:#fff;border-color:var(--oro)}
.nav__cta svg{width:12px;height:14px;flex:0 0 auto}

.nav-toggle{
  display:none;margin-left:auto;width:44px;height:44px;
  align-items:center;justify-content:center;color:#fff;
}
.nav-toggle span{display:block;width:22px;height:1.5px;background:currentColor;position:relative;transition:background-color .2s}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;width:22px;height:1.5px;background:currentColor;transition:transform .22s ease,top .22s ease;
}
.nav-toggle span::before{top:-7px}
.nav-toggle span::after{top:7px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

@media (min-width:1025px){
  .nav__item--sub:hover > .nav__sub,
  .nav__item--sub:focus-within > .nav__sub,
  .nav__toggle[aria-expanded="true"] + .nav__sub{
    opacity:1;visibility:visible;transform:translateY(0);
  }
  .nav__item--sub:hover .nav__link svg{transform:rotate(180deg)}
}

@media (max-width:1024px){
  .nav-toggle{display:flex}
  .nav{
    position:fixed;top:var(--header-h);left:0;right:0;
    max-height:calc(100dvh - var(--header-h));overflow-y:auto;
    display:block;
    margin:0;padding:var(--s-5) var(--gutter) var(--s-8);
    background:var(--nv-950);
    border-top:1px solid rgba(200,169,94,.28);
    transform:translateY(-8px);opacity:0;visibility:hidden;
    transition:opacity .22s ease,transform .22s ease,visibility .22s;
  }
  .nav.is-open{opacity:1;visibility:visible;transform:translateY(0)}
  .nav__list{flex-direction:column;align-items:stretch}
  .nav__link{
    width:100%;justify-content:space-between;
    padding:1rem .25rem;font-size:.82rem;
    border-bottom:1px solid rgba(255,255,255,.1);
  }
  .nav__link[aria-current="page"],.nav__link.is-active{
    border-bottom-color:rgba(255,255,255,.1);
    box-shadow:inset 3px 0 0 var(--oro);padding-left:.85rem;
  }
  .nav__sub{
    position:static;min-width:0;padding:var(--s-2) 0 var(--s-4) var(--s-5);
    background:transparent;box-shadow:none;border-top:0;
    opacity:1;visibility:visible;transform:none;transition:none;
  }
  .nav__toggle[aria-expanded="false"] + .nav__sub{display:none}
  .nav__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
  .nav__sub a{color:rgba(255,255,255,.72);padding:.6rem .25rem;font-size:.95rem}
  .nav__sub a:hover,.nav__sub a[aria-current="page"]{background:transparent;color:var(--oro-claro)}
  .nav__cta{display:flex;margin:var(--s-6) 0 0;justify-content:center;padding:1rem;font-size:.75rem}
}

/* --------------------------------------------------------------------------
   5. HERO DE PORTADA
   -------------------------------------------------------------------------- */
.hero{
  position:relative;isolation:isolate;
  min-height:clamp(560px,90svh,880px);
  display:grid;align-items:end;
  padding-top:calc(var(--header-h) + var(--s-6));
  padding-bottom:clamp(3.5rem,8vw,6rem);
  background:var(--nv-950);
  overflow:hidden;
}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__slide{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  opacity:0;transition:opacity 1.4s ease-in-out;
}
.hero__slide.is-active{opacity:1}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(8,16,31,.72) 0%,rgba(8,16,31,.24) 30%,rgba(8,16,31,.20) 48%,rgba(8,16,31,.90) 100%),
    linear-gradient(90deg,rgba(8,16,31,.62) 0%,rgba(8,16,31,0) 65%);
}
.hero__inner{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:var(--gutter);color:#fff}
.hero__content{max-width:42rem}

/* Filete de latón sobre el título */
.hero__badge{
  display:inline-flex;align-items:center;gap:.9em;
  margin-bottom:var(--s-5);
  font-size:.68rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
  color:var(--oro-claro);
}
.hero__badge::before{content:"";width:2.5rem;height:1px;background:var(--oro)}

.hero h1{
  font-size:clamp(2.4rem,1.4rem + 4vw,4.4rem);
  font-weight:400;line-height:1.08;letter-spacing:-.015em;
  text-wrap:balance;
  text-shadow:0 2px 30px rgba(0,0,0,.4);
}
.hero__lead{
  margin-top:var(--s-5);max-width:44ch;
  font-size:clamp(1.02rem,.98rem + .35vw,1.18rem);
  line-height:1.75;color:rgba(255,255,255,.88);
  text-shadow:0 1px 14px rgba(0,0,0,.5);
}
.hero__acciones{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-7)}
.hero__acciones .btn + .btn{margin-left:0}
.hero__live{
  display:inline-flex;align-items:center;gap:.6em;margin-top:var(--s-6);
  color:rgba(255,255,255,.78);font-size:.72rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
}
.hero__live:hover{color:#fff}
.hero__live i{
  width:7px;height:7px;border-radius:50%;background:var(--rojo);flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(158,31,39,.7);
  animation:latido 2.4s ease-in-out infinite;
}
@keyframes latido{0%,100%{opacity:1}50%{opacity:.35}}

.hero__dots{
  position:absolute;right:var(--gutter);bottom:clamp(2rem,5vw,3rem);
  display:flex;gap:.6rem;z-index:2;
}
.hero__dots button{
  width:30px;height:2px;
  background:rgba(255,255,255,.3);transition:background-color .25s ease;
}
.hero__dots button[aria-current="true"]{background:var(--oro-claro)}
.hero__dots button:hover{background:rgba(255,255,255,.65)}

/* --------------------------------------------------------------------------
   6. CABECERA DE PÁGINA INTERIOR
   -------------------------------------------------------------------------- */
.page-hero{
  position:relative;isolation:isolate;color:#fff;
  padding-top:calc(var(--header-h) + clamp(3rem,6vw,5rem));
  padding-bottom:clamp(3rem,6vw,5rem);
  background:var(--nv-900);
  overflow:hidden;
  border-bottom:2px solid var(--oro);
}
.page-hero--foto::after{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:var(--foto);background-size:cover;background-position:center;
}
.page-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(8,16,31,.96) 0%,rgba(20,36,69,.90) 55%,rgba(20,36,69,.74) 100%);
}
.page-hero .eyebrow{color:var(--oro-claro)}
.page-hero .eyebrow::after{background:rgba(200,169,94,.4)}
.page-hero h1{font-size:clamp(2.1rem,1.5rem + 2.6vw,3.4rem);font-weight:400;text-wrap:balance}
.page-hero__lead{
  margin-top:var(--s-5);max-width:56ch;
  font-size:clamp(1rem,.98rem + .28vw,1.15rem);color:rgba(255,255,255,.84);
}

.migas{margin-bottom:var(--s-5)}
.migas ol{display:flex;flex-wrap:wrap;align-items:center;gap:.55em;list-style:none;padding:0;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}
.migas li{display:flex;align-items:center;gap:.55em;color:rgba(255,255,255,.55)}
.migas li+li::before{content:"—";color:rgba(255,255,255,.3)}
.migas a{color:rgba(255,255,255,.75);text-decoration:none}
.migas a:hover{color:var(--oro-claro)}
.migas [aria-current="page"]{color:#fff}

/* --------------------------------------------------------------------------
   7. TEXTO CORRIDO
   -------------------------------------------------------------------------- */
.prose{max-width:var(--ancho-texto)}
.prose > * + *{margin-top:var(--s-5)}
.prose h2{
  margin-top:var(--s-8);padding-top:var(--s-5);
  border-top:1px solid var(--linea-tenue);
  font-size:clamp(1.35rem,1.15rem + .9vw,1.75rem);
}
.prose h3{margin-top:var(--s-6);font-size:1.12rem;
  font-family:var(--font-ui);font-weight:700;letter-spacing:.02em;color:var(--nv-800)}
.prose h2:first-child,.prose h3:first-child{margin-top:0;border-top:0;padding-top:0}
.prose p{color:var(--tinta)}
.prose strong{color:var(--nv-900);font-weight:650}
/* :not(.btn) es imprescindible: un botón dentro de .prose debe conservar sus
   propios colores. Sin esto, .prose a (0,1,1) le gana a .btn--primary (0,1,0)
   y pinta el texto de azul marino sobre un fondo azul marino (1,2:1). */
.prose a:not(.btn){color:var(--nv-700);text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px;text-decoration-color:var(--oro-claro)}
.prose a:not(.btn):hover{color:var(--oro-texto)}
.prose ul,.prose ol{color:var(--tinta)}
.prose li+li{margin-top:.55em}
.prose ul{list-style:none;padding-left:0}
.prose ul > li{position:relative;padding-left:1.6em}
.prose ul > li::before{
  content:"";position:absolute;left:.15em;top:.78em;
  width:9px;height:1px;background:var(--oro);
}
.prose ol{list-style:decimal;padding-left:1.4em}
.prose ol > li::marker{color:var(--oro-texto);font-weight:700}
.prose blockquote{
  border-left:2px solid var(--oro);padding-left:var(--s-5);
  font-family:var(--font-display);font-size:1.15rem;color:var(--nv-800);
}

/* Bloque destacado */
.destacado{
  padding:var(--s-5) var(--s-6);
  background:var(--hueso);border-left:2px solid var(--oro);
}
.destacado p{margin:0}
.destacado > * + *{margin-top:var(--s-3)}

/* Aviso */
.aviso{
  display:flex;gap:var(--s-5);align-items:flex-start;
  padding:var(--s-6);
  background:var(--hueso);border:1px solid var(--linea);
  max-width:60ch;
}
.aviso svg{width:26px;height:26px;flex:0 0 auto;color:var(--oro);margin-top:.25rem}
.aviso h2{font-size:1.3rem;margin-bottom:var(--s-3)}
.aviso p{color:var(--gris);margin:0}

/* --------------------------------------------------------------------------
   8. LAYOUTS
   -------------------------------------------------------------------------- */
.split{display:grid;gap:clamp(2.5rem,5vw,4rem);grid-template-columns:1fr;align-items:start}
@media (min-width:960px){
  .split{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
  .split--igual{grid-template-columns:1fr 1fr}
  .aside-sticky{position:sticky;top:calc(var(--header-h) + var(--s-5))}
}

.figura{margin:0}
.figura img{width:100%;border:1px solid var(--linea)}
.figura figcaption{
  margin-top:var(--s-3);font-size:.82rem;color:var(--gris-tenue);
  padding-left:var(--s-3);border-left:2px solid var(--oro-tenue);
}

/* --------------------------------------------------------------------------
   9. TARJETAS
   -------------------------------------------------------------------------- */
/* Filetes por celda y no gap sobre fondo: así una fila incompleta
   no deja huecos grises al final de la grilla. */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));
  border-top:1px solid var(--linea);border-left:1px solid var(--linea);
}
.card{
  display:flex;flex-direction:column;
  padding:2.25rem 2rem 1.75rem;
  background:#fff;text-decoration:none;color:inherit;
  border-right:1px solid var(--linea);border-bottom:1px solid var(--linea);
  transition:background-color .25s ease;
}
.card:hover{background:var(--hueso)}
.card__icon{color:var(--nv-700);margin-bottom:var(--s-5);transition:color .25s ease}
.card__icon svg{width:32px;height:32px}
.card:hover .card__icon{color:var(--oro)}
.card h3{font-family:var(--font-display);font-weight:400;font-size:1.3rem;color:var(--nv-900);margin-bottom:var(--s-3)}
.card p{color:var(--gris);font-size:.94rem;margin:0 0 var(--s-6);line-height:1.65}
.card__mas{
  margin-top:auto;
  color:var(--nv-700);font-size:.68rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  display:flex;align-items:center;gap:.6em;
}
.card:hover .card__mas{color:var(--oro-texto)}
.card__mas .flecha{transition:transform .25s ease}
.card:hover .card__mas .flecha{transform:translateX(5px)}

/* --------------------------------------------------------------------------
   10. PERSONAS / COMISIONES / DATOS
   -------------------------------------------------------------------------- */
.personas{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  border-top:1px solid var(--linea);border-left:1px solid var(--linea);
}
.persona{padding:var(--s-5) var(--s-5) var(--s-6);background:#fff;
  border-right:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.persona--destacada{background:var(--nv-800)}
.persona b{display:block;font-family:var(--font-display);font-weight:400;font-size:1.15rem;line-height:1.3;color:var(--nv-900)}
.persona--destacada b{color:#fff}
.persona span{
  display:block;margin-top:var(--s-3);
  font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--oro-texto);
}
.persona--destacada span{color:var(--oro-claro)}
/* Correo institucional del cargo. break-word: son direcciones largas y la
   tarjeta puede quedar angosta en una grilla de varias columnas. */
.persona a{
  display:inline-block;margin-top:var(--s-4);
  font-size:.86rem;color:var(--nv-700);text-decoration:none;
  border-bottom:1px solid var(--oro-tenue);
  word-break:break-word;transition:border-color .15s ease;
}
.persona a:hover{border-bottom-color:var(--oro)}
.persona--destacada a{color:#fff;border-bottom-color:rgba(200,169,94,.45)}
.persona--destacada a:hover{border-bottom-color:var(--oro-claro)}

.comisiones{
  display:grid;gap:var(--s-5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));
}
.comision{padding:var(--s-5) var(--s-6) var(--s-6);background:#fff;border:1px solid var(--linea);border-top:2px solid var(--oro)}
/* --gris y no --gris-tenue: este bloque vive sobre --hueso, que baja el
   contraste lo justo para no alcanzar 4,5:1 con el tono más claro. */
.comision h3{
  font-family:var(--font-ui);font-size:.66rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gris);margin-bottom:var(--s-4);
}
.comision ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:.5rem}
.comision li{font-size:.98rem;color:var(--nv-900)}

/* --------------------------------------------------------------------------
   11. GALERÍA
   -------------------------------------------------------------------------- */
.galeria{
  display:grid;gap:clamp(1.5rem,3vw,2.25rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));
}
.album{
  display:flex;flex-direction:column;
  background:#fff;text-decoration:none;color:inherit;
  transition:transform .3s ease;
}
.album__img{aspect-ratio:4/3;overflow:hidden;background:var(--hueso);border:1px solid var(--linea)}
.album__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,filter .4s ease;filter:saturate(.92)}
.album:hover .album__img img{transform:scale(1.04);filter:saturate(1)}
.album__pie{padding:var(--s-4) 0 0;display:flex;flex-direction:column;gap:.3rem;flex:1}
.album__pie b{font-family:var(--font-display);font-weight:400;font-size:1.08rem;line-height:1.35;color:var(--nv-900)}
.album__pie time{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-tenue)}
.album__ver{
  margin-top:auto;padding-top:var(--s-3);
  font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--nv-700);
  display:flex;align-items:center;gap:.5em;
}
.album:hover .album__ver{color:var(--oro-texto)}
.album__ver .flecha{transition:transform .25s ease}
.album:hover .album__ver .flecha{transform:translate(3px,-3px)}

/* --------------------------------------------------------------------------
   12. ENLACES EXTERNOS
   -------------------------------------------------------------------------- */
.enlaces{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  border-top:1px solid var(--linea);border-left:1px solid var(--linea);
}
.enlace{
  display:flex;flex-direction:column;gap:var(--s-3);
  padding:var(--s-6);background:#fff;
  border-right:1px solid var(--linea);border-bottom:1px solid var(--linea);
  text-decoration:none;color:inherit;transition:background-color .25s ease;
}
.enlace:hover{background:var(--hueso)}
.enlace b{font-family:var(--font-display);font-weight:400;font-size:1.2rem;color:var(--nv-900)}
.enlace p{font-size:.92rem;color:var(--gris);margin:0}
.enlace__url{
  margin-top:auto;padding-top:var(--s-4);
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--nv-700);font-weight:700;
}
.enlace:hover .enlace__url{color:var(--oro-texto)}

/* --------------------------------------------------------------------------
   13. PROGRAMAS DESPLEGABLES
   -------------------------------------------------------------------------- */
.programa{border:1px solid var(--linea);background:#fff;margin-bottom:var(--s-4)}
.programa[open]{border-color:var(--nv-800)}
.programa summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-5) var(--s-6);cursor:pointer;list-style:none;
  font-family:var(--font-display);font-size:1.2rem;color:var(--nv-900);
  transition:background-color .2s ease;
}
.programa summary:hover{background:var(--hueso)}
.programa summary::after{
  content:"";flex:0 0 auto;width:11px;height:11px;
  border-right:1.5px solid var(--oro);border-bottom:1.5px solid var(--oro);
  transform:rotate(45deg) translateY(-3px);transition:transform .25s ease;
}
.programa[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.programa[open] summary{border-bottom:1px solid var(--linea-tenue)}
.programa__cuerpo{padding:var(--s-6);max-width:none}

/* --------------------------------------------------------------------------
   14. CURSO DESTACADO (convocatoria vigente)
   -------------------------------------------------------------------------- */
.curso{
  border:1px solid var(--nv-800);border-top:3px solid var(--oro);
  background:#fff;
}
.curso__cab{
  padding:var(--s-6) clamp(1.5rem,4vw,2.5rem);
  background:var(--nv-900);color:#fff;
}
.curso__etiqueta{
  display:inline-flex;align-items:center;gap:.6em;margin-bottom:var(--s-4);
  font-size:.64rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--oro-claro);
}
.curso__etiqueta i{width:6px;height:6px;border-radius:50%;background:var(--oro);flex:0 0 auto;animation:latido 2.4s ease-in-out infinite}
.curso__cab h2{color:#fff;font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem)}
.curso__cab p{margin-top:var(--s-3);color:rgba(255,255,255,.82)}
.curso__cuerpo{padding:clamp(1.5rem,4vw,2.5rem)}
.curso__grid{display:grid;gap:var(--s-6);grid-template-columns:1fr}
@media (min-width:820px){.curso__grid{grid-template-columns:1.25fr .75fr}}

/* Ficha de datos clave.
   El layout se decide por el ancho del PROPIO bloque, no por el de la
   ventana: esta ficha vive tanto a página completa como dentro de una
   barra lateral de ~240px, donde dos columnas no caben. */
.ficha{display:grid;gap:0;border-top:1px solid var(--linea);container-type:inline-size}
.ficha div{display:grid;grid-template-columns:1fr;gap:.15rem;padding:var(--s-4) 0;border-bottom:1px solid var(--linea-tenue)}
@container (min-width:26rem){
  .ficha div{grid-template-columns:9rem 1fr;gap:var(--s-5);align-items:baseline}
}
.ficha dt{font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gris-tenue)}
.ficha dd{margin:0;color:var(--nv-900)}
.ficha dd strong{font-weight:650}

/* Cronograma de fechas */
.cronograma{list-style:none;padding:0;margin:0;border-top:1px solid var(--linea)}
.cronograma li{
  display:flex;gap:var(--s-4);align-items:baseline;
  padding:var(--s-3) 0;border-bottom:1px solid var(--linea-tenue);font-size:.96rem;
}
.cronograma time{
  flex:0 0 auto;min-width:9.5rem;
  font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--oro-texto);
}
.cronograma .obligatoria{color:var(--nv-900);font-weight:600}
/* En pantallas angostas la fecha va sobre la descripción: en dos columnas
   el texto largo queda en una franja de pocos caracteres. */
@media (max-width:560px){
  .cronograma li{flex-direction:column;gap:.2rem}
  .cronograma time{min-width:0}
}

/* --------------------------------------------------------------------------
   14b. CALENDARIO MENSUAL
   -------------------------------------------------------------------------- */
.calendario{
  display:grid;gap:clamp(1.5rem,3vw,2.25rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));
}
.mes{border:1px solid var(--linea);background:#fff}
.mes__nombre{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);
  padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--linea);
  font-family:var(--font-display);font-size:1.2rem;color:var(--nv-900);
}
.mes__nombre span{
  font-family:var(--font-ui);font-size:.62rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gris-tenue);
}
.mes table{width:100%;border-collapse:collapse;table-layout:fixed}
.mes th{
  padding:var(--s-3) 0;
  font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gris-tenue);border-bottom:1px solid var(--linea-tenue);
}
.mes th abbr{text-decoration:none;border:0}
.mes td{padding:2px;text-align:center;vertical-align:middle}
.mes .dia{
  display:block;padding:.5rem 0;
  font-size:.88rem;font-variant-numeric:tabular-nums;color:var(--tinta);
}
/* Días con actividad */
.mes .dia--inicio{background:var(--nv-800);color:#fff;font-weight:700}
.mes .dia--clase{box-shadow:inset 0 0 0 1px var(--nv-600);color:var(--nv-800);font-weight:650}
.mes .dia--obligatoria{background:var(--oro);color:#fff;font-weight:700}

/* Leyenda */
.leyenda{
  display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);
  margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--linea-tenue);
  font-size:.8rem;color:var(--gris);
}
.leyenda span{display:inline-flex;align-items:center;gap:.6em}
.leyenda i{width:16px;height:16px;flex:0 0 auto;display:block}
.leyenda .m-inicio{background:var(--nv-800)}
.leyenda .m-clase{box-shadow:inset 0 0 0 1px var(--nv-600)}
.leyenda .m-obligatoria{background:var(--oro)}

/* --------------------------------------------------------------------------
   15. FRANJA OSCURA / HITOS
   -------------------------------------------------------------------------- */
.historia{
  position:relative;isolation:isolate;color:#fff;
  background:var(--nv-900) url("../images/imagen0.jpg") center/cover no-repeat;
}
.historia::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(8,16,31,.95) 0%,rgba(20,36,69,.90) 55%,rgba(20,36,69,.70) 100%);
}
.historia__grid{display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:center;grid-template-columns:1fr}
@media (min-width:900px){.historia__grid{grid-template-columns:1.4fr .8fr}}
.historia h2{color:#fff}
.historia .eyebrow{color:var(--oro-claro)}
.historia .eyebrow::after{background:rgba(200,169,94,.4)}
.historia p{color:rgba(255,255,255,.84);margin-top:var(--s-5);max-width:54ch}

.hitos{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));gap:1px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14)}
@media (min-width:900px){.hitos{grid-template-columns:1fr}}
.hito{padding:var(--s-5) var(--s-5);background:rgba(8,16,31,.35)}
.hito b{display:block;font-family:var(--font-display);font-weight:400;font-size:2.1rem;line-height:1;letter-spacing:-.02em;color:#fff}
.hito--palabra b{font-size:1.75rem}
@media (max-width:899px){.hito--palabra{grid-column:1/-1}}
.hito span{display:block;margin-top:var(--s-3);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--oro-claro)}

/* --------------------------------------------------------------------------
   16. CONTACTO
   -------------------------------------------------------------------------- */
.contacto__grid{display:grid;gap:clamp(2.5rem,4vw,4rem);grid-template-columns:1fr}
@media (min-width:900px){.contacto__grid{grid-template-columns:.85fr 1.15fr}}

.datos{display:flex;flex-direction:column;gap:0;margin-top:var(--s-6);border-top:1px solid var(--linea)}
.dato{display:flex;gap:var(--s-5);align-items:flex-start;padding:var(--s-5) 0;border-bottom:1px solid var(--linea-tenue)}
.dato__ico{
  flex:0 0 auto;width:38px;height:38px;display:grid;place-items:center;
  border:1px solid var(--linea);color:var(--oro);
}
.dato__ico svg{width:18px;height:18px}
.dato dt{font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gris-tenue)}
.dato dd{margin:.35rem 0 0;font-size:1.02rem}
.dato a{text-decoration:none;color:var(--nv-800);border-bottom:1px solid var(--oro-tenue);transition:border-color .15s}
.dato a:hover{border-bottom-color:var(--oro)}
.dato small{display:block;font-size:.88rem;color:var(--gris);font-variant-numeric:tabular-nums}

/* Formulario */
.form{display:grid;gap:var(--s-4)}
.form__fila{display:grid;gap:var(--s-4);grid-template-columns:1fr}
@media (min-width:620px){.form__fila{grid-template-columns:1fr 1fr}}
.campo{display:flex;flex-direction:column;gap:.4rem}
.campo label{
  font-size:.66rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris);
}
.campo label .req{color:var(--oro-texto)}
/* Borde más oscuro que --linea a propósito: el contorno de un campo es un
   elemento de interfaz y WCAG 1.4.11 le exige 3:1. Con --linea (1,36:1) el
   campo era casi indistinguible del fondo. Este da 3,7:1. */
.campo input,.campo textarea{
  width:100%;padding:.8rem .9rem;
  border:1px solid #7d8598;border-radius:var(--r-sm);
  background:#fff;color:var(--tinta);font-size:1rem;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.campo textarea{resize:vertical;min-height:8rem;line-height:1.6}
.campo input:hover,.campo textarea:hover{border-color:var(--gris-tenue)}
.campo input:focus,.campo textarea:focus{
  outline:none;border-color:var(--nv-700);
  box-shadow:0 0 0 3px rgba(28,49,96,.12);
}
.campo input[aria-invalid="true"],.campo textarea[aria-invalid="true"]{border-color:var(--rojo)}
.campo .error{font-size:.82rem;color:var(--rojo);min-height:1.1em}
.campo .error:empty{min-height:0}

/* Trampa para robots: fuera de pantalla, sin display:none (algunos bots lo detectan) */
.trampa{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

.form__pie{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4);margin-top:var(--s-2)}
.form__nota{font-size:.82rem;color:var(--gris-tenue);margin:0}
.form button[type=submit][disabled]{opacity:.55;cursor:progress}

/* Aviso de resultado */
.form__aviso{
  padding:var(--s-4) var(--s-5);border-left:2px solid var(--oro);
  background:var(--hueso);font-size:.95rem;
}
.form__aviso[hidden]{display:none}
.form__aviso--ok{border-left-color:#1e7a46;background:#f1f8f3;color:#14502e}
.form__aviso--error{border-left-color:var(--rojo);background:#fdf2f2;color:#7d1a20}

.mapa{
  overflow:hidden;border:1px solid var(--linea);
  aspect-ratio:4/3;background:var(--hueso);
}
@media (min-width:900px){.mapa{aspect-ratio:auto;height:100%;min-height:440px}}
.mapa iframe{width:100%;height:100%;border:0}

/* --------------------------------------------------------------------------
   17. PIE DE PÁGINA
   -------------------------------------------------------------------------- */
.footer{
  background:var(--nv-950);color:rgba(255,255,255,.66);
  padding-block:clamp(3.5rem,6vw,5rem) var(--s-6);
  border-top:2px solid var(--oro);
}
.footer__grid{
  display:grid;gap:clamp(2.25rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));
}
@media (min-width:1000px){.footer__grid{grid-template-columns:1.7fr 1fr 1fr 1fr 1fr}}
.footer__marca{max-width:22rem}
.footer__marca img{width:52px;height:70px;object-fit:contain;margin-bottom:var(--s-5)}
.footer__marca p{font-size:.92rem;margin-top:var(--s-3)}
.footer__marca b{
  display:block;font-family:var(--font-display);font-weight:400;
  font-size:1.15rem;color:#fff;letter-spacing:.02em;
}
.footer__marca a{color:inherit}

.social{
  display:inline-flex;align-items:center;gap:.65em;margin-top:var(--s-5);
  padding:.6rem 1.1rem;
  border:1px solid rgba(200,169,94,.45);
  color:var(--oro-claro);font-size:.7rem;font-weight:700;
  letter-spacing:.12em;text-transform:lowercase;text-decoration:none;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.social:hover{background:var(--oro);color:#fff;border-color:var(--oro)}
.social svg{width:16px;height:16px;flex:0 0 auto}

.footer h2{
  font-family:var(--font-ui);font-size:.66rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--oro-claro);margin-bottom:var(--s-5);
}
.footer nav ul{display:flex;flex-direction:column;gap:.7rem;list-style:none;padding:0}
.footer nav a{font-size:.92rem;text-decoration:none;transition:color .18s ease}
.footer nav a:hover{color:#fff}

.footer__bottom{
  margin-top:clamp(3rem,5vw,4rem);padding-top:var(--s-5);
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);
  align-items:center;justify-content:space-between;
  font-size:.76rem;letter-spacing:.06em;
}
.footer__bottom a{color:rgba(255,255,255,.8);text-decoration:none}
.footer__bottom a:hover{color:var(--oro-claro)}

/* Contador de visitas. Nace oculto: si el endpoint falla, no se muestra. */
.visitas{
  display:flex;align-items:center;gap:.5em;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.visitas[hidden]{display:none}
.visitas b{
  font-family:var(--font-display);font-weight:400;font-size:1.05rem;
  letter-spacing:0;text-transform:none;color:var(--oro-claro);
  font-variant-numeric:tabular-nums;
}

/* --------------------------------------------------------------------------
   18. PREFERENCIAS DEL SISTEMA E IMPRESIÓN
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .hero__slide{transition:none}
}

@media print{
  .header,.hero__dots,.nav-toggle,.mapa,.hero__acciones,.skip-link,.migas{display:none !important}
  .hero,.page-hero,.historia,.footer,.curso__cab{background:#fff !important;color:#000 !important;min-height:0;padding-top:0}
  .hero::before,.page-hero::before,.page-hero--foto::after,.historia::before{display:none}
  .curso__cab h2,.hito b{color:#000 !important}
  .card,.album,.persona,.comision,.programa{break-inside:avoid;box-shadow:none}
  .programa[open] .programa__cuerpo,.programa .programa__cuerpo{display:block !important}
  .prose{max-width:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}
}