/* publico.css — estilos propios del sitio publico (portada y paginas interiores). */

/* ---------- Nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--fondo) 88%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--borde);
}
.nav .env{display:flex;align-items:center;gap:1.5rem;padding:.85rem 0}
.marca{display:flex;align-items:center;gap:.62rem;text-decoration:none}
.marca picture{display:block;flex:none}
.marca img{width:38px;height:38px;display:block}
.marca .lockup{display:flex;align-items:center;gap:.62rem}
.marca .nom{font-size:.86rem;line-height:1.08;font-weight:700;letter-spacing:.01em;text-transform:uppercase}
.marca .anio{
  font-size:.82rem;line-height:1.04;font-weight:700;color:var(--turquesa-texto);
  padding-left:.62rem;border-left:1px solid var(--borde);
}
.marca .anio i{display:block;font-style:normal}
.nav nav{margin-left:auto;display:flex;gap:1.6rem}
.nav nav a{text-decoration:none;font-size:.83rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-suave);padding:.3rem 0;border-bottom:2px solid transparent;transition:.2s}
.nav nav a:hover,.nav nav a:focus-visible{color:var(--tinta);border-bottom-color:var(--turquesa)}

/* El boton solo existe en el ancho donde el nav se repliega. */
.hamburguesa{display:none;background:none;border:1px solid var(--borde);border-radius:2px;
  width:44px;height:44px;padding:0;cursor:pointer;flex:none;
  align-items:center;justify-content:center;gap:5px;flex-direction:column;transition:.2s}
.hamburguesa span{display:block;width:18px;height:2px;background:var(--tinta-suave);transition:transform .25s,opacity .2s}
.hamburguesa:hover{border-color:var(--turquesa)}
.hamburguesa:hover span{background:var(--turquesa-texto)}
/* Abierto: las barras arman una cruz. */
.hamburguesa[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburguesa[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburguesa[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:900px){
  .hamburguesa{display:flex}
  .nav .env{gap:.75rem}
  /* El menu cuelga de la barra, que es sticky. Cerrado no ocupa lugar ni
     recibe foco; se anima con grid-template-rows para no fijar una altura. */
  .nav nav{
    position:absolute;left:0;right:0;top:100%;margin:0;
    flex-direction:column;gap:0;
    background:var(--fondo);border-bottom:1px solid var(--borde);
    display:grid;grid-template-rows:0fr;overflow:hidden;visibility:hidden;
    transition:grid-template-rows .28s cubic-bezier(.22,1,.36,1),visibility .28s;
  }
  .nav nav>a{
    min-height:0;padding:0 var(--margen,1.2rem);
    line-height:0;opacity:0;border-bottom:0;
    transition:line-height .28s,opacity .2s,padding .28s;
  }
  .nav nav.abierto{grid-template-rows:1fr;visibility:visible}
  .nav nav.abierto>a{line-height:3.4;opacity:1;border-bottom:1px solid var(--borde)}
  .nav nav.abierto>a:last-child{border-bottom:0}
  .nav nav a:hover,.nav nav a:focus-visible{color:var(--turquesa-texto);background:var(--fondo-suave,transparent)}
}

/* Sin animaciones, el menu abre y cierra igual pero de golpe. */
@media(prefers-reduced-motion:reduce){
  .nav nav,.nav nav>a,.hamburguesa span{transition:none}
}

/* ---------- Hero: foto del evento a sangre, texto encima ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(560px,82vh,760px);display:flex;align-items:center;padding:clamp(3rem,7vw,5rem) 0 0}
.hero-foto{position:absolute;inset:0;z-index:-2}
.hero-foto img{width:100%;height:100%;object-fit:cover;object-position:center 38%}
/* Doble velo: uno vertical para asentar el pie, otro lateral para que
   el texto tenga fondo propio sin tapar la foto del lado derecho. */
.hero-velo{position:absolute;inset:0;z-index:-1}
.hero-velo::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,
  color-mix(in srgb,var(--grafito) 72%,transparent) 0%,
  color-mix(in srgb,var(--grafito) 55%,transparent) 45%,
  color-mix(in srgb,var(--grafito) 94%,transparent) 100%)}
.hero-velo::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,
  color-mix(in srgb,var(--grafito) 95%,transparent) 0%,
  color-mix(in srgb,var(--grafito) 90%,transparent) 34%,
  color-mix(in srgb,var(--grafito) 62%,transparent) 56%,
  transparent 88%)}
