/* ============================================================
   Taquillita — www.taquillita.org
   Landing orgánica. Diseño cálido, editorial, confiado.
   Verde de la app, papel claro, tipografía con carácter.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* superficies */
  --bg:#f4f1e7;
  --surface:#fffdf8;
  --surface-sink:#efead9;

  /* tinta */
  --ink:#1c1b15;
  --ink-soft:#574f3f;
  --ink-mute:#8a8472;

  /* marca */
  --green:#15633a;
  --green-deep:#0d4527;
  --green-night:#082c19;
  --mint:#54c189;
  --blue:#1f5fd0;
  --gold:#c4880f;

  /* líneas */
  --line:#e6dfca;
  --line-2:#d6ccae;

  /* forma */
  --r:18px;
  --r-lg:28px;
  --maxw:1140px;

  /* tipografía */
  --f-display:'Fraunces',Georgia,'Times New Roman',serif;
  --f-body:'Hanken Grotesk','Segoe UI',system-ui,sans-serif;
  --f-mono:'Space Mono',ui-monospace,'Courier New',monospace;
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  font-family:var(--f-body);
  background:var(--bg);
  color:var(--ink);
  line-height:1.62;
  font-size:clamp(1rem,0.97rem + 0.22vw,1.1rem);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{display:block;max-width:100%;height:auto}
a{color:inherit}
strong,b{font-weight:700}

/* ===== helpers ================================================= */
.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 clamp(1.15rem,4.5vw,2.6rem);
}

.kicker{
  font-family:var(--f-mono);
  text-transform:uppercase;
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.2em;
  color:var(--green);
  display:inline-flex;align-items:center;gap:0.55rem;
}
.kicker::before{
  content:"";
  width:1.6rem;height:2px;
  background:var(--green);
  display:inline-block;
}

