/* NexoVet web - versión "rediseño completo"
   Lenguaje: claro y aireado, barra flotante, tipografía Outfit + Geist, formas redondeadas.
   Radios: botones y etiquetas en píldora, tarjetas y capturas 24px, campos 14px.
   Tema automático según el sistema, con botón manual. */

@font-face{font-family:"Geist";src:url("../fonts/geist-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";src:url("../fonts/geist-latin-ext-wght-normal.woff2") format("woff2");font-weight:100 900;font-display:swap;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:"Outfit";src:url("../fonts/outfit-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Outfit";src:url("../fonts/outfit-latin-ext-wght-normal.woff2") format("woff2");font-weight:100 900;font-display:swap;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:"Geist Mono";src:url("../fonts/geist-mono-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --font:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Outfit","Geist",system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,Consolas,monospace;
  --bg:#EDF3F6; --bg-2:#FFFFFF; --surface:#FFFFFF; --surface-2:#F4F8FA;
  --text:#0A1822; --muted:#455968; --line:#D5E0E7; --line-strong:#B4C5D0;
  --accent:#00829A; --accent-text:#00667A; --accent-soft:rgba(0,130,154,.10); --accent-line:rgba(0,130,154,.30);
  --btn:#007A8F; --btn-hover:#008CA4; --on-btn:#FFFFFF;
  --island:rgba(255,255,255,.78); --island-solid:#FFFFFF;
  --shadow:0 2px 4px rgba(0,32,72,.05),0 30px 60px -24px rgba(0,32,72,.32);
  --mesh:radial-gradient(48% 42% at 12% 8%,rgba(0,130,154,.20),transparent 70%),radial-gradient(40% 38% at 92% 16%,rgba(0,32,72,.10),transparent 70%);
  --r-card:24px; --r-field:14px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#060F17; --bg-2:#0A1722; --surface:#0E1E2B; --surface-2:#12293A;
  --text:#E9F0F4; --muted:#9BB0BF; --line:#1B3243; --line-strong:#2B4A5F;
  --accent:#2BB3C8; --accent-text:#5AC9DB; --accent-soft:rgba(43,179,200,.12); --accent-line:rgba(43,179,200,.34);
  --island:rgba(14,30,43,.72); --island-solid:#0E1E2B;
  --shadow:0 2px 4px rgba(0,0,0,.45),0 34px 64px -26px rgba(0,0,0,.8);
  --mesh:radial-gradient(48% 42% at 12% 8%,rgba(43,179,200,.20),transparent 70%),radial-gradient(40% 38% at 92% 16%,rgba(30,90,160,.18),transparent 70%);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#060F17; --bg-2:#0A1722; --surface:#0E1E2B; --surface-2:#12293A;
    --text:#E9F0F4; --muted:#9BB0BF; --line:#1B3243; --line-strong:#2B4A5F;
    --accent:#2BB3C8; --accent-text:#5AC9DB; --accent-soft:rgba(43,179,200,.12); --accent-line:rgba(43,179,200,.34);
    --island:rgba(14,30,43,.72); --island-solid:#0E1E2B;
    --shadow:0 2px 4px rgba(0,0,0,.45),0 34px 64px -26px rgba(0,0,0,.8);
    --mesh:radial-gradient(48% 42% at 12% 8%,rgba(43,179,200,.20),transparent 70%),radial-gradient(40% 38% at 92% 16%,rgba(30,90,160,.18),transparent 70%);
    color-scheme:dark;
  }
}
.only-dark{display:none}
:root[data-theme="dark"] .only-dark{display:block}
:root[data-theme="dark"] .only-light{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .only-dark{display:block}
  :root:not([data-theme="light"]) .only-light{display:none}
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4,p,ul{margin:0}
ul{padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:10px}
.skip{position:absolute;left:-999px;top:8px;background:var(--btn);color:#fff;padding:8px 14px;border-radius:999px;z-index:100}
.skip:focus{left:8px}
.wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:24px}
@media (max-width:640px){.wrap{padding-inline:16px}}
.i{width:1.25em;height:1.25em;flex:none;display:inline-block;vertical-align:-.2em;fill:currentColor}
h1,h2,h3,.statement p.big,.fact b,.price .amt,.tier b{font-family:var(--display);word-spacing:.09em}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;height:52px;padding:0 28px;border-radius:999px;font-weight:600;font-size:1rem;line-height:1;text-decoration:none;white-space:nowrap;border:1px solid transparent;cursor:pointer;transition:background-color .25s,border-color .25s,transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s}
.btn:active{transform:translateY(1px) scale(.98)}
.btn-primary{background:var(--btn);color:var(--on-btn);box-shadow:0 14px 28px -14px rgba(0,122,143,.85)}
.btn-primary:hover{background:var(--btn-hover);transform:translateY(-2px)}
.btn-ghost{background:transparent;border-color:var(--line-strong);color:var(--text)}
.btn-ghost:hover{border-color:var(--accent);background:var(--accent-soft)}
.btn-sm{height:42px;padding:0 18px;font-size:.92rem}
.btn-light{background:#F4F9FB;color:#002048}
.btn-light:hover{background:#fff;transform:translateY(-2px)}
.icon-btn{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:999px;background:transparent;border:1px solid var(--line);cursor:pointer;color:var(--muted);transition:color .2s,border-color .2s,background-color .2s}
.icon-btn:hover:not(:disabled){color:var(--text);border-color:var(--line-strong);background:var(--accent-soft)}
.icon-btn:disabled{opacity:.35;cursor:default}
.icon-btn .i{width:1.2rem;height:1.2rem}
.theme-sun{display:none}
:root[data-theme="dark"] .theme-sun{display:inline-block}
:root[data-theme="dark"] .theme-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-sun{display:inline-block}
  :root:not([data-theme="light"]) .theme-moon{display:none}
}

/* ---------- barra flotante ---------- */
.site-header{position:sticky;top:12px;z-index:50;padding-inline:16px;pointer-events:none}
.island{pointer-events:auto;max-width:1280px;height:64px;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 10px 0 22px;border-radius:999px;border:1px solid var(--line);background:var(--island-solid);box-shadow:0 10px 30px -14px rgba(0,32,72,.35);transition:box-shadow .3s}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .island{background:var(--island);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)}
}
.site-header.scrolled .island{box-shadow:0 18px 40px -16px rgba(0,32,72,.5)}
.brand{display:flex;align-items:center;text-decoration:none;flex:none}
.brand img{height:36px;width:auto}
.nav{display:flex;align-items:center;gap:4px}
.nav a.link{font-size:.94rem;font-weight:500;color:var(--muted);text-decoration:none;white-space:nowrap;padding:8px 10px;border-radius:999px;transition:color .2s,background-color .2s}
.nav a.link:hover{color:var(--text);background:var(--accent-soft)}
.nav a.link[aria-current="page"]{color:var(--accent-text);background:var(--accent-soft)}
.header-actions{display:flex;align-items:center;gap:6px}
.burger{display:none}
.mobile-menu{display:none;position:fixed;inset:88px 16px auto 16px;z-index:49;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:10px 18px 20px;box-shadow:var(--shadow)}
.mobile-menu.open{display:block}
.mobile-menu a.link{display:block;padding:14px 4px;font-weight:500;text-decoration:none;border-bottom:1px solid var(--line)}
.mobile-menu .btn{width:100%;margin-top:12px}
@media (max-width:1320px){
  .nav,.header-actions .btn-ghost,.header-actions .btn-primary{display:none}
  .burger{display:inline-grid}
  .island{padding-left:18px}
}
@media (min-width:1321px){.mobile-menu{display:none!important}}

/* ---------- secciones ---------- */
.section{padding-block:clamp(4.5rem,9vw,8rem)}
h2.title{font-size:clamp(2rem,1.1rem + 3vw,3.4rem);line-height:1.04;letter-spacing:-.035em;font-weight:650;text-wrap:balance}
.lede{color:var(--muted);font-size:1.15rem;max-width:56ch;margin-top:1.1rem}

/* ---------- hero ---------- */
.hero{position:relative;margin-top:-64px;padding-top:calc(76px + clamp(2rem,5vw,4rem));padding-bottom:clamp(3rem,6vw,6rem);background:var(--mesh);overflow:clip}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,4vw,4rem);align-items:center}
.hero-tag{color:var(--accent-text);font-weight:600;margin-bottom:1rem}
.hero h1{font-size:clamp(2.6rem,1rem + 3.9vw,4.1rem);line-height:.98;letter-spacing:-.045em;font-weight:650;text-wrap:balance}
.hero h1 .hl{color:var(--accent-text);white-space:nowrap}
.hero .lede{margin-top:1.4rem;font-size:1.2rem}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:2rem}
.stage{position:relative;padding-bottom:12%}
.frame{margin:0;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);box-shadow:var(--shadow);overflow:hidden}
.frame img{display:block;width:100%;height:auto}
.frame-bar{display:flex;align-items:center;gap:10px;padding:10px 18px;border-bottom:1px solid var(--line);background:var(--surface-2);color:var(--muted);font-family:var(--mono);font-size:.76rem}
.stage .main{position:relative;z-index:1}
.stage .second{position:absolute;z-index:2;width:62%;left:-9%;bottom:0;border-radius:20px}
@media (min-width:1101px){.stage .main{margin-right:-10%}}
@media (max-width:1100px){
  .hero-grid{grid-template-columns:1fr}
  .stage{padding-bottom:0}
  .stage .second{display:none}
}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:scroll()){
    .stage .second{animation:drift linear both;animation-timeline:scroll(root);animation-range:0 520px}
    @keyframes drift{to{transform:translateY(-56px)}}
  }
}