@media(max-width:820px){
  .hero-velo::after{background:linear-gradient(180deg,
    color-mix(in srgb,var(--grafito) 80%,transparent) 0%,
    color-mix(in srgb,var(--grafito) 88%,transparent) 100%)}
}
/* El hero siempre es oscuro: la foto manda, no el tema. */
.hero,.hero .kicker,.hero h1,.hero .bajada,.hero .fecha-sede{color:#F5F7F8}
.hero .kicker{color:#4FD8D3}
.hero .bajada{color:#D2D8DD}
.hero .fecha-sede{border-top-color:rgba(245,247,248,.22)}
.hero .fecha-sede small{color:#9AA2A9}
.hero-texto{max-width:min(640px,100%);position:relative;z-index:1}

h1{
  font-size:clamp(2.5rem,6.6vw,4.7rem);line-height:.95;letter-spacing:-.035em;
  font-weight:800;margin:0 0 1.4rem;text-wrap:balance;
  text-shadow:0 2px 24px rgba(0,0,0,.5);
}
h1 em{display:block;font-style:normal;color:#4FD8D3}
.bajada{font-size:clamp(1rem,1.5vw,1.15rem);max-width:44ch;margin:0 0 2.2rem}

.acciones{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:2.4rem}
.hero .btn-2{border-color:rgba(245,247,248,.42);color:#F5F7F8}
.hero .btn-2:hover{border-color:#4FD8D3;color:#4FD8D3;background:rgba(245,247,248,.06)}

.fecha-sede{display:flex;flex-wrap:wrap;gap:1.8rem;padding-top:1.6rem;border-top:1px solid var(--borde)}
.fecha-sede div{display:flex;flex-direction:column;gap:.15rem}
.fecha-sede b{font-size:1.05rem;font-weight:700}
.fecha-sede small{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--acero)}

/* ---------- Pilares (los cuatro de la guia de marca) ---------- */
.pilares{border-bottom:1px solid var(--borde);background:var(--fondo)}
.pilares .env{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
@media(max-width:760px){.pilares .env{grid-template-columns:repeat(2,1fr)}}
.pilar{
  display:flex;align-items:center;gap:.75rem;padding:1.5rem 1.2rem;
  border-right:1px solid var(--borde);
  /* sin esto una palabra larga estira la columna y desborda el viewport */
  min-width:0;
}
.pilar:last-child{border-right:0}
@media(max-width:760px){
  .pilar:nth-child(2n){border-right:0}
  .pilar:nth-child(-n+2){border-bottom:1px solid var(--borde)}
  .pilar{padding:1.5rem .9rem;gap:.6rem}
}
.pilar svg{width:26px;height:26px;flex:none;stroke:var(--turquesa);fill:none;stroke-width:1.6}
.pilar b{
  font-size:.83rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  min-width:0;overflow-wrap:anywhere;
}

/* ---------- Metricas ---------- */
.metricas{background:var(--turquesa-hondo);color:#F2FBFB;padding:clamp(1.8rem,3.5vw,2.6rem) 0;position:relative;overflow:hidden}
.metricas::before{
  content:'';position:absolute;inset:0;opacity:.16;
  background:repeating-linear-gradient(var(--diag),transparent 0 26px,rgba(255,255,255,.5) 26px 27px);
}
.metricas .env{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;position:relative}
@media(max-width:760px){.metricas .env{grid-template-columns:repeat(2,1fr);gap:1.8rem}}
.metricas b{display:block;font-size:clamp(1.9rem,3.6vw,2.7rem);font-weight:800;line-height:1;letter-spacing:-.03em}
.metricas span{font-size:.71rem;letter-spacing:.17em;text-transform:uppercase;opacity:.86}

/* ---------- Bloques ---------- */
.bloque{padding:clamp(3.5rem,8vw,6.5rem) 0}
.bloque--alt{background:var(--fondo-alt)}
.titulo{display:flex;align-items:baseline;gap:1rem;margin:0 0 .8rem}
.titulo i{font-style:normal;font-size:.78rem;font-weight:700;letter-spacing:.2em;color:var(--cobre-texto)}
h2{font-size:clamp(1.9rem,4vw,3rem);line-height:1.05;letter-spacing:-.03em;font-weight:800;margin:0 0 1rem}
.intro{color:var(--tinta-suave);max-width:60ch;margin:0 0 3rem}

/* Doble audiencia: dos caminos claros, sin mezclarse */
.caminos{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
@media(max-width:840px){.caminos{grid-template-columns:1fr}}
.camino{
  position:relative;padding:2.4rem 2rem;border:1px solid var(--borde);
  background:color-mix(in srgb,var(--fondo) 60%,transparent);overflow:hidden;transition:.22s;
}
.camino::before{content:'';position:absolute;top:0;left:0;width:100%;height:4px;background:var(--turquesa)}
.camino--publico::before{background:var(--cobre)}
.camino:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--turquesa) 45%,transparent)}
.camino h3{font-size:1.45rem;font-weight:700;letter-spacing:-.02em;margin:.4rem 0 .5rem}
.camino p{color:var(--tinta-suave);margin:0 0 1.6rem;font-size:.98rem}
.precio{display:flex;align-items:baseline;gap:.5rem;margin-bottom:1.4rem}
.precio b{font-size:2.5rem;font-weight:800;letter-spacing:-.04em;line-height:1}
.precio small{font-size:.8rem;color:var(--acero);letter-spacing:.06em}
.camino ul{list-style:none;padding:0;margin:0 0 1.8rem;display:grid;gap:.6rem}
.camino li{display:flex;gap:.7rem;font-size:.95rem;color:var(--tinta-suave)}
.camino li::before{content:'';flex:none;width:9px;height:9px;margin-top:.5rem;background:var(--turquesa);transform:rotate(45deg)}
.camino--publico li::before{background:var(--cobre)}

/* Ronda: dos precios con jerarquia explicita */
.tarifas{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:2rem}
@media(max-width:700px){.tarifas{grid-template-columns:1fr}}
.tarifa{padding:1.8rem;border:1px solid var(--borde);position:relative}
.tarifa--destacada{border-color:var(--turquesa);background:color-mix(in srgb,var(--turquesa) 8%,transparent)}
.tarifa .sello{position:absolute;top:-11px;left:1.6rem;background:var(--turquesa);color:#08201F;font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:.3rem .8rem}
.tarifa h4{margin:.2rem 0 .8rem;font-size:1rem;font-weight:700;letter-spacing:.02em}
.tarifa .monto{font-size:2.2rem;font-weight:800;letter-spacing:-.04em;line-height:1}
.tarifa .cuotas{font-size:.82rem;color:var(--acero);margin-top:.4rem}

/* Una sola tarifa configurada: ocupa el ancho completo en vez de quedar rengo */
.tarifas .tarifa:only-child{grid-column:1/-1}

/* Categorias: la diagonal rompe la monotonia de la grilla */
.rubros{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--borde);border:1px solid var(--borde)}
@media(min-width:620px){.rubros{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.rubros{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1240px){.rubros{grid-template-columns:repeat(6,1fr)}}
.rubro{
  background:var(--fondo);padding:1.7rem 1.4rem;position:relative;overflow:hidden;transition:.2s;
  display:flex;align-items:flex-end;min-height:132px;
}
.rubro::after{
  content:'';position:absolute;right:-30px;top:-30px;width:74px;height:74px;
  background:color-mix(in srgb,var(--turquesa) 14%,transparent);transform:rotate(45deg);transition:.28s;
}
.rubro:nth-child(3n)::after{background:color-mix(in srgb,var(--cobre) 14%,transparent)}
.rubro:hover{background:var(--fondo-alt)}
.rubro:hover::after{transform:rotate(45deg) scale(1.5)}
.rubro b{font-size:.98rem;font-weight:600;line-height:1.3;position:relative;z-index:1}
.rubro i{position:absolute;top:1.1rem;left:1.4rem;font-style:normal;font-size:.68rem;font-weight:700;color:var(--acero);letter-spacing:.1em}

/* Sede */
.sede{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(max-width:860px){.sede{grid-template-columns:1fr}}
.servicios{list-style:none;padding:0;margin:1.8rem 0 0;display:grid;gap:.8rem}
.servicios li{display:flex;gap:.8rem;align-items:center;font-size:.96rem;color:var(--tinta-suave)}
.servicios li::before{content:'';flex:none;width:26px;height:2px;background:var(--cobre)}
/* Foto de la sede. Reemplaza al marcador de rayas que habia antes: la
   direccion se sobreimprime sobre la propia foto, con un velo para que el
   texto se lea sin importar que haya debajo. */
.sede-foto{position:relative;margin:0;border:1px solid var(--borde);border-radius:2px;overflow:hidden}
.sede-foto img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 38%}
.sede-foto figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.5rem 1.4rem 1.2rem;color:#f5f7f8;
  background:linear-gradient(to top,rgba(12,14,16,.9) 0%,rgba(12,14,16,.65) 55%,transparent 100%)}
.sede-foto b{display:block;font-size:1.2rem;margin-bottom:.3rem}
.sede-foto span{font-size:.9rem;opacity:.85;line-height:1.45}

/* ---------- Expositores: dos cintas infinitas ---------- */
.cintas{display:grid;gap:.85rem;margin-bottom:2.4rem}
.cinta{
  overflow:hidden;padding:0;
  /* Se desvanece en los bordes para que no haya un corte seco. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.pista{display:flex;width:max-content;will-change:transform}
.cinta--der .pista{animation:correr-izq 72s linear infinite}
.cinta--izq .pista{animation:correr-der 84s linear infinite}
/* La pista lleva el set de logos duplicado: al desplazar exactamente el 50%
   el bucle empalma sin salto visible. */
@keyframes correr-izq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes correr-der{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}

.cintas:hover .pista{animation-play-state:paused}

.logo-caja{
  /* Los assets ya vienen normalizados a 260x120 con su fondo propio: la
     imagen ES la tarjeta, sin placa ni padding que dupliquen el marco. */
  flex:none;width:clamp(148px,16vw,182px);margin:0 clamp(.5rem,1vw,.9rem);
  aspect-ratio:260/120;border-radius:3px;overflow:hidden;
  transition:box-shadow .25s,transform .25s;
}
.logo-caja img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) opacity(.72);transition:filter .25s;
}
.logo-caja:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(0,0,0,.28)}
.logo-caja:hover img{filter:grayscale(0) opacity(1)}

@media(prefers-reduced-motion:reduce){
  .pista{animation:none!important;flex-wrap:wrap;width:100%;justify-content:center}
  .cinta{-webkit-mask-image:none;mask-image:none}
}

/* ---------- Edicion anterior ---------- */
.mosaico{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 2.5rem}
@media(max-width:900px){.mosaico{grid-template-columns:repeat(2,1fr)}}
.mosaico figure{margin:0;position:relative;overflow:hidden;background:var(--fondo-alt);aspect-ratio:4/3}
.mosaico figure:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
@media(max-width:900px){.mosaico figure:first-child{grid-column:span 2;grid-row:auto;aspect-ratio:4/3}}
.mosaico picture{display:block;width:100%;height:100%}
.mosaico img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,1,.36,1);filter:saturate(.92)}
.mosaico figure:hover img{transform:scale(1.06);filter:saturate(1.05)}
.mosaico figure::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,color-mix(in srgb,var(--grafito) 55%,transparent),transparent 55%);pointer-events:none}

.anterior{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(max-width:900px){.anterior{grid-template-columns:1fr}}
.resumen{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--borde);border:1px solid var(--borde);margin:1.8rem 0 2rem}
.resumen div{background:var(--fondo);padding:1.3rem 1.2rem}
.resumen b{display:block;font-size:1.75rem;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--turquesa-texto)}
.resumen span{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--acero)}
.dias-fotos{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem}
/* min-height 44px: area tactil minima recomendada en telefono */
.dia-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1rem;min-height:44px;border:1px solid var(--borde);font-size:.85rem;text-decoration:none;transition:.2s}
.dia-chip:hover{border-color:var(--turquesa);color:var(--turquesa-texto)}
.dia-chip b{font-weight:700}
.dia-chip span{color:var(--acero);font-size:.78rem}

