/* =====================================================================
   BRELANTA — hoja de estilos compartida (index, opticas, privacidad)
   Sigue la guía de marca: ../../brand/BRAND.md  (tokens, Outfit + Figtree, bordes y no sombras,
   coral solo en llamadas a la acción, modo claro y oscuro con data-theme o prefers-color-scheme).
   ===================================================================== */

/* ---------- tipografías de la marca (archivos propios, mismo origen) ---------- */
@font-face{font-family:'Outfit';src:url('../fonts/outfit-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Outfit';src:url('../fonts/outfit-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Outfit';src:url('../fonts/outfit-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Figtree';src:url('../fonts/figtree-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Figtree';src:url('../fonts/figtree-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Figtree';src:url('../fonts/figtree-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
/* Fuentes de respaldo con medidas parecidas: al llegar la tipografía el texto casi no se mueve */
@font-face{font-family:'Outfit Fallback';src:local('Arial'),local('Roboto');size-adjust:100%;ascent-override:100%;descent-override:26%;line-gap-override:0%}
@font-face{font-family:'Figtree Fallback';src:local('Arial'),local('Roboto');size-adjust:100%;ascent-override:95%;descent-override:25%;line-gap-override:0%}

/* ---------- tokens de marca (brand/tokens.css) ---------- */
:root{
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:88px;
  --radius-sm:14px; --radius-md:20px; --radius-lg:24px; --radius-xl:32px; --radius-panel:40px; --radius-bowl:44px; --radius-leaf:8px; --radius-pill:999px;
  --font-display:Outfit,'Outfit Fallback',system-ui,sans-serif;
  --font-text:Figtree,'Figtree Fallback',system-ui,sans-serif;
  color-scheme:light;
  --bg:#ffffff; --surface:#e4f7f4; --surface-raised:#ffffff; --border:#cfe9e5;
  --ink:#0d2b33; --ink-soft:#4f6b70;
  --brand:#17c3b2; --brand-deep:#0b7f78; --on-brand:#0d2b33; --on-brand-deep:#ffffff;
  --accent-cta:#ff7a5c; --on-accent-cta:#0d2b33; --mint-tint:#8fe8de;
  /* extras de la web (derivados de los tokens de marca) */
  --err:#b4361d; --err-bg:#fdf1ed;
  --bezel:#0d2b33;
  --wa-bg:#0d2b33; --wa-fg:#ffffff; --wa-bd:#0d2b33;
  --lg-l:block; --lg-d:none;
  --white:#ffffff; --wrap:1180px; --ease:cubic-bezier(.22,.7,.3,1);
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){ color-scheme:dark;
  --bg:#08191e; --surface:#0d2b33; --surface-raised:#123a44; --border:#1f4c56;
  --ink:#f2fbfa; --ink-soft:#a9cfcb;
  --brand:#17c3b2; --brand-deep:#17c3b2; --on-brand:#0d2b33; --on-brand-deep:#0d2b33;
  --accent-cta:#ff7a5c; --on-accent-cta:#0d2b33; --mint-tint:#8fe8de;
  --err:#ff9d85; --err-bg:#2a1a17; --bezel:#1f4c56;
  --wa-bg:#08191e; --wa-fg:#f2fbfa; --wa-bd:#17c3b2;
  --lg-l:none; --lg-d:block;
}
}
:root[data-theme="dark"],[data-theme="dark"]{ color-scheme:dark;
  --bg:#08191e; --surface:#0d2b33; --surface-raised:#123a44; --border:#1f4c56;
  --ink:#f2fbfa; --ink-soft:#a9cfcb;
  --brand:#17c3b2; --brand-deep:#17c3b2; --on-brand:#0d2b33; --on-brand-deep:#0d2b33;
  --accent-cta:#ff7a5c; --on-accent-cta:#0d2b33; --mint-tint:#8fe8de;
  --err:#ff9d85; --err-bg:#2a1a17; --bezel:#1f4c56;
  --wa-bg:#08191e; --wa-fg:#f2fbfa; --wa-bd:#17c3b2;
  --lg-l:none; --lg-d:block;
}
[data-theme="light"]{ color-scheme:light;
  --bg:#ffffff; --surface:#e4f7f4; --surface-raised:#ffffff; --border:#cfe9e5;
  --ink:#0d2b33; --ink-soft:#4f6b70;
  --brand:#17c3b2; --brand-deep:#0b7f78; --on-brand:#0d2b33; --on-brand-deep:#ffffff;
  --accent-cta:#ff7a5c; --on-accent-cta:#0d2b33; --mint-tint:#8fe8de;
  --err:#b4361d; --err-bg:#fdf1ed; --bezel:#0d2b33;
  --wa-bg:#0d2b33; --wa-fg:#ffffff; --wa-bd:#0d2b33;
  --lg-l:block; --lg-d:none;
}

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-text); font-size:17px; line-height:26px; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg,picture{ max-width:100%; }
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--ink); margin:0; font-weight:700; line-height:1.1; letter-spacing:-.02em; text-wrap:balance; }
p{ margin:0; } ul,ol{ margin:0; padding:0; list-style:none; } a{ color:inherit; }
button{ font:inherit; }
b,strong{ font-weight:600; color:var(--ink); }
.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(20px,5vw,48px); }
:focus-visible{ outline:3px solid var(--brand-deep); outline-offset:2px; border-radius:6px; }
.sr-only,.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
section[id],main[id]{ scroll-margin-top:84px; }

/* íconos de línea: 24px, trazo 1.8, puntas redondeadas */
.ico{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }
.ico.fill{ stroke:none; fill:currentColor; }
/* marca de verificación: círculo brand con palomita on-brand */
.hero-trust .ico,.sys-list .ico,.mod-feats .ico,.plan-list .ico,.cmp .y .ico,.f-done .ico-badge .ico{
  width:20px; height:20px; padding:4px; border-radius:50%; background:var(--brand); color:var(--on-brand); stroke-width:2.8;
}

/* ---------- textos ---------- */
.kicker{
  display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 14px; border-radius:var(--radius-pill);
  background:var(--surface); border:1.5px solid var(--border); color:var(--ink);
  font:600 14px/1 var(--font-text);
}
.kicker .dot{ width:8px; height:8px; border-radius:50%; background:var(--brand); flex:none; }
.alt .kicker,.contact .kicker{ background:var(--bg); }
.lead{ font-size:20px; line-height:30px; color:var(--ink-soft); max-width:60ch; }
.lead b{ color:var(--ink); }
.hi{ color:var(--ink); font-weight:600; text-decoration:underline; text-decoration-color:var(--brand); text-decoration-thickness:3px; text-underline-offset:5px; text-decoration-skip-ink:none; }
.acc{ color:var(--brand-deep); }

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; white-space:nowrap; cursor:pointer;
  height:52px; padding:0 26px; border-radius:var(--radius-pill); border:2px solid transparent; text-decoration:none;
  font:600 17px/1 var(--font-text);
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,filter .2s ease;
}
.btn .ico{ width:20px; height:20px; }
.btn-primary{ background:var(--brand-deep); color:var(--on-brand-deep); }
.btn-cta{ background:var(--accent-cta); color:var(--on-accent-cta); }
.btn-ink{ background:var(--ink); color:var(--bg); }
.btn-ghost{ background:transparent; color:color-mix(in srgb,var(--brand-deep) 90%,var(--ink)); border-color:var(--brand-deep); }   /* el texto va un poco más oscuro para llegar a 4,5:1 también sobre --surface */
.btn-primary:hover,.btn-cta:hover,.btn-ink:hover{ filter:brightness(.92); }
.btn-ghost:hover{ background:var(--surface); }
.btn-sm{ height:46px; padding:0 22px; font-size:16px; }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.7; cursor:progress; }

