/* Bien Pulida · estilos
   Identidad: petróleo #0F4C5C, arena #F5F1EA, coral #F2704E, tinta #10242B */
:root{
  --ink:#10242B; --ink-2:#1B3038; --petrol:#0F4C5C; --sand:#F5F1EA; --sand-2:#ECE5D9; --sand-3:#E2D9CA; --white:#FFFDF9;
  --coral:#F2704E; --coral-deep:#B8492A; --coral-soft:#FFB8A1; --on-coral:#10242B;
  --muted:#56676C; --line:rgba(16,36,43,.10); --line-2:rgba(16,36,43,.18);
  --display:'Bricolage Grotesque',system-ui,sans-serif; --body:'DM Sans',system-ui,sans-serif;
  --wrap:1200px; --gut:clamp(20px,4vw,40px);
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-io:cubic-bezier(.77,0,.175,1);
  --spark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.8 7 17 11.2 24 12 17 12.8 12.8 17 12 24 11.2 17 7 12.8 0 12 7 11.2 11.2 7 12 0Z'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{scrollbar-color:var(--sand-3) var(--sand); accent-color:var(--coral); scroll-padding-top:96px}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
html:not(.motion){scroll-behavior:smooth}
body{margin:0; background:var(--sand); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:clip}
::selection{background:var(--coral); color:var(--on-coral)}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
p{margin:0}
:focus-visible{outline:3px solid var(--coral); outline-offset:3px; border-radius:6px}
h1,h2,h3,h4{font-family:var(--display); margin:0; text-wrap:balance}
h2{font-size:clamp(2.2rem,4.6vw,3.6rem); font-weight:700; line-height:1; letter-spacing:-.035em; font-variation-settings:"opsz" 96; max-width:18ch}
h3{font-size:1.35rem; font-weight:700; letter-spacing:-.02em; line-height:1.15; font-variation-settings:"opsz" 30}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--gut)}
.band{padding:clamp(88px,11vw,150px) 0}
.center{text-align:center}
.center h2,.center .lead{margin-left:auto; margin-right:auto}
.lead{font-size:clamp(1.05rem,1.3vw,1.18rem); color:var(--muted); max-width:52ch; margin-top:18px}
.label{display:inline-flex; align-items:center; gap:8px; margin-bottom:16px; font-size:.86rem; font-weight:700; color:var(--coral-deep)}
.label::before{content:""; width:14px; height:14px; background:var(--coral); -webkit-mask:var(--spark) center/contain no-repeat; mask:var(--spark) center/contain no-repeat}
.price,.extras td:last-child,.counter{font-variant-numeric:tabular-nums}

/* ---------- Botones ---------- */
.btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 24px; border-radius:14px; font-family:var(--body); font-weight:700; font-size:1rem; text-decoration:none; border:0; cursor:pointer; overflow:hidden; isolation:isolate; transition:transform .16s var(--ease-out), background-color .2s ease, color .2s ease, box-shadow .25s ease}
.btn:active{transform:scale(.97)}
.btn svg{width:18px; height:18px; flex:none; transition:transform .35s var(--ease-out)}
.btn-white{background:var(--white); color:var(--ink); box-shadow:0 1px 2px rgba(16,36,43,.12)}
.btn-ink{background:var(--ink); color:var(--sand)}
.btn-coral{background:var(--coral); color:var(--on-coral)}
.btn-line{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn-coral::after,.btn-ink::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%); transform:translateX(-120%)}
@media (hover:hover) and (pointer:fine){
  .btn:hover svg.arrow{transform:translateX(3px)}
  .btn-coral:hover::after,.btn-ink:hover::after{transform:translateX(120%); transition:transform .8s var(--ease-out)}
  .btn-white:hover{background:#fff; box-shadow:0 8px 24px -10px rgba(16,36,43,.35)}
  .btn-line:hover{background:var(--ink); color:var(--sand); box-shadow:none}
  .btn-ink:hover{background:var(--petrol)}
}

/* ---------- Cabecera flotante en cápsula ---------- */
.top{position:fixed; top:14px; left:0; right:0; z-index:50; padding:0 var(--gut); transition:transform .5s var(--ease-out)}
.top.hide{transform:translateY(-130%)}
.pill{max-width:820px; margin:0 auto; display:flex; align-items:center; gap:20px; padding:7px 7px 7px 18px; border-radius:16px; background:rgba(16,36,43,.8); color:var(--sand); backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3); box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 10px 30px -12px rgba(0,0,0,.45)}
.logo{display:inline-flex; align-items:flex-start; gap:3px; font-family:var(--display); font-weight:700; font-size:1.3rem; letter-spacing:-.04em; line-height:1; text-decoration:none; color:inherit; font-variation-settings:"opsz" 40}
.logo svg{width:9px; height:9px; transition:transform .7s var(--ease-out)}
@media (hover:hover){.logo:hover svg{transform:rotate(180deg) scale(1.25)}}
.menu{display:flex; gap:26px; margin:0 auto; font-size:.95rem}
.menu a{text-decoration:none; opacity:.8; transition:opacity .2s ease}
.menu a:hover,.menu a[aria-current="true"]{opacity:1}
.menu a[aria-current="true"]{text-decoration:underline; text-decoration-color:var(--coral); text-underline-offset:8px; text-decoration-thickness:2px}
.pill .btn{min-height:40px; padding:0 16px; border-radius:11px; font-size:.92rem}
.burger{display:none; width:40px; height:40px; border-radius:11px; border:0; background:rgba(255,255,255,.1); color:var(--sand); cursor:pointer; align-items:center; justify-content:center}
.mnav{display:none}
@media (max-width:860px){
  .menu,.pill .btn{display:none}
  .burger{display:inline-flex; margin-left:auto}
  .mnav{display:block; position:fixed; left:var(--gut); right:var(--gut); top:72px; z-index:49; padding:10px 18px 18px; border-radius:16px; background:var(--ink); color:var(--sand); clip-path:inset(0 0 100% 0 round 16px); visibility:hidden; transition:clip-path .45s var(--ease-io), visibility 0s .45s}
  .mnav.open{clip-path:inset(0 0 0 0 round 16px); visibility:visible; transition:clip-path .45s var(--ease-io)}
  .mnav a:not(.btn){display:block; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.1); font-family:var(--display); font-size:1.6rem; font-weight:700; letter-spacing:-.03em; text-decoration:none}
  .mnav .btn{width:100%; margin-top:16px}
}