/* Cierre */
.cierre{background:var(--grafito);color:var(--natural);padding:clamp(3.5rem,7vw,5.5rem) 0;text-align:center;position:relative;overflow:hidden}
.cierre::before{content:'';position:absolute;inset:0;opacity:.5;background:repeating-linear-gradient(var(--diag),transparent 0 54px,rgba(23,178,173,.14) 54px 55px)}
.cierre .env{position:relative}
.cierre h2{margin-bottom:.7rem}
.cierre p{color:#AFB6BC;max-width:52ch;margin:0 auto 2.2rem}

footer{background:var(--fondo-alt);border-top:1px solid var(--borde);padding:2.6rem 0;font-size:.88rem;color:var(--tinta-suave)}
footer .env{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:space-between}
footer a{color:var(--turquesa-texto);text-decoration:none}
footer a:hover{text-decoration:underline}
/* Entrada discreta al panel para la organizacion */
footer .acceso-panel{font-size:.75rem;color:var(--acero)}
footer .acceso-panel:hover{color:var(--tinta-suave);text-decoration:none}

/* Logo del promotor (CAFAMAR).
   Van las dos variantes en el marcado y CSS elige, porque el boton de tema
   escribe data-theme en el <html> y <picture> no puede leerlo. */
/* La frase y el logo se leen juntos: si el logo queda suelto entre las
   columnas del pie, "promovido por" pierde a quien se refiere. */
.bloque-promotor{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem}
.bloque-promotor .promovido{display:block;margin-bottom:.35rem}
.promotor{display:inline-flex;align-items:center;line-height:0}
.promotor-logo{height:44px;width:auto;opacity:.85;transition:opacity .2s}
.promotor:hover .promotor-logo{opacity:1}
.promotor-logo--claro{display:none}
@media (prefers-color-scheme:dark){
  .promotor-logo--oscuro{display:none}
  .promotor-logo--claro{display:block}
}
/* El boton de tema le gana a la preferencia del sistema, en los dos sentidos. */
:root[data-theme="dark"] .promotor-logo--oscuro{display:none}
:root[data-theme="dark"] .promotor-logo--claro{display:block}
:root[data-theme="light"] .promotor-logo--oscuro{display:block}
:root[data-theme="light"] .promotor-logo--claro{display:none}

/* Zocalo: la firma de quien lo desarrollo, separada del bloque de contacto. */
footer .zocalo{margin-top:1.8rem;padding-top:1.1rem;border-top:1px solid var(--borde);justify-content:center;font-size:.78rem;color:var(--acero)}
footer .zocalo a{color:var(--acero);text-decoration:none;border-bottom:1px solid transparent}
footer .zocalo a:hover{color:var(--tinta-suave);border-bottom-color:currentColor;text-decoration:none}

/* En telefono los enlaces del pie quedaban en 18px de alto: imposibles de
   acertar con el dedo. Se agranda el area tactil sin mover el diseno. */
@media(max-width:760px){
  footer a[href^="mailto:"],
  footer a[href^="tel:"],
  footer a[href^="https://wa.me"],
  footer .acceso-panel,
  footer .zocalo a{display:inline-flex;align-items:center;min-height:44px}
}

/* Entrada escalonada, un solo momento coreografiado */
.rev{opacity:0;transform:translateY(22px);animation:rev .7s cubic-bezier(.22,1,.36,1) forwards}
@keyframes rev{to{opacity:1;transform:none}}
.d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.25s}.d4{animation-delay:.35s}.d5{animation-delay:.45s}

