/* EnjoyPass · home. Dirección D1 "Mosaico": blanco, tinta negra, fotos en tarjetas con pestaña y un color por público */
:root{
  color-scheme:light;
  --bg:#ffffff; --fg:#121212; --mute:#5b5b5b; --soft:#f4f4f1; --line:#e7e6e2;
  --orange:#ff7a1a; --amber:#ffb547; --mint:#9fdcae; --sky:#7cc3ee; --lime:#bfe6a8; --green:#1f7a55;
  --font:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:18px; --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--font);font-size:16px;line-height:1.55;margin:0}
img{max-width:100%;display:block}
a{color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
section{padding-block:clamp(56px,8vw,104px)}
h2{font-size:clamp(32px,4.6vw,56px);line-height:1.03;letter-spacing:-.03em;margin:0;font-weight:800;text-wrap:balance}
h3{margin:0;font-size:20px;line-height:1.2;letter-spacing:-.01em}
.eyebrow{font-size:13px;font-weight:600;color:var(--mute);letter-spacing:.02em;margin:0 0 12px}
.lead{color:#333;max-width:58ch;margin:16px 0 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:13px 22px;font-weight:600;font-size:15px;text-decoration:none;border:1.5px solid var(--fg);cursor:pointer;font-family:inherit;background:none;color:var(--fg)}
.btn.p{background:var(--fg);color:var(--bg)}
.btn:hover{transform:translateY(-1px)}
@media (prefers-reduced-motion:no-preference){.btn{transition:transform .15s}}
.num{font-variant-numeric:tabular-nums}

/* Nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:#ffffffeb;backdrop-filter:blur(10px);border-bottom:1px solid transparent}
.nav .wrap{display:flex;align-items:center;gap:12px 28px;padding-block:16px}
.logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:20px;letter-spacing:-.02em;text-decoration:none;margin-right:auto}
/* LOGO oficial de EnjoyPass: icono + logotipo (archivos en img/logo/) */
.logo{gap:10px}
.logo .mark{width:34px;height:34px;flex:none}
.logo .word{height:17px;width:auto;flex:none}
.nav .links{display:flex;gap:6px 24px;font-size:15px;font-weight:500}
.nav .links a{text-decoration:none}
.nav .links a:hover{text-decoration:underline;text-underline-offset:4px}
.nav .acts{display:flex;gap:10px;align-items:center}
.nav .acts .btn{padding:10px 18px;font-size:14px}
.menu-btn{display:none;border:1.5px solid var(--fg);background:none;border-radius:999px;padding:9px 14px;font:600 14px var(--font)}

/* Hero */
.hero{padding-block:28px 56px}
.hero-head{display:grid;grid-template-columns:120px 1fr 120px;align-items:center;gap:12px;text-align:center}
.badge{width:104px;height:104px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:11px;line-height:1.3;font-weight:600;padding:14px}
.badge b{display:block;font-size:24px}
.hero h1{font-size:clamp(40px,6.6vw,86px);line-height:1;letter-spacing:-.04em;margin:0;font-weight:800;text-wrap:balance}
.hero .eyebrow{margin-bottom:10px}
.dots{justify-self:end;display:flex}
.dots i{width:40px;height:40px;border-radius:50%;border:3px solid var(--bg);margin-left:-12px;display:block}
.mosaic{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;align-items:end;margin-top:32px}
.col{display:grid;gap:14px}
.photo{position:relative;overflow:hidden;border-radius:var(--r);background:var(--c,#eee)}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo .tag{position:absolute;left:10px;bottom:10px;background:#ffffffe8;border-radius:999px;padding:4px 11px;font-size:12px;font-weight:600}
.tab{clip-path:polygon(0 0,52% 0,60% 16px,100% 16px,100% 100%,0 100%)}
.tab.r{clip-path:polygon(0 16px,40% 16px,48% 0,100% 0,100% 100%,0 100%)}
.h-tall{height:310px}.h-mid{height:340px}.h-short{height:124px}
.center{display:grid;gap:12px}
.ticket{background:var(--soft);border-radius:var(--r);padding:16px;display:grid;gap:10px}
.ticket .row{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:var(--mute);letter-spacing:.06em;text-transform:uppercase}
.ticket .ok{color:#1c7a45}
.ticket .ev{font-size:21px;font-weight:800;line-height:1.1}
.ticket .foot{display:flex;gap:10px;align-items:center;font-size:12px;line-height:1.4}
.ticket .foot strong{display:block;font-size:15px}
.qr{width:52px;height:52px;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;flex:none}
.qr i{display:block;background:currentColor;border-radius:1px}
.qr i.o{opacity:0}
.hero-foot{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:28px 48px;align-items:end;border-top:1px solid var(--line);margin-top:36px;padding-top:28px}
.hero-foot .lead{margin:0}
.hero-foot .ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.facts{display:grid;gap:6px;font-size:15px}
.facts div{display:flex;gap:14px;align-items:baseline}
.facts span{font-size:28px;font-weight:300;width:38px;flex:none}
.fine{color:var(--mute);font-size:13px}

/* Para quién */
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 48px;align-items:end;margin-bottom:36px}
.sec-head .lead{margin:0}
.audiences{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.aud .photo{height:260px}
.aud h3{margin-top:14px}
.aud p{margin:6px 0 0;color:var(--mute);font-size:15px;max-width:40ch}

/* El dinero */
.money{background:var(--soft)}
.flow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:stretch;margin-top:40px}
.node{background:var(--bg);border-radius:var(--r);padding:22px;display:grid;gap:6px;align-content:start}
.node small{font-size:12px;font-weight:600;color:var(--mute);text-transform:uppercase;letter-spacing:.06em}
.node b{font-size:20px;line-height:1.2}
.node p{margin:0;color:var(--mute);font-size:14px}
.node.you{background:var(--fg);color:var(--bg)}
.node.you p,.node.you small{color:#c9c9c9}
.node.ep{border:1.5px dashed #bdbdb7;background:transparent}
.arrow{display:grid;place-items:center;font-size:24px;color:var(--mute)}
.points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px}
.points div{border-top:1.5px solid var(--fg);padding-top:16px}
.points p{margin:8px 0 0;color:#3a3a3a;font-size:15px}

/* Cómo funciona */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;counter-reset:s}
.steps li{counter-increment:s;background:var(--c);border-radius:var(--r);padding:20px;display:grid;gap:10px;align-content:start;min-height:250px}
.steps li::before{content:counter(s,decimal-leading-zero);font-size:34px;font-weight:300;line-height:1}
.steps li p{margin:0;font-size:14px;line-height:1.5}
.steps li:nth-child(5){color:var(--bg)}

/* Comparación */
.table-wrap{overflow-x:auto;margin-top:8px}
table{width:100%;border-collapse:collapse;min-width:620px;font-size:15px}
th,td{text-align:left;padding:16px 14px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{font-size:13px;color:var(--mute);font-weight:600}
thead th:last-child{color:var(--fg)}
td:last-child{font-weight:700;background:#fafaf7}
tbody th{font-weight:500}

/* Qué incluye */
.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.feat{border:1px solid var(--line);border-radius:var(--r);padding:22px;display:grid;gap:8px;align-content:start}
.feat p{margin:0;color:var(--mute);font-size:15px}
.feat.dark{background:var(--fg);color:var(--bg)}
.feat.dark p{color:#c9c9c9}

/* Precio */
.pricing{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:stretch}
.calc,.tiers{border-radius:var(--r);padding:clamp(20px,3vw,32px)}
.calc{background:var(--fg);color:var(--bg);display:grid;gap:18px;align-content:start}
.calc label{font-weight:600}
.calc output{font-size:clamp(44px,6vw,64px);font-weight:800;letter-spacing:-.03em;line-height:1}
.calc input[type=range]{width:100%;accent-color:var(--orange)}
.calc .scale{display:flex;justify-content:space-between;font-size:12px;color:#a9a9a9}
.calc dl{margin:0;display:grid;gap:8px;border-top:1px solid #333;padding-top:16px}
.calc dl div{display:flex;justify-content:space-between;gap:12px}
.calc dt{color:#bdbdbd}
.calc dd{margin:0;font-weight:700}
.calc .total dd{font-size:24px}
.calc .btn{background:var(--orange);border-color:var(--orange);color:var(--fg)}
.tiers{background:var(--soft);display:grid;gap:4px;align-content:start}
.tier{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
.tier.on{font-weight:700}
.tier .off{font-size:13px;color:var(--mute);min-width:44px;text-align:right}
.tiers ul{margin:16px 0 0;padding-left:18px;color:var(--mute);font-size:14px;display:grid;gap:6px}

/* Compradores */
.buyers{background:var(--soft)}
.buyer-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px 56px}
.buyer-list{display:grid;gap:12px}
.buyer-list div{background:var(--bg);border-radius:var(--r);padding:20px}
.buyer-list p{margin:6px 0 0;color:#3a3a3a;font-size:15px}

/* FAQ */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:28px 56px}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:18px 36px 18px 0;font-weight:600;font-size:17px;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:14px;font-size:24px;font-weight:300}
details[open] summary::after{content:"–"}
details p{margin:0 0 18px;color:#3a3a3a;max-width:62ch}

/* Footer */
footer{border-top:1px solid var(--line);padding-block:48px 32px;font-size:14px}
.fcols{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.2fr;gap:28px}
.fcols h4{margin:0 0 12px;font-size:13px;color:var(--mute);font-weight:600}
.fcols ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fcols a{text-decoration:none}
.fcols a:hover{text-decoration:underline}
.legal-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.legal-btns a{border:1.5px solid var(--fg);border-radius:999px;padding:8px 14px;font-weight:600;text-decoration:none;font-size:13px}
.fbottom{border-top:1px solid var(--line);margin-top:28px;padding-top:20px;display:grid;gap:6px;color:var(--mute);font-size:13px}

/* Responsive */
@media (max-width:980px){
  .nav .links{display:none}
  .menu-btn{display:inline-flex}
  .nav.open .links{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--bg);padding:16px clamp(16px,4vw,40px) 24px;border-bottom:1px solid var(--line);font-size:18px;gap:14px}
  .hero-head{grid-template-columns:1fr}.badge,.dots{display:none}
  .mosaic{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mosaic .col.c4,.mosaic .col.c5{display:none}
  .mosaic .center{grid-column:1/-1;order:-1}
  .hero-foot,.sec-head,.pricing,.buyer-grid,.faq{grid-template-columns:1fr}
  .audiences,.features{grid-template-columns:repeat(2,minmax(0,1fr))}
  .points{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fcols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .audiences,.features,.steps,.fcols{grid-template-columns:1fr}
  .steps li{min-height:0}
  .nav .acts .btn.g{display:none}
}

/* ===================== Páginas legales y formularios ===================== */
.page-head{padding-block:clamp(40px,6vw,72px) 28px;border-bottom:1px solid var(--line)}
.page-head h1{font-size:clamp(34px,5vw,60px);line-height:1.02;letter-spacing:-.035em;margin:0;font-weight:800;text-wrap:balance}
.page-head p{margin:14px 0 0;color:var(--mute);max-width:62ch}
.page-head .meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;margin-top:18px}
.page-head .meta a{font-weight:600}
.doc{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(24px,5vw,64px);padding-block:40px 88px}
.toc{position:sticky;top:96px;align-self:start;font-size:14px;max-height:calc(100vh - 120px);overflow:auto}
.toc b{display:block;font-size:12px;color:var(--mute);margin-bottom:10px;letter-spacing:.04em}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.toc a{text-decoration:none;color:var(--mute)}
.toc a:hover,.toc a.on{color:var(--fg);text-decoration:underline;text-underline-offset:3px}
.prose{min-width:0;max-width:72ch}
.prose h2{font-size:clamp(22px,2.4vw,26px);margin:44px 0 12px;scroll-margin-top:96px;letter-spacing:-.015em;line-height:1.2}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:17px;margin:22px 0 8px}
.prose p,.prose li{color:#2c2c2c}
.prose p{margin:0 0 12px}
.prose ul{margin:0 0 14px;padding-left:20px;display:grid;gap:6px}
.prose .key{background:var(--soft);border-radius:14px;padding:16px 18px;margin:0 0 14px}
.prose .key p:last-child{margin:0}
.prose .aaip{font-size:14px;color:var(--mute);border-left:3px solid var(--line);padding-left:14px}
.summary{background:var(--fg);color:var(--bg);border-radius:var(--r);padding:22px;margin-bottom:36px}
.summary h2{color:var(--bg);margin:0 0 10px;font-size:18px}
.summary ul{margin:0;padding-left:18px;display:grid;gap:6px}
.summary li{color:#dcdcdc}

.form-page{padding-block:40px 88px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:start}
.rules{display:grid;gap:12px}
.rules div{background:var(--soft);border-radius:var(--r);padding:20px}
.rules p{margin:6px 0 0;color:#3a3a3a;font-size:15px}
.form-card{border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,3vw,32px);display:grid;gap:18px}
.field{display:grid;gap:6px}
.field label,.field legend{font-weight:600;font-size:15px}
.field .hint{font-size:13px;color:var(--mute)}
.field input[type=email],.field input[type=text],.field textarea{font:inherit;border:1.5px solid #cfcfca;border-radius:12px;padding:12px 14px;background:var(--bg);color:var(--fg);width:100%}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--fg)}
fieldset.field{border:0;padding:0;margin:0}
.choices{display:grid;gap:8px;margin-top:4px}
.choices label{display:flex;gap:10px;align-items:flex-start;border:1.5px solid #cfcfca;border-radius:12px;padding:12px 14px;font-weight:500;cursor:pointer}
.choices label:has(input:checked){border-color:var(--fg);background:var(--soft)}
.choices input{margin-top:3px;accent-color:var(--fg)}
.form-error{background:#fdecea;color:#8a1c12;border-radius:12px;padding:12px 14px;font-size:14px;margin:0}
.done{border:1.5px solid var(--fg);border-radius:var(--r);padding:clamp(20px,3vw,32px);display:grid;gap:10px}
.done h2{font-size:26px}
.done p{margin:0;color:#3a3a3a}
.done .code{font-size:28px;font-weight:800;letter-spacing:.04em}
@media (max-width:980px){
  .doc,.form-page{grid-template-columns:1fr}
  .toc{position:static;max-height:none;border:1px solid var(--line);border-radius:var(--r);padding:16px}
}

/* ===================== Diferencia con una ticketera ===================== */
.money h2{max-width:22ch}
.vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:32px}
.vs-col{border-radius:var(--r);padding:24px;background:#e9e8e3}
.vs-col h3{font-size:15px;color:var(--mute);font-weight:600;margin-bottom:14px}
.vs-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.vs-col li{font-size:18px;font-weight:600;line-height:1.3;display:flex;gap:10px;align-items:baseline}
.vs-col li::before{content:"—";color:var(--mute);flex:none}
.vs-col.ep{background:var(--fg);color:var(--bg)}
.vs-col.ep h3{color:#c9c9c9}
.vs-col.ep li::before{content:"✓";color:var(--orange)}

/* ===================== Alcance del servicio ===================== */
.duties{border-top:1px solid var(--line)}
.duty-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.duty{border:1px solid var(--line);border-radius:var(--r);padding:24px}
.duty.org{background:var(--soft);border-color:var(--soft)}
.duty h3{margin-bottom:12px}
.duty ul{margin:0;padding-left:18px;display:grid;gap:8px;color:#2c2c2c;font-size:15px}
.duty-note{margin:20px 0 0;color:#2c2c2c;max-width:80ch;font-size:15px}
.buyers-note{margin-top:28px;border-top:1px solid var(--line);padding-top:24px;display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,1fr);gap:8px 40px;scroll-margin-top:96px}
.buyers-note h3{font-size:18px}
.buyers-note p{margin:0;color:#2c2c2c;font-size:15px;max-width:70ch}

/* ===================== Barra flotante ===================== */
.sticky-cta{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:30;transform:translate(-50%,140%);
  width:min(760px,calc(100% - 32px));background:var(--fg);color:var(--bg);border-radius:999px;padding:10px 10px 10px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;box-shadow:0 18px 40px -18px #0009}
.sticky-cta.show{transform:translate(-50%,0)}
.sticky-cta .sc-text{display:grid;line-height:1.25;min-width:0}
.sticky-cta .sc-text span{font-size:13px;color:#bdbdbd}
.sticky-cta .sc-btns{display:flex;gap:8px;flex:none}
.sticky-cta .btn{padding:11px 18px;font-size:14px;border-color:#555;color:var(--bg)}
.sticky-cta .btn.p{background:var(--orange);border-color:var(--orange);color:var(--fg)}
@media (prefers-reduced-motion:no-preference){.sticky-cta{transition:transform .35s ease}}
footer{padding-bottom:110px}
@media (max-width:980px){
  .vs,.duty-grid,.buyers-note{grid-template-columns:1fr}
}
@media (max-width:620px){
  .sticky-cta{border-radius:20px;flex-direction:column;align-items:stretch;padding:14px}
  .sticky-cta .sc-btns{display:grid;grid-template-columns:1fr 1fr}
  .sticky-cta .sc-text span{display:none}
}

/* ===================== Ajustes de encabezados ===================== */
/* Título y bajada juntos, uno debajo del otro, en todas las secciones */
.sec-head{grid-template-columns:minmax(0,1fr);gap:14px;max-width:860px;align-items:start}
.sec-head .lead{margin:0;max-width:62ch}
.buyers-note{grid-template-columns:minmax(0,1fr);gap:8px}

/* Mensaje destacado de precio por cantidad */
.volume-note{margin:0;display:inline-block;background:var(--orange);color:var(--fg);border-radius:14px;padding:14px 18px;font-size:clamp(17px,1.8vw,20px);font-weight:500;line-height:1.35;max-width:46ch}
.volume-note strong{font-weight:800}
.calc .save{border-top:1px dashed #444;padding-top:10px}
.calc .save dt{color:var(--orange)}
.calc .save dd{color:var(--orange);font-size:20px}

/* Campo trampa anti-spam de los formularios legales (fuera de pantalla, no display:none para que los bots lo vean) */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}