/* ============================================================
   Oración por la Paz — estilos · "La vigilia"
   ------------------------------------------------------------
   Concepto: un programa editorial, no una grilla de cajas. Una
   sola LÍNEA continua atraviesa los 36 turnos del día —la cadena
   que no se corta—. Cada turno es un nodo en esa línea: hueco si
   está sin cubrir, lleno si ya hay gente, y ENCENDIDO (dorado, con
   latido) el que se está rezando ahora. Tipografía grande en serif
   para las horas, mucho aire, casi sin bordes.

   Las variables de :root son el contrato (paleta + tipografías).
   ============================================================ */

:root{
  --paper:#f6f3ec;        /* papel hueso/marfil, poco saturado */
  --paper-2:#efeae0;      /* superficie apenas más profunda */
  --footer:#eee8db;       /* banda del pie */
  --ink:#26241f;          /* casi negro cálido neutro */
  --grey:#6d685d;         /* secundario, taupe */
  --faint:#a59d8c;        /* terciario / nodos vacíos */
  --line:#e3ddce;         /* hairline suave */
  --line-soft:#ece7da;    /* separador interno, casi invisible */
  --gold:#a98a4b;         /* latón apagado — acento, con moderación */
  --gold-soft:#c9b483;
  --gold-wash:#ece1c8;    /* luz tenue del turno vivo */
  --paper-warm:#f7f3ea;   /* papel apenas más cálido — sólo fondo del body */
  /* Luz del hero (glow r2) — sólo se usan en el resplandor del hero, no en el resto */
  --glow-core:#fcf8ef;    /* núcleo del resplandor: marfil casi blanco, más claro que el papel */
  --glow-warm:#f1e6cd;    /* halo miel tenue, puente entre el núcleo y el papel */
  --display:'Fraunces',Georgia,serif;
  --body:'Archivo',system-ui,sans-serif;
  --label:'Archivo',system-ui,sans-serif;
  --measure:760px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper-warm);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
.wrap{max-width:var(--measure);margin:0 auto;padding-inline:clamp(1.2rem,5vw,2rem)}
.wrap-wide{max-width:1080px;margin:0 auto;padding-inline:clamp(1.2rem,5vw,2.4rem)}

::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:1px}

/* ============================================================
   Skip link (accesibilidad)
   ============================================================ */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--paper);
  font-family:var(--label);font-size:13px;font-weight:600;
  padding:.65rem 1rem;border-radius:0 0 6px 0;
}
.skip-link:focus{left:0}

/* ============================================================
   Masthead — logo + idioma
   ============================================================ */
.masthead{padding-block:clamp(1rem,3.2vw,1.7rem)}
.mast-inner{max-width:1040px;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.brand{display:inline-flex;line-height:0;border-radius:4px}
.brand img{
  width:clamp(150px,22vw,224px);height:auto;display:block;
  mix-blend-mode:multiply; /* funde el fondo blanco del PNG en el papel miel */
}
.lang{display:inline-flex;gap:.9rem;flex-shrink:0}
.lang button{
  font-family:var(--label);font-size:12px;font-weight:600;letter-spacing:.1em;
  background:none;border:none;color:var(--faint);cursor:pointer;padding:.2rem 0;
  position:relative;line-height:1;
}
.lang button.active{color:var(--ink)}
.lang button.active::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--gold)}

@media (max-width:560px){
  .mast-inner{flex-direction:column;gap:.85rem}   /* móvil: logo centrado arriba */
  .brand img{width:200px}
}

/* ============================================================
   Hero — editorial, contemplativo. La paz por composición y aire,
   no por ilustración. Único elemento gráfico: una hebra de cuentas
   del rosario (abstracta), tomada del logo.
   ============================================================ */
