/* TuCarta: ON — página de venta. Valores tomados del diseño de Claude Design (Carta Online Landing). */
:root {
  --cream: #F6F0E6;
  --sand: #EDE3D2;
  --ink: #221B16;
  --muted: #5B4F45;
  --red: #B23A1C;
  --red-dark: #8E2C13;
  --salmon: #F0A58A;
  --green: #2E6B3E;
  --mint: #E1ECD9;
  --mint-ink: #1E3A24;
  --pink: #F3D9CE;
  --pink-ink: #A3361A;
  --soft: #E4D8C8;
  --soft2: #CDBFAE;
  --brown: #3A322C;
  --serif: 'Fraunces', Georgia, serif;
  --logo: 'Young Serif', Georgia, serif;
  --sans: 'Figtree', system-ui, sans-serif;
  --mono: 'DM Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.2, .75, .2, 1);
  --gutter: clamp(20px, 5vw, 64px);
}

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a { color: var(--red); text-underline-offset: 3px; }
a:hover { color: var(--red-dark); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 6px; }
button { font-family: var(--sans); }

/* ---------- Animaciones ---------- */
@keyframes wordIn { from { opacity: 0; transform: translateY(.35em); } to { opacity: 1; transform: none; } }
@keyframes logoIn { from { opacity: 0; transform: translateY(.5em) rotate(-4deg); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes dotDrop { 0% { opacity: 0; transform: translateY(-28px) scale(.4); } 55% { opacity: 1; transform: translateY(0) scale(1.25, .75); } 75% { transform: translateY(-6px) scale(.95, 1.05); } 100% { opacity: 1; transform: none; } }
@keyframes swBgL { 0%, 22% { background: #5B4F45; box-shadow: 0 0 0 0 rgba(224,97,63,0); } 32%, 88% { background: #B23A1C; box-shadow: 0 0 .45em .04em rgba(224,97,63,.5); } 98%, 100% { background: #5B4F45; box-shadow: 0 0 0 0 rgba(224,97,63,0); } }
@keyframes swKnobL { 0%, 22% { left: .11em; } 32%, 88% { left: calc(100% - .97em); } 98%, 100% { left: .11em; } }
@keyframes swOnL { 0%, 22% { opacity: 0; transform: translateX(.3em); } 32%, 88% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateX(.3em); } }
@keyframes swOffL { 0%, 22% { opacity: 1; transform: none; } 32%, 88% { opacity: 0; transform: translateX(-.3em); } 98%, 100% { opacity: 1; transform: none; } }
@keyframes swBgO { 0%, 30% { background: #5B4F45; box-shadow: 0 0 0 0 rgba(224,97,63,0); } 70%, 100% { background: #B23A1C; box-shadow: 0 0 .45em .04em rgba(224,97,63,.5); } }
@keyframes swKnobO { 0%, 30% { left: .11em; } 70%, 100% { left: calc(100% - .97em); } }
@keyframes swOnO { 0%, 30% { opacity: 0; transform: translateX(.3em); } 70%, 100% { opacity: 1; transform: none; } }
@keyframes swOffO { 0%, 30% { opacity: 1; transform: none; } 70%, 100% { opacity: 0; transform: translateX(-.3em); } }
@keyframes typing { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Interruptor ON/OFF (logo) ---------- */
.sw { --d: .6s; cursor: pointer; touch-action: manipulation; position: relative; display: inline-block; flex: none; width: 2.75em; height: 1.08em; border-radius: 999px; font-size: 1em; vertical-align: middle; background: #B23A1C; animation: swBgO 1.4s cubic-bezier(.5,0,.2,1) var(--d) 1 both; }
.sw > span { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; line-height: 1; letter-spacing: .08em; padding-top: .08em; }
.sw-on { left: .08em; right: .97em; font-size: .56em; color: var(--cream); animation: swOnO 1.4s cubic-bezier(.5,0,.2,1) var(--d) 1 both; }
.sw-off { left: .97em; right: 0; font-size: .46em; color: var(--soft); opacity: 0; animation: swOffO 1.4s cubic-bezier(.5,0,.2,1) var(--d) 1 both; }
.sw > .sw-knob { top: .11em; bottom: auto; left: calc(100% - .97em); width: .86em; height: .86em; padding: 0; border-radius: 50%; background: var(--cream); box-shadow: 0 .04em .12em rgba(0,0,0,.3); animation: swKnobO 1.4s cubic-bezier(.5,0,.2,1) var(--d) 1 both; }
.sw-loop { animation: swBgL 5s cubic-bezier(.5,0,.2,1) 0s infinite both; }
.sw-loop .sw-on { animation: swOnL 5s cubic-bezier(.5,0,.2,1) 0s infinite both; }
.sw-loop .sw-off { animation: swOffL 5s cubic-bezier(.5,0,.2,1) 0s infinite both; }
.sw-loop > .sw-knob { animation: swKnobL 5s cubic-bezier(.5,0,.2,1) 0s infinite both; }
.marca { font-family: var(--serif); letter-spacing: -.01em; display: inline-flex; align-items: center; }
.marca-a { display: inline-block; animation: logoIn .6s var(--ease) .05s both; }
.marca-b { display: inline-block; animation: logoIn .6s var(--ease) .18s both; }
.marca-dot { display: inline-block; animation: dotDrop .7s cubic-bezier(.3,.7,.3,1) .45s both; }
.marca .sw { margin-left: .25em; }

/* ---------- Piezas comunes ---------- */
.wrap { max-width: 1120px; margin: 0 auto; }
.sec { padding: clamp(56px, 7vw, 88px) var(--gutter); scroll-margin-top: 60px; }
.dark { background: var(--ink); color: var(--cream); }
.sand { background: var(--sand); }
.eyebrow { display: flex; align-items: center; gap: 8px; font: 700 15px/1.2 var(--sans); color: var(--red); margin-bottom: 14px; }
.eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 4vw, 46px); line-height: 1.02; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.h3 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: clamp(22px, 2.4vw, 26px); line-height: 1.15; }
.lead { font-size: clamp(17px, 1.6vw, 19px); line-height: 1.5; color: var(--muted); margin: 0; text-wrap: pretty; }
.subrayado { position: relative; white-space: nowrap; }
.subrayado > i { position: absolute; left: 0; right: 0; bottom: .02em; height: .09em; background: var(--red); border-radius: 4px; }
.pill { font: 700 13px var(--sans); padding: 5px 10px; border-radius: 999px; }
.pill-bad { background: var(--pink); color: var(--pink-ink); }
.pill-good { background: var(--green); color: #fff; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 0; background: var(--red); color: var(--cream); text-decoration: none; font: 600 16px var(--sans); cursor: pointer; transition: background .2s, color .2s; }
.btn:hover { background: var(--red-dark); color: var(--cream); }
.btn-line { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); padding: 0 22px; }
.btn-line:hover { background: var(--ink); color: var(--cream); }
.foto { background: #8a7a68 center / cover no-repeat; }

/* ---------- Encabezado ---------- */
.top { position: sticky; top: 0; z-index: 50; padding: 10px clamp(10px, 2vw, 24px) 0; }
.top-in { max-width: 1120px; margin: 0 auto; padding: 6px 8px 6px 18px; display: flex; align-items: center; gap: 24px; background: rgba(251,247,240,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(34,27,22,.1); border-radius: 20px; box-shadow: 0 8px 24px -14px rgba(34,27,22,.3); }
.top-logo { display: flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--ink); font-size: 22px; }
.top-logo:hover { color: var(--ink); }
.top-nav { display: flex; gap: 4px; margin-left: auto; }
.top-nav a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 15px; padding: 12px 14px; border-radius: 8px; }
.top-nav a:hover { background: rgba(34,27,22,.06); color: var(--ink); }
.top-cta { min-height: 44px; padding: 0 18px; font-size: 15px; white-space: nowrap; }
@media (max-width: 819px) { .top-nav { display: none; } .top-cta { margin-left: auto; } }

/* ---------- Portada ---------- */
.hero { padding: clamp(32px, 5vw, 72px) var(--gutter) clamp(48px, 6vw, 80px); }
.hero-in { max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: clamp(40px, 6vw, 88px); align-items: center; }
.hero-txt { flex: 1 1 420px; min-width: 0; }
.hero-chip { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 20px; padding: 6px 8px 6px 16px; border-radius: 999px; background: var(--sand); font: 600 15px var(--sans); }
.hero-chip > span { font: 600 20px var(--serif); display: inline-flex; }
.hero h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(40px, 6vw, 72px); line-height: .98; letter-spacing: -.025em; margin: 0 0 24px; text-wrap: balance; }
.hero-word { display: block; min-height: 1em; }
.hero-word > span { display: inline-block; color: var(--red); animation: wordIn .5s var(--ease); }
.hero h1 .subrayado > i { right: .35em; }
.hero .lead { margin: 0 0 32px; max-width: 34em; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.tranqui { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 15px; font-weight: 500; }
.tranqui li { display: flex; align-items: center; gap: 8px; }
.tranqui li::before { content: '✓'; color: var(--green); font-weight: 700; }

.hero-demo { flex: 1 1 320px; display: flex; flex-direction: column; align-items: center; gap: 18px; scroll-margin-top: 80px; }
/* El celular se dibuja a 390×844 y se escala con --k (app.js lo ajusta al ancho de la pantalla) */
.cel { --sw: 350px; --k: .8974; --pad: calc(11px * var(--k)); position: relative; width: calc(var(--sw) + var(--pad) * 2); height: calc(844px * var(--k) + var(--pad) * 2); border-radius: calc(47px * var(--k) + var(--pad)); background: linear-gradient(145deg, #3a322c, #14100d 55%, #2a231e); padding: var(--pad); box-shadow: 0 50px 90px -40px rgba(34,27,22,.55), 0 0 0 1.5px #0d0a08, inset 0 0 0 1.5px rgba(255,255,255,.08); }
.cel-btn { position: absolute; width: 3px; background: #2a231e; }
.cel-btn.l { left: -3px; border-radius: 2px 0 0 2px; }
.cel-btn.r { right: -3px; border-radius: 0 2px 2px 0; }
.cel-pantalla { --th-bg: #F3EADB; --th-ink: #3A2A1E; --th-card: #fff; --th-dot: #2E6B3E; position: relative; width: var(--sw); height: calc(844px * var(--k)); border-radius: calc(47px * var(--k)); overflow: hidden; background: var(--th-bg); transition: background .35s; }
.cel-pantalla.noche { --th-bg: #1E1A17; --th-ink: #F1E6D4; --th-card: #2E2824; --th-dot: #C98B4B; }
.cel-pantalla.cerrado { --th-dot: #9A8E82; }
.cel-lienzo { position: absolute; left: 0; top: 0; width: 390px; height: 844px; transform: scale(var(--k)); transform-origin: 0 0; display: flex; flex-direction: column; color: var(--th-ink); }
.cel-estado { flex: none; height: 54px; position: relative; display: flex; align-items: center; justify-content: space-between; padding: 6px 34px 0 44px; font: 600 17px -apple-system, 'SF Pro Text', var(--sans); }
.cel-isla { position: absolute; left: 50%; top: 11px; width: 122px; height: 35px; margin-left: -61px; border-radius: 20px; background: #000; }
.cel-senal { display: flex; align-items: center; gap: 7px; }
.cel-senal b { font-size: 14px; font-weight: 700; }
.cel-barras { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.cel-barras i { width: 3px; border-radius: 1px; background: currentColor; }
.cel-bat { position: relative; width: 26px; height: 13px; border-radius: 4px; border: 1.5px solid currentColor; opacity: .9; padding: 1.5px; }
.cel-bat i { display: block; width: 72%; height: 100%; border-radius: 1.5px; background: currentColor; }
.cel-cuerpo { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.cel-cuerpo iframe { width: 408px; height: 100%; border: 0; display: block; background: #F3EADB; }
.cel-home { position: absolute; left: 50%; bottom: calc(8px * var(--k)); width: calc(134px * var(--k)); height: max(3px, calc(5px * var(--k))); transform: translateX(-50%); border-radius: 4px; background: var(--th-ink); opacity: .55; pointer-events: none; }
.mock { height: 100%; display: flex; flex-direction: column; }
.mock-top { display: flex; justify-content: space-between; align-items: center; padding: 10px 22px 14px; }
.mock-top b { font: 600 27px var(--serif); }
.mock-top span { font: 500 13px var(--mono); letter-spacing: .08em; opacity: .7; }
.mock-cover { margin: 0 16px; height: 190px; border-radius: 24px; flex: none; }
.mock-kicker { padding: 20px 22px 10px; }
.mock-kicker small { display: block; font: 500 13px var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .7; margin-bottom: 8px; }
.mock-kicker strong { display: block; font: 600 26px/1.15 var(--serif); }
.mock-estado { padding: 4px 22px 14px; display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.mock-estado i { width: 10px; height: 10px; border-radius: 50%; background: var(--th-dot); color: var(--th-dot); }
.mock-buscar { margin: 0 18px 14px; height: 50px; border-radius: 16px; background: var(--th-card); display: flex; align-items: center; padding: 0 16px; font-size: 16px; opacity: .85; flex: none; }
.mock-cats { display: flex; gap: 8px; padding: 0 18px 14px; }
.mock-cats span { font-size: 14px; font-weight: 600; padding: 9px 14px; border-radius: 999px; background: var(--th-card); }
.mock-items { display: flex; flex-direction: column; gap: 10px; padding: 0 18px; }
.mock-item { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 18px; background: var(--th-card); }
.mock-item i { width: 60px; height: 60px; border-radius: 14px; flex: none; }
.mock-item b { flex: 1; min-width: 0; font-size: 17px; font-weight: 600; }
.mock-item span { font: 500 15px var(--mono); }
.mock-play { position: absolute; left: 0; right: 0; bottom: 0; padding: 90px 20px 44px; background: linear-gradient(to top, var(--th-bg) 50%, transparent); display: flex; justify-content: center; }
.mock-play button { position: relative; min-height: 60px; padding: 0 30px; border-radius: 999px; border: 0; background: var(--red); color: var(--cream); font: 600 19px var(--sans); cursor: pointer; box-shadow: 0 10px 24px -8px rgba(0,0,0,.4); }
.mock-play button:hover { background: var(--red-dark); }
.mock-play [data-anim="tap"] { position: absolute; right: 26px; top: 50%; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: 0 0 0 2px rgba(255,255,255,.7); pointer-events: none; opacity: 0; }
.hero-pie { margin: 0; max-width: 330px; text-align: center; font-size: 14px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.hero-pie strong { color: var(--ink); }
.vivo { font-size: 15px; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; text-decoration: underline; text-underline-offset: 4px; }
.vivo::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(46,107,62,.18); }

/* ---------- ¿Te suena? ---------- */
.suena { position: relative; overflow: hidden; padding: clamp(56px, 7vw, 96px) var(--gutter); }
.suena-cab { display: flex; flex-wrap: wrap; gap: 16px 48px; align-items: flex-end; justify-content: space-between; margin-bottom: clamp(28px, 4vw, 40px); }
.suena-cab h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(46px, 7vw, 88px); line-height: .9; letter-spacing: -.04em; margin: 0; }
.suena-cab h2 span { color: var(--salmon); }
.suena-cab p { margin: 0; font-size: clamp(17px, 1.6vw, 19px); line-height: 1.45; color: var(--soft); max-width: 22em; text-wrap: pretty; }
.suena-cab strong { color: var(--cream); }
.video { background: var(--cream); color: var(--ink); border-radius: 28px; padding: clamp(20px, 3vw, 36px); display: flex; flex-wrap: wrap; gap: 32px clamp(28px, 4vw, 56px); align-items: center; }
.video-izq { flex: 0 0 auto; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.video-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 300px; }
.video-tag { font-size: 14px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: var(--pink-ink); color: #fff; transition: background .3s; }
.video-reloj { display: flex; align-items: center; gap: 6px; font: 500 15px var(--mono); color: var(--pink-ink); }
.video-reloj::before { content: ''; width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; box-sizing: border-box; }
.video.bien .video-tag { background: var(--green); }
.video.bien .video-reloj { color: var(--green); }
.video-segs { display: flex; gap: 4px; width: 300px; }
.video-segs > span { flex: 1; height: 4px; border-radius: 2px; background: rgba(34,27,22,.12); overflow: hidden; }
.video-segs i { display: block; height: 100%; width: 0; background: var(--pink-ink); }
.video-segs > span:nth-child(n+7) i { background: var(--green); }
.vcel { width: 300px; height: 618px; border-radius: 48px; background: linear-gradient(145deg, #3a322c, #14100d 55%, #2a231e); padding: 9px; box-shadow: 0 30px 60px -30px rgba(34,27,22,.55); }
.vpant { position: relative; height: 100%; border-radius: 36px; overflow: hidden; background: #0f0c0a; color: #fff; transition: background .4s; display: flex; flex-direction: column; }
.vest { flex: none; height: 36px; display: flex; align-items: center; justify-content: space-between; padding: 4px 24px 0 28px; font: 600 12px -apple-system, var(--sans); }
.vest b { font-size: 10px; font-weight: 700; }
.vest i { position: absolute; left: 50%; top: 8px; width: 84px; height: 24px; margin-left: -42px; border-radius: 14px; background: #000; }
.vurl { flex: none; height: 24px; background: #f1f1f1; border-radius: 8px; margin: 2px 10px 8px; display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 10.5px; color: #555; }
.vurl::before { content: ''; width: 7px; height: 8px; border: 1.5px solid #888; border-radius: 2px; box-sizing: border-box; }
.vflash { position: absolute; inset: 0; z-index: 5; background: #fff; opacity: 0; pointer-events: none; }
.vwipe { position: absolute; inset: 0; z-index: 6; background: var(--green); color: var(--cream); display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; text-align: center; padding: 24px; opacity: 0; pointer-events: none; }
.vwipe span:first-child { font-size: 40px; line-height: 1; }
.vwipe span:last-child { font: 600 28px/1.1 var(--serif); }
.vescena { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.vescena > div { flex: 1; display: flex; flex-direction: column; }
.v-qr { align-items: center; justify-content: center; gap: 22px; background: radial-gradient(circle at 50% 45%, #3b332c, #0f0c0a 75%); }
.v-qrbox { position: relative; width: 170px; height: 170px; display: flex; align-items: center; justify-content: center; }
.v-esq { position: absolute; width: 34px; height: 34px; border: 0 solid #fff; }
.v-esq:nth-child(1) { left: 0; top: 0; border-width: 4px 0 0 4px; border-radius: 10px 0 0 0; }
.v-esq:nth-child(2) { right: 0; top: 0; border-width: 4px 4px 0 0; border-radius: 0 10px 0 0; }
.v-esq:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 4px 4px; border-radius: 0 0 0 10px; }
.v-esq:nth-child(4) { right: 0; bottom: 0; border-width: 0 4px 4px 0; border-radius: 0 0 10px 0; }
.qr { background: #fff; padding: 8px; border-radius: 6px; display: grid; grid-template-columns: repeat(21, 5px); grid-auto-rows: 5px; }
.v-scan { position: absolute; left: 10px; right: 10px; top: 12px; height: 3px; border-radius: 2px; background: var(--salmon); box-shadow: 0 0 14px 3px rgba(240,165,138,.7); }
.v-mesa { font-size: 13px; font-weight: 600; color: #fff; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.14); }
.v-links { align-items: center; gap: 9px; padding: 6px 16px; background: linear-gradient(#d9d4f0, #efe7f7); position: relative; }
.v-links .av { width: 52px; height: 52px; border-radius: 50%; flex: none; }
.v-links .user { font-size: 13px; font-weight: 700; color: #222; }
.v-anuncio { width: 100%; border-radius: 12px; background: #FFE37A; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; position: relative; }
.v-anuncio small { position: absolute; right: 8px; top: 6px; font-size: 8.5px; font-weight: 700; color: #7a6300; }
.v-anuncio b { font-size: 12.5px; font-weight: 800; color: #222; }
.v-anuncio span { font-size: 10.5px; color: #444; }
.v-link { width: 100%; padding: 12px; border-radius: 999px; background: #fff; font-size: 12.5px; font-weight: 700; color: #222; text-align: center; position: relative; }
.v-gratis { margin-top: auto; margin-bottom: 10px; font-size: 10.5px; font-weight: 700; color: #222; padding: 7px 12px; border-radius: 999px; background: #fff; }
.v-tap { position: absolute; right: 30px; top: 50%; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%; background: rgba(34,27,22,.25); opacity: 0; }
.v-sheet { justify-content: flex-end; background: rgba(0,0,0,.45); }
.v-sheet-in { background: #fff; border-radius: 22px 22px 0 0; padding: 18px 18px 26px; display: flex; flex-direction: column; gap: 10px; color: #222; }
.v-sheet-in b { font-size: 14px; }
.v-sheet-in > span { padding: 12px; border-radius: 12px; background: #f1f1f1; font-size: 13px; font-weight: 600; position: relative; }
.v-sheet-in small { font-size: 11px; color: #777; }
.v-sheet-in .v-tap { right: 20px; width: 32px; height: 32px; margin-top: -16px; }
.v-blanco { align-items: center; justify-content: center; background: #fff; color: #222; text-align: center; }
.v-drive { gap: 16px; padding: 20px; }
.v-spin { width: 34px; height: 34px; border-radius: 50%; border: 4px solid #e3e3e3; border-top-color: #888; }
.v-late { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.v-late b { font-size: 16px; }
.v-late span { font-size: 12px; color: #666; line-height: 1.4; }
.v-late em { font-style: normal; padding: 10px 18px; border-radius: 999px; background: #e8e8e8; font-size: 12.5px; font-weight: 700; }
.v-down { gap: 14px; padding: 24px; }
.v-pdf { width: 70px; height: 88px; border-radius: 8px; background: #f3f3f3; border: 1.5px solid #ddd; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; font-size: 11px; font-weight: 800; color: var(--red); }
.v-down b { font-size: 13px; }
.v-down small { font-size: 11px; color: #777; }
.v-barra { width: 100%; height: 6px; border-radius: 3px; background: #eee; overflow: hidden; }
.v-barra i { display: block; height: 100%; width: 0; background: #888; }
.v-pinch { position: relative; overflow: hidden; background: #525659; align-items: center; justify-content: center; }
.v-hoja { width: 150px; height: 200px; background: #fff; padding: 12px 10px; display: flex; flex-direction: column; gap: 4px; }
.v-hoja i { height: 3px; background: #bbb; }
.v-hoja i:first-child { height: 7px; width: 50%; background: #333; margin-bottom: 4px; }
.v-dedo { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: 0 0 0 2px rgba(255,255,255,.8); }
.v-site { background: #F3EADB; color: #3A2A1E; position: relative; }
.v-site-top { display: flex; justify-content: space-between; align-items: center; padding: 4px 16px 10px; }
.v-site-top b { font: 600 19px var(--serif); }
.v-site-top span { font-size: 10px; font-weight: 700; opacity: .7; }
.v-site-cover { margin: 0 10px; height: 140px; border-radius: 18px; flex: none; }
.v-site-tit { padding: 12px 16px 6px; font: 600 18px/1.15 var(--serif); }
.v-site-abierto { padding: 0 16px 10px; display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; color: var(--green); }
.v-site-abierto::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.v-site-item { margin: 0 12px 8px; display: flex; align-items: center; gap: 10px; padding: 7px; border-radius: 14px; background: #fff; }
.v-site-item i { width: 42px; height: 42px; border-radius: 10px; flex: none; }
.v-site-item b { flex: 1; font-size: 12.5px; font-weight: 600; }
.v-site-item span { font: 500 11.5px var(--mono); }
.v-listo { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--green); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; box-shadow: 0 10px 24px -8px rgba(0,0,0,.4); opacity: 0; }
.video-play { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid rgba(34,27,22,.3); background: transparent; color: var(--ink); font: 600 14px var(--sans); cursor: pointer; transition: border-color .2s; }
.video-play:hover { border-color: var(--ink); }
.video-der { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.camino { display: flex; flex-direction: column; gap: 12px; }
.camino .h3 { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.camino-bien { background: var(--mint); border-radius: 18px; padding: 18px 14px; }
.camino-bien .h3 { margin-left: 10px; color: var(--mint-ink); }
.camino ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.camino ol button { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 6px 10px; border-radius: 12px; border: 0; background: transparent; color: var(--ink); font: 500 16px var(--sans); text-align: left; cursor: pointer; transition: background .3s; }
.camino ol button > span { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--sand); color: var(--muted); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; transition: background .3s; }
.camino ol button[aria-current="step"] { background: var(--pink); font-weight: 700; }
.camino ol button[aria-current="step"] > span { background: var(--pink-ink); color: #fff; }
.camino-bien ol button { color: var(--mint-ink); }
.camino-bien ol button > span { background: var(--green); color: #fff; }
.camino-bien ol button[aria-current="step"] { background: #C9DFC0; }
.camino-bien ol button[aria-current="step"] > span { background: var(--green); }
.pyc { margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.pyc > div { border-radius: 24px; padding: clamp(22px, 3vw, 32px); display: flex; flex-direction: column; gap: 16px; }
.pyc .pill { align-self: flex-start; }
.pyc-mal { background: var(--brown); }
.pyc-bien { background: var(--mint); color: var(--mint-ink); }
.pyc-precio { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 16px; color: var(--ink); }
.pyc-mal .pyc-precio { background: var(--sand); }
.pyc-bien .pyc-precio { background: #fff; }
.pyc-precio > b { font-weight: 600; font-size: 16px; }
.pyc-viejo { position: relative; font: 500 22px var(--mono); color: var(--muted); }
.pyc-viejo::after { content: ''; position: absolute; left: -6px; right: -6px; top: 50%; height: 3px; border-radius: 2px; background: var(--red); transform: rotate(-8deg); }
.pyc-nuevo { display: flex; align-items: center; gap: 10px; }
.pyc-nuevo small { font-size: 12px; font-weight: 700; color: var(--green); }
.pyc-nuevo span { font: 500 22px var(--mono); }
.pyc p { margin: 0; font-size: 16px; line-height: 1.5; text-wrap: pretty; }
.pyc-mal p { color: var(--soft); }

/* ---------- Lo que hacemos ---------- */
.incluye { scroll-margin-top: 60px; padding: clamp(56px, 7vw, 88px) 0; overflow: hidden; }
.incluye-cab { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); display: flex; flex-wrap: wrap; gap: 20px 64px; align-items: flex-end; justify-content: space-between; }
.incluye-cab > div { flex: 1 1 460px; min-width: 0; }
.incluye-cab > p { flex: 1 1 320px; margin: 0; font-size: 17px; line-height: 1.55; color: var(--muted); max-width: 30em; text-wrap: pretty; }
.paginas-nav { max-width: 1120px; margin: 48px auto 28px; padding: 0 var(--gutter); display: flex; justify-content: center; }
.paginas-nav > div { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 999px; background: var(--sand); font-weight: 600; font-size: 15px; }
.paginas-nav span { padding: 10px 18px; border-radius: 999px; transition: background .4s, color .4s; }
.paginas-nav span.on { background: var(--ink); color: var(--cream); }
.paginas-nav i { width: 24px; border-top: 2px dotted rgba(34,27,22,.35); }
@media (max-width: 400px) { .paginas-nav span { padding: 10px 12px; } .paginas-nav > div { gap: 6px; } .paginas-nav i { width: 12px; } }
.carrusel { max-width: 1120px; margin: 0 auto; padding: 24px var(--gutter) 8px; display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; justify-content: safe center; scrollbar-width: none; flex-wrap: nowrap; align-items: flex-start; }
.carrusel::-webkit-scrollbar { display: none; }
.pag { margin: 0; flex: none; scroll-snap-align: center; display: flex; flex-direction: column; gap: 16px; align-items: center; width: 200px; transition: transform .6s var(--ease); }
.pag.on { transform: translateY(-18px); }
.minicel { width: 260px; height: 520px; border-radius: 40px; background: #1B1511; padding: 8px; zoom: .77; box-shadow: 0 30px 60px -30px rgba(34,27,22,.45); }
.minicel > div { height: 100%; border-radius: 32px; background: #F3EADB; color: #3A2A1E; overflow: hidden; display: flex; flex-direction: column; }
.mc-top { display: flex; justify-content: space-between; align-items: center; padding: 16px 16px 10px; }
.mc-top b { font: 600 18px var(--serif); }
.mc-top span { display: flex; flex-direction: column; gap: 3px; }
.mc-top span::before, .mc-top span::after { content: ''; width: 16px; height: 2px; background: #3A2A1E; }
.mc-k { font: 500 10px var(--mono); letter-spacing: .1em; opacity: .7; }
.mc-t { font-family: var(--serif); line-height: 1.15; }
.mc-chip { font-size: 11px; font-weight: 600; padding: 6px 10px; border-radius: 999px; background: #fff; }
.mc-chip.osc { background: #3A2A1E; color: #F3EADB; }
.mc-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 14px; background: #fff; }
.mc-item i { width: 52px; height: 52px; border-radius: 10px; flex: none; }
.mc-item b { flex: 1; font-size: 13px; font-weight: 600; }
.mc-item span { font: 500 12px var(--mono); }
.mc-linea { height: 6px; background: #E2D5C0; border-radius: 3px; }
.pag figcaption { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.pag figcaption b { font: 600 24px var(--serif); }
.pag figcaption span { font-size: 15px; line-height: 1.4; color: var(--muted); }
.incluye-nota { max-width: 1120px; margin: 28px auto 0; padding: 0 var(--gutter); text-align: center; font-size: 14px; color: var(--muted); }
.incluye-nota a { font-weight: 600; }

/* ---------- Cómo funciona ---------- */
.como { padding-bottom: clamp(28px, 4vw, 40px); }
.como .eyebrow { color: var(--salmon); }
.como .h2 { margin-bottom: 12px; }
.como-sub { margin: 0 0 40px; font-size: 18px; color: var(--soft2); max-width: 32em; }
.tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.tabs button { min-height: 64px; padding: 12px; border-radius: 14px; border: 1px solid rgba(246,240,230,.25); background: transparent; color: var(--cream); text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 4px; transition: background .2s; }
.tabs button[aria-selected="true"] { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.tabs button span { font: 500 12px var(--mono); letter-spacing: .06em; }
.tabs button b { font-weight: 600; font-size: clamp(12.5px, 1.6vw, 16px); line-height: 1.2; }
.progreso { height: 4px; background: rgba(246,240,230,.15); border-radius: 4px; overflow: hidden; margin-bottom: 28px; }
.progreso i { display: block; height: 100%; width: 25%; background: var(--salmon); border-radius: 4px; transition: width .4s ease; }
.panel { background: var(--cream); color: var(--ink); border-radius: 28px; padding: clamp(24px, 4vw, 48px); display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 64px); align-items: center; }
.panel-txt { flex: 1 1 320px; min-width: 0; }
.panel-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.panel-tags span { font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; background: var(--sand); }
.panel-tags span:first-child { background: var(--ink); color: var(--cream); }
.panel h3 { font: 600 clamp(26px, 3vw, 34px)/1.05 var(--serif); margin: 0 0 16px; }
.panel h3 span { color: var(--red); }
.panel p { font-size: 17px; line-height: 1.55; color: var(--muted); margin: 0 0 28px; max-width: 30em; text-wrap: pretty; }
.panel .btn-line { min-height: 48px; font-size: 15px; }
.panel-ilu { flex: 1 1 300px; min-width: 0; min-height: 300px; border-radius: 20px; background: var(--sand); display: flex; align-items: center; justify-content: center; padding: 28px; position: relative; overflow: hidden; }
.ilu-hoja { position: absolute; width: 150px; height: 190px; background: #fff; border-radius: 10px; box-shadow: 0 10px 24px -12px rgba(0,0,0,.3); padding: 14px; display: flex; flex-direction: column; gap: 7px; }
.ilu-hoja small { font: 500 10px var(--mono); color: var(--muted); }
.ilu-hoja i { height: 6px; background: #d9cdb9; border-radius: 3px; }
.qr-grande { grid-template-columns: repeat(21, 7px); grid-auto-rows: 7px; padding: 0; }
.ilu-mes { display: flex; align-items: baseline; gap: 8px; background: var(--cream); border-radius: 12px; padding: 10px 14px; font-size: 14px; }
.ilu-mes small { font: 500 11px var(--mono); color: var(--muted); width: 44px; flex: none; }
.ilu-mes b { font-weight: 600; }
.ilu-mes i { flex: 1; border-bottom: 2px dotted rgba(34,27,22,.25); }
.ilu-mes span { color: var(--green); font-weight: 700; }

/* ---------- WhatsApp ---------- */
.wa-sec { padding: 0 clamp(12px, 3vw, 40px) clamp(56px, 7vw, 88px); background: var(--ink); }
.wa-caja { max-width: 1176px; margin: 0 auto; background: var(--green); color: var(--cream); border-radius: clamp(24px, 3vw, 40px); padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 72px); }
.wa-caja .eyebrow { color: #CFE6C6; }
.wa-caja .h2 { margin-bottom: 32px; max-width: 14em; }
.wa-fila { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 72px); align-items: flex-start; }
.chat-col { flex: 1 1 340px; min-width: 0; max-width: 480px; }
.chat { background: #E9DFCC; color: var(--ink); border-radius: 28px; overflow: hidden; box-shadow: 0 30px 60px -24px rgba(0,0,0,.45); }
.chat-cab { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--ink); color: var(--cream); }
.chat-av { width: 38px; height: 38px; border-radius: 50%; background: var(--red); display: flex; align-items: center; justify-content: center; font: 600 13px var(--serif); flex: none; }
.chat-cab > div { display: flex; flex-direction: column; gap: 2px; }
.chat-cab b { font-weight: 600; font-size: 15px; }
.chat-cab small { font-size: 12px; color: var(--soft2); }
.chat-cab > em { margin-left: auto; font: 500 10.5px var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--soft2); text-align: right; }
.chat-log { padding: 20px 16px 24px; display: flex; flex-direction: column; gap: 10px; min-height: 380px; }
.msg { max-width: 85%; padding: 10px 14px 6px; font-size: 15px; line-height: 1.4; transition: opacity .35s, transform .35s; }
.msg small { display: block; font-size: 11px; margin-top: 2px; }
.msg-yo { align-self: flex-end; background: #D5EDC0; color: #1E2A16; border-radius: 16px 16px 4px 16px; }
.msg-yo small { text-align: right; color: #4A5A3E; }
.msg-ellos { align-self: flex-start; background: #fff; border-radius: 16px 16px 16px 4px; }
.msg-ellos small { color: var(--muted); }
.escribiendo { align-self: flex-start; background: #fff; padding: 14px 16px; border-radius: 16px 16px 16px 4px; display: none; gap: 5px; }
.escribiendo i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: typing 1.2s infinite; }
.escribiendo i:nth-child(2) { animation-delay: .2s; }
.escribiendo i:nth-child(3) { animation-delay: .4s; }
.chat-carta { align-self: flex-start; width: min(100%, 300px); background: #fff; border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; transition: opacity .35s, transform .35s; }
.chat-carta > small { font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.chat-plato { display: flex; align-items: center; gap: 10px; }
.chat-plato i { width: 44px; height: 44px; border-radius: 10px; flex: none; }
.chat-plato b { flex: 1; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chat-plato b em { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 3px 7px; border-radius: 999px; background: var(--red); color: #fff; }
.chat-plato > span { display: flex; flex-direction: column; align-items: flex-end; font: 500 12.5px var(--mono); }
.chat-plato s { color: #7A6C60; }
/* El chat se revela por pasos (data-paso lo pone app.js); sin JS se ve completo */
.js .chat[data-paso="0"] .m1, .js .chat[data-paso="0"] .m3, .js .chat[data-paso="1"] .m3, .js .chat[data-paso="2"] .m3,
.js .chat[data-paso="0"] .m4, .js .chat[data-paso="1"] .m4, .js .chat[data-paso="2"] .m4, .js .chat[data-paso="3"] .m4 { opacity: 0; transform: translateY(10px); }
.chat[data-paso="2"] .escribiendo { display: flex; }
.wa-txt { flex: 1 1 280px; min-width: 0; align-self: center; display: flex; flex-direction: column; gap: 18px; }
.wa-txt p { margin: 0; }
.wa-txt p:first-child { font: 600 clamp(22px, 2.4vw, 28px)/1.2 var(--serif); text-wrap: balance; }
.wa-txt p:last-child { font-size: 17px; line-height: 1.5; color: #E3EEDC; max-width: 26em; }

/* ---------- La carta (funciones) ---------- */
.funciones { padding: clamp(56px, 7vw, 88px) 0; overflow: hidden; }
.funciones > .wrap { padding: 0 var(--gutter); }
.funciones .h2 { margin-bottom: 32px; max-width: 14em; }
.funciones .carrusel { gap: 20px; }
.funciones figure { margin: 0; flex: none; scroll-snap-align: center; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.funciones figcaption { font-weight: 600; font-size: 17px; }
.fcel { width: 250px; height: 500px; border-radius: 38px; background: #1B1511; padding: 8px; }
.fcel > div { height: 100%; border-radius: 31px; background: #F3EADB; color: #3A2A1E; overflow: hidden; display: flex; flex-direction: column; gap: 10px; }
.f-buscar { height: 40px; border-radius: 12px; background: #fff; border: 2px solid #3A2A1E; display: flex; align-items: center; padding: 0 12px; font-size: 13px; flex: none; }
.f-buscar i { width: 1.5px; height: 16px; background: var(--red); margin-left: 2px; }
.f-hora { display: flex; gap: 6px; padding: 8px 2px; border-bottom: 1px solid rgba(0,0,0,.08); }
.f-hora i { flex: 1; }
.f-hora span { font-family: var(--mono); }
.f-turno { padding: 14px; border-radius: 16px; background: #fff; display: flex; flex-direction: column; gap: 6px; }
.f-turno b { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14px; }
.f-turno b i { width: 9px; height: 9px; border-radius: 50%; }
.f-turno span { font-size: 12.5px; }

/* ---------- Planes ---------- */
.planes-cab { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: flex-end; justify-content: space-between; margin-bottom: 36px; }
.planes-cab > div { flex: 1 1 380px; }
.planes-cab .h2 { margin-bottom: 14px; }
.planes-cab p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--muted); max-width: 32em; }
.periodo { display: flex; padding: 4px; border-radius: 999px; background: var(--cream); gap: 4px; }
.periodo button { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 0; font: 600 15px var(--sans); cursor: pointer; background: transparent; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.periodo button[aria-checked="true"] { background: var(--ink); color: var(--cream); }
.periodo button small { font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--red); color: var(--cream); }
.periodo button[aria-checked="true"] small { background: var(--salmon); color: var(--ink); }
.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; align-items: stretch; }
.plan { background: var(--cream); color: var(--ink); border-radius: 28px; padding: clamp(24px, 3vw, 32px); display: flex; flex-direction: column; gap: 20px; position: relative; transition: transform .3s ease, box-shadow .3s ease; }
.plan:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(34,27,22,.5); }
.plan-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 28px; }
.plan h3 { margin: 0; font: 600 22px var(--serif); }
.plan-cab span { font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 999px; background: var(--cream); color: var(--red-dark); }
.plan-precio { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.plan-precio b { font: 600 clamp(34px, 3.6vw, 40px) var(--serif); letter-spacing: -.02em; }
.plan-precio span { font-size: 16px; opacity: .8; }
.plan-sub { font-size: 14px; margin-top: 4px; opacity: .85; min-height: 20px; }
.plan ul { list-style: none; margin: 0; padding: 20px 0 0; border-top: 1px dashed rgba(34,27,22,.25); display: flex; flex-direction: column; gap: 11px; flex: 1; }
.plan li { position: relative; padding-left: 24px; font-size: 15.5px; line-height: 1.4; }
.plan li::before { content: '✓'; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.plan-dest { background: var(--red); color: var(--cream); }
.plan-dest ul { border-top-color: rgba(246,240,230,.4); }
.plan-dest li::before { color: var(--cream); }
.plan-dest .btn { background: var(--cream); color: var(--red-dark); }
.plan-dest .btn:hover { background: #fff; color: var(--red-dark); }
.planes-nota { margin: 28px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 56em; }

/* ---------- Calculadora ---------- */
.calc-sec { padding: 0 var(--gutter) clamp(56px, 7vw, 88px); }
.calc-sec > .wrap { padding-top: clamp(40px, 5vw, 56px); border-top: 1px dashed rgba(34,27,22,.25); }
.calc-sec .h2 { margin-bottom: 32px; max-width: 14em; }
.calc { display: flex; flex-wrap: wrap; gap: 16px; }
.calc-in, .calc-out { flex: 1 1 340px; min-width: 0; border-radius: 24px; padding: clamp(22px, 3vw, 36px); display: flex; flex-direction: column; }
.calc-in { background: var(--cream); gap: 22px; }
.calc-in label { display: flex; flex-direction: column; gap: 4px; }
.calc-in label > span { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.calc-in label b { font-weight: 600; font-size: 16px; }
.calc-in output { font: 500 18px var(--mono); white-space: nowrap; }
.calc-in small { display: flex; justify-content: space-between; font: 400 12px var(--mono); color: var(--muted); }
input[type=range] { accent-color: var(--red); width: 100%; height: 44px; margin: 0; cursor: pointer; }
.calc-out { background: var(--ink); color: var(--cream); gap: 20px; }
.calc-big small { display: block; font-size: 17px; color: var(--soft2); margin-bottom: 6px; }
.calc-big strong { display: block; font: 600 clamp(46px, 6vw, 72px)/1 var(--serif); letter-spacing: -.03em; color: var(--salmon); }
.calc-out > p { margin: 0; font-size: 18px; line-height: 1.45; text-wrap: pretty; }
.calc-filas { border-top: 1px solid rgba(246,240,230,.18); }
.calc-filas > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px 12px; padding: 14px 0; border-bottom: 1px solid rgba(246,240,230,.18); font-size: 16px; }
.calc-filas output { font: 500 18px var(--mono); color: var(--soft2); text-decoration-color: var(--salmon); text-decoration-thickness: 2px; white-space: nowrap; }
.calc-filas > div + div output { color: var(--cream); }
.calc-out > .calc-aviso { margin: auto 0 0; font: 400 12.5px var(--mono); color: var(--soft2); }

/* ---------- Preguntas ---------- */
.faq-in { display: flex; flex-wrap: wrap; gap: 24px clamp(40px, 6vw, 96px); }
.faq-in > div:first-child { flex: 1 1 280px; }
.faq { flex: 2 1 420px; min-width: 0; border-top: 2px solid var(--ink); }
.faq > div { border-bottom: 1px solid rgba(34,27,22,.15); }
.faq h3 { margin: 0; }
.faq button { width: 100%; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; background: none; border: 0; color: var(--ink); text-align: left; font: 600 18px/1.3 var(--sans); cursor: pointer; }
.faq button i { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--sand); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 500; font-style: normal; transition: transform .25s; }
.faq button[aria-expanded="true"] i { transform: rotate(45deg); }
.faq p { margin: 0 48px 22px 0; font-size: 17px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }

/* ---------- Cierre / formulario ---------- */
.cierre { padding: clamp(24px, 4vw, 56px) clamp(10px, 3vw, 40px) clamp(56px, 7vw, 88px); scroll-margin-top: 60px; }
.cierre-card { position: relative; isolation: isolate; overflow: hidden; max-width: 1440px; margin: 0 auto; background: var(--red); color: var(--cream); border-radius: clamp(28px, 4vw, 48px); padding: clamp(56px, 9vw, 128px) clamp(18px, 5vw, 64px) clamp(40px, 6vw, 72px); text-align: center; }
/* Cuadrícula suave que se desvanece hacia los bordes */
.cierre-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(246,240,230,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(246,240,230,.09) 1px, transparent 1px); background-size: 56px 56px; background-position: center; -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, #000 30%, transparent 75%); }
.cierre-tit { margin: 0 0 22px; font: 600 clamp(34px, 7vw, 96px)/1 var(--serif); letter-spacing: -.035em; }
.cierre-a { display: block; color: rgba(246,240,230,.62); }
.cierre-b { display: block; min-height: 1.1em; white-space: nowrap; }
.cursor { display: inline-block; width: .06em; height: .82em; margin-left: .04em; vertical-align: -.06em; background: currentColor; border-radius: 2px; animation: parpadeo 1s steps(2, start) infinite; }
@keyframes parpadeo { to { visibility: hidden; } }
.cierre-sub { margin: 0 auto; max-width: 30em; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.5; color: rgba(246,240,230,.85); text-wrap: pretty; }
.cierre .form { max-width: 560px; margin: clamp(28px, 4vw, 44px) auto 0; text-align: left; box-shadow: 0 30px 60px -30px rgba(60,12,0,.6); }
.cierre-pasos { list-style: none; margin: 28px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; counter-reset: p; font-size: 15px; }
.cierre-pasos li { display: flex; align-items: center; gap: 10px; counter-increment: p; }
.cierre-pasos li::before { content: counter(p); flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid rgba(246,240,230,.7); display: flex; align-items: center; justify-content: center; font: 500 12px var(--mono); }
.form { min-width: 0; background: var(--cream); color: var(--ink); border-radius: 28px; padding: clamp(22px, 3vw, 36px); display: flex; flex-direction: column; gap: 20px; }
.form label { display: flex; flex-direction: column; gap: 8px; }
.form label > span, .form legend { font-weight: 600; font-size: 15px; }
.form legend { padding: 0; margin-bottom: 8px; }
.form legend span { font-weight: 400; color: var(--muted); }
.form input { min-height: 52px; padding: 0 16px; border-radius: 14px; border: 1.5px solid rgba(34,27,22,.3); background: #fff; font: 400 17px var(--sans); color: var(--ink); }
.form input:focus-visible { border-color: var(--ink); }
.form fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opciones button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid rgba(34,27,22,.3); background: #fff; color: var(--ink); font: 600 15px var(--sans); cursor: pointer; }
.opciones button[aria-checked="true"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.form .btn { min-height: 54px; font-size: 17px; margin-top: 4px; }
.form-nota { margin: 0; font-size: 13px; color: var(--muted); text-align: center; }
.form-ok { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--mint); color: var(--mint-ink); font-size: 15px; line-height: 1.4; }

/* ---------- Pie: foto de fondo, tarjeta con links y la marca de punta a punta ---------- */
.pie { padding: clamp(48px, 9vw, 120px) clamp(10px, 3vw, 40px) 0; background: #0E0B09 url(img/fotos/pie.webp) center 40% / cover no-repeat; }
.pie-card { container-type: inline-size; max-width: 1440px; margin: 0 auto; background: #FBF7F0; color: var(--ink); border-radius: clamp(24px, 3.5vw, 44px) clamp(24px, 3.5vw, 44px) 0 0; padding: clamp(32px, 5vw, 72px) clamp(20px, 5vw, 80px) 28px; }
.pie-top { display: grid; grid-template-columns: minmax(80px, 1fr) minmax(0, 4fr); gap: 32px; }
.pie-icono { color: var(--red); width: 56px; height: 56px; display: block; border-radius: 12px; }
.pie-icono svg { display: block; }
.pie-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
.pie-cols h2 { margin: 0 0 14px; font: 600 15px var(--sans); color: var(--muted); }
.pie-cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pie-cols a { display: inline-flex; align-items: center; min-height: 40px; color: var(--ink); text-decoration: none; font-size: 16px; transition: color .2s; }
.pie-cols a:hover { color: var(--red); text-decoration: underline; text-underline-offset: 4px; }
/* La marca ocupa todo el ancho de la tarjeta (100cqi = ancho interno) */
.pie-marca { margin: clamp(48px, 8vw, 112px) 0 clamp(20px, 3vw, 36px); display: flex; align-items: center; justify-content: space-between; gap: .12em; font: 600 calc(100cqi / 6.68) / .9 var(--serif); letter-spacing: -.045em; color: var(--red); white-space: nowrap; }
.pie-marca .sw { font-size: .62em; }
.pie-fila { padding: 22px 0 6px; border-top: 1px solid rgba(34,27,22,.14); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 14px; color: var(--muted); }
.pie-fila a { color: var(--ink); }
@media (max-width: 819px) {
  .pie-top { grid-template-columns: 1fr; }
  .pie-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie-card { padding-bottom: 96px; }
}
[data-tema="oscuro"] .pie { background-color: var(--deep); }
[data-tema="oscuro"] .pie-card { background: var(--raised); color: var(--fg); }
[data-tema="oscuro"] .pie-cols a, [data-tema="oscuro"] .pie-fila a { color: var(--fg); }
[data-tema="oscuro"] .pie-cols a:hover { color: var(--salmon); }
[data-tema="oscuro"] .pie-icono, [data-tema="oscuro"] .pie-marca { color: var(--rojo-texto); }
[data-tema="oscuro"] .pie-icono circle { fill: var(--raised); }
[data-tema="oscuro"] .pie-fila { border-top-color: var(--line); }
[data-tema="oscuro"] .cierre-card { box-shadow: 0 0 0 1px rgba(241,232,218,.06); }

/* ---------- Barra fija (celular) y WhatsApp flotante (escritorio) ---------- */
.barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--cream); border-top: 1px solid rgba(34,27,22,.15); box-shadow: 0 -10px 30px -12px rgba(34,27,22,.3); display: flex; align-items: center; justify-content: space-between; gap: 12px; transform: translateY(110%); visibility: hidden; transition: transform .3s ease, visibility .3s; }
.barra.on { transform: none; visibility: visible; }
.barra > span:first-child { display: flex; flex-direction: column; line-height: 1.15; }
.barra small { font-size: 12px; color: var(--muted); }
.barra b { font-weight: 700; font-size: 17px; }
.barra > span:last-child { display: flex; gap: 8px; }
.barra-wa { display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--ink); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; gap: 6px; }
.barra-wa:hover { color: var(--ink); }
.barra .btn { min-height: 48px; padding: 0 20px; white-space: nowrap; }
.barra-wa { white-space: nowrap; }
@media (max-width: 439px) { .barra-wa .txt { display: none; } .barra-wa { width: 48px; padding: 0; justify-content: center; } .barra .btn { padding: 0 18px; } }
.wa-flota { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 22px 0 18px; border-radius: 999px; background: var(--green); color: var(--cream); text-decoration: none; font-weight: 600; font-size: 16px; box-shadow: 0 14px 30px -12px rgba(34,27,22,.55); transform: translateY(24px); opacity: 0; pointer-events: none; visibility: hidden; transition: transform .35s var(--ease), opacity .35s, background .2s, visibility .35s; }
.wa-flota.on { transform: none; opacity: 1; pointer-events: auto; visibility: visible; }
.wa-flota:hover { background: #245631; color: var(--cream); }
.wa-flota svg, .barra-wa svg { flex: none; display: block; }
@media (max-width: 819px) { .wa-flota { display: none; } }
@media (min-width: 820px) { .barra { display: none; } }

/* ---------- Animaciones útiles: respuesta, cambio y orientación ---------- */
@keyframes sacudir { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes resaltar { 0%, 100% { background: transparent; } 30% { background: #CFE6C6; } }

/* Toque: los botones se hunden al apretarlos */
.btn, .periodo button, .opciones button, .tabs button, .video-play, .mock-play button, .barra-wa, .camino ol button { transition: background .2s, color .2s, border-color .2s, transform .12s ease; }
.btn:active, .periodo button:active, .opciones button:active, .tabs button:active, .video-play:active, .mock-play button:active, .barra-wa:active, .camino ol button:active { transform: scale(.97); }

/* Menú: marca la sección en la que estás */
.top-nav a { transition: background .25s, box-shadow .25s; }
.top-nav a[aria-current] { background: rgba(34,27,22,.06); box-shadow: inset 0 -2px 0 var(--red); }

/* Demo: aviso mientras carga Umbral */
.cel-cargando { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: var(--th-bg); color: var(--th-ink); font: 600 18px var(--sans); transition: opacity .4s; }
.cel-cargando i { width: 40px; height: 40px; border-radius: 50%; border: 4px solid currentColor; border-right-color: transparent; opacity: .6; animation: girar .8s linear infinite; }
.cel-cargando.listo { opacity: 0; pointer-events: none; }

/* Problema: el precio viejo se tacha al aparecer; el nuevo se ilumina */
.js .pyc-viejo::after { transform: rotate(-8deg) scaleX(0); transform-origin: left; transition: transform .6s var(--ease) .5s; }
.js .pyc.visto .pyc-viejo::after { transform: rotate(-8deg); }
.pyc-nuevo span { border-radius: 8px; padding: 0 4px; margin-right: -4px; }
.pyc.visto .pyc-nuevo span { animation: resaltar 1.4s ease 1.1s; }

/* Chat: el precio viejo se tacha, el nuevo entra y aparece el sello "Nuevo" */
.chat-plato s { text-decoration: none; position: relative; }
.chat-plato s::after { content: ''; position: absolute; left: -2px; right: -2px; top: 52%; height: 1.5px; background: var(--red); }
.js .chat-plato s::after { transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease) .5s; }
.js .nuevo-precio, .js .chat-plato b em { opacity: 0; transform: translateY(4px); transition: opacity .4s, transform .45s cubic-bezier(.3,1.6,.5,1); transition-delay: .95s; }
.js .chat-plato b em { transform: scale(.4); transition-delay: 1.2s; }
.js .chat[data-paso="4"] .chat-plato s::after { transform: none; }
.js .chat[data-paso="4"] .nuevo-precio, .js .chat[data-paso="4"] .chat-plato b em { opacity: 1; transform: none; }

/* Calculadora: barras que comparan el gasto anual */
.calc-bar { flex: 1 0 100%; height: 6px; border-radius: 3px; background: rgba(246,240,230,.12); overflow: hidden; }
.calc-bar b { display: block; height: 100%; border-radius: 3px; background: var(--soft2); opacity: .55; transition: width .6s var(--ease); }
.calc-bar [data-bar="plan"] { background: var(--salmon); opacity: 1; }

/* Preguntas: la respuesta se despliega */
.faq p { overflow: hidden; }

/* Formulario: aviso si falta el nombre y confirmación al enviar */
.form input.error { border-color: var(--red); animation: sacudir .4s ease; }
.form-ok:not([hidden]) { animation: aparecer .35s var(--ease); }

/* ---------- Botón de tema ---------- */
.tema { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 0; background: transparent; color: var(--ink); cursor: pointer; transition: background .2s, transform .12s ease; }
.tema:hover { background: rgba(34,27,22,.06); }
.tema:active { transform: scale(.92) rotate(-15deg); }
.tema .i-sol, [data-tema="oscuro"] .tema .i-luna { display: none; }
[data-tema="oscuro"] .tema .i-sol { display: block; }
.top-nav + .tema { margin-left: 0; }
@media (max-width: 819px) { .top-in { gap: 6px; padding-right: 6px; } .top-in > .tema { display: none; } .top-cta { margin-left: auto; } }
@media (max-width: 400px) { .top-in { padding-left: 14px; } .top-logo { font-size: 19px; } .top-cta { padding: 0 14px; font-size: 14px; } .tema { width: 40px; height: 40px; } }
.cambiando-tema, .cambiando-tema *, .cambiando-tema *::before, .cambiando-tema *::after { transition: background-color .35s ease, color .35s ease, border-color .35s ease !important; }

/* ---------- Modo oscuro ----------
   Los celulares de ejemplo (Umbral, Linktree, Drive, chat) quedan igual: muestran pantallas reales. */
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --bg: #17120F; --raised: #201915; --card: #2B231E; --deep: #0E0B09;
  --fg: #F1E8DA; --muted: #B8AA99; --sand: #2B231E; --line: rgba(241,232,218,.16);
  --rojo-texto: #EE7A58;
}
[data-tema="oscuro"] body { background: var(--bg); color: var(--fg); }
[data-tema="oscuro"] a { color: var(--salmon); }
[data-tema="oscuro"] a:hover { color: #F6C3AE; }
[data-tema="oscuro"] :focus-visible { outline-color: var(--salmon); }
[data-tema="oscuro"] .eyebrow, [data-tema="oscuro"] .como .eyebrow { color: var(--salmon); }
[data-tema="oscuro"] .btn, [data-tema="oscuro"] .btn:hover { color: var(--cream); }
[data-tema="oscuro"] .btn-line { color: var(--fg); border-color: var(--fg); }
[data-tema="oscuro"] .btn-line:hover { background: var(--fg); color: var(--bg); }

[data-tema="oscuro"] .top-in { background: rgba(32,25,21,.92); border-color: var(--line); box-shadow: 0 8px 24px -14px rgba(0,0,0,.7); }
[data-tema="oscuro"] .top-logo, [data-tema="oscuro"] .top-logo:hover, [data-tema="oscuro"] .top-nav a, [data-tema="oscuro"] .tema { color: var(--fg); }
[data-tema="oscuro"] .top-nav a:hover, [data-tema="oscuro"] .top-nav a[aria-current], [data-tema="oscuro"] .tema:hover { background: rgba(241,232,218,.08); }
[data-tema="oscuro"] .top-nav a[aria-current] { box-shadow: inset 0 -2px 0 var(--salmon); }

[data-tema="oscuro"] .hero-word > span, [data-tema="oscuro"] .panel h3 span { color: var(--rojo-texto); }
[data-tema="oscuro"] .hero-pie strong { color: var(--fg); }
[data-tema="oscuro"] .tranqui li::before, [data-tema="oscuro"] .plan li::before, [data-tema="oscuro"] .ilu-mes span { color: #7CC08E; }
[data-tema="oscuro"] .cel { box-shadow: 0 50px 90px -40px rgba(0,0,0,.8), 0 0 0 1.5px #3a322c, inset 0 0 0 1.5px rgba(255,255,255,.08); }

[data-tema="oscuro"] .dark, [data-tema="oscuro"] .wa-sec, [data-tema="oscuro"] .calc-out { background: var(--deep); }
[data-tema="oscuro"] .sand { background: var(--raised); }

[data-tema="oscuro"] .video { background: var(--raised); color: var(--fg); }
[data-tema="oscuro"] .video-play { color: var(--fg); border-color: var(--line); }
[data-tema="oscuro"] .video-play:hover { border-color: var(--fg); }
[data-tema="oscuro"] .video-segs > span { background: var(--line); }
[data-tema="oscuro"] .video-reloj { color: var(--rojo-texto); }
[data-tema="oscuro"] .video.bien .video-reloj { color: #7CC08E; }
[data-tema="oscuro"] .camino ol button { color: var(--fg); }
[data-tema="oscuro"] .camino ol button[aria-current="step"] { background: #4A2418; }
[data-tema="oscuro"] .camino-bien, [data-tema="oscuro"] .pyc-bien { background: #1B2B1F; color: #CFE6C6; }
[data-tema="oscuro"] .camino-bien .h3, [data-tema="oscuro"] .camino-bien ol button { color: #CFE6C6; }
[data-tema="oscuro"] .camino-bien ol button[aria-current="step"] { background: #2A4632; }
[data-tema="oscuro"] .pyc-mal { background: var(--card); }

[data-tema="oscuro"] .paginas-nav span.on { background: var(--fg); color: var(--bg); }
[data-tema="oscuro"] .paginas-nav i { border-color: var(--line); }
[data-tema="oscuro"] .minicel, [data-tema="oscuro"] .fcel { box-shadow: 0 0 0 1.5px #3a322c; }

[data-tema="oscuro"] .panel { background: var(--raised); color: var(--fg); }
[data-tema="oscuro"] .panel-tags span:first-child { background: var(--fg); color: var(--bg); }
[data-tema="oscuro"] .ilu-mes { background: var(--raised); color: var(--fg); }
[data-tema="oscuro"] .ilu-mes i { border-color: var(--line); }

[data-tema="oscuro"] .periodo { background: var(--card); }
[data-tema="oscuro"] .periodo button { color: var(--fg); }
[data-tema="oscuro"] .periodo button[aria-checked="true"] { background: var(--fg); color: var(--bg); }
[data-tema="oscuro"] .plan { background: var(--card); color: var(--fg); }
[data-tema="oscuro"] .plan ul { border-top-color: var(--line); }
[data-tema="oscuro"] .plan-dest { background: var(--red); color: var(--cream); }
[data-tema="oscuro"] .plan-dest ul { border-top-color: rgba(246,240,230,.4); }
[data-tema="oscuro"] .plan-dest li::before { color: var(--cream); }
[data-tema="oscuro"] .plan:hover { box-shadow: 0 30px 50px -30px rgba(0,0,0,.8); }

[data-tema="oscuro"] .calc-sec > .wrap { border-top-color: var(--line); }
[data-tema="oscuro"] .calc-in { background: var(--card); }
[data-tema="oscuro"] input[type=range] { accent-color: var(--rojo-texto); }

[data-tema="oscuro"] .faq { border-top-color: var(--fg); }
[data-tema="oscuro"] .faq > div { border-bottom-color: var(--line); }
[data-tema="oscuro"] .faq button { color: var(--fg); }

[data-tema="oscuro"] .form { background: var(--raised); color: var(--fg); }
[data-tema="oscuro"] .form input { background: var(--bg); color: var(--fg); border-color: rgba(241,232,218,.3); }
[data-tema="oscuro"] .form input:focus-visible { border-color: var(--fg); }
[data-tema="oscuro"] .form input.error { border-color: var(--rojo-texto); }
[data-tema="oscuro"] .opciones button { background: var(--bg); color: var(--fg); border-color: rgba(241,232,218,.3); }
[data-tema="oscuro"] .opciones button[aria-checked="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }

[data-tema="oscuro"] .barra { background: var(--raised); border-top-color: var(--line); box-shadow: 0 -10px 30px -12px rgba(0,0,0,.7); }
[data-tema="oscuro"] .barra-wa, [data-tema="oscuro"] .barra-wa:hover { color: var(--fg); border-color: var(--fg); }
[data-tema="oscuro"] .pyc-mal .pyc-precio { background: var(--cream); }
.pyc-precio > b { white-space: nowrap; }

/* Cambio de tema: círculo que crece desde el botón (lo anima app.js con View Transitions) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 2; }
@keyframes iconoEntra { from { opacity: 0; transform: rotate(-90deg) scale(.4); } to { opacity: 1; transform: none; } }
.js .tema svg { animation: iconoEntra .5s cubic-bezier(.3,1.4,.5,1); }

/* ---------- Menú hamburguesa (celular) ---------- */
.menu-btn { display: none; flex: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: 0; border-radius: 12px; background: transparent; color: var(--ink); cursor: pointer; transition: background .2s, transform .12s; }
.menu-btn:hover { background: rgba(34,27,22,.06); }
.menu-btn:active { transform: scale(.92); }
@media (max-width: 819px) { .menu-btn { display: inline-flex; } }
html:has(.menu[open]) { overflow: hidden; }
.menu { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(88vw, 380px); height: 100dvh; max-width: none; max-height: none; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); border: 0; border-radius: 24px 0 0 24px; background: var(--cream); color: var(--ink); display: flex; flex-direction: column; transform: translateX(105%); transition: transform .38s var(--ease); box-shadow: -20px 0 60px -20px rgba(0,0,0,.4); }
.menu:not([open]) { display: none; }
.menu.abierto { transform: none; }
.menu::backdrop { background: rgba(14,11,9,0); transition: background .38s, backdrop-filter .38s; }
.menu.abierto::backdrop { background: rgba(14,11,9,.45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.menu-cab { display: flex; align-items: center; justify-content: space-between; padding: 0 0 12px 8px; }
.menu-marca { font-size: 22px; }
.menu-marca .sw { margin-left: .25em; background: var(--red); }
.menu-marca .sw-knob { left: calc(100% - .97em); }
.menu-cerrar { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 12px; background: transparent; color: var(--ink); cursor: pointer; }
.menu-cerrar:hover { background: rgba(34,27,22,.06); }
.menu-nav { display: flex; flex-direction: column; padding: 8px 0; }
.menu-nav a { display: flex; align-items: center; min-height: 54px; padding: 0 8px; border-radius: 12px; color: var(--ink); text-decoration: none; font: 600 24px var(--serif); letter-spacing: -.01em; }
.menu-nav a:hover, .menu-nav a:active { background: rgba(34,27,22,.06); color: var(--ink); }
.menu-pie { margin-top: auto; border-top: 1px solid rgba(34,27,22,.14); padding-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.menu-tema { display: flex; align-items: center; justify-content: space-between; padding: 0 8px; font-weight: 600; font-size: 16px; }
.menu-ctas { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.menu-ctas .btn { min-height: 52px; padding: 0 12px; font-size: 15px; white-space: nowrap; }
/* Interruptor de tema con sol y luna */
.tema-pill { position: relative; display: inline-flex; gap: 2px; padding: 4px; border: 0; border-radius: 999px; background: var(--sand); color: var(--muted); cursor: pointer; }
.tema-pill::before { content: ''; position: absolute; top: 4px; left: 4px; width: 38px; height: 32px; border-radius: 999px; background: #fff; box-shadow: 0 1px 4px rgba(34,27,22,.25); transition: transform .35s var(--ease); }
.tema-pill > span { position: relative; width: 38px; height: 32px; display: flex; align-items: center; justify-content: center; transition: color .3s; }
.tema-pill > span:first-child, [data-tema="oscuro"] .tema-pill > span:last-child { color: var(--ink); }
[data-tema="oscuro"] .tema-pill > span:first-child { color: var(--muted); }
[data-tema="oscuro"] .tema-pill::before { transform: translateX(40px); background: var(--fg); }
[data-tema="oscuro"] .tema-pill > span:last-child { color: var(--bg); }
[data-tema="oscuro"] .menu-btn, [data-tema="oscuro"] .menu-cerrar, [data-tema="oscuro"] .menu-nav a { color: var(--fg); }
[data-tema="oscuro"] .menu-btn:hover, [data-tema="oscuro"] .menu-cerrar:hover, [data-tema="oscuro"] .menu-nav a:hover { background: rgba(241,232,218,.08); }
[data-tema="oscuro"] .menu { background: var(--raised); color: var(--fg); }
[data-tema="oscuro"] .menu-pie { border-top-color: var(--line); }
[data-tema="oscuro"] .tema-pill { background: var(--card); }

/* ---------- Planes en el celular: selector arriba y un plan a la vez ---------- */
.plan-tabs { display: none; }
@media (max-width: 819px) {
  .plan-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; margin-bottom: 12px; border-radius: 20px; background: var(--cream); }
  .plan-tabs button { min-height: 60px; padding: 8px 4px; border: 0; border-radius: 16px; background: transparent; color: var(--ink); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; transition: background .25s, color .25s, transform .12s; }
  .plan-tabs button:active { transform: scale(.97); }
  .plan-tabs span { font-size: 13px; font-weight: 600; opacity: .8; }
  .plan-tabs b { font: 500 15px var(--mono); }
  .plan-tabs [aria-selected="true"] { background: var(--ink); color: var(--cream); }
  .plan-tabs [aria-selected="true"][data-plan-tab="web"] { background: var(--red); }
  .planes .plan:not(.activo) { display: none; }
  .plan:hover { transform: none; box-shadow: none; }
  .plan > div:nth-child(2) { order: 1; }
  .plan .btn { order: 2; }
  .plan ul { order: 3; }
  [data-tema="oscuro"] .plan-tabs { background: var(--card); }
  [data-tema="oscuro"] .plan-tabs button { color: var(--fg); }
  [data-tema="oscuro"] .plan-tabs [aria-selected="true"] { background: var(--fg); color: var(--bg); }
  [data-tema="oscuro"] .plan-tabs [aria-selected="true"][data-plan-tab="web"] { background: var(--red); color: var(--cream); }
}

/* ---------- Comparar los tres planes ---------- */
.comparar { margin-top: 16px; border-radius: 24px; background: var(--cream); }
.comparar summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 0 clamp(18px, 3vw, 28px); font-weight: 600; font-size: 17px; cursor: pointer; border-radius: 24px; }
.comparar summary::-webkit-details-marker { display: none; }
.comparar summary i { flex: none; width: 36px; height: 36px; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 22px; color: var(--red); transition: transform .3s var(--ease); }
.comparar[open] summary i { transform: rotate(45deg); }
.comparar-tabla { padding: 0 clamp(10px, 3vw, 28px) clamp(14px, 3vw, 24px); overflow-x: auto; }
.comparar table { width: 100%; border-collapse: collapse; font-size: 15px; }
.comparar th, .comparar td { padding: 12px 8px; border-top: 1px solid rgba(34,27,22,.12); text-align: center; vertical-align: middle; }
.comparar thead th { border-top: 0; font: 600 17px var(--serif); }
.comparar tbody th { text-align: left; font-weight: 500; }
.comparar td { color: var(--muted); }
@media (max-width: 600px) { .comparar table { font-size: 13px; } .comparar thead th { font-size: 14px; } .comparar th, .comparar td { padding: 10px 4px; } }
[data-tema="oscuro"] .comparar { background: var(--card); }
[data-tema="oscuro"] .comparar summary i { background: var(--bg); color: var(--salmon); }
[data-tema="oscuro"] .comparar th, [data-tema="oscuro"] .comparar td { border-top-color: var(--line); }

/* Pasos en el celular: 2 × 2 para que los nombres no se salgan de la caja */
@media (max-width: 600px) {
  .tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabs button { min-height: 56px; padding: 10px 12px; }
  .tabs button b { font-size: 15px; }
}
.tabs button b { overflow-wrap: anywhere; }

/* Logo del encabezado y del menú: interruptor en la proporción del logo (≈ alto de mayúsculas) y centrado con las letras */
.top-logo { font-size: 25px; }
.marca .sw { font-size: .68em; margin-left: .22em; top: -.07em; }
.menu-marca { font-size: 25px; }
@media (max-width: 400px) { .top-logo { font-size: 22px; } }

/* Links del pie: sin subrayado; al pasar el cursor ganan contraste con un fondo suave */
.pie-cols a { margin-left: -10px; padding: 0 10px; border-radius: 10px; color: var(--muted); text-decoration: none; transition: color .2s, background .2s; }
.pie-cols a:hover, .pie-cols a:focus-visible { color: var(--ink); background: rgba(34,27,22,.07); text-decoration: none; }
.pie-fila a { text-decoration: none; border-radius: 6px; transition: color .2s; }
.pie-fila a:hover { color: var(--red); }
[data-tema="oscuro"] .pie-cols a { color: var(--muted); }
[data-tema="oscuro"] .pie-cols a:hover, [data-tema="oscuro"] .pie-cols a:focus-visible { color: #fff; background: rgba(241,232,218,.1); }
[data-tema="oscuro"] .pie-fila a:hover { color: var(--salmon); }

/* Tipografía: títulos en Fraunces (bordes suaves); el logo sigue en Young Serif */
body { font-variation-settings: 'SOFT' 100; }
.marca, .pie-marca, .pie-fila > span:first-child, .chat-av, .hero-chip > span { font-family: var(--logo); font-weight: 400; }
.mc-t { font-weight: 600; }

/* Logo (versión C): interruptor un poco más alto que las mayúsculas, centrado con las letras y sin brillo */
.marca .sw { font-size: .82em; margin-left: .2em; top: -.1em; }
.marca .sw, .pie-marca .sw { box-shadow: none !important; }
.pie-marca .sw { font-size: .82em; top: -.06em; }
@media (max-width: 370px) { .cierre-tit { font-size: 31px; } }

/* Mensual / Anual: dos mitades iguales y una píldora que se desliza */
.periodo { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0; min-width: 340px; padding: 5px; border-radius: 999px; background: var(--cream); box-shadow: inset 0 0 0 1px rgba(34,27,22,.08), 0 6px 16px -10px rgba(34,27,22,.3); }
.periodo::before { content: ''; position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: var(--ink); box-shadow: 0 4px 12px -4px rgba(34,27,22,.5); transition: transform .4s cubic-bezier(.3,1.3,.5,1); }
.periodo:has([data-periodo="anual"][aria-checked="true"])::before { transform: translateX(100%); }
.periodo button, .periodo button[aria-checked="true"] { position: relative; z-index: 1; justify-content: center; min-height: 50px; padding: 0 16px; background: transparent; color: var(--muted); transition: color .3s; }
.periodo button[aria-checked="true"] { color: var(--cream); }
.periodo button small { font-size: 11px; padding: 3px 8px; background: var(--pink); color: var(--pink-ink); transition: background .3s, color .3s; }
.periodo button[aria-checked="true"] small { background: var(--salmon); color: var(--ink); }
@media (max-width: 819px) { .periodo { min-width: 0; width: 100%; } }
[data-tema="oscuro"] .periodo { background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
[data-tema="oscuro"] .periodo::before { background: var(--fg); }
[data-tema="oscuro"] .periodo button, [data-tema="oscuro"] .periodo button[aria-checked="true"] { background: transparent; color: var(--muted); }
[data-tema="oscuro"] .periodo button[aria-checked="true"] { color: var(--bg); }
[data-tema="oscuro"] .periodo button small { background: #4A2418; color: #F6C3AE; }
[data-tema="oscuro"] .periodo button[aria-checked="true"] small { background: var(--red); color: var(--cream); }
.periodo button small { white-space: nowrap; }
@media (max-width: 819px) { .periodo button, .periodo button[aria-checked="true"] { padding: 0 8px; gap: 6px; } }

/* Encabezado en tablets y compus angostas: hamburguesa hasta 1023 px para que el menú no se parta */
.top-nav a { white-space: nowrap; }
@media (min-width: 820px) and (max-width: 1023px) {
  .top-nav, .top-in > .tema { display: none; }
  .menu-btn { display: inline-flex; }
  .top-cta { margin-left: auto; }
  .top-in { gap: 8px; }
}

/* Logo: centro óptico entre mayúsculas y minúsculas */
.marca .sw { top: .04em; }

/* Ejemplo en vivo debajo del celular: botón claro con punto que late */
.hero-pie { font-size: 14px; color: var(--muted); }
.vivo { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px 0 16px; border-radius: 999px; border: 1px solid rgba(34,27,22,.14); background: rgba(255,255,255,.55); color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 600; box-shadow: 0 6px 16px -12px rgba(34,27,22,.4); transition: background .2s, color .2s, border-color .2s, transform .12s; }
.vivo::before { content: none; }
.vivo:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.vivo:active { transform: scale(.97); }
.vivo svg { transition: transform .25s var(--ease); }
.vivo:hover svg { transform: translate(2px, -2px); }
.vivo-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #3FA35B; }
.vivo-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #3FA35B; opacity: 0; animation: latido 2s ease-out infinite; }
@keyframes latido { 0% { transform: scale(.5); opacity: .8; } 80%, 100% { transform: scale(1.6); opacity: 0; } }
[data-tema="oscuro"] .vivo { background: var(--card); border-color: var(--line); color: var(--fg); box-shadow: none; }
[data-tema="oscuro"] .vivo:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* WhatsApp flotante: texto siempre blanco (el modo oscuro pinta los links de salmón) */
.wa-flota, .wa-flota:hover, [data-tema="oscuro"] .wa-flota, [data-tema="oscuro"] .wa-flota:hover { color: #fff; }

/* ---------- Términos y condiciones ---------- */
.legal { max-width: 760px; margin: 0 auto; padding: clamp(32px, 6vw, 72px) var(--gutter) clamp(56px, 8vw, 96px); }
.legal-volver { margin: 0 0 20px; font-size: 15px; }
.legal-volver a { text-decoration: none; font-weight: 600; }
.legal h1 { margin: 0 0 8px; font: 600 clamp(32px, 5vw, 52px)/1.02 var(--serif); letter-spacing: -.025em; text-wrap: balance; }
.legal-fecha { margin: 0 0 32px; color: var(--muted); font-size: 15px; }
.legal-indice { margin: 0 0 40px; padding: 20px 24px; border-radius: 20px; background: var(--sand); }
.legal-indice ol { margin: 0; padding-left: 1.3em; columns: 2 220px; column-gap: 28px; font-size: 15px; line-height: 1.9; }
.legal-indice a { color: var(--ink); text-decoration: none; }
.legal-indice a:hover { color: var(--red); }
.legal section { scroll-margin-top: 90px; padding-top: 8px; margin-bottom: 32px; }
.legal h2 { margin: 0 0 12px; font: 600 clamp(22px, 2.6vw, 28px)/1.15 var(--serif); letter-spacing: -.015em; }
.legal p, .legal li { font-size: 17px; line-height: 1.6; color: var(--ink); text-wrap: pretty; }
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 12px; padding-left: 1.2em; display: flex; flex-direction: column; gap: 8px; }
.legal-pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; max-width: 760px; margin: 0 auto; padding: 24px var(--gutter) 40px; border-top: 1px solid rgba(34,27,22,.14); font-size: 14px; color: var(--muted); }
[data-tema="oscuro"] .legal p, [data-tema="oscuro"] .legal li, [data-tema="oscuro"] .legal-indice a { color: var(--fg); }
[data-tema="oscuro"] .legal-indice { background: var(--raised); }
[data-tema="oscuro"] .legal-pie { border-top-color: var(--line); }

/* ---------- Página 404 ---------- */
.p404 { min-height: 100dvh; display: grid; place-items: center; }
.p404-in { max-width: 640px; padding: 48px var(--gutter); text-align: center; }
.p404-marca { margin: 0 0 28px; display: inline-flex; align-items: center; gap: .2em; font: 400 clamp(40px, 9vw, 72px)/1 var(--logo); letter-spacing: -.035em; }
.p404-marca .sw { font-size: .82em; top: .04em; }
/* Interruptor fijo en OFF */
.sw-apagado, .sw-apagado > span { animation: none !important; }
.sw-apagado { background: #5B4F45; }
.sw-apagado .sw-on { opacity: 0; }
.sw-apagado .sw-off { opacity: 1; }
.sw-apagado > .sw-knob { left: .11em; }
.p404 h1 { margin: 0 0 14px; font: 600 clamp(30px, 5vw, 46px)/1.05 var(--serif); letter-spacing: -.02em; }
.p404-txt { margin: 0 auto 28px; max-width: 30em; font-size: 18px; line-height: 1.5; color: var(--muted); }
.p404-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 24px; }
.p404-ayuda { margin: 0; font-size: 15px; color: var(--muted); }

/* Botones legales del pie (arrepentimiento, baja y reclamos) */
.pie-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 16px 0 0; font-size: 13px; }
.pie-legal a { color: var(--muted); text-decoration: none; border-radius: 6px; transition: color .2s; }
.pie-legal a:hover { color: var(--ink); }
[data-tema="oscuro"] .pie-legal a { color: var(--muted); }
[data-tema="oscuro"] .pie-legal a:hover { color: var(--fg); }

/* ---------- En construcción ---------- */
.obra { min-height: 100dvh; display: grid; place-items: center; background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(178,58,28,.08), transparent 70%), var(--cream); }
.obra-in { max-width: 680px; padding: 56px var(--gutter); text-align: center; }
.obra-marca { margin: 0 0 32px; display: inline-flex; align-items: center; gap: .2em; font: 400 clamp(44px, 10vw, 84px)/1 var(--logo); letter-spacing: -.035em; }
.obra-marca .sw { font-size: .82em; top: .04em; box-shadow: none !important; }
.obra h1 { margin: 0 0 16px; font: 600 clamp(32px, 5.5vw, 52px)/1.04 var(--serif); letter-spacing: -.025em; text-wrap: balance; }
.obra-txt { margin: 0 auto 32px; max-width: 32em; font-size: clamp(17px, 1.8vw, 19px); line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.obra-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 40px; }
.obra-pie { margin: 0; font-size: 14px; color: var(--muted); }
.obra-pie a { color: inherit; font-weight: 600; text-decoration: none; }
.obra-pie a:hover { color: var(--red); }
[data-tema="oscuro"] .obra { background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(224,97,63,.12), transparent 70%), var(--bg); }
[data-tema="oscuro"] .obra-marca { color: var(--fg); }
[data-tema="oscuro"] .obra-pie a:hover { color: var(--salmon); }