/*
Theme Name: Grial
Theme URI: https://grial.org
Author: Giotto
Description: Custom theme for grial.org, version-controlled on GitHub and deployed via automated FTP.
Version: 1.1.0
Requires PHP: 7.4
Text Domain: grial
*/

/* =========================================================
   Recreacion del Santo Grial en Bailo
   Sistema de diseno: "piedra y aire"
   Paleta terrea (piedra, terracota, salvia) + pizarra
   Tipografia: Cinzel (logo) + Fraunces (display) + Inter (texto)
   ========================================================= */

/* =========================================================
   Fuentes autoalojadas
   Los .woff2 viven en assets/fonts/ y se despliegan con el tema.
   Antes se pedian a Google Fonts, lo que obligaba a dos conexiones
   externas (fonts.googleapis.com + fonts.gstatic.com) y encadenaba
   HTML -> CSS remoto -> fuente antes de poder pintar texto.
   Solo subset "latin": cubre todo el castellano (acentos, ñ, ¿, ¡, «»).
   Fraunces conserva el eje opsz 9-144, asi que el optical sizing real
   de .h-display (font-optical-sizing:auto) se mantiene intacto.
   El rango de peso declarado es el que soporta el fichero (100-900),
   no solo el que usamos hoy, para que añadir un peso nuevo mas
   adelante no exija volver a descargar nada.
   ========================================================= */
@font-face{
  font-family:'Cinzel';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('assets/fonts/cinzel-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('assets/fonts/fraunces-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('assets/fonts/inter-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* Neutros calidos */
  --hueso:        #f5f2ec;
  --hueso-2:      #ece7dd;
  --piedra:       #d8d1c4;
  --piedra-linea: #cec6b6;
  --piedra-honda: #8b8474;

  /* Oscuros */
  --pizarra:      #22262b;
  --pizarra-2:    #1a1d21;
  --tinta:        #2b2723;

  /* Acentos */
  --terracota:    #ad5637;
  --terracota-cl: #c97d5e;
  --salvia:       #6d8067;
  --salvia-cl:    #94a58c;

  /* Tipografia */
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --logo:  "Cinzel", Georgia, "Times New Roman", serif;

  /* Ritmo */
  --shell:      1180px;
  --medida:     64ch;
  /* Aire vertical de cada .section. Arranco con un valor mas generoso
     (hasta 7,5rem), pero con las paginas ya llenas de contenido separaba
     tanto los bloques que costaba ver que iban seguidos. */
  --sec-y:      clamp(2.75rem, 5.5vw, 5rem);
  --radio:      2px;

  --t-suave: 480ms cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ligero ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body,h1,h2,h3,h4,p,ul,ol,dl,dd,figure{ margin:0; }
ul,ol{ padding:0; list-style:none; }
img,svg{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
table{ border-collapse:collapse; width:100%; }

@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;
  }
}

/* ---------- Base ---------- */
body{
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(1rem, .96rem + .18vw, 1.075rem);
  line-height:1.72;
  color:var(--tinta);
  background:var(--hueso);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

p{ margin:0; }
p + p, p + ul, p + ol, ul + p, ol + p{ margin-top:1.15em; }
strong{ font-weight:600; }
em{ font-style:italic; }

.shell{
  width:min(100% - 2.5rem, var(--shell));
  margin-inline:auto;
}
@media (min-width:900px){
  .shell{ width:min(100% - 5rem, var(--shell)); }
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--pizarra); color:var(--hueso);
  padding:.75rem 1.25rem; text-decoration:none; font-size:.9rem;
}
.skip-link:focus{ left:1rem; top:1rem; }

:focus-visible{ outline:2px solid var(--terracota); outline-offset:3px; }

/* ---------- Tipografia de display ---------- */
.h-display{
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-weight:400;
  font-size:clamp(2rem, 1.35rem + 2.9vw, 3.5rem);
  line-height:1.08;
  letter-spacing:-.018em;
  text-wrap:balance;
}
.h-display + p{ margin-top:1.4rem; }
p + .h-sub{ margin-top:1.4rem; }

.h-sub{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.35rem;
  letter-spacing:-.01em;
  margin-bottom:.65rem;
}
.eyebrow{
  display:block;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--terracota);
  margin-bottom:1.15rem;
}
.eyebrow-light{ color:var(--terracota-cl); }

.lede{
  font-size:clamp(1.08rem, 1rem + .38vw, 1.32rem);
  line-height:1.6;
  color:var(--tinta);
  font-weight:400;
}
.muted{ color:var(--piedra-honda); }

.medida{ max-width:var(--medida); }

/* ---------- Grano ---------- */
.hero::after,
.site-footer::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================
   Cabecera
   ========================================================= */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background var(--t-suave), border-color var(--t-suave), backdrop-filter var(--t-suave);
  border-bottom:1px solid transparent;
}
.site-header.is-stuck{
  background:rgba(245,242,236,.92);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom-color:var(--piedra-linea);
}
.header-inner{
  display:flex; align-items:center;
  gap:1.5rem;
  padding-block:1.1rem;
}
/* margin-left:auto (en vez de justify-content:space-between) para que el
   menu/hamburguesa se mantenga pegado a la derecha aunque el logo de la
   izquierda desaparezca (display:none) en la portada sin hacer scroll. */
