@charset "UTF-8";
/* ==========================================================================
   IKON SERVICIOS DIGITALES SPA — Sistema de diseño
   Fase 1: tokens + base + primitivas de layout + componentes fundacionales
   Autor: front-end IKON · Sin dependencias externas · CSS nativo
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. TIPOGRAFÍA AUTO-ALOJADA
   --------------------------------------------------------------------------
   ACCIÓN REQUERIDA: colocar el archivo `inter-var.woff2` en /assets/fonts/.
   Descargar la versión variable subseteada a latin + latin-ext desde
   https://rsms.me/inter/ o https://gwfh.mranftl.com/fonts/inter

   La familia "Inter Fallback" replica las métricas de Inter usando Arial local.
   Mientras el .woff2 no exista, el sitio se ve correcto y **CLS = 0**:
   no hay salto de layout al intercambiar la fuente.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107.40%;
  ascent-override: 90.20%;
  descent-override: 22.48%;
  line-gap-override: 0%;
}


/* --------------------------------------------------------------------------
   2. TOKENS PRIMITIVOS
   -------------------------------------------------------------------------- */

:root {
  /* ---- Color: primitivas ---- */
  --ink:            #14171A;  /* negro cálido — texto y superficies oscuras   */
  --ink-800:        #22272C;
  --ink-700:        #343B42;
  --graphite:       #5A6169;  /* texto secundario · 6.0:1 sobre papel         */
  --graphite-300:   #9AA1A9;  /* texto secundario sobre superficie oscura     */
  --line:           #E4E1DA;  /* hairline cálido                              */
  --line-soft:      #EFEDE7;
  --paper:          #FAF9F6;  /* fondo cálido — NUNCA blanco puro             */
  --paper-raised:   #FFFEFC;  /* cards sobre papel                            */
  --white:          #FFFFFF;

  --accent:         #C2410C;  /* terracota · 4.95:1 sobre papel               */
  --accent-deep:    #9A330A;  /* estado :active / hover                       */
  --accent-bright:  #E8703A;  /* acento sobre superficie oscura · 5.99:1      */
  --accent-tint:    #FCEFE8;  /* fondo de realce muy sutil                    */

  --guardix:        #1E4D8C;  /* identidad de la card Guardix                 */
  --guardix-tint:   #E9EFF7;
  --vacunapro:      #0F5C4E;  /* identidad de la card VacunaPro               */
  --vacunapro-tint: #E6F1EE;

  --danger:         #B3261E;
  --danger-tint:    #FCECEA;
  --success:        #0F5C4E;

  /* ---- Escala fluida base ----
     Vale 0rem a 320px y 1rem a 1440px. Multiplicador para todo lo fluido.  */
  --fluid: clamp(0rem, calc((100vw - 20rem) / 70), 1rem);

  /* ---- Tipografía ---- */
  --font-sans: "Inter", "Inter Fallback", system-ui, -apple-system,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --text-2xs: 0.75rem;                              /* 12px — microtipografía */
  --text-xs:  0.8125rem;                            /* 13px — eyebrows        */
  --text-sm:  0.875rem;                             /* 14px                   */
  --text-base: calc(1rem      + 0.0625 * var(--fluid));  /* 16 → 17           */
  --text-md:   calc(1.125rem  + 0.125  * var(--fluid));  /* 18 → 20           */
  --text-lg:   calc(1.375rem  + 0.25   * var(--fluid));  /* 22 → 26           */
  --text-xl:   calc(1.625rem  + 0.5    * var(--fluid));  /* 26 → 34           */
  --text-2xl:  calc(2rem      + 0.75   * var(--fluid));  /* 32 → 44           */
  --text-3xl:  calc(2.5rem    + 1.375  * var(--fluid));  /* 40 → 62           */
  --text-4xl:  calc(2.875rem  + 2.375  * var(--fluid));  /* 46 → 84 — display */

  --leading-tight:  1.06;
  --leading-snug:   1.22;
  --leading-normal: 1.45;
  --leading-relaxed: 1.62;

  --tracking-display: -0.032em;   /* contrapesa el tamaño en titulares        */
  --tracking-tight:   -0.018em;
  --tracking-normal:  -0.005em;
  --tracking-wide:     0.08em;
  --tracking-caps:     0.14em;    /* versalitas y eyebrows                    */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    570;          /* eje variable: peso intermedio real       */
  --weight-bold:    680;

  /* ---- Espaciado ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;

  /* OJO: se aplica arriba Y abajo de cada sección, así que el espacio entre
     dos bloques consecutivos es el DOBLE de este valor: 80px en móvil,
     136px en escritorio. Subirlo tiene efecto multiplicado. */
  --space-section: calc(2.5rem + 1.75 * var(--fluid));  /* 40 → 68px          */
  --gutter:        calc(1.25rem + 1.25 * var(--fluid)); /* 20 → 40px          */

  /* ---- Layout ---- */
  --content-max:    78rem;   /* 1248px — ancho total                          */
  --content-text:   42rem;   /* 672px  — medida óptima de lectura (~72 car.)  */
  --header-height:  4.5rem;

  /* ---- Radios ---- */
  --radius-xs: 3px;
  --radius-s:  6px;
  --radius-m:  10px;
  --radius-l:  16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ---- Sombras: cortas y sutiles. La jerarquía la da el hairline. ---- */
  --shadow-xs: 0 1px 2px rgba(20, 23, 26, 0.04);
  --shadow-s:  0 1px 2px rgba(20, 23, 26, 0.04),
               0 2px 5px -2px rgba(20, 23, 26, 0.06);
  --shadow-m:  0 2px 4px -1px rgba(20, 23, 26, 0.05),
               0 6px 14px -6px rgba(20, 23, 26, 0.09);
  --shadow-l:  0 4px 8px -2px rgba(20, 23, 26, 0.06),
               0 14px 30px -12px rgba(20, 23, 26, 0.12);

  /* ---- Movimiento ---- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 340ms;
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}


/* --------------------------------------------------------------------------
   3. TOKENS SEMÁNTICOS
   Las superficies se cambian reasignando estos, no reescribiendo componentes.
   -------------------------------------------------------------------------- */

:root,
.surface-paper {
  --bg:          var(--paper);
  --bg-raised:   var(--paper-raised);
  --fg:          var(--ink);
  --fg-muted:    var(--graphite);
  --border:      var(--line);
  --border-soft: var(--line-soft);
  --link:        var(--accent);
  --link-hover:  var(--accent-deep);
  --focus-ring:  var(--accent);
}

.surface-ink {
  --bg:          var(--ink);
  --bg-raised:   var(--ink-800);
  --fg:          var(--paper);
  --fg-muted:    var(--graphite-300);
  --border:      rgba(250, 249, 246, 0.14);
  --border-soft: rgba(250, 249, 246, 0.08);
  --link:        var(--accent-bright);
  --link-hover:  var(--white);
  --focus-ring:  var(--accent-bright);

  background-color: var(--bg);
  color: var(--fg);
}

.surface-tint {
  --bg:        var(--accent-tint);
  --bg-raised: var(--paper-raised);
  --border:    #F0DDD2;
  background-color: var(--bg);
}


/* --------------------------------------------------------------------------
   4. RESET
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--space-m));
  -moz-tab-size: 2;
  tab-size: 2;
}

body {
  /* Bloque contenedor de los centinelas absolutos de nav.js y analytics.js.
     Sin esto, `height:100%` se mediría contra el viewport, no el documento. */
  position: relative;
  min-height: 100svh;
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
  font-optical-sizing: auto;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  counter-reset: section;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

svg { fill: currentColor; }

/* Iconos del sprite dentro de texto */
.icon {
  display: inline-block;
  vertical-align: -0.04em;
  flex: none;
  margin-inline-start: 0.28em;
  opacity: 0.55;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button { background: none; border: none; }

p, h1, h2, h3, h4, h5, h6, li, figcaption {
  overflow-wrap: break-word;
  text-wrap: pretty;
}

h1, h2, h3, h4 { text-wrap: balance; }

ul[role="list"], ol[role="list"] {
  list-style: none;
  padding: 0;
}

address { font-style: normal; }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  height: 0;
}

::selection {
  background-color: var(--accent);
  color: var(--white);
}

:target { scroll-margin-top: calc(var(--header-height) + var(--space-l)); }


/* --------------------------------------------------------------------------
   5. TIPOGRAFÍA
   Contraste marcado entre display y cuerpo: la jerarquía es la personalidad.
   -------------------------------------------------------------------------- */

h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  font-weight: var(--weight-semi);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

h1, .h1 {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-bold);
}

