/* ══════════════════════════════════════════════════════════════════════
   OMAYA — la marca, del lado del motor de entradas.

   Estas páginas son la última parte del viaje: quien llega acá ya pagó. Si
   la compra se hizo en una web con Herculanum, verde y esquina viva, y la
   entrada aparece con otra tipografía y esquinas redondeadas, el viaje se
   corta justo donde debía cerrar.

   Es el subconjunto del sistema de la web (omaya-web/site/assets/css) que
   estas dos páginas necesitan. Las reglas duras del manual valen igual:
   solo los cinco colores, solo las dos tipografías, esquina viva en todo
   —el círculo es la única curva— y el dorado nunca lleva texto chico: es
   filete, marco y ornamento.
   ══════════════════════════════════════════════════════════════════════ */
@font-face{font-family:'EB Garamond';src:url('/static/fonts/EBGaramond.woff2') format('woff2');
  font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('/static/fonts/EBGaramond-Italic.woff2') format('woff2');
  font-weight:400 800;font-style:italic;font-display:swap}
@font-face{font-family:'Herculanum';src:url('/static/fonts/Herculanum.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}

:root{
  --verde:#214334;
  --medio:#638D75;
  --salvia:#A8BAA8;
  --oro:#AA8555;
  --crema:#EFEDDC;
  --filete:rgba(170,133,85,.42);
  --filete-fuerte:rgba(170,133,85,.7);
  --ease:cubic-bezier(.22,.61,.36,1);
  --out:cubic-bezier(.16,1,.3,1);
  --pad:clamp(1.25rem,4.6vw,2.5rem);
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--verde);color:var(--crema);
  font-family:'EB Garamond',Georgia,'Times New Roman',serif;
  font-size:clamp(1.04rem,.5vw + .94rem,1.15rem);line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
[x-cloak]{display:none!important}

.wrap{width:100%;max-width:720px;margin-inline:auto;padding-inline:var(--pad)}
.wrap--ancho{max-width:900px}

/* ── Barra ──────────────────────────────────────────────────────────── */
.nav{border-bottom:1px solid var(--filete)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.1rem}
.nav__logo{width:clamp(104px,16vw,132px);height:auto}
.nav__tag{font-size:.66rem;text-transform:uppercase;letter-spacing:.2em;color:var(--salvia);margin:0}

/* ── Tipografía ─────────────────────────────────────────────────────── */
.title{
  font-family:'Herculanum','EB Garamond',serif;font-weight:400;text-transform:uppercase;
  letter-spacing:.02em;line-height:1.08;margin:0 0 1rem;text-wrap:balance;
  font-size:clamp(1.5rem,3.6vw,2.4rem);
}
.title--sm{font-size:clamp(1.1rem,2vw,1.35rem);margin-bottom:.6rem}
.kicker{margin:0 0 .9rem;font-size:.66rem;text-transform:uppercase;letter-spacing:.2em;color:var(--salvia)}
.lede{font-size:1.02rem;line-height:1.7;color:var(--salvia);margin:0 0 1.1rem;max-width:52ch}
.note{font-size:.84rem;line-height:1.6;color:var(--salvia);margin:0}
.sec{padding-block:clamp(2.4rem,5vw,3.6rem)}
.center{text-align:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Botones ────────────────────────────────────────────────────────── */
.btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  padding:1em 2.1em;border:1px solid var(--crema);background:var(--crema);color:var(--verde);
  font-family:'EB Garamond',serif;font-size:.78rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.17em;text-decoration:none;cursor:pointer;border-radius:0;
  transition:color .5s var(--ease),border-color .5s var(--ease);
}
.btn::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--verde);
  transform:scaleY(0);transform-origin:50% 100%;transition:transform .55s var(--out)}
.btn:hover::before,.btn:focus-visible::before{transform:scaleY(1)}
.btn:hover,.btn:focus-visible{color:var(--crema)}
.btn--full{width:100%}
.btn--line{background:transparent;border-color:var(--filete-fuerte);color:var(--crema)}
.btn--line::before{background:var(--crema)}
.btn--line:hover,.btn--line:focus-visible{color:var(--verde);border-color:var(--crema)}
.btn--sm{padding:.7em 1.3em;font-size:.68rem}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ── La entrada ─────────────────────────────────────────────────────── */
/* Fondo crema y QR sobre blanco: en la puerta hay poca luz y el lector tiene
   que morder a la primera. La perforación es la misma de las tarjetas de la
   web —el troquel es de la marca, no un adorno de esta página. */