/* ---------- logo y cabecera ---------- */
.logo{ display:flex; align-items:center; min-height:44px; text-decoration:none; flex:0 0 auto; }
.logo img{ height:34px; width:auto; }
.logo-l{ display:var(--lg-l); } .logo-d{ display:var(--lg-d); }
.site-header{ position:sticky; top:0; z-index:60; background:var(--bg); border-bottom:1.5px solid var(--border); }
.header-in{ display:flex; align-items:center; gap:clamp(14px,3vw,40px); padding-block:13px; }
.main-nav{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.main-nav a:not(.btn){
  font:600 16px/24px var(--font-text); color:var(--ink-soft); text-decoration:none;
  padding:8px 16px; border-radius:var(--radius-pill); transition:background-color .16s ease,color .16s ease;
}
.main-nav a:not(.btn):hover{ color:var(--ink); background:var(--surface); }
.main-nav a.active{ color:var(--ink); background:var(--surface); }
.nav-cta{ margin-left:8px; }
.icon-btn{
  width:44px; height:44px; border-radius:50%; display:none; place-items:center; cursor:pointer; padding:0; margin-left:6px;
  background:var(--bg); color:var(--ink); border:1.5px solid var(--border); transition:border-color .2s ease,background-color .2s ease;
}
.icon-btn:hover{ border-color:var(--brand-deep); background:var(--surface); }
.theme-btn{ display:grid; }
.theme-btn .ico{ width:20px; height:20px; } .theme-btn .ico-sun{ display:none; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-btn .ico-sun{ display:block; }
  :root:not([data-theme="light"]) .theme-btn .ico-moon{ display:none; }
}
:root[data-theme="dark"] .theme-btn .ico-sun{ display:block; }
:root[data-theme="dark"] .theme-btn .ico-moon{ display:none; }
.nav-toggle .ico{ width:22px; height:22px; } .nav-toggle .ico-close{ display:none; }
.nav-toggle[aria-expanded="true"] .ico-close{ display:block; } .nav-toggle[aria-expanded="true"] .ico-menu{ display:none; }
.nav-panel{ display:none; }
@media (max-width:1140px){
  .main-nav > a:not(.btn){ display:none; }
  .nav-toggle{ display:grid; }
  .nav-panel{
    display:block; position:absolute; left:0; right:0; top:100%; background:var(--bg); border-bottom:1.5px solid var(--border);
    padding:6px clamp(20px,5vw,48px) 18px;
    opacity:0; transform:translateY(-8px); pointer-events:none; visibility:hidden; transition:opacity .2s ease,transform .2s ease,visibility .2s;
  }
  .nav-panel.open{ opacity:1; transform:none; pointer-events:auto; visibility:visible; }
  .nav-panel a:not(.btn){ display:block; font:600 18px/26px var(--font-display); color:var(--ink); text-decoration:none; padding:14px 4px; border-bottom:1.5px solid var(--border); }
  .nav-panel .btn{ margin-top:16px; width:100%; }
}
@media (max-width:620px){ .nav-cta{ display:none; } .logo img{ height:30px; } }

/* ---------- portada ---------- */
.hero{ position:relative; padding-block:clamp(36px,5vw,72px) clamp(40px,5vw,72px); }
.hero h1{ font-size:56px; line-height:60px; letter-spacing:-.025em; margin-block:22px 20px; }
.hero h1.h1-md{ font-size:44px; line-height:48px; letter-spacing:-.02em; }
@media (max-width:720px){ .hero h1{ font-size:36px; line-height:39px; } .hero h1.h1-md{ font-size:32px; line-height:35px; } }
.hero-in{ display:grid; grid-template-columns:1.12fr 1fr; gap:clamp(28px,3.4vw,48px); align-items:center; }
.hero-btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.hero-trust{ display:flex; flex-wrap:wrap; gap:10px 24px; margin-top:28px; }
.hero-trust li{ display:flex; align-items:center; gap:10px; font:500 15px/20px var(--font-text); color:var(--ink); }
.crumb{ display:flex; align-items:center; gap:8px; font:500 14px/20px var(--font-text); color:var(--ink-soft); margin-bottom:22px; }
.crumb a{ color:var(--ink-soft); text-decoration:none; } .crumb a:hover{ color:var(--ink); } .crumb svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; }

/* marco de pantalla real */
.hero-art{ position:relative; padding:0 0 28px 0; }
.frame{ position:relative; border-radius:var(--radius-xl); background:var(--surface-raised); border:1.5px solid var(--border); overflow:hidden; }
.frame-bar{ display:flex; align-items:center; gap:7px; padding:11px 16px; background:var(--surface); border-bottom:1.5px solid var(--border); }
.frame-bar i{ width:10px; height:10px; border-radius:50%; background:var(--border); }
.frame-bar span{ margin-left:10px; flex:1; max-width:280px; font:500 13px/18px var(--font-text); color:var(--ink-soft); background:var(--bg); border:1.5px solid var(--border); padding:2px 14px; border-radius:var(--radius-pill); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.frame img{ display:block; width:100%; height:auto; }
@media (max-width:980px){ .hero-in{ grid-template-columns:1fr; } .hero-art{ max-width:640px; margin-inline:auto; width:100%; } }
@media (max-width:560px){ .hero-btns .btn{ flex:1 1 100%; } }

/* ---------- franja de datos ---------- */
.stats-in{ display:grid; grid-template-columns:repeat(4,1fr); background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-xl); overflow:hidden; }
.stat{ padding:22px 26px; border-right:1.5px solid var(--border); }
.stat:last-child{ border-right:none; }
.stat b{ display:block; font:700 28px/32px var(--font-display); letter-spacing:-.02em; color:var(--ink); }
.stat span{ font:400 15px/21px var(--font-text); color:var(--ink-soft); display:block; margin-top:2px; }
@media (max-width:860px){ .stats-in{ grid-template-columns:repeat(2,1fr); } .stat:nth-child(2){ border-right:none; } .stat:nth-child(-n+2){ border-bottom:1.5px solid var(--border); } }
@media (max-width:560px){ .stat{ padding:16px; } .stat b{ font-size:22px; line-height:26px; white-space:nowrap; } .stat span{ font-size:14px; line-height:20px; } }

/* ---------- secciones ---------- */
.section{ padding-block:var(--space-9); }
@media (max-width:720px){ .section{ padding-block:52px; } }
.section.alt{ background:var(--surface); }
.sec-head{ max-width:720px; margin-bottom:clamp(36px,5vw,56px); }
.sec-head.center{ text-align:center; margin-inline:auto; }
.sec-head.center .lead{ margin-inline:auto; }
.sec-head h2{ font-size:clamp(30px,4vw,44px); line-height:1.1; margin-block:18px 14px; }
.section[data-theme="dark"]{ background:var(--surface); color:var(--ink); }

/* ---------- iconos en recuadro ---------- */
.ico-badge{ width:64px; height:64px; border-radius:var(--radius-md); display:grid; place-items:center; flex:0 0 auto; background:var(--surface); color:var(--ink); }
.ico-badge .ico{ width:30px; height:30px; }
.ico-badge.solid{ background:var(--brand); color:var(--on-brand); }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .ico-badge:not(.solid){ background:var(--surface-raised); color:var(--brand); } }
:root[data-theme="dark"] .ico-badge:not(.solid),[data-theme="dark"] .ico-badge:not(.solid){ background:var(--surface-raised); color:var(--brand); }
.alt .ico-badge:not(.solid){ background:var(--bg); }
[data-theme="light"] .ico-badge:not(.solid){ background:var(--surface); color:var(--ink); }

/* ---------- sistemas (portada) ---------- */
.sys-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.sys-card{ position:relative; display:flex; flex-direction:column; background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius-xl); padding:0 24px 24px; overflow:hidden; transition:border-color .2s ease; }
.sys-card:hover{ border-color:var(--brand-deep); }
.sys-card.featured{ background:var(--surface); border-color:var(--brand); border-top-right-radius:var(--radius-leaf); }
.sys-photo{ display:block; width:calc(100% + 48px); max-width:none; height:180px; object-fit:cover; margin:0 -24px 22px; background:var(--surface); }
.sys-card.dev .sys-photo{ filter:saturate(.8); } .sys-card.soon .sys-photo{ filter:grayscale(.75) saturate(.6); }
.sys-card:hover.dev .sys-photo,.sys-card:hover.soon .sys-photo{ filter:none; }
.sys-top{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; }
.tag{ display:inline-flex; align-items:center; height:30px; padding:0 14px; border-radius:var(--radius-pill); font:600 14px/1 var(--font-text); white-space:nowrap; }
.tag-live{ background:var(--brand-deep); color:var(--on-brand-deep); }
.tag-dev{ background:var(--mint-tint); color:var(--on-brand); }
.tag-soon{ border:1.5px solid var(--border); color:var(--ink-soft); }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .tag-dev{ background:var(--surface-raised); color:var(--ink-soft); } }
:root[data-theme="dark"] .tag-dev,[data-theme="dark"] .tag-dev{ background:var(--surface-raised); color:var(--ink-soft); }
.sys-card h3{ font-size:26px; line-height:32px; letter-spacing:-.015em; font-weight:600; margin-bottom:2px; }
.sys-sub{ font:500 14px/20px var(--font-text); color:var(--ink-soft); margin-bottom:12px; }
.sys-card > p:not(.sys-sub){ font-size:17px; line-height:26px; color:var(--ink-soft); }
.sys-list{ margin-block:18px 4px; display:grid; gap:10px; }
.sys-list li{ display:flex; gap:10px; font:500 15px/20px var(--font-text); align-items:flex-start; }
.sys-list .ico{ margin-top:0; }
.sys-card .btn{ margin-top:auto; width:100%; } .sys-card .sys-list{ margin-bottom:24px; }
@media (max-width:900px){ .sys-grid{ grid-template-columns:1fr; gap:16px; } }
.ask-strip{ margin-top:28px; display:flex; flex-wrap:wrap; align-items:center; gap:16px 20px; background:var(--bg); border:1.5px dashed var(--brand-deep); border-radius:var(--radius-lg); padding:18px 24px; }
.ask-strip .ico-badge{ width:48px; height:48px; border-radius:var(--radius-sm); }
.ask-strip .ico-badge .ico{ width:24px; height:24px; }
.ask-strip p{ flex:1 1 260px; font-size:17px; color:var(--ink-soft); }
.ask-strip p strong{ color:var(--ink) !important; }

/* ---------- por qué Brelanta (siempre sobre marino) ---------- */
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.why{ background:var(--surface-raised); border:1.5px solid var(--border); border-radius:var(--radius-lg); padding:28px 24px; transition:border-color .2s ease; }
.why:hover{ border-color:var(--brand); }
.why h3{ font:600 22px/28px var(--font-display); margin-block:20px 8px; } .why p{ font-size:16px; line-height:24px; color:var(--ink-soft); }
.section[data-theme="dark"] .sec-head .kicker{ background:var(--surface-raised); }
@media (max-width:940px){ .why-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .why-grid{ grid-template-columns:1fr; gap:14px; } }