.display {
  font-size: var(--text-4xl);
  line-height: 1.02;
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-bold);
}

h2, .h2 { font-size: var(--text-2xl); letter-spacing: var(--tracking-display); }
h3, .h3 { font-size: var(--text-xl); }
h4, .h4 { font-size: var(--text-lg); }

.lead {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
  max-width: var(--content-text);
}

.text-sm    { font-size: var(--text-sm); }
.text-muted { color: var(--fg-muted); }
.text-balance { text-wrap: balance; }
.measure    { max-width: var(--content-text); }

/* Resalta una palabra dentro de un párrafo apagado */
.text-strong { color: var(--fg); font-weight: var(--weight-semi); }

/* Hereda el color de identidad del producto (--brand) */
.text-brand { color: var(--brand, var(--accent)); }

/* Microtipografía en versalitas — detalle editorial recurrente */
.overline {
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--fg-muted);
}

/* Eyebrow numerado: "01 — Servicios", con hairline de continuación */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  margin-bottom: var(--space-m);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.eyebrow::before {
  content: counter(section, decimal-leading-zero);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.eyebrow::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background-color: var(--border);
}

.eyebrow--contained::after { display: none; }

/* Cifras del panel de confianza */
.stat-value {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums lining-nums;
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  letter-spacing: 0;
}


