/* Industry — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */
/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/barlow-400-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/barlow-400-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/barlow-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;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/barlow-500-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/barlow-500-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/barlow-500-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;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/barlow-700-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/barlow-700-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/barlow-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;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/barlow-condensed-400-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/barlow-condensed-400-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/barlow-condensed-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;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/barlow-condensed-600-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/barlow-condensed-600-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/barlow-condensed-600-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 {
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  --color-accent-2: #728fab;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f5f5f8;
  --color-neutral-200: #e7e7ea;
  --color-neutral-300: #d4d4d7;
  --color-neutral-400: #b7b7ba;
  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;
  --color-neutral-800: #424244;
  --color-neutral-900: #2b2b2d;

  --color-accent-100: #eef6ff;
  --color-accent-200: #d6ebff;
  --color-accent-300: #b5d9fd;
  --color-accent-400: #94bce3;
  --color-accent-500: #749dc4;
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-accent-800: #2c455d;
  --color-accent-900: #1d2d3d;

  --color-accent-2-100: #eef6ff;
  --color-accent-2-200: #d6ebff;
  --color-accent-2-300: #bdd8f2;
  --color-accent-2-400: #9ebbd8;
  --color-accent-2-500: #7e9cb8;
  --color-accent-2-600: #627d98;
  --color-accent-2-700: #486077;
  --color-accent-2-800: #314457;
  --color-accent-2-900: #1f2d3a;

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Barlow", system-ui, sans-serif;

  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-6: 20.4px;
  --space-8: 27.2px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.blueprint {
  position: relative;
  border: 1px solid var(--color-divider);
  border-radius: 0;
}
/* The overlay image treatments (halftone, duotone) clip their overlay
   (overflow:hidden); a blueprint wrapper draws its registration marks
   outside the box, so when both classes share a wrapper the frame must
   win. */
.blueprint.halftone, .blueprint.plate, .blueprint.duotone { overflow: visible; }
.blueprint > .corner {
  position: absolute; width: 11px; height: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.blueprint > .corner::before, .blueprint > .corner::after {
  content: ""; position: absolute; background: currentColor;
}
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }

.duotone{position:relative;overflow:hidden}
.duotone::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--color-accent);mix-blend-mode:color}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: none;
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* — blueprint frame: components are wireframe objects (see .blueprint
     and .corner above) — square, transparent, hairline-bordered — */
.card, .btn, .input, .tag, .seg, .dialog { border-radius: 0; }
.card, .dialog { background: transparent; border: 1px solid var(--color-divider); }
.btn { border: 1px solid var(--color-divider); }
.btn-primary { border-color: var(--color-accent); }
[hidden] { display: none !important; } /* .seg-opt y otras clases con display propio ignoraban el atributo hidden */
.btn-ghost { border-color: transparent; }
html { scroll-behavior: smooth; }
/* Los enlaces del menú dejan la sección justo bajo la cabecera. --wf-head lo mide
   el script (alto de la cabecera ya sólida); 80px es solo el respaldo. */