/* ---------- Portada: degradado tinta → coral → arena ---------- */
.hero{position:relative; padding:clamp(130px,15vw,170px) 0 0; color:var(--sand); background:linear-gradient(180deg,#10242B 0%,#1C272A 16%,#43291F 33%,#A9472B 50%,#F2704E 62%,#F8AE94 76%,#F5F1EA 90%)}
.hero .wrap{text-align:center}
.announce{display:inline-flex; align-items:center; gap:10px; padding:5px 14px 5px 5px; border-radius:99px; background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); font-size:.88rem; text-decoration:none; transition:background-color .2s ease}
.announce:hover{background:rgba(255,255,255,.14)}
.announce i{display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--coral)}
.announce i svg{width:11px; height:11px}
.announce svg.arrow{width:14px; height:14px; opacity:.7}
.hero h1{margin:28px auto 0; max-width:15ch; font-size:clamp(2.6rem,6.4vw,5.3rem); font-weight:700; line-height:.98; letter-spacing:-.045em; font-variation-settings:"opsz" 96}
.hero h1 em{font-style:normal; color:var(--coral-soft)}
.hero .lead{margin:24px auto 0; color:rgba(245,241,234,.88); max-width:50ch}
.hero-cta{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:34px}
.phone-pill{display:inline-flex; align-items:center; gap:12px; min-height:52px; padding:0 7px 0 18px; border-radius:14px; background:rgba(16,36,43,.88); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace; font-size:.98rem; color:var(--sand)}
.phone-pill a{color:inherit; text-decoration:none}
.phone-pill a span{opacity:.55; margin-right:4px}
.phone-pill button{display:grid; place-items:center; width:38px; height:38px; border:0; border-radius:10px; background:rgba(255,255,255,.08); color:var(--sand); cursor:pointer; transition:background-color .2s ease}
.phone-pill button:hover{background:rgba(255,255,255,.16)}
.phone-pill button svg{width:16px; height:16px}
.phone-pill .ok{display:none}
.phone-pill.copied .ok{display:block}.phone-pill.copied .cp{display:none}
.tabs{display:inline-flex; gap:4px; margin-top:clamp(48px,6vw,72px); padding:4px; border-radius:14px; background:rgba(255,253,249,.35); box-shadow:inset 0 0 0 1px rgba(255,255,255,.45); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.tabs button{position:relative; padding:9px 16px; border:0; border-radius:10px; background:transparent; color:var(--ink); font:500 .95rem var(--body); cursor:pointer; transition:background-color .25s ease, box-shadow .25s ease}
.tabs button[aria-selected="true"]{background:var(--white); box-shadow:0 1px 3px rgba(16,36,43,.18)}
.tabs button .bar{position:absolute; left:12px; right:12px; bottom:4px; height:2px; border-radius:2px; background:var(--coral); transform:scaleX(0); transform-origin:left}
html.motion .tabs:not(.stopped) button[aria-selected="true"] .bar{animation:carga 6s linear forwards}
@keyframes carga{to{transform:scaleX(1)}}
@media (max-width:560px){.tabs{display:grid; grid-template-columns:1fr 1fr; width:100%}.tabs button{padding:9px 6px; font-size:.88rem}}
.stage{perspective:1600px; margin-top:22px; padding-bottom:clamp(36px,5vw,64px)}
.device{position:relative; perspective:1600px; max-width:1080px; margin:0 auto; padding:clamp(6px,1vw,10px); border-radius:clamp(16px,2vw,26px); background:var(--white); box-shadow:0 0 0 1px rgba(16,36,43,.06), 0 50px 100px -40px rgba(16,36,43,.55); transform-origin:50% 0}
.screens{position:relative; transform-origin:50% 0; aspect-ratio:16/9.6; border-radius:clamp(11px,1.5vw,18px); overflow:hidden; background:var(--ink); container-type:inline-size}
.mock{position:absolute; inset:0; opacity:0; visibility:hidden; transform:scale(1.03); filter:blur(8px); transition:opacity .6s var(--ease-out), transform .8s var(--ease-out), filter .6s var(--ease-out), visibility 0s .6s; text-align:left; overflow:hidden}
.mock.on{opacity:1; visibility:visible; transform:none; filter:none; transition:opacity .6s var(--ease-out), transform .8s var(--ease-out), filter .6s var(--ease-out)}
.mock-note{margin-top:14px; text-align:center; font-size:.85rem; color:var(--muted)}
@media (max-width:640px){.screens{aspect-ratio:4/5}}

/* Webs de ejemplo (medidas en cqw para que escalen con la pantalla) */
.mock .mnav-row{display:flex; align-items:center; justify-content:space-between; gap:2cqw; padding:2.4cqw 3.4cqw}
.mock .ml{display:flex; gap:2.4cqw; font-size:1.25cqw}
.mock .mbtn{display:inline-flex; align-items:center; gap:.8cqw; padding:1cqw 1.8cqw; border-radius:.9cqw; font-weight:700; font-size:1.25cqw; white-space:nowrap}
/* Vidal electricistas */
.m-vidal{background:#0D0F12; color:#F2F2EE; font-family:var(--display)}
.m-vidal .brand{font-weight:800; font-size:2cqw; letter-spacing:-.03em; display:flex; align-items:center; gap:.6cqw}
.m-vidal .brand i{width:1.6cqw; height:1.6cqw; background:#FFD43B; clip-path:polygon(55% 0,10% 58%,45% 58%,35% 100%,90% 40%,55% 40%)}
.m-vidal .ml{color:#9AA0A6; font-family:var(--body)}
.m-vidal .mbtn{background:#FFD43B; color:#0D0F12; font-family:var(--body)}
.m-vidal .grid{display:grid; grid-template-columns:1.5fr 1fr; gap:3cqw; padding:2cqw 3.4cqw}
.m-vidal h4{font-size:7.2cqw; line-height:.86; font-weight:800; letter-spacing:-.04em; text-transform:uppercase; font-variation-settings:"wdth" 75}
.m-vidal h4 span{color:#FFD43B}
.m-vidal p{margin-top:2cqw; font-family:var(--body); font-size:1.45cqw; color:#B9BEC4; max-width:38ch}
.m-vidal .row{display:flex; gap:1cqw; margin-top:2.4cqw}
.m-vidal .ghost{border:.15cqw solid #3A3F45; padding:1cqw 1.8cqw; border-radius:.9cqw; font:700 1.25cqw var(--body)}
.m-vidal .side{display:grid; gap:1cqw; align-content:start}
.m-vidal .card{padding:1.6cqw 1.8cqw; border-radius:1.2cqw; background:#16191D; border:.12cqw solid #24282D; font-family:var(--body)}
.m-vidal .card b{display:block; font-size:1.5cqw}
.m-vidal .card small{font-size:1.15cqw; color:#8E949A}
.m-vidal .card.live b::before{content:""; display:inline-block; width:.9cqw; height:.9cqw; margin-right:.8cqw; border-radius:50%; background:#3DDC84; box-shadow:0 0 0 .5cqw rgba(61,220,132,.18)}
.m-vidal .tick{position:absolute; left:0; right:0; bottom:0; display:flex; gap:4cqw; padding:1.6cqw 3.4cqw; border-top:.12cqw solid #24282D; font:700 1.2cqw var(--body); color:#9AA0A6; white-space:nowrap}
.m-vidal .tick span::before{content:""; display:inline-block; width:1cqw; height:1cqw; margin-right:.8cqw; background:#FFD43B; clip-path:polygon(55% 0,10% 58%,45% 58%,35% 100%,90% 40%,55% 40%)}
/* Clínica dental Mar */
.m-mar{background:#EEF5F1; color:#173A33; font-family:var(--body)}
.m-mar .brand{font-family:Georgia,'Times New Roman',serif; font-size:2cqw; font-style:italic}
.m-mar .ml{color:#4F6F67}
.m-mar .mbtn{background:#173A33; color:#EEF5F1}
.m-mar .grid{position:relative; display:grid; grid-template-columns:1.1fr 1fr; gap:4cqw; align-items:center; padding:2.4cqw 3.4cqw}
.m-mar h4{font-family:Georgia,'Times New Roman',serif; font-weight:400; font-size:6cqw; line-height:1; letter-spacing:-.02em}
.m-mar h4 em{color:#2F8F77}
.m-mar p{margin-top:2cqw; font-size:1.45cqw; color:#4F6F67; max-width:34ch}
.m-mar .book{padding:2.4cqw; border-radius:2cqw; background:#fff; box-shadow:0 2cqw 4cqw -2cqw rgba(23,58,51,.25)}
.m-mar .book b{font-size:1.6cqw}
.m-mar .days{display:grid; grid-template-columns:repeat(5,1fr); gap:.8cqw; margin-top:1.6cqw}
.m-mar .days span{padding:1cqw 0; border-radius:1cqw; background:#EEF5F1; text-align:center; font-size:1.2cqw; font-weight:700}
.m-mar .days span.sel{background:#2F8F77; color:#fff}
.m-mar .slots{display:grid; grid-template-columns:repeat(3,1fr); gap:.8cqw; margin-top:1cqw}
.m-mar .slots span{padding:1cqw 0; border-radius:1cqw; border:.12cqw solid #D3E4DD; text-align:center; font-size:1.2cqw; transition:background-color .4s ease, color .4s ease, border-color .4s ease}
.m-mar .slots span.sel{background:#173A33; color:#fff; border-color:#173A33}
.m-mar .confirm{margin-top:1.4cqw; padding:1.2cqw; border-radius:1cqw; background:#2F8F77; color:#fff; text-align:center; font-weight:700; font-size:1.3cqw}
.m-mar .blob{position:absolute; right:-8cqw; top:-10cqw; width:34cqw; height:34cqw; border-radius:50%; background:radial-gradient(circle at 30% 30%,#CFE8DE,transparent 70%)}
/* Restaurante Can Toni */
.m-toni{background:#F1E4CF; color:#3B1F14; font-family:var(--body)}
.m-toni .brand{font-family:Georgia,serif; font-weight:700; font-size:2.1cqw; letter-spacing:.04em; text-transform:uppercase}
.m-toni .ml{color:#7A5242}
.m-toni .mbtn{background:#B4492B; color:#FBEFDC}
.m-toni .grid{display:grid; grid-template-columns:1.25fr 1fr; gap:4cqw; padding:1.6cqw 3.4cqw}
.m-toni h4{font-family:Georgia,serif; font-style:italic; font-weight:400; font-size:8.6cqw; line-height:.9; letter-spacing:-.03em; color:#B4492B}
.m-toni p{margin-top:2cqw; font-size:1.5cqw; color:#6A4636; max-width:34ch}
.m-toni .menu-card{padding:2.4cqw; border-radius:.6cqw; background:#FBF4E8; box-shadow:0 1.6cqw 3cqw -1.6cqw rgba(59,31,20,.35); transform:rotate(2deg)}
.m-toni .menu-card b{display:block; font-family:Georgia,serif; font-style:italic; font-size:2cqw; color:#B4492B; margin-bottom:1cqw}
.m-toni .menu-card ul{margin:0; padding:0}
.m-toni .menu-card li{display:flex; gap:1cqw; padding:.9cqw 0; font-size:1.35cqw; border-bottom:.12cqw dashed #D9C3A5; list-style:none}
.m-toni .menu-card small{display:block; margin-top:1.2cqw; font-size:1.1cqw; color:#7A5242}
.m-toni .sun{position:absolute; left:3.4cqw; bottom:3cqw; display:flex; gap:1.4cqw; font-size:1.2cqw; font-weight:700; color:#7A5242}
/* Academia Nota Alta */
.m-nota{background:#FFFCF2; color:#1D1640; font-family:var(--body)}
.m-nota .brand{font-family:var(--display); font-weight:800; font-size:2cqw; letter-spacing:-.03em}
.m-nota .brand span{display:inline-block; padding:0 .6cqw; border-radius:.6cqw; background:#FFD84D; margin-left:.4cqw}
.m-nota .ml{color:#5D578A}
.m-nota .mbtn{background:#5B3DF5; color:#fff}
.m-nota .grid{display:grid; grid-template-columns:1.3fr 1fr; gap:3cqw; padding:2cqw 3.4cqw}
.m-nota h4{font-family:var(--display); font-weight:800; font-size:6.4cqw; line-height:.95; letter-spacing:-.045em}
.m-nota h4 mark{background:#FFD84D; color:inherit; padding:0 .8cqw; border-radius:1cqw}
.m-nota p{margin-top:2cqw; font-size:1.45cqw; color:#5D578A; max-width:36ch}
.m-nota .chips{display:flex; flex-wrap:wrap; gap:.8cqw; margin-top:2.2cqw}
.m-nota .chips span{padding:.8cqw 1.4cqw; border-radius:99px; border:.14cqw solid #DCD6F7; font-size:1.2cqw; font-weight:700}
.m-nota .sched{position:relative; padding:2cqw; border-radius:2cqw; background:#5B3DF5; color:#fff}
.m-nota .sched b{font-size:1.5cqw}
.m-nota .sched ul{margin:1cqw 0 0; padding:0}
.m-nota .sched li{display:flex; justify-content:space-between; padding:1cqw 0; border-bottom:.12cqw solid rgba(255,255,255,.2); font-size:1.25cqw; list-style:none}
.m-nota .sticker{position:absolute; right:-1.5cqw; top:-2.6cqw; padding:1cqw 1.6cqw; border-radius:1cqw; background:#FFD84D; color:#1D1640; font-weight:800; font-size:1.25cqw; transform:rotate(8deg)}
@media (max-width:640px){
  .mock .grid{grid-template-columns:1fr !important; padding:2cqw 5cqw !important}
  .mock .ml{display:none}
  .mock .mbtn{font-size:2.8cqw; padding:1.8cqw 3cqw; border-radius:1.8cqw}
  .mock .mnav-row{padding:4.5cqw 5cqw}
  .m-vidal .brand,.m-mar .brand,.m-toni .brand,.m-nota .brand{font-size:4.4cqw}
  .m-vidal h4{font-size:14cqw; margin-top:4cqw}.m-mar h4{font-size:11cqw; margin-top:4cqw}.m-toni h4{font-size:15cqw; margin-top:4cqw}.m-nota h4{font-size:11.5cqw; margin-top:4cqw}
  .mock p{font-size:3.6cqw !important; margin-top:4cqw !important}
  .m-vidal .side,.m-toni .menu-card,.m-nota .sched{display:none}
  .m-mar .book{padding:4cqw; border-radius:4cqw; margin-top:2cqw}.m-mar .book b{font-size:3.4cqw}.m-mar .days span,.m-mar .slots span{font-size:2.8cqw; padding:2cqw 0; border-radius:2cqw}.m-mar .confirm{font-size:3cqw; padding:2.4cqw; border-radius:2cqw}.m-mar .days,.m-mar .slots{gap:1.6cqw; margin-top:2.4cqw}
  .m-vidal .row{margin-top:5cqw; gap:2cqw}.m-vidal .ghost{font-size:2.8cqw; padding:1.8cqw 3cqw; border-radius:1.8cqw}
  .m-vidal .tick{font-size:2.6cqw; padding:3.4cqw 5cqw; flex-wrap:wrap; gap:1cqw 4cqw}.m-vidal .tick span::before{width:2cqw; height:2cqw}
  .m-nota .chips{margin-top:4cqw; gap:1.6cqw}.m-nota .chips span{font-size:3cqw; padding:1.6cqw 3cqw}
  .m-toni .sun{font-size:3cqw; left:5cqw; bottom:5cqw; gap:3cqw}
}

/* ---------- Para quién trabajo ---------- */
.for{padding:clamp(48px,6vw,80px) 0 0}
.for p.small{font-size:.9rem; color:var(--muted); text-align:center}
.biz{display:grid; grid-template-columns:repeat(6,1fr); gap:1px; margin-top:18px; border-radius:16px; overflow:hidden; background:var(--line); box-shadow:0 0 0 1px var(--line)}
.biz div{padding:18px; background:var(--white)}
.biz svg{width:22px; height:22px; color:var(--coral-deep)}
.biz b{display:block; margin-top:14px; font-size:.98rem}
.biz small{display:block; font-size:.82rem; color:var(--muted); line-height:1.4; margin-top:4px}
@media (max-width:900px){.biz{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.biz{grid-template-columns:repeat(2,1fr)}}

/* ---------- Tarjetas comunes ---------- */
.cards4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:clamp(40px,5vw,64px)}
.cards4 article,.vows article{padding:26px; border-radius:18px; background:var(--white); box-shadow:0 0 0 1px var(--line)}
.cards4 svg{width:24px; height:24px; color:var(--coral-deep)}
.cards4 h3,.vows h3{margin-top:16px; font-size:1.18rem}
.cards4 p,.vows p{margin-top:8px; color:var(--muted); font-size:.96rem}
.closing{margin:28px auto 0; max-width:52ch; text-align:center; font-size:1.12rem; font-weight:500}
@media (max-width:980px){.cards4{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cards4{grid-template-columns:1fr}}

/* ---------- La rueda de detalles ---------- */
.wheel-intro{padding-top:clamp(88px,11vw,140px)}
.wheel{position:relative; height:100svh; min-height:560px; display:grid; align-items:center}
.drum{position:relative; height:min(66vh,580px); perspective:1100px; overflow:hidden; -webkit-mask:linear-gradient(transparent,#000 20%,#000 80%,transparent); mask:linear-gradient(transparent,#000 20%,#000 80%,transparent)}
.drum-inner{position:absolute; inset:0; margin:0; padding:0; list-style:none; transform-style:preserve-3d}
.drum .it{position:absolute; left:0; right:0; top:50%; height:1.08em; margin-top:-.54em; text-align:center; font-family:var(--display); font-weight:700; font-size:clamp(1.55rem,6.4vw,4.4rem); line-height:1.08; letter-spacing:-.035em; color:#B3A897; backface-visibility:hidden; white-space:nowrap; font-variation-settings:"opsz" 96; will-change:transform,opacity}
.drum .it.act{color:var(--coral)}
.rule{position:absolute; left:var(--gut); right:var(--gut); top:50%; height:calc(clamp(1.55rem,6.4vw,4.4rem) * 1.3); transform:translateY(-50%); border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); pointer-events:none}
.rule::before,.rule::after{content:""; position:absolute; top:50%; width:0; height:0; border:6px solid transparent; margin-top:-6px}
.rule::before{left:-2px; border-left-color:var(--coral)}
.rule::after{right:-2px; border-right-color:var(--coral)}
.wheel-meta{position:absolute; left:var(--gut); right:var(--gut); bottom:clamp(24px,5vh,48px); display:flex; justify-content:space-between; align-items:flex-end; gap:24px; font-size:.95rem}
.counter b{color:var(--coral-deep)}
.cap{font-weight:500; text-align:right; max-width:30ch}
.wheel-out{padding-bottom:clamp(88px,11vw,140px)}
.picks{display:flex; flex-wrap:wrap; justify-content:center; gap:10px}
.picks span{display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:12px; background:var(--white); box-shadow:0 0 0 1px var(--line); font-weight:700; font-size:.95rem}
.picks small{color:var(--coral-deep); font-variant-numeric:tabular-nums}
.wheel-out h3{font-size:clamp(1.5rem,2.6vw,2.1rem); margin-top:28px; letter-spacing:-.03em}
.wheel-out .btn{margin-top:22px}
/* Sin movimiento: lista sencilla */
html:not(.motion) .wheel{height:auto; min-height:0; padding:24px 0}
html:not(.motion) .drum{height:auto; perspective:none; -webkit-mask:none; mask:none}
html:not(.motion) .drum-inner{position:static}
html:not(.motion) .drum .it{position:static; height:auto; margin:0; font-size:clamp(1.4rem,3.4vw,2.4rem); color:var(--ink)}
html:not(.motion) .rule,html:not(.motion) .wheel-meta{display:none}

/* ---------- Qué incluye: tarjetas con mini pantallas ---------- */
.feats{display:grid; gap:20px; margin-top:clamp(40px,5vw,64px)}
.feat{display:grid; grid-template-columns:1.05fr 1fr; border-radius:22px; background:var(--white); box-shadow:0 0 0 1px var(--line); overflow:hidden}
.feat:nth-child(even){grid-template-columns:1fr 1.05fr}
.feat:nth-child(even) .viz{order:2}
.viz{position:relative; min-height:380px; display:grid; place-items:center; padding:clamp(24px,4vw,48px); background:linear-gradient(160deg,#FFD9C9 0%,#FBE9DF 45%,#F7EFE6 100%)}
.viz.dark{background:radial-gradient(120% 90% at 50% 120%,#E0623F 0%,#5A2A1E 40%,#1A1412 75%)}
.viz::before,.viz::after{content:""; position:absolute; width:14px; height:14px; border-color:rgba(16,36,43,.25); border-style:solid}
.viz::before{left:16px; top:16px; border-width:1px 0 0 1px}
.viz::after{right:16px; bottom:16px; border-width:0 1px 1px 0}
.viz.dark::before,.viz.dark::after{border-color:rgba(255,255,255,.3)}
.ui{width:min(100%,380px); padding:18px; border-radius:16px; background:#fff; box-shadow:0 30px 60px -30px rgba(16,36,43,.5); font-size:.9rem}
.ui .uh{display:flex; justify-content:space-between; font-size:.78rem; color:var(--muted); font-family:ui-monospace,Menlo,monospace}
.ui .sub{margin-top:12px; font-size:.8rem; color:var(--muted)}
.txt{padding:clamp(28px,4vw,56px); align-self:center}
.txt .label{margin-bottom:10px}
.txt h3{font-size:clamp(1.6rem,2.6vw,2.2rem); line-height:1.05; letter-spacing:-.03em}
.txt p{margin-top:14px; color:var(--muted); max-width:42ch}
.txt code{display:inline-block; margin-top:18px; padding:5px 10px; border-radius:8px; background:var(--sand); font-size:.8rem; color:var(--muted)}
.ui-write .area{min-height:120px; margin-top:12px; padding:12px; border-radius:10px; background:var(--sand); font-family:var(--display); font-weight:700; font-size:1.25rem; line-height:1.2; letter-spacing:-.02em}
.ui-write .caret{display:inline-block; width:2px; height:1.1em; margin-left:2px; vertical-align:-3px; background:var(--coral); animation:parpadeo 1s steps(1) infinite}
@keyframes parpadeo{50%{opacity:0}}
.ui-g .q{display:flex; align-items:center; gap:10px; margin-top:12px; padding:10px 14px; border-radius:99px; box-shadow:0 0 0 1px var(--line-2); min-height:42px}
.ui-g .q svg{width:16px; height:16px; color:var(--muted); flex:none}
.ui-g .res{margin-top:16px}
html.motion .ui-g .res{opacity:0; transform:translateY(10px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out)}
html.motion .ui-g .res.show{opacity:1; transform:none}
.ui-g .url{font-size:.78rem; color:#4D5156}
.ui-g .t{margin-top:2px; font-size:1.05rem; color:#1A0DAB}
.ui-g .d{margin-top:4px; font-size:.82rem; color:#4D5156; line-height:1.45}
.ui-g .st{margin-top:8px; font-size:.78rem; color:#4D5156}
.ui-wa{background:#ECE5DD}
.ui-wa .uh{color:#54656F}
.ui-wa .msgs{display:grid; gap:8px; margin-top:12px; min-height:150px; align-content:end}
.ui-wa .m{max-width:80%; padding:8px 12px; border-radius:10px; font-size:.88rem; line-height:1.35}
html.motion .ui-wa .m{opacity:0; transform:translateY(8px) scale(.98); transition:opacity .45s var(--ease-out), transform .45s var(--ease-out)}
html.motion .ui-wa .m.show{opacity:1; transform:none}
.ui-wa .in{background:#fff; justify-self:start; border-top-left-radius:2px}
.ui-wa .out{background:#D9FDD3; justify-self:end; border-top-right-radius:2px}
.ui-wa .m small{display:block; text-align:right; font-size:.68rem; color:#667781}
.ui-edit{background:#1D2B30; color:var(--sand)}
.ui-edit .uh{color:#9FB2B6}
.ui-edit .fld{margin-top:12px; padding:10px 12px; border-radius:10px; background:#10242B; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); transition:box-shadow .3s ease}
.ui-edit .fld small{display:block; font-size:.72rem; color:#9FB2B6}
.ui-edit .fld span{font-weight:700}
.ui-edit .fld.focus{box-shadow:inset 0 0 0 1.5px var(--coral)}
.ui-edit .save{display:flex; justify-content:space-between; align-items:center; margin-top:14px}
.ui-edit .save b{padding:8px 14px; border-radius:9px; background:var(--coral); color:var(--on-coral); font-size:.85rem; transition:transform .15s var(--ease-out)}
.ui-edit .save b.press{transform:scale(.94)}
.ui-edit .save i{font-style:normal; font-size:.82rem; color:#7FD8A8; opacity:0; transition:opacity .4s ease}
.ui-edit .save i.show{opacity:1}
.more{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:20px}
.more div{padding:26px; border-radius:18px; background:var(--white); box-shadow:0 0 0 1px var(--line)}
.more svg{width:22px; height:22px; color:var(--coral-deep)}
.more b{display:block; margin-top:14px; font-family:var(--display); font-size:1.2rem; letter-spacing:-.02em}
.more p{margin-top:6px; color:var(--muted); font-size:.95rem}
.note{margin-top:20px; padding:18px 22px; border-radius:14px; background:var(--sand-2); font-size:.98rem}
@media (max-width:860px){.feat,.feat:nth-child(even){grid-template-columns:1fr}.feat:nth-child(even) .viz{order:0}.viz{min-height:300px}.more{grid-template-columns:1fr}}

/* ---------- De sin pulir a bien pulida ---------- */
.tf-pin{min-height:100svh; display:grid; align-items:center; padding:96px 0 48px}
.tf-grid{width:100%; display:grid; grid-template-columns:300px minmax(0,1fr); gap:clamp(28px,5vw,64px); align-items:center}
.tf-h{font-size:clamp(2rem,3.6vw,2.8rem)}
.tf-steps{list-style:none; margin:28px 0 0; padding:0; display:grid; gap:4px}
.tf-steps li{position:relative; padding:8px 0 8px 18px; color:var(--muted); cursor:pointer}
.tf-steps li::before{content:""; position:absolute; left:0; top:10px; bottom:10px; width:2px; border-radius:2px; background:var(--line-2); transition:background-color .3s ease}
.tf-steps li b{display:block; font-weight:500; transition:color .3s ease}
.tf-steps li span{display:block; max-height:0; overflow:hidden; font-size:.88rem; line-height:1.45; opacity:0; transition:max-height .5s var(--ease-out), opacity .4s ease, margin .4s ease}
.tf-steps li.act::before{background:var(--coral)}
.tf-steps li.act b{color:var(--ink); font-weight:700}
.tf-steps li.act span{max-height:6em; opacity:1; margin-top:4px}
.tf-steps li.done::before{background:var(--coral-soft)}
.tf-view{position:relative}
.tf-frame{border-radius:20px; padding:8px; background:var(--white); box-shadow:0 0 0 1px var(--line), 0 40px 80px -40px rgba(16,36,43,.45)}
.tf{position:relative; aspect-ratio:16/10; border-radius:14px; overflow:hidden; container-type:inline-size; transition:background .7s var(--ease-out), color .5s ease}
.step-tag{position:absolute; right:14px; bottom:-14px; padding:6px 12px; border-radius:99px; background:var(--ink); color:var(--sand); font-size:.8rem; font-weight:700}
.tf .tn{display:flex; align-items:center; justify-content:space-between; gap:2cqw; padding:2.6cqw 3.6cqw}
.tf .tlogo{font-weight:800; font-size:2.1cqw; display:flex; align-items:center; gap:.7cqw}
.tf .tlogo::before{content:""; width:1.3cqw; height:1.3cqw; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:currentColor; transition:background .5s ease}
.tf .tlinks{display:flex; gap:2.4cqw; font-size:1.3cqw}
.tf .tcta{padding:1cqw 1.8cqw; border-radius:99px; font-size:1.25cqw; font-weight:700; white-space:nowrap; transition:all .5s ease}
.tf .th{display:grid; grid-template-columns:1fr; gap:3cqw; padding:2cqw 3.6cqw}
.tf .tbadge{display:none; align-items:center; gap:.8cqw; padding:.6cqw 1.4cqw; border-radius:99px; border:.12cqw solid #DDE2EA; font-size:1.15cqw; font-weight:700; color:#15202B; background:#fff}
.tf .tbadge::before{content:""; width:.9cqw; height:.9cqw; border-radius:50%; background:#1FA971; box-shadow:0 0 0 .5cqw rgba(31,169,113,.15)}
.tf .tt{margin:1.6cqw 0 1cqw; font-size:4.4cqw; line-height:1.05}
.tf .tt em{font-style:normal}
.tf .tx{font-size:1.5cqw; line-height:1.45; max-width:44ch}
.tf .new{display:none}
.tf .tb{display:flex; gap:1cqw; margin-top:2.2cqw}
.tf .tb > span{padding:1.1cqw 2cqw; border-radius:99px; font-weight:700; font-size:1.3cqw; transition:all .6s var(--ease-out)}
.tf .tvis{display:none; position:relative; aspect-ratio:1/1.05; border-radius:2cqw; background:linear-gradient(160deg,#DCE3FF,#F3F5FF 60%,#E4EAFF)}
.tf .tvis svg{position:absolute; left:24%; top:18%; width:52%; height:64%}
.tf .tcard{position:absolute; padding:1cqw 1.4cqw; border-radius:1.2cqw; background:#fff; box-shadow:0 1cqw 2.4cqw rgba(21,32,43,.16); font-weight:700; font-size:1.15cqw; line-height:1.25; white-space:nowrap; color:#15202B}
.tf .tcard small{display:block; font-weight:400; color:#55606B}
.tf .tcard.c1{top:8%; right:-6%}.tf .tcard.c2{bottom:10%; left:-12%}
.tf .tcard .stars{color:#E0A63B; letter-spacing:.1em}
.tf .tf3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4cqw; padding:0 3.6cqw; margin-top:2.6cqw}
.tf .tf3 > span{padding:1.6cqw; border-radius:1.4cqw; font-size:1.3cqw; font-weight:700; text-align:center; transition:all .6s var(--ease-out)}
.tf-anim{animation:pulido .55s var(--ease-out)}
@keyframes pulido{from{opacity:.4; filter:blur(4px); transform:scale(.985)}}
/* paso 1: la de siempre */
.tf[data-step="1"]{background:linear-gradient(135deg,#7B5CFA,#E2569B); color:#fff; font-family:'Times New Roman',Times,serif}
.tf[data-step="1"] .tcta{background:linear-gradient(90deg,#FF7AC6,#FFB86B); color:#fff}
.tf[data-step="1"] .th{text-align:center}
.tf[data-step="1"] .tt{font-size:4.6cqw; font-weight:700; text-shadow:0 .3cqw 0 rgba(0,0,0,.2)}
.tf[data-step="1"] .tx{margin:0 auto}
.tf[data-step="1"] .tb{justify-content:center}
.tf[data-step="1"] .tb > span:first-child{background:linear-gradient(90deg,#FF7AC6,#FFB86B)}
.tf[data-step="1"] .tb > span:last-child{border:.2cqw solid #fff}
.tf[data-step="1"] .tf3 > span{background:rgba(255,255,255,.18); border:.12cqw solid rgba(255,255,255,.35)}
/* paso 2: una paleta */
.tf[data-step="2"]{background:#F7F8FA; color:#15202B; font-family:var(--body)}
.tf[data-step="2"] .tlinks{color:#55606B}
.tf[data-step="2"] .tlogo::before{background:#2F4BD8}
.tf[data-step="2"] .tcta{background:#15202B; color:#fff}
.tf[data-step="2"] .th{text-align:center}
.tf[data-step="2"] .tt{font-weight:700}
.tf[data-step="2"] .tx{margin:0 auto; color:#55606B}
.tf[data-step="2"] .tb{justify-content:center}
.tf[data-step="2"] .tb > span:first-child{background:#2F4BD8; color:#fff}
.tf[data-step="2"] .tb > span:last-child{border:.15cqw solid #15202B}
.tf[data-step="2"] .tf3 > span{background:#fff; border:.12cqw solid #E3E7EE}
/* pasos 3 y 4: textos claros y detalles */
.tf[data-step="3"],.tf[data-step="4"]{background:#fff; color:#15202B; font-family:var(--body)}
.tf[data-step="3"] .tlinks,.tf[data-step="4"] .tlinks{color:#55606B}
.tf[data-step="3"] .tlogo,.tf[data-step="4"] .tlogo{font-family:var(--display); letter-spacing:-.03em}
.tf[data-step="3"] .tlogo::before,.tf[data-step="4"] .tlogo::before{background:#2F4BD8}
.tf[data-step="3"] .tcta,.tf[data-step="4"] .tcta{background:#15202B; color:#fff; border-radius:1cqw}
.tf[data-step="3"] .old,.tf[data-step="4"] .old{display:none}
.tf[data-step="3"] .new,.tf[data-step="4"] .new{display:inline}
.tf[data-step="3"] .tt,.tf[data-step="4"] .tt{font-family:var(--display); font-weight:700; font-size:5.2cqw; line-height:1; letter-spacing:-.04em}
.tf[data-step="3"] .tt em,.tf[data-step="4"] .tt em{color:#2F4BD8; display:block}
.tf[data-step="3"] .tx,.tf[data-step="4"] .tx{color:#55606B; max-width:34ch}
.tf[data-step="3"] .tb > span,.tf[data-step="4"] .tb > span{border-radius:1cqw}
.tf[data-step="3"] .tb > span:first-child,.tf[data-step="4"] .tb > span:first-child{background:#2F4BD8; color:#fff}
.tf[data-step="3"] .tb > span:last-child,.tf[data-step="4"] .tb > span:last-child{border:.15cqw solid #15202B}
.tf[data-step="3"] .tf3 > span,.tf[data-step="4"] .tf3 > span{border-top:.12cqw solid #E6E9EE; border-radius:0; text-align:left; padding:1.6cqw 0 0}
.tf[data-step="4"] .th{grid-template-columns:1.15fr .85fr; align-items:center}
.tf[data-step="4"] .tbadge{display:inline-flex}
.tf[data-step="4"] .tvis{display:block}
html.motion .tf[data-step="4"] .tvis{animation:entra .7s var(--ease-out)}
.tf[data-step="4"] .tb > span:first-child{box-shadow:0 1cqw 2cqw -1cqw rgba(47,75,216,.8)}
.tf[data-step="4"] .tf3 .new::before{content:"✓"; color:#2F4BD8; margin-right:.8cqw}
html.motion .tf[data-step="4"] .tcard{animation:flota 5s ease-in-out infinite}
html.motion .tf[data-step="4"] .tcard.c2{animation-delay:-2.5s}
@keyframes entra{from{opacity:0; transform:translateY(3cqw) scale(.96)}}
@keyframes flota{50%{transform:translateY(-.8cqw)}}
html:not(.motion) .tf-pin{min-height:0}
@media (max-width:860px){.tf-grid{grid-template-columns:1fr}.tf-pin{padding-top:84px; align-items:start}.tf-steps{grid-template-columns:repeat(2,1fr); gap:2px 16px}.tf-steps li span{font-size:.8rem}}
@media (max-width:520px){
  .tf{aspect-ratio:4/4.6}.tf .tlinks{display:none}.tf .tn{padding:4cqw 5cqw}.tf .th{padding:3cqw 5cqw}
  .tf .tt,.tf[data-step="1"] .tt,.tf[data-step="3"] .tt,.tf[data-step="4"] .tt{font-size:8.4cqw}
  .tf .tx{font-size:3.4cqw}.tf .tcta,.tf .tb > span{font-size:3cqw; padding:2cqw 3.4cqw}.tf .tlogo{font-size:4.6cqw}.tf .tlogo::before{width:3cqw; height:3cqw}
  .tf[data-step="4"] .th{grid-template-columns:1fr}.tf[data-step="4"] .tvis{display:none}
  .tf .tf3{grid-template-columns:1fr; gap:2cqw; padding:0 5cqw}.tf .tf3 > span{font-size:3cqw; padding:2.4cqw}.tf .tbadge{font-size:2.8cqw; padding:1.4cqw 2.6cqw}.tf .tb{margin-top:4cqw; gap:2cqw}
  .tf-steps li span{display:none}
}

/* ---------- Proyecto HOMELAX ---------- */
.showcase{position:relative; margin-top:56px; padding-right:clamp(0px,14vw,200px)}
.browser{margin:0; border-radius:20px; padding:8px; background:var(--white); box-shadow:0 0 0 1px var(--line), 0 40px 90px -40px rgba(16,36,43,.5)}
.browser .bar{display:flex; align-items:center; gap:7px; padding:8px 10px 12px}
.browser .bar i{width:10px; height:10px; border-radius:50%; background:var(--sand-3)}
.browser .bar span{margin-left:10px; padding:3px 12px; border-radius:99px; background:var(--sand); font-size:.8rem; color:var(--muted)}
.screen{position:relative; display:block; aspect-ratio:16/10; overflow:hidden; border-radius:13px; background:#fff; container-type:size}
.screen img{width:100%; height:auto; transition:transform 1.4s var(--ease-out)}
@media (hover:hover){html.motion .screen:hover img,html.motion .screen:focus-visible img{transform:translateY(calc(-100% + 100cqh)); transition:transform 16s cubic-bezier(.45,0,.55,1)}}
@media (hover:none){html.motion .showcase.in .screen img{animation:recorre 26s cubic-bezier(.45,0,.55,1) 1.2s infinite alternate}}
@keyframes recorre{0%,6%{transform:none}94%,100%{transform:translateY(calc(-100% + 100cqh))}}
.phone{position:absolute; right:0; bottom:-56px; width:clamp(130px,21vw,280px); margin:0; padding:8px; border-radius:36px; background:var(--ink); box-shadow:0 40px 80px -24px rgba(16,36,43,.6); transform:rotate(3deg); transition:transform .8s var(--ease-out)}
.phone img{width:100%; border-radius:29px}
@media (hover:hover){.showcase:hover .phone{transform:rotate(0) translateY(-10px)}}
.show-cap{display:flex; flex-wrap:wrap; gap:6px 24px; margin-top:18px; color:var(--muted); font-size:.95rem; max-width:calc(100% - clamp(150px,24vw,320px))}
.show-cap b{color:var(--ink)}
.hint-touch{display:none}
@media (hover:none){.hint-mouse{display:none}.hint-touch{display:inline}}
.case-foot{display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(40px,7vw,100px); margin-top:clamp(96px,10vw,140px); align-items:start}
.quote{margin:0; padding:clamp(28px,4vw,44px); border-radius:22px; background:var(--white); box-shadow:0 0 0 1px var(--line)}
.quote .stars{color:var(--coral); letter-spacing:.15em; font-size:1rem}
.quote p{margin-top:14px; font-family:var(--display); font-weight:600; font-size:clamp(1.25rem,2vw,1.7rem); line-height:1.25; letter-spacing:-.02em; font-variation-settings:"opsz" 48}
.quote footer{margin-top:20px; color:var(--muted)}
.quote footer b{color:var(--ink)}
.gains{list-style:none; margin:0; padding:0}
.gains li{padding:20px 0; border-top:1px solid var(--line-2)}
.gains li:last-child{border-bottom:1px solid var(--line-2)}
.gains b{display:block; font-family:var(--display); font-size:1.2rem; letter-spacing:-.02em}
.gains span{color:var(--muted)}
.ext{display:inline-flex; align-items:center; gap:8px; margin-top:24px; font-weight:700; text-underline-offset:6px; text-decoration-color:var(--coral)}
.ext svg{width:16px; height:16px}
@media (max-width:860px){.case-foot{grid-template-columns:1fr}}
@media (max-width:600px){.showcase{padding-right:0}.phone{width:36vw; right:-6px; bottom:-40px; padding:6px; border-radius:24px}.phone img{border-radius:19px}.show-cap{max-width:58%}}

/* ---------- Cómo trabajo ---------- */
.steps{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin:20px 0 0; list-style:none; padding:0}
.steps li{position:relative; padding:24px 20px 26px; border-radius:18px; background:var(--white); box-shadow:0 0 0 1px var(--line)}
.steps li .n{display:grid; place-items:center; width:38px; height:38px; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--line-2); font-weight:700; font-size:.95rem; transition:background-color .4s ease, color .4s ease, box-shadow .4s ease}
.steps li.lit .n,html:not(.motion) .steps li .n{background:var(--coral); color:var(--on-coral); box-shadow:none}
.steps h3{margin-top:18px; font-size:1.12rem}
.steps p{margin-top:8px; font-size:.92rem; color:var(--muted); line-height:1.5}
.steps-line{position:relative; height:2px; margin:clamp(40px,5vw,64px) 9% 0; background:var(--line-2); border-radius:2px; overflow:hidden}
.steps-line i{position:absolute; inset:0; background:var(--coral); transform:scaleX(0); transform-origin:left}
html:not(.motion) .steps-line i{transform:none}
.deadline{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 28px; margin-top:20px; padding:clamp(24px,3vw,36px); border-radius:20px; background:var(--ink); color:var(--sand)}
.deadline b{font-family:var(--display); font-size:clamp(1.6rem,3vw,2.4rem); letter-spacing:-.035em; line-height:1}
.deadline b em{font-style:normal; color:var(--coral)}
.deadline span{color:#B9C8CB; max-width:44ch}
@media (max-width:980px){.steps{grid-template-columns:1fr 1fr; margin-top:clamp(40px,5vw,64px)}.steps-line{display:none}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* ---------- Precios ---------- */
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:clamp(40px,5vw,64px); align-items:stretch}
.plan{position:relative; display:flex; flex-direction:column; padding:clamp(26px,3vw,36px); border-radius:22px; background:var(--white); box-shadow:0 0 0 1px var(--line); transition:transform .5s var(--ease-out), box-shadow .3s ease}
@media (hover:hover){.plan:hover{transform:translateY(-6px); box-shadow:0 0 0 1px var(--line), 0 24px 48px -28px rgba(16,36,43,.35)}}
.plan.star{background:var(--ink); color:var(--sand); box-shadow:none}
.plan .tag{position:absolute; top:clamp(26px,3vw,36px); right:clamp(26px,3vw,36px); background:var(--coral); color:var(--on-coral); font-weight:700; font-size:.78rem; padding:5px 11px; border-radius:99px}
.plan h3{font-size:1.4rem}
.plan .price{font-family:var(--display); font-weight:700; font-size:clamp(3rem,4.6vw,4rem); letter-spacing:-.05em; line-height:1; margin-top:20px; font-variation-settings:"opsz" 96}
.plan .price small{font-family:var(--body); font-size:.95rem; font-weight:500; letter-spacing:0; color:var(--muted)}
.plan .what{color:var(--muted); margin-top:14px; min-height:3.2em}
.plan.star .price small,.plan.star .what,.plan.star li{color:#B9C8CB}
.plan ul{list-style:none; margin:24px 0 32px; padding:0; flex:1}
.plan li{display:flex; gap:12px; align-items:baseline; padding:11px 0; border-top:1px solid var(--line); color:var(--muted)}
.plan.star li{border-color:rgba(255,255,255,.1)}
.plan li::before{content:""; flex:none; width:10px; height:10px; background:var(--coral); -webkit-mask:var(--spark) center/contain no-repeat; mask:var(--spark) center/contain no-repeat}
.plan .btn{width:100%}
.extras{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px}
.box{padding:clamp(26px,3vw,36px); border-radius:22px; background:var(--white); box-shadow:0 0 0 1px var(--line)}
.box table{width:100%; border-collapse:collapse; margin-top:14px}
.box td{padding:12px 0; border-top:1px solid var(--line)}
.box td:last-child{text-align:right; font-weight:700; white-space:nowrap}
.box p{color:var(--muted); margin-top:12px}
.box .price{font-family:var(--display); font-weight:700; font-size:clamp(2.4rem,3.6vw,3rem); letter-spacing:-.04em; line-height:1; margin-top:16px}
.box .price small{font-family:var(--body); font-size:.95rem; font-weight:500; color:var(--muted); letter-spacing:0}
.pay{margin-top:24px; color:var(--muted); text-align:center}
.pay b{color:var(--ink)}
@media (max-width:960px){.plans{grid-template-columns:1fr}.extras{grid-template-columns:1fr}.plan .what{min-height:0}}

/* ---------- Garantías ---------- */
.vows{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:clamp(40px,5vw,64px)}
.vows svg{width:22px; height:22px}
@media (max-width:900px){.vows{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.vows{grid-template-columns:1fr}}

/* ---------- Preguntas en cuadrícula ---------- */
.faq{display:grid; grid-template-columns:1fr 1fr; margin-top:clamp(40px,5vw,64px); border-radius:22px; background:var(--white); box-shadow:0 0 0 1px var(--line); overflow:hidden}
.faq > div{padding:26px 28px; border-bottom:1px solid var(--line)}
.faq > div:nth-child(odd){border-right:1px solid var(--line)}
.faq > div.wide{grid-column:1 / -1; border-right:0; border-bottom:0}
.faq h3{font-size:1.1rem}
.faq p{margin-top:8px; color:var(--muted); font-size:.95rem}
.who{display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start; margin-top:16px; padding:clamp(26px,3.5vw,40px); border-radius:22px; background:var(--ink); color:var(--sand)}
.who svg{width:40px; height:40px}
.who p{font-family:var(--display); font-weight:500; font-size:clamp(1.15rem,1.8vw,1.5rem); line-height:1.3; letter-spacing:-.015em}
@media (max-width:760px){.faq{grid-template-columns:1fr}.faq > div:nth-child(odd){border-right:0}}

/* ---------- Llamada final y contacto ---------- */
.contact{padding:0 0 clamp(40px,6vw,80px)}
.final{border-radius:28px; overflow:hidden; color:var(--sand); background:radial-gradient(120% 110% at 50% 125%,#F2704E 0%,#B24D30 26%,#3D2620 52%,#10242B 78%)}
.final-head{padding:clamp(48px,7vw,88px) clamp(24px,5vw,64px) 0; text-align:center}
.final-head h2{font-size:clamp(2.8rem,8vw,6rem); max-width:none; letter-spacing:-.05em}
.final-head .lead{color:rgba(245,241,234,.86); margin:18px auto 0}
.final-btns{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:28px}
.final-btns .btn-line{color:var(--sand); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
@media (hover:hover){.final-btns .btn-line:hover{background:var(--sand); color:var(--ink)}}
.final form{margin:clamp(40px,5vw,64px) clamp(12px,4vw,48px) clamp(12px,4vw,48px)}
form{display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:clamp(22px,3.5vw,40px); border-radius:20px; background:var(--white); color:var(--ink)}
form .full{grid-column:1 / -1}
form h3{font-size:1.5rem}
label{display:block; font-weight:500; font-size:.93rem; margin-bottom:7px}
input[type=text],input[type=email],input[type=tel],select,textarea{width:100%; min-height:52px; padding:13px 15px; border-radius:12px; border:1px solid var(--line-2); background:var(--sand); color:var(--ink); font:inherit; caret-color:var(--coral); transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease}
textarea{min-height:110px; resize:vertical}
input::placeholder,textarea::placeholder{color:#6F7E82}
input:focus,select:focus,textarea:focus{border-color:var(--coral); background:#fff; box-shadow:0 0 0 3px rgba(242,112,78,.2); outline:none}
input:user-invalid,textarea:user-invalid{border-color:#D9472B}
form .btn{width:100%}
.after{color:var(--muted); font-size:.92rem; text-align:center}
@media (max-width:620px){form{grid-template-columns:1fr}}

/* ---------- Pie ---------- */
footer.end{padding:clamp(48px,6vw,80px) 0 0; font-size:.95rem; color:var(--muted); overflow:hidden}
.cols{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px}
.cols h3{font-family:var(--body); font-size:.9rem; font-weight:700; color:var(--ink); margin-bottom:12px}
.cols a{display:block; padding:3px 0; text-decoration:none}
.cols a:hover{color:var(--ink); text-decoration:underline; text-decoration-color:var(--coral); text-underline-offset:4px}
.cols .logo{display:inline-flex; color:var(--ink); font-size:1.5rem}
.tagline{margin-top:12px; max-width:32ch}
@media (max-width:760px){.cols{grid-template-columns:1fr 1fr}}
.mega{display:flex; align-items:flex-start; gap:.02em; margin-top:56px; font-family:var(--display); font-weight:800; font-size:clamp(3.4rem,20vw,17rem); letter-spacing:-.05em; line-height:.78; padding-bottom:.08em; color:var(--sand-3); font-variation-settings:"opsz" 96; user-select:none}
.mega svg{width:.17em; height:.17em; flex:none; transition:transform .9s var(--ease-out)}
@media (hover:hover){.mega:hover svg{transform:rotate(180deg) scale(1.2)}}

/* ---------- WhatsApp flotante (móvil) ---------- */
.wa-float{position:fixed; right:16px; bottom:16px; z-index:40; display:none; align-items:center; gap:8px; min-height:52px; padding:0 20px 0 16px; border-radius:16px; background:var(--ink); color:var(--sand); font-weight:700; text-decoration:none; box-shadow:0 14px 30px -10px rgba(16,36,43,.55); transform:translateY(160%); transition:transform .5s var(--ease-out)}
.wa-float svg{width:22px; height:22px; color:#25D366}
.wa-float.show{transform:none}
@media (max-width:760px){.wa-float{display:inline-flex}}

/* ---------- Estados iniciales (solo si hay movimiento) ---------- */
html.motion .rv{opacity:0; transform:translateY(26px)}
.split .w{display:inline-block; vertical-align:top}
html.motion .split .w{overflow:clip; padding-bottom:.12em; margin-bottom:-.12em}
html.motion .split .w > span{display:inline-block; transform:translateY(110%)}
html.motion .hero-in{opacity:0; transform:translateY(16px)}
html.motion .device{opacity:0}
@media (prefers-reduced-motion: reduce){.mock,.mock.on{transition:none}.ui-write .caret{animation:none}}

/* ---------- Retoques ---------- */
.m-mar .blob{z-index:0}
.m-mar .mnav-row,.m-mar .grid{position:relative; z-index:1}
@media (max-width:520px){
  .announce{font-size:.8rem; padding-right:10px}
  .announce svg.arrow{display:none}
  .tf-pin{padding:80px 0 24px}
  .tf-h{font-size:1.7rem}
  .tf-steps{margin-top:14px}
  .tf{aspect-ratio:1/1.02}
  .tf .tf3{grid-template-columns:repeat(3,1fr); gap:1.6cqw}
  .tf .tf3 > span{font-size:2.6cqw; padding:2cqw 1cqw}
  .tf[data-step="3"] .tf3 > span,.tf[data-step="4"] .tf3 > span{padding:2cqw 0 0}
}

/* =========================================================
   Ronda de cambios de Dani (noviembre 2026)
   ========================================================= */

/* Portada: botones en lugar de la cápsula del teléfono */
.btn-wa .wa-ico{width:20px; height:20px; color:#1FA855}
.btn-glass{background:rgba(255,255,255,.1); color:var(--sand); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
@media (hover:hover){.btn-glass:hover{background:rgba(255,255,255,.18)}}

/* Webs de ejemplo con foto */
.mock .ph{position:relative; border-radius:1.6cqw; overflow:hidden; align-self:stretch}
.mock .ph img{width:100%; height:100%; object-fit:cover}
/* Vidal */
.m-vidal .grid{grid-template-columns:1.25fr 1fr; align-items:stretch; height:calc(100% - 13cqw)}
.m-vidal .grid > div:first-child{align-self:center}
.m-vidal .pillx{display:inline-flex; align-items:center; gap:.8cqw; padding:.7cqw 1.4cqw; border-radius:99px; background:#16191D; border:.12cqw solid #24282D; font:700 1.15cqw var(--body); color:#C9CED3; margin-bottom:2cqw}
.m-vidal .pillx i{width:.9cqw; height:.9cqw; border-radius:50%; background:#3DDC84; box-shadow:0 0 0 .5cqw rgba(61,220,132,.18)}
.m-vidal .ph{margin-bottom:2cqw}
.m-vidal .ph::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%,rgba(13,15,18,.55))}
.m-vidal .card{position:absolute; z-index:1; background:rgba(22,25,29,.88); backdrop-filter:blur(6px)}
.m-vidal .c-a{left:1.6cqw; bottom:1.6cqw}
.m-vidal .c-b{right:1.6cqw; top:1.6cqw}
/* Clínica Mar */
.m-mar .grid{grid-template-columns:1fr 1.05fr; height:calc(100% - 8cqw); align-items:stretch; padding-bottom:3cqw}
.m-mar .grid > div:first-child{align-self:center}
.m-mar .chips{display:flex; flex-wrap:wrap; gap:.8cqw; margin-top:2.4cqw}
.m-mar .chips span{padding:.7cqw 1.3cqw; border-radius:99px; background:#fff; font-size:1.15cqw; font-weight:700; color:#2F6E5E}
.m-mar .ph{border-radius:2.4cqw}
.m-mar .book{position:absolute; left:2cqw; bottom:2cqw; width:58%; padding:1.8cqw}
.m-mar .book b{font-size:1.4cqw}
.m-mar .days span,.m-mar .slots span{font-size:1.05cqw; padding:.8cqw 0}
.m-mar .confirm{font-size:1.15cqw; padding:1cqw; transition:background-color .3s ease}
.m-mar .confirm.ok{background:#173A33}
/* Can Toni, nueva */
.m-toni{background:#0E0B09; color:#FBF3E8}
.m-toni .bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.m-toni::before{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(14,11,9,.88) 0%,rgba(14,11,9,.62) 45%,rgba(14,11,9,.15) 75%)}
.m-toni .mnav-row,.m-toni .grid{position:relative; z-index:2}
.m-toni .brand{font-family:var(--display); font-weight:700; text-transform:none; letter-spacing:-.03em; font-size:2.2cqw}
.m-toni .ml{color:rgba(251,243,232,.75)}
.m-toni .mbtn{background:#FBF3E8; color:#0E0B09}
.m-toni .grid{grid-template-columns:1.2fr .9fr; gap:4cqw; align-items:center; padding:3cqw 3.4cqw}
.m-toni .tag{display:inline-block; padding:.6cqw 1.2cqw; border-radius:99px; border:.12cqw solid rgba(251,243,232,.35); font-size:1.1cqw; font-weight:700; letter-spacing:.02em}
.m-toni h4{margin-top:2cqw; font-family:var(--display); font-style:normal; font-weight:700; font-size:6.4cqw; line-height:.95; letter-spacing:-.045em; color:#FBF3E8}
.m-toni h4 em{font-family:Georgia,serif; font-style:italic; font-weight:400; letter-spacing:-.02em; color:#F6B48E}
.m-toni p{margin-top:2cqw; font-size:1.45cqw; color:rgba(251,243,232,.8); max-width:36ch}
.m-toni .resv{display:inline-flex; align-items:center; gap:.6cqw; margin-top:2.6cqw; padding:.6cqw; border-radius:1.4cqw; background:rgba(251,243,232,.12); backdrop-filter:blur(8px); font-size:1.2cqw}
.m-toni .resv span{padding:.8cqw 1.2cqw; border-radius:1cqw; background:rgba(251,243,232,.1)}
.m-toni .resv b{padding:.8cqw 1.6cqw; border-radius:1cqw; background:#E8774D; color:#0E0B09}
.m-toni .carta{padding:1.8cqw; border-radius:2cqw; background:rgba(251,243,232,.94); color:#2A1A12; box-shadow:0 2cqw 4cqw -2cqw rgba(0,0,0,.6)}
.m-toni .carta > b{display:block; font-family:Georgia,serif; font-style:italic; font-weight:400; font-size:1.9cqw; margin-bottom:1cqw; color:#B4492B}
.m-toni .dish{display:flex; gap:1.2cqw; align-items:center; padding:.9cqw 0; border-top:.12cqw solid rgba(42,26,18,.12)}
.m-toni .dish img{width:5.4cqw; height:5.4cqw; border-radius:1cqw; object-fit:cover; flex:none}
.m-toni .dish strong{display:block; font-size:1.3cqw}
.m-toni .dish small{display:block; font-size:1.1cqw; color:#6A4F42; line-height:1.3}
/* Nota Alta */
.m-nota .grid{grid-template-columns:1.15fr 1fr; height:calc(100% - 8cqw); align-items:stretch; padding-bottom:3cqw}
.m-nota .grid > div:first-child{align-self:center}
.m-nota .ph{border-radius:2.4cqw; overflow:visible}
.m-nota .ph img{border-radius:2.4cqw}
.m-nota .sticker{right:-1cqw; top:-1.6cqw}
.m-nota .pick{position:relative; margin-top:2.6cqw; max-width:30cqw}
.m-nota .pick small{display:block; font-size:1.15cqw; font-weight:700; color:#5D578A; margin-bottom:.8cqw}
.m-nota .sel-box{display:flex; justify-content:space-between; align-items:center; padding:1.2cqw 1.6cqw; border-radius:1.2cqw; background:#fff; border:.15cqw solid #DCD6F7; font-size:1.35cqw; font-weight:700; transition:border-color .3s ease, box-shadow .3s ease}
.m-nota .sel-box i{width:1cqw; height:1cqw; border-right:.2cqw solid #5B3DF5; border-bottom:.2cqw solid #5B3DF5; transform:rotate(45deg) translateY(-25%); transition:transform .3s ease}
.m-nota .pick.open .sel-box{border-color:#5B3DF5; box-shadow:0 0 0 .5cqw rgba(91,61,245,.15)}
.m-nota .pick.open .sel-box i{transform:rotate(-135deg)}
.m-nota .opts{position:absolute; left:0; right:0; top:7.6cqw; z-index:3; margin:0; padding:.6cqw; list-style:none; border-radius:1.2cqw; background:#fff; box-shadow:0 2cqw 4cqw -1cqw rgba(29,22,64,.3); opacity:0; transform:translateY(-1cqw); pointer-events:none; transition:opacity .25s ease, transform .3s var(--ease-out)}
.m-nota .pick.open .opts{opacity:1; transform:none}
.m-nota .opts li{padding:.9cqw 1.2cqw; border-radius:.8cqw; font-size:1.25cqw; transition:background-color .2s ease}
.m-nota .opts li.hl{background:#F0EDFF; color:#5B3DF5; font-weight:700}
.m-nota .pick-ok{margin-top:1.2cqw; padding:1cqw 1.4cqw; border-radius:1cqw; background:#FFF3C4; font-size:1.2cqw; opacity:0; transform:translateY(.6cqw); transition:opacity .4s ease, transform .4s var(--ease-out)}
.m-nota .pick-ok.show{opacity:1; transform:none}
html:not(.motion) .m-nota .pick-ok{opacity:1; transform:none}
@media (max-width:640px){
  .mock .grid{height:auto !important}
  .mock .ph{height:46cqw; margin-top:5cqw; border-radius:3cqw}
  .m-vidal .card,.m-mar .book,.m-toni .carta,.m-nota .sticker{display:none}
  .m-vidal .pillx{font-size:2.6cqw; padding:1.4cqw 2.6cqw; margin-bottom:3cqw}.m-vidal .pillx i{width:2cqw; height:2cqw}
  .m-mar .chips span{font-size:2.8cqw; padding:1.4cqw 2.6cqw}
  .m-toni::before{background:linear-gradient(180deg,rgba(14,11,9,.4),rgba(14,11,9,.88) 70%)}
  .m-toni .tag{font-size:2.6cqw; padding:1.2cqw 2.4cqw}.m-toni h4{font-size:12cqw}.m-toni .resv{font-size:2.6cqw; gap:1.2cqw; padding:1.2cqw; border-radius:2.4cqw}.m-toni .resv span,.m-toni .resv b{padding:1.6cqw 2.2cqw; border-radius:1.8cqw}
  .m-nota .pick{max-width:none; margin-top:4cqw}.m-nota .pick small{font-size:2.8cqw}.m-nota .sel-box{font-size:3.2cqw; padding:2.6cqw 3cqw; border-radius:2.4cqw}.m-nota .opts li{font-size:3cqw; padding:2cqw}.m-nota .pick-ok{font-size:2.8cqw; padding:2.2cqw 3cqw}
  .m-nota .ph{display:none}
  .m-vidal .tick{display:none}
}

/* Qué incluye · textos: de tu audio a tu web */
.ui-brief .client{margin-top:12px; padding:12px; border-radius:12px; background:#ECE5DD}
.ui-brief .who-c{display:block; font-size:.72rem; color:#54656F; margin-bottom:6px}
.ui-brief .voice{display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:10px; background:#D9FDD3; width:max-content; max-width:100%}
.ui-brief .play{width:0; height:0; border-left:9px solid #54656F; border-top:6px solid transparent; border-bottom:6px solid transparent}
.ui-brief .wave{display:flex; align-items:center; gap:2px; height:18px}
.ui-brief .wave i{width:3px; border-radius:2px; background:#7A8C93; height:30%}
.ui-brief .wave i:nth-child(3n){height:80%}.ui-brief .wave i:nth-child(3n+1){height:55%}.ui-brief .wave i:nth-child(4n){height:100%}
.ui-brief.playing .wave i{animation:onda .9s ease-in-out infinite alternate}
.ui-brief.playing .wave i:nth-child(odd){animation-delay:-.4s}
@keyframes onda{to{transform:scaleY(.35)}}
.ui-brief .voice small{font-size:.72rem; color:#54656F}
.ui-brief .said{margin-top:8px; font-size:.86rem; font-style:italic; color:#3B4A4F}
.ui-brief .magic{display:flex; align-items:center; gap:8px; margin:12px 0 8px; font-size:.78rem; font-weight:700; color:var(--coral-deep)}
.ui-brief .magic svg{width:14px; height:14px; color:var(--coral)}
.ui-brief .out{min-height:132px; padding:12px; border-radius:12px; background:var(--sand)}
.ui-brief .out b{font-family:var(--display); font-size:1.15rem; line-height:1.2; letter-spacing:-.02em}
.ui-brief .out p{margin-top:8px; font-size:.84rem; color:var(--muted); line-height:1.5}
.ui-brief .caret{display:inline-block; width:2px; height:1.05em; margin-left:2px; vertical-align:-3px; background:var(--coral); animation:parpadeo 1s steps(1) infinite}
html.motion .ui-brief .said,html.motion .ui-brief .magic{opacity:0; transform:translateY(6px); transition:opacity .45s ease, transform .45s var(--ease-out)}
html.motion .ui-brief .said.show,html.motion .ui-brief .magic.show{opacity:1; transform:none}
.txt p + p{margin-top:10px}

/* Qué incluye · Google: subir al primer puesto */
.ui-g .rank{position:relative; height:232px; margin:14px 0 0; padding:0; list-style:none}
.ui-g .rank li{position:absolute; left:0; right:0; top:calc(var(--o) * 58px); display:flex; gap:12px; align-items:center; height:50px; padding:0 12px; border-radius:12px; background:#F7F8F9; transition:top .9s var(--ease-io), background-color .4s ease, box-shadow .4s ease}
.ui-g .rank li em{display:grid; place-items:center; width:26px; height:26px; flex:none; border-radius:50%; background:#E6E9EB; font-style:normal; font-size:.78rem; font-weight:700; color:#4D5156; transition:background-color .4s ease, color .4s ease}
.ui-g .rank li small{display:block; font-size:.7rem; color:#4D5156; line-height:1.2}
.ui-g .rank li b{display:block; font-size:.86rem; font-weight:500; color:#1A0DAB; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ui-g .rank li.me{background:#FFF1EC; box-shadow:inset 0 0 0 1.5px var(--coral); z-index:1}
.ui-g .rank li.me b{font-weight:700}
.ui-g .rank li.me.top em{background:var(--coral); color:var(--on-coral)}
.ui-g .rank li.me.top{box-shadow:inset 0 0 0 1.5px var(--coral), 0 10px 24px -12px rgba(242,112,78,.8)}

/* Paso a paso: la web antigua de verdad */
.tf .tf-old{display:none; position:absolute; inset:0; background:#fff; color:#000; font-family:'Times New Roman',Times,serif; font-size:1.35cqw; line-height:1.3; overflow:hidden}
.tf[data-step="1"] .tf-old{display:block}
.tf[data-step="1"] .tf-site{display:none}
.tf[data-step="1"]{background:#fff}
.o-marq{background:#000080; color:#FFFF00; font-weight:bold; white-space:nowrap; overflow:hidden; padding:.4cqw 0; font-family:Arial,sans-serif; font-size:1.2cqw}
.o-marq span{display:inline-block; padding-left:100%}
html.motion .o-marq span{animation:marquesina 14s linear infinite}
@keyframes marquesina{to{transform:translateX(-100%)}}
.o-title{margin:1.4cqw 0 .4cqw; text-align:center; font-size:3.6cqw; font-weight:bold; color:#00339A; text-shadow:.2cqw .2cqw 0 #A0A0A0; font-family:'Comic Sans MS','Comic Sans',cursive}
.o-nav{margin:0 2cqw; padding:.6cqw; background:#D9D9D9; border:.15cqw outset #EEE; text-align:center; font-size:1.3cqw}
.o-nav u,.o-side u{color:#0000EE}
.o-body{display:grid; grid-template-columns:16cqw 1fr; gap:2cqw; margin:1.6cqw 2cqw}
.o-side{display:flex; flex-direction:column; gap:.6cqw; padding:1cqw; background:#FFFFCC; border:.2cqw ridge #C0C0C0; font-size:1.25cqw}
.o-side b{color:#990000}
.o-main{text-align:center}
.o-h{font-size:2.2cqw; font-weight:bold; color:#CC0000; text-decoration:underline}
.o-main p{margin:1cqw auto; max-width:56ch; text-align:justify}
.o-foto{display:inline-grid; place-items:center; width:40%; aspect-ratio:4/2.4; background:#BDBDBD; border:.3cqw ridge #888; color:#555; font-family:Arial,sans-serif; font-size:1.2cqw}
.o-y{display:inline-block; margin-top:1cqw; padding:.2cqw 1cqw; background:#FFFF00; font-weight:bold; font-size:1.6cqw}
.o-btn{display:inline-block; margin-top:1cqw; padding:.3cqw 1.4cqw; background:#E6E6E6; border:.25cqw outset #999; font-family:Arial,sans-serif; font-size:1.2cqw}
.o-foot{position:absolute; left:0; right:0; bottom:0; padding:.6cqw; border-top:.15cqw solid #999; text-align:center; font-size:1.05cqw; color:#666; font-family:Verdana,sans-serif}
@media (max-width:520px){
  .tf .tf-old{font-size:2.8cqw}.o-marq{font-size:2.6cqw; padding:1cqw 0}.o-title{font-size:6.4cqw; margin:3cqw 0 1cqw}.o-nav{font-size:2.6cqw; padding:1.4cqw}
  .o-body{grid-template-columns:1fr; margin:3cqw 4cqw}.o-side{display:none}.o-h{font-size:4.6cqw}.o-foto{width:60%; font-size:2.6cqw}.o-y{font-size:3.4cqw}.o-btn{font-size:2.8cqw}.o-foot{font-size:2.2cqw; padding:1.4cqw}
}
/* pasos 2-4 sobre la estructura moderna */
.tf-site{position:absolute; inset:0}
.tf .trate{display:none; margin-top:1.8cqw; font-size:1.2cqw; color:#55606B}
.tf .trate .stars{color:#E0A63B; letter-spacing:.1em; margin-right:.6cqw}
.tf[data-step="4"] .trate{display:block}
.tf .tvis{background:#E9EDF5; overflow:visible}
.tf .tvis img{width:100%; height:100%; object-fit:cover; border-radius:2cqw}
.tf .tcard.c2 i{display:inline-block; width:.9cqw; height:.9cqw; margin-right:.7cqw; border-radius:50%; background:#1FA971; box-shadow:0 0 0 .5cqw rgba(31,169,113,.15)}
.tf[data-step="2"] .tf3 > span,.tf[data-step="2"] .tt{font-family:var(--body)}

/* Lema con luz que inunda la pantalla */
.flood{position:relative; height:100svh; min-height:560px; overflow:hidden; background:var(--sand)}
.flood-stage{position:absolute; inset:0; display:grid; place-items:center; overflow:hidden}
.fl-sun{position:absolute; left:50%; top:50%; width:170vmax; height:170vmax; margin:-85vmax 0 0 -85vmax; border-radius:50%; background:radial-gradient(circle,#F2704E 0%,#F2704E 34%,rgba(242,112,78,.75) 46%,rgba(247,168,142,.35) 58%,rgba(245,241,234,0) 70%); will-change:transform}
.fl-night{position:absolute; left:0; right:0; top:0; height:160%; background:linear-gradient(180deg,#10242B 0%,#10242B 62%,rgba(16,36,43,0) 100%); will-change:transform}
.fl-line{position:relative; z-index:2; text-align:center; font-size:clamp(2.6rem,7.4vw,6.6rem); line-height:1; letter-spacing:-.05em; max-width:none; padding:0 var(--gut)}
.fl-line span{display:block}
.fl-lead{color:var(--ink)}
.fl-key{color:#fff}
html.motion .fl-key{opacity:0}
html:not(.motion) .flood{height:auto; min-height:0; padding:clamp(96px,14vw,180px) 0; background:radial-gradient(90% 120% at 50% 110%,#F2704E 0%,#F2704E 40%,#F7A88E 62%,var(--sand) 80%)}
html:not(.motion) .flood-stage{position:relative}
html:not(.motion) .fl-sun,html:not(.motion) .fl-night{display:none}

/* Pie oscuro con el logotipo cromado */
footer.end{background:var(--ink); color:#9FB2B6}
footer.end .cols h3{color:var(--sand)}
footer.end .cols a:hover{color:var(--sand)}
footer.end .cols .logo{color:var(--sand)}
.mega{color:transparent; background:linear-gradient(100deg,#5E6E73 0%,#DDE5E7 14%,#8C9BA0 26%,#FFFFFF 38%,#A9B6BA 50%,#F7C2AE 62%,#F2704E 72%,#FFE3D8 82%,#7E8F94 100%); background-size:220% 100%; background-position:var(--chrome,0%) 50%; -webkit-background-clip:text; background-clip:text}
.mega svg{filter:drop-shadow(0 0 .08em rgba(242,112,78,.5))}
@media (hover:hover){html.motion .mega{transition:background-position 1.6s var(--ease-out)}html.motion .mega:hover{--chrome:100%}}

/* ---------- Paso 4: el gran salto (oscuro, foto protagonista) ---------- */
.tf[data-step="4"]{background:#0B1626; color:#F4F6FA}
.tf[data-step="4"] .tlinks{color:rgba(244,246,250,.7)}
.tf[data-step="4"] .tlogo{color:#fff}
.tf[data-step="4"] .tlogo::before{background:#5B8CFF}
.tf[data-step="4"] .tcta{background:#fff; color:#0B1626}
.tf[data-step="4"] .tbadge{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2); color:#fff; backdrop-filter:blur(6px)}
.tf[data-step="4"] .tt{color:#fff}
.tf[data-step="4"] .tt em{color:#8DB0FF}
.tf[data-step="4"] .tx{color:rgba(244,246,250,.78)}
.tf[data-step="4"] .tb > span:first-child{background:#3D6BFF; color:#fff; box-shadow:0 1.2cqw 2.4cqw -1cqw rgba(61,107,255,.9)}
.tf[data-step="4"] .tb > span:last-child{border-color:rgba(255,255,255,.5); color:#fff}
.tf[data-step="4"] .trate{color:rgba(244,246,250,.75)}
.tf[data-step="4"] .tf3 > span{border-top-color:rgba(255,255,255,.15); color:#fff}
.tf[data-step="4"] .tf3 .new::before{color:#8DB0FF}
.tf[data-step="4"] .tvis{border-radius:2cqw; box-shadow:0 3cqw 6cqw -2cqw rgba(0,0,0,.7)}
.tf[data-step="4"] .tvis::after{content:""; position:absolute; inset:0; border-radius:2cqw; background:linear-gradient(200deg,rgba(91,140,255,.18),transparent 50%)}
.tf[data-step="4"] .tcard{z-index:2}
.tf .tglow{display:none}
.tf[data-step="4"] .tglow{display:block; position:absolute; right:-10%; top:-20%; width:60%; height:80%; border-radius:50%; background:radial-gradient(circle,rgba(61,107,255,.35),transparent 65%); pointer-events:none}
@media (max-width:520px){
  /* En el móvil, la foto llena el fondo y el texto va encima */
  .tf[data-step="4"] .tvis{display:block !important; position:absolute; inset:0; aspect-ratio:auto; border-radius:0; box-shadow:none; z-index:0}
  .tf[data-step="4"] .tvis img{border-radius:0}
  .tf[data-step="4"] .tvis::after{border-radius:0; background:linear-gradient(180deg,rgba(11,22,38,.55) 0%,rgba(11,22,38,.2) 30%,rgba(11,22,38,.82) 62%,#0B1626 100%)}
  .tf[data-step="4"] .tn,.tf[data-step="4"] .th,.tf[data-step="4"] .tf3{position:relative; z-index:1}
  .tf[data-step="4"] .th{padding-top:30cqw}
  .tf[data-step="4"] .tcard.c2{display:none}
  .tf[data-step="4"] .tcard.c1{top:17cqw; right:5cqw; font-size:2.6cqw; padding:2cqw 2.6cqw; border-radius:2.4cqw; animation:none}
  .tf[data-step="4"] .trate{display:block; font-size:2.8cqw; margin-top:3cqw}
  .tf[data-step="4"] .tf3{grid-template-columns:repeat(3,1fr)}
  .tf[data-step="4"] .tf3 > span{font-size:2.5cqw; padding:2cqw 0 0}
}

/* ---------- Contacto + lema: un solo bloque continuo ---------- */
.contact{padding:clamp(56px,8vw,110px) 0 0; background:radial-gradient(70% 42% at 50% 100%,rgba(242,112,78,.95) 0%,rgba(214,92,58,.55) 30%,rgba(120,54,36,.25) 58%,rgba(16,36,43,0) 80%),#10242B}
.contact .final{border-radius:0; overflow:visible; background:none; padding-bottom:clamp(120px,16vw,220px)}
.contact .final form{margin:clamp(36px,5vw,56px) auto 0; max-width:880px}
.flood{background:#10242B}
.fl-sun{top:0; margin-top:-85vmax}
.fl-lead{color:var(--sand)}
html:not(.motion) .flood{background:radial-gradient(70% 60% at 50% 0%,#F2704E 0%,rgba(242,112,78,.4) 40%,rgba(16,36,43,0) 75%),#10242B; padding:clamp(80px,12vw,160px) 0}
html:not(.motion) .fl-lead{color:var(--sand)}
@media (max-width:760px){.flood{height:100svh; min-height:480px}.fl-line{font-size:clamp(2.2rem,10vw,3.4rem)}}

/* Formulario: aceptación de privacidad */
.consent{display:flex; align-items:flex-start; gap:10px}
.consent input{width:20px; height:20px; margin:2px 0 0; flex:none; accent-color:var(--coral)}
.consent label{margin:0; font-size:.92rem; font-weight:400; color:var(--muted)}
.consent a,.legal-mini a{color:var(--ink); text-underline-offset:3px; text-decoration-color:var(--coral)}
.legal-mini{font-size:.78rem; line-height:1.5; color:var(--muted); text-align:center; max-width:70ch; margin:0 auto}

/* Arreglos: texto del paso 4 en móvil y unión sin corte entre contacto y lema */
@media (max-width:520px){
  .tf[data-step="4"] .th{position:static}
  .tf[data-step="4"] .tcopy{position:relative; z-index:1}
  .tf[data-step="4"] .tn,.tf[data-step="4"] .tf3{position:relative; z-index:1}
}
.contact{background:radial-gradient(ellipse 72vw 440px at 50% 100%,rgba(242,112,78,.95) 0%,rgba(214,92,58,.6) 32%,rgba(120,54,36,.28) 60%,rgba(16,36,43,0) 100%),#10242B}
.fl-dawn{position:absolute; inset:0; background:radial-gradient(ellipse 72vw 440px at 50% 0%,rgba(242,112,78,.95) 0%,rgba(214,92,58,.6) 32%,rgba(120,54,36,.28) 60%,rgba(16,36,43,0) 100%)}
@media (max-width:760px){
  .contact{background:radial-gradient(ellipse 120vw 300px at 50% 100%,rgba(242,112,78,.95) 0%,rgba(214,92,58,.6) 32%,rgba(120,54,36,.28) 60%,rgba(16,36,43,0) 100%),#10242B}
  .fl-dawn{background:radial-gradient(ellipse 120vw 300px at 50% 0%,rgba(242,112,78,.95) 0%,rgba(214,92,58,.6) 32%,rgba(120,54,36,.28) 60%,rgba(16,36,43,0) 100%)}
}
html:not(.motion) .fl-dawn{display:none}