/* ---------- pasos ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.step{ background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius-xl); padding:28px 24px; }
.step-n{ display:grid; place-items:center; width:48px; height:48px; border-radius:var(--radius-md); background:var(--brand); color:var(--on-brand); font:700 20px/1 var(--font-display); margin-bottom:20px; }
.step:first-child .step-n{ border-top-right-radius:var(--radius-leaf); }
.step h3{ font:600 22px/28px var(--font-display); margin-bottom:6px; } .step p{ font-size:16px; line-height:24px; color:var(--ink-soft); }
@media (max-width:900px){ .steps{ grid-template-columns:repeat(2,1fr); } } @media (max-width:520px){ .steps{ grid-template-columns:1fr; gap:14px; } }

/* ---------- bloque de llamada final ---------- */
.cta-band{ padding-block:0 var(--space-9); }
@media (max-width:720px){ .cta-band{ padding-bottom:52px; } }
.cta-in{ background:var(--brand); color:var(--on-brand); text-align:center; border-radius:var(--radius-panel); border-top-right-radius:var(--radius-leaf); padding:clamp(36px,6vw,72px) clamp(22px,5vw,64px); }
.cta-in h2{ color:var(--on-brand); font-size:clamp(30px,4.2vw,44px); margin-bottom:14px; }
.cta-in p{ color:var(--on-brand); font-size:20px; line-height:30px; max-width:52ch; margin-inline:auto; }
.cta-btns{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:30px; }
.cta-in .btn-ghost{ color:var(--on-brand); border-color:var(--on-brand); }
.cta-in .btn-ghost:hover{ background:var(--mint-tint); }
.cta-in .btn-ink{ background:var(--on-brand); color:var(--white); }
.cta-in .cta-fine{ margin-top:18px; font:500 14px/20px var(--font-text); }
@media (max-width:620px){ .cta-btns .btn{ flex:1 1 100%; } }

/* ---------- contacto ---------- */
.contact-grid{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(28px,4.5vw,64px); align-items:start; }
.contact-grid h2{ font-size:clamp(30px,3.8vw,40px); margin-block:18px 14px; }
.reach{ display:grid; gap:12px; margin-top:28px; }
.reach a{ display:flex; align-items:center; gap:16px; text-decoration:none; background:var(--surface-raised); border:1.5px solid var(--border); border-radius:var(--radius-lg); padding:14px 18px; transition:border-color .2s ease; }
.reach a:hover{ border-color:var(--brand-deep); }
.reach-txt{ display:flex; flex-direction:column; min-width:0; } .reach-txt b{ font:600 18px/24px var(--font-display); color:var(--ink); overflow-wrap:anywhere; } .reach-txt span{ font:400 14px/20px var(--font-text); color:var(--ink-soft); }
.reach .ico-badge{ width:48px; height:48px; border-radius:var(--radius-sm); } .reach .ico-badge .ico{ width:24px; height:24px; }
.contact .reach .ico-badge:not(.solid){ background:var(--surface); }
.form-card{ background:var(--surface-raised); border:1.5px solid var(--border); border-radius:var(--radius-xl); padding:clamp(24px,3.6vw,40px); position:relative; }
.form-card h3{ font:600 26px/32px var(--font-display); margin-bottom:6px; } .form-card > p{ font-size:16px; line-height:24px; color:var(--ink-soft); margin-bottom:24px; }
.f-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:grid; gap:6px; margin-bottom:16px; min-width:0; }
label{ font:600 14px/20px var(--font-text); color:var(--ink); }
input,select,textarea{ font:500 16px/24px var(--font-text); color:var(--ink); background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:0 14px; height:50px; width:100%; transition:border-color .16s ease; }
input::placeholder,textarea::placeholder{ color:var(--ink-soft); opacity:.8; font-weight:400; }
input:focus,select:focus,textarea:focus{ outline:3px solid var(--brand-deep); outline-offset:2px; border-color:var(--brand-deep); }
textarea{ height:auto; min-height:92px; padding:12px 14px; resize:vertical; }
.field.bad input,.field.bad select{ border-color:var(--err); background:var(--err-bg); }
.err{ font:600 13px/18px var(--font-text); color:var(--err); display:none; } .field.bad .err{ display:block; }
.f-note{ font:400 14px/20px var(--font-text); color:var(--ink-soft); margin-top:14px; text-align:center; } .f-note a{ color:inherit; text-decoration:underline; }
.form-card > p.f-fail{ display:none; margin:14px 0 0; padding:12px 14px; border-radius:var(--radius-sm); background:var(--err-bg); border:1.5px solid var(--err); color:var(--err); font:600 14px/20px var(--font-text); text-align:center; } .f-fail a{ color:inherit; text-decoration:underline; } .form-card > p.f-fail.on{ display:block; }
.f-done{ display:none; text-align:center; padding:8px 0 4px; } .form-card.sent > :not(.f-done){ display:none; } .form-card.sent .f-done{ display:block; }
.f-done .ico-badge{ margin:0 auto 16px; background:var(--brand); }
.f-done .ico-badge .ico{ width:34px; height:34px; padding:0; background:none; color:var(--on-brand); stroke-width:2.6; }
.f-done h3{ margin-bottom:8px; } .f-done p{ margin-bottom:20px; color:var(--ink-soft); }
.f-again{ background:none; border:0; color:var(--ink-soft); font:500 14px/20px var(--font-text); text-decoration:underline; cursor:pointer; margin-top:14px; padding:12px; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } } @media (max-width:560px){ .f-row{ grid-template-columns:1fr; } }
.next-steps{ display:grid; gap:12px; margin:24px 0 0; }
.next-steps li{ display:flex; align-items:center; gap:12px; font:500 17px/24px var(--font-text); color:var(--ink); }
.next-steps b{ flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--brand); color:var(--on-brand); font:700 16px/1 var(--font-display); }
.opt{ font-weight:400; color:var(--ink-soft); }
.f-more{ margin:-4px 0 14px; }
.f-more summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; min-height:44px; font:600 14px/20px var(--font-text); color:var(--ink); }
.f-more summary::-webkit-details-marker{ display:none; }
.f-more summary::before{ content:"+"; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--brand); color:var(--on-brand); font-size:16px; line-height:1; }
.f-more[open] summary::before{ content:"\2212"; }
.f-more .field{ margin:2px 0 0; }

/* ---------- legal ---------- */
.legal .wrap{ max-width:760px; } .legal h1{ font-size:clamp(32px,4vw,44px); line-height:1.1; margin:14px 0 8px; } .legal-date{ color:var(--ink-soft); font-size:15px; margin-bottom:28px; }
.legal h2{ font:600 22px/28px var(--font-display); margin:32px 0 8px; } .legal p,.legal li{ line-height:28px; color:var(--ink-soft); } .legal ul{ margin:8px 0 12px; padding-left:22px; list-style:disc; }
.legal a:not(.btn){ color:var(--brand-deep); text-decoration:underline; text-underline-offset:3px; } .legal-back{ margin-top:34px; }

/* ---------- pie ---------- */
.site-footer{ background:var(--bg); color:var(--ink-soft); padding-block:56px 32px; border-top:1.5px solid var(--border); }
.footer-in{ display:flex; flex-wrap:wrap; gap:30px 48px; justify-content:space-between; }
.site-footer p{ font-size:16px; line-height:24px; max-width:38ch; color:var(--ink-soft); margin-top:16px; }
.footer-nav{ display:flex; flex-wrap:wrap; gap:10px 28px; align-content:flex-start; }
.footer-nav a{ font:600 16px/24px var(--font-text); color:var(--ink); text-decoration:none; } .footer-nav a:hover{ color:var(--brand); }
.footer-bottom{ margin-top:36px; padding-top:22px; border-top:1.5px solid var(--border); font:400 14px/20px var(--font-text); color:var(--ink-soft); display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; }
.footer-bottom a{ color:var(--ink); }

/* ---------- whatsapp flotante + barra móvil ---------- */
.wa-float{ position:fixed; right:clamp(16px,3vw,28px); bottom:clamp(16px,3vw,28px); z-index:70; display:inline-flex; align-items:center; gap:10px; background:var(--wa-bg); color:var(--wa-fg); border:1.5px solid var(--wa-bd); text-decoration:none; font:600 16px/1 var(--font-text); padding:0 22px 0 18px; height:52px; border-radius:var(--radius-pill); transition:filter .2s ease; }
.wa-float:hover{ filter:brightness(1.15); }
.wa-float svg{ width:22px; height:22px; fill:var(--brand); }
.mobile-bar{ display:none; }
@media (max-width:620px){
  .wa-float{ bottom:84px; padding:0; width:52px; justify-content:center; } .wa-float span{ display:none; }
  .mobile-bar{ display:flex; gap:10px; position:fixed; left:0; right:0; bottom:0; z-index:65; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:var(--bg); border-top:1.5px solid var(--border); transform:translateY(110%); transition:transform .3s var(--ease); }
  .mobile-bar.show{ transform:none; } .mobile-bar .btn{ flex:1; }
  .site-footer{ padding-bottom:96px; }
}

/* ---------- aparición al hacer scroll ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease),transform .7s var(--ease); transition-delay:calc(var(--d,0)*80ms); }
.reveal.is-in{ opacity:1; transform:none; }
.anim{ animation:fadeUp .6s var(--ease) both; } .d1{ animation-delay:.03s } .d2{ animation-delay:.09s } .d3{ animation-delay:.15s } .d4{ animation-delay:.21s }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@media (max-width:760px){ .reveal{ transform:translateY(14px); transition-duration:.5s; } }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; } .anim,.tour-panel .frame{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* =====================================================================
   PÁGINA DE ÓPTICAS — capturas reales, recorrido, documentos, planes
   ===================================================================== */