.hero{
  max-width:1120px;
  display:grid;grid-template-columns:.92fr 1.22fr;align-items:center;
  gap:clamp(1rem,3vw,2.6rem);
  padding-block:clamp(2rem,6vw,4.6rem) clamp(1.6rem,5vw,3.4rem);
  position:relative;isolation:isolate;   /* encierra el glow detrás del contenido */
}
/* ----------------------------------------------------------------
   GLOW DEL HERO — AJUSTE INTENCIONAL inspirado en la referencia r2.
   Excepción consciente a "sin gradientes": UN radial-gradient cálido,
   sólo acá, detrás del texto y del rosario. NO replicar en el resto.
   Un radial-gradient pinta color en círculos desde un punto y se apaga
   hacia afuera: foco marfil luminoso arriba-derecha (78% 34%, donde está
   el rosario) que se desvanece a transparente, simulando luz que irradia.
   ---------------------------------------------------------------- */
.hero::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:-12% -10% -22% -6%;
  background:radial-gradient(58% 72% at 78% 34%,
              var(--glow-core) 0%,
              var(--glow-warm) 40%,
              transparent 74%);
}
.hero-text{min-width:0}
.eyebrow{
  font-family:var(--label);font-size:11px;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--grey);
  display:inline-flex;align-items:center;gap:.55rem;margin-bottom:clamp(1.1rem,2.5vw,1.6rem);
}
.eyebrow::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none}
h1{
  font-family:var(--display);font-weight:400;font-optical-sizing:auto;
  font-size:clamp(2.5rem,7vw,4.8rem);line-height:1;
  letter-spacing:-.022em;max-width:12ch;overflow-wrap:break-word;color:var(--ink);
}
.lede{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.22rem,2.4vw,1.62rem);line-height:1.4;letter-spacing:-.01em;
  color:var(--grey);max-width:26ch;margin-top:clamp(1.3rem,3vw,1.9rem);
}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1.3rem;margin-top:clamp(1.7rem,4vw,2.5rem)}

/* rosario (r3): imagen fundida en el papel — sin bordes */
.hero-figure{margin:0;display:flex;justify-content:flex-end;align-items:center}
.hero-figure img{
  width:100%;max-width:700px;height:auto;
  mix-blend-mode:multiply;            /* el fondo claro de la foto se funde en el papel */
  /* el radio se mide respecto al tamaño de la imagen: con ~90% los bordes caen
     en la zona transparente y el rectángulo desaparece; el rosario queda parejo */
  -webkit-mask-image:radial-gradient(90% 84% at 54% 50%, #000 34%, transparent 72%);
          mask-image:radial-gradient(90% 84% at 54% 50%, #000 34%, transparent 72%);
}
@media (max-width:820px){
  .hero{grid-template-columns:1fr;gap:.2rem}
  .hero-text{order:1}
  .hero-figure{order:2;justify-content:center;margin-top:.4rem}
  .hero-figure img{width:min(94vw,560px);max-width:none}
  h1,.lede{max-width:none}
  /* en móvil el rosario baja al centro: el glow lo sigue (centro-abajo) */
  .hero::before{
    inset:-6% -10% -14% -10%;
    background:radial-gradient(78% 48% at 50% 70%,
                var(--glow-core) 0%,
                var(--glow-warm) 42%,
                transparent 76%);
  }
}
.btn-primary{
  font-family:var(--label);font-size:13px;font-weight:600;letter-spacing:.02em;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  padding:.8rem 1.55rem;border-radius:8px;text-decoration:none;cursor:pointer;
  display:inline-flex;align-items:center;transition:background .15s ease,border-color .15s ease;
}
.btn-primary:hover{background:var(--gold);border-color:var(--gold)}
.btn-link{
  font-family:var(--label);font-size:13px;font-weight:600;letter-spacing:.02em;
  color:var(--grey);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px;
  transition:color .15s ease,border-color .15s ease;
}
.btn-link:hover{color:var(--ink);border-color:var(--gold)}

/* ============================================================
   Métricas — prueba social
   ============================================================ */
.metrics{
  max-width:1040px;display:flex;flex-wrap:wrap;gap:1.3rem 3.4rem;
  padding-block:clamp(1.2rem,3vw,1.8rem);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.metric{display:flex;align-items:center;gap:.85rem}
.metric .m-ic{width:30px;height:30px;color:var(--gold);flex:none}
.metric .m-num{font-family:var(--display);font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.metric .m-label{font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);max-width:13ch;line-height:1.35}

/* ============================================================
   Cita
   ============================================================ */
.quote{text-align:center;padding-block:clamp(2.4rem,6vw,4rem)}
.quote blockquote{
  font-family:var(--display);font-weight:400;font-style:italic;
  font-size:clamp(1.4rem,3.2vw,2.05rem);line-height:1.32;letter-spacing:-.01em;
  color:var(--ink);max-width:24ch;margin:0 auto 1.1rem;
}
.quote cite{
  font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);font-style:normal;
}
.quote cite::before{content:"";display:block;width:34px;height:2px;background:var(--gold);margin:0 auto 1rem}

/* ============================================================
   Sección del tablero
   ============================================================ */
.board-section{padding-block:clamp(1rem,3vw,1.6rem) clamp(2.5rem,7vw,4.5rem)}
.section-h{
  font-family:var(--display);font-weight:400;font-optical-sizing:auto;
  font-size:clamp(1.9rem,4.5vw,2.8rem);line-height:1.02;
  letter-spacing:-.015em;margin-bottom:.7rem;
}
.board-intro{font-size:.98rem;color:var(--grey);max-width:54ch;line-height:1.6;margin-bottom:1.9rem}

/* meta: semana + cobertura, como sumario editorial */
.meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .9rem;margin-bottom:1.8rem}
.meta .week{font-family:var(--display);font-size:clamp(1.1rem,2.2vw,1.35rem);color:var(--grey);font-style:italic}
.meta .cover{
  font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);
}
.meta .cover::before{content:"·";margin-right:.7rem;color:var(--line)}

