/* =========================================================
   ENTROPICAL — hoja de estilos
   Fanzine en el tratamiento, convencional en la jerarquía.
   Reglas duras: los acentos NUNCA son color de texto.
   ========================================================= */

/* ---------- Tipografías autoalojadas ---------- */
@font-face{font-family:Anton;src:url(../fonts/anton-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Archivo;src:url(../fonts/archivo-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Archivo;src:url(../fonts/archivo-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Archivo;src:url(../fonts/archivo-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Caveat;src:url(../fonts/caveat-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Caveat;src:url(../fonts/caveat-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Courier Prime';src:url(../fonts/courierprime-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Courier Prime';src:url(../fonts/courierprime-700.woff2) format('woff2');font-weight:700;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --papel:#F2F0EF;
  --tinta:#212121;
  --amarillo:#FCC322;
  --rojo:#FC241A;
  --naranja:#FE8825;
  --rosa:#FD4468;

  --acc:var(--rojo);              /* lo sobrescribe cada sección */

  --f-tit:Anton, Impact, sans-serif;
  --f-txt:Archivo, system-ui, sans-serif;
  --f-man:Caveat, cursive;
  --f-eti:'Courier Prime', ui-monospace, monospace;

  --wrap:1180px;
  --gut:clamp(1.25rem, 5vw, 4rem);
  --sec-y:clamp(4.5rem, 11vw, 9rem);
}

[data-accent="amarillo"]{--acc:var(--amarillo)}
[data-accent="rojo"]{--acc:var(--rojo)}
[data-accent="naranja"]{--acc:var(--naranja)}
[data-accent="rosa"]{--acc:var(--rosa)}
[data-accent="tinta"]{--acc:var(--tinta)}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit}
a{color:inherit}

html{scroll-behavior:smooth;scroll-padding-top:5.5rem}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--f-txt);
  font-size:clamp(1rem,.96rem + .2vw,1.09rem);
  line-height:1.65;
  overflow-x:hidden;
}

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

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--tinta);color:var(--papel);padding:.75rem 1.25rem;
  font-family:var(--f-eti);text-transform:uppercase;letter-spacing:.08em;
}
.skip:focus{left:.5rem;top:.5rem}

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

/* ---------- Grano de papel ---------- */
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.32;
  mix-blend-mode:multiply;
  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'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------- Contenedores ---------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);position:relative}
.wrap--narrow{max-width:820px}
.sec{padding-block:var(--sec-y);position:relative;z-index:2}

/* =========================================================
   COMPONENTES
   ========================================================= */

/* ---------- Etiqueta Letraset ----------
   Reproduce el recurso del propio logo: caja girada, texto
   condensado en caja alta, muy espaciado.                */
.label{
  display:inline-block;
  font-family:var(--f-eti);font-weight:700;
  font-size:clamp(.78rem,.7rem + .34vw,1.02rem);
  text-transform:uppercase;letter-spacing:.12em;line-height:1.25;
  padding:.46em .85em;
  transform:rotate(-1.1deg);
}
.label--ink{background:var(--tinta);color:var(--papel)}
.label--paper{background:var(--papel);color:var(--tinta);box-shadow:0 0 0 2px var(--tinta)}
.label:nth-of-type(even){transform:rotate(.9deg)}

/* ---------- Highlight ----------
   El acento SOLO como fondo. Bordes irregulares = recorte a mano. */
.hl{
  background:var(--amarillo);color:var(--tinta);
  padding:.06em .3em;
  border-radius:3px 9px 4px 11px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.hl--amarillo{background:var(--amarillo)}

/* ---------- Manuscrita ----------
   Caveat corre pequeña: sube de cuerpo para igualar el texto. */
.hw{
  font-family:var(--f-man);font-weight:700;font-style:normal;
  font-size:1.34em;line-height:1.2;
}

/* ---------- Subrayado a mano ---------- */
.u-hand{
  text-decoration:none;
  background-image:linear-gradient(var(--acc),var(--acc));
  background-repeat:no-repeat;
  background-position:0 92%;
  background-size:100% .22em;
  padding-bottom:.06em;
  transition:background-size .18s ease;
}
.u-hand:hover,.u-hand:focus-visible{background-size:100% .55em}

/* ---------- Botones ---------- */
.btn{
  display:inline-block;cursor:pointer;
  font-family:var(--f-tit);
  font-size:clamp(1.05rem,1rem + .5vw,1.4rem);
  letter-spacing:.045em;text-transform:uppercase;text-decoration:none;
  background:var(--tinta);color:var(--papel);
  border:none;padding:.72em 1.5em;
  clip-path:polygon(1% 4%,99% 0,100% 94%,2% 100%);
  transition:transform .16s ease, background-color .16s ease;
}
.btn:hover,.btn:focus-visible{transform:translate(-2px,-2px) rotate(-.6deg)}
.btn--ghost{
  background:transparent;color:var(--tinta);
  box-shadow:inset 0 0 0 3px var(--tinta);
}
.btn--ghost:hover,.btn--ghost:focus-visible{background:var(--tinta);color:var(--papel)}

/* ---------- Títulos de sección ---------- */
.sec__title{
  font-family:var(--f-tit);font-weight:400;
  font-size:clamp(2.6rem,1.6rem + 6vw,5.6rem);
  line-height:.92;letter-spacing:.005em;text-transform:uppercase;
  margin:0 0 clamp(1.75rem,4vw,3rem);
  position:relative;display:inline-block;
}

/* ---------- Prosa ---------- */
.prose p{margin:0 0 1.15em;max-width:62ch}
.prose ul{margin:0 0 1.15em;padding-left:1.15em}
.prose li{margin-bottom:.5em}
.lede{font-size:1.1em;max-width:58ch}

/* =========================================================
   MENÚ
   ========================================================= */
.nav{
  position:sticky;top:0;z-index:100;
  background:var(--papel);
  border-bottom:3px solid var(--tinta);
}
/* La barra mantiene su altura; el logo crece hasta llenarla por completo,
   así que el aire de arriba y abajo desaparece a propósito. */
.nav__inner{
  max-width:var(--wrap);margin-inline:auto;padding:0 var(--gut);
  min-height:56px;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
/* El PNG conserva ~38% de alto en margen transparente, así que la imagen
   se sale de la caja a propósito: lo que se recorta es vacío, y la marca
   llega a ocupar la barra entera. */
.nav__logo{display:flex;align-items:center;height:56px;overflow:hidden}
.nav__logo img{height:clamp(36px,5.2vw,58px);width:auto;max-width:none}
.nav__menu{display:flex;gap:clamp(.9rem,2vw,1.9rem);align-items:center}
.nav__menu a{
  font-family:var(--f-eti);font-weight:700;
  font-size:.82rem;text-transform:uppercase;letter-spacing:.09em;
  text-decoration:none;padding:.3em 0;
  background-image:linear-gradient(var(--rojo),var(--rojo));
  background-repeat:no-repeat;background-position:0 100%;background-size:0 .2em;
  transition:background-size .18s ease;
}
.nav__menu a:hover,.nav__menu a:focus-visible{background-size:100% .2em}

.nav__toggle{display:none;background:none;border:none;cursor:pointer;padding:.4rem}
.nav__bars{display:block;width:26px}
.nav__bars i{display:block;height:3px;background:var(--tinta);margin:5px 0;transition:transform .2s ease,opacity .2s ease}
.nav[data-open="true"] .nav__bars i:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav[data-open="true"] .nav__bars i:nth-child(2){opacity:0}
.nav[data-open="true"] .nav__bars i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

@media (max-width:820px){
  .nav__toggle{display:block}
  .nav__menu{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--papel);border-bottom:3px solid var(--tinta);
    padding:0 var(--gut);max-height:0;overflow:hidden;
    transition:max-height .26s ease,padding .26s ease;
  }
  .nav[data-open="true"] .nav__menu{max-height:60vh;padding:.5rem var(--gut) 1.25rem}
  .nav__menu a{padding:.7rem 0;font-size:.95rem;width:100%}
}

/* =========================================================
   HERO
   ========================================================= */
/* Todo el hero debe caber sin scroll: el aire entre bloques es mínimo y
   el logo se limita por altura de ventana, no solo por ancho. */
.hero{
  position:relative;z-index:2;overflow:hidden;
  padding-block:clamp(1.5rem,3.5vw,2.5rem) clamp(2rem,4.5vw,3.25rem);
}
.hero__inner{
  position:relative;z-index:2;
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);
}
.hero__eyebrow{margin:0}
/* El logo lleva ~24% de alto en margen transparente. El negativo compensa
   parte de ese vacío, no todo: descontarlo entero dejaba las etiquetas
   pegadas al logo. */
.hero__logorow{position:relative;margin:clamp(-.7rem,-.7vw,-.2rem) 0 clamp(-.6rem,-.6vw,-.15rem)}
.hero__logo{margin:0;position:relative;z-index:2}
.hero__logo img{
  width:auto;max-width:min(100%,940px);
  max-height:clamp(150px,38vh,400px);
}
.hero__meta{display:flex;flex-wrap:wrap;gap:.55rem;margin:0 0 clamp(1rem,2vw,1.5rem)}

/* Aguacate al fondo, entero y centrado con el logo. Al colgar de la fila del
   logo hereda su caja, así que el centrado es exacto a cualquier tamaño. */
.hero__bg{
  position:absolute;z-index:1;inset:0;
  pointer-events:none;
}
.hero__bg img{
  position:absolute;right:0;top:50%;
  width:min(34vw,430px);transform:translateY(-50%) rotate(-6deg);
  opacity:.6;
}

/* Eslogan en una línea, con el botón a su derecha */
.hero__punch{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:clamp(.9rem,2vw,1.6rem);
}
.slogan{
  margin:0;
  background:var(--papel);
  box-shadow:0 0 0 3px var(--tinta);
  padding:clamp(.6rem,1.2vw,.9rem) clamp(.8rem,1.6vw,1.2rem);
  transform:rotate(-.8deg);
  clip-path:polygon(0.4% 4%,99.6% 0,100% 95%,0 100%);
  font-family:var(--f-tit);font-weight:400;
  font-size:clamp(1rem,.45rem + 1.75vw,2rem);
  line-height:1.16;text-transform:uppercase;letter-spacing:.01em;
}
.slogan .hl{border-radius:2px 7px 3px 8px;padding:.02em .26em .08em}
.hero__btn{flex:none;transform:rotate(.7deg)}
@media (min-width:900px){.slogan{white-space:nowrap}}

@media (max-width:900px){
  .hero__bg img{width:min(62vw,380px);opacity:.42}
  .hero__punch{align-items:flex-start;flex-direction:column}
}
@media (max-width:520px){
  .hero__eyebrow{letter-spacing:.07em}
  .hero__bg img{width:min(72vw,300px);opacity:.32}
}

/* =========================================================
   MANIFIESTO
   ========================================================= */
.manifiesto{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.44fr);
  gap:clamp(1.5rem,5vw,4rem);align-items:center;
}
/* El extracto es la voz del proyecto: merece cuerpo grande, no de párrafo suelto. */
.manifiesto__text p{
  font-size:clamp(1.08rem,1rem + .5vw,1.38rem);
  line-height:1.5;max-width:45ch;
}
.manifiesto__more{margin-top:1.9em}
.manifiesto__art img{width:min(100%,300px);margin-inline:auto;transform:rotate(-5deg)}
@media (max-width:820px){
  .manifiesto{grid-template-columns:1fr}
  .manifiesto__art{max-width:190px;margin-inline:auto}
}