/* ---------- frase + datos ---------- */
.statement{background:var(--bg-2)}
.statement p.big{font-family:var(--display);font-size:clamp(1.7rem,1rem + 2.5vw,3rem);line-height:1.18;letter-spacing:-.03em;font-weight:550;max-width:24em;text-wrap:balance}
.statement p.big span{color:var(--muted)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:0 48px;margin-top:clamp(2.5rem,5vw,4rem)}
.fact{padding-top:22px;border-top:1px solid var(--line-strong)}
.fact b{display:block;font-family:var(--display);font-size:clamp(2.6rem,2rem + 2.4vw,4rem);line-height:1;letter-spacing:-.04em;font-weight:600;color:var(--accent-text)}
.fact span{display:block;margin-top:.6rem;color:var(--muted)}
@media (max-width:760px){.facts{grid-template-columns:1fr;gap:28px}}

/* ---------- capturas (carrusel) ---------- */
.shots-head{display:flex;align-items:end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.arrows{display:flex;gap:8px}
.track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:max(24px,calc((100vw - 1200px)/2 + 24px));padding:clamp(2rem,4vw,3rem) max(24px,calc((100vw - 1200px)/2 + 24px)) 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.track::-webkit-scrollbar{display:none}
.slide{flex:0 0 min(86vw,920px);scroll-snap-align:start;margin:0}
.slide figcaption{margin-top:16px;color:var(--muted);font-size:1rem;display:flex;gap:10px;align-items:baseline}
.slide figcaption b{font-family:var(--display);color:var(--text);font-weight:600;font-size:1.1rem;white-space:nowrap}
@media (max-width:640px){.track{padding-inline:16px;scroll-padding-inline:16px}}

/* ---------- funcionalidades por categoría ---------- */
.cats{display:inline-flex;flex-wrap:wrap;gap:6px;padding:6px;margin-top:2rem;border-radius:999px;border:1px solid var(--line);background:var(--surface)}
.tab{height:46px;padding:0 22px;border-radius:999px;border:0;background:transparent;color:var(--muted);font-weight:600;font-size:.97rem;cursor:pointer;transition:background-color .2s,color .2s}
.tab:hover{color:var(--text)}
.tab[aria-selected="true"]{background:var(--btn);color:#fff}
.tabpanel[hidden]{display:none}
.tabpanel{margin-top:clamp(2rem,4vw,3rem);animation:fadeUp .5s cubic-bezier(.16,1,.3,1)}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;padding:clamp(1.5rem,3vw,2.5rem);border-radius:var(--r-card);background:var(--surface);border:1px solid var(--line)}
.feature .frame{box-shadow:none}
.mod-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:.9rem}
.mod-top .i{width:1.9rem;height:1.9rem;color:var(--accent)}
.mod h3{font-size:1.5rem;line-height:1.15;letter-spacing:-.025em;font-weight:600}
.mod .desc{color:var(--muted);margin:.5rem 0 1rem;font-size:1rem}
.mod ul{display:grid;gap:9px;color:var(--muted);font-size:.97rem}
.mod li{position:relative;padding-left:20px}
.mod li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--accent);opacity:.75}
.mod li b{color:var(--text);font-weight:600}
.addon{color:var(--text);font-weight:500}
.mods{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(2rem,5vw,4.5rem);margin-top:clamp(1.5rem,3vw,2.5rem)}
.mods .mod{padding:32px 0;border-top:1px solid var(--line-strong)}
.mods .mod:last-child:nth-child(odd){grid-column:span 2}
.badge{display:inline-flex;align-items:center;height:28px;padding:0 13px;border-radius:999px;font-size:.74rem;font-weight:650;letter-spacing:.02em;white-space:nowrap;border:1px solid var(--line-strong);color:var(--muted)}
.badge.pro{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-text)}
.badge.rec{background:var(--btn);border-color:var(--btn);color:#fff}
@media (max-width:900px){
  .feature{grid-template-columns:1fr}
  .mods{grid-template-columns:1fr}
  .mods .mod:last-child:nth-child(odd){grid-column:span 1}
  .cats{display:flex;border-radius:24px}
  .tab{flex:1 1 auto;padding:0 14px}
}

/* ---------- por qué ---------- */
.why-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.why-grid .sticky{position:sticky;top:110px}
.why-item{display:flex;gap:20px;padding:30px 0;border-top:1px solid var(--line-strong)}
.why-item:first-child{border-top:0;padding-top:0}
.why-item .i{width:2.1rem;height:2.1rem;color:var(--accent);margin-top:2px}
.why-item h3{font-size:1.35rem;font-weight:600;letter-spacing:-.02em;margin-bottom:.45rem}
.why-item p{color:var(--muted)}
@media (max-width:900px){.why-grid{grid-template-columns:1fr}.why-grid .sticky{position:static}}

/* ---------- planes + contacto ---------- */
.plans-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px;padding:clamp(1.8rem,4vw,3rem) clamp(1.5rem,4vw,3.5rem);border-radius:var(--r-card);background:var(--surface);border:1px solid var(--line)}
.plans-band h2{font-size:clamp(1.6rem,1.1rem + 1.8vw,2.4rem);line-height:1.1;letter-spacing:-.03em;font-weight:600;max-width:18em;text-wrap:balance}
.plans-band p{color:var(--muted);margin-top:.5rem}
.contact{position:relative;overflow:hidden;border-radius:32px;padding:clamp(3rem,7vw,6rem) clamp(1.5rem,6vw,5rem);background:radial-gradient(70% 90% at 100% 0%,rgba(43,179,200,.38),transparent 60%),linear-gradient(145deg,#002048 0%,#003B52 100%);color:#F2F8FA}
.contact h2{font-family:var(--display);font-size:clamp(2.2rem,1.2rem + 3.6vw,4rem);line-height:1;letter-spacing:-.04em;font-weight:650;max-width:12em;text-wrap:balance}
.contact p.sub{margin-top:1.2rem;color:#C8DCE4;max-width:44ch;font-size:1.15rem}
.contact .row{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px;margin-top:2.2rem}
.contact a.client{color:#D5E8EE;text-underline-offset:4px}
.contact a.client:hover{color:#fff}
@media (max-width:520px){.contact .btn{white-space:normal;height:auto;min-height:52px;padding:14px 20px;text-align:left;overflow-wrap:anywhere;width:100%}}

/* ---------- footer ---------- */
.site-footer{padding-block:56px 40px;margin-top:clamp(3rem,6vw,5rem);border-top:1px solid var(--line)}
.site-footer .top{display:flex;flex-wrap:wrap;gap:32px;align-items:center;justify-content:space-between}
.site-footer .logo{height:96px;width:auto}
.f-links{display:flex;flex-wrap:wrap;gap:12px 28px}
.f-links a{color:var(--muted);text-decoration:none;font-weight:500;font-size:.96rem}
.f-links a:hover{color:var(--text)}
.site-footer .legal{margin-top:32px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:.88rem;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}

/* ---------- movimiento ---------- */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--d,0) * 90ms)}
[data-reveal].in{opacity:1;transform:none}
.no-js [data-reveal]{opacity:1;transform:none}
/* preguntas frecuentes */
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-field);padding:0 22px}
.faq-item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:18px;font-weight:600;font-size:1.05rem;color:var(--text)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-text);font-size:1.3rem;line-height:1;transition:transform .2s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}
.faq-item p{color:var(--muted);padding-bottom:20px;max-width:62ch}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr}}

