/* =====================================================================
   BRELANTA — sistema de diseño compartido (index.html + opticas.html)
   Generado con ui-ux-pro-max: SaaS B2B, marca teal + CTA ámbar,
   Plus Jakarta Sans / DM Sans, hero oscuro, vidrio sutil, movimiento moderado.
   ===================================================================== */
/* Tipografías (Google Fonts, subconjunto latin, que cubre todo el español): se piden directo a fonts.gstatic.com
   y con preload en el HTML, así llegan antes de pintar y el texto no salta. Si Google cambia estas URLs, la página
   sigue funcionando con las fuentes de respaldo de abajo (mismas medidas). */
@font-face{ font-family:"Plus Jakarta Sans"; font-style:normal; font-weight:500 800; font-display:swap; src:url(https://fonts.gstatic.com/s/plusjakartasans/v12/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yw.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:"DM Sans"; font-style:normal; font-weight:400 700; font-display:swap; src:url(https://fonts.gstatic.com/s/dmsans/v17/rP2Hp2ywxg089UriCZOIHQ.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap; src:url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F6qfjptAgt5VM-kVkqdyU8n3twJwlBFgg.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:"IBM Plex Mono"; font-style:normal; font-weight:600; font-display:swap; src:url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F6qfjptAgt5VM-kVkqdyU8n3vAOwlBFgg.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Fuentes de respaldo con las métricas de las web: al cargar la tipografía el texto casi no se mueve */
@font-face{ font-family:"Jakarta Fallback"; font-weight:100 599; src:local("Arial"),local("Roboto"); size-adjust:100%; ascent-override:103.5%; descent-override:22%; line-gap-override:0%; }
@font-face{ font-family:"Jakarta Fallback"; font-weight:600 900; src:local("Arial Bold"),local("Arial-BoldMT"),local("Roboto Bold"); size-adjust:101.5%; ascent-override:102.5%; descent-override:21.7%; line-gap-override:0%; }
@font-face{ font-family:"DM Fallback"; font-weight:100 599; src:local("Arial"),local("Roboto"); size-adjust:104.5%; ascent-override:94.7%; descent-override:29.7%; line-gap-override:0%; }
@font-face{ font-family:"DM Fallback"; font-weight:600 900; src:local("Arial Bold"),local("Arial-BoldMT"),local("Roboto Bold"); size-adjust:101.6%; ascent-override:97.4%; descent-override:30.5%; line-gap-override:0%; }
@font-face{ font-family:"Plex Fallback"; src:local("Courier New"),local("Roboto Mono"); size-adjust:100%; ascent-override:103%; descent-override:28%; line-gap-override:0%; }
:root{
  color-scheme: light;
  --bg:#FFFFFF; --bg-alt:#F1F9F8; --surface:#FFFFFF; --surface-2:#F6FBFA;
  --ink:#0A2523; --body:#42605C; --muted:#587471;
  --line:#DBEBE8; --line-2:#E9F4F2;
  --brand:#109E93; --brand-d:#0C817A; --brand-x:#0A6560; --brand-text:#0A6560;
  --tint:#E3F6F3; --tint-2:#C9EEE8;
  --accent:#FFB020; --accent-h:#FFC24D; --on-accent:#1B1300;
  --deep:#052624; --deep-2:#083734;
  --ok:#0F9D6B; --bad:#C0552F; --bad-bg:#FDF3EF;
  --sh-xs:0 1px 2px rgba(5,48,46,.06);
  --sh-sm:0 2px 8px rgba(5,48,46,.07),0 1px 2px rgba(5,48,46,.05);
  --sh-md:0 12px 30px rgba(5,48,46,.10),0 2px 6px rgba(5,48,46,.05);
  --sh-lg:0 30px 70px rgba(5,48,46,.20),0 6px 16px rgba(5,48,46,.08);
  --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:32px;
  --wrap:1180px;
  --display:"Plus Jakarta Sans","Jakarta Fallback","Segoe UI",system-ui,sans-serif;
  --text:"DM Sans","DM Fallback","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono","Plex Fallback",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.22,.7,.3,1);
  --header-bg:rgba(255,255,255,.96);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#071413; --bg-alt:#0B1C1A; --surface:#10221F; --surface-2:#0D1B19;
    --ink:#EAF6F4; --body:#A9C5C1; --muted:#88A6A2;
    --line:#1F3835; --line-2:#182D2B;
    --brand-text:#5ED3C0; --tint:#123531; --tint-2:#1A4A44;
    --bad:#F0917A; --bad-bg:#2A1613;
    --sh-xs:0 1px 2px rgba(0,0,0,.45); --sh-sm:0 2px 8px rgba(0,0,0,.5);
    --sh-md:0 12px 30px rgba(0,0,0,.55); --sh-lg:0 30px 70px rgba(0,0,0,.65);
    --header-bg:rgba(7,20,19,.96);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#071413; --bg-alt:#0B1C1A; --surface:#10221F; --surface-2:#0D1B19;
  --ink:#EAF6F4; --body:#A9C5C1; --muted:#88A6A2;
  --line:#1F3835; --line-2:#182D2B;
  --brand-text:#5ED3C0; --tint:#123531; --tint-2:#1A4A44;
  --bad:#F0917A; --bad-bg:#2A1613;
  --sh-xs:0 1px 2px rgba(0,0,0,.45); --sh-sm:0 2px 8px rgba(0,0,0,.5);
  --sh-md:0 12px 30px rgba(0,0,0,.55); --sh-lg:0 30px 70px rgba(0,0,0,.65);
  --header-bg:rgba(7,20,19,.96);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--body);
  font-family:var(--text); font-size:1.0625rem; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg,picture{ max-width:100%; }
h1,h2,h3,h4{ font-family:var(--display); color:var(--ink); margin:0; font-weight:800; line-height:1.1; letter-spacing:-.03em; text-wrap:balance; }
p{ margin:0; } ul{ margin:0; padding:0; list-style:none; } a{ color:inherit; }
button{ font:inherit; }
.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(20px,5vw,48px); }
:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:6px; }
.sr-only{ 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; }

.ico{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }
.ico.fill{ stroke:none; fill:currentColor; }