/* Sin animaciones, los .rev tienen que verse igual */
@media(prefers-reduced-motion:reduce){.rev{opacity:1;transform:none}}

/* Paginas interiores: titulo mas contenido que el hero de portada */
.cabecera{padding:clamp(2.5rem,6vw,4rem) 0 clamp(1.5rem,3vw,2rem)}
.cabecera h1{font-size:clamp(2.1rem,5vw,3.4rem);line-height:1}
.cuerpo{padding:0 0 clamp(3rem,7vw,5rem)}
form{max-width:720px}

fieldset{border:0;padding:0;margin:0 0 2rem}
legend{padding:0;font-size:.8rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--tinta-suave);margin-bottom:.8rem}
.tipos{display:grid;gap:.9rem}
.tipo{position:relative;display:block}
.tipo input{position:absolute;opacity:0;width:0;height:0}
.tipo span.caja{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;
  padding:1.3rem 1.4rem;border:2px solid var(--borde);
  background:color-mix(in srgb,var(--fondo) 60%,transparent);
  cursor:pointer;transition:.18s;min-height:76px;
}
.tipo span.caja:hover{border-color:color-mix(in srgb,var(--turquesa) 55%,transparent)}
.tipo input:checked + span.caja{border-color:var(--turquesa);background:color-mix(in srgb,var(--turquesa) 10%,transparent)}
.tipo input:focus-visible + span.caja{outline:3px solid var(--cobre);outline-offset:3px}
.tipo b{font-size:1.15rem;font-weight:700;letter-spacing:-.01em}
.tipo .desc{flex:1 1 100%;font-size:.92rem;color:var(--tinta-suave);margin:0}
.tipo .monto{margin-left:auto;font-size:1.35rem;font-weight:800;letter-spacing:-.03em;color:var(--turquesa-texto);white-space:nowrap}
.tipo .monto.libre{color:var(--cobre-texto)}

