/* iwp-header.css — la cabecera de la portada en las páginas interiores.
   Orden: itw-page.css → itw-shell.css → iwp-bundle.css → ESTE.

   Orden del usuario (2026-09-22): «el header debe ser el mismo de inicio en
   toda la web». La cabecera sale de IWP.header() del sistema (iwp-bundle.css,
   todo con clases .iwp-*); aquí van solo sus variables y el menú de móvil.

   NO se carga iwp-tokens.css entero a propósito: define .eyebrow y .label
   globales, y las páginas interiores ya usan esas clases con su propio
   estilo (87 usos). De tokens y paleta solo entran las variables.
   Copiado de iwp-tokens.css / iwp-palette.css / iwp-home.css: si cambian allí,
   hay que regenerar este fichero. */

/* ---------- Variables (iwp-tokens.css) ---------- */
:root {
  --font-sans: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  --surface: #ffffff;
  --surface-sunken: #f2faf6;
  --surface-raised: #ffffff;
  --surface-mint: #e4f6ec;
  --surface-ink: #1d1f1f;
  --surface-brand: #eef1fc;
  --surface-gold: #f7f4dc;
  --surface-night: #0d0f0f;
  --ink: #14191b;
  --ink-muted: #4b5a55;
  --ink-subtle: #5f6d68;
  --on-ink: #ffffff;
  --on-brand: #ffffff;
  --on-ink-muted: #c3ccc7;
  --brand: #2f357f;
  --brand-bright: #2b6fa8;
  --mint-ink: #0f5b39;
  --mint-on-night: #74dcac;
  --gold-ink: #6b5618;
  --action: #1d1f1f;
  --on-action: #ffffff;
  --line: #e2eae5;
  --line-strong: #7c8c86;
  --line-on-ink: #3a3d3d;
  --focus: #2b6fa8;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 40px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(20, 25, 27, 0.04);
  --shadow-menu: 0 18px 48px rgba(20, 25, 27, 0.12);
  --shadow-lift: 0 8px 24px rgba(20, 25, 27, 0.08);
}

/* ---------- Paleta de la web (iwp-palette.css) ---------- */
:root {
  /* Superficies */
  --surface: #ffffff;                    /* --c-surface */
  --surface-sunken: #f5f7fa;             /* --c-bg, la banda alterna de la web */
  --surface-raised: #ffffff;             /* --c-surface */
  --surface-mint: #d9f5e9;               /* --c-green-tint */
  --surface-ink: #1d1d1f;                /* --c-ink */
  --surface-brand: #eef0fc;              /* --c-primary-tint */
  --surface-gold: #fdf1dc;               /* --c-amber-tint */

  /* Las escenas nocturnas de la portada usan el negro que la web ya tiene en
     sus bloques oscuros, no el #0d0f0f del sistema. */
  --surface-night: #1d1d1f;              /* --c-ink */

  /* Tinta */
  --ink: #1d1d1f;                        /* --c-ink */
  --ink-muted: #515154;                  /* --c-text */
  --ink-subtle: #6e6e73;                 /* --c-text-muted */
  --on-ink: #f5f5f7;                     /* --c-on-ink */
  --on-ink-muted: #a1a1a6;               /* --c-on-ink-soft */
  --on-brand: #ffffff;

  /* Marca. El morado #667eea no se usa para texto: sobre blanco da 3,3:1.
     Para eso la web ya tiene --c-primary-ink, que su propio CSS describe como
     "variante accesible de la marca para texto pequeño sobre claro". */
  --brand: #4c56c0;                      /* --c-primary-ink */
  --brand-bright: #764ba2;               /* --c-primary-deep */

  /* Estados */
  --mint-ink: #076f4c;                   /* --c-green-ink */
  --mint-on-night: #34d399;              /* --c-green-bright */
  --gold-ink: #8a5a08;                   /* --c-amber-ink */

  /* Acción. El relleno plano es el respaldo; el degradado de la marca lo pone
     iwp-home.css sobre .iwp-btn--primary. */
  --action: #4c56c0;                     /* --c-primary-ink */
  --on-action: #ffffff;

  /* Líneas */
  --line: rgba(29, 29, 31, .10);         /* --c-border */
  --line-on-ink: rgba(255, 255, 255, .12); /* --c-border-on-ink */

  /* line-strong delimita controles y el sistema le exige 3:1. El
     --c-border-strong de la web es rgba(29,29,31,.16), que sobre blanco queda
     en 1,3:1 y no sirve para esto. Este gris sí: 3,81:1 sobre blanco y 3,55:1
     sobre la banda. */
  --line-strong: #82828a;

  --focus: #4c56c0;                      /* --c-primary-ink */
}