/* avisos */
.banner{
  font-family:var(--label);font-size:12.5px;color:var(--grey);
  border-left:2px solid var(--gold);padding:.4rem 0 .4rem .9rem;margin-bottom:1.6rem;
}
.confirm{
  display:flex;align-items:center;flex-wrap:wrap;gap:.6rem 1.1rem;
  background:var(--gold-wash);border-left:2px solid var(--gold);
  padding:1rem 1.2rem;margin-bottom:1.8rem;
}
.confirm .ctxt{font-size:.96rem;color:var(--ink);flex:1 1 17rem;line-height:1.5}
.confirm .addcal{
  font-family:var(--label);font-size:12.5px;font-weight:600;letter-spacing:.04em;
  background:var(--ink);color:var(--paper);border:none;
  padding:.55rem 1rem;cursor:pointer;flex-shrink:0;
}
.confirm .addcal:hover{background:#000}
.confirm .cclose{
  font-family:var(--label);font-size:12px;color:var(--grey);
  background:none;border:none;cursor:pointer;text-decoration:underline;text-underline-offset:2px;
}

/* ============================================================
   Selector de día — nav editorial (sin pills)
   ============================================================ */
.tabs{
  display:flex;flex-wrap:wrap;gap:0 clamp(.9rem,2.5vw,1.7rem);
  border-bottom:1px solid var(--line);margin-bottom:1.5rem;
}
.tab{
  position:relative;background:none;border:none;cursor:pointer;
  display:flex;align-items:baseline;gap:.42rem;
  padding:.55rem 0 .75rem;color:var(--faint);
  font-family:var(--label);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
}
.tab .tnum{font-family:var(--display);font-size:1.15rem;letter-spacing:-.01em;color:inherit;text-transform:none}
.tab .tcov{font-size:9.5px;font-weight:600;letter-spacing:.02em;color:var(--faint);opacity:.8}
.tab:hover{color:var(--grey)}
.tab.active{color:var(--ink)}
.tab.active .tcov{color:var(--gold)}
.tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold)}
.tab.today .tnum::after{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--gold);margin-left:.3rem;vertical-align:middle}

/* ============================================================
   Zona horaria — minimal, subrayado serif
   ============================================================ */