/* ---------- textos ---------- */
.kicker{
  display:inline-flex; align-items:center; gap:.6em; font-family:var(--mono); font-size:.75rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--brand-text);
  background:var(--tint); border:1px solid var(--tint-2); padding:.5em 1em; border-radius:100px;
}
.kicker .dot{ width:7px; height:7px; border-radius:50%; background:var(--brand); }
.kicker .dot.pulse{ position:relative; }
.kicker .dot.pulse::after{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--brand); opacity:0; animation:pulse 2.2s ease-out infinite; }
@keyframes pulse{ 0%{ transform:scale(1); opacity:.55; } 100%{ transform:scale(3); opacity:0; } }
.lead{ font-size:1.1875rem; max-width:60ch; }
.hi{ color:var(--brand-text); font-weight:700; }
.grad{ background:linear-gradient(100deg,#7BE9D8 0%,#FFD27A 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.grad-teal{ background:linear-gradient(100deg,var(--brand) 0%,#2FBBAC 60%,#0C817A 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em; white-space:nowrap; cursor:pointer;
  font-family:var(--display); font-weight:700; font-size:1rem; letter-spacing:-.005em;
  padding:1em 1.7em; min-height:48px; border-radius:100px; border:1.5px solid transparent; text-decoration:none;
  transition:transform .2s var(--ease),box-shadow .2s ease,background .2s ease,border-color .2s ease,color .2s ease;
}
.btn .ico{ width:18px; height:18px; }
.btn-cta{ background:var(--accent); color:var(--on-accent); box-shadow:0 10px 26px rgba(255,176,32,.32); }
.btn-cta:hover{ background:var(--accent-h); transform:translateY(-2px); box-shadow:0 16px 34px rgba(255,176,32,.42); }
.btn-cta .ico{ transition:transform .2s var(--ease); } .btn-cta:hover .ico{ transform:translateX(3px); }
.btn-teal{ background:linear-gradient(135deg,#1FB5A7,var(--brand-x)); color:#fff; box-shadow:0 10px 24px rgba(12,129,122,.3); }
.btn-teal:hover{ transform:translateY(-2px); box-shadow:0 16px 32px rgba(12,129,122,.4); }
.btn-ghost{ background:var(--surface); color:var(--brand-text); border-color:var(--tint-2); }
.btn-ghost:hover{ border-color:var(--brand); transform:translateY(-2px); box-shadow:var(--sh-sm); }
.btn-glass{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.28); }
.btn-glass:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.6); transform:translateY(-2px); }
.btn-sm{ padding:.62em 1.25em; min-height:42px; font-size:.9rem; }
.btn-block{ width:100%; }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:60; background:var(--header-bg);
  border-bottom:1px solid var(--line); transition:box-shadow .25s ease;
}
.site-header.scrolled{ box-shadow:0 8px 26px rgba(5,48,46,.10); }
.header-in{ display:flex; align-items:center; gap:clamp(14px,3vw,40px); padding-block:12px; }
.logo{ display:flex; align-items:center; gap:11px; text-decoration:none; flex:0 0 auto; }
.logo-mark{ height:36px; width:auto; display:block; }
.logo-text{ display:flex; flex-direction:column; line-height:1; }
.logo-text b{ font-family:var(--display); font-weight:800; font-size:1.18rem; color:var(--ink); letter-spacing:-.035em; }
.logo-text span{ font-family:var(--mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:4px; }
.main-nav{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.main-nav a:not(.btn){
  font-family:var(--display); font-weight:600; font-size:.9375rem; color:var(--body); text-decoration:none;
  padding:.55em .95em; border-radius:100px; transition:background .16s ease,color .16s ease;
}
.main-nav a:not(.btn):hover{ color:var(--ink); background:var(--bg-alt); }
.main-nav a.active{ color:var(--brand-text); background:var(--tint); }
.nav-cta{ margin-left:8px; }
.icon-btn{
  width:42px; height:42px; border-radius:50%; display:none; place-items:center; cursor:pointer; padding:0; margin-left:6px;
  background:var(--surface); color:var(--ink); border:1.5px solid var(--line); transition:border-color .2s ease,transform .25s var(--ease);
}
.icon-btn:hover{ border-color:var(--brand); }
.theme-btn{ display:grid; color:var(--brand-text); }
.theme-btn:hover{ transform:rotate(-18deg) scale(1.06); }
.theme-btn .ico{ width:19px; height:19px; } .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:20px; height:20px; } .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:1px solid var(--line);
    box-shadow:var(--sh-md); padding:6px clamp(20px,5vw,48px) 16px;
    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-family:var(--display); font-weight:600; font-size:1.05rem; color:var(--ink); text-decoration:none; padding:15px 4px; border-bottom:1px solid var(--line-2); }
  .nav-panel .btn{ margin-top:14px; width:100%; }
}
@media (max-width:620px){ .nav-cta{ display:none; } .logo-text span{ display:none; } }