.cerrado{
  border:1px solid var(--borde);background:var(--fondo-alt);
  padding:clamp(1.8rem,4vw,2.6rem);max-width:640px;
}
.cerrado h2{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;margin:0 0 .7rem}
.cerrado p{color:var(--tinta-suave);margin:0 0 1.6rem}

/* Entrada: la pagina del QR.
   El respiro va en la propia credencial (margen + ancho acotado), no en
   "main:has(.credencial)": :has() no llega a los navegadores viejos, justo
   los que trae el publico de esta pagina. Asi el resultado es el mismo pero
   sin depender de soporte de selectores nuevos. */
.credencial{
  width:calc(100% - 2rem);max-width:520px;
  margin:clamp(1rem,4vw,3rem) auto clamp(2rem,5vw,3rem);
  background:var(--fondo-alt);
  border:1px solid var(--borde);position:relative;overflow:hidden;
}
.credencial::before{content:'';position:absolute;top:0;left:0;width:100%;height:6px;background:var(--turquesa)}

.credencial .tapa{padding:1.7rem clamp(1.3rem,5vw,2.2rem) 1.2rem;border-bottom:1px solid var(--borde);text-align:center}
.credencial .marca{justify-content:center}
.credencial .marca img{width:42px;height:42px}

/* El QR es lo unico que importa en la puerta: lo mas grande posible. */
.qr-zona{padding:clamp(1.6rem,5vw,2.4rem) 1.2rem 1.4rem;text-align:center}
.qr-caja{
  display:inline-block;background:#FFFFFF;padding:clamp(.9rem,3vw,1.3rem);
  border-radius:4px;line-height:0;
}
.qr-caja svg{width:clamp(220px,62vw,320px);height:auto}
.codigo{
  margin:1.4rem 0 0;font-size:clamp(1.5rem,6vw,2rem);font-weight:800;
  letter-spacing:.14em;line-height:1.1;word-break:break-all;
}
.codigo-rotulo{margin:.5rem 0 0;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--acero)}