/* --------------------------------------------------------------------------
   6. ENLACES
   -------------------------------------------------------------------------- */

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-color var(--dur-fast) var(--ease-out);
}

a:hover {
  color: var(--link-hover);
  text-decoration-color: currentColor;
}

/* Enlace con flecha que avanza en hover — microinteracción del sistema */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.link-arrow::after {
  content: "→";
  transition: transform var(--dur-base) var(--ease-out);
}

.link-arrow:hover::after { transform: translateX(0.25em); }

.link-plain { color: inherit; text-decoration: none; }
.link-plain:hover { color: var(--link); }

/* <button> con apariencia de enlace — para acciones, no navegación */
.btn-link {
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  cursor: pointer;
}

.btn-link:hover { color: var(--link); text-decoration-color: currentColor; }


/* --------------------------------------------------------------------------
   7. FOCO — WCAG 2.2 AA. Nunca se elimina, siempre se diseña.
   -------------------------------------------------------------------------- */

:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

.btn:focus-visible,
.card:focus-visible,
.field__control:focus-visible { outline-offset: 2px; }

.skip-link {
  position: absolute;
  top: var(--space-s);
  left: var(--space-s);
  z-index: var(--z-toast);
  padding: var(--space-xs) var(--space-m);
  background-color: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-s);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--space-l)));
  transition: transform var(--dur-base) var(--ease-out);
}

.skip-link:focus-visible {
  transform: translateY(0);
  color: var(--paper);
}


/* --------------------------------------------------------------------------
   8. LAYOUT
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: 58rem; }
.container--wide   { max-width: 90rem; }

.section {
  counter-increment: section;
  padding-block: var(--space-section);
  position: relative;
}

.section--tight { padding-block: calc(var(--space-section) * 0.6); }
.section--flush-top { padding-block-start: 0; }

/* Grid de 12 columnas: la asimetría se compone aquí, no con márgenes sueltos */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
}