.pase{background:var(--crema);color:var(--verde);padding:clamp(1.6rem,4vw,2.4rem);text-align:center;
  box-shadow:inset 0 0 0 1px var(--filete-fuerte)}
.pase__quien{font-size:.66rem;text-transform:uppercase;letter-spacing:.2em;color:rgba(33,67,52,.7);margin:0 0 .4rem}
.pase__nombre{font-family:'Herculanum','EB Garamond',serif;font-weight:400;text-transform:uppercase;
  letter-spacing:.03em;font-size:clamp(1.2rem,3vw,1.7rem);line-height:1.2;margin:0 0 1.3rem;color:var(--verde)}
.pase__qr{display:inline-block;padding:12px;background:#fff;box-shadow:inset 0 0 0 1px rgba(33,67,52,.2)}
.pase__qr img{width:min(260px,62vw);height:auto}
.pase__perf{position:relative;height:1px;margin:1.4rem calc(-1 * clamp(1.6rem,4vw,2.4rem));
  background:repeating-linear-gradient(to right,var(--oro) 0 7px,transparent 7px 14px);opacity:.8}
.pase__perf::before,.pase__perf::after{content:'';position:absolute;top:50%;translate:0 -50%;
  width:20px;height:20px;border-radius:50%;background:var(--verde)}
.pase__perf::before{left:-10px}
.pase__perf::after{right:-10px}
.pase__tipo{font-family:'Herculanum','EB Garamond',serif;text-transform:uppercase;letter-spacing:.16em;
  font-size:.8rem;margin:0;color:var(--verde)}
.pase__ayuda{font-size:.82rem;color:rgba(33,67,52,.72);margin:.9rem 0 0}

/* El sello del estado: filete, no pastilla de color. */
.sello{display:inline-block;padding:.45em 1.1em;margin:0 0 1.1rem;
  font-size:.62rem;text-transform:uppercase;letter-spacing:.2em;
  box-shadow:inset 0 0 0 1px var(--filete-fuerte);color:var(--salvia)}

/* ── Las entradas de una compra ─────────────────────────────────────── */
.fila{display:grid;gap:1.2rem;grid-template-columns:auto 1fr;align-items:start;
  padding:clamp(1.2rem,2.6vw,1.7rem);box-shadow:inset 0 0 0 1px var(--filete)}
.fila + .fila{margin-top:1rem}
.fila__qr{width:92px;height:92px;background:var(--crema);padding:6px}
.fila__cod{font-size:.64rem;text-transform:uppercase;letter-spacing:.2em;color:var(--salvia);margin:0 0 .35rem}
.fila__nombre{font-family:'Herculanum','EB Garamond',serif;font-weight:400;text-transform:uppercase;
  letter-spacing:.03em;font-size:1.02rem;margin:0}
.fila__sin{color:var(--salvia);font-style:italic;text-transform:none;letter-spacing:0;font-family:'EB Garamond',serif}
.fila__acc{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}
.fila__err{font-size:.82rem;font-style:italic;color:var(--crema);margin:.5rem 0 0}
@media (max-width:520px){
  .fila{grid-template-columns:1fr;justify-items:start}
  .fila__qr{width:104px;height:104px}
}

/* Campo de texto: el mismo filete de la web, sin caja gris ni esquina redonda. */
.campo{width:100%;max-width:320px;padding:.7rem .9rem;background:transparent;
  border:1px solid var(--filete);color:var(--crema);font:inherit;font-size:.96rem;border-radius:0;
  transition:border-color .4s,box-shadow .4s}
.campo::placeholder{color:var(--salvia);opacity:.75}
.campo:focus{outline:0;border-color:var(--filete-fuerte);box-shadow:0 0 0 2px rgba(170,133,85,.25)}

.pie{border-top:1px solid var(--filete);margin-top:clamp(2.4rem,5vw,4rem)}
.pie__in{padding-block:1.6rem;text-align:center;font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--salvia)}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}