/* hero: tarjetas reales encima de la captura + teléfono */
.float-img{ position:absolute; z-index:3; height:auto; background:var(--surface-raised); border-radius:var(--radius-md); border:1.5px solid var(--border); }
.f-kpi{ width:clamp(138px,21%,206px); right:-3%; top:-5%; }
.f-lab{ width:clamp(168px,31%,262px); left:-5%; bottom:5%; }
.phone{ position:relative; background:var(--bezel); border-radius:28px; padding:5px; }
.phone img{ display:block; width:100%; height:auto; border-radius:23px; }
.phone::before{ content:""; position:absolute; top:10px; left:50%; width:28%; height:4px; transform:translateX(-50%); border-radius:4px; background:rgba(0,0,0,.5); z-index:2; }
.f-phone{ position:absolute; z-index:4; width:clamp(100px,19%,150px); right:-2%; bottom:-8%; }
@media (max-width:980px){ .f-kpi{ right:2%; } .f-lab{ left:2%; } .f-phone{ right:1%; } }
@media (max-width:560px){ .f-lab{ display:none; } .f-kpi{ width:118px; top:-6%; } .f-phone{ width:88px; bottom:-6%; } }

/* hecho para Perú: bloque turquesa de marca */
.peru{ background:var(--brand); color:var(--on-brand); padding-block:clamp(40px,5vw,64px); }
.peru-in{ display:grid; grid-template-columns:.9fr 1.3fr; gap:clamp(22px,4vw,56px); align-items:center; }
.peru-tag{ display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 14px; border-radius:var(--radius-pill); background:var(--ink); color:var(--bg); font:600 14px/1 var(--font-text); }
.peru-tag .ico{ width:16px; height:16px; stroke-width:2.2; }
.peru h2{ color:var(--on-brand); font-size:clamp(26px,3vw,36px); margin-top:14px; }
.peru-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.peru-list li{ display:flex; align-items:center; gap:12px; padding:14px 16px; font:600 15px/20px var(--font-text); color:var(--ink); background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius-lg); }
.peru-list .ico{ width:24px; height:24px; color:var(--brand-deep); }
@media (max-width:980px){ .peru-in{ grid-template-columns:1fr; } }
@media (max-width:600px){ .peru-list{ grid-template-columns:1fr 1fr; gap:8px; } .peru-list li{ flex-direction:column; align-items:flex-start; gap:8px; padding:12px 13px; font-size:14px; } }

/* ---------- para el dueño: así se llena una consulta ---------- */
.rx{ display:grid; gap:clamp(16px,2.2vw,24px); }
.rx-step{ display:grid; grid-template-columns:.9fr 1.3fr; gap:clamp(20px,3.4vw,48px); align-items:center; background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius-xl); padding:clamp(20px,3vw,36px); }
.rx-text,.rx-media{ min-width:0; }
.rx-num{ display:inline-grid; place-items:center; width:44px; height:44px; border-radius:var(--radius-md); background:var(--brand); color:var(--on-brand); font:700 20px/1 var(--font-display); }
.rx-step h3{ font:600 26px/32px var(--font-display); letter-spacing:-.015em; margin:16px 0 8px; }
.rx-step .mod-feats{ grid-template-columns:1fr; gap:10px; }
.specs-t{ margin-top:18px; font:600 14px/20px var(--font-text); color:var(--ink-soft); }
.specs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.specs li{ font:500 14px/20px var(--font-text); color:var(--ink-soft); background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-pill); padding:4px 14px; white-space:nowrap; }
.specs b{ color:var(--ink); margin-right:.35em; }
.rx-step:nth-child(1) .rx-media{ min-height:190px; }
.rx-step:nth-child(2) .rx-media{ min-height:200px; }
.rx-step:nth-child(3) .rx-media{ min-height:380px; }
/* pantallas de ejemplo (texto real, se leen en cualquier tamaño) */
.mk{ background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-lg); padding:clamp(12px,1.8vw,18px); font-size:13px; line-height:1.3; }
.mk + .mk{ margin-top:12px; }
.mk-h{ display:flex; align-items:center; gap:10px; margin-bottom:12px; padding-bottom:10px; border-bottom:1.5px solid var(--border); font:600 15px/20px var(--font-display); color:var(--ink); }
.mk-h small{ font:500 12px/16px var(--font-text); color:var(--ink-soft); }
.mk-h i{ display:grid; place-items:center; width:30px; height:30px; border-radius:10px; background:var(--brand); color:var(--on-brand); flex:none; }
.mk-h .ico{ width:17px; height:17px; stroke-width:2; }
.mk-box{ background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:10px 12px; display:grid; gap:7px; align-content:start; }
.mk-cap,.mk-th{ font:600 11px/14px var(--font-text); color:var(--ink-soft); }
.mk-cap{ text-align:center; margin-bottom:1px; }
.mk-row{ display:flex; align-items:center; gap:6px; }
.mk-eye{ flex:none; width:24px; font:700 12px/1 var(--font-display); color:var(--ink); }
.mk-in{ flex:1 1 0; min-width:0; text-align:center; font:600 13px/1.2 var(--font-text); color:var(--ink); background:var(--surface); border:1.5px solid var(--border); border-radius:10px; padding:5px 4px; white-space:nowrap; }
.mk-in s{ text-decoration:none; color:var(--ink-soft); font-weight:500; } .mk-in em{ font-style:normal; color:color-mix(in srgb,var(--brand-deep) 90%,var(--ink)); }
.mk-in.ph{ color:var(--ink-soft); font-weight:400; text-align:left; padding-inline:10px; }
.mk-av{ display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:10px; }
.mk-tbl{ display:grid; grid-template-columns:24px repeat(4,1fr); gap:6px; align-items:center; }
.mk-tbl .mk-th{ text-align:center; font-size:10px; }
.mk-add{ display:flex; align-items:center; gap:12px; margin-top:12px; padding:10px 12px; background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius-sm); }
.mk-add .mk-in{ flex:0 1 110px; }
.mk-checks{ display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.mk-ck{ display:flex; align-items:center; gap:7px; min-width:0; padding:8px 9px; font:600 12px/1.2 var(--font-text); color:var(--ink-soft); background:var(--bg); border:1.5px solid var(--border); border-radius:10px; }
.mk-ck::before{ content:""; flex:none; width:14px; height:14px; border-radius:4px; border:1.5px solid var(--ink-soft); background-position:center; background-repeat:no-repeat; background-size:10px; }
.mk-ck.on{ color:var(--ink); border-color:var(--brand); }
.mk-ck.on::before{ border-color:var(--brand); background-color:var(--brand); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D2B33' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.6l4.6 4.6L19.2 7.4'/%3E%3C/svg%3E"); }
.mk-ck.new{ border-style:dashed; border-color:var(--brand-deep); color:var(--ink); }
.mk-add-row{ display:flex; gap:8px; margin-bottom:8px; }
.mk-add-row .mk-in{ padding-block:8px; }
.mk-plus{ flex:none; display:grid; place-items:center; width:38px; border-radius:10px; background:var(--brand); color:var(--on-brand); }
.mk-plus .ico{ width:16px; height:16px; stroke-width:2.6; }
.mk-li{ display:flex; align-items:center; gap:10px; margin-top:6px; padding:8px 12px; background:var(--bg); border:1.5px solid var(--border); border-radius:10px; font:600 12px/1.2 var(--font-text); color:var(--ink); }
.mk-li span{ flex:1; } .mk-li .ico{ width:15px; height:15px; color:var(--ink-soft); }
.mk-li em{ font-style:normal; font:600 11px/1 var(--font-text); color:var(--on-brand); background:var(--mint-tint); padding:4px 8px; border-radius:var(--radius-pill); }
.mk-li.new{ border-color:var(--brand); }
@media (max-width:560px){
  .mk-av{ grid-template-columns:1fr 1fr; } .mk-av .mk-wide{ grid-column:1/-1; }
  .mk-checks{ grid-template-columns:1fr 1fr; } .mk-ck.x{ display:none; }
  .mk-in{ font-size:12.5px; padding:5px 2px; }
  .mk-tbl{ gap:5px; }
}
.rx-foot{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,22px); margin-top:clamp(16px,2.2vw,24px); }
.rx-fi{ display:flex; align-items:center; gap:16px; padding:18px 22px; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-xl); }
.rx-fi p{ font-size:16px; line-height:24px; color:var(--ink-soft); } .rx-fi b{ color:var(--ink); }
.rx-fi .ico-badge{ width:48px; height:48px; border-radius:var(--radius-sm); } .rx-fi .ico-badge .ico{ width:24px; height:24px; }
@media (max-width:860px){ .rx-step{ grid-template-columns:1fr; gap:18px; } .rx-foot{ grid-template-columns:1fr; } }
@media (max-width:560px){
  .rx-step{ padding:18px; border-radius:var(--radius-lg); } .rx-step h3{ font-size:22px; line-height:28px; }
  .specs li{ font-size:13px; padding:3px 12px; }
  .rx-fi{ padding:14px 16px; gap:12px; border-radius:var(--radius-lg); } .rx-fi p{ font-size:15px; line-height:22px; }
}
.fine-print{ text-align:center; margin-top:26px; font:400 14px/20px var(--font-text); color:var(--ink-soft); }
.sec-cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:30px; }
.rec-cta{ margin-top:26px; }
@media (max-width:520px){ .sec-cta .btn,.rec-cta{ width:100%; } }