/* =========================================================
   PROGRAMA  (fondo naranja, texto tinta — contraste 6.72:1)
   ========================================================= */
.sec--programa{
  background:var(--naranja);
  color:var(--tinta);
  border-block:4px solid var(--tinta);
  overflow:hidden;
}
.prog{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
  gap:clamp(1.75rem,4vw,3rem);
}
.prog__day{
  background:var(--papel);
  padding:clamp(1.25rem,2.6vw,1.9rem);
  box-shadow:0 0 0 3px var(--tinta);
  clip-path:polygon(0 1.2%,100% 0,99.4% 99%,.6% 100%);
}
.prog__day:nth-child(2){transform:rotate(-.7deg)}
.prog__day:nth-child(3){transform:rotate(.6deg)}
.prog__daytitle{
  font-family:var(--f-tit);font-weight:400;
  font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem);
  text-transform:uppercase;letter-spacing:.02em;line-height:1;
  margin:0 0 1rem;padding-bottom:.5rem;
  border-bottom:3px solid var(--tinta);
}
.prog__list{list-style:none;margin:0;padding:0}
.prog__list li{
  display:grid;grid-template-columns:4.4em 1fr;gap:.6em;
  padding:.42em 0;border-bottom:1px dashed rgba(33,33,33,.3);
}
.prog__list li:last-child{border-bottom:none}
.prog__time{font-family:var(--f-eti);font-weight:700;font-size:.92em}
.prog__what{font-size:.97em;line-height:1.45}
.prog__note{margin:1rem 0 0;font-size:.95em;line-height:1.55}
.prog__note--solo{margin-top:0}
.prog__coin{
  position:absolute;width:clamp(90px,11vw,150px);
  right:calc(var(--gut) - 1.5rem);bottom:-3.5rem;
  transform:rotate(-14deg);opacity:.9;pointer-events:none;
}
@media (max-width:820px){.prog__coin{display:none}}