/* botón flotante: volver al inicio */
.to-top{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--btn);color:var(--on-btn);box-shadow:0 14px 28px -12px rgba(0,32,72,.55);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .25s,transform .25s,visibility .25s,background .2s}
.to-top .i{width:22px;height:22px;fill:currentColor}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--btn-hover)}
.to-top:focus-visible{outline:3px solid var(--accent,var(--btn));outline-offset:3px}
@media (min-width:900px){.to-top{right:28px;bottom:28px;width:52px;height:52px}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-reveal]{opacity:1;transform:none}
}

/* ---------- página de precios ---------- */
.page-hero{margin-top:-64px;padding-top:calc(76px + clamp(2.5rem,6vw,5rem));padding-bottom:clamp(1.5rem,3vw,2.5rem);background:var(--mesh)}
.page-hero h1{font-size:clamp(2.5rem,1rem + 4.6vw,4.4rem);line-height:1;letter-spacing:-.045em;font-weight:650;max-width:13em;text-wrap:balance}
.page-hero p{margin-top:1.2rem;color:var(--muted);font-size:1.15rem;max-width:54ch}
.controls{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:2.2rem}
.seg{display:inline-flex;padding:5px;border-radius:999px;border:1px solid var(--line);background:var(--surface)}
.seg button{height:44px;padding:0 22px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-weight:600;font-size:.96rem;cursor:pointer;transition:background-color .2s,color .2s}
.seg button[aria-pressed="true"]{background:var(--btn);color:#fff}
.seg .save{font-family:var(--mono);font-size:.78rem;margin-left:6px}
.fx{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.96rem}
.fx label{font-weight:500}
.fx input{width:116px;height:44px;padding:0 14px;border-radius:var(--r-field);border:1px solid var(--line-strong);background:var(--surface);color:var(--text);font-family:var(--mono);font-size:.96rem}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
.plan{display:flex;flex-direction:column;gap:18px;padding:30px 24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);min-width:0}
.plan.rec{--text:#F2F8FA;--muted:#B7CFD9;--line:rgba(255,255,255,.16);--accent:#5FD3E4;color:var(--text);border:0;background:radial-gradient(90% 70% at 100% 0%,rgba(43,179,200,.34),transparent 62%),linear-gradient(160deg,#002048,#00485E);box-shadow:var(--shadow)}
.plan-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px}
.plan h2{font-size:1.35rem;font-weight:600;letter-spacing:-.02em}
.plan .users{color:var(--muted);margin-top:-10px}
.price{display:flex;align-items:baseline;gap:6px}
.price .amt{font-family:var(--display);font-size:2.6rem;font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1.05}
.price .per{color:var(--muted)}
.ars{font-family:var(--mono);font-size:.82rem;color:var(--muted);min-height:1.4em;margin-top:-10px;font-variant-numeric:tabular-nums}
.feat{display:grid;gap:11px;font-size:.96rem}
.feat li{display:flex;gap:10px;align-items:flex-start}
.feat li .i{width:1.05rem;height:1.05rem;margin-top:.28em;color:var(--accent)}
.feat li.inh{font-weight:650}
.plan .extra{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:grid;gap:4px;font-size:.88rem;color:var(--muted)}
.plan .extra b{color:var(--text);font-weight:600}
.plan .btn{width:100%}
.plan.rec .btn-primary{background:#F4F9FB;color:#002048;box-shadow:none}
.plan.rec .btn-primary:hover{background:#fff}
@media (max-width:1180px){.plans{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.plans{grid-template-columns:1fr}}
.sub-head{margin-top:clamp(3.5rem,7vw,6rem);margin-bottom:1.6rem}
.sub-head h2{font-size:clamp(1.8rem,1rem + 2.2vw,2.6rem);letter-spacing:-.035em;font-weight:650;line-height:1.05}
.sub-head p{margin-top:.6rem;color:var(--muted);max-width:60ch}
.addons{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
.addon-card{padding:32px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card)}
.addon-card h3{display:flex;align-items:center;gap:12px;font-size:1.35rem;font-weight:600;letter-spacing:-.02em}
.addon-card h3 .i{color:var(--accent);width:1.6rem;height:1.6rem}
.addon-card p{margin-top:.7rem;color:var(--muted)}
.addon-card p small{display:block;margin-top:.45rem;font-size:.9rem}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:1.6rem}
.tier{padding:16px;border-radius:var(--r-field);background:var(--surface-2);border:1px solid var(--line)}
.tier span{display:block;font-size:.84rem;color:var(--muted)}
.tier b{display:block;font-family:var(--display);font-size:1.5rem;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tier em{display:block;font-style:normal;font-family:var(--mono);font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums}
.tbd{margin-top:1.6rem;padding:16px;border-radius:var(--r-field);border:1px dashed var(--line-strong);color:var(--muted);font-weight:500}
@media (max-width:900px){.addons{grid-template-columns:1fr}}
@media (max-width:480px){.tiers{grid-template-columns:1fr}}
.terms{display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px}
.term{padding:24px 0;border-top:1px solid var(--line-strong)}
.term h3{font-size:1.15rem;font-weight:600;margin-bottom:.4rem}
.term p{color:var(--muted)}
@media (max-width:760px){.terms{grid-template-columns:1fr}}
.note{margin-top:2rem;color:var(--muted);font-size:.88rem}

.shot-bar span,.frame-bar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (max-width:520px){.cta-row .btn{width:100%}}

/* ---------- manual y páginas por tema ---------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:1.1rem;font-size:.9rem;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--text);text-decoration:underline}
.crumbs .sep{opacity:.5}
.crumbs [aria-current]{color:var(--text);font-weight:500}
.page-hero.compact h1{font-size:clamp(2.1rem,1rem + 3.6vw,3.5rem);max-width:17em}
.page-hero .cta-row{margin-top:1.6rem}

.doc-section{padding-top:clamp(2rem,4vw,3.5rem)}
.doc{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.doc-nav{position:sticky;top:96px;display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 120px);overflow:auto;padding-right:6px}
.doc-nav>b,.toc>b{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:600}
.doc-nav ul,.doc-nav-m ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:2px}
.doc-nav a,.doc-nav-m li a{display:block;padding:7px 12px;border-radius:10px;color:var(--muted);text-decoration:none;font-size:.95rem;font-weight:500}
.doc-nav a:hover,.doc-nav-m li a:hover{color:var(--text);background:var(--accent-soft)}
.doc-nav a[aria-current],.doc-nav-m a[aria-current]{color:var(--accent-text);background:var(--accent-soft);font-weight:600}
.doc-nav .pdf-link{display:flex;align-items:center;gap:8px;margin-top:8px;border:1px solid var(--line-strong);color:var(--text)}
.doc-nav .pdf-link .i{width:1.2rem;height:1.2rem;color:var(--accent)}
.doc-nav-m{display:none;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-field);padding:0 14px}
.doc-nav-m summary{cursor:pointer;padding:14px 0;font-weight:600;list-style:none}
.doc-nav-m summary::-webkit-details-marker{display:none}
.doc-nav-m ul{padding-bottom:12px}
@media (max-width:900px){.doc{grid-template-columns:minmax(0,1fr)}.doc-nav{display:none}.doc-nav-m{display:block}}

.prose{min-width:0;max-width:760px}
.prose h2{font-size:clamp(1.5rem,1rem + 1.5vw,2rem);line-height:1.15;letter-spacing:-.03em;font-weight:650;margin:2.8rem 0 .9rem;scroll-margin-top:96px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.25rem;letter-spacing:-.02em;font-weight:600;margin:2rem 0 .7rem;scroll-margin-top:96px}
.prose p{margin:0 0 1rem;color:var(--text)}
.prose a{color:var(--accent-text);text-underline-offset:3px}
.prose ul,.prose ol{margin:0 0 1.2rem;padding-left:1.4rem;display:grid;gap:.55rem}
.prose li::marker{color:var(--accent-text)}
.prose li b{font-weight:600}
.shot{margin:1.6rem 0;border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden;box-shadow:var(--shadow)}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{padding:12px 18px;border-top:1px solid var(--line);background:var(--surface-2);color:var(--muted);font-size:.88rem}
.shot figcaption b{color:var(--text);font-weight:600}
.callout{border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:var(--r-field);padding:14px 18px;margin:1.4rem 0}
.callout b{color:var(--accent-text)}
.toc{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-field);padding:16px 20px;margin-bottom:2rem}
.toc ul{list-style:none;padding:0;margin:.6rem 0 0;display:grid;gap:4px}
.toc a{text-decoration:none;color:var(--text);font-size:.97rem}
.toc a:hover{color:var(--accent-text)}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:3rem}
.pg{display:flex;flex-direction:column;gap:2px;padding:16px 20px;border:1px solid var(--line);border-radius:var(--r-field);background:var(--surface);text-decoration:none;color:var(--text)!important;transition:border-color .2s,background-color .2s}
.pg:hover{border-color:var(--accent);background:var(--accent-soft)}
.pg span{font-size:.82rem;color:var(--muted)}
.pg.next{text-align:right;grid-column:2}
.pg.prev:only-child{grid-column:1}
@media (max-width:520px){.pager{grid-template-columns:1fr}.pg.next{grid-column:1}}
.ch-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:1rem 0 1.6rem}
.ch-card{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-field);background:var(--surface);text-decoration:none;color:var(--text)!important;transition:border-color .2s,transform .2s}
.ch-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.ch-card .n{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-text);font-family:var(--display);font-weight:650}
.ch-card .t{flex:1;min-width:0;display:flex;flex-direction:column}
.ch-card .t b{font-weight:600}
.ch-card small{color:var(--muted);font-size:.84rem;line-height:1.4;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ch-card .i{flex:none;width:1.1rem;height:1.1rem;color:var(--muted)}
@media (max-width:700px){.ch-grid{grid-template-columns:1fr}}
.roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:1rem 0}
.role{padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-field);background:var(--surface)}
.role h3{margin:0 0 .3rem;font-size:1.1rem}
.role p{margin:0;color:var(--muted);font-size:.95rem}
@media (max-width:700px){.roles{grid-template-columns:1fr}}

.plan-tag{display:inline-flex;align-items:center;gap:8px;margin:0 0 1.4rem;color:var(--accent-text);font-weight:600;font-size:.95rem}
.plan-tag .i{width:1.25rem;height:1.25rem}
.tcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.tcard{padding:24px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface)}
.tcard .i{width:1.9rem;height:1.9rem;color:var(--accent);margin-bottom:.9rem}
.tcard h3{font-size:1.2rem;letter-spacing:-.02em;font-weight:600;margin-bottom:.5rem}
.tcard p{color:var(--muted);font-size:.97rem}
@media (max-width:1100px){.tcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.tcards{grid-template-columns:1fr}}
.topic-sec.alt{background:var(--bg-2)}
.topic-sec{padding-block:clamp(3rem,6vw,5rem)}
.topic-sec .sub-head{margin-top:0}
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.shots .shot{margin:0}
@media (max-width:900px){.shots{grid-template-columns:1fr}}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:st}
.steps li{counter-increment:st;padding:22px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);color:var(--muted);position:relative}
.steps li::before{content:counter(st);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent-text);font-family:var(--display);font-weight:650;margin-bottom:.8rem}
@media (max-width:1000px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.topic-cta{padding:clamp(1.8rem,4vw,3rem);border-radius:var(--r-card);background:var(--surface);border:1px solid var(--accent-line)}
.topic-cta h2{font-size:clamp(1.6rem,1rem + 2vw,2.4rem);letter-spacing:-.035em;line-height:1.1;font-weight:650;max-width:20em;text-wrap:balance}
.topic-cta p{margin-top:.8rem;color:var(--muted);max-width:56ch}
.rels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:1.4rem}
.rel{display:flex;align-items:center;gap:12px;padding:16px 20px;border:1px solid var(--line);border-radius:var(--r-field);text-decoration:none;color:var(--text)!important;background:var(--surface);transition:border-color .2s}
.rel:hover{border-color:var(--accent)}
.rel span{font-size:.82rem;color:var(--muted)}
.rel b{flex:1;font-weight:600}
.rel .i{width:1.1rem;height:1.1rem;color:var(--accent)}
@media (max-width:620px){.rels{grid-template-columns:1fr}}
.mod-link{display:inline-flex;align-items:center;gap:6px;margin-top:1rem;color:var(--accent-text);font-weight:600;font-size:.95rem;text-decoration:none}
.mod-link:hover{text-decoration:underline}
.mod-link .i{width:1rem;height:1rem}
.f-mods{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:28px;padding-top:22px;border-top:1px solid var(--line);align-items:center}
.f-mods span{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:600}
.f-mods a{color:var(--muted);text-decoration:none;font-size:.92rem}
.f-mods a:hover{color:var(--text)}
@media (max-width:480px){.page-hero h1{font-size:clamp(2rem,9.2vw,2.3rem)}.page-hero.compact h1{font-size:clamp(1.75rem,7.6vw,2rem);letter-spacing:-.035em}}
.shots{align-items:start}

/* ---------- selector de idioma ---------- */
.lang-sw{display:inline-flex;align-items:center;height:36px;padding:3px;border:1px solid var(--line-strong);border-radius:999px;background:transparent;flex:none}
.lang-sw a,.lang-sw span{display:grid;place-items:center;min-width:34px;height:28px;padding:0 8px;border-radius:999px;font-size:.78rem;font-weight:650;letter-spacing:.04em;text-decoration:none;line-height:1}
.lang-sw a{color:var(--muted)}
.lang-sw a:hover{color:var(--text);background:var(--accent-soft)}
.lang-sw span[aria-current]{background:var(--btn);color:var(--on-btn)}
.mm-lang{display:none;padding:14px 0 4px}
@media (max-width:1320px){.header-actions .lang-sw{display:none}.mm-lang{display:block}}

/* ---------- botón flotante de WhatsApp ---------- */
.wa-fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:61;height:52px;min-width:52px;padding:0 15px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#128C7E;color:#fff;text-decoration:none;box-shadow:0 14px 28px -12px rgba(0,32,72,.6);transition:background-color .2s,transform .2s}
.wa-fab .i{width:28px;height:28px;fill:currentColor;flex:none}
.wa-fab:hover{background:#0F7A6E;transform:translateY(-2px)}
.wa-fab:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.wa-tip{position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);padding:6px 12px;border-radius:999px;background:var(--surface);color:var(--text);border:1px solid var(--line);font-size:.85rem;font-weight:600;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s;box-shadow:var(--shadow)}
@media (hover:hover){.wa-fab:hover .wa-tip{opacity:1;visibility:visible}}
.to-top{bottom:calc(16px + 52px + 12px + env(safe-area-inset-bottom,0px))}
@media (min-width:900px){.wa-fab{right:28px;bottom:28px;height:56px;min-width:56px}.to-top{right:30px;bottom:calc(28px + 56px + 12px)}}
.f-contact{display:flex;flex-wrap:wrap;gap:8px 28px;margin:28px 0 0;padding-top:22px;border-top:1px solid var(--line)}
.f-contact a{display:inline-flex;align-items:center;gap:8px;color:var(--text);text-decoration:none;font-weight:500;font-size:.96rem}
.f-contact a:hover{color:var(--accent-text)}
.f-contact .i{width:1.2rem;height:1.2rem;color:var(--accent)}
.f-mods{margin-top:20px;padding-top:20px}