/* ---------- recorrido del producto (pestañas) ---------- */
.tour{ display:grid; grid-template-columns:.72fr 1.6fr; gap:clamp(24px,4vw,56px); align-items:start; }
.tabs{ display:grid; gap:8px; }
.tab{
  text-align:left; cursor:pointer; background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius-lg);
  padding:10px 16px 10px 12px; display:flex; gap:14px; align-items:center; color:var(--ink-soft);
  transition:border-color .2s ease,background-color .2s ease;
}
.tab:hover{ border-color:var(--brand-deep); }
.tab[aria-selected="true"]{ border-color:var(--brand); background:var(--surface); }
.tab .ti{ width:44px; height:44px; border-radius:var(--radius-sm); display:grid; place-items:center; background:var(--surface); color:var(--ink); flex:0 0 auto; transition:background-color .2s ease; }
.alt .tab .ti{ background:var(--surface); }
.tab[aria-selected="true"] .ti{ background:var(--brand); color:var(--on-brand); }
.tab b{ display:block; font:600 16px/22px var(--font-display); color:var(--ink); }
.tab span{ font:400 14px/20px var(--font-text); display:block; margin-top:1px; }
.tour-stage{ position:sticky; top:96px; min-height:var(--stage-h,0px); }
.tour-panel[hidden]{ display:none; }
.tour-panel .frame{ animation:panelIn .45s var(--ease); }
@keyframes panelIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
.mod{ margin-top:22px; padding:0 4px; }
.mod h3{ font:600 clamp(22px,2.4vw,26px)/1.25 var(--font-display); letter-spacing:-.015em; }
.mod > p{ margin-top:8px; max-width:66ch; color:var(--ink-soft); }
.mod-feats{ display:grid; grid-template-columns:1fr 1fr; gap:10px 26px; margin-top:16px; }
.mod-feats li{ display:flex; gap:10px; align-items:flex-start; font:500 15px/22px var(--font-text); color:var(--ink); }
.mod-feats .ico{ margin-top:1px; }
.shot{ position:relative; margin-bottom:22px; }
.inset{ position:absolute; right:-12px; bottom:-26px; width:36%; height:auto; z-index:3; border-radius:var(--radius-md); background:var(--surface-raised); border:1.5px solid var(--border); }
.inset.narrow{ width:31%; } .inset.tall{ width:24%; }
@media (max-width:920px){ .inset{ right:-4px; } }
@media (max-width:560px){ .inset{ display:none; } .shot{ margin-bottom:0; } }
@media (max-width:920px){
  .tour{ grid-template-columns:1fr; } .tour-stage{ position:static; min-height:0; }
  .tabs{ display:flex; overflow-x:auto; gap:10px; scroll-snap-type:x mandatory; padding-bottom:6px; margin-inline:-20px; padding-inline:20px; padding-right:48px; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 86%,transparent); mask-image:linear-gradient(90deg,#000 86%,transparent); }
  .tabs::-webkit-scrollbar{ display:none; }
  .tab{ flex:0 0 auto; scroll-snap-align:start; padding:8px 16px 8px 8px; gap:10px; }
  .tab > span:last-child{ display:block; } .tab > span:last-child > span{ display:none; }
  .tab b{ font-size:15px; white-space:nowrap; } .tab .ti{ width:36px; height:36px; border-radius:12px; }
}
@media (max-width:620px){ .mod-feats{ grid-template-columns:1fr; } }

/* etiqueta "Plus" */
.pb{ display:inline-block; font-style:normal; font:600 12px/1 var(--font-text); background:var(--mint-tint); color:var(--on-brand); padding:5px 10px; border-radius:var(--radius-pill); margin-left:.4em; vertical-align:middle; white-space:nowrap; }
.pb-line{ font-size:14px; color:var(--ink-soft); margin:0 0 8px; }
.pb-line .pb{ margin-left:0; margin-right:.5em; }
.lead .pb{ margin-inline:.15em; }

/* ---------- sección oscura: recordatorios ---------- */
.dark-sec h2{ font-size:clamp(30px,3.8vw,44px); margin-block:18px 14px; }
.dark-sec .lead{ color:var(--ink-soft); } .dark-sec .lead b{ color:var(--ink); }
.dark-sec .kicker{ background:var(--surface-raised); }
.rec-in{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,76px); align-items:center; }
.rec-lists{ display:grid; gap:10px; margin-top:26px; }
.rec-lists li{ display:flex; gap:14px; align-items:center; background:var(--surface-raised); border:1.5px solid var(--border); border-radius:var(--radius-lg); padding:8px 16px 8px 8px; }
.rl-n{ min-width:44px; height:44px; padding-inline:6px; border-radius:var(--radius-sm); display:grid; place-items:center; background:var(--brand); color:var(--on-brand); font:700 18px/1 var(--font-display); }
.rec-lists b{ display:block; color:var(--ink); font:600 17px/24px var(--font-display); }
.rec-fine{ margin-top:14px; font:400 14px/20px var(--font-text); color:var(--ink-soft); }
.rec-art{ position:relative; display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:0; padding:8px 0 90px; }
.rec-phone{ width:min(46%,236px); flex:0 0 auto; }
.rec-phone.p1{ transform:rotate(-4deg) translateY(18px); margin-right:-6%; z-index:1; }
.rec-phone.p2{ transform:rotate(3deg); z-index:2; }
.wa-card{ position:absolute; z-index:3; left:50%; bottom:0; transform:translateX(-50%); width:min(94%,440px); background:var(--surface-raised); color:var(--ink); border:1.5px solid var(--brand); border-radius:var(--radius-lg); padding:14px 14px 12px; display:grid; gap:8px; }
.wa-head{ display:flex; align-items:center; gap:10px; padding-bottom:6px; }
.wa-av{ width:36px; height:36px; border-radius:50%; background:var(--brand); color:var(--on-brand); display:grid; place-items:center; flex:0 0 auto; }
.wa-av .ico{ width:18px; height:18px; }
.wa-head b{ display:block; font:600 15px/20px var(--font-display); }
.wa-head small{ display:block; font:400 13px/16px var(--font-text); color:var(--ink-soft); }
.wa-bubble{ background:var(--mint-tint); color:var(--on-brand); border-radius:16px 16px 4px 16px; padding:9px 12px; font:500 13px/1.42 var(--font-text); }
@media (max-width:900px){ .rec-in{ grid-template-columns:1fr; } .rec-art{ padding-bottom:120px; } }
@media (max-width:520px){ .wa-bubble{ font-size:12.5px; } }

/* ---------- lo que te damos ---------- */
.give{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.give-card{ position:relative; display:flex; flex-direction:column; gap:10px; background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius-xl); padding:clamp(20px,2.4vw,28px); overflow:hidden; }
.give-card h3{ font:600 22px/28px var(--font-display); }
.give-card p{ font-size:16px; line-height:24px; color:var(--ink-soft); }
.give-card .ico-badge{ width:56px; height:56px; }
.give-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.give-tag{ display:inline-flex; align-items:center; height:30px; padding:0 14px; border-radius:var(--radius-pill); border:1.5px solid var(--border); color:var(--ink-soft); font:600 14px/1 var(--font-text); white-space:nowrap; }
.g-brand{ grid-column:span 2; padding-bottom:0; background:var(--surface); border-color:var(--brand); border-top-right-radius:var(--radius-leaf); }
.g-brand h3,.g-support h3{ font-size:clamp(24px,2.4vw,28px); line-height:1.2; }
.give-card p.give-fine{ font-size:14px; line-height:20px; margin-top:-4px; }
.g-support{ grid-column:span 2; background:var(--surface); border-color:var(--border); }
.g-support[data-theme="dark"]{ color:var(--ink); }
.fan{ position:relative; margin:auto -8px 0; aspect-ratio:2.25/1; }
.fan img{ position:absolute; width:46%; height:auto; aspect-ratio:900/1010; object-fit:cover; object-position:top; background:#fff; border:1.5px solid var(--border); border-radius:12px; }
.fan .fa{ left:1%; bottom:-30%; transform:rotate(-7deg); }
.fan .fb{ left:27%; bottom:-20%; z-index:2; }
.fan .fc{ right:1%; bottom:-30%; transform:rotate(7deg); z-index:1; }
.chatbox{ margin-top:auto; display:grid; gap:8px; background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius-lg); padding:14px; }
.chatbox p{ margin:0; max-width:88%; padding:9px 14px; border-radius:16px; font:500 14px/20px var(--font-text); color:var(--on-brand); }
.chatbox .cb-out{ justify-self:end; background:var(--mint-tint); border-bottom-right-radius:4px; }
.chatbox .cb-in{ justify-self:start; background:var(--surface-raised); color:var(--ink); border:1.5px solid var(--border); border-bottom-left-radius:4px; }
.give-card p.cb-out{ color:var(--on-brand); } .give-card p.cb-in{ color:var(--ink); }
@media (max-width:980px){
  .give{ grid-template-columns:repeat(2,1fr); }
  .g-brand,.g-support{ grid-column:1/-1; }
  .fan{ max-width:560px; width:100%; margin-inline:auto; }
}
@media (max-width:560px){
  .give{ gap:12px; }
  .give-card{ padding:18px; border-radius:var(--radius-lg); }
  .give-card h3{ font-size:17px; line-height:22px; } .give-card p{ font-size:14px; line-height:20px; }
  .give-card .ico-badge{ width:44px; height:44px; border-radius:var(--radius-sm); } .give-card .ico-badge .ico{ width:24px; height:24px; }
  .g-brand h3,.g-support h3{ font-size:22px; line-height:28px; }
  .g-brand p,.g-support p{ font-size:16px; line-height:24px; }
}