/* ===== encabezado fijo ========================================= */
.site{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site .wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;
}
.brand{
  font-family:var(--f-display);
  font-weight:800;
  font-size:1.5rem;
  letter-spacing:-0.02em;
  text-decoration:none;
  display:flex;align-items:baseline;gap:0.5rem;
  color:var(--ink);
}
.brand span{
  font-family:var(--f-mono);
  font-size:0.6rem;
  font-weight:400;
  letter-spacing:0.13em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.lang{
  font-family:var(--f-mono);
  font-size:0.75rem;font-weight:700;
  letter-spacing:0.08em;
  text-decoration:none;
  border:1.5px solid var(--ink);
  border-radius:999px;
  padding:0.34rem 0.78rem;
  transition:background 0.18s,color 0.18s;
}
.lang:hover{background:var(--ink);color:var(--bg)}

/* ===== botones ================================================= */
.btn{
  font-family:var(--f-body);
  font-weight:700;font-size:1rem;
  text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:0.55rem;
  padding:0.95rem 1.6rem;
  border-radius:13px;
  border:1.6px solid transparent;
  cursor:pointer;
  transition:transform 0.16s ease,box-shadow 0.16s ease,background 0.16s,color 0.16s;
}
.btn svg{width:1.2em;height:1.2em;flex:none}
.btn-primary{
  background:var(--green);color:#fcfaf0;
  box-shadow:0 12px 24px -12px rgba(13,69,39,0.9);
}
.btn-primary:hover{transform:translateY(-2px);background:var(--green-deep);box-shadow:0 18px 30px -12px rgba(13,69,39,0.95)}
.btn-ghost{
  background:transparent;color:var(--ink);
  border-color:var(--line-2);
}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--ink);background:var(--surface)}
.btn-light{background:#fcfaf0;color:var(--green-deep)}
.btn-light:hover{transform:translateY(-2px);background:#fff}

/* ===== HERO ==================================================== */
.hero{
  text-align:center;
  padding:clamp(2.8rem,7vw,5.5rem) 0 clamp(2.4rem,6vw,4rem);
  position:relative;
}
.hero .kicker{margin-bottom:1.4rem}
.hero h1{
  font-family:var(--f-display);
  font-optical-sizing:auto;
  font-weight:800;
  font-size:clamp(2.3rem,1.3rem + 4.6vw,4.6rem);
  line-height:1.03;
  letter-spacing:-0.028em;
  max-width:16ch;
  margin:0 auto;
}
.hero h1 em{
  font-style:italic;font-weight:500;
  color:var(--green);
}
.hero__lede{
  font-size:clamp(1.08rem,1rem + 0.55vw,1.32rem);
  color:var(--ink-soft);
  max-width:46ch;
  margin:1.4rem auto 0;
}
.hero__cta{
  display:flex;flex-wrap:wrap;gap:0.85rem;justify-content:center;
  margin-top:2rem;
}
.hero__note{
  font-family:var(--f-mono);
  font-size:0.72rem;letter-spacing:0.04em;
  color:var(--ink-mute);
  margin-top:1.1rem;
}

/* boleto del hero */
.hero__ticket{
  margin:clamp(2.6rem,6vw,4rem) auto 0;
  max-width:540px;
  position:relative;
}
.hero__ticket img{
  width:100%;
  border-radius:14px;
  border:1px solid var(--line-2);
  box-shadow:
    0 2px 6px rgba(28,27,21,0.06),
    0 34px 60px -28px rgba(28,27,21,0.55);
  transform:rotate(-1.8deg);
}
.hero__ticket figcaption{
  font-family:var(--f-mono);
  font-size:0.72rem;line-height:1.6;
  color:var(--ink-mute);
  margin-top:1.5rem;
  max-width:36ch;
  margin-inline:auto;
}

/* ===== secciones genéricas ===================================== */
section{padding:clamp(3rem,8vw,6rem) 0}
.section-head{max-width:34rem}
.section-head.is-center{margin-inline:auto;text-align:center}
.section-head h2{
  font-family:var(--f-display);
  font-weight:800;
  font-size:clamp(1.95rem,1.4rem + 2.6vw,3.3rem);
  line-height:1.07;
  letter-spacing:-0.025em;
  margin:0.85rem 0 0;
}
.section-head h2 em{font-style:italic;font-weight:500;color:var(--green)}
.section-head p{
  color:var(--ink-soft);
  margin-top:0.85rem;
  font-size:1.06rem;
}

/* ===== CÓMO FUNCIONA / pasos =================================== */
.steps__grid{
  display:grid;gap:1.4rem;
  grid-template-columns:1fr;
  margin-top:clamp(2rem,5vw,3.2rem);
}
.step{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(1.7rem,4vw,2.3rem) clamp(1.5rem,4vw,2rem) 2rem;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
.step__shot{
  width:100%;max-width:236px;
  margin:0 auto;
}
.step__shot img{
  width:100%;
  border-radius:24px;
  box-shadow:
    0 2px 5px rgba(28,27,21,0.05),
    0 26px 46px -22px rgba(28,27,21,0.45);
}
.step__no{
  font-family:var(--f-mono);
  font-size:0.74rem;font-weight:700;
  letter-spacing:0.16em;text-transform:uppercase;
  color:var(--green);
  margin:1.7rem 0 0.55rem;
}
.step h3{
  font-family:var(--f-display);
  font-weight:700;
  font-size:1.55rem;
  letter-spacing:-0.015em;
  margin-bottom:0.45rem;
}
.step p{color:var(--ink-soft);font-size:1rem}
.step p b{color:var(--green);font-weight:700}

/* ===== CLAIM (sección verde noche) ============================= */
.claim{
  background:var(--green-night);
  color:#e9e3cf;
  border-radius:var(--r-lg);
  margin:0;
  padding:clamp(2.8rem,7vw,5rem) clamp(1.5rem,5vw,4rem);
}
.claim .kicker{color:var(--mint)}
.claim .kicker::before{background:var(--mint)}
.claim h2{
  font-family:var(--f-display);
  font-weight:800;
  font-size:clamp(1.85rem,1.3rem + 2.6vw,3.1rem);
  line-height:1.08;
  letter-spacing:-0.025em;
  margin:0.9rem 0 0;
  max-width:20ch;
}
.claim__lead{
  color:#c9b988;
  font-size:clamp(1.05rem,1rem + 0.5vw,1.3rem);
  margin-top:0.8rem;
  max-width:38ch;
}
.claim__lead em{font-family:var(--f-display);font-style:italic;color:#f4eed9}
.checks{
  list-style:none;
  margin-top:2.3rem;
  display:grid;gap:0 2.4rem;
  grid-template-columns:1fr;
}
.checks li{
  display:flex;gap:0.85rem;align-items:flex-start;
  padding:0.85rem 0;
  border-top:1px solid rgba(233,227,207,0.13);
  font-size:1.02rem;
}
.checks li:first-child,.checks li:nth-child(5){border-top:0}
.checks li::before{
  content:"";flex:none;
  width:1.3rem;height:1.3rem;margin-top:0.15rem;
  border-radius:50%;
  background:var(--mint);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.3 16.2 4.8 11.7l1.4-1.4 3.1 3.1 8.5-8.5 1.4 1.4z'/%3E%3C/svg%3E") center/1.05rem no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.3 16.2 4.8 11.7l1.4-1.4 3.1 3.1 8.5-8.5 1.4 1.4z'/%3E%3C/svg%3E") center/1.05rem no-repeat;
}
.checks em{font-style:normal;color:#fff;font-weight:700}

/* ===== CASOS DE USO / chips ==================================== */
.chips{
  list-style:none;
  display:flex;flex-wrap:wrap;gap:0.65rem;
  margin-top:clamp(1.6rem,4vw,2.4rem);
}
.chips li{
  font-family:var(--f-mono);
  font-size:0.86rem;
  letter-spacing:0.01em;
  padding:0.55rem 1.05rem;
  border:1.5px solid var(--line-2);
  border-radius:999px;
  background:var(--surface);
  transition:transform 0.15s,border-color 0.15s,color 0.15s;
}
.chips li:hover{transform:translateY(-2px);border-color:var(--green)}
.chips li.is-origin{
  background:var(--green);
  border-color:var(--green);
  color:#fcfaf0;
  font-weight:700;
}

/* ===== SPLIT (lo que no es / impresos) ========================= */
.split__grid{
  display:grid;gap:1.4rem;
  grid-template-columns:1fr;
}
.panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(1.8rem,4.5vw,2.6rem);
}
.panel h2{
  font-family:var(--f-display);
  font-weight:800;
  font-size:clamp(1.65rem,1.25rem + 1.8vw,2.35rem);
  line-height:1.1;
  letter-spacing:-0.022em;
}
.panel .kicker{margin-bottom:0.85rem}

.notlist{list-style:none;display:grid;gap:0.6rem;margin:1.4rem 0}
.notlist li{
  display:flex;gap:0.7rem;align-items:baseline;
  font-size:1.05rem;font-weight:500;
}
.notlist li::before{
  content:"✕";
  font-family:var(--f-mono);font-weight:700;
  color:#bb3b2d;flex:none;
}
.note-soft{
  border-left:3px solid var(--gold);
  padding-left:1.05rem;
  color:var(--ink-soft);
  font-size:1rem;
}

/* panel de impresos: texto + screenshot */
.panel-print{
  display:flex;gap:clamp(1.4rem,4vw,2.4rem);
  align-items:center;flex-wrap:wrap;
}
.panel-print__body{flex:1;min-width:13rem}
.panel-print__body p{color:var(--ink-soft);margin-top:0.8rem}
.panel-print__shot{
  flex:none;width:212px;margin-inline:auto;
}
.panel-print__shot img{
  width:100%;
  border-radius:12px;
  border:1px solid var(--line-2);
  box-shadow:
    0 2px 5px rgba(28,27,21,0.05),
    0 22px 38px -20px rgba(28,27,21,0.5);
}

/* ===== HONESTIDAD ============================================== */
.honest__card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(2rem,5vw,3.2rem);
  max-width:44rem;
}
.honest__card .kicker{margin-bottom:0.85rem}
.honest__card h2{
  font-family:var(--f-display);
  font-weight:800;
  font-size:clamp(1.7rem,1.3rem + 2vw,2.6rem);
  line-height:1.09;
  letter-spacing:-0.022em;
}
.honest__card p{color:var(--ink-soft);margin-top:0.95rem}
.honest__card p strong{color:var(--ink)}

/* ===== ORIGEN / dedicatoria ==================================== */
.origin{text-align:center}
.origin .wrap{max-width:48rem}
.stamp{
  display:inline-block;
  font-family:var(--f-mono);
  text-transform:uppercase;
  font-size:0.74rem;font-weight:700;
  letter-spacing:0.17em;
  color:var(--gold);
  border:2px solid var(--gold);
  border-radius:7px;
  padding:0.42rem 0.9rem;
  transform:rotate(-3.5deg);
  margin-bottom:1.7rem;
}
.origin__text{
  font-family:var(--f-body);
  font-weight:500;
  font-size:clamp(1.18rem,1rem + 0.9vw,1.6rem);
  line-height:1.58;
  letter-spacing:-0.003em;
}
.origin__text b{font-weight:700;color:var(--green)}

/* ===== PIE ===================================================== */
.site-foot{
  background:var(--green-night);
  color:#cdc6b0;
  padding:clamp(2.6rem,6vw,3.6rem) 0 2.6rem;
}
.site-foot .brand{color:#f4eed9}
.site-foot .brand span{color:#8f9784}
.foot__grid{
  display:flex;flex-wrap:wrap;gap:1.6rem 2.5rem;
  align-items:flex-start;justify-content:space-between;
}
.foot__links{
  display:flex;flex-wrap:wrap;gap:0.5rem 1.5rem;
  font-size:0.96rem;
}
.foot__links a{
  text-decoration:none;
  color:#cdc6b0;
  border-bottom:1.5px solid rgba(84,193,137,0.55);
  padding-bottom:1px;
  transition:color 0.15s;
}
.foot__links a:hover{color:var(--mint)}
.foot__meta{
  margin-top:2rem;
  font-family:var(--f-mono);
  font-size:0.7rem;
  letter-spacing:0.03em;
  color:#8f9784;
  line-height:1.8;
}

/* ===== animaciones (robustas: sin JS, igual se ve) ============= */
@media (prefers-reduced-motion:no-preference){
  @keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

  .js-ready .reveal{opacity:0}
  .js-ready .reveal.is-in{
    animation:rise 0.85s cubic-bezier(0.2,0.7,0.2,1) both;
  }

  .hero .kicker{animation:rise 0.7s cubic-bezier(0.2,0.7,0.2,1) both;animation-delay:0.04s}
  .hero h1{animation:rise 0.7s cubic-bezier(0.2,0.7,0.2,1) both;animation-delay:0.13s}
  .hero__lede{animation:rise 0.7s cubic-bezier(0.2,0.7,0.2,1) both;animation-delay:0.22s}
  .hero__cta{animation:rise 0.7s cubic-bezier(0.2,0.7,0.2,1) both;animation-delay:0.31s}
  .hero__note{animation:rise 0.7s cubic-bezier(0.2,0.7,0.2,1) both;animation-delay:0.38s}
  .hero__ticket{animation:rise 0.95s cubic-bezier(0.2,0.7,0.2,1) both;animation-delay:0.42s}
}

a:focus-visible,.btn:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:3px;
  border-radius:6px;
}

/* ===== responsive ============================================== */
@media (min-width:620px){
  .checks{grid-template-columns:1fr 1fr}
  .checks li:nth-child(5){border-top:1px solid rgba(233,227,207,0.13)}
  .checks li:nth-child(2){border-top:0}
}
@media (min-width:760px){
  .split__grid{grid-template-columns:1fr 1fr;align-items:start}
}
@media (min-width:880px){
  .steps__grid{grid-template-columns:repeat(3,1fr)}
}