section[id] { scroll-margin-top: var(--wf-head, 80px); }
.wf-medir, .wf-medir *, .wf-medir::before { transition: none !important; }
body { margin: 0; text-wrap: pretty; font-size: 16px; background: #16222e; }
a { color: var(--color-accent-300); }
a:hover { color: var(--color-accent-200); }
::selection { background: color-mix(in srgb, var(--color-accent-300) 40%, transparent); }
.wf-navlink { color: color-mix(in srgb, #f2f2f3 80%, transparent); text-decoration: none; font-size: 13.5px; letter-spacing: 0.04em; text-transform: uppercase; padding: 6px 2px; transition: color .2s ease; }
.wf-navlink:hover { color: var(--color-accent-300); }
@media (max-width: 720px) { .wf-navlink { display: none; } }
/* --- Cabecera flotante (estilo DGO): transparente sobre la portada, sólida al bajar.
       El script agrega .is-solid al pasar 24px de scroll (ver onScroll). --- */
.wf-header::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 70px); z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(8,14,20,.8) 0%, rgba(8,14,20,.42) 55%, transparent 100%); transition: opacity .35s ease; }
.wf-header.is-solid::before { opacity: 0; }
.wf-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; padding: clamp(12px,1.6vw,18px) clamp(20px,5vw,64px); background: transparent; border-bottom: 1px solid transparent; transition: background .35s ease, border-color .35s ease, padding .35s ease; }
.wf-header.is-solid .wf-nav { padding-top: 10px; padding-bottom: 10px; background: color-mix(in srgb, var(--color-accent-900) 86%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: color-mix(in srgb, var(--color-accent-300) 16%, transparent); }
.wf-brand { display: flex; align-items: center; gap: 16px; justify-self: start; min-width: 0; }
.wf-logo { display: block; width: auto; max-width: none; object-fit: contain; height: clamp(64px,6.7vw,93px); filter: drop-shadow(0 2px 10px rgba(0,0,0,.35)); transition: height .35s cubic-bezier(.22,.61,.36,1); }
.wf-header.is-solid .wf-logo { height: clamp(53px,4.5vw,64px); } /* el logo original es mas cuadrado: alturas mayores para el mismo tamaño de letras */
.wf-navlinks { display: flex; align-items: center; gap: clamp(18px,2.4vw,34px); justify-self: center; }
/* Contratar va dentro del menú central, como parte de la barra flotante */
/* Sin fondo: solo borde y texto claro (estilo "Tengo cuenta" de DGO) */
.wf-navbtn { border-radius: 0; min-height: 38px; padding: 0 18px; margin-left: clamp(4px,.8vw,12px); background: transparent; border: 1px solid color-mix(in srgb, #f2f2f3 55%, transparent); color: #f2f2f3; text-transform: uppercase; letter-spacing: .06em; font-size: 12.5px; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.wf-navbtn:hover, .wf-navbtn:focus-visible { background: color-mix(in srgb, #f2f2f3 10%, transparent); border-color: var(--color-accent-300); color: var(--color-accent-300); }
/* En celular los enlaces de texto se ocultan (.wf-navlink) pero Contratar queda a la derecha */
/* --- Menú: en escritorio el contenedor .wf-menu no existe (display:contents) y sus
       hijos ocupan las columnas de la barra; en celular es un panel lateral --- */
.wf-menu { display: contents; }
.wf-menu:focus { outline: none; }
.wf-menu-extra, .wf-burger, .wf-menu-bg { display: none; }
.wf-lock { overflow: hidden; } /* bloquea el scroll de la página con el menú abierto */
@media (max-width: 720px) {
  .wf-nav { grid-template-columns: 1fr auto; }
  /* Botón hamburguesa: 3 líneas que se vuelven X */
  .wf-burger { display: inline-flex; position: relative; z-index: 3; flex-direction: column; justify-content: center; gap: 5px; width: 46px; height: 46px; padding: 0 11px; background: transparent; border: 1px solid color-mix(in srgb, #f2f2f3 40%, transparent); cursor: pointer; }
  .wf-burger span { display: block; height: 1.5px; background: #f2f2f3; transition: transform .3s ease, opacity .2s ease; }
  .wf-header.menu-open .wf-burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .wf-header.menu-open .wf-burger span:nth-child(2) { opacity: 0; }
  .wf-header.menu-open .wf-burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  /* Panel lateral */
  .wf-menu { display: flex; flex-direction: column; gap: 22px; position: fixed; z-index: 2; top: 0; right: 0; bottom: 0; width: min(84vw, 340px); padding: 96px 26px 30px; overflow-y: auto; background: #0e1a26; border-left: 1px solid color-mix(in srgb, var(--color-accent-300) 18%, transparent); box-shadow: -18px 0 40px rgba(0,0,0,.45); transform: translateX(100%); visibility: hidden; transition: transform .35s cubic-bezier(.22,.61,.36,1), visibility .35s; }
  .wf-header.menu-open .wf-menu { transform: none; visibility: visible; }
  /* Sin esto, el desenfoque de la barra "encierra" al panel fijo dentro de ella */
  .wf-header.menu-open .wf-nav { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .wf-menu-bg { display: block; position: fixed; inset: 0; z-index: 1; background: rgba(4,9,14,.62); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
  .wf-header.menu-open .wf-menu-bg { opacity: 1; pointer-events: auto; }
  /* Contenido del panel: selector arriba, enlaces, Contratar y contacto al pie */
  .wf-navseg { order: -1; }
  .wf-segs { width: 100%; }
  .wf-seg { flex: 1; padding: 12px 10px; }
  .wf-navlinks { flex-direction: column; align-items: stretch; gap: 0; }
  .wf-menu .wf-navlink { display: block; padding: 15px 2px; font-size: 16px; border-bottom: 1px solid color-mix(in srgb, #f2f2f3 10%, transparent); }
  .wf-navbtn { margin: 18px 0 0; min-height: 48px; justify-content: center; }
  .wf-menu-extra { display: flex; flex-direction: column; gap: 12px; margin-top: auto; padding-top: 20px; border-top: 1px solid color-mix(in srgb, #f2f2f3 10%, transparent); }
  .wf-menu-t { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--color-accent-300); }
  .wf-menu-extra a { color: #f2f2f3; text-decoration: none; font-size: 17px; font-variant-numeric: tabular-nums; }
  .wf-menu-extra a small { display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, #f2f2f3 55%, transparent); }
  .wf-menu-h { font-size: 13px; color: color-mix(in srgb, #f2f2f3 60%, transparent); }
  .wf-menu-extra a.wf-menu-legal { margin-top: 6px; font-size: 13px; color: color-mix(in srgb, #f2f2f3 70%, transparent); text-decoration: underline; text-underline-offset: 3px; }
}
/* --- Franja de cifras bajo las portadas (Hogar y Empresas): de lado a lado,
       4 columnas iguales y cada dato centrado en su espacio --- */
.wf-metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); width: 100%; }
/* !important porque cada celda trae su relleno en línea desde el diseño original */
.wf-metrics > div { padding: clamp(18px,2vw,26px) 12px !important; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.wf-metrics > div + div { border-left: 1px solid color-mix(in srgb, var(--color-bg) 14%, transparent); }
@media (max-width: 640px) {
  .wf-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .wf-metrics > div:nth-child(3) { border-left: 0; }
  .wf-metrics > div:nth-child(n+3) { border-top: 1px solid color-mix(in srgb, var(--color-bg) 14%, transparent); }
}
/* Selector Hogar | Empresas · divide la barra superior en dos */
.wf-navseg { justify-self: end; }
.wf-segs { display: flex; align-items: stretch; flex: none; border: 1px solid color-mix(in srgb, #f2f2f3 20%, transparent); background: color-mix(in srgb, #0a1622 35%, transparent); }
.wf-seg { position: relative; appearance: none; border: 0; background: none; cursor: pointer; padding: 10px 18px; font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, #f2f2f3 46%, transparent); border-bottom: 2px solid transparent; transition: color .2s ease, background .2s ease, border-color .2s ease; }
.wf-seg + .wf-seg { border-left: 1px solid color-mix(in srgb, #f2f2f3 12%, transparent); }
.wf-seg:hover { color: color-mix(in srgb, #f2f2f3 82%, transparent); background: color-mix(in srgb, #f2f2f3 5%, transparent); }
.wf-seg.is-on { color: var(--color-accent-300); border-bottom-color: var(--color-accent-300); background: color-mix(in srgb, var(--color-accent-300) 9%, transparent); }
@media (max-width: 420px) { .wf-seg { padding: 10px 12px; letter-spacing: .1em; } }
/* Tarjetas de servicios para empresas */
/* Acordeón de servicios para empresas · título visible, descripción al pulsar */
.wf-acc { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-divider); }
.wf-acc-i { border-bottom: 1px solid var(--color-divider); transition: background .25s ease; }
.wf-acc-i:hover { background: color-mix(in srgb, var(--color-accent-300) 7%, transparent); }
.wf-acc-i.is-open { background: color-mix(in srgb, var(--color-accent-300) 9%, transparent); }
.wf-acc-i > h3 { margin: 0; font: inherit; }
.wf-acc-b { width: 100%; display: grid; grid-template-columns: 2.6em 1fr 16px; align-items: center; column-gap: clamp(12px,1.6vw,22px); padding: clamp(17px,2.1vw,23px) clamp(8px,1.2vw,16px); background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: var(--color-text); transition: color .2s ease; }
.wf-acc-b:hover, .wf-acc-i.is-open .wf-acc-b { color: var(--color-accent-800); }
.wf-acc-n { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; color: var(--color-accent-700); font-variant-numeric: tabular-nums; }
.wf-acc-t { font-family: var(--font-heading); font-weight: 600; font-size: clamp(17px,1.9vw,22px); line-height: 1.16; text-transform: uppercase; letter-spacing: .02em; }
/* Signo + que gira a − al abrir */
.wf-acc-x { position: relative; width: 16px; height: 16px; }
.wf-acc-x::before, .wf-acc-x::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; transition: transform .35s cubic-bezier(.22,.61,.36,1), opacity .3s ease; }
.wf-acc-x::before { width: 15px; height: 1.5px; transform: translate(-50%,-50%); }
.wf-acc-x::after { width: 1.5px; height: 15px; transform: translate(-50%,-50%); }
.wf-acc-i.is-open .wf-acc-x::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
/* El panel crece de 0fr a 1fr: se anima solo, sin medir alturas con JS */
.wf-acc-p { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s cubic-bezier(.22,.61,.36,1); }
.wf-acc-i.is-open .wf-acc-p { grid-template-rows: 1fr; }
.wf-acc-p > div { overflow: hidden; }
.wf-acc-p p { margin: 0; font-size: 15px; line-height: 1.62; max-width: 64ch; color: var(--color-neutral-700); padding: 0 clamp(8px,1.2vw,16px) clamp(20px,2.4vw,26px) calc(2.6em + clamp(12px,1.6vw,22px) + clamp(8px,1.2vw,16px)); }
@media (max-width: 600px) { .wf-acc-p p { padding-left: clamp(8px,1.2vw,16px); } }
@media (prefers-reduced-motion: reduce) { .wf-acc-p { transition: none; } }
/* Acordeón compacto dentro del formulario de contratación (planes por categoría) */
.wf-acc--form { margin-top: 8px; }
/* Campo "Suma DGO" del formulario: lo llena el simulador y los botones de DGO */
.wf-dgoadd { margin-top: 18px; padding: 16px 16px 14px; border: 1px solid var(--color-divider); background: color-mix(in srgb, var(--color-accent) 4%, transparent); }
.wf-dgoadd > span { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--color-accent-700); margin-bottom: 10px; }
.wf-dgoadd-ops { display: grid; gap: 8px; }
.wf-dgoadd p { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--color-divider); font-size: 13.5px; font-weight: 600; }
.wf-dgoadd p b { font-family: var(--font-heading); font-size: 19px; }
.wf-acc--form .wf-acc-b { grid-template-columns: 1.8em 1fr 14px; padding: 13px 10px; }
.wf-acc--form .wf-acc-t { font-size: 16px; }
.wf-acc--form .wf-acc-n { font-size: 11px; letter-spacing: .06em; }
.wf-acc--form .wf-acc-x { width: 14px; height: 14px; }
.wf-acc--form .wf-acc-x::before { width: 13px; }
.wf-acc--form .wf-acc-x::after { height: 13px; }
.wf-acc-radios { display: flex; flex-direction: column; gap: 11px; padding: 4px 10px 16px calc(1.8em + 24px); }
@media (max-width: 480px) { .wf-acc-radios { padding-left: 14px; } }
/* Las opciones de una categoría cerrada no se pueden alcanzar con Tab */
.wf-acc--form .wf-acc-i:not(.is-open) .wf-acc-p > div { visibility: hidden; transition: visibility 0s .38s; }
.wf-acc--form .wf-acc-i.is-open .wf-acc-p > div { visibility: visible; }
/* La categoría del plan elegido lo avisa aunque esté cerrada */
.wf-acc--form .wf-acc-i:has(input:checked) .wf-acc-t::after { content: "  ·  elegido"; font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--color-accent-700); }
.wf-elist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wf-elist li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.5; color: color-mix(in srgb, var(--color-bg) 80%, transparent); }
.wf-elist li::before { content: ""; position: absolute; left: 0; top: .5em; width: 9px; height: 1px; background: var(--color-accent-300); box-shadow: 0 0 6px color-mix(in srgb, var(--color-accent-300) 80%, transparent); }
.wf-ixp { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--color-divider); border: 1px solid var(--color-divider); }
.wf-ixp li { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; background: var(--color-bg); }
.wf-ixp b { font-size: 14.5px; font-weight: 700; color: var(--color-text); }
.wf-mvc { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.wf-mvc-i { position: relative; padding: clamp(22px,2.6vw,30px); background: rgba(0,0,0,.2); }
.wf-mvc-i > span { display: block; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--color-accent-300); margin-bottom: 12px; }
.wf-mvc-i > p { font-size: 14.5px; line-height: 1.6; margin: 0; color: color-mix(in srgb, var(--color-bg) 80%, transparent); }
/* --- Planes · internet por antena --- */
.wf-antena { position: relative; display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr) auto; gap: clamp(20px,3vw,40px); align-items: center; margin-top: 0; padding: clamp(24px,3vw,34px); }
.wf-antena ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; line-height: 1.4; color: var(--color-neutral-800); }
.wf-antena li { display: flex; gap: 10px; }
.wf-antena li > span { color: var(--color-accent); }
@media (max-width: 860px) { .wf-antena { grid-template-columns: 1fr; } }
/* --- Adicionales de DGO (se suman a cualquier plan). Fila que se acomoda sola. --- */
.wf-extras { margin-top: 40px; }
.wf-extras-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px; }
.wf-extras-cab h4 { font-family: var(--font-heading); font-weight: 600; font-size: 20px; text-transform: uppercase; letter-spacing: .02em; margin: 0; }
.wf-extras-cab p { font-size: 12.5px; line-height: 1.5; margin: 0; color: var(--color-neutral-600); }
.wf-extras-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(168px,1fr)); gap: 14px; margin-top: 18px; }
.wf-extra { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 18px 16px; background: var(--color-bg); border: 1px solid var(--color-divider); transition: transform .3s cubic-bezier(.22,.61,.36,1), border-color .3s ease, box-shadow .3s ease; }
.wf-extra:hover { transform: translateY(-4px); border-color: var(--color-accent); box-shadow: var(--shadow-lg); }
.wf-extra img { height: 40px; width: auto; max-width: 100%; object-fit: contain; margin-bottom: 14px; }
.wf-extra b { font-family: var(--font-heading); font-weight: 600; font-size: 16px; text-transform: uppercase; letter-spacing: .02em; }
.wf-extra span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-neutral-600); }
.wf-extra em { font-family: var(--font-heading); font-style: normal; font-weight: 600; font-size: 26px; color: var(--color-accent-800, var(--color-accent)); margin-top: 8px; }

/* --- Simulador "Cotiza tu plan": usa la misma ventana emergente de la parrilla
   (.wf-parrilla) y agrega las dos columnas de opciones y el total. --- */
.wf-cotiza-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 20px 24px 6px; }
.wf-cotiza-col > span { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--color-accent-700); margin-bottom: 12px; }
.wf-op { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--color-divider); cursor: pointer; margin-bottom: 10px; transition: border-color .2s ease, background .2s ease; }
.wf-op:hover { border-color: var(--color-accent); }
.wf-op input { position: absolute; opacity: 0; pointer-events: none; }
.wf-op i { flex: 0 0 auto; width: 16px; height: 16px; border: 1px solid var(--color-neutral-500); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.wf-op input:checked + i { border-color: var(--color-accent); }
.wf-op input:checked + i::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); }
.wf-op:has(input:checked) { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.wf-op b { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 16px; text-transform: uppercase; letter-spacing: .02em; }
.wf-op small { display: block; font-size: 12px; color: var(--color-neutral-600); }
.wf-op em { margin-left: auto; font-family: var(--font-heading); font-style: normal; font-weight: 600; font-size: 17px; white-space: nowrap; }
.wf-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 14px 24px 0; padding: 18px 20px; background: var(--color-accent-900); color: var(--color-bg); }
.wf-total span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-300); }
.wf-total b { font-family: var(--font-heading); font-weight: 600; font-size: clamp(28px,3.4vw,38px); line-height: 1; }
.wf-total small { font-size: 12.5px; color: color-mix(in srgb, var(--color-bg) 66%, transparent); }
.wf-total-det { flex-basis: 100%; font-size: 12.5px; color: color-mix(in srgb, var(--color-bg) 72%, transparent); }
@media (max-width: 640px) {
  .wf-cotiza-cols { grid-template-columns: 1fr; gap: 6px; padding: 16px 16px 4px; }
  .wf-total { margin-inline: 16px; }
}

/* --- Parrilla de canales (ventana emergente de la pestaña Internet + DGO).
   Se abre con el botón [data-abre-parrilla] y filtra por plan y por categoría.
   Los canales van como TEXTO: no usamos logos de terceros. --- */
.wf-parrilla { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.wf-parrilla[hidden] { display: none; }
.wf-parrilla-fondo { position: absolute; inset: 0; background: rgba(9,14,20,.72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.wf-parrilla-caja { position: relative; display: flex; flex-direction: column; width: min(880px,100%); max-height: min(86vh,760px); background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-divider); box-shadow: 0 30px 80px rgba(9,14,20,.45); }
.wf-parrilla-caja:focus { outline: none; }
.wf-parrilla-top { flex: 0 0 auto; display: flex; align-items: flex-start; gap: 16px; padding: 22px 24px 0; }
.wf-parrilla-top h3 { font-family: var(--font-heading); font-weight: 600; font-size: clamp(20px,2.4vw,26px); text-transform: uppercase; letter-spacing: .02em; margin: 6px 0 0; }
.wf-parrilla-top p { font-size: 13px; line-height: 1.5; margin: 8px 0 0; color: var(--color-neutral-600); max-width: 52ch; }
.wf-parrilla-x { flex: 0 0 auto; margin-left: auto; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--color-divider); color: var(--color-text); font-size: 20px; line-height: 1; cursor: pointer; transition: border-color .25s ease, color .25s ease; }
.wf-parrilla-x:hover { border-color: var(--color-accent); color: var(--color-accent-700); }
.wf-parrilla-planes { flex: 0 0 auto; display: flex; flex-wrap: wrap; margin: 18px 24px 0; border: 1px solid var(--color-divider); }
.wf-parrilla-planes button { flex: 1 1 auto; min-height: 42px; padding: 0 14px; background: transparent; border: 0; border-left: 1px solid var(--color-divider); font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--color-text); cursor: pointer; transition: background .2s ease, color .2s ease; }
.wf-parrilla-planes button:first-child { border-left: 0; }
.wf-parrilla-planes button.is-on { background: var(--color-accent); color: var(--color-bg); }
.wf-parrilla-cats { flex: 0 0 auto; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 16px 24px 0; }
.wf-parrilla-cats::-webkit-scrollbar { display: none; }
.wf-parrilla-cats button { flex: 0 0 auto; min-height: 32px; padding: 0 13px; background: transparent; border: 1px solid var(--color-divider); font-family: inherit; font-size: 12.5px; color: var(--color-neutral-700); cursor: pointer; white-space: nowrap; transition: border-color .2s ease, color .2s ease, background .2s ease; }
.wf-parrilla-cats button.is-on { border-color: var(--color-accent); color: var(--color-accent-700); background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.wf-parrilla-lista { flex: 1; overflow-y: auto; list-style: none; display: grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap: 8px; margin: 0; padding: 18px 24px 4px; }
.wf-parrilla-lista li { display: flex; align-items: center; justify-content: center; min-height: 96px; padding: 10px; border: 1px solid var(--color-divider); }
/* Los logos salen de una sola imagen (assets/canales.png, casillas de 200x100).
   La posición la calcula el script según el lugar del canal en la lista. */
/* Truco de hoja en porcentajes: la casilla vale 700% x 800% (7 columnas x 8 filas),
   así el logo se adapta al ancho que tenga la casilla sin salirse ni deformarse. */
.wf-canal-logo { width: 100%; max-width: 168px; aspect-ratio: 2 / 1; background-image: url("canales.png?v=39"); background-repeat: no-repeat; background-size: 700% 1800%; }
.wf-parrilla-pie { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; padding: 14px 24px 20px; font-size: 12px; color: var(--color-neutral-600); }
.wf-parrilla-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; margin-top: 26px; padding: 0 26px; background: transparent; border: 1px solid var(--color-divider); font-family: inherit; font-size: 13.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text); cursor: pointer; transition: border-color .25s ease, color .25s ease; }
.wf-parrilla-btn:hover { border-color: var(--color-accent); color: var(--color-accent-700); }
html.wf-parrilla-on, html.wf-parrilla-on body { overflow: hidden; }
@media (max-width: 640px) { .wf-parrilla { padding: 0; } .wf-parrilla-caja { width: 100%; height: 100%; max-height: 100%; border: 0; } .wf-parrilla-lista { grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); padding-inline: 16px; }
  /* En celular las categorías se acomodan en varias filas en vez de salirse */
  .wf-parrilla-cats { flex-wrap: wrap; overflow-x: visible; padding: 14px 16px 0; }
  .wf-parrilla-cats button { min-height: 34px; font-size: 12px; }
  .wf-parrilla-planes { margin-inline: 16px; }
  .wf-parrilla-planes button { flex: 1 1 100%; border-left: 0; border-top: 1px solid var(--color-divider); }
  .wf-parrilla-planes button:first-child { border-top: 0; }
  .wf-parrilla-top, .wf-parrilla-pie { padding-inline: 16px; } }

/* --- Clientes (vista Empresas): cinta de logos que pasa sola.
   Los logos se duplican por JS (script DESFILE DE LOGOS) para que el giro sea
   continuo. No se frena al pasar el cursor (a pedido); solo queda quieta con
   "reducir animaciones".
   Para agregar uno: sube el archivo a assets/clientes/ y copia un <a>/<div>. --- */
.wf-desfile { position: relative; overflow: hidden; padding: 6px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.wf-desfile-pista { display: flex; align-items: center; gap: clamp(46px,6vw,92px); width: max-content; animation: wf-desfile 40s linear infinite; }
@keyframes wf-desfile { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.wf-cliente { display: flex; align-items: center; justify-content: center; text-align: center; min-width: 120px; height: 72px; text-decoration: none; color: var(--color-neutral-600); }
.wf-cliente img { max-height: 64px; max-width: 176px; width: auto; object-fit: contain; transition: transform .3s cubic-bezier(.22,.61,.36,1); }
a.wf-cliente:hover img { transform: scale(1.06); }
.wf-cliente span { font-family: var(--font-heading); font-weight: 600; font-size: 16px; line-height: 1.2; text-transform: uppercase; letter-spacing: .04em; opacity: .62; transition: opacity .3s ease, color .3s ease; }
a.wf-cliente:hover span { opacity: 1; color: var(--color-accent-700); }
.wf-cliente small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 10.5px; letter-spacing: .12em; margin-bottom: 4px; }
@media (prefers-reduced-motion: reduce) { .wf-desfile-pista { animation: none; } .wf-desfile { overflow-x: auto; } }

/* --- Planes · tarjetas de referencia DGO (imitan las de DGO, con nuestro estilo) --- */
/* Instalación · 3 pasos: en fila en escritorio, apilados en celular.
   (Antes eran 3 columnas fijas en línea y en celular el texto se salía de la pantalla) */
.wf-pasos { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 720px) {
  .wf-pasos { grid-template-columns: 1fr; }
  /* !important porque cada paso trae su borde derecho en línea */
  .wf-pasos > div { border-right: 0 !important; padding: 26px 22px !important; }
  .wf-pasos > div + div { border-top: 1px solid var(--color-divider); }
}
/* Grilla de planes (internet y TV): 3 columnas en escritorio; en celular se desliza
   de lado para no alargar la página. Reutiliza el carrusel [data-rail]. */
.wf-plans { position: relative; }
.wf-plangrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: clamp(20px,2.6vw,32px); }
.wf-plans[data-rail] > .wf-rail-btn { top: 50%; }
@media (max-width: 720px) {
  /* Relleno = scroll-padding (10px a los lados, 16px arriba/abajo) para no cortar
     las esquinas + ni la cinta "Más elegido", y que la 1ª tarjeta encaje en 0 */
  .wf-plangrid { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 10px; scrollbar-width: none; padding: 16px 10px; margin: -16px -10px; }
  .wf-plangrid::-webkit-scrollbar { display: none; }
  .wf-plangrid > * { flex: 0 0 86%; min-width: 0; scroll-snap-align: start; }
}
/* Carrusel horizontal: 4 tarjetas visibles en escritorio; si no caben, se desliza
   con flechas o con el dedo. Nunca pasa a doble fila. */
.wf-rail { position: relative; margin-top: 22px; }
/* scroll-padding igual al relleno lateral: así la 1ª tarjeta encaja en scroll 0 y
   la flecha "atrás" no aparece al inicio */
.wf-dgo-grid { display: flex; justify-content: safe center; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; scrollbar-width: none; padding: 8px 2px 14px; margin: -8px -2px -14px; }
.wf-dgo-grid::-webkit-scrollbar { display: none; }
.wf-dgo-grid > .wf-dgo { flex: 0 0 calc((100% - 36px) / 3); min-width: 252px; scroll-snap-align: start; }
.wf-rail-btn { position: absolute; z-index: 3; top: 83px; transform: translateY(-50%); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid color-mix(in srgb, var(--color-accent-300) 55%, transparent); background: var(--color-accent-900); color: var(--color-bg); cursor: pointer; box-shadow: 0 8px 22px rgba(0,0,0,.35); transition: background .2s ease; }
.wf-rail-btn:hover { background: var(--color-accent-800); }
.wf-rail-btn.is-prev { left: -14px; }
.wf-rail-btn.is-next { right: -14px; }
@media (max-width: 640px) {
  .wf-dgo-grid > .wf-dgo { flex-basis: 82%; min-width: 0; }
  /* la tarjeta es más alta que la pantalla: las flechas quedan a media altura de
     lo que se alcanza a ver, no arriba del todo */
  .wf-dgo-grid { justify-content: flex-start; }
  .wf-plans[data-plan="dgo"] .wf-rail-btn { top: 250px; }
  .wf-rail-btn.is-prev { left: 4px; } .wf-rail-btn.is-next { right: 4px; }
  /* 4 pestañas no caben en una fila de celular: se acomodan en dos filas
     (antes se deslizaban de lado y se salían de la pantalla) */
  .seg { display: grid !important; grid-template-columns: 1fr 1fr; align-self: stretch !important; width: 100%; max-width: 100%; overflow: hidden; }
  .seg-opt { min-width: 0; padding: 0 10px !important; font-size: 13px !important; text-align: center; justify-content: center; white-space: normal; border-left: 1px solid var(--color-divider); border-top: 1px solid var(--color-divider); }
  .seg-opt:nth-child(odd) { border-left: 0; }
  .seg-opt:nth-child(-n+2) { border-top: 0; }
}
.wf-dgo { position: relative; display: flex; flex-direction: column; background: var(--color-bg); border: 1px solid var(--color-divider); transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease; }
.wf-dgo:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.wf-dgo-media { position: relative; height: 150px; overflow: hidden; background: var(--color-accent-900); }
.wf-dgo-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wf-dgo-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,17,24,.92) 0%, rgba(10,17,24,.45) 55%, rgba(10,17,24,.25) 100%); }
.wf-dgo-tag { position: absolute; z-index: 1; left: 18px; bottom: 14px; right: 18px; color: #fff; }
.wf-dgo-tag small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--color-accent-300); }
.wf-dgo-tag strong { display: block; font-family: var(--font-heading); font-weight: 600; font-size: clamp(26px,2.6vw,32px); line-height: .95; text-transform: uppercase; letter-spacing: .01em; margin-top: 3px; }
.wf-dgo-body { flex: 1; display: flex; flex-direction: column; padding: 20px 20px 22px; }
.wf-dgo-body h4 { min-height: 2.1em; font-family: var(--font-heading); font-weight: 600; font-size: 19px; text-transform: uppercase; letter-spacing: .02em; margin: 0; }
.wf-dgo-pre { display: flex; align-items: center; gap: 8px; min-height: 22px; margin-top: 10px; font-size: 12px; color: var(--color-neutral-600); }
.wf-dgo-pre s { color: var(--color-neutral-500); }
.wf-dgo-badge { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; color: var(--color-accent-900); background: var(--color-accent-300); }
.wf-dgo-price { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; }
.wf-dgo-price b { font-family: var(--font-heading); font-weight: 600; font-size: 32px; line-height: 1; font-variant-numeric: tabular-nums; }
.wf-dgo-price span { font-size: 12.5px; color: var(--color-neutral-600); }
/* flex:1 en la descripción = los botones Contratar quedan a la misma altura
   aunque un plan tenga el texto más largo */
