@charset "utf-8";
/* IX Feria del Libro de San Borja — hoja del sitio público.
   Paleta y tipografía salen del brandbook (Montserrat + 15 colores). Todo es
   color plano: sin degradados, sin sombras, sin filetes. Las superficies se
   separan por cambio de tono. */
:root{
  --azul:#1467F7; --tinta:#00134A; --rojo:#901A10; --crema:#FEE189; --amarillo:#FED559;
  --papel:#F8F7F0; --verde:#249E80; --verde-hondo:#0D8A7C; --naranja:#E57840; --rosa:#F7AD8D;
  --rosa-claro:#FDCDC6; --lila:#DADAF7; --ladrillo:#A03D21; --vino:#52252D; --rojo-vivo:#E93D1D;
  --tono-presentacion:var(--verde); --tono-conversatorio:var(--azul); --tono-taller:var(--amarillo);
  --tono-infantil:var(--naranja); --tono-cultural:var(--rojo); --tono-firma:var(--rosa);
  --m:clamp(16px,3vw,40px);
  --nav-h:56px;
  --hv:min(100svh,54rem);   /* altura de la portada: acotada para monitores enormes */
  --f:'Montserrat',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--crema);color:var(--tinta);font:500 clamp(16px,1.1vw + 10px,19px)/1.55 var(--f);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--azul);outline-offset:3px;border-radius:4px}