.tzrow{display:flex;align-items:baseline;flex-wrap:wrap;gap:.5rem .8rem;margin-bottom:2.2rem}
.tzrow label{
  font-family:var(--label);font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);
}
.tzrow select{
  font-family:var(--display);font-size:1.02rem;color:var(--ink);
  background:none;border:none;border-bottom:1px solid var(--ink);border-radius:0;
  padding:.1rem 1.4rem .2rem .1rem;cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%232a2218' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .25rem center;
}
.tzrow select:focus{outline:none;border-bottom-color:var(--gold)}
.tzrow .tznote{font-family:var(--label);font-size:11px;color:var(--faint);flex:1 1 15rem;line-height:1.5;min-width:0}

/* ============================================================
   La vigilia — turnos compactos y expandibles
   ------------------------------------------------------------
   Una sola línea continua (la cadena) atraviesa los nodos. Cada
   turno es un resumen clickable (botón, accesible por teclado)
   que expande su detalle. Estados: vacío (hueco) · cubierto
   (lleno) · ahora (dorado, encendido).
   ============================================================ */
.timeline{position:relative;list-style:none}
.timeline::before{content:"";position:absolute;left:6px;top:1.4rem;bottom:1.4rem;width:1px;background:var(--line)}
.slot{position:relative}
.slot + .slot{border-top:1px solid var(--line-soft)}

/* resumen: botón a fila completa */
.slot-summary{
  width:100%;background:none;border:none;cursor:pointer;text-align:left;color:inherit;
  font-family:inherit;position:relative;
  display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:.9rem;
  padding:.9rem 0 .9rem 2.3rem;
}
.slot-summary:hover .s-time{color:var(--gold)}

/* nodo sobre la línea */
.node{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:13px;height:13px;border-radius:50%;box-sizing:border-box;
  background:var(--paper);border:1.5px solid var(--faint);
}
.slot.has .node{background:var(--grey);border-color:var(--grey)}
.slot.now .node{
  background:var(--gold);border-color:var(--gold);
  box-shadow:0 0 0 5px var(--gold-wash),0 0 12px 1px rgba(169,138,75,.5);
  animation:beat 2.8s ease-in-out infinite;
}
@keyframes beat{
  0%,100%{box-shadow:0 0 0 5px var(--gold-wash),0 0 0 0 rgba(169,138,75,.45)}
  50%{box-shadow:0 0 0 5px var(--gold-wash),0 0 12px 3px rgba(169,138,75,.5)}
}

.s-time{
  font-family:var(--display);font-size:clamp(1.2rem,2.6vw,1.55rem);line-height:1;
  letter-spacing:-.01em;color:var(--ink);font-variant-numeric:lining-nums tabular-nums;
}
.slot.empty .s-time{color:var(--grey)}
.slot.now .s-time{color:#7c6431}
.s-end{color:var(--faint);font-size:.82em}
.s-status{display:inline-flex;align-items:center;gap:.8rem}
.s-count{font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--grey);white-space:nowrap}
.slot.empty .s-count{color:var(--faint)}
.now-tag{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--label);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
}
.now-tag .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:beat 2.6s ease-in-out infinite}
.chev{
  width:9px;height:9px;border-right:1.5px solid var(--faint);border-bottom:1.5px solid var(--faint);
  transform:rotate(45deg);transition:transform .18s ease;margin-right:.15rem;
}
.slot-summary[aria-expanded=true] .chev{transform:rotate(-135deg)}