/* =========================================================
   RESERVA
   ========================================================= */
/* Mismo patrón que hero y manifiesto: contenido a un lado, ilustración
   al otro, a buen tamaño y ocupando la altura de la sección. */
.reserva{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.54fr);
  gap:clamp(1.5rem,4vw,3rem);align-items:stretch;
}
.reserva__art{display:flex;align-items:center;justify-content:center}
.reserva__art img{
  width:auto;max-width:100%;max-height:100%;
  transform:rotate(6deg);
}
.form-frame{
  margin:clamp(1.25rem,2.5vw,1.75rem) 0 0;
  background:var(--papel);
  box-shadow:0 0 0 3px var(--tinta);
  padding:clamp(1rem,2.4vw,2rem) clamp(1rem,2.4vw,2.25rem);
  clip-path:polygon(0 .8%,100% 0,99.7% 99.2%,.3% 100%);
}
.form-frame iframe{display:block;width:100%;border:0}
@media (max-width:820px){
  .reserva{grid-template-columns:1fr}
  .reserva__art{max-width:260px;margin-inline:auto}
}

/* =========================================================
   DÓNDE
   ========================================================= */
/* Izquierda: foto apaisada + texto debajo. Derecha: mapa a toda altura.
   Recortar la foto a vertical llenaba el hueco pero se perdía el patio. */