.grid--rows-tight { row-gap: var(--space-m); }

/* Por defecto todo ocupa el ancho completo en móvil */
[class*="col-"] { grid-column: 1 / -1; }

@media (min-width: 48rem) {
  /* Se resetea el start para que `.start-*` pueda actuar sin que la
     abreviatura `grid-column` lo pise. El ancho se controla solo con el end. */
  [class*="col-"] { grid-column: auto / span 12; }

  .col-1  { grid-column-end: span 1;  }
  .col-2  { grid-column-end: span 2;  }
  .col-3  { grid-column-end: span 3;  }
  .col-4  { grid-column-end: span 4;  }
  .col-5  { grid-column-end: span 5;  }
  .col-6  { grid-column-end: span 6;  }
  .col-7  { grid-column-end: span 7;  }
  .col-8  { grid-column-end: span 8;  }
  .col-9  { grid-column-end: span 9;  }
  .col-10 { grid-column-end: span 10; }
  .col-11 { grid-column-end: span 11; }
  .col-12 { grid-column-end: span 12; }

  .start-2 { grid-column-start: 2; }
  .start-3 { grid-column-start: 3; }
  .start-4 { grid-column-start: 4; }
  .start-5 { grid-column-start: 5; }
  .start-6 { grid-column-start: 6; }
  .start-7 { grid-column-start: 7; }
  .start-8 { grid-column-start: 8; }
}

/* Ritmo vertical por owl selector — evita márgenes huérfanos */
.stack > * + * { margin-block-start: var(--flow, var(--space-m)); }
.stack-xs  { --flow: var(--space-2xs); }
.stack-s   { --flow: var(--space-s);   }
.stack-m   { --flow: var(--space-m);   }
.stack-l   { --flow: var(--space-l);   }
.stack-xl  { --flow: var(--space-xl);  }

/* Grupo horizontal que envuelve con gracia */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap, var(--space-s));
}

.cluster--between { justify-content: space-between; }
.cluster--gap-xs  { --gap: var(--space-2xs); }
.cluster--gap-m   { --gap: var(--space-m); }
.cluster--gap-l   { --gap: var(--space-l); }

.rule {
  height: 1px;
  background-color: var(--border);
  border: 0;
}

.rule--accent {
  height: 2px;
  width: 2.5rem;
  background-color: var(--accent);
}


/* --------------------------------------------------------------------------
   9. BOTONES
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-border: var(--border);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 2.875rem;               /* > 24px de objetivo táctil (2.5.8)   */
  padding: 0.75rem 1.375rem;
  background-color: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-s);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-normal);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

.btn:active { transform: translateY(1px); }

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}

.btn--primary {
  --btn-bg: var(--accent);
  --btn-fg: var(--white);
  --btn-border: var(--accent);
  box-shadow: var(--shadow-xs);
}

.btn--primary:hover {
  --btn-bg: var(--accent-deep);
  --btn-border: var(--accent-deep);
  color: var(--white);
  box-shadow: var(--shadow-s);
}

.btn--solid {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  --btn-border: var(--ink);
}

.btn--solid:hover {
  --btn-bg: var(--ink-700);
  --btn-border: var(--ink-700);
  color: var(--paper);
}

.btn--outline:hover {
  --btn-border: var(--fg);
  background-color: color-mix(in srgb, var(--fg) 4%, transparent);
  color: var(--fg);
}

.btn--ghost {
  --btn-border: transparent;
  padding-inline: var(--space-s);
}

.btn--ghost:hover {
  background-color: color-mix(in srgb, var(--fg) 5%, transparent);
  color: var(--fg);
}