/* ---------- antes y después ---------- */
.vs{ max-width:920px; margin-inline:auto; }
.vs-head{ display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:14px; padding:0 22px 10px; font:600 14px/20px var(--font-text); }
.vs-h-bad{ color:var(--ink-soft); } .vs-h-good{ color:var(--ink); }
.vs-list{ display:grid; gap:10px; }
.vs-row{ display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:14px; align-items:center; background:var(--surface-raised); border:1.5px solid var(--border); border-radius:var(--radius-lg); padding:14px 22px; }
.vs-k{ font:600 17px/22px var(--font-display); color:var(--ink); }
.vs-bad,.vs-good{ display:block; position:relative; padding-left:30px; font:400 15px/21px var(--font-text); }
.vs-bad{ color:var(--ink-soft); }
.vs-good{ color:var(--ink); font-weight:600; }
.vs-bad::before,.vs-good::before{ content:""; position:absolute; left:0; top:0; width:21px; height:21px; border-radius:50%; }
.vs-bad::before{ background:var(--surface); border:1.5px solid var(--border); }
.vs-good::before{ background:var(--brand); }
.vs-bad::after,.vs-good::after{ content:""; position:absolute; left:0; top:0; width:21px; height:21px; background-repeat:no-repeat; background-position:center; background-size:11px 11px; }
.vs-bad::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F6B70' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E"); }
.vs-good::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D2B33' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.6l4.6 4.6L19.2 7.4'/%3E%3C/svg%3E"); }
.vs-good .pb{ margin-left:.2em; }
@media (max-width:640px){
  .vs-head{ grid-template-columns:1fr 1fr; gap:12px; padding:0 16px 8px; } .vs-head span:first-child{ display:none; }
  .vs-row{ grid-template-columns:1fr 1fr; gap:8px 12px; padding:13px 16px; }
  .vs-k{ grid-column:1/-1; font-size:16px; }
  .vs-bad,.vs-good{ font-size:14px; line-height:20px; padding-left:27px; }
}

/* ---------- planes: Basic y Plus ---------- */
.price-when{ font:500 14px/20px var(--font-text); color:var(--ink-soft); }
.price-amount{ display:flex; align-items:baseline; gap:8px; margin-block:4px 0; }
.price-amount b{ font:700 clamp(34px,4.4vw,44px)/1 var(--font-display); letter-spacing:-.02em; color:var(--ink); }
.price-per{ font:500 15px/20px var(--font-text); color:var(--ink-soft); }
.plans{ display:grid; grid-template-columns:1fr 1.08fr; gap:clamp(16px,2.4vw,28px); max-width:1000px; margin-inline:auto; align-items:stretch; }
.plan{ position:relative; display:flex; flex-direction:column; gap:14px; background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius-xl); padding:clamp(24px,3vw,36px); }
.plan-name{ font:600 14px/20px var(--font-text); color:var(--ink-soft); }
.plan-tag{ font:600 22px/28px var(--font-display); color:var(--ink); margin:0; }
.plan-prices{ display:grid; grid-template-columns:1fr 1fr; gap:14px; padding-block:16px; border-block:1.5px solid var(--border); }
.plan-list{ display:grid; gap:12px; }
.plan-list li{ display:flex; gap:12px; font:500 15px/22px var(--font-text); color:var(--ink); align-items:flex-start; }
.plan-more{ font:600 17px/24px var(--font-display); color:var(--ink); margin:2px 0 -4px; }
.plan .btn-block{ margin-top:auto; }
.plan-plus{ background:var(--surface); border:2px solid var(--brand); border-top-right-radius:var(--radius-leaf); }
.plan-plus .plan-name{ color:var(--ink); }
.plan-flag{ position:absolute !important; top:22px; right:24px; display:inline-flex; align-items:center; height:30px; padding:0 14px; border-radius:var(--radius-pill); background:var(--brand-deep); color:var(--on-brand-deep); font:600 14px/1 var(--font-text); }
.installs{ background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius-md); padding:14px 16px; }
.installs b{ display:block; color:var(--ink); font:600 15px/22px var(--font-text); }
.inst-row{ display:grid; grid-template-columns:1fr 1.25fr; gap:10px; margin-top:10px; }
.inst-row span{ background:var(--surface); border-radius:var(--radius-sm); padding:10px 12px; color:var(--ink); font:700 17px/22px var(--font-display); white-space:nowrap; }
.inst-row i{ display:block; font-style:normal; font:500 13px/18px var(--font-text); color:var(--ink-soft); margin-bottom:2px; }
.plan-hook{ margin:0; font-size:15px; line-height:22px; color:var(--ink-soft); }
.plan-hook b{ color:var(--ink); }
.addon{ display:flex; align-items:center; gap:12px; border:1.5px dashed var(--brand-deep); border-radius:var(--radius-md); padding:12px 14px; background:var(--bg); }
.addon-tag{ flex:none; font:600 12px/1 var(--font-text); color:var(--on-brand); background:var(--mint-tint); border-radius:var(--radius-pill); padding:5px 10px; }
.addon-txt{ flex:1; min-width:0; display:grid; gap:1px; }
.addon-txt b{ color:var(--ink); font:600 17px/22px var(--font-display); }
.addon-txt span{ font:400 14px/19px var(--font-text); color:var(--ink-soft); }
.addon-price{ flex:none; text-align:right; color:var(--ink-soft); font:500 14px/18px var(--font-text); }
.addon-price b{ display:block; color:var(--ink); font:700 19px/22px var(--font-display); }
@media (max-width:480px){ .addon{ display:grid; grid-template-columns:1fr auto; gap:8px 12px; align-items:center; } .addon-tag{ grid-column:1/-1; justify-self:start; } }
@media (max-width:840px){ .plans{ grid-template-columns:1fr; max-width:520px; } }
@media (max-width:420px){ .inst-row{ gap:8px; } .inst-row span{ padding:9px 10px; font-size:16px; } .inst-row i{ white-space:normal; } }
.alt .plan-plus{ background:var(--bg); }
.alt .installs{ background:var(--surface); }
.alt .inst-row span{ background:var(--bg); }
.compare{ max-width:1000px; margin:28px auto 0; }
.compare summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; width:max-content; max-width:100%; margin-inline:auto; height:46px; padding:0 20px; font:600 16px/1 var(--font-text); color:color-mix(in srgb,var(--brand-deep) 90%,var(--ink)); background:transparent; border:2px solid var(--brand-deep); border-radius:var(--radius-pill); transition:background-color .2s ease; }
.compare summary::-webkit-details-marker{ display:none; }
.compare summary:hover{ background:var(--surface); }
.compare summary .pm{ display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--brand); color:var(--on-brand); transition:transform .25s var(--ease); }
.compare summary .pm .ico{ width:14px; height:14px; stroke-width:3; }
.compare[open] summary .pm{ transform:rotate(45deg); }
.cmp-wrap{ margin-top:18px; overflow-x:auto; border:1.5px solid var(--border); border-radius:var(--radius-xl); background:var(--bg); }
.cmp{ width:100%; border-collapse:collapse; font:400 15px/22px var(--font-text); min-width:340px; }
.cmp th,.cmp td{ padding:13px 16px; border-bottom:1.5px solid var(--border); text-align:center; }
.cmp thead th{ font:700 18px/24px var(--font-display); color:var(--ink); background:var(--surface); }
.cmp thead th.pl{ background:var(--brand-deep); color:var(--on-brand-deep); }
.cmp tbody th{ text-align:left; font-weight:500; color:var(--ink); }
.cmp td{ color:var(--ink-soft); white-space:nowrap; }
.cmp td.pl{ background:var(--surface); color:var(--ink); }
.cmp td b{ color:var(--ink); }
.cmp tr:last-child th,.cmp tr:last-child td{ border-bottom:none; }
.cmp .y .ico{ vertical-align:middle; }
.cmp .n{ color:var(--ink-soft); }
@media (max-width:520px){ .cmp{ font-size:14px; } .cmp th,.cmp td{ padding:10px 8px; } .cmp td{ white-space:normal; } }