.site-nav{ margin-left:auto; }
.nav-toggle{ margin-left:auto; }

.brand{
  display:flex; align-items:center; gap:.7rem;
  text-decoration:none;
  color:var(--hueso);
  transition:color var(--t-suave), opacity var(--t-suave);
}
.site-header.is-stuck .brand{ color:var(--tinta); }

/* En portada hay dos estados de scroll independientes:
   - .is-stuck: en cuanto se hace scroll. Da fondo/legibilidad al menu, que
     si no se solapaba con el logo grande del hero mientras este pasaba.
   - .marca-visible: el logo pequeno ya entra en juego (visible y clicable).
   El relevo entre el logo grande del hero y el pequeno de la cabecera lo
   gobierna --marca-p (de 0 a 1, la calcula nav.js con el scroll): los dos se
   funden en cruz en lugar de aparecer/desaparecer de golpe.
   El logo pequeno mantiene siempre su hueco (visibility, no display) para que
   la cabecera mida lo mismo con y sin logo y el menu no pegue un salto. */
body.home .site-header .brand{
  visibility:hidden; pointer-events:none;
  opacity:var(--marca-p, 0);
  transform:translateY(calc((1 - var(--marca-p, 0)) * .55rem));
  /* Sin transicion de opacity/transform: los mueve el scroll fotograma a
     fotograma, y una transicion encima solo anadiria retardo. */
  transition:color var(--t-suave);
}
body.home .site-header.marca-visible .brand{ visibility:visible; pointer-events:auto; }

/* El logo grande del hero se desvanece y sube un poco mientras cede el
   relevo, para que el cambio se lea como un traspaso y no como un corte. */
body.home .hero-brand{
  opacity:calc(1 - var(--marca-p, 0));
  transform:translateY(calc(var(--marca-p, 0) * -1.1rem));
}

@media (prefers-reduced-motion: reduce){
  body.home .site-header .brand,
  body.home .hero-brand{ transform:none; }
}

.brand-mark{ display:flex; }
.brand-mark svg{ width:auto; height:2.75rem; display:block; }
.brand-text{ display:flex; flex-direction:column; justify-content:center; line-height:1.1; }
.brand-name{ font-family:var(--logo); font-weight:600; font-size:1rem; letter-spacing:0; max-width:20rem; }

.site-nav ul{ display:flex; gap:1.35rem; flex-wrap:wrap; }
.site-nav a{
  position:relative;
  font-size:.78rem;
  letter-spacing:.015em;
  text-decoration:none;
  color:rgba(245,242,236,.85);
  padding-block:.3rem;
  transition:color var(--t-suave);
}
.site-header.is-stuck .site-nav a{ color:#5a534b; }
.site-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-suave);
}
.site-nav a:hover::after,
.site-nav a.current-menu-item::after{ transform:scaleX(1); }
.site-nav a:hover,
.site-nav a.current-menu-item{ color:var(--hueso); }
.site-header.is-stuck .site-nav a:hover,
.site-header.is-stuck .site-nav a.current-menu-item{ color:var(--terracota); }

.site-nav li{ position:relative; }
.site-nav li.menu-label > a{ cursor:default; }
.site-nav li.menu-label > a::after{ display:none; }

.site-nav .sub-menu{
  display:block;
  position:absolute; top:100%; left:0; margin-top:.5rem;
  min-width:230px; padding:.5rem 0;
  background:var(--pizarra);
  border-radius:var(--radio);
  box-shadow:0 20px 40px -20px rgba(18,20,23,.5);
  opacity:0; visibility:hidden;
  transform:translateY(4px);
  transition:opacity var(--t-suave), transform var(--t-suave), visibility var(--t-suave);
  z-index:50;
}
.site-nav li:hover > .sub-menu,
.site-nav li:focus-within > .sub-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.site-nav .sub-menu a{
  display:block; padding:.6rem 1.25rem;
  color:rgba(245,242,236,.85);
  white-space:nowrap;
}
.site-nav .sub-menu a:hover,
.site-nav .sub-menu a.current-menu-item{ color:var(--hueso); }
.site-header.is-stuck .site-nav .sub-menu a{ color:rgba(245,242,236,.85); }
.site-header.is-stuck .site-nav .sub-menu a:hover,
.site-header.is-stuck .site-nav .sub-menu a.current-menu-item{ color:var(--terracota-cl); }