.btn--lg { min-height: 3.25rem; padding: 0.9375rem 1.75rem; font-size: var(--text-base); }
.btn--sm { min-height: 2.375rem; padding: 0.5rem 1rem; font-size: var(--text-xs); }
.btn--block { width: 100%; }

.surface-ink .btn--outline { --btn-border: rgba(250, 249, 246, 0.28); }
.surface-ink .btn--outline:hover {
  --btn-border: var(--paper);
  background-color: rgba(250, 249, 246, 0.08);
  color: var(--paper);
}


/* --------------------------------------------------------------------------
   10. CARDS
   Jerarquía por hairline + elevación mínima. Sin sombras difusas.
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-l);
  background-color: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}

.card--interactive { cursor: pointer; }

.card--interactive:hover {
  border-color: color-mix(in srgb, var(--fg) 22%, transparent);
  box-shadow: var(--shadow-m);
  transform: translateY(-2px);
}

/* Card enlazada por completo sin anidar <a> ilegalmente */
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.card--flat { background-color: transparent; border-color: transparent; padding: 0; }
.card--pad-lg { padding: var(--space-xl); }

.card__header { margin-bottom: var(--space-m); }
.card__body   { flex: 1 1 auto; }
.card__footer { margin-top: var(--space-l); padding-top: var(--space-m); border-top: 1px solid var(--border-soft); }

/* Marca de producto: filete vertical de color en el borde izquierdo */
.card--guardix   { --brand: var(--guardix);   --brand-tint: var(--guardix-tint);   }
.card--vacunapro { --brand: var(--vacunapro); --brand-tint: var(--vacunapro-tint); }

.card--branded::before {
  content: "";
  position: absolute;
  inset-block: var(--space-l);
  inset-inline-start: -1px;
  width: 2px;
  background-color: var(--brand);
  border-radius: var(--radius-full);
  transition: inset-block var(--dur-slow) var(--ease-out);
}

.card--branded:hover::before { inset-block: var(--space-s); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: 0.25rem 0.625rem;
  background-color: var(--brand-tint, var(--accent-tint));
  color: var(--brand, var(--accent-deep));
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1.4;
}


/* --------------------------------------------------------------------------
   11. FORMULARIOS
   -------------------------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: var(--space-2xs); }

.field__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--fg);
}

.field__label .req { color: var(--accent); margin-inline-start: 0.15em; }

.field__hint { font-size: var(--text-2xs); color: var(--fg-muted); }

.field__control {
  width: 100%;
  min-height: 2.875rem;
  padding: 0.6875rem 0.875rem;
  background-color: var(--bg-raised);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  font-size: var(--text-base);
  line-height: 1.4;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  appearance: none;
}

.field__control::placeholder { color: color-mix(in srgb, var(--fg-muted) 72%, transparent); }

.field__control:hover { border-color: color-mix(in srgb, var(--fg) 28%, transparent); }

.field__control:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
  outline: none;
}

textarea.field__control { min-height: 8rem; resize: vertical; }

select.field__control {
  padding-inline-end: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%235A6169' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  cursor: pointer;
}

/* Estado de error */
.field--invalid .field__control,
.field__control[aria-invalid="true"] {
  border-color: var(--danger);
  background-color: var(--danger-tint);
}

.field--invalid .field__control:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
}

.field__error {
  display: none;
  align-items: flex-start;
  gap: var(--space-3xs);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  color: var(--danger);
}

.field--invalid .field__error { display: flex; }

/* Consentimiento — nunca premarcado (Ley 21.719) */
.checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xs);
  align-items: start;
  cursor: pointer;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
}