/* detalle expandible */
.slot-detail{padding:0 0 1.3rem 2.3rem}
.slot-local{font-family:var(--label);font-size:11px;color:var(--faint);display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;margin-bottom:.55rem}
.slot-local .lt{letter-spacing:.1em;text-transform:uppercase}
.slot-local .lh{font-family:var(--display);font-size:.95rem;color:var(--grey)}
.slot-people{font-size:.95rem;color:var(--ink);line-height:1.5}
.slot-people .empty{color:var(--faint);font-style:italic}
.slot-side{display:flex;align-items:center;gap:1.2rem;margin-top:.85rem}
.join{
  font-family:var(--label);font-size:13px;font-weight:600;letter-spacing:.02em;
  background:none;border:none;color:var(--ink);cursor:pointer;padding:0;
  display:inline-flex;align-items:center;gap:.4rem;
}
.join .arw{transition:transform .15s ease;color:var(--gold)}
.join:hover{color:var(--gold)}
.join:hover .arw{transform:translateX(3px)}
.slot.empty .join{color:var(--gold)}
.leave{
  font-family:var(--label);font-size:11.5px;color:var(--faint);
  background:none;border:none;cursor:pointer;text-decoration:underline;text-underline-offset:2px;
}
.leave:hover{color:var(--ink)}