.nav-toggle{
  display:none;
  position:relative; z-index:2;
  width:64px; height:64px;
  flex-direction:column; justify-content:center; align-items:flex-end; gap:5px;
  margin-right:-.5rem;
}
.nav-toggle span{ display:block; height:1.5px; width:22px; background:var(--hueso); transition:transform var(--t-suave), opacity var(--t-suave), background var(--t-suave), width var(--t-suave); }
.nav-toggle span:nth-child(2){ width:16px; }
.site-header.is-stuck .nav-toggle span{ background:var(--tinta); }

@media (max-width:1080px){
  .site-nav ul{ gap:1rem; }
  .site-nav a{ font-size:.74rem; }
}

@media (max-width:900px){
  .nav-toggle{ display:flex; }
  .site-nav{
    /* top/left+width/height en vez de inset:0: .site-header.is-stuck lleva
       backdrop-filter, que lo convierte en containing block de este fixed,
       y entonces inset:0 se resolvia contra la cabecera (bajita), no contra
       la pantalla, dejando el fondo oscuro solo en esa franja. */
    position:fixed; top:0; left:0; width:100vw; height:100svh; z-index:1;
    background:var(--pizarra);
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    padding-block:5.5rem 2.5rem;
    overflow-y:auto;
    opacity:0; visibility:hidden;
    transition:opacity var(--t-suave), visibility var(--t-suave);
  }
  .site-nav ul{ flex-direction:column; align-items:center; gap:1.25rem; text-align:center; }
  .site-nav a{ font-family:var(--serif); font-size:1.35rem; color:rgba(245,242,236,.9) !important; }
  .site-nav li.menu-label{
    margin-top:.5rem;
    width:min(100%, 21rem);
    padding:1.35rem 1.5rem;
    border:1px solid rgba(245,242,236,.16);
    border-radius:var(--radio);
    background:rgba(245,242,236,.05);
  }
  .site-nav li.menu-label > a{
    display:block;
    font-family:var(--sans); font-size:.72rem; font-weight:600;
    letter-spacing:.18em; text-transform:uppercase;
    color:rgba(245,242,236,.55) !important;
    padding-bottom:1.1rem;
    margin-bottom:1.1rem;
    border-bottom:1px solid rgba(245,242,236,.16);
  }
  .site-nav .sub-menu{
    /* La regla de escritorio (mas arriba, fuera de cualquier media query)
       fija opacity:0 y visibility:hidden directamente sobre .sub-menu, sin
       condicion alguna - no es algo que .sub-menu herede de .site-nav, es
       una declaracion propia, asi que ninguna de las dos se "hereda" del
       padre pase lo que pase con el. Por eso hacen falta las dos aqui:
       opacity:1 sin mas, y visibility:hidden atado al mismo body.nav-abierta
       que abre el menu (regla siguiente), en vez de a :hover/:focus-within
       (que no se dispara solo con abrir el menu en touch). Fijarla aqui a
       visible sin condicion, como se hizo antes, era el bug original: el
       submenu quedaba clicable a pantalla completa con el menu cerrado. */
    position:static; opacity:1; visibility:hidden; transform:none;
    background:transparent; box-shadow:none; padding:0;
    margin:0;
    display:flex; flex-direction:column; align-items:center; gap:1rem;
  }
  body.nav-abierta .site-nav .sub-menu{ visibility:visible; }
  .site-nav .sub-menu a{ padding:0; white-space:normal; font-size:1.1rem; }
  body.nav-abierta{ overflow:hidden; }
  body.nav-abierta .site-nav{ opacity:1; visibility:visible; }
  body.nav-abierta .nav-toggle span{ background:var(--hueso) !important; }
  body.nav-abierta .nav-toggle span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  body.nav-abierta .nav-toggle span:nth-child(2){ opacity:0; }
  body.nav-abierta .nav-toggle span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); width:22px; }
}

/* =========================================================
   Hero (portada)
   ========================================================= */