.sec--tinta :focus-visible,.sec--rojo :focus-visible,.sec--azul :focus-visible,.nav :focus-visible,.pie :focus-visible{outline-color:var(--amarillo)}
[hidden]{display:none!important}
.oculto-visual{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.salto{position:fixed;left:var(--m);top:-60px;z-index:100;background:var(--tinta);color:#fff;padding:.7rem 1rem;border-radius:6px}
.salto:focus{top:10px}
::selection{background:var(--rojo);color:var(--crema)}

/* ---------- barra ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--nav-h);display:flex;align-items:center;
  justify-content:space-between;padding:0 var(--m);background:var(--rojo);color:var(--crema)}
.nav__marca{text-decoration:none;display:flex;align-items:center}
.sigla{display:inline-flex;align-items:center;gap:.28em;font-weight:900;line-height:.8;font-size:1.9rem}
.sigla b{color:var(--verde);font-weight:900;letter-spacing:-.04em}
.sigla i{font-style:normal;font-weight:800;font-size:.38em;line-height:1.05;color:#fff;letter-spacing:.02em}
.nav__links{display:flex;align-items:center;gap:.35rem}
.nav__links a,.nav__instalar{padding:.5rem .9rem;border-radius:999px;text-decoration:none;font-weight:700;font-size:.92rem;
  background:none;border:0;color:inherit}
.nav__links a:hover,.nav__instalar:hover{background:rgba(254,225,137,.16)}
.nav__instalar{background:rgba(254,225,137,.16)}
.nav__hamb{display:none;width:44px;height:44px;border:0;background:none;position:relative}
.nav__barra,.nav__barra::before{position:absolute;left:11px;right:11px;height:3px;background:var(--crema);border-radius:2px;
  transition:transform .25s ease}
.nav__barra{top:19px}.nav__barra::before{content:"";left:0;right:0;top:9px}
.nav.abierta .nav__barra{transform:translateY(5px) rotate(45deg)}
.nav.abierta .nav__barra::before{transform:translateY(-9px) rotate(-90deg)}
@media(max-width:760px){
  .nav__hamb{display:block}
  .nav__links{position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--rojo);padding:.5rem var(--m) 1.2rem;transform:translateY(-12px);opacity:0;visibility:hidden;
    transition:transform .25s ease,opacity .2s ease,visibility 0s .25s}
  .nav.abierta .nav__links{transform:none;opacity:1;visibility:visible;transition-delay:0s}
  .nav__links a,.nav__instalar{font-size:1.4rem;padding:.8rem 0;border-radius:0;text-align:left;background:none}
}

/* ---------- botones: uno solo es lleno ---------- */
.boton{display:inline-block;background:var(--rojo);color:var(--crema);font-weight:800;text-decoration:none;
  padding:1.05em 1.9em;border-radius:999px;border:0;transition:transform .2s ease,background-color .2s ease}
.boton:hover{background:#7a150d;transform:translateY(-2px)}
.boton:active{transform:scale(.97)}
.boton--claro{background:var(--crema);color:var(--tinta)}
.boton--claro:hover{background:#fff}

/* ---------- portada ---------- */
.hero{position:relative;min-height:var(--hv);padding:calc(var(--nav-h) + clamp(28px,5vw,64px)) var(--m) clamp(28px,4vw,56px);
  background:var(--crema);overflow:hidden;display:grid;align-items:center}
.hero__texto{position:relative;z-index:3;max-width:62vw}
.lockup{display:flex;align-items:center;gap:.06em;color:var(--rojo);line-height:.9;font-size:clamp(2.6rem,6.3vw,7.2rem);font-weight:900}
.lockup__ix{font-size:2.05em;font-weight:900;letter-spacing:-.07em;line-height:.74;margin-right:.02em}
.lockup__nombre{font-weight:600;letter-spacing:-.03em;line-height:.98;white-space:nowrap}
.lockup__nombre b{font-weight:800}
.hero__fecha{margin-top:clamp(20px,2.6vw,40px);font-size:clamp(2rem,4.6vw,4.8rem);font-weight:800;color:var(--tinta);
  letter-spacing:-.035em;line-height:1}
.hero__lugar{margin-top:.7rem;font-size:clamp(1.05rem,1.7vw,1.55rem);font-weight:600}
.hero__acciones{margin-top:clamp(22px,3vw,40px)}
.hero__cielo,.hero__arte,.hero__suelo{position:absolute;inset:0;pointer-events:none}
.hero__sol{position:absolute;right:9vw;top:calc(var(--hv)*0.09);width:min(40vw,calc(var(--hv)*0.58),600px);will-change:transform}
.hero__nube{position:absolute;width:clamp(150px,18vw,300px);opacity:.95}
.hero__nube--a{top:calc(var(--hv)*0.16);left:-20vw;animation:deriva 90s linear infinite}
.hero__nube--b{top:calc(var(--hv)*0.3);left:-30vw;width:clamp(110px,12vw,210px);animation:deriva 130s linear -50s infinite}
@keyframes deriva{to{transform:translateX(140vw)}}
.hero__arte{z-index:2}
.hero__naylamp{position:absolute;right:1vw;bottom:calc(var(--hv)*-0.02);height:min(calc(var(--hv)*0.86),58vw);width:auto;max-width:none;
  animation:flota 7s ease-in-out infinite;transform-origin:50% 100%}
@keyframes flota{50%{transform:translateY(calc(var(--hv)*-0.014)) rotate(.6deg)}}
.hero__suelo{z-index:1}
.arbol{position:absolute;bottom:calc(var(--hv)*-0.02);width:clamp(90px,12vw,200px)}
.arbol{left:auto}.arbol--a{left:44vw;width:clamp(80px,9vw,150px)}.arbol--b{left:51vw;width:clamp(60px,6vw,110px)}
@media(max-width:760px){
  .hero{align-items:start;min-height:var(--hv)}
  .hero__texto{max-width:none}
  .lockup{font-size:clamp(1.7rem,7.1vw,3.4rem)}
  .hero__fecha{font-size:clamp(2rem,10.5vw,3.4rem)}
  .hero__sol{width:64vw;right:-4vw;top:auto;bottom:calc(var(--hv)*0.24)}
  .hero__naylamp{height:min(calc(var(--hv)*0.52),112vw);right:0;bottom:calc(var(--hv)*-0.02)}
  .arbol--a{left:-6vw}.arbol--b{left:16vw}
}

/* ---------- secciones ---------- */
.sec{padding:clamp(72px,11vw,176px) var(--m)}
.sec--tinta{background:var(--tinta);color:var(--crema)}
.sec--papel{background:var(--papel);color:var(--tinta)}
.sec--verde{background:var(--verde);color:var(--tinta)}
.sec--rojo{background:var(--rojo);color:var(--crema)}
.sec--rosa{background:var(--rosa-claro);color:var(--tinta)}
.sec--azul{background:var(--azul);color:#fff}
.grande{font-size:clamp(2.6rem,8.2vw,8.2rem);font-weight:800;letter-spacing:-.045em;line-height:.95}
.intro{max-width:46ch;margin-top:clamp(20px,2.6vw,36px);font-size:clamp(1.1rem,1.5vw,1.45rem);font-weight:500;line-height:1.5}

/* la feria en números */
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,3vw,48px);margin-top:clamp(40px,6vw,96px)}
.cifras li{display:flex;flex-direction:column;gap:.2em}
.cifras b{font-size:clamp(3.4rem,10vw,10rem);font-weight:900;letter-spacing:-.06em;line-height:.85;color:var(--amarillo);
  font-variant-numeric:tabular-nums}
.cifras span{font-size:clamp(1rem,1.6vw,1.5rem);font-weight:700}
.lectores{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(4px,1.5vw,24px);
  margin-top:clamp(48px,7vw,112px)}
/* Misma altura para los cinco: así todos tienen la misma escala aunque la chica leyendo sea más ancha. */
.lectores img{flex:none;height:clamp(76px,calc((100vw - 2 * var(--m)) / 4.5),340px);width:auto;max-width:none;
  transform-origin:50% 100%}
.lectores img:nth-child(odd){animation:cabecea 6s ease-in-out infinite}
.lectores img:nth-child(even){animation:cabecea 7.5s ease-in-out -2s infinite}
@keyframes cabecea{50%{transform:translateY(-.8%) rotate(-.8deg)}}
@media(max-width:760px){.cifras{grid-template-columns:repeat(2,1fr);row-gap:36px}}

/* programa */
.programa{margin-top:clamp(32px,5vw,72px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  grid-template-areas:"cab cab" "dia lista";column-gap:clamp(24px,4vw,72px);row-gap:clamp(24px,3vw,40px)}
.programa__cab{grid-area:cab;display:flex;flex-direction:column;gap:14px}
.programa__dia{grid-area:dia;align-self:start;position:sticky;top:calc(var(--nav-h) + 24px);
  font-size:clamp(3.2rem,9vw,9rem);font-weight:900;letter-spacing:-.06em;line-height:.88;color:var(--rojo)}
.programa__dia small{display:block;margin-top:.35em;font-size:clamp(1rem,1.6vw,1.45rem);letter-spacing:0;font-weight:700;color:var(--tinta)}
.dias{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.dia{flex:none;min-width:64px;padding:.7rem .5rem;border:0;border-radius:14px;background:#EAE7DA;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:2px;transition:background-color .2s ease,transform .2s ease}
.dia b{font-size:1.5rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.dia span{font-size:.78rem;font-weight:700;text-transform:none}
.dia:hover{background:#DEDAC8}
.dia:active{transform:scale(.96)}
.dia[aria-pressed=true]{background:var(--rojo);color:var(--crema)}
.dia--hoy b::after{content:"";display:block;width:6px;height:6px;border-radius:50%;background:currentColor;margin:4px auto 0}
.tipos{display:flex;flex-wrap:wrap;gap:8px}
.tipo{display:inline-flex;align-items:center;gap:.5em;padding:.55rem 1rem;border:0;border-radius:999px;background:#EAE7DA;
  font-weight:700;font-size:.9rem;transition:background-color .2s ease,transform .2s ease}
.tipo i{width:.8em;height:.8em;border-radius:50%;background:var(--c,var(--tinta))}
.tipo:hover{background:#DEDAC8}
.tipo:active{transform:scale(.96)}
.tipo[aria-pressed=true]{background:var(--tinta);color:var(--crema)}
.programa>*{min-width:0}
.lista{grid-area:lista;display:flex;flex-direction:column;gap:10px}
.act{background:#fff;border-radius:16px;border-left:10px solid var(--c,var(--tinta));transition:transform .2s ease,background-color .2s ease}
.act--dest{background:var(--amarillo)}
.act:hover{transform:translateX(4px)}
.act__abrir{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:5.2rem minmax(0,1fr) auto;gap:1rem;
  align-items:start;padding:1.1rem 1.1rem 1.1rem 1.1rem;border-radius:6px 16px 16px 6px}
.act__abrir:focus-visible{outline:3px solid var(--azul);outline-offset:2px}
.act__hora{font-weight:800;font-size:1.25rem;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
.act__hora small{display:block;font-weight:600;font-size:.82rem;letter-spacing:0;opacity:.8}
.act__cuerpo{display:flex;flex-direction:column;align-items:flex-start}
.act__titulo{font-weight:800;font-size:clamp(1.1rem,1.5vw,1.4rem);letter-spacing:-.02em;line-height:1.2}
.act__meta{margin-top:.3rem;font-size:.95rem;font-weight:500}
.act__tag{display:inline-block;margin-top:.55rem;font-size:.82rem;font-weight:700;padding:.25rem .7rem;border-radius:999px;
  background:var(--c);color:var(--tinta)}
.act[style*="--c:var(--rojo)"] .act__tag,.detalle--rojo .act__tag{color:var(--crema)}
.act[style*="--c:var(--azul)"] .act__tag,.detalle--azul .act__tag{color:#fff}
.act__mas{align-self:center;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--tinta);color:var(--crema);display:grid;place-items:center;
  font-size:1.5rem;font-weight:700;line-height:1;transition:transform .25s ease}
.act:hover .act__mas{transform:rotate(90deg)}
.vacio{padding:2rem 0;font-size:1.2rem;font-weight:600}
@media(max-width:860px){
  .programa{grid-template-columns:minmax(0,1fr);grid-template-areas:"cab" "dia" "lista"}
  .programa__dia{position:static}
  .act__abrir{grid-template-columns:4rem minmax(0,1fr) auto;gap:.8rem}
}

/* región invitada */
.region{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,72px);align-items:end}
.region .intro{color:var(--tinta)}
.regionales{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(24px,3vw,40px)}
.regionales li{background:var(--crema);padding:.55rem 1.1rem;border-radius:999px;font-weight:700;font-size:.95rem}
.region__arte{position:relative;display:flex;flex-direction:column;align-items:center;gap:clamp(16px,2vw,32px)}
.region__logo{width:min(100%,25rem);background:var(--crema);border-radius:24px;padding:clamp(16px,2.4vw,32px)}
.region__naylamp{height:clamp(240px,34vw,520px);width:auto;animation:flota 8s ease-in-out infinite}
@media(max-width:860px){.region{grid-template-columns:1fr}.region__logo{width:min(100%,22rem)}}

/* invitados */
.invitados{margin-top:clamp(36px,5vw,80px);display:flex;flex-direction:column;gap:clamp(28px,4vw,60px)}
.grupo h3{font-size:clamp(1rem,1.5vw,1.35rem);font-weight:700;color:var(--rosa);margin-bottom:.6rem}
.invitado{border-radius:20px;transition:background-color .2s ease}
.invitado summary{list-style:none;display:flex;align-items:baseline;justify-content:space-between;gap:1rem;cursor:pointer;
  padding:.18em .3em;font-size:clamp(2rem,5.6vw,5.4rem);font-weight:800;letter-spacing:-.045em;line-height:1.02;border-radius:20px}
.invitado summary::-webkit-details-marker{display:none}
.invitado summary:hover{background:rgba(254,225,137,.1)}
.invitado__rol{font-size:clamp(.9rem,1.3vw,1.2rem);font-weight:600;letter-spacing:0;text-align:right;flex:none;max-width:16ch;color:var(--rosa)}
.invitado[open]{background:var(--crema);color:var(--tinta)}
.invitado[open] summary:hover{background:none}
.invitado[open] .invitado__rol{color:var(--rojo)}
.invitado__cuerpo{display:grid;grid-template-columns:clamp(150px,22vw,300px) minmax(0,1fr);gap:clamp(16px,3vw,40px);
  align-items:start;padding:.6rem clamp(.3em,2vw,1.2em) 1.6rem}
.invitado__foto{aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:var(--rojo);display:flex;align-items:center;justify-content:center}
.invitado__foto img{width:100%;height:100%;object-fit:cover}
.invitado__foto--vacia{background:var(--verde)}
.invitado__foto--vacia span{font-size:clamp(3rem,7vw,6rem);font-weight:900;letter-spacing:-.05em;color:var(--crema)}
.invitado__texto{max-width:62ch;font-weight:500;padding-top:.2rem}
.invitado__texto p+p{margin-top:.8rem}
.invitado__texto ul{margin-top:1rem;display:flex;flex-direction:column;gap:.4rem;font-size:.95rem}
.invitado__texto li b{font-variant-numeric:tabular-nums}
@media(max-width:620px){.invitado__cuerpo{grid-template-columns:minmax(0,9rem) minmax(0,1fr);align-items:start}}
@media(max-width:620px){.invitado summary{flex-direction:column;gap:.3rem}.invitado__rol{text-align:left;max-width:none}}

/* stands */
.buscador{margin-top:clamp(28px,4vw,48px);max-width:34rem}
.buscador input{width:100%;padding:1rem 1.4rem;border:0;border-radius:999px;background:#fff;font-weight:600;font-size:1.05rem}
.buscador input::placeholder{color:#6B7399}
.buscador__estado{margin-top:.6rem;min-height:1.5em;font-weight:600;font-size:.95rem}
.plano{margin-top:clamp(20px,3vw,40px);background:var(--crema);border-radius:24px;padding:clamp(14px,2vw,28px)}
.plano__scroll{overflow-x:auto;overscroll-behavior-x:contain;border-radius:12px}
.calle{min-width:62rem;display:flex;flex-direction:column;gap:clamp(8px,1vw,14px);padding:.5rem}
.calle__rotulo{font-size:clamp(1.6rem,4vw,3.4rem);font-weight:900;letter-spacing:.14em;color:var(--rosa);text-align:center;
  text-transform:uppercase;line-height:1;padding:.1em 0}
.calle__portadas{display:flex;justify-content:space-between;font-size:.8rem;font-weight:700;color:var(--ladrillo)}
.hilera{display:flex;gap:clamp(14px,2.4vw,36px);align-items:stretch;justify-content:space-between}
.hilera__grupo{display:grid;grid-auto-flow:column;gap:5px;flex:none}
.hilera--centro .hilera__grupo{grid-template-rows:repeat(2,auto)}
.stand{flex:none;width:clamp(44px,4.4vw,60px);height:clamp(40px,3.6vw,50px);border:0;border-radius:8px;background:#fff;color:var(--tinta);
  font-weight:800;font-size:.95rem;font-variant-numeric:tabular-nums;transition:transform .15s ease,background-color .2s ease}
.stand--libre{background:#F1E7BF;color:#8B7F55;font-weight:600}
.stand--ocupado{background:var(--verde);color:var(--tinta)}
.stand:hover:not(:disabled){transform:translateY(-2px)}
.stand[aria-pressed=true]{background:var(--rojo);color:var(--crema)}
.stand.encontrado{background:var(--amarillo);color:var(--tinta);transform:scale(1.14);z-index:1}
.stand.apagado{opacity:.35}
.plano__nota{display:none;margin-top:.8rem;font-size:.9rem;font-weight:700}
@media(max-width:1060px){.plano__nota{display:block}}
.directorio{margin-top:clamp(24px,3vw,40px);display:flex;flex-wrap:wrap;gap:8px}
.directorio li{display:contents}
.directorio button,.directorio span{display:inline-flex;gap:.6em;align-items:baseline;border:0;border-radius:999px;background:#fff;
  padding:.6rem 1.1rem;font-weight:700;font-size:.95rem;transition:background-color .2s ease,transform .2s ease}
.directorio button:hover{background:var(--crema)}
.directorio button:active{transform:scale(.97)}
.directorio b{font-variant-numeric:tabular-nums;color:var(--rojo)}
.directorio small{font-weight:500;opacity:.75}
.directorio .oculto{display:none}
.hay-pocos{font-weight:700;font-size:1.1rem;margin-top:1.2rem}

/* visítanos */
.visita{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,72px);align-items:end}
.visita .intro{color:#fff}
.datos{margin-top:clamp(24px,3vw,44px);display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:1.2rem clamp(24px,4vw,64px)}
.datos dt{font-size:.95rem;font-weight:600;opacity:.85}
.datos dd{font-size:clamp(1.4rem,2.6vw,2.4rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-top:.15em}
.visita__acciones{margin-top:clamp(24px,3vw,40px)}
.visita__arte{position:relative;height:clamp(260px,34vw,480px)}
.visita__sol{position:absolute;right:0;top:0;width:60%}
.visita__arbol{position:absolute;left:4%;bottom:0;height:80%;width:auto}
.visita__libro{position:absolute;width:26%}
.visita__libro--a{right:6%;bottom:2%;transform:rotate(-8deg)}
.visita__libro--b{right:30%;bottom:-2%;transform:rotate(7deg)}
.organizan{margin-top:clamp(48px,7vw,100px);font-size:1rem;font-weight:600}
.organizan p{margin-bottom:.4rem;opacity:.85}
.organizan ul{display:flex;flex-wrap:wrap;gap:8px}
.organizan li{background:rgba(255,255,255,.16);padding:.5rem 1rem;border-radius:999px;font-weight:700}
@media(max-width:860px){.visita{grid-template-columns:1fr}.datos{grid-template-columns:1fr 1fr}}

/* auspiciadores: franja que corre */
.sec--auspicio{background:var(--papel);color:var(--tinta);padding-inline:0}
.sec--auspicio .medio{padding-inline:var(--m)}
.medio{font-size:clamp(2rem,4.6vw,4.4rem);font-weight:800;letter-spacing:-.04em;line-height:1}
.marquesina{margin-top:clamp(28px,4vw,56px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquesina__pista{display:flex;width:max-content;animation:corre var(--dur,40s) linear infinite}
.marquesina:hover .marquesina__pista,.marquesina:focus-within .marquesina__pista{animation-play-state:paused}
.marquesina li{flex:none;height:clamp(64px,8vw,110px);padding-right:clamp(40px,6vw,96px);display:flex;align-items:center}
.marquesina img{height:100%;width:auto;max-width:clamp(120px,16vw,240px);object-fit:contain}
@keyframes corre{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .marquesina{-webkit-mask-image:none;mask-image:none;overflow-x:auto}
  .marquesina__pista{animation:none}
}

/* pie */
.pie{background:var(--rojo);color:var(--crema);padding:clamp(48px,8vw,120px) var(--m) clamp(20px,2.5vw,36px)}
.pie__marca{font-size:21.5vw;font-weight:900;letter-spacing:-.05em;line-height:.8;white-space:nowrap;margin-left:-.03em}
.pie__marca span{color:var(--verde)}
.pie__fila{margin-top:clamp(24px,4vw,56px);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem 2rem;font-weight:600}
.pie a{text-underline-offset:4px}

/* detalle de la actividad */
html.con-modal{overflow:hidden}
.detalle{border:0;padding:0;border-radius:28px;background:var(--papel);color:var(--tinta);width:min(44rem,calc(100vw - 24px));
  max-height:min(90svh,56rem);overflow:auto;overscroll-behavior:contain;border-top:14px solid var(--c,var(--tinta))}
.detalle::backdrop{background:rgba(0,19,74,.62)}
.detalle[open]{animation:entra .28s cubic-bezier(.22,1,.36,1)}
.detalle[open]::backdrop{animation:vela .28s ease}
@keyframes entra{from{opacity:0;transform:translateY(24px) scale(.98)}}
@keyframes vela{from{opacity:0}}
#detalle-cuerpo{padding:clamp(20px,4vw,40px)}
.detalle__cerrar{position:sticky;top:10px;float:right;margin:10px 10px 0 0;z-index:2;width:2.8rem;height:2.8rem;border:0;border-radius:50%;
  background:var(--tinta);color:var(--crema);font-size:1.8rem;line-height:1;display:grid;place-items:center;transition:transform .2s ease}
.detalle__cerrar:hover{transform:rotate(90deg)}
.det__titulo{font-size:clamp(1.8rem,4.4vw,3rem);font-weight:800;letter-spacing:-.04em;line-height:1.02;margin-top:.5rem;padding-right:2.4rem}
.det__tipo .act__tag{margin-top:0}
.det__datos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 2rem;margin-top:1.4rem}
.det__datos dt{font-size:.9rem;font-weight:600;opacity:.7}
.det__datos dd{margin-top:.15rem;font-size:1.15rem;font-weight:800;letter-spacing:-.02em;line-height:1.25}
.det__datos small{font-weight:600;font-size:.9rem;letter-spacing:0}
.det__imagen{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:16px;margin-top:1.4rem}
.det__desc{margin-top:1.4rem;font-size:1.08rem;line-height:1.6;max-width:60ch}
.det__sub{margin-top:1.8rem;font-size:1rem;font-weight:700;opacity:.75}
.det__gente{margin-top:.7rem;display:flex;flex-direction:column;gap:8px}
.det__persona{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:flex;align-items:center;gap:1rem;padding:.7rem;border-radius:16px;background:#fff;
  transition:background-color .2s ease,transform .2s ease}
.det__persona:hover{background:var(--crema)}
.det__persona:active{transform:scale(.98)}
.det__persona:focus-visible{outline:3px solid var(--azul);outline-offset:2px}
.det__persona b{display:block;font-weight:800;font-size:1.05rem;letter-spacing:-.02em}
.det__persona small{display:block;font-size:.9rem;font-weight:500;opacity:.8}
.det__avatar{flex:none;width:3.4rem;height:3.4rem;border-radius:50%;overflow:hidden;background:var(--verde);color:var(--crema);display:grid;place-items:center;
  font-weight:900;font-size:1.15rem}
.det__avatar img{width:100%;height:100%;object-fit:cover}
@media(max-width:560px){.det__datos{grid-template-columns:1fr}.detalle{border-radius:22px}}
@media(prefers-reduced-motion:reduce){.detalle[open],.detalle[open]::backdrop{animation:none}}

/* instalar en iOS */
.ios{border:0;border-radius:24px;padding:1.6rem;max-width:min(28rem,92vw);background:var(--papel);color:var(--tinta)}
.ios::backdrop{background:rgba(0,19,74,.6)}
.ios h2{font-size:1.5rem;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.ios p{margin:.8rem 0 1.3rem}

/* revelado: lo oculta anim.js, nunca el CSS */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}