/* Tribu Maybe · estilos de la landing
   Fuentes autoalojadas: Bricolage Grotesque e Instrument Sans (SIL Open Font License 1.1) */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-display:swap;font-weight:500;src:url('../fonts/bricolage-grotesque/bricolage-grotesque-latin-ext-500-normal.woff2') format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-display:swap;font-weight:500;src:url('../fonts/bricolage-grotesque/bricolage-grotesque-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-display:swap;font-weight:600;src:url('../fonts/bricolage-grotesque/bricolage-grotesque-latin-ext-600-normal.woff2') format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-display:swap;font-weight:600;src:url('../fonts/bricolage-grotesque/bricolage-grotesque-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-display:swap;font-weight:800;src:url('../fonts/bricolage-grotesque/bricolage-grotesque-latin-ext-800-normal.woff2') format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-display:swap;font-weight:800;src:url('../fonts/bricolage-grotesque/bricolage-grotesque-latin-800-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-display:swap;font-weight:400;src:url('../fonts/instrument-sans/instrument-sans-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-display:swap;font-weight:400;src:url('../fonts/instrument-sans/instrument-sans-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-display:swap;font-weight:500;src:url('../fonts/instrument-sans/instrument-sans-latin-ext-500-normal.woff2') format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-display:swap;font-weight:500;src:url('../fonts/instrument-sans/instrument-sans-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-display:swap;font-weight:600;src:url('../fonts/instrument-sans/instrument-sans-latin-ext-600-normal.woff2') format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-display:swap;font-weight:600;src:url('../fonts/instrument-sans/instrument-sans-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ---------- Tokens Tribu Maybe v1.1 · modo día / modo noche ---------- */
:root{
  --noche:#160F1B; --ciruela:#2A1A33; --coral:#FF6B4E; --lila:#C9A6FF; --ambar:#FFC46B; --hueso:#F7F0E6;
  --bg:#F7F0E6; --surface:#EFE3D3; --card:#FBF7F1; --text:#2A1A33; --text-2:#6B5A72;
  --accent-text:#B23A24; --lila-text:#6E4FA3; --line:rgba(42,26,51,.14);
  --ring:#160F1B; --btn-bg:#FF6B4E; --btn-text:#160F1B; --ghost-border:rgba(42,26,51,.35);
  --tint-coral:rgba(255,107,78,.14); --tint-lila:rgba(201,166,255,.28); --tint-ambar:rgba(255,196,107,.30);
  --glow-1:rgba(255,196,107,.55); --glow-2:rgba(255,107,78,.28); --glow-3:rgba(201,166,255,0);
  --dot-off:rgba(42,26,51,.18); --ruta:#6E4FA3;
  --font-display:'Bricolage Grotesque', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --font-texto:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r-card:20px; --r-panel:24px; --r-inner:12px; --r-chip:999px;
  color-scheme: light; box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#160F1B; --surface:#2A1A33; --card:#22152A; --text:#F7F0E6; --text-2:#A99BB3;
    --accent-text:#FF6B4E; --lila-text:#C9A6FF; --line:rgba(247,240,230,.12);
    --ring:#F7F0E6; --ghost-border:rgba(247,240,230,.35);
    --tint-coral:rgba(255,107,78,.13); --tint-lila:rgba(201,166,255,.12); --tint-ambar:rgba(255,196,107,.11);
    --glow-1:rgba(255,196,107,.55); --glow-2:rgba(255,107,78,.45); --glow-3:rgba(42,26,51,.9);
    --dot-off:rgba(247,240,230,.18); --ruta:#C9A6FF; color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#160F1B; --surface:#2A1A33; --card:#22152A; --text:#F7F0E6; --text-2:#A99BB3;
  --accent-text:#FF6B4E; --lila-text:#C9A6FF; --line:rgba(247,240,230,.12);
  --ring:#F7F0E6; --ghost-border:rgba(247,240,230,.35);
  --tint-coral:rgba(255,107,78,.13); --tint-lila:rgba(201,166,255,.12); --tint-ambar:rgba(255,196,107,.11);
  --glow-1:rgba(255,196,107,.55); --glow-2:rgba(255,107,78,.45); --glow-3:rgba(42,26,51,.9);
  --dot-off:rgba(247,240,230,.18); --ruta:#C9A6FF; color-scheme: dark;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth; scroll-padding-top:calc(env(safe-area-inset-top,0px) + 76px)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--font-texto); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--coral); outline-offset:3px; border-radius:6px}
[hidden]{display:none !important}
.wrap{width:100%; max-width:1180px; margin:0 auto; padding:0 24px}
@media (min-width:760px){.wrap{padding:0 40px}}

/* tipografía */
.display{font-family:var(--font-display); font-weight:800; letter-spacing:-0.03em; line-height:.95; margin:0}
h2.display{font-size:clamp(34px, 5.2vw, 58px); line-height:1.02}
h3{font-family:var(--font-display); font-weight:600; font-size:24px; line-height:1.2; letter-spacing:-0.01em; margin:0}
.etiqueta{font-weight:500; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--lila-text); margin:0 0 14px}
.lead{font-size:clamp(17px,1.6vw,19px); color:var(--text-2); max-width:58ch; margin:22px 0 0}
p{margin:0}
.muted{color:var(--text-2)}

/* rayitas: subrayado hecho a mano que se dibuja al aparecer */
.titulo-trazo{display:block; width:min(220px, 60%); height:16px; margin-top:14px; overflow:visible}
.titulo-trazo path{fill:none; stroke-width:5; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.1s cubic-bezier(.6,.1,.2,1) .15s}
.is-in .titulo-trazo path, .titulo-trazo.is-in path{stroke-dashoffset:0}
.brillo{display:inline-block; width:.42em; height:.42em; vertical-align:top; margin-left:.08em; overflow:visible}
.brillo path{fill:none; stroke:var(--ambar); stroke-width:3; stroke-linecap:round}
@media (prefers-reduced-motion: reduce){.titulo-trazo path{transition:none; stroke-dashoffset:0}}

/* botones */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:50px; padding:0 24px; border-radius:var(--r-chip); font-family:var(--font-texto); font-weight:600; font-size:16px; text-decoration:none; border:0; cursor:pointer; transition:transform .15s ease, background-color .15s ease, border-color .15s ease; white-space:nowrap}
.btn-primary{background:var(--btn-bg); color:var(--btn-text)}
.btn-primary:hover{transform:translateY(-1px); background:#FF7E65}
.btn-ghost{background:transparent; color:var(--text); border:1.5px solid var(--ghost-border)}
.btn-ghost:hover{border-color:var(--text)}
.btn svg{width:20px; height:20px; flex:none}

/* cabecera */
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:51; background:var(--bg)}
.site-header{position:sticky; top:env(safe-area-inset-top,0px); z-index:50; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; height:68px; gap:20px}
.logo{display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--text)}
.logo svg{width:30px; height:30px}
.logo span{font-family:var(--font-display); font-weight:800; font-size:34px; letter-spacing:-0.04em; line-height:1; transform:translateY(-3px)}
.nav{display:none; gap:28px; font-size:15px; font-weight:500}
.nav a{text-decoration:none; color:var(--text-2)}
.nav a:hover{color:var(--text)}
@media (min-width:960px){.nav{display:flex}}
.site-header .btn{min-height:44px; padding:0 18px; font-size:15px}

/* hero */
.hero{position:relative; overflow:hidden; isolation:isolate}
.hero::before{content:""; position:absolute; inset:0; z-index:-2; background:radial-gradient(120% 70% at 70% 112%, var(--glow-1) 0%, var(--glow-2) 32%, var(--glow-3) 62%, transparent 80%)}
.hero::after{content:""; position:absolute; inset:0; z-index:-1; opacity:.35; pointer-events:none; background-image:radial-gradient(var(--dot-off) 1px, transparent 1.2px); background-size:14px 14px; -webkit-mask-image:linear-gradient(to top, #000 0%, transparent 70%); mask-image:linear-gradient(to top, #000 0%, transparent 70%)}
.hero .wrap{display:grid; gap:36px; padding-top:40px; padding-bottom:64px; align-items:center}
.hero .wrap > div{min-width:0}
@media (min-width:900px){.hero .wrap{grid-template-columns:1fr 1fr; gap:48px; padding-top:56px; padding-bottom:96px}}
.hero h1{font-size:clamp(44px, 5.4vw, 76px)}
.hero h1 > span{display:block}
.hero .lead{color:var(--text); font-size:clamp(18px,1.8vw,21px); max-width:34ch}
.hero-ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
/* composición de fotos: arco = la puerta abierta */
.hero-media{position:relative; width:100%; max-width:540px; margin:0 auto; aspect-ratio:1/1.02; max-height:calc(100vh - 160px)}
.hero-media .foto{position:absolute}
.hero-media .arco{right:0; top:0; width:68%; height:92%; border-radius:999px 999px 22px 22px; box-shadow:0 30px 70px -30px rgba(255,107,78,.55)}
.flota{position:absolute; animation:flota 7s ease-in-out infinite alternate}
.flota .foto{position:relative; width:100%; height:100%}
.flota-a{left:2%; top:6%; width:34%; aspect-ratio:1; animation-delay:-2s}
.flota-a .foto{border-radius:22px; border:6px solid var(--bg)}
.flota-b{left:8%; bottom:0; width:44%; aspect-ratio:1; animation-duration:8s}
.flota-b .foto{border-radius:50%; border:6px solid var(--bg)}
@keyframes flota{from{transform:translateY(0)} to{transform:translateY(-12px)}}
@media (prefers-reduced-motion: reduce){.flota{animation:none}}
.chip-flota{position:absolute; right:6%; bottom:14%; padding:10px 18px; border-radius:var(--r-chip); background:var(--coral); color:var(--noche); font-family:var(--font-display); font-weight:800; font-size:clamp(14px,1.6vw,18px); box-shadow:0 12px 30px -12px rgba(22,15,27,.5)}
.hero-rayas{position:absolute; right:-2%; top:-4%; width:12%; overflow:visible}
.hero-rayas path{fill:none; stroke:var(--ambar); stroke-width:4; stroke-linecap:round}
.hero-curva{position:absolute; left:-6%; bottom:-6%; width:40%; overflow:visible; z-index:-1}
.hero-curva path{fill:none; stroke:var(--ruta); stroke-width:2.5; stroke-linecap:round; stroke-dasharray:2 9}
@media (max-width:899px){.hero-media{max-width:480px}}

section{padding:88px 0}
@media (min-width:900px){section{padding:120px 0}}
section.hero{padding:0}

/* fotos: aparecen de difuminado a nítido */
.foto{position:relative; overflow:hidden; border-radius:var(--r-card); background:var(--surface)}
.foto img{width:100%; height:100%; object-fit:cover; filter:blur(18px) saturate(.6); transform:scale(1.1); opacity:.35;
  transition:filter 1.2s cubic-bezier(.2,.7,.2,1) var(--d,0s), transform 1.6s cubic-bezier(.2,.7,.2,1) var(--d,0s), opacity .9s ease var(--d,0s)}
.foto.is-in img{filter:blur(0) saturate(1); transform:scale(1); opacity:1}
.foto::after{content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; box-shadow:inset 0 -60px 60px -40px rgba(22,15,27,.35); opacity:0; transition:opacity .4s ease}
@media (prefers-reduced-motion: reduce){.foto img{filter:none; transform:none; opacity:1; transition:none}}

/* galería */
.gal-head{display:grid; gap:24px; align-items:end}
@media (min-width:900px){.gal-head{grid-template-columns:1fr 1fr}}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{display:inline-flex; align-items:center; min-height:34px; padding:0 14px; border-radius:var(--r-chip); border:1.5px solid var(--line); font-size:14px; font-weight:500}
.chip.coral{background:var(--coral); border-color:var(--coral); color:var(--noche)}
.chip.lila{border-color:var(--lila)} .chip.ambar{border-color:var(--ambar)}
.galeria{display:grid; grid-auto-flow:column; grid-auto-columns:min(74vw, 320px); gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:24px; padding:44px 24px 16px; margin:0 auto; max-width:1180px; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right, #000 85%, transparent); mask-image:linear-gradient(to right, #000 85%, transparent)}
.galeria::-webkit-scrollbar{display:none}
@media (min-width:760px){.galeria{padding-left:40px; padding-right:40px; scroll-padding-inline:40px}}
@media (min-width:1100px){.galeria{grid-auto-flow:row; grid-template-columns:repeat(5, 1fr); grid-auto-columns:auto; overflow:visible; -webkit-mask-image:none; mask-image:none}}
.galeria figure{margin:0; scroll-snap-align:start; background:color-mix(in srgb, var(--text) 5%, transparent); border:1px solid var(--line); color:var(--text); padding:10px 10px 18px; border-radius:var(--r-card); transform:rotate(-0.6deg); transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease}
.galeria figure:nth-child(even){transform:rotate(0.6deg)}
@media (hover:hover){.galeria figure:hover{transform:rotate(0) translateY(-4px); border-color:rgba(255,107,78,.45); box-shadow:0 26px 60px -30px rgba(255,107,78,.45)}}
.galeria .foto{aspect-ratio:3/4; border-radius:var(--r-inner)}
.galeria figcaption{font-size:14px; line-height:1.45; color:var(--text-2); margin-top:12px; padding:0 4px}
.galeria figcaption b{display:block; font-family:var(--font-display); font-weight:800; letter-spacing:-0.02em; color:var(--text); font-size:18px}

/* historia */
.historia .wrap{display:grid; gap:48px}
@media (min-width:900px){.historia .wrap{grid-template-columns:1.05fr 1fr; gap:72px; align-items:start}}
.historia .cuerpo{margin-top:28px; max-width:60ch}
.historia .cuerpo p + p{margin-top:18px}
.simbolo{display:flex; gap:18px; align-items:center; margin-top:36px; padding:20px 22px; border-radius:var(--r-card); background:var(--tint-lila)}
.simbolo svg{width:60px; height:60px; flex:none}
.simbolo p{font-size:16px}
.manifiesto{position:relative; min-height:540px; display:flex; align-items:flex-end; padding:20px; margin:0}
.manifiesto .foto{position:absolute; inset:0}
.manifiesto .foto.is-in img{animation:respira 22s ease-in-out 1.4s infinite alternate}
@keyframes respira{from{transform:scale(1)} to{transform:scale(1.08) translate(-1.5%, -1%)}}
@media (prefers-reduced-motion: reduce){.manifiesto .foto.is-in img{animation:none}}
.manifiesto .caja{position:relative; background:rgba(42,26,51,.94); color:#F7F0E6; border-radius:var(--r-card); padding:28px 26px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.manifiesto .caja p{font-family:var(--font-display); font-weight:600; font-size:clamp(22px,2.4vw,28px); line-height:1.25}
.manifiesto .caja p.firma{font-family:var(--font-texto); font-weight:600; font-size:15px; color:#FF6B4E; margin-top:16px}

/* encuentro: tarjetas teñidas */
.ritual{list-style:none; margin:48px 0 0; padding:0; display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr))}
.ritual li{border-radius:var(--r-card); padding:24px 24px 26px; display:flex; flex-direction:column; gap:12px}
.ritual li{background:var(--surface)}
.ritual .n{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:17px; background:var(--coral); color:var(--noche)}
.ritual li:nth-child(3n+2) .n{background:var(--lila)}
.ritual li:nth-child(3n) .n{background:var(--ambar)}
.ritual p{color:var(--text-2); font-size:16px; line-height:1.55}
.ritual-cierre{margin-top:36px; font-family:var(--font-display); font-weight:600; font-size:clamp(22px,2.6vw,30px); line-height:1.25; max-width:30ch}

/* camino con ruta punteada */
.ruta{display:none; position:relative; height:70px; margin-top:44px}
.ruta svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.ruta path{fill:none; stroke:var(--ruta); stroke-width:2.5; stroke-linecap:round; stroke-dasharray:2 9; vector-effect:non-scaling-stroke}
.ruta .hito{position:absolute; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%; background:var(--bg); border:3px solid var(--coral)}
.ruta .hito.fin{background:var(--coral)}
@media (min-width:1050px){.ruta{display:block}}
.pasos{display:grid; gap:16px; margin-top:44px; list-style:none; padding:0}
@media (min-width:1050px){.pasos{margin-top:8px}}
@media (min-width:700px){.pasos{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1050px){.pasos{grid-template-columns:repeat(4,1fr)}}
.paso{background:var(--bg); border-radius:var(--r-card); padding:28px 24px; display:flex; flex-direction:column; gap:14px}
.paso.final{background:var(--coral); color:var(--noche)}
.paso.final .muted, .paso.final .canal{color:var(--noche)}
.gesto{display:flex; gap:6px}
.gesto i{width:11px; height:11px; border-radius:50%; background:var(--dot-off)}
.gesto i.on{background:var(--coral)}
.paso.final .gesto i{background:rgba(22,15,27,.25)}
.paso.final .gesto i.on{background:var(--noche)}
.canal{font-size:14px; font-weight:600; color:var(--lila-text)}
.paso h3{font-size:24px}
.paso p.muted{font-size:16px; line-height:1.55}
.paso-link{align-self:flex-start; display:inline-flex; align-items:center; min-height:40px; padding:0 16px; border-radius:var(--r-chip); background:var(--tint-lila); color:var(--text); font-weight:600; font-size:15px; text-decoration:none}
.paso-link:hover{background:var(--lila); color:var(--noche)}
.paso.final .paso-link{margin-top:auto; background:var(--noche); color:var(--hueso)}
.paso.final .paso-link:hover{background:#2A1A33; color:var(--hueso)}
.siente{margin-top:auto; padding-top:16px; font-size:14px; display:flex; justify-content:space-between; align-items:center}
.siente b{font-weight:600; padding:4px 12px; border-radius:var(--r-chip); background:var(--tint-lila)}
.paso.final .siente b{background:rgba(22,15,27,.12)}

/* pase maybe */
.pase .wrap{display:grid; gap:48px; align-items:center}
@media (min-width:900px){.pase .wrap{grid-template-columns:1fr 1fr; gap:80px}}
.tarjeta-pase{position:relative; background:var(--coral); color:var(--noche); border-radius:var(--r-panel); padding:34px 30px; overflow:hidden}
.tarjeta-pase .nombre{display:flex; align-items:center; gap:12px; font-family:var(--font-display); font-weight:800; font-size:clamp(34px,4.4vw,46px); letter-spacing:-0.03em; line-height:1}
.tarjeta-pase .nombre svg{width:42px; height:42px; flex:none}
.tarjeta-pase .intro{margin-top:12px; font-size:16px; max-width:36ch}
.incluye{list-style:none; padding:0; margin:26px 0; display:grid; gap:10px}
.incluye li{display:flex; gap:14px; align-items:center; padding:12px 14px; border-radius:12px; background:rgba(247,240,230,.32); font-size:16px; line-height:1.4}
.incluye li strong{font-weight:600}
.incluye li b svg{width:20px; height:20px}
.incluye li b{flex:none; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--noche); color:var(--hueso); font-family:var(--font-display); font-weight:800; font-size:16px}
.precio .oferta{display:inline-flex; align-items:center; gap:8px; background:var(--noche); color:var(--hueso); border-radius:var(--r-chip); padding:5px 12px; font-size:13px; font-weight:600; }
.tarjeta-pase .btn{width:100%; margin-top:22px; background:var(--noche); color:var(--hueso)}
.tarjeta-pase .btn:hover{background:#2A1A33}
.compite{margin-top:28px; padding:22px 24px; border-radius:var(--r-card); background:var(--tint-ambar); font-size:16px}
.compite b{font-weight:600}

.promo-paso{align-self:flex-start; display:inline-flex; align-items:baseline; gap:8px; padding:8px 14px; white-space:nowrap; border-radius:var(--r-chip); background:var(--noche); color:var(--hueso); text-decoration:none; font-size:14px; font-weight:600}
.promo-paso span{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ambar)}
.promo-paso s{opacity:.75}
.promo-paso b{font-family:var(--font-display); font-weight:800; font-size:18px; color:var(--coral)}
.promo-aviso{margin-top:24px; padding:16px 20px; border-radius:var(--r-card); background:var(--tint-ambar); font-size:17px; max-width:44ch}
.promo-aviso b{font-weight:600}
.precio{display:grid; gap:10px; padding-top:6px}
.precio .oferta{justify-self:start}
.precio-fila{display:flex; align-items:flex-end; flex-wrap:wrap; gap:6px 18px}
.precio-fila .antes{font-size:18px; font-weight:600; padding-bottom:8px}
.precio-fila .antes s{font-size:22px}
.precio-fila strong{display:flex; flex-direction:column; font-family:var(--font-display); font-weight:800; font-size:clamp(56px,7vw,76px); line-height:.95; letter-spacing:-0.03em}
.precio-fila strong small{font-family:var(--font-texto); font-size:14px; font-weight:600; letter-spacing:.02em; line-height:1.2}

/* fotos con frase */
.capa .caja{align-self:flex-start; max-width:100%}
.tile{position:relative; margin:0; overflow:hidden; border-radius:var(--r-card); isolation:isolate}
.tile .foto{position:absolute; inset:0; border-radius:0}
.capa{position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; justify-content:space-between; gap:10px; padding:clamp(14px,2vw,26px); color:#F7F0E6; transition:background-color .4s ease}
.capa.noche{background:linear-gradient(180deg, rgba(22,15,27,.42) 0%, rgba(22,15,27,.28) 38%, rgba(22,15,27,.9) 100%)}
.capa.noche::before{content:""; position:absolute; inset:auto 0 0 0; height:70%; z-index:-1; pointer-events:none; background:radial-gradient(80% 60% at 50% 120%, rgba(255,196,107,.38), rgba(255,107,78,.18) 45%, transparent 75%)}
.capa.ciruela{background:linear-gradient(180deg, rgba(42,26,51,.55) 0%, rgba(42,26,51,.92) 100%)}
.capa.recap{justify-content:flex-end; background:linear-gradient(180deg, rgba(22,15,27,.12), rgba(22,15,27,.3))}
.capa .lbl{font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:rgba(247,240,230,.85)}
.capa .frase{font-family:var(--font-display); font-weight:800; letter-spacing:-0.03em; line-height:.95; font-size:clamp(20px,2.2vw,30px); max-width:14ch;
  opacity:0; transform:translateY(14px); transition:opacity .7s ease calc(var(--d,0s) + .5s), transform .8s cubic-bezier(.2,.8,.2,1) calc(var(--d,0s) + .5s)}
.capa .frase em{display:block; font-style:normal; color:#FF6B4E; font-size:.5em; letter-spacing:-0.01em; margin-top:10px}
.foto.is-in ~ .capa .frase{opacity:1; transform:none}
.capa .caja{background:#F7F0E6; color:#160F1B; border-radius:12px; padding:14px 16px}
.capa .caja .lbl{color:#B23A24}
.capa .caja .frase{margin-top:6px; font-size:clamp(22px,2.4vw,32px)}
@media (prefers-reduced-motion: reduce){.capa .frase{opacity:1; transform:none; transition:none}}
@media (hover:hover){
  .tile:hover .foto.is-in img{transform:scale(1.06); filter:brightness(1.06) saturate(1.08); transition-delay:0s}
  .tile:hover .capa.noche, .tile:hover .capa.ciruela{background-color:rgba(22,15,27,0)}
  .tile{transition:box-shadow .4s ease} .tile:hover{box-shadow:0 24px 50px -24px rgba(255,107,78,.6)}
}

/* qué es maybe */
.que-es{position:relative}
.que-head .lead{max-width:44ch}
.que-grid{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:24px; padding:40px 24px 8px; margin:0 auto; max-width:1180px; scrollbar-width:none}
.que-grid .tile{flex:0 0 min(78vw,320px); height:440px}
.que-grid .tile:nth-child(2){flex-basis:min(92vw,480px)}
.que-grid::-webkit-scrollbar{display:none}
.que-grid .tile{scroll-snap-align:start}
@media (min-width:860px){.que-grid{display:grid; grid-template-columns:1fr 1.7fr 1fr; overflow:visible; padding:48px 40px 0} .que-grid .tile{height:clamp(400px,36vw,480px)}}
.que-grid .capa .frase{font-size:clamp(26px,2.8vw,38px); max-width:11ch}
.que-head h2{max-width:20ch}
.que-head .lead{color:var(--text)}
.que-grid .capa .lbl{align-self:flex-start; padding:7px 14px; border-radius:var(--r-chip); background:#FF6B4E; color:#160F1B; font-size:13px; font-weight:600; letter-spacing:.12em; box-shadow:0 6px 18px -8px rgba(22,15,27,.6)}
.que-grid .tile:nth-child(2) .capa .lbl{background:#C9A6FF}
.que-grid .tile:nth-child(3) .capa .lbl{background:#FFC46B}
/* tarjetas tipo marco: la foto arriba, el texto debajo */
.que-grid{padding-bottom:28px}
.que-grid .tile{height:auto; overflow:visible; isolation:auto; background:color-mix(in srgb, var(--text) 5%, transparent); border:1px solid var(--line); color:var(--text); padding:12px 12px 24px; border-radius:var(--r-card); transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease}
.que-grid .tile:nth-child(1){transform:rotate(-0.8deg)}
.que-grid .tile:nth-child(2){transform:rotate(0.6deg)}
.que-grid .tile:nth-child(3){transform:rotate(-0.5deg)}
.que-grid .tile .foto{position:relative; inset:auto; height:clamp(260px,26vw,340px); border-radius:var(--r-inner); overflow:hidden}
.que-grid .capa{position:static; inset:auto; background:none; padding:18px 8px 0; color:var(--text); justify-content:flex-start; gap:12px}
.que-grid .capa::before{display:none}
.que-grid .capa .lbl{box-shadow:none}
.que-grid .capa .frase{color:var(--text); font-size:clamp(24px,2.3vw,32px); max-width:none}
.que-grid .capa .linea{color:var(--text-2); max-width:none}
@media (hover:hover){.que-grid .tile:hover{transform:rotate(0) translateY(-4px); border-color:rgba(255,107,78,.45); box-shadow:0 26px 60px -30px rgba(255,107,78,.45)}}
.capa .linea{margin-top:10px; font-size:16px; line-height:1.4; color:rgba(247,240,230,.9); max-width:24ch;
  opacity:0; transform:translateY(10px); transition:opacity .7s ease calc(var(--d,0s) + .7s), transform .8s cubic-bezier(.2,.8,.2,1) calc(var(--d,0s) + .7s)}
.foto.is-in ~ .capa .linea{opacity:1; transform:none}
.que-grid .tile:nth-child(2) .foto img{object-position:42% 35%}
.que-grid .tile:nth-child(3) .foto img{object-position:0% center}
@media (prefers-reduced-motion: reduce){.capa .linea{opacity:1; transform:none; transition:none}}

/* por qué maybe */
.porque h2 > span{display:block}
.porque h2 .si{color:var(--accent-text)}
.razones{list-style:none; padding:0; margin:48px 0 0; display:grid; gap:16px; grid-template-columns:1fr}
@media (min-width:640px){.razones{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1050px){.razones{grid-template-columns:repeat(4,1fr)}}
.razon{position:relative; display:flex; flex-direction:column; gap:22px; padding:24px 24px 26px; border-radius:var(--r-card); background:var(--bg)}
@media (min-width:640px){.razon{min-height:230px; gap:28px}}
.razon .no{position:relative; align-self:flex-start; font-size:18px; color:var(--text-2)}
.razon .tacha{position:absolute; left:-6px; top:50%; width:calc(100% + 12px); height:14px; transform:translateY(-45%); overflow:visible}
.razon .tacha path{fill:none; stroke:#FF6B4E; stroke-width:3.5; stroke-linecap:round; vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .7s cubic-bezier(.6,.1,.2,1) calc(var(--d,0s) + .3s)}
.razon.is-in .tacha path{stroke-dashoffset:0}
.razon .si{margin-top:auto; font-family:var(--font-display); font-weight:800; font-size:clamp(24px,2.05vw,30px); line-height:1.02; letter-spacing:-0.03em; hyphens:auto; opacity:0; transform:translateY(12px); transition:opacity .6s ease calc(var(--d,0s) + .9s), transform .7s cubic-bezier(.2,.8,.2,1) calc(var(--d,0s) + .9s)}
.razon.is-in .si{opacity:1; transform:none}
.razon .si{margin-top:0}
.doodle{display:block; margin-top:auto; width:74px; height:74px; overflow:visible; transform:rotate(-6deg); transform-origin:center}
.razon:nth-child(even) .doodle{transform:rotate(5deg)}
.doodle path{fill:none; stroke:currentColor; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1s cubic-bezier(.6,.1,.2,1) calc(var(--d,0s) + .6s)}
.razon.is-in .doodle path{stroke-dashoffset:0}
.doodle.lila{color:var(--lila-text)} .doodle.coral{color:#FF6B4E} .doodle.ambar{color:var(--ambar)} .doodle.noche{color:#160F1B}
@media (hover:hover){.razon:hover .doodle{animation:garabato .7s ease}}
@keyframes garabato{0%,100%{rotate:0deg} 30%{rotate:-8deg} 65%{rotate:6deg}}
@media (prefers-reduced-motion: reduce){.doodle path{transition:none; stroke-dashoffset:0} .razon:hover .doodle{animation:none}}
.razon.fin{background:var(--coral); color:var(--noche)}
.razon.fin .no{color:rgba(22,15,27,.75)}
.razon.fin .tacha path{stroke:#160F1B}
@media (prefers-reduced-motion: reduce){.razon .tacha path{transition:none; stroke-dashoffset:0} .razon .si{opacity:1; transform:none; transition:none}}

/* ritmo de fondos: se alternan noche y ciruela */
.camino, .porque, .planes, .busca, .pago, .canal-sec{background:var(--surface)}

/* luces: focos que flotan en la portada */
.focos{position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden}
.focos i{position:absolute; left:var(--x); top:var(--y); width:var(--s); height:var(--s); border-radius:50%; background:radial-gradient(circle, var(--c) 0%, transparent 70%); opacity:.14; filter:blur(12px); animation:foco var(--t) ease-in-out infinite alternate}
.focos i:nth-child(even){animation-direction:alternate-reverse}
@keyframes foco{0%{transform:translate(0,0) scale(1); opacity:.1} 50%{opacity:.18} 100%{transform:translate(20px,-24px) scale(1.1); opacity:.12}}
@media (prefers-reduced-motion: reduce){.focos i{animation:none}}
/* carruseles: flechas y arrastre con el mouse */
[data-carrusel]{cursor:grab}
[data-carrusel].arrastrando{cursor:grabbing; scroll-snap-type:none; user-select:none}
[data-carrusel].arrastrando img{pointer-events:none}
.carrusel-ctrl{display:flex; justify-content:flex-start; gap:10px; margin-top:22px}
.carrusel-ctrl button{width:48px; height:48px; border-radius:50%; border:1.5px solid var(--ghost-border); background:var(--bg); color:var(--text); display:grid; place-items:center; cursor:pointer; transition:background-color .2s ease, color .2s ease, opacity .2s ease}
.carrusel-ctrl button svg{width:20px; height:20px}
.carrusel-ctrl button:hover:not(:disabled){background:var(--coral); border-color:var(--coral); color:var(--noche)}
.carrusel-ctrl button:disabled{opacity:.35; cursor:default}

/* fundadoras: nombres subrayados a mano, «para ti» encerrado y un corazón */
.fundadoras .somos{font-family:var(--font-display); font-weight:600; font-size:clamp(23px,2.5vw,32px); line-height:1.45; letter-spacing:-0.01em; color:var(--text)}
.fundadoras .nombre{position:relative; white-space:nowrap; font-weight:800}
.fundadoras .subraya{position:absolute; left:-2px; right:-2px; bottom:-4px; width:calc(100% + 4px); height:9px; overflow:visible}
.fundadoras .subraya path{fill:none; stroke-width:3.5; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .6s cubic-bezier(.6,.1,.2,1) calc(.2s + var(--n) * .35s)}
.fundadoras .nombre:nth-of-type(1) .subraya path{stroke:#FF6B4E}
.fundadoras .nombre:nth-of-type(2) .subraya path{stroke:var(--lila)}
.fundadoras .nombre:nth-of-type(3) .subraya path{stroke:var(--ambar)}
.fundadoras .nombre:nth-of-type(4) .subraya path{stroke:#FF6B4E}
.fundadoras .para-ti{position:relative; white-space:nowrap; color:var(--accent-text); font-weight:800}
.fundadoras .circulo{position:absolute; left:-14px; top:-10px; width:calc(100% + 28px); height:calc(100% + 20px); overflow:visible; pointer-events:none}
.fundadoras .circulo path{fill:none; stroke:var(--accent-text); stroke-width:2.5; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .9s cubic-bezier(.6,.1,.2,1) 1.7s}
.fundadoras .corazon{display:inline-block; width:1.15em; height:1.15em; margin-left:.25em; vertical-align:-.15em; overflow:visible; color:#FF6B4E}
.fundadoras .corazon path{fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .8s ease 2.5s}
.fundadoras.is-in .subraya path, .fundadoras.is-in .circulo path, .fundadoras.is-in .corazon path, .fundadoras.is-in .flecha-mano path{stroke-dashoffset:0}
.fundadoras.is-in .corazon{animation:latido 1.4s ease-in-out 3.4s 3}
@keyframes latido{0%,100%{transform:scale(1)} 30%{transform:scale(1.18)} 55%{transform:scale(.96)}}
.fundadoras .somos + p{margin-top:22px}
.fundadoras .firma-fund{display:flex; align-items:center; gap:10px; margin-top:22px; font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--lila-text)}
.fundadoras .flecha-mano{width:54px; height:27px; overflow:visible; color:var(--lila-text); transform:rotate(8deg)}
.fundadoras .flecha-mano path{fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .8s ease 3s}
@media (prefers-reduced-motion: reduce){.fundadoras .subraya path, .fundadoras .circulo path, .fundadoras .corazon path, .fundadoras .flecha-mano path{transition:none; stroke-dashoffset:0} .fundadoras.is-in .corazon{animation:none}}

/* portada animada: se encienden las luces, llegas sola y te vas acompañada */
.hero h1{animation:aparece .9s cubic-bezier(.2,.8,.2,1) .2s both}
.hero h1.tecleo{min-height:calc(3 * .95em)}
.hero h1.tecleo > span{display:inline}
.caret{display:inline-block; width:.07em; height:.82em; margin-left:.06em; vertical-align:-.04em; border-radius:2px; background:#FF6B4E; animation:parpadea 1.05s steps(1) infinite}
@keyframes parpadea{50%{opacity:0}}
@keyframes aparece{from{opacity:0; transform:translateY(22px); filter:blur(8px)} to{opacity:1; transform:none; filter:blur(0)}}
.hero-puntos{display:flex; gap:9px; margin-top:22px; height:14px}
.hero-puntos i{width:13px; height:13px; border-radius:50%; background:#FF6B4E; animation:llega-p .6s cubic-bezier(.2,1.4,.4,1) .7s both, mece 2.6s ease-in-out 2.4s infinite alternate}
.hero-puntos i:nth-child(2){background:rgba(255,107,78,.7); animation:junta .7s cubic-bezier(.2,1.2,.4,1) 1.45s both, mece 2.6s ease-in-out 2.7s infinite alternate}
.hero-puntos i:nth-child(3){background:rgba(255,107,78,.45); animation:junta .7s cubic-bezier(.2,1.2,.4,1) 1.6s both, mece 2.6s ease-in-out 3s infinite alternate}
@keyframes llega-p{from{opacity:0; transform:scale(0)} to{opacity:1; transform:scale(1)}}
@keyframes junta{from{opacity:0; transform:translateX(60px)} to{opacity:1; transform:none}}
@keyframes mece{from{transform:translateY(0)} to{transform:translateY(-4px)}}
.hero-puntos + .lead{margin-top:18px}
.hero .lead{animation:aparece .8s cubic-bezier(.2,.8,.2,1) 1.5s both}
.hero-ctas{animation:aparece .8s cubic-bezier(.2,.8,.2,1) 1.7s both}
.hero-media .arco{animation:abre 1.3s cubic-bezier(.65,0,.25,1) .35s both}
@keyframes abre{from{clip-path:inset(100% 0 0 0 round 999px 999px 22px 22px)} to{clip-path:inset(0 0 0 0 round 999px 999px 22px 22px)}}
.flota-a .foto{animation:pop .8s cubic-bezier(.2,1.4,.4,1) 1.1s both}
.flota-b .foto{animation:pop .8s cubic-bezier(.2,1.4,.4,1) 1.35s both}
@keyframes pop{from{opacity:0; transform:scale(.55) rotate(-6deg)} to{opacity:1; transform:none}}
.chip-flota{animation:pop .7s cubic-bezier(.2,1.6,.4,1) 2.1s both, flota 5s ease-in-out 3s infinite alternate}
.hero-rayas{animation:pop .5s cubic-bezier(.2,1.6,.4,1) 2.3s both}
.hero-curva{animation:desliza 1.2s ease 1.8s both}
@keyframes desliza{from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion: reduce){
      }

/* buscador: alguien busca un plan y aparece Maybe */
.buscador{max-width:860px}
.busca-grid{display:grid; gap:32px; grid-template-columns:minmax(0,1fr); grid-template-areas:"head" "globo" "busc"}
.busca-grid > *{min-width:0}
.busca-head{grid-area:head} .globo-wrap{grid-area:globo} .buscador{grid-area:busc}
@media (min-width:980px){.busca-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); grid-template-areas:"head globo" "busc globo"; column-gap:56px; row-gap:28px; align-items:start} .globo-wrap{align-self:center}}
.globo-wrap{position:relative; margin:0; width:100%; max-width:520px; justify-self:center; aspect-ratio:1}
.globo{width:100%; height:100%; display:block; cursor:grab; touch-action:pan-y}
.globo.arrastrando{cursor:grabbing}
.globo-tip{position:absolute; left:50%; bottom:2%; transform:translateX(-50%); font-size:13px; font-weight:500; color:var(--text-2); white-space:nowrap; pointer-events:none}
.globo-card{position:absolute; left:50%; top:50%; translate:-50% calc(-100% - 18px); transform-origin:50% 100%; z-index:2; display:flex; align-items:center; gap:10px; max-width:calc(100% - 24px); padding:9px 14px 10px 12px; border-radius:16px; background:color-mix(in srgb, var(--surface) 82%, transparent); border:1px solid var(--line); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:opacity .25s ease, scale .25s ease}
.globo-card::after{content:""; position:absolute; left:50%; bottom:-5px; width:9px; height:9px; translate:-50% 0; rotate:45deg; background:inherit; border-right:1px solid var(--line); border-bottom:1px solid var(--line); border-radius:0 0 2px 0}
.globo-card.oculta{opacity:0; scale:.85; pointer-events:none}
.globo-card.salta{animation:salta .55s cubic-bezier(.2,1.5,.4,1)}
@keyframes salta{from{opacity:0; scale:.5} to{opacity:1; scale:1}}
@media (prefers-reduced-motion: reduce){.globo-card.salta{animation:none}}
.gc-punto{flex:none; width:10px; height:10px; border-radius:50%; background:#FF6B4E}
.gc-punto.pronto{background:transparent; border:2px solid #FF6B4E}
.globo-card > div{min-width:0; display:grid; gap:1px}
.globo-card b{font-family:var(--font-display); font-weight:700; font-size:15px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.gc-linea{display:flex; align-items:baseline; gap:8px; font-size:12.5px; white-space:nowrap}
.gc-estado{color:var(--text-2)}
.gc-link{color:var(--accent-text); font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.gc-link:hover{text-decoration-thickness:2px}
.barra{display:flex; align-items:center; gap:10px; min-height:50px; padding:0 5px 0 16px; border-radius:var(--r-chip); background:var(--bg); border:1px solid var(--line)}
.barra .lupa{width:17px; height:17px; flex:none; color:var(--text-2)}
.barra .lupa circle, .barra .lupa path{stroke-width:1.7}
.consulta{font-size:16px; font-weight:400; white-space:nowrap; overflow:hidden; min-width:0}
.barra .caret{flex:none; height:1.15em; width:1.5px; margin-left:-7px}
.btn-buscar{margin-left:auto; flex:none; display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 15px; border-radius:var(--r-chip); background:#FF6B4E; color:#160F1B; font-weight:600; font-size:13.5px}
.btn-buscar .lupa{width:15px; height:15px; color:#160F1B}
@media (max-width:560px){.btn-buscar span{display:none} .btn-buscar{padding:0 12px}}
.estado{margin:16px 4px 10px; font-size:12.5px; color:var(--text-2); opacity:0; transition:opacity .4s ease}
.resultados{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.res{padding:12px 16px 13px; border-radius:14px; border:1px solid var(--line); background:color-mix(in srgb, var(--text) 3%, transparent); opacity:0; transform:translateY(10px); transition:opacity .5s ease calc(var(--k) * .14s), transform .6s cubic-bezier(.2,.8,.2,1) calc(var(--k) * .14s)}
.buscador.listo .estado{opacity:1}
.buscador.listo .res{opacity:1; transform:none}
.res-lugar{display:flex; align-items:center; gap:7px; font-size:12px; line-height:1.2}
.res-punto{flex:none; width:7px; height:7px; border-radius:50%; background:#FF6B4E}
.res-punto.pronto{background:transparent; border:1.5px solid #FF6B4E}
.res-lugar b{font-weight:600; color:var(--text)}
.res-estado{display:inline-flex; align-items:center; gap:7px; color:var(--text-2)}
.res-estado::before{content:""; width:1px; height:10px; background:var(--line)}
.res-estado.ya{color:var(--accent-text)}
.res h3{margin:6px 0 2px; font-family:var(--font-texto); font-size:15px; font-weight:600; line-height:1.35; letter-spacing:0}
.res p{font-size:13.5px; line-height:1.45; color:var(--text-2)}
@media (prefers-reduced-motion: reduce){.res, .estado{transition:none}}
@media (prefers-reduced-motion: reduce){.res, .estado{transition:none}}

/* pago */
.pago .wrap{display:grid; gap:48px}
@media (min-width:900px){.pago .wrap{grid-template-columns:1fr 1fr; gap:72px; align-items:start}}
.pasos-pago{list-style:none; padding:0; margin:36px 0 0; counter-reset:p}
.pasos-pago li{position:relative; counter-increment:p; display:grid; grid-template-columns:50px 1fr; gap:14px; padding:0 0 28px}
.pasos-pago li::before{content:counter(p); position:relative; z-index:1; width:40px; height:40px; border-radius:50%; background:var(--coral); color:var(--noche); display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:17px}
.pasos-pago li:not(:last-child)::after{content:""; position:absolute; left:19px; top:44px; bottom:4px; border-left:2.5px dashed var(--ruta); opacity:.7}
.pasos-pago b{display:block; font-weight:600; padding-top:7px}
.pasos-pago span{color:var(--text-2); font-size:16px}
.cuenta{background:var(--bg); border-radius:var(--r-panel); padding:26px 22px; display:grid; gap:14px}
.metodo{border-radius:var(--r-card); padding:18px}
.metodo.yape{background:var(--tint-lila)}
.metodo.banco{background:var(--tint-ambar)}
.metodo-head{display:flex; align-items:center; gap:12px; margin-bottom:6px}
.metodo-head img{width:44px; height:44px; border-radius:10px}
.metodo-head .ico{width:44px; height:44px; border-radius:10px; display:grid; place-items:center; background:var(--noche); color:var(--hueso)}
.metodo-head .ico svg{width:22px; height:22px}
.metodo-head b{font-family:var(--font-display); font-weight:600; font-size:19px; display:block; line-height:1.2}
.metodo-head small{font-size:14px; color:var(--text-2)}
.dato{display:grid; grid-template-columns:1fr auto; gap:2px 12px; align-items:center; padding:10px 0}
.dato + .dato{border-top:1px dashed var(--line)}
.dato .k{font-size:13px; font-weight:500; color:var(--text-2)}
.dato .v{grid-column:1; font-weight:600; font-size:18px; font-variant-numeric:tabular-nums; word-break:break-all}
.copiar{grid-column:2; grid-row:1 / span 2; min-height:44px; padding:0 16px; border-radius:var(--r-chip); border:1.5px solid var(--ghost-border); background:var(--bg); color:var(--text); font:600 14px var(--font-texto); cursor:pointer}
.copiar:hover{border-color:var(--text)}
.cuenta .btn{width:100%}
.aviso{font-size:14px; color:var(--text-2)}

/* canal de whatsapp */
.canal-card{position:relative; overflow:hidden; display:grid; gap:40px; align-items:center; background:var(--lila); color:var(--noche); border-radius:var(--r-panel); padding:40px 24px}
@media (min-width:900px){.canal-card{grid-template-columns:1.1fr .9fr; gap:56px; padding:64px 60px}}
.canal-card .etiqueta{color:var(--noche)}
.canal-card .lead{color:var(--noche)}
.canal-pros{list-style:none; padding:0; margin:24px 0 28px; display:flex; flex-wrap:wrap; gap:8px}
.canal-pros li{display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:0 14px; border-radius:var(--r-chip); background:rgba(247,240,230,.55); font-weight:600; font-size:15px}
.canal-pros li::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--coral)}
.btn-noche{background:var(--noche); color:var(--hueso)}
.btn-noche:hover{background:#2A1A33; transform:translateY(-1px)}
.canal-acciones{display:flex; flex-wrap:wrap; align-items:center; gap:16px 14px}
.qr-box{display:none; align-items:center; gap:12px; padding:6px 16px 6px 6px; border-radius:16px; background:rgba(247,240,230,.55)}
.qr-box .qr{width:64px; height:64px; padding:6px; background:#F7F0E6; border-radius:10px; flex:none}
.qr-box p{font-size:14px; font-weight:600; max-width:14ch; line-height:1.3}
@media (min-width:900px) and (hover:hover){.qr-box{display:flex}}
.chat{background:var(--noche); color:var(--hueso); border-radius:24px; padding:18px 16px 22px; display:grid; gap:12px; max-width:400px; width:100%; justify-self:center; box-shadow:0 30px 60px -30px rgba(22,15,27,.6); transform:rotate(1.5deg)}
.chat-head{display:flex; align-items:center; gap:12px; padding:2px 4px 12px; border-bottom:1px solid rgba(247,240,230,.12)}
.chat-head svg{width:40px; height:40px; padding:7px; border-radius:50%; background:#2A1A33}
.chat-head b{display:block; font-family:var(--font-display); font-weight:800; font-size:18px; line-height:1.1}
.chat-head small{font-size:13px; color:#A99BB3}
.burbuja{justify-self:start; max-width:88%; background:#2A1A33; border-radius:4px 16px 16px 16px; padding:10px 14px; font-size:15px; line-height:1.45;
  opacity:0; transform:translateY(14px) scale(.96); transform-origin:left top; transition:opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); transition-delay:calc(var(--b) * .45s + .2s)}
.chat.is-in .burbuja{opacity:1; transform:none}
.burbuja b{font-weight:600; color:#FF6B4E}
.burbuja .punto{color:#FF6B4E}
.burbuja.con-foto{padding:6px 6px 10px; display:grid; gap:8px}
.burbuja.con-foto .foto{aspect-ratio:4/3; border-radius:12px}
.burbuja.con-foto{font-size:15px}
.burbuja.con-foto > :not(.foto){padding:0 8px}
@media (prefers-reduced-motion: reduce){.burbuja{opacity:1; transform:none; transition:none}}

/* preguntas */
.faq-wrap{display:grid; gap:40px}
.faq{max-width:860px}
.faq{display:grid; gap:10px}
.faq details{border-radius:var(--r-card); background:var(--surface); transition:background-color .2s ease}
.faq details[open]{background:var(--tint-lila)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:20px; align-items:center; padding:20px 22px; font-family:var(--font-display); font-weight:600; font-size:clamp(18px,2vw,21px); line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary .mas{flex:none; width:32px; height:32px; border-radius:50%; background:var(--coral); position:relative; transition:transform .25s ease}
.faq summary .mas::before,.faq summary .mas::after{content:""; position:absolute; left:50%; top:50%; width:12px; height:2px; border-radius:2px; background:var(--noche); transform:translate(-50%,-50%)}
.faq summary .mas::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] .mas{transform:rotate(45deg)}
.faq .resp{padding:0 22px 22px; color:var(--text-2); max-width:64ch}

/* cierre */
.cierre{position:relative; overflow:hidden; isolation:isolate; text-align:center; padding:120px 0 128px}
.cierre::before{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(90% 80% at 50% 115%, var(--glow-1) 0%, var(--glow-2) 35%, var(--glow-3) 65%, transparent 82%)}
.cierre h2{font-size:clamp(52px, 9vw, 110px)}
.cierre .titulo-trazo{margin:18px auto 0}
.cierre p{max-width:46ch; margin:22px auto 0}
.cierre .btn{margin-top:34px}

/* pie */
footer{border-top:1px solid var(--line); padding:48px 0 calc(40px + 70px)}
footer .wrap{display:grid; gap:32px}
@media (min-width:800px){footer .wrap{grid-template-columns:1fr auto; align-items:start}}
.redes{display:flex; flex-wrap:wrap; gap:10px}
.redes a{width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:var(--surface); color:var(--text); transition:background-color .2s ease, color .2s ease, transform .2s ease}
.redes a svg{width:22px; height:22px}
.redes a:hover{background:var(--coral); color:var(--noche); transform:translateY(-2px)}
.legal-links{display:flex; flex-wrap:wrap; gap:6px 20px; margin-top:16px; font-size:14px}
.legal-links a{color:var(--text-2)}
.legal-links a:hover{color:var(--text)}
.legal{font-size:14px; color:var(--text-2); margin-top:14px}

/* páginas legales */
.legal-page{padding:56px 0 96px}
.legal-page .wrap{max-width:820px}
.volver{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px 0 12px; border-radius:var(--r-chip); background:var(--surface); text-decoration:none; font-weight:600; font-size:15px; margin-bottom:36px}
.volver svg{width:18px; height:18px}
.legal-page h1{font-size:clamp(40px,7vw,68px)}
.legal-page .vigencia{margin-top:18px; color:var(--text-2); font-size:15px}
.legal-page h2{font-family:var(--font-display); font-weight:800; font-size:24px; letter-spacing:-0.02em; margin:44px 0 12px}
.legal-page p, .legal-page li{color:var(--text); max-width:68ch}
.legal-page p + p{margin-top:12px}
.legal-page ul{padding-left:22px; margin:12px 0 0}
.legal-page li + li{margin-top:8px}
.ficha{margin-top:28px; padding:20px 22px; border-radius:var(--r-card); background:var(--tint-ambar); font-size:16px}
.ficha p + p{margin-top:4px}
.otras-legales{margin-top:56px; display:flex; flex-wrap:wrap; gap:10px}
.otras-legales a{display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:var(--r-chip); background:var(--surface); text-decoration:none; font-weight:600; font-size:15px}

/* libro de reclamaciones */
.form-libro{margin-top:32px; display:grid; gap:28px}
.form-libro fieldset{border:0; margin:0; padding:24px 22px; border-radius:var(--r-card); background:var(--surface); display:grid; gap:16px}
.form-libro legend{float:left; width:100%; padding:0; margin-bottom:4px; font-family:var(--font-display); font-weight:800; font-size:20px}
.form-libro legend + *{clear:both}
.campos{display:grid; gap:16px}
@media (min-width:640px){.campos.dos{grid-template-columns:1fr 1fr}}
.campo{display:grid; gap:6px}
.campo label, .opciones-titulo{font-size:14px; font-weight:600}
.campo input, .campo textarea, .campo select{width:100%; min-height:48px; padding:12px 14px; border-radius:10px; border:1.5px solid var(--ghost-border); background:var(--bg); color:var(--text); font:400 16px var(--font-texto)}
.campo textarea{min-height:120px; resize:vertical}
.campo input:focus, .campo textarea:focus{outline:none; border-color:var(--coral); box-shadow:0 0 0 3px rgba(255,107,78,.25)}
.campo .ayuda{font-size:13px; color:var(--text-2)}
.opciones{display:flex; flex-wrap:wrap; gap:10px}
.opcion{position:relative}
.opcion input{position:absolute; opacity:0; inset:0}
.opcion label{display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:var(--r-chip); border:1.5px solid var(--ghost-border); cursor:pointer; font-weight:500}
.opcion input:checked + label{background:var(--coral); border-color:var(--coral); color:var(--noche)}
.opcion input:focus-visible + label{outline:3px solid var(--coral); outline-offset:3px}
.def{font-size:14px; color:var(--text-2)}
.hoja{display:flex; flex-wrap:wrap; gap:6px 24px; font-size:15px; padding:16px 18px; border-radius:var(--r-card); background:var(--tint-lila)}
.error{color:var(--accent-text); font-weight:600; font-size:15px}

/* WhatsApp flotante y aviso */
.wa-flotante{position:fixed; right:16px; bottom:16px; padding-bottom:env(safe-area-inset-bottom,0px); z-index:60}
.wa-flotante a{display:inline-flex; align-items:center; gap:10px; min-height:54px; padding:0 20px 0 16px; border-radius:var(--r-chip); background:var(--btn-bg); color:var(--btn-text); font-weight:600; text-decoration:none; box-shadow:0 10px 30px -10px rgba(22,15,27,.55)}
.wa-flotante svg{width:22px; height:22px}
@media (max-width:520px){.wa-flotante a span{display:none} .wa-flotante a{padding:0; width:56px; justify-content:center}}
.toast{position:fixed; left:50%; bottom:calc(88px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%) translateY(12px); background:var(--text); color:var(--bg); padding:12px 18px; border-radius:var(--r-chip); font-size:15px; font-weight:500; opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; z-index:70}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}