/* El texto se centra dentro del alto que iguala el script: así el espacio de
   arriba y el de abajo es el mismo en las 3 tarjetas, aunque una tenga 3 líneas */
.wf-dgo-desc { display: flex; flex-direction: column; justify-content: center; font-size: 13.5px; line-height: 1.55; margin: 10px 0 0; color: var(--color-neutral-700); }
.wf-dgo-inc { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--color-divider); }
.wf-dgo-inc > span { display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-neutral-600); margin-bottom: 9px; }
.wf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wf-chip { font-size: 11px; font-weight: 600; letter-spacing: .03em; padding: 4px 8px; border: 1px solid color-mix(in srgb, var(--color-accent-700) 30%, transparent); background: color-mix(in srgb, var(--color-accent-300) 14%, transparent); color: var(--color-accent-800); }
.wf-dgo-list { list-style: none; margin: 16px 0 0; padding: 0; flex: 1; display: grid; align-content: start; gap: 9px; font-size: 13.5px; line-height: 1.4; color: var(--color-neutral-800); }
.wf-dgo-list li { display: flex; gap: 9px; }
.wf-dgo-list li > span { color: var(--color-accent); }
.wf-dgo-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--color-accent-700); text-decoration: none; }
.wf-dgo-more:hover { color: var(--color-accent-900); text-decoration: underline; }
.wf-ixp span { font-size: 13.5px; line-height: 1.45; color: var(--color-neutral-700); }
@keyframes wf-blink { 0%,100% { opacity: 1 } 50% { opacity: .2 } }
@keyframes wf-marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }
/* Esquema de red · un ciclo = exactamente un período de guiones (6+8 = 5+9 = 14) para bucle sin salto.
   Velocidad baja a propósito: a 60Hz el avance por fotograma queda muy por debajo del límite de Nyquist,
   así se evita el efecto rueda de carreta que hacía ver las líneas estáticas o temblorosas. */