:where(.iwp-root) :where(h1, h2, h3, h4, h5, h6, p, figure, figcaption, blockquote, ul, ol, dl) { margin: 0; }
:where(.iwp-root) :where(figure) { padding: 0; }

/* ---------- Botón primario con la marca (iwp-home.css) ---------- */
.iwp-btn--primary {
  background: linear-gradient(135deg, #4c56c0 0%, #764ba2 100%);
  color: #ffffff;
  border-color: transparent;
}

/* Sobre la escena nocturna el botón sigue siendo blanco, como manda el
   sistema. Va después del degradado para no perder esa regla. */
.iwp-header--night .iwp-btn--primary {
  background: #ffffff;
  color: #1d1d1f;
}

/* Página actual sobre la cabecera nocturna: el --brand da 2,6:1 sobre negro.
   En la portada no hay página marcada; en las interiores sí. */
.iwp-header--night .iwp-nav__link[aria-current="page"] { color: #ffffff; background: rgba(255, 255, 255, .1); }

/* itw-page.css pinta TODO <a> en morado al pasar el ratón (a:hover, 0,1,1),
   que gana a las clases del sistema (0,1,0). Dentro de la cabecera se fija el
   color de la portada, medido enlace a enlace en ella. */
.iwp-site-top .iwp-wordmark:hover { color: inherit; }
.iwp-header--night .iwp-nav__link:hover { color: var(--on-ink); }
.iwp-site-top .iwp-header:not(.iwp-header--night) .iwp-nav__link:hover { color: var(--ink); }
.iwp-site-top .iwp-nav__link[aria-current="page"]:hover { color: var(--brand); }
.iwp-site-top .iwp-mega__item:hover,
.iwp-site-top .iwp-drawer__link:hover,
.iwp-site-top .iwp-btn--secondary:hover { color: var(--ink); }
.iwp-site-top .iwp-mega__asidelink:hover,
.iwp-site-top .iwp-drawer__sub:hover { color: var(--ink-muted); }
.iwp-site-top .iwp-btn--primary:hover { color: #ffffff; }
.iwp-header--night .iwp-btn--primary:hover { color: #1d1d1f; }
.iwp-header--night .iwp-btn--secondary:hover { color: var(--on-ink); }


/* ---------- Menú de móvil ---------- */

.iwp-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.iwp-header--night .iwp-burger { color: var(--on-ink); border-color: rgba(255, 255, 255, .28); }
.iwp-burger svg { width: 20px; height: 20px; }
.iwp-burger__close { display: none; }
.iwp-burger[aria-expanded="true"] .iwp-burger__open { display: none; }
.iwp-burger[aria-expanded="true"] .iwp-burger__close { display: block; }

.iwp-drawer {
  display: none;
  padding: var(--space-6) 0 var(--space-8);
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.iwp-header--night .iwp-drawer { background: var(--surface-night); border-top-color: rgba(255, 255, 255, .1); }
.iwp-drawer[hidden] { display: none; }

.iwp-drawer__list { display: grid; gap: var(--space-1); margin: 0 0 var(--space-6); padding: 0; list-style: none; }

.iwp-drawer__link {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}

.iwp-header--night .iwp-drawer__link { color: var(--on-ink); }
.iwp-drawer__link:hover { background: var(--surface-sunken); }
.iwp-header--night .iwp-drawer__link:hover { background: rgba(255, 255, 255, .1); }
.iwp-drawer__sub { font-size: 15px; color: var(--ink-muted); padding-left: var(--space-8); }
.iwp-header--night .iwp-drawer__sub { color: var(--on-ink-muted); }
.iwp-drawer__actions { display: grid; gap: var(--space-3); }

@media (max-width: 980px) {
  .iwp-nav,
  .iwp-header__actions { display: none; }

  .iwp-burger { display: inline-flex; }

  .iwp-drawer:not([hidden]) { display: block; }

  /* El mega-menú de escritorio no se abre nunca en móvil: su contenido
     vive dentro del cajón. */
  .iwp-mega { display: none !important; }
}

/* Logo original (ITW_Logo.webp) en la cabecera. Orden del usuario 2026-09-22:
   «el logo debe ser el original de antes». Va sobre la cabecera blanca: en la
   nocturna el marino y el «to» negro no se leían. */
.iwp-wordmark--logo img { display: block; height: 42px; width: auto; }
/* Logo de la cabecera más grande (orden del usuario 23-sep); el del pie se queda en 42px. */
.iwp-header .iwp-wordmark--logo img { height: 54px; }
@media (max-width: 640px) { .iwp-header .iwp-wordmark--logo img { height: 44px; } }
/* Con AutoRedes en la barra (23-sep) no cabe entre 981 y 1100 px: se aprietan
   los enlaces y el logo en ese tramo; por debajo manda el cajón. */
.iwp-nav__link { white-space: nowrap; }
@media (min-width: 981px) and (max-width: 1100px) {
  .iwp-header .iwp-wordmark--logo img { height: 40px; }
  .iwp-nav__link { padding-left: 8px; padding-right: 8px; }
  .iwp-header__actions { gap: 8px; }
}

/* Móvil (23-sep): botón de WhatsApp junto al menú y maqueta del panel legible. */
.iwp-header__wa { display: none; }
@media (max-width: 980px) {
  .iwp-header__wa {
    display: inline-flex; align-items: center; gap: 6px;
    height: 44px; margin-left: auto; padding: 0 14px;
    border-radius: var(--radius-sm); background: #25d366; color: #ffffff;
    font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
  }
  .iwp-header__wa:hover { background: #1ebe5b; color: #ffffff; }
  .iwp-header__wa svg { width: 18px; height: 18px; }
  .iwp-header__wa + .iwp-burger { margin-left: calc(8px - var(--space-8)); }
}
/* Logo más grande en móvil (orden del usuario 23-sep, noche): crece con el ancho
   hasta 50px. El hueco de 32px de la barra baja a 12px; el logo ocupa el resto
   que dejan WhatsApp + menú (ancho - 233px, con 8px de margen), a su proporción
   146:42. Con ≤374px WhatsApp va solo con icono y queda más sitio. */
@media (max-width: 640px) {
  .iwp-header__bar { gap: 12px; }
  .iwp-header .iwp-wordmark--logo img {
    height: clamp(40px, calc((100vw - 233px) * .2877), 50px);
    max-width: 100%; object-fit: contain; object-position: left center;
  }
  .iwp-header__wa { padding: 0 12px; font-size: 13px; }
  .iwp-header__wa + .iwp-burger { margin-left: -4px; }
}
@media (max-width: 374px) {
  .iwp-header__wa { width: 44px; padding: 0; justify-content: center; }
  .iwp-header__wa span { display: none; }
  .iwp-header .iwp-wordmark--logo img { height: clamp(40px, calc((100vw - 164px) * .2877), 50px); }
}
@media (max-width: 600px) {
  .iwp-ui { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .iwp-ui__side { display: none; }
  .iwp-ui__chrome { padding: 8px 10px; gap: 6px; }
  .iwp-ui__dot { width: 7px; height: 7px; }
  .iwp-ui__url { font-size: 10px; padding: 3px 8px; }
  .iwp-ui__main { padding: 14px 12px; }
  .iwp-ui__h { font-size: 14px; }
  .iwp-ui__sub { font-size: 11px; margin-bottom: 12px; }
  .iwp-ui__cards { gap: 6px; margin-bottom: 12px; }
  .iwp-ui__card { padding: 8px; }
  .iwp-ui__k { font-size: 8px; letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .iwp-ui__v { font-size: 16px; }
  .iwp-ui__row { grid-template-columns: 36px minmax(0, 1fr) 22px; gap: 8px; padding: 8px 10px; font-size: 11px; }
  .iwp-ui__t { font-size: 10px; }
  .iwp-ui__ok { font-size: 9px; letter-spacing: .3px; }
  .iwp-mac__screen { border-width: 8px; border-bottom-width: 12px; border-radius: 14px; }
  .iwp-mac__base { width: 104%; margin-left: -2%; height: 9px; }
}
/* comprar.html: los hijos de .contact-grid (grid de 1fr) no encogían por debajo de su contenido y desbordaban a 320-360 px. */
.contact-grid > * { min-width: 0; }
/* reCAPTCHA mide 304 px fijos: en móviles de 320-340 px se escala para no desbordar. */
@media (max-width: 340px) { .g-recaptcha { transform: scale(.86); transform-origin: left top; height: 68px; } }