/* ---------- HERO (siempre oscuro) ---------- */
.hero{
  position:relative; overflow:hidden; color:#CFE7E3; isolation:isolate;
  background:
    radial-gradient(900px 560px at 88% -8%, rgba(47,187,172,.38), transparent 62%),
    radial-gradient(700px 500px at -5% 105%, rgba(255,176,32,.16), transparent 60%),
    linear-gradient(160deg,#052624 0%,#073B37 55%,#052624 100%);
  padding-block:clamp(44px,6vw,84px) clamp(64px,8vw,120px);
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:56px 56px; mask-image:radial-gradient(720px 460px at 70% 30%,#000,transparent 75%); -webkit-mask-image:radial-gradient(720px 460px at 70% 30%,#000,transparent 75%);
}
.hero .kicker{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:#9BEBDD; }
.hero h1{ color:#fff; font-size:clamp(2.35rem,5.2vw,4rem); margin-block:22px 20px; letter-spacing:-.04em; }
.hero .lead{ color:#BFD9D5; font-size:clamp(1.05rem,1.6vw,1.25rem); }
.hero .lead b{ color:#fff; }
.hero-in{ display:grid; grid-template-columns:1fr 1.02fr; gap:clamp(30px,4.5vw,64px); 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:8px; font-size:.9375rem; color:#A9CBC6; }
.hero-trust .ico{ width:17px; height:17px; stroke-width:2.6; color:#5ED3C0; }
.crumb{ display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:.8125rem; color:#8FB5B0; margin-bottom:22px; }
.crumb a{ color:#8FB5B0; text-decoration:none; } .crumb a:hover{ color:#fff; } .crumb svg{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; }

/* marco de producto */
.hero-art{ position:relative; padding:0 0 28px 0; }
.frame{
  position:relative; border-radius:18px; background:#0B2B29; border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 90px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.04) inset; overflow:hidden;
  transform:perspective(1600px) rotateY(-6deg) rotateX(2deg); transition:transform .6s var(--ease);
}
.hero-art:hover .frame{ transform:perspective(1600px) rotateY(-2deg) rotateX(1deg); }
.frame-bar{ display:flex; align-items:center; gap:7px; padding:11px 14px; background:rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.08); }
.frame-bar i{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.22); }
.frame-bar span{ margin-left:10px; flex:1; max-width:260px; font-family:var(--mono); font-size:.68rem; color:#8FB5B0; background:rgba(255,255,255,.06); padding:.3em .9em; border-radius:100px; }
.frame img{ display:block; width:100%; height:auto; }
.frame.light{ background:var(--surface); border-color:var(--line); box-shadow:var(--sh-lg); transform:none; }
.frame.light .frame-bar{ background:var(--surface-2); border-bottom-color:var(--line); }
.frame.light .frame-bar i{ background:var(--line); } .frame.light .frame-bar span{ background:var(--bg-alt); color:var(--muted); }
.float{
  position:absolute; z-index:3; background:rgba(255,255,255,.96); color:#0A2523; border-radius:16px;
  box-shadow:0 20px 44px rgba(0,0,0,.35); padding:12px 16px; display:flex; align-items:center; gap:12px;
  font-family:var(--display); animation:floaty 7s ease-in-out infinite;
}
.float .fi{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:#E3F6F3; color:#0A6560; flex:0 0 auto; }
.float .fi.warn{ background:#FFF1D1; color:#8A5A00; }
.float small{ display:block; font-family:var(--mono); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:#587471; }
.float b{ font-size:1rem; letter-spacing:-.02em; }
.float.f1{ left:-4%; bottom:4%; } .float.f2{ right:-2%; top:9%; animation-delay:-3s; } .float.f3{ right:6%; bottom:-2%; animation-delay:-5s; }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
@media (max-width:980px){
  .hero-in{ grid-template-columns:1fr; }
  .hero-art{ max-width:640px; margin-inline:auto; width:100%; }
  .frame{ transform:none; } .float.f1{ left:2%; } .float.f2{ right:2%; }
}
@media (max-width:560px){ .float.f3{ display:none; } .float{ padding:9px 12px; } .float .fi{ width:32px; height:32px; } .hero-btns .btn{ flex:1 1 100%; } }
.hero-wave{ position:absolute; left:0; right:0; bottom:-1px; width:100%; height:clamp(28px,4vw,56px); color:var(--bg); display:block; }

/* ---------- franja de datos ---------- */
.stats{ position:relative; z-index:2; margin-top:calc(-1 * clamp(28px,4vw,44px)); }
.stats-in{
  display:grid; grid-template-columns:repeat(4,1fr); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-md); overflow:hidden;
}
.stat{ padding:22px 24px; border-right:1px solid var(--line); }
.stat:last-child{ border-right:none; }
.stat b{ display:block; font-family:var(--display); font-weight:800; font-size:clamp(1.5rem,2.6vw,2rem); color:var(--ink); letter-spacing:-.04em; line-height:1.1; }
.stat span{ font-size:.875rem; color:var(--muted); }
@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:1px solid var(--line); } }

/* ---------- secciones ---------- */
.section{ padding-block:clamp(52px,8vw,108px); }
.section.alt{ background:var(--bg-alt); border-block:1px solid var(--line); }
.sec-head{ max-width:720px; margin-bottom:clamp(36px,5vw,60px); }
.sec-head.center{ text-align:center; margin-inline:auto; }
.sec-head.center .lead{ margin-inline:auto; }
.sec-head h2{ font-size:clamp(1.9rem,3.8vw,2.8rem); margin-block:18px 14px; }

/* ---------- tour del producto (tabs) ---------- */
.tour{ display:grid; grid-template-columns:.8fr 1.5fr; gap:clamp(24px,4vw,56px); align-items:start; }
.tabs{ display:grid; gap:10px; }
.tab{
  text-align:left; cursor:pointer; background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r);
  padding:16px 18px; display:flex; gap:14px; align-items:flex-start; color:var(--body);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s var(--ease),background .2s ease;
}
.tab:hover{ border-color:var(--brand); transform:translateX(4px); }
.tab[aria-selected="true"]{ border-color:var(--brand); box-shadow:var(--sh-md); background:var(--surface); }
.tab .ti{ width:44px; height:44px; border-radius:13px; display:grid; place-items:center; background:var(--tint); color:var(--brand-text); flex:0 0 auto; transition:background .2s ease,color .2s ease; }
.tab[aria-selected="true"] .ti{ background:linear-gradient(150deg,#1FB5A7,var(--brand-x)); color:#fff; }
.tab b{ display:block; font-family:var(--display); font-size:1.02rem; color:var(--ink); letter-spacing:-.02em; }
.tab span{ font-size:.875rem; line-height:1.45; display:block; margin-top:2px; }
.tour-stage{ position:sticky; top:96px; }
.tour-panel[hidden]{ display:none; }
.tour-panel .frame{ animation:panelIn .45s var(--ease); }
@keyframes panelIn{ from{ opacity:0; transform:translateY(12px) scale(.985); } to{ opacity:1; transform:none; } }
@media (max-width:920px){
  .tour{ grid-template-columns:1fr; }
  .tabs{ display:flex; overflow-x:auto; gap:10px; scroll-snap-type:x mandatory; padding-bottom:6px; margin-inline:-20px; padding-inline:20px; scrollbar-width:none; }
  .tabs::-webkit-scrollbar{ display:none; }
  .tab{ flex:0 0 auto; scroll-snap-align:start; padding:12px 16px; align-items:center; }
  .tab span{ display:none; } .tab .ti{ width:36px; height:36px; border-radius:10px; } .tab:hover{ transform:none; }
  .tour-stage{ position:static; }
}

/* ---------- funciones ---------- */
.ico-badge{ width:50px; height:50px; border-radius:15px; display:grid; place-items:center; flex:0 0 auto; background:var(--tint); color:var(--brand-text); border:1px solid var(--tint-2); }
.ico-badge.solid{ background:linear-gradient(150deg,#1FB5A7,var(--brand-x)); color:#fff; border-color:transparent; box-shadow:0 10px 22px rgba(12,129,122,.26); }

/* ---------- precio ---------- */
.price-when{ font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:#8FB5B0; }
.price-amount{ display:flex; align-items:baseline; gap:10px; margin-block:8px; }
.price-amount b{ font-family:var(--display); font-weight:800; font-size:clamp(2.4rem,5.4vw,3.3rem); color:#fff; letter-spacing:-.05em; line-height:1; }
.price-per{ font-family:var(--mono); font-size:.8rem; color:#9BEBDD; }

/* ---------- pasos ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; position:relative; counter-reset:s; }
.step{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 22px; box-shadow:var(--sh-xs); overflow:hidden; }
.step-n{ font-family:var(--display); font-weight:800; font-size:3.4rem; line-height:1; letter-spacing:-.06em; color:var(--tint-2); position:absolute; right:14px; top:8px; }
.step h3{ font-size:1.1rem; margin-bottom:6px; position:relative; margin-top:34px; } .step p{ font-size:.9375rem; position:relative; }
.step::after{ content:""; position:absolute; left:0; top:0; height:4px; width:100%; background:linear-gradient(90deg,var(--brand),transparent); opacity:.7; }
@media (max-width:900px){ .steps{ grid-template-columns:repeat(2,1fr); } } @media (max-width:520px){ .steps{ grid-template-columns:1fr; } }

/* ---------- sistemas (index) ---------- */
.sys-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.sys-card{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:0 26px 26px; box-shadow:var(--sh-sm); overflow:hidden; display:flex; flex-direction:column; transition:transform .25s var(--ease),box-shadow .25s ease,border-color .25s ease; }
.sys-card:hover{ transform:translateY(-6px); box-shadow:var(--sh-md); border-color:var(--tint-2); }
.sys-card.featured{ border-color:var(--brand); box-shadow:var(--sh-md); }
.sys-photo{ display:block; width:calc(100% + 52px); max-width:none; height:170px; object-fit:cover; margin:0 -26px 20px; background:var(--tint); transition:transform .9s var(--ease),filter .3s ease; }
.sys-card:hover .sys-photo{ transform:scale(1.05); }
.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-card.soon{ background:var(--surface-2); }
.sys-top{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; }
.tag{ font-family:var(--mono); font-size:.66rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:.5em .9em; border-radius:100px; white-space:nowrap; }
.tag-live{ background:var(--accent); color:var(--on-accent); } .tag-dev{ background:var(--tint); color:var(--brand-text); } .tag-soon{ background:var(--line-2); color:var(--muted); }
.sys-card h3{ font-size:1.35rem; margin-bottom:4px; }
.sys-sub{ font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--brand-text); margin-bottom:12px; }
.sys-card > p{ font-size:.9688rem; }
.sys-list{ margin-block:16px 4px; display:grid; gap:8px; }
.sys-list li{ display:flex; gap:9px; font-size:.9188rem; align-items:flex-start; }
.sys-list .ico{ width:16px; height:16px; stroke-width:2.6; color:var(--brand); margin-top:.35em; }
.sys-card .btn{ margin-top:auto; width:100%; } .sys-card .sys-list{ margin-bottom:22px; }
@media (max-width:900px){ .sys-grid{ grid-template-columns:1fr; } }
.ask-strip{ margin-top:26px; display:flex; flex-wrap:wrap; align-items:center; gap:16px; background:var(--surface); border:1.5px dashed var(--brand); border-radius:var(--r); padding:18px 22px; }
.ask-strip p{ flex:1 1 260px; font-size:.9688rem; }

/* ---------- por qué (index) ---------- */
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.why{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 22px; transition:transform .22s var(--ease),box-shadow .22s ease; }
.why:hover{ transform:translateY(-5px); box-shadow:var(--sh-md); }
.why h3{ font-size:1.08rem; margin-block:16px 8px; } .why p{ font-size:.9375rem; }
@media (max-width:940px){ .why-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .why-grid{ grid-template-columns:1fr; } }

/* ---------- FAQ ---------- */
.faq{ max-width:820px; margin-inline:auto; display:grid; gap:12px; }
.faq details{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); transition:border-color .2s ease,box-shadow .2s ease; }
.faq details[open]{ border-color:var(--brand); box-shadow:var(--sh-sm); }
.faq summary{ list-style:none; cursor:pointer; padding:18px 22px; display:flex; justify-content:space-between; align-items:center; gap:16px; font-family:var(--display); font-weight:700; font-size:1.05rem; color:var(--ink); letter-spacing:-.015em; min-height:56px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .pm{ width:28px; height:28px; border-radius:50%; background:var(--tint); color:var(--brand-text); display:grid; place-items:center; flex:0 0 auto; transition:transform .3s var(--ease),background .2s ease; }
.faq summary .pm .ico{ width:15px; height:15px; stroke-width:2.6; }
.faq details[open] summary .pm{ transform:rotate(45deg); background:var(--brand); color:#fff; }
.faq .ans{ padding:0 22px 20px; font-size:.9875rem; max-width:68ch; }

/* ---------- CTA final ---------- */
.cta-band{
  position:relative; overflow:hidden; color:#fff; text-align:center; padding-block:clamp(56px,8vw,104px);
  background:radial-gradient(700px 380px at 15% 0%,rgba(47,187,172,.4),transparent 60%),radial-gradient(600px 360px at 90% 100%,rgba(255,176,32,.22),transparent 60%),linear-gradient(160deg,#052624,#073B37);
}
.cta-band::before{ content:""; position:absolute; inset:0; opacity:.5; background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px); background-size:26px 26px; mask-image:radial-gradient(640px 300px at 50% 0%,#000,transparent 75%); -webkit-mask-image:radial-gradient(640px 300px at 50% 0%,#000,transparent 75%); }
.cta-in{ position:relative; }
.cta-in h2{ color:#fff; font-size:clamp(2rem,4.4vw,3.2rem); margin-bottom:16px; }
.cta-in p{ color:#BFD9D5; font-size:1.125rem; max-width:52ch; margin-inline:auto; }
.cta-btns{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:32px; }
.cta-fine{ margin-top:18px; font-family:var(--mono); font-size:.75rem; letter-spacing:.06em; color:#8FB5B0 !important; }
@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(1.8rem,3.6vw,2.6rem); 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); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; transition:transform .2s var(--ease),box-shadow .2s ease,border-color .2s ease; }
.reach a:hover{ transform:translateY(-3px); box-shadow:var(--sh-sm); border-color:var(--brand); }
.reach-txt{ display:flex; flex-direction:column; min-width:0; } .reach-txt b{ font-family:var(--display); font-size:1.05rem; color:var(--ink); overflow-wrap:anywhere; } .reach-txt span{ font-size:.875rem; color:var(--muted); }
.reach .ico-badge{ width:46px; height:46px; }
.form-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(24px,3.6vw,40px); box-shadow:var(--sh-lg); position:relative; }
.form-card::before{ content:""; position:absolute; left:32px; right:32px; top:0; height:4px; border-radius:0 0 6px 6px; background:linear-gradient(90deg,var(--accent),var(--brand)); }
.form-card h3{ font-size:1.4rem; margin-bottom:6px; } .form-card > p{ font-size:.9688rem; margin-bottom:24px; }
.f-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:grid; gap:7px; margin-bottom:16px; min-width:0; }
label{ font-family:var(--mono); font-size:.75rem; font-weight:600; letter-spacing:.02em; color:var(--ink); }
input,select,textarea{ font-family:var(--text); font-size:1rem; color:var(--ink); background:var(--surface-2); border:1.5px solid var(--line); border-radius:12px; padding:.85em .95em; min-height:48px; width:100%; transition:border-color .16s ease,background .16s ease,box-shadow .16s ease; }
input::placeholder,textarea::placeholder{ color:var(--muted); opacity:.75; }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--brand); background:var(--surface); box-shadow:0 0 0 4px var(--tint); }
textarea{ resize:vertical; min-height:92px; line-height:1.55; }
.field.bad input,.field.bad select{ border-color:var(--bad); background:var(--bad-bg); }
.err{ font-family:var(--display); font-size:.8125rem; font-weight:600; color:var(--bad); display:none; } .field.bad .err{ display:block; }
.f-note{ font-size:.8438rem; color:var(--muted); margin-top:14px; text-align:center; } .f-note a{ color:inherit; text-decoration:underline; }
.legal .wrap{ max-width:760px; } .legal h1{ margin:8px 0 6px; } .legal-date{ color:var(--muted); font-size:.9rem; margin-bottom:28px; }
.legal h2{ font-size:1.15rem; margin:30px 0 8px; } .legal p,.legal li{ line-height:1.7; } .legal ul{ margin:8px 0 12px; padding-left:22px; list-style:disc; }
.legal a:not(.btn){ color:var(--brand-text); text-decoration:underline; text-underline-offset:3px; } .legal-back{ margin-top:34px; }
.form-card > p.f-fail{ display:none; margin:12px 0 0; padding:12px 14px; border-radius:12px; background:var(--bad-bg); color:var(--bad); font-size:.9rem; font-weight:600; 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 14px; width:64px; height:64px; border-radius:50%; background:rgba(15,157,107,.14); color:var(--ok); border-color:rgba(15,157,107,.3); } .f-done .ico-badge .ico{ width:30px; height:30px; }
.f-done h3{ margin-bottom:8px; } .f-done p{ margin-bottom:20px; }
.f-again{ background:none; border:0; color:var(--muted); font:inherit; font-size:.875rem; text-decoration:underline; cursor:pointer; margin-top:14px; padding:8px; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } } @media (max-width:560px){ .f-row{ grid-template-columns:1fr; } }

/* ---------- footer ---------- */
.site-footer{ background:#041B1A; color:rgba(255,255,255,.72); padding-block:52px 32px; }
.footer-in{ display:flex; flex-wrap:wrap; gap:30px 48px; justify-content:space-between; }
.site-footer .logo-text b{ color:#fff; } .site-footer .logo-text span{ color:rgba(255,255,255,.5); }
.site-footer p{ font-size:.9375rem; max-width:36ch; color:rgba(255,255,255,.62); margin-top:14px; }
.footer-nav{ display:flex; flex-wrap:wrap; gap:10px 26px; align-content:flex-start; }
.footer-nav a{ font-family:var(--display); font-weight:600; font-size:.9375rem; color:rgba(255,255,255,.78); text-decoration:none; } .footer-nav a:hover{ color:#fff; }
.footer-bottom{ margin-top:36px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); font-family:var(--mono); font-size:.8125rem; color:rgba(255,255,255,.5); display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; }

/* ---------- 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:#25D366; color:#062b14; text-decoration:none; font-family:var(--display); font-weight:700; font-size:.9375rem; padding:.85em 1.3em; min-height:48px; border-radius:100px; box-shadow:0 8px 26px rgba(37,211,102,.45); transition:transform .2s var(--ease),box-shadow .2s ease; }
.wa-float:hover{ transform:translateY(-3px) scale(1.03); }
.wa-float svg{ width:22px; height:22px; fill:currentColor; }
.mobile-bar{ display:none; }
@media (max-width:620px){
  .wa-float{ bottom:84px; padding:.9em; } .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(--header-bg); border-top:1px solid var(--line); transform:translateY(110%); transition:transform .3s var(--ease); }
  .mobile-bar.show{ transform:none; } .mobile-bar .btn{ flex:1; }
  body{ padding-bottom:0; } .site-footer{ padding-bottom:96px; }
}

/* ---------- aparición al hacer scroll ---------- */
.reveal{ opacity:0; transform:translateY(26px); 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){ .site-header{ backdrop-filter:none; background:var(--bg); } .reveal{ transform:translateY(14px); transition-duration:.5s; } }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; } .anim,.float,.kicker .dot.pulse,.tour-panel .frame{ animation:none; }
  html{ scroll-behavior:auto; } .btn:hover,.why:hover,.sys-card:hover,.reach a:hover,.tab:hover{ transform:none; }
  .frame{ transform:none; transition:none; }
}

/* =====================================================================
   OPTICAS v2 — capturas reales del sistema, recorrido de 9 módulos, documentos,
   recordatorios, estadísticas, personalización y móvil.
   ===================================================================== */

/* ---------- hero: tarjetas reales flotantes + teléfono ---------- */
.float-img{
  position:absolute; z-index:3; height:auto; background:#fff; border-radius:14px; border:1px solid rgba(255,255,255,.22);
  box-shadow:0 22px 50px rgba(0,0,0,.42); animation:floaty 7s ease-in-out infinite;
}
.f-kpi{ width:clamp(138px,21%,206px); right:-3%; top:-5%; animation-delay:-2s; }
.f-lab{ width:clamp(168px,31%,262px); left:-5%; bottom:5%; animation-delay:-4.5s; }
.phone{
  position:relative; background:#0A1918; border-radius:26px; padding:5px;
  box-shadow:0 26px 60px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.14) inset;
}
.phone img{ display:block; width:100%; height:auto; border-radius:21px; }
.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%; animation:floaty 9s ease-in-out -1s infinite; }
@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%; } }

/* ---------- recorrido: 9 pestañas compactas + ficha por módulo ---------- */
.tour{ grid-template-columns:.72fr 1.6fr; }
.tabs{ gap:8px; }
.tab{ padding:11px 15px; gap:13px; align-items:center; }
.tab .ti{ width:40px; height:40px; border-radius:12px; margin-top:0; }
.tab b{ font-size:.98rem; } .tab span{ font-size:.84rem; margin-top:1px; }
.tour-stage{ min-height:var(--stage-h,0px); }
.mod{ margin-top:22px; padding:0 4px; }
.mod h3{ font-size:clamp(1.3rem,2.3vw,1.7rem); }
.mod > p{ margin-top:8px; max-width:66ch; }
.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-size:.9375rem; line-height:1.5; }
.mod-feats .ico{ width:18px; height:18px; stroke-width:2.6; color:var(--brand); margin-top:.24em; }
.fine-print{ text-align:center; margin-top:26px; font-family:var(--mono); font-size:.75rem; letter-spacing:.03em; color:var(--muted); }
@media (max-width:920px){
  .tour{ grid-template-columns:1fr; } .tab{ padding:9px 14px 9px 10px; gap:10px; } .tour-stage{ min-height:0; }
  .tab > span:last-child{ display:block; } .tab > span:last-child > span{ display:none; }
  .tab b{ font-size:.92rem; white-space:nowrap; } .tab .ti{ width:34px; height:34px; border-radius:10px; }
}
@media (max-width:620px){ .mod-feats{ grid-template-columns:1fr; } }

.hero h1.h1-md{ font-size:clamp(2.2rem,4.5vw,3.5rem); }
.shot{ position:relative; margin-bottom:22px; }
.inset{
  position:absolute; right:-12px; bottom:-26px; width:36%; height:auto; z-index:3; border-radius:16px; background:#fff;
  border:1px solid var(--line); box-shadow:0 22px 50px rgba(5,48,46,.28),0 4px 12px rgba(5,48,46,.12);
}
.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; } }
.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%; } }

/* ---------- sección oscura: recordatorios ---------- */
.dark-sec{
  position:relative; overflow:hidden; color:#CFE7E3;
  background:radial-gradient(800px 460px at 92% 0%,rgba(47,187,172,.32),transparent 62%),radial-gradient(620px 420px at 0% 100%,rgba(255,176,32,.14),transparent 60%),linear-gradient(160deg,#052624,#073B37 60%,#052624);
}
.dark-sec h2{ color:#fff; } .dark-sec .lead{ color:#BFD9D5; } .dark-sec .lead b{ color:#fff; }
.dark-sec .kicker{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:#9BEBDD; }
.rec-in{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,76px); align-items:center; }
.rec-copy h2{ font-size:clamp(1.9rem,3.6vw,2.7rem); margin-block:18px 14px; }
.rec-lists{ display:grid; gap:10px; margin-top:26px; }
.rec-lists li{ display:flex; gap:14px; align-items:center; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:11px 16px; }
.rl-n{ min-width:46px; height:46px; padding-inline:6px; border-radius:13px; display:grid; place-items:center; background:var(--accent); color:var(--on-accent); font-family:var(--display); font-weight:800; font-size:1.15rem; letter-spacing:-.03em; }
.rec-lists b{ display:block; color:#fff; font-family:var(--display); font-size:1rem; letter-spacing:-.015em; }
.rec-lists small{ display:block; color:#9BC5BF; font-size:.875rem; line-height:1.4; }
.rec-fine{ margin-top:14px; font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; color:#8FB5B0; }
.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:#EFEAE2; color:#10281F; border-radius:20px; padding:14px 14px 12px; box-shadow:0 26px 60px rgba(0,0,0,.45); display:grid; gap:8px;
}
.wa-head{ display:flex; align-items:center; gap:10px; padding-bottom:6px; }
.wa-av{ width:34px; height:34px; border-radius:50%; background:#25D366; color:#062b14; display:grid; place-items:center; flex:0 0 auto; }
.wa-av .ico{ width:18px; height:18px; }
.wa-head b{ display:block; font-family:var(--display); font-size:.92rem; line-height:1.2; }
.wa-head small{ display:block; font-family:var(--mono); font-size:.62rem; letter-spacing:.04em; opacity:.6; }
.wa-bubble{ background:#DCF8C6; border-radius:14px 14px 4px 14px; padding:9px 12px; font-size:.8rem; line-height:1.42; box-shadow:0 1px 1px rgba(0,0,0,.08); }
@media (max-width:900px){ .rec-in{ grid-template-columns:1fr; } .rec-art{ padding-bottom:120px; } }
@media (max-width:520px){ .wa-bubble{ font-size:.76rem; } }

/* ---------- planes: Basic y Plus ---------- */
.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(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(24px,3vw,36px); box-shadow:var(--sh-md); }
.plan-name{ font-family:var(--mono); font-size:.74rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-text); }
.plan-tag{ font-family:var(--display); font-weight:700; font-size:1.15rem; color:var(--ink); letter-spacing:-.02em; margin:0; line-height:1.25; }
.plan-prices{ display:grid; grid-template-columns:1fr 1fr; gap:14px; padding-block:14px; border-block:1px dashed var(--line); }
.plan .price-when{ color:var(--muted); }
.plan .price-amount{ margin-block:6px 0; }
.plan .price-amount b{ color:var(--ink); font-size:clamp(2rem,4.4vw,2.7rem); }
.plan .price-per{ color:var(--muted); }
.plan-list{ display:grid; gap:11px; }
.plan-list li{ display:flex; gap:11px; font-size:.9375rem; align-items:flex-start; }
.plan-list .ico{ flex:none; width:20px; height:20px; padding:4px; border-radius:50%; background:var(--tint); color:var(--brand-text); stroke-width:3; margin-top:.12em; }
.plan-more{ font-family:var(--display); font-weight:700; font-size:.95rem; color:var(--ink); margin:2px 0 -4px; }
.plan .btn-block{ margin-top:auto; }
.plan-plus{ background:linear-gradient(165deg,#083734,#052624); border-color:transparent; color:#CFE7E3; box-shadow:var(--sh-lg); overflow:hidden; }
.plan-plus::before{ content:""; position:absolute; inset:0; background:radial-gradient(420px 220px at 100% 0%,rgba(47,187,172,.3),transparent 70%); pointer-events:none; }
.plan-plus > *{ position:relative; }
.plan-plus .plan-name{ color:#7BE9D8; }
.plan-plus .plan-tag,.plan-plus .plan-more,.plan-plus .price-amount b{ color:#fff; }
.plan-plus .plan-prices{ border-color:rgba(255,255,255,.18); }
.plan-plus .price-when{ color:#8FB5B0; }
.plan-plus .price-per{ color:#9BEBDD; }
.plan-plus .plan-list li{ color:#DDEEEB; }
.plan-plus .plan-list .ico{ background:rgba(123,233,216,.16); color:#7BE9D8; }
.plan-flag{ position:absolute !important; top:0; right:22px; background:#FFB020; color:#3A2600; border-radius:0 0 10px 10px; padding:.45em .95em; font-family:var(--mono); font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.installs{ background:rgba(255,176,32,.12); border:1px solid rgba(255,176,32,.4); border-radius:14px; padding:14px 16px; }
.installs b{ display:block; color:#FFD27A; font-size:.9rem; }
.inst-row{ display:grid; grid-template-columns:1fr 1.25fr; gap:10px; margin-top:10px; }
.inst-row span{ background:rgba(0,0,0,.24); border-radius:10px; padding:10px 12px; color:#fff; font-family:var(--display); font-weight:800; font-size:1.05rem; line-height:1.25; }
.inst-row i{ display:block; font-style:normal; font-family:var(--mono); font-weight:600; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:#FFD27A; margin-bottom:4px; line-height:1.3; }
.plan-hook{ margin:0; font-size:.9rem; color:#BFD9D5; }
.plan-hook b{ color:#FFD27A; }
.compare{ max-width:1000px; margin:26px 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; font-family:var(--display); font-weight:700; font-size:.98rem; color:var(--brand-text); background:var(--surface); border:1.5px solid var(--tint-2); border-radius:100px; padding:.7em 1.2em; transition:border-color .2s ease,box-shadow .2s ease; }
.compare summary::-webkit-details-marker{ display:none; }
.compare summary:hover{ border-color:var(--brand); box-shadow:var(--sh-sm); }
.compare summary .pm{ display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--tint); 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:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-sm); }
.cmp{ width:100%; border-collapse:collapse; font-size:.9375rem; min-width:340px; }
.cmp th,.cmp td{ padding:12px 14px; border-bottom:1px solid var(--line-2); text-align:center; }
.cmp thead th{ font-family:var(--display); font-weight:800; font-size:1rem; color:var(--ink); background:var(--surface-2); }
.cmp thead th.pl{ background:#083734; color:#fff; }
.cmp tbody th{ text-align:left; font-weight:500; color:var(--ink); }
.cmp td{ color:var(--muted); white-space:nowrap; }
.cmp td.pl{ background:rgba(47,187,172,.09); color:var(--ink); }
.cmp td b{ color:var(--brand-text); }
.cmp tr:last-child th,.cmp tr:last-child td{ border-bottom:none; }
.cmp .y .ico{ width:20px; height:20px; padding:4px; border-radius:50%; background:var(--tint); color:var(--brand-text); stroke-width:3; vertical-align:middle; }
.cmp td.pl .y .ico{ background:var(--brand); color:#fff; }
.cmp .n{ color:var(--muted); opacity:.55; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (max-width:520px){ .cmp{ font-size:.86rem; } .cmp th,.cmp td{ padding:10px 8px; } .cmp td{ white-space:normal; } }
.addon{ display:flex; align-items:center; gap:12px; border:1.5px dashed rgba(123,233,216,.45); border-radius:14px; padding:12px 14px; }
.addon-tag{ flex:none; font-family:var(--mono); font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#052624; background:#7BE9D8; border-radius:100px; padding:.25em .7em; }
.addon-txt{ flex:1; min-width:0; display:grid; gap:1px; }
.addon-txt b{ color:#fff; font-family:var(--display); font-size:1rem; letter-spacing:-.01em; }
.addon-txt span{ font-size:.82rem; color:#A9CBC6; line-height:1.35; }
.addon-price{ flex:none; text-align:right; color:#9BEBDD; font-family:var(--mono); font-size:.75rem; }
.addon-price b{ display:block; color:#fff; font-family:var(--display); font-weight:800; font-size:1.15rem; letter-spacing:-.02em; }
@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; } }
.inst-row span{ white-space:nowrap; }
@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:.92rem; } .inst-row i{ white-space:normal; } }
.pb{ font-style:normal; font-family:var(--mono); font-size:.6rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; background:#FFB020; color:#3A2600; padding:.18em .6em; border-radius:100px; margin-left:.35em; vertical-align:middle; white-space:nowrap; }
.pb-line{ font-size:.85rem; color:var(--muted); margin:0 0 8px; }
.pb-line .pb{ margin-left:0; margin-right:.5em; }
.lead .pb{ margin-inline:.15em; }

@media (prefers-reduced-motion:reduce){
  .float-img,.f-phone{ animation:none; }
  .rec-phone.p1,.rec-phone.p2{ transform:none; }
}

/* =====================================================================
   OPTICAS v3 — página resumida: lo que te damos, antes y después, contacto
   ===================================================================== */
/* recordatorios: lista compacta, solo títulos */
.rec-lists{ gap:8px; }
.rec-lists li{ padding:8px 14px 8px 8px; }
.rec-lists .rl-n{ min-width:40px; height:40px; border-radius:11px; font-size:1.05rem; }

/* ---------- lo que te damos: bento ---------- */
.give{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.give-card{ position:relative; display:flex; flex-direction:column; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(20px,2.4vw,28px); box-shadow:var(--sh-sm); overflow:hidden; }
.give-card h3{ font-size:1.12rem; letter-spacing:-.02em; line-height:1.25; }
.give-card p{ font-size:.9375rem; color:var(--muted); line-height:1.5; }
.give-card .ico-badge{ width:46px; height:46px; border-radius:14px; }
.give-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:4px; }
.give-tag{ font-family:var(--mono); font-size:.64rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-text); background:var(--tint); border:1px solid var(--tint-2); padding:.4em .8em; border-radius:100px; white-space:nowrap; }
.g-brand{ grid-column:span 2; padding-bottom:0; }
.g-brand h3,.g-support h3{ font-size:clamp(1.3rem,2.2vw,1.6rem); }
.give-fine{ font-family:var(--mono); font-size:.68rem !important; letter-spacing:.04em; margin-top:-4px; }
.g-support{ grid-column:span 2; background:linear-gradient(160deg,#083734,#052624); border-color:transparent; box-shadow:var(--sh-md); }
.g-support h3{ color:#fff; } .g-support p{ color:#BFD9D5; }
.g-support .give-tag{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:#9BEBDD; }
/* abanico de documentos con marca, asomando por el borde inferior de la tarjeta */
.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:1px solid var(--line); border-radius:10px; box-shadow:0 18px 40px rgba(5,48,46,.18),0 3px 8px rgba(5,48,46,.08); }
.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; }
/* chat de soporte (ejemplo) */
.chatbox{ margin-top:auto; display:grid; gap:8px; background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:14px; }
.chatbox p{ margin:0; max-width:88%; padding:9px 13px; border-radius:14px; font-size:.875rem; line-height:1.4; color:#10281F; box-shadow:0 1px 1px rgba(0,0,0,.14); }
.chatbox .cb-out{ justify-self:end; background:#DCF8C6; border-bottom-right-radius:4px; }
.chatbox .cb-in{ justify-self:start; background:#fff; border-bottom-left-radius:4px; }
@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(--r-lg); }
  .give-card h3{ font-size:1rem; } .give-card p{ font-size:.875rem; }
  .give-card .ico-badge{ width:40px; height:40px; border-radius:12px; }
  .g-brand h3,.g-support h3{ font-size:1.25rem; }
  .g-brand p,.g-support p{ font-size:.9375rem; }
}

/* ---------- 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 20px 10px; font-family:var(--mono); font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.vs-h-bad{ color:var(--bad); } .vs-h-good{ color:var(--brand-text); }
.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); border:1px solid var(--line); border-radius:var(--r); padding:14px 20px; box-shadow:var(--sh-xs); }
.vs-k{ font-family:var(--display); font-weight:700; color:var(--ink); letter-spacing:-.015em; line-height:1.3; }
.vs-bad,.vs-good{ display:block; position:relative; padding-left:29px; font-size:.9375rem; line-height:1.4; }
.vs-bad{ color:var(--muted); }
.vs-good{ color:var(--ink); font-weight:600; }
.vs-bad::before,.vs-good::before{ content:""; position:absolute; left:0; top:0; width:20px; height:20px; border-radius:50%; background-position:center; background-repeat:no-repeat; background-size:12px 12px; }
.vs-bad::before{ background-color:rgba(192,85,47,.14); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9644A' 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::before{ 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='%23FFFFFF' 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:.98rem; }
  .vs-bad,.vs-good{ font-size:.875rem; padding-left:26px; }
  .vs-bad::before,.vs-good::before{ width:19px; height:19px; top:0; }
}
/* franja de datos en el celular: cifras en una sola línea */
@media (max-width:560px){
  .stat{ padding:16px; }
  .stat b{ font-size:1.32rem; white-space:nowrap; }
  .stat span{ font-size:.8125rem; line-height:1.45; display:block; margin-top:2px; }
}

/* ---------- contacto: próximos pasos y formulario más corto ---------- */
.next-steps{ list-style:none; display:grid; gap:10px; margin:24px 0 0; padding:0; }
.next-steps li{ display:flex; align-items:center; gap:12px; font-size:1rem; color:var(--ink); font-weight:500; }
.next-steps b{ flex:none; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--tint); color:var(--brand-text); border:1px solid var(--tint-2); font-family:var(--display); font-weight:800; font-size:.95rem; }
.opt{ font-weight:500; color:var(--muted); letter-spacing:0; }
.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-family:var(--mono); font-size:.75rem; font-weight:600; color:var(--brand-text); }
.f-more summary::-webkit-details-marker{ display:none; }
.f-more summary::before{ content:"+"; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--tint); font-size:.95rem; line-height:1; }
.f-more[open] summary::before{ content:"\2212"; }
.f-more .field{ margin:2px 0 0; }

/* ---------- pestañas en el celular: se nota que hay más a la derecha ---------- */
@media (max-width:920px){
  .tabs{ padding-right:48px; -webkit-mask-image:linear-gradient(90deg,#000 86%,transparent); mask-image:linear-gradient(90deg,#000 86%,transparent); }
}

/* ---------- para el dueño: así se llena una consulta ---------- */
.rx{ display:grid; gap:clamp(16px,2.2vw,26px); }
.rx-step{ display:grid; grid-template-columns:.9fr 1.3fr; gap:clamp(20px,3.4vw,48px); align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(20px,3vw,36px); box-shadow:var(--sh-sm); }
.rx-text,.rx-media{ min-width:0; }
.rx-num{ display:inline-grid; place-items:center; width:38px; height:38px; border-radius:12px; background:linear-gradient(150deg,#1FB5A7,var(--brand-x)); color:#fff; font-family:var(--display); font-weight:800; font-size:1.05rem; box-shadow:0 8px 18px rgba(12,129,122,.26); }
.rx-step h3{ font-size:clamp(1.25rem,2.2vw,1.6rem); margin:14px 0 4px; }
.rx-step .mod-feats{ grid-template-columns:1fr; gap:10px; }
.specs-t{ margin-top:18px; font-family:var(--mono); font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.specs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.specs li{ font-family:var(--mono); font-size:.74rem; color:var(--ink); background:var(--tint); border:1px solid var(--tint-2); border-radius:100px; padding:.4em .85em; white-space:nowrap; }
.specs b{ color:var(--brand-text); margin-right:.35em; }
/* las pantallas de ejemplo se insertan al terminar de cargar: se reserva su altura para que nada salte */
.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-2); border:1px solid var(--line); border-radius:var(--r); padding:clamp(12px,1.8vw,18px); box-shadow:var(--sh-md); font-size:.8125rem; 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:1px solid var(--line); font-family:var(--display); font-weight:700; font-size:.9375rem; color:var(--ink); letter-spacing:-.01em; }
.mk-h small{ font-family:var(--text); font-weight:500; font-size:.75rem; color:var(--muted); letter-spacing:0; }
.mk-h i{ display:grid; place-items:center; width:28px; height:28px; border-radius:9px; background:var(--tint); color:var(--brand-text); flex:none; }
.mk-h .ico{ width:16px; height:16px; stroke-width:2; }
.mk-box{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:10px 12px; display:grid; gap:7px; align-content:start; }
.mk-cap,.mk-th{ font-family:var(--mono); font-size:.62rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
.mk-cap{ text-align:center; margin-bottom:1px; }
.mk-row{ display:flex; align-items:center; gap:6px; }
.mk-eye{ flex:none; width:24px; font-family:var(--display); font-weight:800; font-size:.75rem; color:var(--brand-text); }
.mk-in{ flex:1 1 0; min-width:0; text-align:center; font-family:var(--mono); font-weight:600; font-size:.8125rem; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:6px 4px; white-space:nowrap; }
.mk-in s{ text-decoration:none; color:var(--muted); font-weight:500; } .mk-in em{ font-style:normal; color:var(--brand-text); }
.mk-in.ph{ color:var(--muted); font-weight:500; text-align:left; padding-inline:10px; font-family:var(--text); }
.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:.58rem; }
.mk-add{ display:flex; align-items:center; gap:12px; margin-top:12px; padding:10px 12px; background:var(--surface); border:1px solid var(--line); border-radius:12px; }
.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-size:.75rem; font-weight:600; color:var(--body); background:var(--surface); border:1px solid var(--line); border-radius:9px; }
.mk-ck::before{ content:""; flex:none; width:14px; height:14px; border-radius:4px; border:1.5px solid var(--muted); background-position:center; background-repeat:no-repeat; background-size:10px; }
.mk-ck.on{ color:var(--ink); border-color:var(--brand); background:var(--tint); }
.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='%23fff' 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); color:var(--brand-text); }
.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:linear-gradient(150deg,#1FB5A7,var(--brand-x)); color:#fff; }
.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(--surface); border:1px solid var(--line); border-radius:9px; font-size:.75rem; font-weight:600; color:var(--ink); }
.mk-li span{ flex:1; } .mk-li .ico{ width:15px; height:15px; color:var(--muted); }
.mk-li em{ font-style:normal; font-family:var(--mono); font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; color:var(--brand-text); background:var(--tint); border:1px solid var(--tint-2); padding:.2em .6em; border-radius:100px; }
.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:.78rem; padding:6px 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,26px); }
.rx-fi{ display:flex; align-items:center; gap:16px; padding:18px 22px; background:var(--tint); border:1px solid var(--tint-2); border-radius:var(--r-lg); }
.rx-fi p{ font-size:.9688rem; line-height:1.5; } .rx-fi b{ color:var(--ink); }
.rx-fi .ico-badge{ width:46px; height:46px; border-radius:14px; }
@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(--r-lg); }
  .specs li{ font-size:.7rem; }
  .rx-fi{ padding:14px 16px; gap:12px; } .rx-fi .ico-badge{ width:40px; height:40px; border-radius:12px; } .rx-fi p{ font-size:.9rem; }
}

/* ---------- hecho para Perú ---------- */
.peru{ background:linear-gradient(160deg,#083734,#052624); color:#BFD9D5; padding-block:clamp(34px,5vw,56px); }
.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:.55em; font-family:var(--mono); font-size:.72rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:#9BEBDD; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); padding:.5em 1em; border-radius:100px; }
.peru-tag .ico{ width:15px; height:15px; stroke-width:2.2; }
.peru h2{ color:#fff; font-size:clamp(1.5rem,2.8vw,2.1rem); margin-top:14px; }
.peru-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.peru-list li{ display:flex; align-items:center; gap:12px; padding:13px 16px; font-size:.9375rem; font-weight:600; line-height:1.3; color:#fff; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--r); }
.peru-list .ico{ width:22px; height:22px; color:#5ED3C0; }
@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:.875rem; } }

/* =====================================================================
   RENDIMIENTO
   ===================================================================== */
/* los adornos animados del hero se pausan cuando el hero sale de pantalla */
.hero-off .float,.hero-off .float-img,.hero-off .f-phone,.hero-off .kicker .dot.pulse::after{ animation-play-state:paused; }
.float,.float-img,.f-phone{ will-change:transform; }
/* 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 1933px; }
body[data-page="opticas"] main > section:nth-of-type(3){ contain-intrinsic-size:auto 256px; }
body[data-page="opticas"] main > section:nth-of-type(4){ contain-intrinsic-size:auto 1261px; }
body[data-page="opticas"] main > section:nth-of-type(5){ contain-intrinsic-size:auto 896px; }
body[data-page="opticas"] main > section:nth-of-type(6){ contain-intrinsic-size:auto 1098px; }
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 1393px; }
body[data-page="opticas"] main > section:nth-of-type(9){ contain-intrinsic-size:auto 1058px; }
body[data-page="opticas"] main > section:nth-of-type(10){ contain-intrinsic-size:auto 826px; }
body[data-page="home"] main > section:nth-of-type(2){ contain-intrinsic-size:auto 1169px; }
body[data-page="home"] main > section:nth-of-type(3){ contain-intrinsic-size:auto 716px; }
body[data-page="home"] main > section:nth-of-type(4){ contain-intrinsic-size:auto 624px; }
body[data-page="home"] main > section:nth-of-type(5){ contain-intrinsic-size:auto 477px; }
body[data-page="home"] main > section:nth-of-type(6){ contain-intrinsic-size:auto 814px; }
@media (max-width:1000px){
body[data-page="opticas"] main > section:nth-of-type(2){ contain-intrinsic-size:auto 2332px; }
body[data-page="opticas"] main > section:nth-of-type(3){ contain-intrinsic-size:auto 315px; }
body[data-page="opticas"] main > section:nth-of-type(4){ contain-intrinsic-size:auto 1234px; }
body[data-page="opticas"] main > section:nth-of-type(5){ contain-intrinsic-size:auto 1429px; }
body[data-page="opticas"] main > section:nth-of-type(6){ contain-intrinsic-size:auto 1460px; }
body[data-page="opticas"] main > section:nth-of-type(7){ contain-intrinsic-size:auto 734px; }
body[data-page="opticas"] main > section:nth-of-type(8){ contain-intrinsic-size:auto 1838px; }
body[data-page="opticas"] main > section:nth-of-type(9){ contain-intrinsic-size:auto 951px; }
body[data-page="opticas"] main > section:nth-of-type(10){ contain-intrinsic-size:auto 1248px; }
body[data-page="home"] main > section:nth-of-type(2){ contain-intrinsic-size:auto 2179px; }
body[data-page="home"] main > section:nth-of-type(3){ contain-intrinsic-size:auto 748px; }
body[data-page="home"] main > section:nth-of-type(4){ contain-intrinsic-size:auto 600px; }
body[data-page="home"] main > section:nth-of-type(5){ contain-intrinsic-size:auto 387px; }
body[data-page="home"] main > section:nth-of-type(6){ contain-intrinsic-size:auto 1193px; }
}
@media (max-width:600px){
body[data-page="opticas"] main > section:nth-of-type(2){ contain-intrinsic-size:auto 2829px; }
body[data-page="opticas"] main > section:nth-of-type(3){ contain-intrinsic-size:auto 438px; }
body[data-page="opticas"] main > section:nth-of-type(4){ contain-intrinsic-size:auto 1186px; }
body[data-page="opticas"] main > section:nth-of-type(5){ contain-intrinsic-size:auto 1312px; }
body[data-page="opticas"] main > section:nth-of-type(6){ contain-intrinsic-size:auto 1557px; }
body[data-page="opticas"] main > section:nth-of-type(7){ contain-intrinsic-size:auto 911px; }
body[data-page="opticas"] main > section:nth-of-type(8){ contain-intrinsic-size:auto 2039px; }
body[data-page="opticas"] main > section:nth-of-type(9){ contain-intrinsic-size:auto 1027px; }
body[data-page="opticas"] main > section:nth-of-type(10){ contain-intrinsic-size:auto 1418px; }
body[data-page="home"] main > section:nth-of-type(2){ contain-intrinsic-size:auto 2405px; }
body[data-page="home"] main > section:nth-of-type(3){ contain-intrinsic-size:auto 1234px; }
body[data-page="home"] main > section:nth-of-type(4){ contain-intrinsic-size:auto 973px; }
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 1528px; }
}
/* 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; }
@media (prefers-reduced-motion:reduce){ .kicker .dot.pulse::after{ animation:none; opacity:0; } }