.donde{
  display:grid;gap:clamp(1.4rem,3vw,2.2rem) clamp(1.75rem,4vw,3.25rem);
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  grid-template-rows:auto 1fr;
  align-items:start;
}
.donde__fig{margin:0;grid-column:1;grid-row:1}
.donde__text{grid-column:1;grid-row:2}
.donde__map{grid-column:2;grid-row:1 / span 2;align-self:stretch;display:flex;flex-direction:column}
.donde__text p{font-size:1.04em;max-width:none;margin-bottom:0}
.donde__fig img{
  width:100%;
  box-shadow:0 0 0 3px var(--tinta);
  filter:contrast(1.12);
  clip-path:polygon(0 1%,100% 0,99.5% 99%,.5% 100%);
}
.donde__fig figcaption{
  margin-top:.6rem;font-size:1.35em;line-height:1.2;flex:none;
  transform:rotate(-1.2deg);transform-origin:left center;
}
.donde__map iframe{
  width:100%;flex:1;min-height:340px;border:0;display:block;
  box-shadow:0 0 0 3px var(--tinta);
  /* el mapa viene a todo color y rompe el duotono: lo pasamos a tinta */
  filter:grayscale(1) contrast(1.15) brightness(1.02);
}
.donde__maplink{margin:.55rem 0 0;flex:none;font-family:var(--f-eti);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}
@media (max-width:820px){
  .donde{grid-template-columns:1fr;grid-template-rows:none}
  .donde__fig,.donde__text,.donde__map{grid-column:1;grid-row:auto}
  .donde__map iframe{min-height:300px}
}

/* =========================================================
   FAQ
   ========================================================= */