.checkbox input[type="checkbox"] {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin-block-start: 0.125rem;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Honeypot anti-spam: fuera de pantalla, no `display:none` */
.hp-field {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  padding: var(--space-s) var(--space-m);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  font-size: var(--text-sm);
}

.form-status--success { border-color: var(--success); background-color: var(--vacunapro-tint); color: var(--success); }
.form-status--error   { border-color: var(--danger);  background-color: var(--danger-tint);    color: var(--danger); }


/* --------------------------------------------------------------------------
   12. UTILIDADES DE ACCESIBILIDAD Y ESTADO
   -------------------------------------------------------------------------- */

.visually-hidden:not(:focus):not(:active) {
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

[hidden] { display: none !important; }

.no-scroll { overflow: hidden; }

/* Sprite SVG: se oculta sin `display:none`, que en algunos motores
   impide que <use> resuelva los <symbol>. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 640ms linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Aparición al entrar en viewport — la activa reveal.js con IntersectionObserver */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}

.reveal.is-visible { opacity: 1; transform: none; }


/* --------------------------------------------------------------------------
   13. PREFERENCIAS DEL USUARIO
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal { opacity: 1; transform: none; }
}

@media (prefers-contrast: more) {
  :root { --border: #9A968C; --fg-muted: #3D434A; }
}


/* --------------------------------------------------------------------------
   14. CABECERA Y NAVEGACIÓN
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

.site-header.is-scrolled {
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-xs);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: var(--header-height);
}

/* Wordmark tipográfico. Reemplazar por el SVG de marca cuando esté disponible. */
.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.logo__mark {
  font-size: 1.375rem;
  font-weight: var(--weight-bold);
  letter-spacing: -0.045em;
  line-height: 1;
}

.logo__mark::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-inline-start: 3px;
  border-radius: 50%;
  background-color: var(--accent);
  vertical-align: 0.1em;
}

.logo__sub {
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.logo--inverse { color: var(--paper); }

@media (max-width: 26.25rem) { .logo__sub { display: none; } }

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-l);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  position: relative;
  display: inline-block;
  padding-block: 0.375rem;
  color: var(--fg);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__link:hover { color: var(--accent); }

.header__actions { display: flex; align-items: center; gap: var(--space-s); }

/* Botón hamburguesa */
.nav-toggle {
  display: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-inline-end: -0.5rem;
  border-radius: var(--radius-s);
  cursor: pointer;
  color: var(--fg);
}

.nav-toggle__bars { display: block; width: 22px; height: 14px; position: relative; }

.nav-toggle__bars::before,
.nav-toggle__bars::after,
.nav-toggle__bars span {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background-color: currentColor;
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}

.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars span    { top: 6.25px; }
.nav-toggle__bars::after  { bottom: 0; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span    { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-6.25px) rotate(-45deg); }

/* El CTA duplicado del panel móvil no debe aparecer en escritorio */
@media (min-width: 62rem) { .site-nav > .btn { display: none; } }

@media (max-width: 61.99rem) {
  .nav-toggle { display: grid; }

  /* Cerrado por defecto; `nav.js` alterna data-open */
  .site-nav {
    display: none;
    position: fixed;
    inset: var(--header-height) 0 0 0;
    z-index: var(--z-overlay);
    padding: var(--space-l) var(--gutter) var(--space-2xl);
    background-color: var(--paper);
    border-top: 1px solid var(--border);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .site-nav[data-open="true"] { display: block; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }

  .nav__item { border-bottom: 1px solid var(--border-soft); }

  .nav__link {
    display: block;
    padding-block: var(--space-s);
    font-size: var(--text-md);
  }

  .nav__link::after { display: none; }

  .site-nav .btn { width: 100%; margin-top: var(--space-l); }

  .header__actions .btn { display: none; }
}


/* --------------------------------------------------------------------------
   14b. MIGAS DE PAN
   El marcado lo genera breadcrumb.js. En el Home no se renderiza nada.
   -------------------------------------------------------------------------- */

[data-breadcrumb] { font-size: var(--text-sm); }

[data-breadcrumb][hidden] { display: none; }

[data-breadcrumb] ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-breadcrumb] li {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--fg-muted);
}

[data-breadcrumb] li + li::before {
  content: "/";
  color: var(--border);
}