@keyframes wf-flow { to { stroke-dashoffset: -14 } }
@keyframes wf-ring { 0% { transform: scale(1); opacity: .6 } 100% { transform: scale(5); opacity: 0 } }
.wf-fiber { animation: wf-flow .8s linear infinite; }
.wf-fiber-l3 { animation-duration: .65s; }
.wf-fiber-l4 { animation-duration: .5s; }
.wf-ring-pulse { -webkit-transform-box: fill-box; transform-box: fill-box; -webkit-transform-origin: center; transform-origin: center; will-change: transform, opacity; animation: wf-ring 2.8s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .wf-fiber, .wf-ring-pulse { animation: none !important; } }
@keyframes wf-fabring { 0% { transform: scale(1); opacity: .5 } 100% { transform: scale(1.6); opacity: 0 } }
@keyframes wf-bob { 0%,100% { transform: translateY(0); opacity: .5 } 50% { transform: translateY(7px); opacity: 1 } }
@keyframes wf-lineup { from { transform: translateY(110%) } to { transform: translateY(0) } }
@keyframes wf-rise { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: none } }
.wf-heroh1 { font-family: var(--font-heading); font-weight: 600; font-size: clamp(32px,4.6vw,54px); line-height: .98; letter-spacing: .005em; text-transform: uppercase; margin: 0; color: var(--color-bg); text-wrap: balance; }
.wf-heroh1 .wf-ln { display: block; overflow: hidden; padding-bottom: .04em; }
.wf-heroh1 .wf-ln > span { display: block; transform: translateY(110%); animation: wf-lineup 1s cubic-bezier(.16,1,.3,1) both; }
.wf-heroh1 .wf-ln:nth-child(1) > span { animation-delay: .12s }
.wf-heroh1 .wf-ln:nth-child(2) > span { animation-delay: .26s }
.wf-heroh1 .wf-ln:nth-child(3) > span { animation-delay: .40s }
.wf-riser { opacity: 0; animation: wf-rise .8s cubic-bezier(.22,.61,.36,1) both; }
.wf-riser.d1 { animation-delay: .5s } .wf-riser.d2 { animation-delay: .62s } .wf-riser.d3 { animation-delay: .74s }
/* --- Mapa sucursal · CartoDB Dark + pin con pulso neón --- */
/* isolation:isolate crea un contexto de apilamiento propio: todo lo que Leaflet
   dibuje adentro queda encerrado bajo z-index 0 y no puede tapar la navegación. */