.faq{border-top:3px solid var(--tinta)}
.faq__item{border-bottom:3px solid var(--tinta)}
.faq__item summary{
  cursor:pointer;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.05rem .25rem;
  font-family:var(--f-tit);font-weight:400;
  font-size:clamp(1.1rem,1rem + .7vw,1.5rem);
  text-transform:uppercase;letter-spacing:.02em;line-height:1.15;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"+";flex:none;
  font-family:var(--f-tit);font-size:1.4em;line-height:1;
  transition:transform .2s ease;
}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__item summary:hover{background:var(--acc);color:var(--tinta)}
.faq__body{padding:0 .25rem 1.35rem;max-width:64ch}
.faq__body p:last-child,.faq__body ul:last-child{margin-bottom:0}
.orgs{list-style:none;padding:0}
.orgs li{margin-bottom:.9em}

/* =========================================================
   CONTACTO
   ========================================================= */
.sec--contacto{padding-bottom:clamp(4rem,8vw,6.5rem)}
.contacto{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.58fr);
  gap:clamp(1.5rem,4vw,3rem);align-items:center;
}
.contacto .lede{font-size:1.14em}
.contacto__art img{
  width:100%;max-width:460px;margin-inline:auto;
  transform:rotate(-5deg);
}
@media (max-width:820px){
  .contacto{grid-template-columns:1fr}
  .contacto__art{max-width:230px;margin-inline:auto}
}

/* =========================================================
   FOOTER
   ========================================================= */
.foot{
  background:var(--tinta);color:var(--papel);
  padding-block:clamp(2.75rem,6vw,4.5rem);
  position:relative;z-index:2;
}
/* auto-fit en vez de 3 fijas: a 768px las tres columnas quedaban en 210px
   y el logo no cabía. */
.foot__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:clamp(1.75rem,4vw,3rem);
}
.foot__logo{width:min(100%,220px);margin-bottom:1rem}
.foot p{margin:0 0 .35em;font-size:.95em}
.foot__meta{font-family:var(--f-eti);font-size:.82rem;letter-spacing:.05em;opacity:.85}
.foot__h{
  font-size:1.7rem;font-weight:700;margin:0 0 .7rem;
  transform:rotate(-1.5deg);transform-origin:left center;
}
.foot__links{list-style:none;margin:0;padding:0}
.foot__links li{margin-bottom:.45em}
.foot__links a{
  font-family:var(--f-eti);font-weight:700;font-size:.85rem;
  text-transform:uppercase;letter-spacing:.09em;text-decoration:none;
  background-image:linear-gradient(var(--papel),var(--papel));
  background-repeat:no-repeat;background-position:0 100%;background-size:0 2px;
  transition:background-size .18s ease;
}
.foot__links a:hover,.foot__links a:focus-visible{background-size:100% 2px}
.foot__partners{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.foot__partners img{width:150px;opacity:.9;transition:opacity .18s ease}
.foot__partners a:hover img,.foot__partners a:focus-visible img{opacity:1}
.foot :focus-visible{outline-color:var(--papel)}

/* =========================================================
   MODAL MANIFIESTO
   ========================================================= */
.modal{
  border:none;padding:0;background:transparent;
  max-width:min(760px,92vw);width:100%;
  max-height:88vh;
  color:var(--tinta);
}
.modal::backdrop{background:rgba(33,33,33,.72)}
.modal__box{
  background:var(--papel);
  box-shadow:0 0 0 4px var(--tinta);
  padding:clamp(1.5rem,4vw,3rem);
  max-height:88vh;overflow-y:auto;
  position:relative;
}
.modal__close{
  position:absolute;top:.5rem;right:.75rem;
  background:none;border:none;cursor:pointer;
  font-family:var(--f-tit);font-size:2.1rem;line-height:1;
  padding:.2rem .45rem;
}
.modal__close:hover{background:var(--rojo)}
.modal__title{
  font-family:var(--f-tit);font-weight:400;
  font-size:clamp(2rem,1.5rem + 2.4vw,3.2rem);
  text-transform:uppercase;line-height:.95;
  margin:0 0 1.25rem;padding-right:2.5rem;
}
.modal__body p{margin:0 0 1.15em;max-width:none}
.modal__body p:last-child{margin-bottom:0}