[data-breadcrumb] a { color: var(--fg-muted); text-decoration: none; }
[data-breadcrumb] a:hover { color: var(--link); text-decoration: underline; }
[data-breadcrumb] [aria-current="page"] { color: var(--fg); font-weight: var(--weight-medium); }


/* --------------------------------------------------------------------------
   14c. PROSA — documentos legales y artículos
   -------------------------------------------------------------------------- */

.prose { max-width: 46rem; }

.prose > * + * { margin-block-start: var(--space-m); }

.prose h2 {
  margin-block-start: var(--space-2xl);
  padding-block-start: var(--space-m);
  border-block-start: 1px solid var(--border);
  font-size: var(--text-xl);
}

.prose h3 {
  margin-block-start: var(--space-xl);
  font-size: var(--text-lg);
}

.prose p,
.prose li { color: var(--fg-muted); }

.prose strong { color: var(--fg); font-weight: var(--weight-semi); }

.prose ul,
.prose ol { padding-inline-start: var(--space-m); }

.prose li + li { margin-block-start: var(--space-2xs); }

.prose li::marker { color: var(--accent); }

.prose a { font-weight: var(--weight-medium); }

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.prose th,
.prose td {
  padding: var(--space-xs);
  text-align: start;
  vertical-align: top;
  border-block-end: 1px solid var(--border);
}

.prose th {
  font-weight: var(--weight-semi);
  color: var(--fg);
  border-block-end-width: 2px;
}

.prose td { color: var(--fg-muted); }

/* Aviso destacado dentro de un documento legal */
.callout {
  padding: var(--space-m);
  background-color: var(--accent-tint);
  border-inline-start: 2px solid var(--accent);
  border-radius: var(--radius-xs);
  font-size: var(--text-sm);
}

.callout p { color: var(--fg); }
.callout > * + * { margin-block-start: var(--space-2xs); }

/* Cabecera de página interna */
.page-header {
  padding-block: calc(2.5rem + 2 * var(--fluid)) calc(2rem + 1.5 * var(--fluid));
  border-block-end: 1px solid var(--border);
}


/* --------------------------------------------------------------------------
   15. HERO
   -------------------------------------------------------------------------- */

.hero {
  /* Abajo usa la misma medida que una sección: así el salto al primer
     bloque de contenido es idéntico al del resto de la página. */
  padding-block: calc(2.75rem + 2.25 * var(--fluid)) var(--space-section);
  border-bottom: 1px solid var(--border);
}

.hero__meta {
  padding-inline-start: var(--space-m);
  border-inline-start: 1px solid var(--border);
}

@media (max-width: 47.99rem) {
  .hero__meta {
    margin-top: var(--space-l);
    padding-inline-start: 0;
    padding-block-start: var(--space-m);
    border-inline-start: 0;
    border-block-start: 1px solid var(--border);
  }
}

.hero__actions { margin-top: var(--space-l); }


/* --------------------------------------------------------------------------
   16. SERVICIOS
   -------------------------------------------------------------------------- */

.service { padding-top: var(--space-m); border-top: 2px solid var(--fg); }

.service__title { margin-bottom: var(--space-xs); }

.capabilities { list-style: none; margin: var(--space-m) 0 0; padding: 0; }

.capabilities li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xs);
  align-items: baseline;
  padding-block: var(--space-xs);
  border-top: 1px solid var(--border-soft);
  font-size: var(--text-sm);
}

.capabilities li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--accent);
  transform: translateY(-0.15em);
}


/* --------------------------------------------------------------------------
   17. PRODUCTOS
   -------------------------------------------------------------------------- */

.product__features { list-style: none; margin: var(--space-m) 0 0; padding: 0; }

.product__features li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xs);
  padding-block: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

.product__features li::before {
  content: "";
  width: 14px;
  height: 1px;
  margin-top: 0.72em;
  background-color: var(--brand, var(--accent));
}