.hero{
  position:relative;
  min-height:68svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:5rem;
  padding-bottom:clamp(3rem, 6vw, 5rem);
  background:
    radial-gradient(120% 85% at 18% 8%, #2e343a 0%, transparent 62%),
    linear-gradient(175deg, #262b31 0%, var(--pizarra) 45%, #1b1f23 100%);
  color:var(--hueso);
  overflow:hidden;
  isolation:isolate;
}
.hero-inner{ position:relative; z-index:2; }
.hero-lede{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.2rem, 1rem + 1vw, 1.7rem); line-height:1.35; max-width:32ch;
  color:rgba(245,242,236,.94);
}
.hero-sub{ margin-top:1.5rem; max-width:56ch; font-size:1rem; line-height:1.72; color:rgba(245,242,236,.65); }
.hero-facts{
  display:flex; flex-wrap:wrap; gap:clamp(1.5rem, 4vw, 3rem);
  margin-top:clamp(2.25rem, 5vw, 3.5rem); padding-top:1.65rem;
  border-top:1px solid rgba(245,242,236,.16);
}
.hero-facts li{ display:flex; flex-direction:column; gap:.2rem; }
.fact-num{ font-family:var(--serif); font-weight:400; font-size:clamp(1.4rem, 1.15rem + .8vw, 1.9rem); line-height:1; color:var(--terracota-cl); letter-spacing:-.02em; }
.fact-label{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(245,242,236,.5); }

/* ---------- Portada: foto de fondo + logo grande centrado ---------- */
.hero.hero-photo{
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center 35%;
}
.hero.hero-photo::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(18,20,23,.60) 0%, rgba(18,20,23,.55) 45%, rgba(13,15,17,.71) 100%);
}
body.home .hero{ justify-content:center; padding-top:clamp(3rem, 6vw, 5rem); min-height:58svh; }
body.home .hero-inner{ display:flex; flex-direction:column; align-items:center; text-align:center; }
body.home .hero-facts{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:2rem clamp(2.5rem, 8vw, 5.5rem);
  max-width:34rem;
  margin-inline:auto;
}
body.home .hero-facts li{ align-items:center; text-align:center; }

.hero-brand{ display:flex; align-items:center; gap:1.25rem; margin-block:.25rem 1.5rem; }
.hero-brand-mark svg{ width:auto; height:clamp(7.2rem, 14.4vw, 11.2rem); display:block; }
.hero-brand-text{
  font-family:var(--logo); font-weight:600;
  font-size:clamp(1.5rem, .85rem + 3vw, 2.6rem);
  line-height:1.15; letter-spacing:0;
  max-width:16ch; text-align:left;
}
@media (max-width:600px){
  .hero-brand{ flex-direction:column; gap:.75rem; text-align:center; }
  .hero-brand-text{ text-align:center; }
}

/* ---------- Hero interior (paginas de contenido) ---------- */
.page-hero{
  position:relative;
  /* El minimo no baja de 6rem a proposito: la cabecera es fija y con el logo
     a dos o tres lineas en movil llega a ~100px, asi que menos relleno
     dejaria el h1 por debajo de ella. */
  padding-top:clamp(6rem, 8vw, 6.5rem);
  padding-bottom:clamp(2.25rem, 4vw, 3rem);
  background:var(--pizarra);
  color:var(--hueso);
  overflow:hidden;
}
.page-hero .eyebrow{ color:var(--terracota-cl); }
.page-hero h1{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.25rem, 1.6rem + 3vw, 3.75rem);
  line-height:1.05; letter-spacing:-.02em; max-width:22ch;
}
.page-hero .lede{ margin-top:1.1rem; max-width:52ch; color:rgba(245,242,236,.72); }

/* =========================================================
   Secciones
   ========================================================= */
.section{ position:relative; padding-block:var(--sec-y); }
.section-alt{ background:var(--hueso-2); }

/* Seccion con foto de fondo oscurecida (la imagen va en style="" en el
   contenido). center center para no recortar el caliz fuera de encuadre. */
.section-foto{
  color:var(--hueso);
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center center;
  isolation:isolate;
  overflow:hidden;
}
.section-foto::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(18,20,23,.54) 0%, rgba(16,18,21,.57) 100%);
}
.section-foto > *{ position:relative; z-index:1; }
.section-foto .muted{ color:rgba(245,242,236,.6); }
.section-foto .lede{ color:rgba(245,242,236,.92); }
.section-foto .eyebrow,
.section-foto .card-link{ color:var(--terracota-cl); }
.section-head{ max-width:var(--medida); margin-bottom:clamp(1.75rem, 3vw, 2.5rem); }
.section-head + .section-head{ margin-top:clamp(3rem, 6vw, 4.5rem); }

