/**
 * Autorys - Página Autorys Connect (autorys.com/connect/<idioma>/) · estilos
 * Developed by Autorys · https://autorys.com · sales@autorys.com
 *
 * [Autorys · Página Autorys Connect 2026-09-29] El CSS del diseño "Promoción Autorys Connect"
 * casi tal cual. Agregado: tipografías alojadas aquí, logotipo y selector de idioma en el menú
 * (el mismo de autorys.com), H1 con palabras clave (se ve como la etiqueta pequeña del diseño),
 * video vertical de YouTube, línea de garantía, pie legal y el globo "Hablar con Karla".
 */

/* ---------- 1. Tipografías (alojadas en autorys.com: nada se pide a Google) ---------- */
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/dm-sans-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/dm-sans-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700 800;font-display:swap;src:url(fonts/manrope-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700 800;font-display:swap;src:url(fonts/manrope-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- 2. Colores (los del diseño; claro y oscuro) ---------- */
:root{
  color-scheme:light dark;
  --bg:#f5f8fb;--paper:#ffffff;--ink:#101c27;--muted:#526474;--line:#d8e2ea;
  --blue:#087df2;--blue-2:#005ebd;--btn:#0870dc;--navy:#061a2b;--cyan:#52d6ff;--soft:#e9f4ff;
  --success:#0b7a59;--shadow:0 22px 64px rgba(9,35,58,.14);--radius:26px;
  --blue-deep:#005ebd;
}
@media(prefers-color-scheme:dark){
  :root{--bg:#07131f;--paper:#0d2030;--ink:#f2f8fc;--muted:#afc1cf;--line:#244155;--blue:#3b9cff;--blue-2:#7ec2ff;--btn:#0870dc;--navy:#03101b;--cyan:#63dbff;--soft:#102c43;--success:#63d9b5;--shadow:0 24px 72px rgba(0,0,0,.32);--blue-deep:#0a5fc0}
}

/* ---------- 3. Base ---------- */
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:20px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',system-ui,sans-serif;overflow-x:hidden}
a{color:inherit}button{font:inherit}img{max-width:100%}
.wrap{width:min(1160px,calc(100% - 40px));margin:auto}
.skip{position:absolute;left:-999px;top:0}.skip:focus{left:14px;top:14px;z-index:1000;background:var(--paper);color:var(--ink);padding:10px 14px;border-radius:8px}
:focus-visible{outline:3px solid #9cc9fb;outline-offset:2px}

/* ---------- 4. Menú: logotipo, enlaces del diseño y selector de idioma (igual que autorys.com) ---------- */
.nav{display:flex;align-items:center;gap:26px;padding:16px 0;font-size:14px;font-weight:700}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;margin-right:auto;font:800 17px 'Manrope',sans-serif;letter-spacing:-.02em;color:var(--ink)}
.brand b{color:var(--blue-2)}.brand img{display:block}
.nav-links{display:flex;gap:26px}.nav-links a{text-decoration:none;color:var(--muted)}.nav-links a:hover{color:var(--blue)}
.lang{position:relative}
.lang-btn{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:999px;padding:8px 12px;font-weight:700;cursor:pointer}
.lang-menu{display:none;position:absolute;right:0;top:44px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);padding:6px;border-radius:12px;width:150px;z-index:30}
.lang.open .lang-menu{display:block}
.lang-menu a{display:block;padding:8px 10px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:14px;font-weight:500}
.lang-menu a:hover{background:var(--soft)}
.lang-menu a.active{font-weight:700;color:var(--blue-2)}

/* ---------- 5. Hero ---------- */
.hero{position:relative;isolation:isolate;background:var(--navy);color:white;overflow:hidden;padding:72px 0 88px}
.hero:after{content:"";position:absolute;inset:auto -15% -44% 28%;height:520px;background:radial-gradient(ellipse,rgba(8,125,242,.34),transparent 66%);z-index:-1}
.hero-grid{display:grid;grid-template-columns:1.03fr .82fr;gap:72px;align-items:center}
/* El H1 (palabras clave) se ve como la etiqueta pequeña del diseño */
.kicker{display:flex;align-items:center;gap:11px;font:700 14px/1.4 'DM Sans',sans-serif;color:var(--cyan);margin:0 0 20px;letter-spacing:0}
.kicker i{width:30px;height:2px;background:currentColor;flex:none}
/* La frase grande del diseño (antes era el H1) */
.display{font:800 clamp(42px,6vw,76px)/.98 'Manrope',sans-serif;letter-spacing:-.055em;margin:0;max-width:720px}
.hero .lead{font-size:clamp(18px,2vw,22px);line-height:1.55;color:#c7d7e4;max-width:660px;margin:26px 0 32px}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{border:0;border-radius:12px;padding:15px 22px;font-weight:800;text-decoration:none;display:inline-flex;justify-content:center;align-items:center;gap:9px;cursor:pointer}
.btn-primary{background:var(--btn);color:white}.btn-primary:hover{background:#2690fa}
.btn-ghost{border:1px solid #456276;color:white;background:transparent}
.btn-dark{background:var(--navy);color:white}
.btn-outline{border:1px solid var(--line);background:transparent;color:var(--ink)}
.trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:34px;color:#b8cad8;font-size:14px}
.trust span{display:flex;align-items:center;gap:8px}.trust span:before{content:"✓";color:var(--cyan);font-weight:900}
.portrait{position:relative;max-width:475px;margin-left:auto}
.portrait img{width:100%;height:auto;display:block;border-radius:50% 50% 22px 22px;aspect-ratio:1/1.08;object-fit:cover;object-position:center top;box-shadow:0 35px 70px rgba(0,0,0,.35)}
.bubble{position:absolute;background:white;color:#173047;padding:13px 16px;border-radius:16px 16px 16px 5px;font-size:14px;box-shadow:0 12px 30px rgba(0,0,0,.18);max-width:210px}
.bubble strong{display:block;color:#0569cf;margin-bottom:3px}
.b1{left:-32px;top:15%}.b2{right:-28px;bottom:13%;border-radius:16px 16px 5px 16px}

/* ---------- 6. Secciones ---------- */
section{padding:92px 0}
.eyebrow{color:var(--blue-2);font-weight:800;font-size:14px;margin:0 0 14px}
.section-title{font:800 clamp(31px,4.2vw,52px)/1.08 'Manrope',sans-serif;letter-spacing:-.04em;margin:0;max-width:760px}
.section-copy{color:var(--muted);font-size:18px;line-height:1.65;max-width:680px;margin:20px 0 0}

/* ---------- 7. Video vertical (YouTube Shorts): portada ligera → reproductor al dar play ---------- */
.video-section{padding-top:76px}
.video-shell{margin-top:36px;aspect-ratio:16/9;background:#03111d;border-radius:24px;box-shadow:var(--shadow);display:grid;place-items:center;position:relative;overflow:hidden;border:1px solid #1f405a;padding:28px 0}
.video-shell:before{content:"";position:absolute;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(8,125,242,.32),transparent 65%)}
.video-facade,.video-frame{position:relative;z-index:1;display:block;height:100%;aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.video-facade img{width:100%;height:100%;object-fit:cover;display:block}
.video-frame iframe{width:100%;height:100%;border:0;display:block}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:68px;height:68px;border-radius:50%;background:var(--btn);display:grid;place-items:center;box-shadow:0 0 0 10px rgba(8,125,242,.22);transition:transform .15s}
.play:after{content:"";margin-left:5px;border-left:18px solid white;border-top:11px solid transparent;border-bottom:11px solid transparent}
.video-facade:hover .play{transform:translate(-50%,-50%) scale(1.07)}
.video-note{color:var(--muted);font-size:13px;margin:12px 0 0;text-align:center}

/* ---------- 8. Cómo funciona ---------- */
.flow{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:start}
.steps{margin-top:38px}.step{display:grid;grid-template-columns:48px 1fr;gap:18px;padding:22px 0;border-top:1px solid var(--line)}.step:last-child{border-bottom:1px solid var(--line)}
.num{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--blue-2);font-weight:800}
.step h3{margin:0 0 7px;font-size:19px}.step p{margin:0;color:var(--muted);line-height:1.55}
.console{background:var(--paper);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);padding:20px}
.console-top{display:flex;gap:7px;border-bottom:1px solid var(--line);padding-bottom:16px}.dot{width:9px;height:9px;border-radius:50%;background:#d6e0e7}
.console-title{font-weight:800;margin:24px 0 18px}
.metric{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-top:1px solid var(--line)}.metric span{color:var(--muted)}.metric strong{color:var(--success)}
.chat-card{background:var(--soft);border-radius:15px;padding:15px;margin-top:15px}.chat-card small{color:var(--muted)}.chat-card p{margin:7px 0 0;line-height:1.45}
.tag{display:inline-block;background:var(--paper);border-radius:999px;padding:5px 9px;font-size:12px;color:var(--blue-2);font-weight:800;margin-top:10px}

/* ---------- 9. Planes y precios ---------- */
.pricing{background:var(--paper)}
.billing{display:inline-flex;padding:5px;background:var(--bg);border:1px solid var(--line);border-radius:13px;margin:30px 0 34px}
.billing button{border:0;background:transparent;color:var(--muted);padding:10px 16px;border-radius:9px;cursor:pointer;font-weight:800}
.billing button.active{background:var(--navy);color:white}.billing .save{font-size:12px;color:var(--success);margin-left:4px}
.billing button.active .save{color:#63d9b5}
.plans{display:grid;grid-template-columns:.92fr 1.08fr;gap:20px;align-items:stretch}
.plan{background:var(--bg);border:1px solid var(--line);border-radius:22px;padding:30px}
.plan.featured{background:var(--navy);color:white;border-color:transparent;position:relative;box-shadow:var(--shadow)}
.recommended{position:absolute;right:24px;top:24px;background:var(--cyan);color:#03233a;font-size:12px;font-weight:900;padding:7px 10px;border-radius:999px}
.plan h3{font:800 25px 'Manrope',sans-serif;margin:0 0 8px}
.plan .desc{color:var(--muted);line-height:1.5;min-height:48px}
.featured .desc,.featured .detail{color:#aec4d4}
.price{display:flex;align-items:flex-end;gap:7px;margin:26px 0 5px;flex-wrap:wrap}
.price strong{font:800 48px/1 'Manrope',sans-serif;letter-spacing:-.05em}
.price span{color:var(--muted);padding-bottom:6px}
.price .from{flex-basis:100%;padding:0;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.featured .price span{color:#aec4d4}
.detail{color:var(--muted);font-size:14px}
.checks{list-style:none;padding:0;margin:26px 0 30px}
.checks li{padding:10px 0 10px 28px;position:relative;border-top:1px solid var(--line)}
.featured .checks li{border-color:#294459}
.checks li:before{content:"✓";position:absolute;left:2px;color:var(--blue);font-weight:900}
.featured .checks li:before{color:var(--cyan)}
.plan .btn{width:100%}.featured .btn{background:var(--btn);color:white}.featured .btn:hover{background:#2690fa}
.bundle-note{margin-top:24px;color:#aec4d4;font-size:14px;line-height:1.5}.bundle-note strong{color:#63d9b5}
.guarantee{margin:26px 0 0;padding:14px 18px;border-radius:14px;background:var(--soft);color:var(--ink);line-height:1.5}
.guarantee strong{color:var(--success)}
.tax{font-size:12px;color:var(--muted);margin-top:14px;line-height:1.5}
.volume-callout{margin-top:24px;padding:22px 24px;border:1px solid var(--line);border-radius:18px;background:var(--soft);display:flex;align-items:center;justify-content:space-between;gap:24px}
.volume-callout h3{margin:0 0 6px;font-size:20px}.volume-callout p{margin:0;color:var(--muted);line-height:1.5}.volume-callout .btn{flex:0 0 auto}
.channel-picker{margin-top:24px;padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--paper)}
.channel-picker h4{margin:0 0 14px}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:9px 12px;border-radius:999px;cursor:pointer}
.pill.active{background:var(--soft);border-color:var(--blue);color:var(--blue-2);font-weight:800}
.calc{display:flex;justify-content:space-between;gap:18px;align-items:end;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.calc small{color:var(--muted);display:block}.calc strong{font-size:25px}
.better{color:var(--success);font-size:13px;font-weight:800;margin-top:8px;line-height:1.45}

/* ---------- 10. Qué incluye ---------- */
.capabilities{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);margin-top:42px;border:1px solid var(--line);border-radius:22px;overflow:hidden}
.cap{background:var(--paper);padding:30px}
.cap .icon{font:800 14px 'Manrope',sans-serif;color:var(--blue-2);margin-bottom:28px}
.cap h3{margin:0 0 9px;font-size:21px}.cap p{color:var(--muted);line-height:1.55;margin:0}

/* ---------- 11. Preguntas frecuentes (sin JavaScript) ---------- */
.faq-list{max-width:820px;margin-top:36px;border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line);padding:0}
summary{cursor:pointer;padding:22px 36px 22px 0;font-weight:800;position:relative;list-style:none}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";position:absolute;right:4px;top:17px;font-size:25px;color:var(--blue)}
details[open] summary:after{content:"–"}
.answer{color:var(--muted);line-height:1.6;padding:0 36px 22px 0}

/* ---------- 12. Cierre ---------- */
.cta{padding-top:38px}
.cta-box{background:var(--btn);color:white;padding:50px;border-radius:26px;display:flex;justify-content:space-between;align-items:center;gap:32px}
.cta-box h2{font:800 clamp(29px,4vw,46px)/1.08 'Manrope',sans-serif;letter-spacing:-.04em;margin:0;max-width:680px}
.cta-box p{margin:12px 0 0;color:#fff;line-height:1.5} /* blanco: el azul claro no alcanzaba el contraste 4.5:1 */
.cta-box .btn{background:white;color:#064e93;flex:0 0 auto}

/* ---------- 13. Pie ---------- */
footer{padding:42px 0 90px;color:var(--muted);font-size:14px}
.foot{display:flex;justify-content:space-between;align-items:center;gap:24px;border-top:1px solid var(--line);padding-top:26px}
.foot img{width:170px;height:auto;display:block}
.foot p{margin:0;text-align:right;line-height:1.6}.foot a{text-decoration:none}.foot a:hover{color:var(--blue)}
.foot-legal{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px;font-size:13px}.foot-legal a{text-decoration:none}.foot-legal a:hover{color:var(--blue)}

/* ---------- 14. Globo "Hablar con Karla" en píldora (igual que la portada de autorys.com) ---------- */
#autorys-contact.ac-pill .ac-btn{width:auto;height:auto;min-height:60px;border-radius:999px;padding:11px 18px 11px 11px;gap:11px;font:700 15px/1 'DM Sans',system-ui,sans-serif;background:var(--btn);color:#fff;box-shadow:0 16px 38px rgba(8,124,240,.34)}
#autorys-contact.ac-pill .ac-btn:hover{background:var(--blue-deep);transform:none}
#autorys-contact.ac-pill .ac-bubble{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--btn);flex:none}
#autorys-contact.ac-pill .ac-bubble svg{width:21px;height:21px}
#autorys-contact.ac-pill .ac-label{white-space:nowrap}
#autorys-contact.ac-pill:not([data-state="closed"]) .ac-btn{width:60px;height:60px;padding:0;justify-content:center}
#autorys-contact.ac-pill:not([data-state="closed"]) .ac-bubble,
#autorys-contact.ac-pill:not([data-state="closed"]) .ac-label{display:none}
#autorys-contact.ac-pill .ac-panel,#autorys-contact.ac-pill .ac-chat{bottom:76px}

/* ---------- 15. Tableta y celular ---------- */
@media(max-width:900px){.nav-links{display:none}}
@media(max-width:800px){
  .wrap{width:min(100% - 28px,640px)}
  .hero{padding:42px 0 62px}
  .hero-grid,.flow,.plans{grid-template-columns:1fr;gap:44px}
  .display{font-size:46px}
  .portrait{max-width:390px;margin:auto}.b1{left:-5px}.b2{right:-4px}
  .trust{gap:12px}
  .video-shell{aspect-ratio:auto;padding:22px 0}
  .video-facade,.video-frame{height:auto;width:min(78vw,340px)}
  .plans{gap:16px}.plan .desc{min-height:0}.flow{gap:42px}
  .capabilities{grid-template-columns:1fr}
  .cta-box{padding:34px 26px;align-items:flex-start;flex-direction:column}.cta-box .btn{width:100%}
  .foot{flex-direction:column;align-items:flex-start}.foot p{text-align:left}
  .recommended{position:static;display:inline-block;margin-bottom:18px}
  .volume-callout{align-items:flex-start;flex-direction:column}.volume-callout .btn{width:100%}
}
@media(max-width:640px){
  #autorys-contact.ac-pill .ac-btn{min-height:0;padding:9px}
  #autorys-contact.ac-pill .ac-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  #autorys-contact.ac-pill:not([data-state="closed"]) .ac-btn{width:56px;height:56px}
  #autorys-contact.ac-pill .ac-panel{bottom:68px}
}
@media(max-width:430px){
  .brand span{display:none}
  .display{font-size:40px}.hero .lead{font-size:18px}.actions .btn{width:100%}
  .bubble{font-size:12px;max-width:175px}.b1{top:9%}.b2{bottom:6%}
  .price strong{font-size:43px}.plan{padding:24px}
  .calc{align-items:flex-start;flex-direction:column}
  .cta-box{border-radius:20px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.play{transition:none}}

/* =========================================================
   16. [Autorys · Diseño 2026-10-06] Pulido (el mismo de la portada de autorys.com)
   Pedido de Richard: que se vea más cuidada y menos "plantilla".
   - Logotipo horizontal completo en el menú (antes la "A" diminuta; en celular sin nombre)
     y el nombre del servicio en chico a un lado. Caja blanca solo en modo oscuro.
   - Etiquetas de sección en letra normal con una rayita delante (antes MAYÚSCULAS).
   - Movimiento suave: el inicio entra al cargar, los bloques aparecen al bajar (connect.js
     pone .rv en <html> solo si hay JavaScript), tarjetas que suben un poco al pasar el mouse
     y botones que se "hunden" al tocarlos. Todo se apaga si la persona pidió menos movimiento.
   - Celular: desvanecido a la derecha de la franja oscura (avisa que se recorre con el dedo).
   Deshacer: el instalador de la entrega sitios_diseno_20261006 tiene "revert".
   ========================================================= */

/* Curvas del movimiento (salida rápida y frenado suave; las mismas de la portada) */
:root{--ease-out:cubic-bezier(.23,1,.32,1)}

/* --- Logotipo horizontal + nombre del servicio --- */
.brand{gap:12px}
.brand img{width:auto;height:38px}
.brand .brand-prod{display:block;padding-left:12px;border-left:1px solid var(--line);font:700 16px/1.1 'DM Sans',system-ui,sans-serif;letter-spacing:-.01em;color:var(--blue-2)}
@media (prefers-color-scheme:dark){
  .brand img{background:#fff;padding:5px 9px;border-radius:9px;height:42px}
}

/* --- Etiquetas de sección: letra normal, con una rayita delante --- */
.eyebrow{display:flex;align-items:center;gap:10px;font:700 14px/1.4 'DM Sans',system-ui,sans-serif;text-transform:none;letter-spacing:0}
.eyebrow:before{content:"";flex:none;width:22px;height:2px;border-radius:2px;background:currentColor;opacity:.75}
.cap .icon{font:700 14px 'DM Sans',system-ui,sans-serif;letter-spacing:0}
.price .from{text-transform:none;letter-spacing:0;font-weight:700;font-size:14px}

/* --- Movimiento: botones que se hunden y tarjetas que responden --- */
.btn,.pill,.billing button,.lang-btn{transition:background-color .2s var(--ease-out),border-color .2s var(--ease-out),color .2s var(--ease-out),transform .16s var(--ease-out),box-shadow .2s var(--ease-out)}
.btn:active,.pill:active,.billing button:active,.lang-btn:active{transform:scale(.97)}
.plan,.cap,.console{transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),background-color .25s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .plan:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
  .cap:hover{background:color-mix(in srgb,var(--soft) 55%,var(--paper))}
  .btn-primary:hover,.featured .btn:hover{box-shadow:0 14px 30px rgba(8,124,240,.30)}
}

/* Aparecer al bajar: connect.js marca cada bloque con data-rv y le pone .in al entrar a la pantalla */
.rv [data-rv]{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);transition-delay:calc(var(--rv-i,0) * 70ms)}
.rv [data-rv].in{opacity:1;transform:none}

/* Entrada del inicio al cargar: los textos uno tras otro, la foto y luego los dos globos */
@keyframes rv-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes rv-pop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.hero-grid>div:first-child>*{animation:rv-up .7s var(--ease-out) both}
.hero-grid>div:first-child>:nth-child(2){animation-delay:.06s}
.hero-grid>div:first-child>:nth-child(3){animation-delay:.12s}
.hero-grid>div:first-child>:nth-child(4){animation-delay:.18s}
.hero-grid>div:first-child>:nth-child(5){animation-delay:.24s}
.portrait img{animation:rv-up .8s var(--ease-out) .12s both}
.portrait .b1{animation:rv-pop .5s var(--ease-out) .55s both}
.portrait .b2{animation:rv-pop .5s var(--ease-out) .75s both}

/* --- Franja de sitios en celular: desvanecido a la derecha (se recorre con el dedo) --- */
@media (max-width:700px){
  .asb .asb-links{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent);padding-right:18px}
}

/* --- Celular: logotipo completo y legible --- */
@media (max-width:600px){
  .brand{gap:10px}
  .brand img{height:32px}
  .brand .brand-prod{font-size:14px;padding-left:10px}
}
@media (max-width:400px){
  .brand img{height:30px}
}
@media (max-width:600px) and (prefers-color-scheme:dark){
  .brand img{height:36px;padding:4px 8px}
}

/* --- Menos movimiento: todo quieto si la persona lo pidió --- */
@media (prefers-reduced-motion:reduce){
  .rv [data-rv]{opacity:1;transform:none;transition:none}
  .hero-grid>div:first-child>*,.portrait img,.portrait .b1,.portrait .b2{animation:none}
  .btn,.pill,.billing button,.lang-btn,.plan,.cap,.console{transition:none}
  .btn:active,.pill:active,.billing button:active,.lang-btn:active{transform:none}
}