/* formularios inline — inputs subrayados, sin cajas */
.form{display:none;flex-wrap:wrap;align-items:flex-end;gap:1rem 1.4rem;margin-top:1rem;padding-top:1rem;border-top:1px dashed var(--line)}
.form.open{display:flex;animation:fade .18s ease}
@keyframes fade{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.form .row{display:flex;flex-direction:column;gap:.3rem;flex:1 1 12rem;min-width:0}
.form label{font-family:var(--label);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
.form input{
  font-family:var(--body);font-size:.96rem;color:var(--ink);
  background:none;border:none;border-bottom:1px solid var(--faint);border-radius:0;padding:.35rem 0;width:100%;
}
.form input::placeholder{color:var(--faint);opacity:.7}
.form input:focus{outline:none;border-bottom-color:var(--gold)}
.form button[type=submit]{
  font-family:var(--label);font-size:12.5px;font-weight:600;letter-spacing:.04em;
  background:var(--ink);color:var(--paper);border:none;padding:.55rem 1.1rem;cursor:pointer;white-space:nowrap;
}
.form button[type=submit]:hover{background:#000}
.form button[type=submit]:disabled{opacity:.5;cursor:default}
.form .cancel{
  font-family:var(--label);font-size:11.5px;color:var(--grey);
  background:none;border:none;cursor:pointer;text-decoration:underline;text-underline-offset:2px;
}

.note{font-family:var(--label);font-size:11px;color:var(--faint);margin-top:2.4rem;line-height:1.7;max-width:62ch}
.state{font-family:var(--label);font-size:13px;font-weight:500;color:var(--grey);padding:3rem 0;text-align:center}

/* skeleton loader */
.skeleton .sk-row{position:relative;display:grid;grid-template-columns:120px 1fr;align-items:center;gap:.9rem;padding:.9rem 0 .9rem 2.3rem}
.skeleton .sk-row + .sk-row{border-top:1px solid var(--line-soft)}
.sk-node,.sk-time,.sk-status{
  background:linear-gradient(90deg,var(--line-soft) 25%,var(--gold-wash) 50%,var(--line-soft) 75%);
  background-size:200% 100%;animation:sk 1.3s ease-in-out infinite;border-radius:4px;
}
.sk-node{position:absolute;left:0;top:50%;transform:translateY(-50%);width:13px;height:13px;border-radius:50%}
.sk-time{height:20px;width:108px}
.sk-status{height:11px;width:55%;max-width:160px;justify-self:end}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* móvil: el resumen pasa a dos filas */
@media (max-width:480px){
  .slot-summary{grid-template-columns:1fr auto;row-gap:.3rem}
  .s-status{grid-column:1 / -1;justify-self:start}
  .chev{grid-column:2;grid-row:1;align-self:center}
}

/* ============================================================
   Pie de página
   ============================================================ */
.site-footer{background:var(--footer);border-top:1px solid var(--line);margin-top:1rem}
.foot-grid{
  max-width:1040px;
  display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2.2rem;
  padding-block:clamp(2.6rem,6vw,3.8rem) 1.8rem;
}
@media (max-width:680px){.foot-grid{grid-template-columns:1fr 1fr}.foot-about{grid-column:1/-1}}
@media (max-width:420px){.foot-grid{grid-template-columns:1fr;gap:1.6rem}}
.foot-logo{width:184px;height:auto;display:block;margin-bottom:1.1rem;mix-blend-mode:multiply}
.foot-col h3{font-family:var(--display);font-weight:400;font-size:1.22rem;margin-bottom:1rem;letter-spacing:-.01em}
.foot-about p{font-size:.92rem;color:var(--grey);max-width:32ch;line-height:1.55}
.foot-links{display:flex;flex-direction:column;gap:.6rem}
.foot-links a{
  font-family:var(--label);font-size:.9rem;color:var(--grey);text-decoration:none;
  width:max-content;border-bottom:1px solid transparent;padding-bottom:1px;
}
.foot-links a:hover{color:var(--ink);border-color:var(--gold)}
.foot-social{display:flex;gap:.6rem}
.foot-social a{
  display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border:1px solid var(--line);border-radius:50%;color:var(--grey);
  transition:color .12s ease,border-color .12s ease;
}
.foot-social a:hover{color:var(--ink);border-color:var(--gold)}
.foot-social svg{width:18px;height:18px}
.foot-bottom{max-width:1040px;padding-block:1.3rem 2rem;border-top:1px solid var(--line)}
.foot-bottom span{font-family:var(--label);font-size:10.5px;letter-spacing:.05em;color:var(--faint)}

/* ============================================================
   Movimiento reducido
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .slot.now .node{box-shadow:0 0 0 5px var(--gold-wash)}
}

/* ============================================================
   Modal de guías ("Qué y cómo rezar" / "Acerca de…")
   <dialog> nativo: foco atrapado, Esc para cerrar y backdrop propios.
   ============================================================ */
.guia{
  border:none;padding:0;margin:auto;
  width:min(640px,calc(100% - 2.4rem));max-height:85vh;overflow:auto;
  background:var(--paper);color:var(--ink);
  box-shadow:0 12px 44px rgba(38,36,31,.24);
}
.guia::backdrop{background:rgba(38,36,31,.46)}
.guia-box{padding:clamp(1.5rem,4vw,2.5rem);position:relative}
.guia-close{
  position:absolute;top:.6rem;right:.8rem;
  background:none;border:none;font-size:1.6rem;line-height:1;
  color:var(--grey);cursor:pointer;padding:.2rem;
}
.guia-close:hover{color:var(--ink)}
.guia-box h2{
  font-family:var(--display);font-weight:400;font-optical-sizing:auto;
  font-size:clamp(1.5rem,4vw,2.1rem);line-height:1.1;letter-spacing:-.02em;
  max-width:20ch;margin-bottom:1rem;padding-right:1.5rem;
}
.guia-intro{font-family:var(--display);color:var(--grey);margin-bottom:1.3rem;line-height:1.4}
.guia-det{border-top:1px solid var(--line)}
.guia-det:last-of-type{border-bottom:1px solid var(--line)}
.guia-det summary{
  cursor:pointer;list-style:none;padding:.95rem 0;
  font-family:var(--label);font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;color:var(--ink);
}
.guia-det summary::-webkit-details-marker{display:none}
.guia-det summary::after{content:"+";color:var(--gold);font-size:1.2rem;line-height:1}
.guia-det[open] summary::after{content:"–"}
.guia-cont{padding:0 0 1.1rem;line-height:1.62}
.guia-cont p{margin-bottom:.7rem}
.guia-cont p:last-child{margin-bottom:0}
.guia-fuente{margin-top:1.4rem;font-family:var(--label);font-size:11px;letter-spacing:.04em;color:var(--faint)}

/* línea de contacto del footer (WhatsApp para consultas) */
.foot-contact-nota{margin-top:.9rem;font-size:.9rem}
.foot-contact-nota a{color:var(--grey);text-decoration:none;border-bottom:1px solid var(--line)}
.foot-contact-nota a:hover{color:var(--ink);border-color:var(--gold)}