#wf-map { position: relative; isolation: isolate; z-index: 0; height: 210px; background: #0d1520; }
#wf-map .leaflet-container { background: #0d1520; font-family: var(--font-body); outline: none; }
/* Leaflet pone sus controles en z-index 1000 por defecto: los bajamos.
   OJO: NO tocar los z-index de cada .leaflet-*-pane por separado — Leaflet los usa
   para apilar tiles (200) bajo el marcador (600). Aplanarlos escondería el pin. */
#wf-map .leaflet-top, #wf-map .leaflet-bottom { z-index: 10; }
#wf-map .leaflet-control-attribution { background: rgba(10,17,24,.74); color: color-mix(in srgb, var(--color-bg) 52%, transparent); font-size: 9.5px; padding: 2px 6px; }
#wf-map .leaflet-control-attribution a { color: var(--color-accent-300); }
/* Texto solo para lectores de pantalla (invisible pero anunciado) */
.wf-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.wf-maplink { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 4px 2px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--color-accent-300); text-decoration: none; transition: color .2s ease, text-shadow .2s ease; }
.wf-maplink > svg { flex: none; transition: transform .2s ease, filter .2s ease; }
.wf-maplink:hover, .wf-maplink:focus-visible { color: #dff1ff; text-shadow: 0 0 10px color-mix(in srgb, var(--color-accent-300) 85%, transparent); }
.wf-maplink:hover > svg, .wf-maplink:focus-visible > svg { transform: translate(1px,-1px); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--color-accent-300) 90%, transparent)); }
.wf-pin { display: block; position: relative; width: 14px; height: 14px; }
.wf-pin b, .wf-pin i { position: absolute; inset: 0; border-radius: 50%; display: block; }
.wf-pin b { background: var(--color-accent-300); box-shadow: 0 0 10px color-mix(in srgb, var(--color-accent-300) 90%, transparent), 0 0 3px #fff inset; }
.wf-pin i { border: 1px solid var(--color-accent-300); animation: wf-pinpulse 2.8s ease-out infinite; }
.wf-pin i + i { animation-delay: 1.4s; }
@keyframes wf-pinpulse { 0% { transform: scale(1); opacity: .75 } 100% { transform: scale(3.6); opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .wf-pin i { animation: none !important; opacity: .3 !important; } }
/* --- Compromiso de calidad · badge "en vivo" y tarjetas de garantía --- */
.wf-live { margin-top: 16px; display: inline-flex; align-items: center; gap: 9px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: #7ee2ad; border: 1px solid color-mix(in srgb, #34d399 34%, transparent); background: color-mix(in srgb, #34d399 10%, transparent); padding: 6px 12px; border-radius: 999px; }
.wf-live-dot { position: relative; display: block; width: 8px; height: 8px; flex: none; }
.wf-live-dot > i { position: absolute; inset: 0; display: block; border-radius: 50%; background: #34d399; }
.wf-live-dot > i:first-child { animation: wf-ping 1.8s cubic-bezier(0,0,.2,1) infinite; }
@keyframes wf-ping { 0% { transform: scale(1); opacity: .75 } 80%, 100% { transform: scale(2.8); opacity: 0 } }
.wf-glist { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 8px; }
.wf-gitem { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 15px 16px; font-size: 14.5px; line-height: 1.5; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); transition: transform .25s cubic-bezier(.22,.61,.36,1), background .25s ease, border-color .25s ease, box-shadow .25s ease; }
.wf-gitem:hover, .wf-gitem:focus-within { transform: translateY(-2px); background: rgba(255,255,255,.085); border-color: color-mix(in srgb, var(--color-accent-300) 40%, transparent); box-shadow: 0 10px 26px -12px rgba(0,0,0,.7); }
.wf-gitem > svg { flex: none; margin-top: 2px; color: var(--color-accent-300); transition: color .25s ease, filter .25s ease; }
.wf-gitem:hover > svg, .wf-gitem:focus-within > svg { color: #dceeff; filter: drop-shadow(0 0 7px color-mix(in srgb, var(--color-accent-300) 95%, transparent)); }
.wf-tag { display: none; }
/* La etiqueta técnica solo en escritorio con cursor real (no en táctil) */
@media (min-width: 900px) and (hover: hover) {
  .wf-tag { display: block; position: absolute; right: 14px; top: 50%; transform: translateY(-50%) translateX(7px); opacity: 0; pointer-events: none; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: var(--color-accent-200); border: 1px solid color-mix(in srgb, var(--color-accent-300) 45%, transparent); background: color-mix(in srgb, var(--color-accent-300) 16%, #16273a); padding: 4px 10px; border-radius: 999px; transition: opacity .25s ease, transform .25s ease; }
  .wf-gitem:hover .wf-tag, .wf-gitem:focus-within .wf-tag { opacity: 1; transform: translateY(-50%) translateX(0); }
}
/* --- Hero split · texto + buscador a la izquierda, banner promocional a la derecha.
       El contenido sale de promotionsList (ver script al final del archivo). --- */
/* El hero ocupa todo el ancho y todo el alto libre bajo la cabecera */
.wf-hero-stage { position: relative; z-index: 10; flex: 1; display: flex; width: 100%; min-width: 0; min-height: clamp(400px, 56svh, 620px); }
.wf-hero-stage .wf-promo-card { flex: 1; position: relative; min-width: 0; overflow: hidden; border-radius: 0; border: 0; box-shadow: none; }
/* La imagen va fuera del flujo: si no, impone su proporción natural (1000x667) y
   en pantallas anchas estira el hero hasta empujar el título fuera de la vista. */
.wf-hero-stage .wf-promo-media { position: absolute; inset: 0; aspect-ratio: auto; min-height: 0; }
/* Texto de la promoción sobrepuesto en la parte de abajo de la imagen */
.wf-hero-caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; padding: clamp(24px,3.4vw,44px) clamp(20px,5vw,64px) clamp(34px,4vw,46px); }
.wf-hero-caption > div { width: 100%; max-width: 1240px; margin: 0 auto; }
/* Botón y logo de cada promoción del hero (salen de promotionsList: cta, href, logo) */
.wf-hero-logo { display: block; height: clamp(34px,4vw,48px); width: auto; margin-bottom: 16px; filter: drop-shadow(0 2px 10px rgba(0,0,0,.45)); }
.wf-hero-cta { display: inline-flex; align-items: center; min-height: 44px; margin-top: 16px; padding: 0 26px; border-radius: 0; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; }
.wf-slides { display: grid; width: 100%; }
.wf-slide { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: flex-start; text-align: left; max-width: 46rem; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s ease; }
.wf-slide.is-active { opacity: 1; visibility: visible; }
.wf-hero-badge { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--color-accent-200); border: 1px solid color-mix(in srgb, var(--color-accent-200) 38%, transparent); padding: 7px 14px; margin-bottom: clamp(18px,2.4vw,26px); }
.wf-hero-badge > i { width: 7px; height: 7px; background: var(--color-accent-300); display: inline-block; animation: wf-blink 1.8s ease-in-out infinite; }
.wf-hero-sub { font-size: clamp(15.5px,1.5vw,18.5px); line-height: 1.6; max-width: 46ch; margin: clamp(14px,2vw,20px) 0 0; color: color-mix(in srgb, var(--color-bg) 76%, transparent); }
/* Tarjeta del banner promocional */
.wf-promo-card { position: relative; margin: 0; border-radius: 16px; overflow: hidden; background: #0d1520; border: 1px solid rgba(255,255,255,.10); box-shadow: 0 18px 50px -12px rgba(0,0,0,.72), 0 0 34px -6px color-mix(in srgb, var(--color-accent-300) 22%, transparent); }
.wf-promo-media { position: relative; display: grid; width: 100%; aspect-ratio: 4 / 3; background: #0d1520; }
@media (min-width: 980px) { .wf-promo-media { aspect-ratio: 5 / 4; } }
.wf-promo-img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; object-position: var(--foco, 50% 50%); opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s ease; }
/* En pantallas angostas el recuadro es mucho más alto que ancho y recorta los lados:
   cada promo puede decir hacia dónde correr la foto para no dejar fuera lo importante. */
@media (max-width: 720px) { .wf-promo-img { object-position: var(--foco-movil, var(--foco, 50% 50%)); } }
.wf-promo-img.is-active { opacity: 1; visibility: visible; }
/* Velo para que los puntos y el marco se lean sobre cualquier foto */
.wf-promo-card::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(10,17,24,.94) 0%, rgba(10,17,24,.82) 26%, rgba(10,17,24,.30) 62%, rgba(10,17,24,.55) 100%); }
/* Puntos (bullets) en la base de la tarjeta */
.wf-dots { position: absolute; z-index: 3; left: 0; right: 0; bottom: clamp(24px,3vw,34px); display: flex; gap: 9px; justify-content: center; }
@media (min-width: 980px) { .wf-dots { justify-content: flex-end; padding-right: max(clamp(20px,5vw,64px), calc((100% - 1240px) / 2 + clamp(20px,5vw,64px))); } }
.wf-dots[hidden] { display: none !important; }
.wf-dot { height: 22px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; }
.wf-dot > span { position: relative; display: block; width: 9px; height: 9px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.34); transition: width .45s cubic-bezier(.22,.61,.36,1), background .3s ease; }
.wf-dot:hover > span { background: rgba(255,255,255,.6); }
.wf-dot[aria-current="true"] > span { width: 30px; background: rgba(255,255,255,.22); }
.wf-dot > span > i { position: absolute; inset: 0; display: block; border-radius: 999px; transform: scaleX(0); transform-origin: left; background: var(--color-accent-300); box-shadow: 0 0 10px color-mix(in srgb, var(--color-accent-300) 85%, transparent); }
.wf-dot[aria-current="true"] > span > i { animation: wf-dotfill 5s linear forwards; }
@keyframes wf-dotfill { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@media (prefers-reduced-motion: reduce) { .wf-dot[aria-current="true"] > span > i { animation: none !important; transform: scaleX(1) !important; } }
.wf-armed { opacity: 0; transform: translateY(26px); }
.wf-armed.wf-in { opacity: 1; transform: none; transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); }
[data-reveal] > * { opacity: 0; transform: translateY(24px); }
[data-reveal].wf-in > * { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
[data-reveal].wf-in > *:nth-child(2) { transition-delay: .08s } [data-reveal].wf-in > *:nth-child(3) { transition-delay: .16s } [data-reveal].wf-in > *:nth-child(4) { transition-delay: .24s }
/* Jerarquía de capas fijas · el mapa vive aislado en su propio contexto (z-index 0),
   así nada de Leaflet puede treparse sobre la barra de navegación.
   1001 barra de progreso · 1000 navegación · 55 botón WhatsApp · 0 mapa */
#wf-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 1001; pointer-events: none; }
#wf-progress span { display: block; height: 100%; transform: scaleX(0); transform-origin: left; background: var(--color-accent-300); will-change: transform; }
#wf-fab { position: fixed; right: 22px; bottom: 22px; z-index: 55; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; color: var(--color-accent-900); background: var(--color-accent-300); border: 1px solid var(--color-accent-200); box-shadow: 0 12px 30px rgba(0,0,0,.5); transition: background .2s ease, transform .2s ease; }
#wf-fab:hover { background: var(--color-accent-200); transform: translateY(-2px); }
#wf-fab:focus-visible { outline: 2px solid var(--color-accent-300); outline-offset: 3px; }
#wf-fab::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--color-accent-300); animation: wf-fabring 2.6s ease-out infinite; pointer-events: none; }
.wf-checkinput:focus { outline: none; }
.wf-checkwrap:focus-within { border-color: var(--color-accent-300); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-300) 22%, transparent); }
:focus-visible { outline: 2px solid var(--color-accent-300); outline-offset: 2px; }
@media (max-width: 900px) { .wf-2col { grid-template-columns: 1fr !important; } }
@media (prefers-reduced-motion: reduce) {
  .wf-heroh1 .wf-ln > span, .wf-riser, .wf-armed, [data-reveal] > * { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* --- Ajustes tras desempaquetar de Claude Design --- */
[hidden] { display: none !important; }
.wf-lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* --- Transición entre páginas (inicio ↔ Nosotros) -------------------------
   La página nueva entra deslizándose desde la derecha y la anterior se va
   hacia la izquierda. Lo hace el navegador con la API de transiciones de vista:
   si el navegador no la soporta, el cambio es instantáneo como siempre. --- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 330ms cubic-bezier(.22,.61,.36,1) both wf-vt-sale; }
::view-transition-new(root) { animation: 330ms cubic-bezier(.22,.61,.36,1) both wf-vt-entra; }
@keyframes wf-vt-sale { to { transform: translateX(-16%); opacity: .55; } }
@keyframes wf-vt-entra { from { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* Campo de teléfono cuando el número no sirve (ver script TELÉFONO CHILENO) */
.input.wf-mal { border-color: #b4483f; box-shadow: 0 0 0 2px color-mix(in srgb, #b4483f 18%, transparent); }
.wf-fono-aviso { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.4; color: #b4483f; }
.wf-fono-aviso[hidden] { display: none; }

/* --- Pantallas bajas (notebooks chicos, ventana a media pantalla) ----------
   Con poco alto, la portada no alcanzaba a mostrar el texto y quedaba pegado
   a la barra. Acá se achica todo lo justo para que respire. --- */
@media (min-width: 721px) and (max-height: 700px) {
  .wf-logo { height: clamp(44px,4.4vw,58px); }
  .wf-header.is-solid .wf-logo { height: clamp(40px,3.4vw,48px); }
  .wf-nav { padding-top: 8px; padding-bottom: 8px; }
  .wf-hero-stage { min-height: 360px; }
  .wf-hero-caption { padding-top: 96px; padding-bottom: clamp(26px,4vh,40px); }
  .wf-heroh1 { font-size: clamp(26px,3.6vw,40px); }
  .wf-hero-sub { font-size: 14.5px; margin-top: 10px; }
  .wf-hero-cta { min-height: 40px; margin-top: 12px; padding: 0 20px; }
  .wf-hero-logo { height: clamp(28px,3vw,38px); margin-bottom: 10px; }
  .wf-metrics > div { padding: 14px 16px !important; }
}
/* Muy bajas: se saca el indicador "scroll" para ganar aire */
@media (min-width: 721px) and (max-height: 540px) {
  .wf-scrollcue { display: none; }
  .wf-hero-caption { padding-top: 88px; }
  .wf-heroh1 { font-size: clamp(24px,3vw,32px); }
}

/* --- Cotizador en pantallas bajas: las opciones se desplazan y el total y el
   botón quedan siempre a la vista (antes se cortaban). --- */
.wf-cotiza .wf-parrilla-caja { max-height: min(92vh, 780px); }
.wf-cotiza-cols { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.wf-cotiza .wf-total, .wf-cotiza .wf-parrilla-pie { flex: 0 0 auto; }
@media (max-height: 640px) {
  .wf-parrilla { padding: 10px; }
  .wf-parrilla-caja { max-height: 96vh; }
  .wf-parrilla-top { padding: 14px 18px 0; }
  .wf-parrilla-top h3 { font-size: 20px; }
  .wf-parrilla-top p { display: none; }
  .wf-cotiza-cols { padding: 14px 18px 4px; gap: 12px; }
  .wf-op { padding: 9px 12px; margin-bottom: 8px; }
  .wf-op b { font-size: 14.5px; }
  .wf-op small { font-size: 11.5px; }
  .wf-total { margin: 10px 18px 0; padding: 12px 16px; }
  .wf-total b { font-size: 26px; }
  .wf-parrilla-pie { padding: 10px 18px 14px; }
  .wf-parrilla-lista li { min-height: 76px; }
}

/* --- Ficha del router (ZXHN F6600R): el nombre se ve como enlace y abre una
   ventana con las especificaciones. Usa la misma ventana que la parrilla. --- */
.wf-router-link { display: inline; padding: 0; background: none; border: 0; font: inherit; color: var(--color-accent-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; transition: color .2s ease; }
.wf-router-link span { font-size: .85em; margin-left: 3px; }
.wf-router-link:hover { color: var(--color-accent-800, var(--color-accent)); }
.wf-router-hero { padding: 18px 24px 0; }
.wf-router-hero p { font-size: 14px; line-height: 1.6; margin: 10px 0 0; color: var(--color-neutral-700); }
.wf-router-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.wf-router-tags span { padding: 6px 11px; border: 1px solid var(--color-divider); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-accent-700); }
.wf-router-foto { position: relative; min-height: 150px; display: flex; align-items: center; justify-content: center; background: var(--color-accent-900); }
.wf-router-foto img { max-width: 78%; height: auto; }
.wf-router-specs { list-style: none; margin: 0; padding: 18px 24px 4px; display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); grid-auto-rows: min-content; align-content: start; gap: 10px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.wf-router-specs li { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid var(--color-divider); }
.wf-router-specs b { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-700); }
.wf-router-specs span { font-size: 13.5px; line-height: 1.45; }
@media (max-width: 720px) {
  .wf-router-hero { padding: 16px 16px 0; }
  .wf-router-specs { padding: 14px 16px 4px; }
}
@media (max-height: 640px) { .wf-router-hero { display: none; } }

/* --- Fichas del router: se destacan al pasar el cursor --------------------- */
.wf-router-specs li { position: relative; overflow: hidden; background: var(--color-bg); transition: transform .25s cubic-bezier(.22,.61,.36,1), border-color .25s ease, box-shadow .25s ease, background .25s ease; }
.wf-router-specs li::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; background: var(--color-accent); transform: scaleY(0); transform-origin: top; transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.wf-router-specs li:hover, .wf-router-specs li:focus-within { transform: translateY(-4px); border-color: var(--color-accent); box-shadow: var(--shadow-lg); background: color-mix(in srgb, var(--color-accent) 6%, var(--color-bg)); }
.wf-router-specs li:hover::before, .wf-router-specs li:focus-within::before { transform: scaleY(1); }
.wf-router-specs li:hover b { color: var(--color-accent-800, var(--color-accent)); }
.wf-router-tags span { transition: border-color .25s ease, background .25s ease, color .25s ease; }
.wf-router-tags span:hover { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .wf-router-specs li, .wf-router-specs li::before { transition: none; }
  .wf-router-specs li:hover { transform: none; }
}

/* Ficha del router con foto: texto a la izquierda, equipo a la derecha */
#wf-router .wf-router-hero { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); gap: 20px; align-items: center; }
#wf-router .wf-router-foto { position: static; margin: 0; min-height: 0; background: none; text-align: center; }
#wf-router .wf-router-foto img { width: 100%; max-width: 210px; height: auto; }
#wf-router .wf-router-foto figcaption { margin-top: 6px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-neutral-600); }
@media (max-width: 720px) {
  #wf-router .wf-router-hero { grid-template-columns: 1fr; }
  #wf-router .wf-router-foto img { max-width: 160px; }
}

/* Dibujo del repetidor mientras no haya foto del equipo real */
#wf-repe .wf-router-hero { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); gap: 20px; align-items: center; }
#wf-repe .wf-router-foto { position: static; margin: 0; min-height: 0; background: none; display: flex; justify-content: center; color: var(--color-accent); }
#wf-repe .wf-router-foto svg { width: 100%; max-width: 170px; height: auto; }
@media (max-width: 720px) { #wf-repe .wf-router-hero { grid-template-columns: 1fr; } #wf-repe .wf-router-foto svg { max-width: 130px; } }

/* Canales sin logo: se muestra el nombre, en la misma casilla */
.wf-canal-nom { font-family: var(--font-heading); font-weight: 600; font-size: 14px; line-height: 1.2; text-align: center; text-transform: uppercase; letter-spacing: .02em; color: var(--color-neutral-700); padding: 0 6px; }