.datos{padding:0 clamp(1.3rem,5vw,2.2rem) 1.6rem}
.persona{padding:1.4rem 0;border-top:1px solid var(--borde);text-align:center}
.persona b{display:block;font-size:clamp(1.35rem,5vw,1.75rem);font-weight:700;letter-spacing:-.02em;line-height:1.2}
.persona .empresa{display:block;color:var(--tinta-suave);font-size:1rem;margin-top:.25rem}
.sello{
  display:inline-block;margin-top:.9rem;padding:.45rem 1.1rem;
  background:var(--turquesa);color:#08201F;
  font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.sello--anulada{background:var(--cobre);color:#20130A}

.grilla{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--borde);border:1px solid var(--borde)}
.grilla div{background:var(--fondo-alt);padding:1.1rem 1.2rem}
.grilla small{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--acero);margin-bottom:.25rem}
.grilla b{font-size:1.02rem;font-weight:700;line-height:1.3}
.grilla .ancho{grid-column:1 / -1}

.datos .alerta{margin:1.4rem 0 0}
.instruccion{margin:1.5rem 0 0;text-align:center;color:var(--tinta-suave);font-size:.98rem}

.credencial ~ .acciones{width:calc(100% - 2rem);max-width:520px;margin:1.6rem auto 0;justify-content:center}