.product__shot {
  margin-top: var(--space-l);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background-color: var(--brand-tint);
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.product__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

.product__shot--empty { font-size: var(--text-2xs); color: var(--fg-muted); letter-spacing: var(--tracking-wide); text-transform: uppercase; }


/* --------------------------------------------------------------------------
   18. PANEL DE CONFIANZA
   -------------------------------------------------------------------------- */

.stat { padding-top: var(--space-m); border-top: 1px solid var(--border); }

.stat__value {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--accent-bright);
}

.stat__label { margin-top: var(--space-2xs); }
.stat__note { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--fg-muted); }


/* --------------------------------------------------------------------------
   19. METODOLOGÍA
   -------------------------------------------------------------------------- */

.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; }

/* Cada paso tiene TRES piezas: el número (::before), el título y el texto.
   La colocación es explícita a propósito: con flujo automático el párrafo
   caería en la columna estrecha del número y quedaría ilegible. */
.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  column-gap: var(--space-m);
  row-gap: var(--space-2xs);
  padding-block: var(--space-l);
  border-top: 1px solid var(--border);
}

.step:last-child { border-bottom: 1px solid var(--border); }

.step::before {
  content: counter(step, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1;
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-wide);
  color: var(--accent);
  line-height: 1.6;
}

.step__title {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}

/* Móvil: el texto ocupa el ancho completo bajo el número y el título. */
.step > p {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-block-start: var(--space-2xs);

  /* Justificado con partición de palabras. `hyphens: auto` usa el
     diccionario de es-CL declarado en <html lang>: sin él, la
     justificación abriría huecos irregulares entre palabras. */
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

@media (min-width: 62rem) {
  .step {
    grid-template-columns: 3.5rem 18rem 1fr;
    row-gap: 0;
    align-items: start;
  }

  .step__title { align-self: start; }

  /* Escritorio: número, título y texto en una sola fila. */
  .step > p {
    grid-column: 3;
    grid-row: 1;
    margin-block-start: 0;
  }
}


/* --------------------------------------------------------------------------
   20. FORMULARIO — DISPOSICIÓN
   -------------------------------------------------------------------------- */

.form-grid {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-grid > .field--full { grid-column: 1 / -1; }

@media (max-width: 35.99rem) { .form-grid { grid-template-columns: 1fr; } }

.form__footer { margin-top: var(--space-l); display: grid; gap: var(--space-m); }


/* --------------------------------------------------------------------------
   21. PIE DE PÁGINA
   -------------------------------------------------------------------------- */

.site-footer { padding-block: calc(2.5rem + var(--fluid)) var(--space-l); }

.footer__heading {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: var(--space-s);
}

.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }

.footer__list a { color: var(--fg); text-decoration: none; font-size: var(--text-sm); }
.footer__list a:hover { color: var(--accent-bright); }

.footer__bottom {
  margin-top: var(--space-xl);
  padding-top: var(--space-m);
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-l);
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-2xs);
  color: var(--fg-muted);
}


/* --------------------------------------------------------------------------
   22. BANNER DE COOKIES (comportamiento en Fase 3)
   -------------------------------------------------------------------------- */

.cookie-banner {
  position: fixed;
  z-index: var(--z-modal);
  inset-inline: var(--space-s);
  inset-block-end: var(--space-s);
  max-width: 34rem;
  margin-inline: auto;
  padding: var(--space-m);
  background-color: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-l);
  font-size: var(--text-sm);
}

.cookie-banner[hidden] { display: none; }

.cookie-banner__title { font-size: var(--text-base); margin-bottom: var(--space-2xs); }

.cookie-banner__actions {
  margin-top: var(--space-m);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.cookie-banner__actions .btn { flex: 1 1 auto; }


/* --------------------------------------------------------------------------
   23. IMPRESIÓN
   -------------------------------------------------------------------------- */

@media print {
  .site-header, .site-footer, .cookie-banner, .btn, .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}