.grid-editorial{ display:grid; gap:clamp(2rem, 5vw, 4rem); }
@media (min-width:900px){
  .grid-editorial{ grid-template-columns:minmax(0,4fr) minmax(0,8fr); align-items:start; }
  /* La fila mide lo que el elemento mas alto. Con align-self:center el cuerpo
     se centra cuando es mas corto que el titulo, y cuando es el mas alto ocupa
     toda la fila y el centrado no tiene efecto: el titulo se queda arriba. */
  .col-body{ align-self:center; }
  .col-head{ align-self:start; }
}
.col-body{ max-width:var(--medida); }
.col-body > * + *{ margin-top:1.15em; }
.col-body h3{ font-family:var(--serif); font-weight:500; font-size:1.25rem; margin-top:2em; letter-spacing:-.01em; }

hr.regla{ border:0; border-top:1px solid var(--piedra-linea); margin-block:2.5rem; }

/* ---------- Tarjetas ---------- */
.card{
  padding:1.75rem; border:1px solid var(--piedra-linea); border-radius:var(--radio);
  background:var(--hueso); transition:border-color var(--t-suave), transform var(--t-suave);
}
.card:hover{ border-color:var(--terracota-cl); }
.card .eyebrow{ margin-bottom:.75rem; }
.card h3{ font-family:var(--serif); font-weight:500; font-size:1.2rem; margin-bottom:.6rem; }
.card p{ color:#514a42; font-size:.96rem; }
.card a.card-link{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:1.25rem;
  font-size:.78rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  color:var(--terracota); text-decoration:none;
}
.card a.card-link:hover{ text-decoration:underline; }

/* ---------- Botones / CTA ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.9rem 1.85rem; border-radius:var(--radio);
  background:var(--terracota); color:var(--hueso);
  font-family:var(--sans); font-weight:600; font-size:.82rem;
  letter-spacing:.03em; text-transform:uppercase; text-decoration:none;
  border:1px solid var(--terracota);
  transition:background var(--t-suave), border-color var(--t-suave), color var(--t-suave);
}
.btn:hover{ background:var(--terracota-cl); border-color:var(--terracota-cl); }
.btn svg{ width:18px; height:18px; fill:currentColor; display:block; flex-shrink:0; }
.btn-tinta{ background:transparent; color:var(--tinta); border-color:var(--tinta); }
.btn-tinta:hover{ background:var(--tinta); color:var(--hueso); }
.cta-row{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2rem; }

/* ---------- Proxima edicion (callout) ---------- */
.callout{
  border:1px solid var(--piedra-linea); border-left:3px solid var(--terracota);
  border-radius:var(--radio); padding:1.75rem 2rem; background:var(--hueso-2);
}
.callout .eyebrow{ margin-bottom:.5rem; }
.callout h3{ font-family:var(--serif); font-size:1.4rem; font-weight:500; margin-bottom:.5rem; }
.callout.nota{ border-left-color:var(--salvia); }

/* ---------- Ediciones anteriores (video + galeria por ano) ---------- */
.media-label{
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--piedra-honda); margin-bottom:.85rem;
}
a.media-label{ display:inline-block; text-decoration:none; color:var(--terracota); transition:color var(--t-suave); }
a.media-label:hover{ color:var(--terracota-cl); text-decoration:underline; }
.video-embed{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  border-radius:var(--radio); background:var(--pizarra);
}
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---------- Mapa embebido ---------- */
.mapa-embed{
  position:relative; aspect-ratio:16/10; overflow:hidden;
  border-radius:var(--radio); border:1px solid var(--piedra-linea);
}
.mapa-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
@media (max-width:600px){ .mapa-embed{ aspect-ratio:4/5; } }

/* ---------- Cartel del evento ---------- */
.cartel-2025{ max-width:520px; margin:0 auto 2.5rem; }
.cartel-2025 a{ display:block; cursor:zoom-in; }
.cartel-2025 img{
  width:100%; display:block; border-radius:var(--radio);
  box-shadow:0 12px 30px -14px rgba(18,20,23,.45);
}
.cartel-2025 .img-hint{ margin-top:.6rem; font-size:.78rem; color:var(--piedra-honda); text-align:center; }

/* ---------- Cartel oficial (reutilizable, sin ampliar) ---------- */
.cartel-oficial{ max-width:520px; margin:0 auto; }
.cartel-oficial img{
  width:100%; display:block; border-radius:var(--radio);
  box-shadow:0 12px 30px -14px rgba(18,20,23,.45);
}

/* ---------- Mapa del evento (imagen ampliable) ---------- */
.mapa-evento-link{ display:block; cursor:zoom-in; }
.mapa-evento-link img{ width:100%; display:block; border-radius:var(--radio); border:1px solid var(--piedra-linea); }

/* ---------- Graficos de estadisticas (Estadisticas web) ---------- */
/* El grafico va con eje vertical a la izquierda: sin cifras de referencia las
   barras solo decian "una es mas alta que otra", no cuantas visitas eran. */