/* Impresion: papel blanco, sin adornos, el QR entero en la hoja. */
@media print{
  body{background:#FFFFFF;color:#1E1F22;padding:0;font-size:12pt}
  .nav,footer{display:none}
  .credencial{border:1px solid #CCCCCC;background:#FFFFFF;max-width:100%}
  .credencial::before{background:#17B2AD}
  .grilla div{background:#FFFFFF}
  .grilla,.grilla div{border-color:#CCCCCC}
  .persona{border-color:#CCCCCC}
  .credencial .tapa{border-color:#CCCCCC}
  .qr-caja{padding:0}
  .qr-caja svg{width:260px}
  .credencial ~ .acciones{display:none}
  .sello{background:#17B2AD!important;color:#08201F!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  a[href]::after{content:''}
}

/* Ronda: el paso a paso */
.como-funciona{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin:0 0 3rem}
@media(max-width:760px){.como-funciona{grid-template-columns:1fr}}
.paso{padding:1.8rem;border:1px solid var(--borde);background:color-mix(in srgb,var(--fondo) 60%,transparent)}
.paso i{font-style:normal;font-size:.78rem;font-weight:700;letter-spacing:.2em;color:var(--cobre-texto)}
.paso b{display:block;font-size:1.2rem;font-weight:700;margin:.5rem 0 .4rem}
.paso p{margin:0;color:var(--tinta-suave);font-size:.95rem}

/* Galeria */
.galeria{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media(min-width:760px){.galeria{grid-template-columns:repeat(3,1fr)}}
.galeria figure,.galeria .foto{margin:0;display:block;position:relative;overflow:hidden;background:var(--fondo-alt);aspect-ratio:4/3}
.galeria img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.galeria figure:hover img,.galeria .foto:hover img{transform:scale(1.05)}
.galeria figcaption{
  position:absolute;left:0;bottom:0;padding:.35rem .7rem;
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:color-mix(in srgb,var(--grafito) 80%,transparent);color:#F5F7F8;
}
.dia-chip--activo{border-color:var(--turquesa);color:var(--turquesa-texto)}
#lightbox{border:none;background:transparent;padding:0;max-width:min(1100px,94vw)}
#lightbox img{width:100%;height:auto;border-radius:3px;cursor:zoom-out}
#lightbox::backdrop{background:rgba(20,21,23,.9)}

/* Resultado de pago */
.resultado-pago{max-width:640px;padding:1.8rem;border:1px solid var(--borde);border-left:4px solid var(--acero);background:var(--fondo-alt)}
.resultado-pago--confirmado{border-left-color:var(--exito)}
.resultado-pago--pendiente{border-left-color:var(--advertencia)}
.resultado-pago--rechazado{border-left-color:var(--error)}
.resultado-pago p{margin:0 0 1.4rem}

/* Plano del salon.
   El dibujo trae sus propios colores (crema, azules, verdes) y no responde a
   los tokens: sobre el fondo grafito del modo oscuro quedaria ilegible. Por eso
   el lienzo es siempre claro, con marco propio, y hace de "papel". */
.plano{margin:0}
.plano-lienzo{max-width:100%;background:#fff;border:1px solid var(--borde);border-radius:14px;padding:clamp(.6rem,2vw,1.2rem);overflow-x:auto;-webkit-overflow-scrolling:touch}
/* base.css da max-width:100% a todo svg; con el min-width de abajo, ese par
   empujaba el ancho del documento y desbordaba la pagina entera en el celular.
   El max-width:none deja que el ancho lo gobierne el contenedor, que si
   desplaza en horizontal. */
.plano-svg{display:block;width:100%;max-width:none;min-width:720px;height:auto}
.plano figcaption{margin-top:.9rem;font-size:.9rem;color:var(--tinta-suave)}

/* Referencias de color, en la misma linea que el plano */
.plano-refs{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin:1.4rem 0 0;padding:0;list-style:none;font-size:.92rem;color:var(--tinta-suave)}
.plano-refs li{display:flex;align-items:center;gap:.5rem}
.plano-ref{width:1rem;height:1rem;border-radius:3px;background:var(--c);border:1px solid rgba(0,0,0,.25);flex:none}
.plano-ref--linea{width:1.6rem;height:0;border:0;border-top:3px dashed #e8402a;border-radius:0}

/* En pantallas chicas el plano no entra: se desplaza en horizontal y se avisa. */
@media (max-width:860px){
  .plano-lienzo::after{content:"Deslizá para ver el plano completo";display:block;margin-top:.6rem;font-size:.82rem;color:#6d747a}
}