/* ---------- FAQ ---------- */
.faq{ max-width:820px; margin-inline:auto; display:grid; gap:12px; }
.faq details{ background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius-lg); transition:border-color .2s ease; }
.faq details[open]{ border-color:var(--brand); }
.faq summary{ list-style:none; cursor:pointer; padding:16px 22px; display:flex; justify-content:space-between; align-items:center; gap:16px; font:600 18px/24px var(--font-display); color:var(--ink); min-height:60px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .pm{ width:30px; height:30px; border-radius:50%; background:var(--surface); color:var(--ink); display:grid; place-items:center; flex:0 0 auto; transition:transform .3s var(--ease),background-color .2s ease; }
.faq summary .pm .ico{ width:16px; height:16px; stroke-width:2.6; }
.faq details[open] summary .pm{ transform:rotate(45deg); background:var(--brand); color:var(--on-brand); }
.faq .ans{ padding:0 22px 20px; font-size:17px; line-height:26px; max-width:68ch; color:var(--ink-soft); }

/* =====================================================================
   RENDIMIENTO
   ===================================================================== */
/* secciones fuera de pantalla: el navegador no las maqueta ni las pinta hasta que se acercan (alturas medidas para que la barra de scroll no salte) */
main > section:nth-of-type(n+2){ content-visibility:auto; }
.site-footer{ content-visibility:auto; contain-intrinsic-size:auto 260px; }
/* CV-SIZES:BEGIN (generado por cv_sizes.py) */
body[data-page="opticas"] main > section:nth-of-type(2){ contain-intrinsic-size:auto 1874px; }
body[data-page="opticas"] main > section:nth-of-type(3){ contain-intrinsic-size:auto 280px; }
body[data-page="opticas"] main > section:nth-of-type(4){ contain-intrinsic-size:auto 1214px; }
body[data-page="opticas"] main > section:nth-of-type(5){ contain-intrinsic-size:auto 885px; }
body[data-page="opticas"] main > section:nth-of-type(6){ contain-intrinsic-size:auto 1105px; }
body[data-page="opticas"] main > section:nth-of-type(7){ contain-intrinsic-size:auto 723px; }
body[data-page="opticas"] main > section:nth-of-type(8){ contain-intrinsic-size:auto 1329px; }
body[data-page="opticas"] main > section:nth-of-type(9){ contain-intrinsic-size:auto 1003px; }
body[data-page="opticas"] main > section:nth-of-type(10){ contain-intrinsic-size:auto 930px; }
body[data-page="home"] main > section:nth-of-type(2){ contain-intrinsic-size:auto 1156px; }
body[data-page="home"] main > section:nth-of-type(3){ contain-intrinsic-size:auto 689px; }
body[data-page="home"] main > section:nth-of-type(4){ contain-intrinsic-size:auto 584px; }
body[data-page="home"] main > section:nth-of-type(5){ contain-intrinsic-size:auto 471px; }
body[data-page="home"] main > section:nth-of-type(6){ contain-intrinsic-size:auto 918px; }
@media (max-width:1000px){
body[data-page="opticas"] main > section:nth-of-type(2){ contain-intrinsic-size:auto 2411px; }
body[data-page="opticas"] main > section:nth-of-type(3){ contain-intrinsic-size:auto 326px; }
body[data-page="opticas"] main > section:nth-of-type(4){ contain-intrinsic-size:auto 1271px; }
body[data-page="opticas"] main > section:nth-of-type(5){ contain-intrinsic-size:auto 1491px; }
body[data-page="opticas"] main > section:nth-of-type(6){ contain-intrinsic-size:auto 1618px; }
body[data-page="opticas"] main > section:nth-of-type(7){ contain-intrinsic-size:auto 779px; }
body[data-page="opticas"] main > section:nth-of-type(8){ contain-intrinsic-size:auto 1856px; }
body[data-page="opticas"] main > section:nth-of-type(9){ contain-intrinsic-size:auto 976px; }
body[data-page="opticas"] main > section:nth-of-type(10){ contain-intrinsic-size:auto 1421px; }
body[data-page="home"] main > section:nth-of-type(2){ contain-intrinsic-size:auto 1692px; }
body[data-page="home"] main > section:nth-of-type(3){ contain-intrinsic-size:auto 852px; }
body[data-page="home"] main > section:nth-of-type(4){ contain-intrinsic-size:auto 672px; }
body[data-page="home"] main > section:nth-of-type(5){ contain-intrinsic-size:auto 416px; }
body[data-page="home"] main > section:nth-of-type(6){ contain-intrinsic-size:auto 1340px; }
}
@media (max-width:600px){
body[data-page="opticas"] main > section:nth-of-type(2){ contain-intrinsic-size:auto 2803px; }
body[data-page="opticas"] main > section:nth-of-type(3){ contain-intrinsic-size:auto 496px; }
body[data-page="opticas"] main > section:nth-of-type(4){ contain-intrinsic-size:auto 1144px; }
body[data-page="opticas"] main > section:nth-of-type(5){ contain-intrinsic-size:auto 1307px; }
body[data-page="opticas"] main > section:nth-of-type(6){ contain-intrinsic-size:auto 1639px; }
body[data-page="opticas"] main > section:nth-of-type(7){ contain-intrinsic-size:auto 893px; }
body[data-page="opticas"] main > section:nth-of-type(8){ contain-intrinsic-size:auto 2038px; }
body[data-page="opticas"] main > section:nth-of-type(9){ contain-intrinsic-size:auto 985px; }
body[data-page="opticas"] main > section:nth-of-type(10){ contain-intrinsic-size:auto 1598px; }
body[data-page="home"] main > section:nth-of-type(2){ contain-intrinsic-size:auto 2459px; }
body[data-page="home"] main > section:nth-of-type(3){ contain-intrinsic-size:auto 1182px; }
body[data-page="home"] main > section:nth-of-type(4){ contain-intrinsic-size:auto 900px; }
body[data-page="home"] main > section:nth-of-type(5){ contain-intrinsic-size:auto 474px; }
body[data-page="home"] main > section:nth-of-type(6){ contain-intrinsic-size:auto 1634px; }
}
/* CV-SIZES:END */
/* carruseles: el gesto horizontal no arrastra la página y el toque responde de inmediato */
.tabs,.cmp-wrap{ overscroll-behavior-x:contain; }
a,button,summary,label,select{ touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
/* zona táctil más grande (mín. 44 px) en los enlaces pequeños, sin mover nada del diseño */
.crumb a,.footer-nav a{ position:relative; }
.crumb a::after,.footer-nav a::after{ content:""; position:absolute; inset:-12px -8px; }

/* ===== Casillas, libro de reclamaciones y páginas legales ===== */
.check{ display:flex; align-items:flex-start; gap:12px; cursor:pointer; font:400 14px/21px var(--font-text); color:var(--ink-soft); }
.check input{ flex:none; width:22px; height:22px; min-height:0; padding:0; margin:0; border-radius:6px; accent-color:var(--brand-deep); }
.check a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
.field.chk{ margin-bottom:12px; }
.field.bad .check{ color:var(--err); }
.field.bad .check input{ outline:2px solid var(--err); outline-offset:2px; }
.form-card .field.chk + .field.chk{ margin-top:-2px; }

.recl .wrap{ max-width:820px; }
.recl h1{ font-size:clamp(32px,4vw,44px); line-height:1.1; margin:14px 0 12px; }
.recl .lead{ margin-bottom:22px; }
.recl-info{ display:grid; gap:10px; margin:0 0 28px; padding:0; list-style:none; }
.recl-info li{ background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-md); padding:14px 18px; font:400 15px/22px var(--font-text); color:var(--ink-soft); }
.recl-info b{ color:var(--ink); }
.recl-prov{ display:grid; grid-template-columns:auto 1fr; gap:4px 16px; margin:0 0 28px; font:400 15px/22px var(--font-text); }
.recl-prov dt{ color:var(--ink-soft); } .recl-prov dd{ margin:0; color:var(--ink); font-weight:600; }
#reclamoForm fieldset{ border:0; padding:0; margin:0 0 26px; min-width:0; }
#reclamoForm legend{ font:600 20px/28px var(--font-display); color:var(--ink); padding:0; margin-bottom:14px; }
#reclamoForm label.lb{ font:600 14px/20px var(--font-text); color:var(--ink); }
.recl-radios{ display:flex; flex-wrap:wrap; gap:10px; }
.recl-radios label{ display:flex; align-items:center; gap:10px; min-height:50px; padding:0 18px; border:1.5px solid var(--border); border-radius:99px; background:var(--bg); cursor:pointer; font:600 15px/22px var(--font-text); color:var(--ink); }
.recl-radios input{ width:20px; height:20px; min-height:0; padding:0; accent-color:var(--brand-deep); }
.recl-radios label:has(input:checked){ border-color:var(--brand-deep); background:var(--surface); }
.field.bad .recl-radios label{ border-color:var(--err); }
.field .hint{ font:400 13px/18px var(--font-text); color:var(--ink-soft); }
#reclamoForm textarea{ min-height:120px; }
.field.bad textarea{ border-color:var(--err); background:var(--err-bg); }
.recl-fail{ display:none; margin:14px 0 0; padding:14px 16px; border-radius:var(--radius-sm); background:var(--err-bg); border:1.5px solid var(--err); color:var(--err); font:600 14px/21px var(--font-text); }
.recl-fail.on{ display:block; } .recl-fail a{ color:inherit; text-decoration:underline; }
.recl-done{ display:none; }
.recl.sent #reclamoForm, .recl.sent .recl-intro{ display:none; } .recl.sent .recl-done{ display:block; }
.constancia{ background:var(--surface-raised); border:1.5px solid var(--border); border-radius:var(--radius-xl); padding:clamp(22px,3.6vw,40px); margin-bottom:22px; }
.constancia h2{ font:600 26px/32px var(--font-display); margin:0 0 6px; }
.constancia .cod{ display:inline-block; margin:6px 0 18px; padding:6px 14px; border-radius:99px; background:var(--brand); color:var(--on-brand); font:700 17px/24px var(--font-display); letter-spacing:.02em; }
.constancia dl{ display:grid; grid-template-columns:minmax(120px,200px) 1fr; gap:10px 18px; margin:0 0 18px; font:400 15px/22px var(--font-text); }
.constancia dt{ color:var(--ink-soft); } .constancia dd{ margin:0; color:var(--ink); overflow-wrap:anywhere; white-space:pre-wrap; }
.constancia p{ line-height:24px; color:var(--ink-soft); margin:0 0 12px; font-size:15px; }
.recl-done .row{ display:flex; flex-wrap:wrap; gap:12px; }
@media (max-width:560px){ .constancia dl{ grid-template-columns:1fr; gap:2px; } .constancia dd{ margin-bottom:10px; } }
.legal table{ width:100%; border-collapse:collapse; margin:12px 0 18px; font-size:15px; }
.legal th,.legal td{ text-align:left; padding:10px 12px; border-bottom:1.5px solid var(--border); line-height:22px; color:var(--ink-soft); vertical-align:top; }
.legal th{ color:var(--ink); font-weight:600; }
.legal-note{ margin:0 0 24px; padding:14px 18px; border:1.5px solid var(--border); border-radius:var(--radius-md); background:var(--surface); color:var(--ink-soft); font-size:15px; line-height:24px; }
@media print{
  body{ background:#fff !important; }
  .site-header,.site-footer,.mobile-bar,.wa-float,.recl-intro,.recl-done .row,.skip{ display:none !important; }
  .constancia{ border:1px solid #000; background:#fff !important; padding:0 12px; }
  .constancia,.constancia *{ color:#000 !important; background:transparent !important; }
  .constancia .cod{ border:1px solid #000; }
  .section{ padding:0 !important; content-visibility:visible !important; }
}

.fine-print a{ text-decoration:underline; text-underline-offset:2px; }
.check input,.recl-radios input{ border:0; background:none; box-shadow:none; }
.field[hidden]{ display:none; }
.check{ padding:8px 0; }

/* =====================================================================
   PORTADA (data-page="home"): lenguaje de producto en escena
   Referencia: DESIGN.md (etiquetas de sección, titulares grandes y ligeros, producto enmarcado,
   columnas tipográficas sin tarjetas). Colores y tipografías: solo los de la marca.
   ===================================================================== */
:is([data-page="home"],[data-page="opticas"]) .kicker{
  height:auto; padding:0; background:none; border:0; border-radius:0;
  font:600 13px/1 var(--font-text); letter-spacing:.09em; text-transform:uppercase;
  color:color-mix(in srgb,var(--brand-deep) 86%,var(--ink));
}
:is([data-page="home"],[data-page="opticas"]) .alt .kicker,:is([data-page="home"],[data-page="opticas"]) .contact .kicker{ background:none; }
:is([data-page="home"],[data-page="opticas"]) .section[data-theme="dark"] .sec-head .kicker{ background:none; }
:is([data-page="home"],[data-page="opticas"]) .sec-head.center{ text-align:left; margin-inline:0; max-width:760px; }
:is([data-page="home"],[data-page="opticas"]) .sec-head.center .lead{ margin-inline:0; }
:is([data-page="home"],[data-page="opticas"]) .sec-head h2,:is([data-page="home"],[data-page="opticas"]) .contact-grid h2,:is([data-page="home"],[data-page="opticas"]) .cta-in h2{
  font-weight:500; letter-spacing:-.035em; line-height:1.02; text-wrap:balance;
}
:is([data-page="home"],[data-page="opticas"]) .sec-head h2{ font-size:clamp(34px,4.8vw,56px); margin-block:16px 16px; }

/* hero oscuro con luz de marca */
:is([data-page="home"],[data-page="opticas"]) .hero{
  color:var(--ink); overflow:hidden;
  padding-block:clamp(40px,6vw,92px) clamp(44px,6vw,84px);
  background:
    radial-gradient(56% 70% at 82% 6%, color-mix(in srgb,var(--brand) 22%,transparent), transparent 72%),
    radial-gradient(46% 60% at 0% 104%, color-mix(in srgb,var(--brand-deep) 16%,transparent), transparent 72%),
    var(--bg);
}
:is([data-page="home"],[data-page="opticas"]) .hero h1{
  font-weight:500; font-size:clamp(40px,5vw,66px); line-height:.99; letter-spacing:-.04em; margin-block:20px 24px;
}
:is([data-page="home"],[data-page="opticas"]) .hero .lead{ font-size:19px; line-height:29px; max-width:46ch; }
:is([data-page="home"],[data-page="opticas"]) .hero .acc{ color:var(--brand); }
@media (max-width:720px){ :is([data-page="home"],[data-page="opticas"]) .hero h1{ font-size:clamp(38px,11vw,48px); line-height:1; } }
[data-page="home"] .hero-in{ grid-template-columns:1.12fr 1fr; align-items:center; gap:clamp(32px,4.4vw,64px); }
@media (max-width:980px){ [data-page="home"] .hero-in{ grid-template-columns:1fr; } }

/* la "b" de Brelanta hecha de bloques: un bloque por rubro (el logo es un tallo y cuatro bloques) */
.bmap{
  --bm-gap:14px; position:relative; max-width:500px; margin-inline:auto;
  display:grid; grid-template-columns:.2fr 1fr 1fr; grid-template-rows:.52fr 1fr 1fr; gap:var(--bm-gap);
}
.bm-stem{ grid-column:1; grid-row:1/4; border-radius:var(--radius-pill); background:var(--surface-raised); border:1.5px solid var(--border); }
.bm-cap{
  grid-column:2/4; grid-row:1; align-self:end; padding:0 4px 6px; margin:0;
  font:600 13px/1 var(--font-text); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft);
}
.bm{
  display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:14px; min-height:170px; padding:20px 18px 18px;
  text-decoration:none; color:var(--ink); background:var(--surface-raised); border:1.5px solid var(--border); border-radius:var(--radius-md);
  transition:transform .25s var(--ease),border-color .2s ease,background-color .2s ease;
}
.bm:hover{ transform:translateY(-4px); border-color:var(--brand); }
.bm:active{ transform:scale(.98); }
.bm .ico{ width:40px; height:40px; stroke-width:1.6; color:var(--brand); }
.bm-name{ font:500 clamp(20px,2.3vw,26px)/1.05 var(--font-display); letter-spacing:-.025em; }
.bm-tag{ display:inline-flex; align-items:center; height:28px; padding:0 12px; border-radius:var(--radius-pill); border:1.5px solid var(--border); color:var(--ink-soft); font:600 13px/1 var(--font-text); white-space:nowrap; }
.bm-live{ grid-column:3; grid-row:2; background:var(--brand); border-color:var(--brand); color:var(--on-brand); border-top-right-radius:96px; }
.bm-live .ico{ color:var(--on-brand); }
.bm-live .bm-tag{ background:var(--on-brand); border-color:var(--on-brand); color:var(--white); }
.bm-dev{ grid-column:2; grid-row:2; }
.bm-soon{ grid-column:2; grid-row:3; }
.bm-ask{ grid-column:3; grid-row:3; border-style:dashed; border-bottom-right-radius:96px; }
.bm-ask .ico,.bm-dev .ico,.bm-soon .ico{ color:var(--brand); }
@media (max-width:980px){ .bmap{ max-width:460px; } }
@media (max-width:560px){
  .bmap{ --bm-gap:10px; grid-template-columns:.16fr 1fr 1fr; }
  .bm{ min-height:138px; padding:16px 12px 14px; border-radius:var(--radius-sm); }
  .bm .ico{ width:32px; height:32px; }
  .bm-name{ font-size:19px; }
  .bm-tag{ height:26px; padding:0 9px; font-size:12px; }
  .bm-live{ border-top-right-radius:64px; } .bm-ask{ border-bottom-right-radius:64px; }
  .bm-cap{ font-size:12px; }
}
@media (max-width:360px){ .bm-name{ font-size:17px; } .bm-tag{ font-size:11px; padding:0 7px; } }
@media (prefers-reduced-motion:reduce){ .bm{ transition:none; } .bm:hover{ transform:none; } }

/* franja de datos: sin caja, solo líneas */
:is([data-page="home"],[data-page="opticas"]) .stats-in{ background:none; border:0; border-radius:0; border-block:1.5px solid var(--border); }
:is([data-page="home"],[data-page="opticas"]) .stat{ padding:26px 26px 26px 0; }
:is([data-page="home"],[data-page="opticas"]) .stat + .stat{ padding-left:26px; }
:is([data-page="home"],[data-page="opticas"]) .stat b{ font-weight:500; font-size:30px; line-height:34px; letter-spacing:-.03em; }
@media (max-width:860px){ :is([data-page="home"],[data-page="opticas"]) .stat{ padding:20px 16px 20px 0; } :is([data-page="home"],[data-page="opticas"]) .stat:nth-child(even){ padding-left:16px; } :is([data-page="home"],[data-page="opticas"]) .stat:nth-child(3){ padding-left:0; } }

/* sistemas: tarjeta principal más ancha, sin fotos de stock */
[data-page="home"] .sys-grid{ grid-template-columns:1.3fr 1fr 1fr; gap:20px; }
[data-page="home"] .sys-card{ padding:0 24px 24px; border-radius:var(--radius-lg); }
[data-page="home"] .sys-card.featured{ border-top-right-radius:var(--radius-leaf); }
[data-page="home"] .sys-card h3{ font-weight:500; letter-spacing:-.03em; }
@media (max-width:980px){ [data-page="home"] .sys-grid{ grid-template-columns:1fr 1fr; } [data-page="home"] .sys-card.featured{ grid-column:1/-1; } }
@media (max-width:640px){ [data-page="home"] .sys-grid{ grid-template-columns:1fr; } }

/* por qué: columnas tipográficas */
[data-page="home"] .why-grid{ gap:0 36px; }
[data-page="home"] .why{ background:none; border:0; border-radius:0; border-top:1.5px solid var(--border); padding:26px 0 10px; }
[data-page="home"] .why:hover{ border-color:var(--brand); }
.why-ico{ width:30px; height:30px; color:var(--brand); stroke-width:1.6; }
[data-page="home"] .why h3{ font-weight:500; font-size:22px; letter-spacing:-.02em; margin-block:18px 8px; }
@media (max-width:940px){ [data-page="home"] .why{ margin-bottom:18px; } }

/* pasos: línea de tiempo tipográfica */
[data-page="home"] .steps{ gap:0 36px; }
[data-page="home"] .step{ background:none; border:0; border-radius:0; border-top:1.5px solid var(--border); padding:24px 0 10px; }
[data-page="home"] .step-n{
  display:block; width:auto; height:auto; margin-bottom:18px; background:none; border-radius:0;
  font:600 14px/1 var(--font-text); letter-spacing:.09em; color:color-mix(in srgb,var(--brand-deep) 86%,var(--ink));
}
[data-page="home"] .step:first-child .step-n{ border-radius:0; }
[data-page="home"] .step h3{ font-weight:500; letter-spacing:-.02em; }
@media (max-width:900px){ [data-page="home"] .step{ margin-bottom:18px; } }