.grafico{ display:flex; gap:.6rem; }
.grafico-eje{
  flex:0 0 auto; min-width:1.75rem;
  display:flex; flex-direction:column; justify-content:space-between;
  height:180px; padding-top:1rem;
  /* Media linea hacia arriba para que cada cifra quede centrada sobre su guia
     en vez de colgar por debajo. */
  margin-top:-.35em;
  font-family:var(--sans); font-size:.7rem; line-height:1; letter-spacing:.02em;
  color:var(--piedra-honda); text-align:right;
}
.grafico-barras{
  flex:1 1 auto;
  display:flex; align-items:flex-end; gap:3px;
  height:180px; padding-top:1rem;
  border-bottom:1px solid var(--piedra-linea);
  /* Guias horizontales al 50 % y al 100 % del area de barras (el 0 ya lo marca
     el borde inferior), alineadas con las cifras del eje. */
  background-image:repeating-linear-gradient(to top, transparent 0 calc(50% - 1px), var(--piedra-linea) calc(50% - 1px) 50%);
  background-origin:content-box; background-clip:content-box;
}
.grafico-barras .barra{ flex:1; min-height:2px; background:var(--terracota); border-radius:2px 2px 0 0; }

.lista-barras{ display:flex; flex-direction:column; gap:1rem; }
.lista-barras li{ display:grid; grid-template-columns:minmax(0,7rem) minmax(0,1fr) auto; align-items:center; gap:1rem; }
@media (min-width:600px){
  .lista-barras li{ grid-template-columns:minmax(0,14rem) minmax(0,1fr) auto; }
}
.lista-barras-label{ font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lista-barras-track{ display:block; height:8px; background:var(--hueso-2); border-radius:4px; overflow:hidden; }
.lista-barras-fill{ display:block; height:100%; background:var(--terracota); border-radius:4px; }
.lista-barras-num{ font-family:var(--serif); font-size:.95rem; color:var(--terracota); min-width:2.5ch; text-align:right; }

/* ---------- Fotografia con atribucion (Wikimedia Commons, etc.) ---------- */
.foto-atribuida{ margin:0; }
.foto-atribuida a.lightbox-trigger{ display:block; cursor:zoom-in; }
.foto-atribuida img{ width:100%; display:block; border-radius:var(--radio); border:1px solid var(--piedra-linea); }
.foto-atribuida figcaption{ margin-top:.6rem; font-size:.78rem; color:var(--piedra-honda); }
.foto-atribuida figcaption a{ color:inherit; text-decoration:underline; }

/* ---------- Foto decorativa ----------
   Imagen suelta que solo acompana al texto: ni se amplia (sin lightbox) ni
   lleva pie de foto, a diferencia de .foto-atribuida. Pensada para colgar de
   la columna del titulo (.col-head), que en las secciones de cuerpo largo se
   queda con mucho hueco vertical vacio. Se mantiene pequena a proposito para
   dar aire y color sin competir con el texto. */
.foto-deco{ margin:0; }
.foto-deco img{
  width:100%; height:auto; display:block;
  border-radius:var(--radio);
  border:1px solid var(--piedra-linea);
}
.col-head .foto-deco{ margin-top:2rem; max-width:250px; }
@media (max-width:899px){
  /* En una sola columna la foto queda entre el titulo y su texto. Alineada a
     la izquierda dejaba un hueco muerto enorme a su derecha que parecia un
     fallo, asi que se centra: leida como pausa entre titulo y texto funciona,
     descolgada a un lado no. Se mantiene por debajo del ancho completo para
     que siga siendo un apunte y no alargue el scroll. */
  .col-head .foto-deco{ max-width:min(60%, 240px); margin:1.75rem auto 0; }
}

/* ---------- Lightbox (imagen a su tamano original, con scroll si no cabe) ---------- */
.lightbox{
  position:fixed; inset:0; z-index:200;
  overflow:auto;
  padding:3rem 2rem;
  background:rgba(18,20,23,.92);
  opacity:0; visibility:hidden;
  transition:opacity var(--t-suave), visibility var(--t-suave);
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox-inner{ min-height:100%; display:flex; align-items:center; justify-content:center; }
.lightbox-frame{ display:grid; }
.lightbox-frame > img,
.lightbox-frame > .lightbox-close{ grid-area:1/1; }
.lightbox img{
  display:block; max-width:none; width:auto; height:auto;
  border-radius:var(--radio); box-shadow:0 20px 50px -18px rgba(0,0,0,.6);
}
.lightbox-close{
  /* position:sticky (no fixed/absolute) es la clave: comparte celda de grid
     con la propia <img> dentro de .lightbox-frame, asi que su posicion
     "normal" ya es la esquina superior derecha de la foto. Cuando la foto
     entera cabe en la ventana, sticky no tiene nada que hacer y se queda
     ahi, pegado a la imagen -que es justo lo que se pedia-. Pero si la
     foto es mayor que la ventana y hace falta scroll dentro del lightbox,
     sticky mantiene el boton a la vista, anclado a la esquina de la
     ventana mientras la imagen siga presente, en vez de irse fuera de
     pantalla junto con el resto de la foto y quedar inalcanzable. Un solo
     comportamiento vale para escritorio y movil, sin media query aparte. */
  position:sticky; top:.75rem; right:.75rem; z-index:1;
  justify-self:end; align-self:start;
  width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  background:rgba(18,20,23,.65); border-radius:50%;
  border:0; color:var(--hueso); font-size:2rem; line-height:1; cursor:pointer;
}

/* ---------- Archivo historico (linea de tiempo) ---------- */
.timeline{ border-top:1px solid var(--piedra-linea); }
.timeline-item{
  display:grid; gap:.4rem 2rem; padding-block:2rem; border-bottom:1px solid var(--piedra-linea);
}
@media (min-width:760px){
  .timeline-item{ grid-template-columns:minmax(0,2.2fr) minmax(0,9.8fr); align-items:baseline; }
  .timeline-ed{ text-align:right; }
}
.timeline-ed{ font-family:var(--serif); font-weight:400; }
.timeline-ed .num{ display:block; font-size:2.1rem; line-height:1; color:var(--terracota); }
.timeline-item h4{ font-family:var(--serif); font-weight:500; font-size:1.15rem; margin-bottom:.5rem; }
.timeline-item h4 .ano-grande{ display:block; font-size:2em; line-height:1.1; }
.timeline-item h4 .ano-sub{ display:block; font-weight:400; font-size:1rem; margin-top:.2rem; }
.timeline-item p{ color:#514a42; }
.timeline-item.hiato{ opacity:.75; font-style:italic; }

/* ---------- Lista de enlaces (Prensa: recortes, videos y comunicados) ----------
   Mismo papel que .timeline pero para listados largos de enlaces, donde cada
   entrada es solo fecha + titular + medio. Con .timeline (padding 2rem y
   titular a 1.15rem) una lista de una docena de recortes se hacia larguisima,
   asi que aqui la fecha va en linea a la izquierda y el interlineado es mas
   ajustado. Se usa en las tres secciones de la pagina aunque dos sean cortas,
   para que el listado se lea igual en todas. */
.enlaces{ border-top:1px solid var(--piedra-linea); }
.enlace-item{
  display:flex; gap:1rem; align-items:baseline;
  padding-block:.7rem; border-bottom:1px solid var(--piedra-linea);
}
/* Los tamanos de letra son los mismos que en .timeline (titular 1.15rem y
   medio al tamano del cuerpo): el ahorro de alto sale del espaciado -relleno
   de la fila e interlineado-, no de encoger el texto, que dejaba esta pagina
   descolgada del resto del sitio. */
.enlace-item .fecha{
  flex:0 0 7rem;
  font-family:var(--sans); font-size:.82rem; font-weight:600;
  color:var(--terracota); letter-spacing:.02em;
}
.enlace-item .enlace-txt{ flex:1 1 auto; min-width:0; }
.enlace-item h4{
  font-family:var(--serif); font-weight:500; font-size:1.15rem;
  line-height:1.3; margin:0;
}
.enlace-item .medio{
  color:#514a42; line-height:1.4; margin:.2rem 0 0;
}
@media (max-width:620px){
  /* En pantalla estrecha la fecha en columna dejaba al titular un ancho
     ridiculo, asi que pasa a ir encima. */
  .enlace-item{ flex-direction:column; gap:.1rem; padding-block:.8rem; }
  .enlace-item .fecha{ flex:none; }
}

/* Seccion cuyo contenido es solo un listado .enlaces. El aire estandar de
   .section (--sec-y, hasta 7,5rem arriba y abajo) esta pensado para bloques
   de texto; junto a filas de lista tan juntas se leia como un hueco enorme
   entre secciones. Se recorta el relleno y la separacion del titulillo para
   que el ritmo vertical acompane al de la lista. */
.section-lista{ padding-block:clamp(2.5rem, 4.5vw, 4rem); }
.section-lista .section-head{ margin-bottom:1.75rem; }

.tag{
  display:inline-block; font-size:.65rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.2rem .55rem; border:1px solid var(--terracota-cl); color:var(--terracota); border-radius:var(--radio);
  margin-left:.5rem; vertical-align:middle;
}

/* ---------- Horario compacto (Programa: agenda del dia a dia, mas denso
   que .timeline -que es para historicos de una sola columna con pocas
   entradas- porque aqui puede haber una docena de franjas horarias y
   generaba demasiado scroll). Una sola columna, pero con espaciado mas
   ajustado que .timeline para reducir el scroll. */
.horario{ border-top:1px solid var(--piedra-linea); }
.horario-item{
  display:flex; gap:.85rem; align-items:baseline;
  padding-block:.6rem; border-bottom:1px solid var(--piedra-linea);
}
.horario-item .hora{
  flex:0 0 3.2rem; font-family:var(--sans); font-size:.8rem; font-weight:600;
  color:var(--terracota); letter-spacing:.02em;
}
.horario-item .horario-txt{ flex:1 1 auto; min-width:0; }
.horario-item h4{ font-family:var(--serif); font-weight:500; font-size:1rem; line-height:1.3; margin-bottom:.1rem; }
.horario-item p{ color:#514a42; font-size:.86rem; line-height:1.4; margin:0; }

/* ---------- Datos / cifras en linea ---------- */
.datos{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:0; margin-top:2rem; border-top:1px solid var(--piedra-linea); }
.datos > div{ padding:1.35rem 1rem 1.35rem 0; border-bottom:1px solid var(--piedra-linea); }
.datos .num{ font-family:var(--serif); font-weight:400; font-size:1.7rem; color:var(--terracota); }
.datos .lbl{ display:block; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--piedra-honda); margin-top:.25rem; }

/* ---------- Listas con icono / check ---------- */
.lista-clara{ display:flex; flex-direction:column; gap:.85rem; }
.lista-clara li{ padding-left:1.35rem; position:relative; }
.lista-clara li::before{ content:"-"; position:absolute; left:0; color:var(--terracota); }

/* ---------- Formularios (participa) ---------- */
.form-marcador{
  border:1px dashed var(--piedra-honda); border-radius:var(--radio);
  padding:2rem; text-align:center; color:var(--piedra-honda); font-size:.9rem;
  background:var(--hueso-2);
}
.form-marcador strong{ display:block; color:var(--tinta); font-family:var(--serif); font-size:1.1rem; font-weight:500; margin-bottom:.5rem; }

/* ---------- Formulario de contacto ---------- */
.form-contacto{ display:grid; gap:1.25rem; max-width:36rem; margin-top:.5rem; }
.form-contacto .campo{ display:flex; flex-direction:column; gap:.4rem; }
.form-contacto label{ font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; color:var(--piedra-honda); }
.form-contacto input, .form-contacto textarea{
  font:inherit; font-size:.95rem; color:var(--tinta);
  padding:.75rem .9rem; border:1px solid var(--piedra-linea); border-radius:var(--radio);
  background:var(--hueso); transition:border-color var(--t-suave);
}
.form-contacto input:focus, .form-contacto textarea:focus{ outline:none; border-color:var(--terracota); }
.form-contacto textarea{ resize:vertical; min-height:8rem; }
.form-contacto .campo-oculto{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-contacto .btn{ justify-self:start; }

.form-exito, .form-error{
  padding:1.1rem 1.4rem; border-radius:var(--radio); font-size:.92rem; margin-bottom:1.5rem;
}
.form-exito{ background:var(--hueso-2); border-left:3px solid var(--salvia); color:var(--tinta); }
.form-error{ background:var(--hueso-2); border-left:3px solid var(--terracota); color:var(--tinta); }

/* =========================================================
   Pie de pagina
   ========================================================= */
.site-footer{ position:relative; background:var(--pizarra); color:rgba(245,242,236,.75); padding-block:clamp(2rem, 4vw, 2.5rem); overflow:hidden; }
.footer-legal{ position:relative; z-index:2; display:flex; flex-wrap:wrap; align-items:center; gap:1rem 2rem; justify-content:space-between; font-size:.78rem; color:rgba(245,242,236,.45); }
.footer-legal a{ color:inherit; text-decoration:underline; }
.footer-legal-text{ display:flex; flex-direction:column; gap:.35rem; }
.footer-right{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.75rem; }
.footer-nav ul{ display:flex; flex-wrap:wrap; gap:1.5rem; }
.footer-nav a{ font-size:.78rem; text-decoration:underline; color:inherit; transition:color var(--t-suave); }
.footer-nav a:hover{ color:var(--hueso); }
.footer-social{ display:flex; align-items:center; gap:1rem; }
.footer-social a{
  display:flex; text-decoration:none; color:inherit;
  transition:color var(--t-suave);
}
.footer-social a:hover{ color:var(--hueso); }
.footer-social svg{ width:20px; height:20px; fill:currentColor; display:block; }