/*
 * Aqua Systems — hoja de estilos del tema. Tokens shadcn-style: branding
 * #08418E/#3B5697/#0DBAD2, radius 14px, Montserrat self-host (400/700; 600/800
 * del prototipo se mapean a 700, sin negrita sintetica). NO framework.
 */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/montserrat-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/montserrat-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

  :root {
    --background:#FFFFFF; --surface-2:#F4F9FD; --foreground:#0F2137; --muted-fg:#5C7089;
    --border:#E4EBF3; --primary:#08418E; --primary-fg:#FFFFFF; --accent:#0DBAD2; --accent-tint:#E8F8FB;
    --ring:#0DBAD2; --whatsapp:#21A65A; --radius:14px;
    --shadow-sm:0 1px 2px rgba(15,33,55,.06), 0 1px 3px rgba(15,33,55,.08);
    --shadow-md:0 10px 30px -12px rgba(8,65,142,.22);
    --shadow-lg:0 24px 55px -20px rgba(8,65,142,.28);
  }
  @media (prefers-color-scheme: dark) { :root {
    --background:#0B1524; --surface-2:#101F33; --foreground:#E7EEF8; --muted-fg:#94A6BE;
    --border:#22344E; --primary:#7FB2EE; --primary-fg:#0B1524; --accent:#22C9E0; --accent-tint:#0E2B3A;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 10px 30px -12px rgba(0,0,0,.5); --shadow-lg:0 24px 55px -20px rgba(0,0,0,.6);
  } }
  :root[data-theme="dark"] {
    --background:#0B1524; --surface-2:#101F33; --foreground:#E7EEF8; --muted-fg:#94A6BE;
    --border:#22344E; --primary:#7FB2EE; --primary-fg:#0B1524; --accent:#22C9E0; --accent-tint:#0E2B3A;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 10px 30px -12px rgba(0,0,0,.5); --shadow-lg:0 24px 55px -20px rgba(0,0,0,.6);
  }
  :root[data-theme="light"] {
    --background:#FFFFFF; --surface-2:#F4F9FD; --foreground:#0F2137; --muted-fg:#5C7089;
    --border:#E4EBF3; --primary:#08418E; --primary-fg:#FFFFFF; --accent:#0DBAD2; --accent-tint:#E8F8FB;
    --shadow-sm:0 1px 2px rgba(15,33,55,.06), 0 1px 3px rgba(15,33,55,.08);
    --shadow-md:0 10px 30px -12px rgba(8,65,142,.22); --shadow-lg:0 24px 55px -20px rgba(8,65,142,.28);
  }

  * { box-sizing:border-box; }
  body { margin:0; background:var(--background); color:var(--foreground);
    font-family:Montserrat,"Segoe UI",system-ui,sans-serif; font-size:16px; line-height:1.65;
    -webkit-font-smoothing:antialiased; }
  .wrap { max-width:1152px; margin:0 auto; padding:0 24px; }
  h1,h2,h3 { margin:0; font-weight:700; letter-spacing:-.02em; text-wrap:balance; }
  a { color:inherit; }
  .num { font-variant-numeric:tabular-nums; }
  img { max-width:100%; }

  .eyebrow { display:flex; align-items:center; gap:12px; text-transform:uppercase; letter-spacing:.16em;
    font-size:11.5px; font-weight:700; color:var(--accent); }
  .eyebrow::before { content:""; width:28px; height:2px; background:var(--accent); border-radius:2px; }

  .meta-banner { background:var(--surface-2); border-bottom:1px solid var(--border); padding:9px 0; font-size:13px; color:var(--muted-fg); }
  .meta-banner .wrap { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
  .meta-banner strong { color:var(--foreground); }
  .meta-banner a { color:var(--primary); font-weight:700; text-decoration:none; }
  .meta-banner a:hover { text-decoration:underline; }

  header.site { position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--background) 85%, transparent);
    backdrop-filter:blur(14px); border-bottom:1px solid var(--border); }
  .nav { display:flex; align-items:center; gap:18px; height:68px; }
  .logo { display:flex; align-items:center; text-decoration:none; }
  .logo img { height:44px; width:auto; display:block; }
  .logo .logo-oscuro { display:none; }
  @media (prefers-color-scheme: dark) {
    .logo .logo-claro { display:none; } .logo .logo-oscuro { display:block; }
  }
  :root[data-theme="dark"] .logo .logo-claro { display:none !important; }
  :root[data-theme="dark"] .logo .logo-oscuro { display:block !important; }
  :root[data-theme="light"] .logo .logo-claro { display:block !important; }
  :root[data-theme="light"] .logo .logo-oscuro { display:none !important; }
  .nav-links { display:flex; gap:2px; font-size:14px; font-weight:700; color:var(--muted-fg); flex:1; flex-wrap:wrap; }
  .nav-links li, #menu-movil li { list-style:none; margin:0; }
  .nav-links a { white-space:nowrap; text-decoration:none; padding:8px 11px; border-radius:8px; transition:background .15s, color .15s; }
  .nav-links a:hover, .nav-links a:focus-visible { color:var(--primary); background:var(--surface-2); }
  .nav-links a[aria-current="page"] { color:var(--primary); background:var(--accent-tint); }
  .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:10px; padding:0 22px;
    height:44px; font-size:14.5px; font-weight:700; text-decoration:none; border:1px solid transparent; cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease, filter .15s ease; font-family:inherit; white-space:nowrap; }
  .btn:focus-visible { outline:2px solid var(--ring); outline-offset:2px; }
  .btn:active { transform:translateY(1px); }
  .btn-primary { background:var(--primary); color:var(--primary-fg); box-shadow:var(--shadow-sm); }
  .btn-primary:hover { filter:brightness(1.12); box-shadow:var(--shadow-md); }
  .btn-accent { background:var(--accent); color:#053641; box-shadow:var(--shadow-sm); }
  .btn-accent:hover { filter:brightness(1.05); box-shadow:var(--shadow-md); }
  .btn-outline { border-color:var(--border); color:var(--foreground); background:var(--background); }
  .btn-outline:hover { border-color:var(--muted-fg); background:var(--surface-2); }
  .btn-whatsapp { background:var(--whatsapp); color:#fff; }
  .btn-whatsapp:hover { filter:brightness(1.08); }
  .menu-btn { display:none; margin-left:auto; border:1px solid var(--border); background:var(--background);
    border-radius:10px; width:44px; height:44px; cursor:pointer; color:var(--foreground); }
  .menu-btn:focus-visible { outline:2px solid var(--ring); }
  #menu-movil { display:none; border-top:1px solid var(--border); padding:10px 0 16px; }
  #menu-movil a { display:block; text-decoration:none; font-weight:700; font-size:15px; padding:11px 4px;
    color:var(--foreground); border-bottom:1px solid var(--border); }
  #menu-movil a:last-child { border-bottom:none; }

  .hero { position:relative; overflow:hidden;
    background:
      radial-gradient(820px 420px at 88% -6%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 62%),
      radial-gradient(640px 380px at -4% 106%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 55%),
      linear-gradient(172deg, var(--background) 0%, var(--surface-2) 60%, color-mix(in srgb, var(--accent-tint) 70%, var(--surface-2)) 100%); }
  .hero-grid { display:grid; grid-template-columns:1.02fr .98fr; gap:44px; padding:72px 0 116px; align-items:center; position:relative; z-index:1; }
  .hero h1 { font-size:clamp(34px, 5vw, 58px); line-height:1.06; margin:18px 0 10px; color:var(--foreground); }
  .grad { background:linear-gradient(92deg, var(--primary) 10%, var(--accent) 90%);
    -webkit-background-clip:text; background-clip:text; color:transparent; }
  .hero .precio-hero { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin:8px 0 14px; }
  .hero .precio-hero .p1 { font-size:26px; font-weight:700; color:var(--primary); }
  .hero .precio-hero .p2 { font-size:15px; font-weight:700; color:var(--muted-fg); }
  .hero p.lede { font-size:17.5px; color:var(--muted-fg); max-width:42ch; margin:0 0 28px; }
  .hero-ctas { display:flex; gap:13px; flex-wrap:wrap; }
  .hero-foto { position:relative; display:grid; place-items:center; min-height:440px; }
  .blob { position:absolute; width:min(460px, 96%); aspect-ratio:1; border-radius:42% 58% 55% 45% / 48% 42% 58% 52%;
    background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--primary) 14%, transparent));
    filter:blur(2px); }
  .hero-foto img { position:relative; max-height:420px; width:auto; filter:drop-shadow(0 30px 34px rgba(8,65,142,.28)); }
  .glass { position:absolute; background:color-mix(in srgb, var(--background) 68%, transparent);
    backdrop-filter:blur(10px); border:1px solid color-mix(in srgb, var(--border) 80%, transparent);
    border-radius:12px; padding:10px 16px; font-size:13px; font-weight:700; color:var(--primary); box-shadow:var(--shadow-md); }
  .glass small { display:block; font-size:11px; font-weight:700; color:var(--muted-fg); }
  .g1 { top:14%; right:2%; } .g2 { bottom:18%; left:0%; }

  .hero-int { position:relative; overflow:hidden; padding:52px 0 46px;
    background:
      radial-gradient(700px 320px at 92% -20%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 60%),
      linear-gradient(172deg, var(--background) 0%, var(--surface-2) 78%); border-bottom:1px solid var(--border); }
  .hero-int h1 { font-size:clamp(28px, 4vw, 42px); margin:14px 0 8px; }
  .hero-int p.lede { color:var(--muted-fg); font-size:16.5px; max-width:62ch; margin:0; }
  .migas { font-size:13px; color:var(--muted-fg); margin-bottom:16px; display:flex; gap:8px; flex-wrap:wrap; }
  .migas a { color:var(--muted-fg); text-decoration:none; }
  .migas a:hover { color:var(--primary); text-decoration:underline; }
  .migas .sep { opacity:.5; }
  .migas b { color:var(--foreground); font-weight:700; }

  .kpis { background:var(--background); border:1px solid var(--border); border-radius:var(--radius);
    display:grid; grid-template-columns:repeat(4,1fr); margin-top:-58px; position:relative; z-index:2; box-shadow:var(--shadow-lg); }
  .kpi { padding:26px 28px; }
  .kpi + .kpi { border-left:1px solid var(--border); }
  .kpi .v { font-size:29px; font-weight:700; letter-spacing:-.02em; color:var(--primary); }
  .kpi .l { font-size:13px; color:var(--muted-fg); margin-top:3px; line-height:1.45; }

  section.bloque { padding:72px 0 0; }
  section.bloque.final { padding-bottom:88px; }
  section.tinte { background:var(--surface-2); margin-top:72px; padding:64px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  .encabezado { max-width:64ch; margin-bottom:38px; }
  .encabezado.center { margin-left:auto; margin-right:auto; text-align:center; }
  .encabezado.center .eyebrow { justify-content:center; }
  .encabezado.center .eyebrow::after { content:""; width:28px; height:2px; background:var(--accent); border-radius:2px; }
  .encabezado h2 { font-size:clamp(26px, 3.4vw, 38px); margin-top:12px; color:var(--foreground); }
  .encabezado h2 .acc { color:var(--accent); }
  .encabezado p { color:var(--muted-fg); margin:14px 0 0; font-size:16.5px; }

  .beneficios { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
  .beneficio { padding:30px 22px; border:1px solid var(--border); border-radius:var(--radius); background:var(--background);
    box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .18s ease; }
  .beneficio:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
  .beneficio .ic { width:54px; height:54px; margin-bottom:16px; border-radius:14px;
    background:linear-gradient(150deg, var(--accent-tint), color-mix(in srgb, var(--accent-tint) 40%, var(--background)));
    border:1px solid var(--border); display:grid; place-items:center; color:var(--accent); }
  .beneficio b { font-size:15.5px; color:var(--foreground); display:block; }

  .panel-doble { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  .panel { background:var(--background); border:1px solid var(--border); border-radius:16px; padding:30px; box-shadow:var(--shadow-md); }
  .panel h3 { font-size:18.5px; margin-bottom:4px; color:var(--foreground); }
  .panel > p { font-size:14px; color:var(--muted-fg); margin:0 0 16px; }
  .panel label { display:block; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--muted-fg); margin:16px 0 7px; }
  select { width:100%; padding:12px 40px 12px 14px; border-radius:10px; border:1px solid var(--border);
    background-color:var(--surface-2); color:var(--foreground); font-size:15px; font-family:inherit; appearance:none;
    background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%235C7089" stroke-width="2.5"><path d="m6 9 6 6 6-6"/></svg>');
    background-repeat:no-repeat; background-position:right 14px center; cursor:pointer; }
  select:focus-visible { outline:2px solid var(--ring); outline-offset:1px; }
  .gauge { display:flex; align-items:baseline; gap:12px; margin:20px 0 4px; }
  .gauge .valor { font-size:62px; font-weight:700; line-height:1; letter-spacing:-.03em;
    background:linear-gradient(92deg, var(--primary), var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .gauge .unidad { font-size:13.5px; color:var(--muted-fg); }
  .barra { height:9px; border-radius:999px; background:var(--border); overflow:hidden; margin:14px 0 8px; }
  .barra i { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, var(--accent), var(--primary)); transition:width .45s cubic-bezier(.2,.8,.2,1); }
  .tds-nota { font-size:13.5px; color:var(--muted-fg); }
  .tds-nota strong { color:var(--foreground); }
  .escala { font-size:12px; color:var(--muted-fg); margin-top:12px; border-top:1px dashed var(--border); padding-top:12px; }
  .reco-resultado { margin-top:16px; display:grid; gap:10px; }
  .reco-item { display:flex; align-items:center; gap:14px; border:1px solid var(--border); border-radius:12px;
    padding:11px 14px; background:var(--surface-2); text-decoration:none; transition:transform .15s ease, box-shadow .15s ease; }
  .reco-item:hover { transform:translateY(-2px); box-shadow:var(--shadow-sm); }
  .reco-item img { width:54px; height:54px; object-fit:contain; flex-shrink:0; }
  .reco-item .mini-ph { width:54px; height:54px; flex-shrink:0; display:grid; place-items:center; color:var(--accent);
    background:var(--accent-tint); border-radius:10px; }
  .reco-item .n { font-weight:700; font-size:15px; color:var(--foreground); }
  .reco-item .d { font-size:12.5px; color:var(--muted-fg); }
  .reco-item .p { font-weight:700; color:var(--primary); white-space:nowrap; font-size:13.5px; margin-left:auto; }

  .pasos-h { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; position:relative; }
  .paso-h { text-align:center; padding:0 12px; position:relative; }
  .paso-h .dot { width:56px; height:56px; margin:0 auto 16px; border-radius:999px; background:var(--background);
    border:2px solid var(--accent); color:var(--primary); font-weight:700; font-size:19px; display:grid; place-items:center;
    box-shadow:var(--shadow-sm); position:relative; z-index:1; }
  .paso-h b { display:block; font-size:15.5px; color:var(--foreground); margin-bottom:6px; }
  .paso-h p { font-size:13.5px; color:var(--muted-fg); margin:0; }
  .pasos-h::before { content:""; position:absolute; top:28px; left:16%; right:16%; border-top:2px dashed var(--border); }

  .tabs { display:inline-flex; gap:4px; margin-bottom:26px; background:var(--surface-2); border:1px solid var(--border);
    border-radius:12px; padding:4px; flex-wrap:wrap; }
  .tab { border:none; background:transparent; color:var(--muted-fg); border-radius:9px; padding:9px 22px; font-size:14px;
    font-weight:700; cursor:pointer; font-family:inherit; min-height:42px; transition:background .15s, color .15s, box-shadow .15s; }
  .tab:focus-visible { outline:2px solid var(--ring); }
  .tab[aria-selected="true"] { background:var(--background); color:var(--primary); box-shadow:var(--shadow-sm); }
  .grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
  .grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
  .producto { background:var(--background); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
    display:flex; flex-direction:column; box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .18s ease; }
  .producto:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
  .producto .foto { aspect-ratio:1/1; display:grid; place-items:center; padding:20px; position:relative;
    background:radial-gradient(circle at 50% 68%, var(--accent-tint), transparent 74%), var(--surface-2); text-decoration:none; }
  .producto .foto img { max-height:195px; width:auto; object-fit:contain; transition:transform .25s ease; }
  .producto:hover .foto img { transform:scale(1.045); }
  .foto-ph { display:grid; place-items:center; gap:8px; color:var(--muted-fg); font-size:12px; font-weight:700; text-align:center; }
  .foto-ph svg { color:var(--accent); opacity:.75; }
  .producto .badge { position:absolute; top:12px; left:12px; background:var(--background); border:1px solid var(--border);
    color:var(--primary); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    border-radius:999px; padding:4px 11px; box-shadow:var(--shadow-sm); z-index:1; }
  .producto .cuerpo { padding:18px 20px 20px; display:flex; flex-direction:column; gap:6px; flex:1; }
  .producto h3 { font-size:16.5px; color:var(--foreground); }
  .producto h3 a { text-decoration:none; }
  .producto h3 a:hover { color:var(--primary); text-decoration:underline; }
  .producto .precio { font-weight:700; font-size:17px; color:var(--primary); }
  .producto .precio span { font-weight:700; font-size:12.5px; color:var(--muted-fg); }
  .producto p { font-size:13.5px; color:var(--muted-fg); margin:0 0 14px; flex:1; }

  .bento { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .bento-card { border-radius:16px; padding:30px; position:relative; overflow:hidden; border:1px solid var(--border);
    background:var(--background); box-shadow:var(--shadow-sm); }
  .bento-card.azul { background:linear-gradient(150deg, #08418E, #032a5e); color:#fff; border:none; }
  .bento-card.cian { background:linear-gradient(150deg, #0DBAD2, #0a8a9c); color:#04333c; border:none; }
  .bento-card .idx { font-size:13px; font-weight:700; letter-spacing:.12em; opacity:.65; }
  .bento-card h3 { font-size:19px; margin:10px 0 8px; color:inherit; }
  .bento-card p { font-size:14px; margin:0; opacity:.88; }
  .bento-card.azul p { color:rgba(255,255,255,.85); }

  .card { background:var(--background); border:1px solid var(--border); border-radius:var(--radius); padding:28px;
    display:flex; flex-direction:column; gap:10px; box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .18s ease; }
  .card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
  .card .icono { width:48px; height:48px; border-radius:12px; background:var(--accent-tint); border:1px solid var(--border);
    display:grid; place-items:center; color:var(--accent); }
  .card h3 { font-size:17.5px; color:var(--foreground); }
  .card p { color:var(--muted-fg); font-size:14.5px; margin:0; flex:1; }

  .lab-banner { display:flex; gap:20px; align-items:center; border-radius:16px; padding:26px 30px; margin-top:18px;
    background:linear-gradient(120deg, var(--accent-tint), var(--surface-2)); border:1px solid var(--border); }
  .lab-banner .icono { flex-shrink:0; width:52px; height:52px; border-radius:14px; background:var(--background);
    border:1px solid var(--border); display:grid; place-items:center; color:var(--accent); box-shadow:var(--shadow-sm); }
  .lab-banner h3 { font-size:17px; color:var(--foreground); }
  .lab-banner p { color:var(--muted-fg); font-size:14.5px; margin:4px 0 0; }

  .nosotros { display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center; }
  .nosotros p { color:var(--muted-fg); margin:14px 0 0; }
  .republica { display:inline-flex; align-items:center; gap:10px; font-weight:700; color:var(--primary);
    font-size:17px; margin-top:20px; padding:12px 20px; background:var(--accent-tint); border:1px solid var(--border); border-radius:12px; }
  .nosotros-foto { position:relative; display:grid; place-items:center; }
  .nosotros-foto .blob { width:min(360px,92%); }
  .nosotros-foto img { position:relative; max-height:330px; filter:drop-shadow(0 22px 26px rgba(8,65,142,.22)); }

  .postventa { border-radius:20px; padding:48px; position:relative; overflow:hidden;
    background:linear-gradient(140deg, #08418E, #021a3d);
    display:grid; grid-template-columns:1.15fr .85fr; gap:36px; align-items:center; box-shadow:var(--shadow-lg); }
  .postventa::after { content:""; position:absolute; right:-80px; top:-80px; width:280px; height:280px; border-radius:999px;
    background:radial-gradient(circle, color-mix(in srgb, var(--accent) 35%, transparent), transparent 70%); }
  .postventa .eyebrow { color:#7DE9F6; } .postventa .eyebrow::before { background:#7DE9F6; }
  .postventa h2 { color:#fff; font-size:clamp(24px, 3vw, 32px); }
  .postventa p { color:rgba(255,255,255,.78); margin:12px 0 22px; max-width:50ch; }
  .postventa .btn-accent { position:relative; z-index:1; }
  .pasos { display:grid; gap:11px; position:relative; z-index:1; }
  .paso { display:flex; gap:13px; align-items:flex-start; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16);
    backdrop-filter:blur(8px); border-radius:12px; padding:14px 16px; font-size:14px; color:rgba(255,255,255,.8); }
  .paso b { display:block; font-size:14.5px; color:#fff; }
  .paso .num-c { flex-shrink:0; width:28px; height:28px; border-radius:999px; background:var(--accent); color:#053641;
    font-weight:700; display:grid; place-items:center; font-size:14px; }

  .estados-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px 22px; font-size:14px; }
  .estados-grid a { color:var(--muted-fg); text-decoration:none; padding:7px 2px; display:flex; justify-content:space-between;
    border-bottom:1px solid var(--border); transition:color .12s, padding-left .12s; }
  .estados-grid a:hover { color:var(--primary); padding-left:6px; }
  .estados-grid .t { font-variant-numeric:tabular-nums; font-weight:700; font-size:13px; }

  details { border:1px solid var(--border); border-radius:12px; background:var(--background); padding:0 22px;
    margin-bottom:10px; box-shadow:var(--shadow-sm); }
  details summary { cursor:pointer; font-weight:700; font-size:15px; padding:17px 0; list-style:none; color:var(--foreground);
    display:flex; justify-content:space-between; align-items:center; gap:12px; }
  details summary::-webkit-details-marker { display:none; }
  details summary::after { content:""; width:10px; height:10px; border-right:2px solid var(--muted-fg); border-bottom:2px solid var(--muted-fg);
    transform:rotate(45deg); transition:transform .2s ease; flex-shrink:0; }
  details[open] summary::after { transform:rotate(225deg); }
  details p { color:var(--muted-fg); font-size:14.5px; margin:0 0 18px; }

  .cotiza { background:var(--background); border-radius:16px; padding:28px; box-shadow:var(--shadow-md); border:1px solid var(--border); }
  .cotiza .campos { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
  .cotiza input, .cotiza textarea { width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--border);
    background:var(--surface-2); color:var(--foreground); font-size:14px; font-family:inherit; transition:border-color .15s; }
  .cotiza input:focus-visible, .cotiza textarea:focus-visible { outline:2px solid var(--ring); outline-offset:1px; border-color:var(--accent); }
  .cotiza .campos .full { grid-column:1/-1; }
  .cotiza .btn { width:100%; margin-top:14px; }

  .tabla-scroll { overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); background:var(--background); }
  table.datos { border-collapse:collapse; width:100%; font-size:14px; min-width:420px; }
  table.datos th { background:var(--primary); color:var(--primary-fg); text-align:left; padding:12px 16px; font-size:12.5px;
    text-transform:uppercase; letter-spacing:.06em; }
  table.datos td { padding:11px 16px; border-top:1px solid var(--border); color:var(--muted-fg); }
  table.datos td:last-child { font-variant-numeric:tabular-nums; white-space:nowrap; font-weight:700; color:var(--foreground); }
  table.datos tr.mal td:first-child::before { content:"✕"; color:#C43D3D; font-weight:700; margin-right:9px; }
  table.datos tr.medio td:first-child::before { content:"—"; color:#C08A2D; font-weight:700; margin-right:9px; }
  table.datos tr.bien td:first-child::before { content:"✓"; color:#1F8A4C; font-weight:700; margin-right:9px; }
  table.matriz { border-collapse:collapse; width:100%; font-size:13px; min-width:720px; }
  table.matriz th { padding:10px 10px; border-bottom:2px solid var(--border); color:var(--muted-fg); font-size:11.5px;
    text-transform:uppercase; letter-spacing:.05em; text-align:center; }
  table.matriz th:first-child, table.matriz td:first-child { text-align:left; font-weight:700; color:var(--foreground); white-space:nowrap; }
  table.matriz td { padding:10px; border-top:1px solid var(--border); text-align:center; color:var(--accent); font-weight:700; }
  table.matriz td.si::after { content:"✓"; }
  table.matriz .nivel { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted-fg); white-space:nowrap; }
  .cita { border-left:3px solid var(--accent); background:var(--surface-2); border-radius:0 12px 12px 0;
    padding:18px 22px; font-size:14px; color:var(--muted-fg); margin-top:22px; }
  .cita strong { color:var(--foreground); }

  .ficha { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
  .ficha-foto { border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);
    background:radial-gradient(circle at 50% 68%, var(--accent-tint), transparent 74%), var(--surface-2);
    display:grid; place-items:center; padding:36px; min-height:420px; position:relative; }
  .ficha-foto img { max-height:380px; width:auto; object-fit:contain; filter:drop-shadow(0 24px 28px rgba(8,65,142,.22)); }
  .ficha-info h1, .ficha-info h2 { font-size:clamp(26px, 3.4vw, 38px); margin:10px 0 6px; }
  .ficha-info .precio { font-size:26px; font-weight:700; color:var(--primary); margin:10px 0 2px; }
  .ficha-info .precio span { font-size:14px; font-weight:700; color:var(--muted-fg); }
  .ficha-info .desc { color:var(--muted-fg); font-size:15.5px; margin:16px 0 0; max-width:52ch; }
  .chips { display:flex; gap:8px; flex-wrap:wrap; margin:18px 0 0; }
  .chip { font-size:12.5px; font-weight:700; color:var(--primary); background:var(--accent-tint);
    border:1px solid var(--border); border-radius:999px; padding:6px 13px; }
  .compra { display:flex; gap:11px; margin-top:24px; flex-wrap:wrap; }
  .compra .qty { width:74px; text-align:center; padding:0 8px; height:44px; border-radius:10px; border:1px solid var(--border);
    background:var(--surface-2); color:var(--foreground); font-size:15px; font-family:inherit; font-weight:700; }
  .nota-renta { margin-top:18px; font-size:13.5px; color:var(--muted-fg); background:var(--surface-2);
    border:1px dashed var(--border); border-radius:12px; padding:13px 16px; }

  .estado-nav { display:flex; justify-content:space-between; gap:12px; margin-top:34px; font-size:14px; font-weight:700; }
  .estado-nav a { color:var(--primary); text-decoration:none; }
  .estado-nav a:hover { text-decoration:underline; }

  footer.site { margin-top:96px; background:#062A5C; color:rgba(255,255,255,.75); font-size:14px; }
  footer .cols { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; padding:52px 0 40px; }
  footer h4 { color:#fff; font-size:14px; text-transform:uppercase; letter-spacing:.1em; margin:0 0 14px; }
  footer a { display:block; text-decoration:none; padding:4px 0; color:rgba(255,255,255,.72); }
  footer a:hover { color:#fff; }
  footer .base { border-top:1px solid rgba(255,255,255,.14); padding:18px 0 26px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:13px; }
  footer .logo { color:#fff; margin-bottom:10px; }

  .wa-float { position:fixed; right:20px; bottom:20px; z-index:60; width:56px; height:56px; border-radius:999px;
    background:var(--whatsapp); color:#fff; display:grid; place-items:center; box-shadow:var(--shadow-lg); border:none; cursor:pointer; }
  .wa-float:hover { filter:brightness(1.08); }
  .wa-float:focus-visible { outline:2px solid var(--ring); outline-offset:2px; }
  #toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px); z-index:70;
    background:var(--foreground); color:var(--background); font-size:14px; font-weight:700; border-radius:12px;
    padding:13px 20px; opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
    max-width:min(480px, calc(100vw - 40px)); text-align:center; box-shadow:var(--shadow-lg); }
  #toast.ver { opacity:1; transform:translateX(-50%) translateY(0); }

  @media (max-width: 940px) {
    .hero-grid, .panel-doble, .postventa, .nosotros, .bento, .ficha { grid-template-columns:1fr; }
    .hero-grid { padding-bottom:96px; }
    .kpis { grid-template-columns:repeat(2,1fr); }
    .kpi:nth-child(3) { border-left:none; }
    .kpi:nth-child(1), .kpi:nth-child(2) { border-bottom:1px solid var(--border); }
    .beneficios, .grid-4 { grid-template-columns:repeat(2,1fr); }
    .grid-3 { grid-template-columns:1fr; }
    .estados-grid { grid-template-columns:repeat(2,1fr); }
    .nav-links, .nav > .btn { display:none; }
    .menu-btn { display:grid; place-items:center; }
    .pasos-h { grid-template-columns:1fr; gap:26px; } .pasos-h::before { display:none; }
    .hero-foto { min-height:340px; } .hero-foto img { max-height:300px; }
    .ficha-foto { min-height:320px; } .ficha-foto img { max-height:280px; }
    footer .cols { grid-template-columns:1fr; gap:24px; }
  }
  @media (max-width: 560px) { .grid-4, .beneficios, .cotiza .campos { grid-template-columns:1fr; } .estados-grid { grid-template-columns:1fr; } }
  @media (prefers-reduced-motion: reduce) {
    .barra i, .producto, .producto .foto img, .beneficio, .card, .reco-item, .btn, #toast { transition:none; }
  }

  /* antispam honeypot: off-screen, no display:none (algunos bots lo ignoran) */
  .hp-field { position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden; }

  .form-msg { margin:0 0 14px; padding:12px 14px; border-radius:10px; font-size:14px; border:1px solid var(--border); }
  .form-msg.exito { background:var(--accent-tint); color:var(--foreground); border-color:var(--accent); }
  .form-msg.error { background:#FBEAEA; color:#7A1F1F; border-color:#E3B4B4; }