/* ==========================================================================
   PreventGas — base.css
   Tokens, reset, tipografía y utilidades. Se carga en todas las páginas.
   ========================================================================== */

/* -------------------------------------------------- tipografías
   Las cuatro familias viven en assets/fonts/ y no en Google Fonts. Son los
   mismos archivos que servía Google (latin y latin-ext, woff2), bajados una
   vez: así la política de seguridad del sitio puede seguir siendo 'self',
   la página no depende de un tercero y el navegador no encadena dos pedidos
   más antes de poder pintar el texto. IBM Plex Sans es un archivo variable:
   los tres pesos salen del mismo woff2.
   Si alguna vez cambian las familias, se rehace con el mismo criterio. */

/* Barlow Condensed */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/barlow-condensed-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/barlow-condensed-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: '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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@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;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/barlow-condensed-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/barlow-condensed-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;
}
/* Bebas Neue */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/bebas-neue-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/bebas-neue-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;
}
/* IBM Plex Mono */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-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;
}
/* IBM Plex Sans */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-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;
}

/* -------------------------------------------------- transición entre páginas
   API de View Transitions en su forma multipágina: el navegador hace el cruce
   entre documentos sin una línea de JavaScript. Donde no está soportada, la
   navegación es la de siempre. */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: salirPagina .28s var(--ease) both; }
::view-transition-new(root) { animation: entrarPagina .34s var(--ease) both; }

@keyframes salirPagina  { to   { opacity: 0; transform: translateY(-8px); } }
@keyframes entrarPagina { from { opacity: 0; transform: translateY(12px); } }

/* El encabezado no participa del cruce: se mantiene quieto entre páginas. */
.nav { view-transition-name: encabezado; }
::view-transition-group(encabezado) { animation-duration: .001s; }


:root {
  /* Identidad — no modificar */
  --bg:         #f8f6f2;
  --surface:    #f2ede4;
  --card:       #fff;
  --ink:        #141210;
  --fg:         #2a2520;
  /* Apenas más oscuro que el #7a7060 del brief: aquel daba 4.17 sobre la
     superficie crema y no llegaba al mínimo de contraste. Este da 4.62. */
  --muted:      #73695a;
  --accent:     #f5c400;
  --accent-fg:  #141210;
  --border:     rgba(20, 18, 16, .1);
  --border-2:   rgba(20, 18, 16, .22);

  /* Tipografías por rol */
  --display: 'Bebas Neue', 'Barlow Condensed', Impact, sans-serif;
  --head:    'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Escala tipográfica */
  --fs-hero:  clamp(2.9rem, 7.2vw, 6.6rem);
  --fs-h2:    clamp(2rem, 4.6vw, 3.4rem);
  --fs-h3:    clamp(1.35rem, 2.4vw, 1.9rem);
  --fs-lead:  clamp(1.02rem, 1.5vw, 1.22rem);
  --fs-body:  1rem;
  --fs-small: .875rem;
  --fs-micro: .72rem;

  /* Ritmo */
  --gap:      1.5rem;
  --pad-sec:  clamp(3.5rem, 7vw, 6rem);
  --maxw:     1280px;
  --radius:   2px;

  --shadow-1: 0 1px 2px rgba(20,18,16,.05), 0 2px 8px rgba(20,18,16,.04);
  --shadow-2: 0 2px 4px rgba(20,18,16,.06), 0 12px 32px rgba(20,18,16,.10);
  --ease:     cubic-bezier(.22, .61, .36, 1);
}

/* -------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;      /* sin inflado de fuente en horizontal */
  scroll-behavior: smooth;
  /* El destello gris que pinta el navegador al tocar es la señal más fuerte de
     "esto es una web". Se saca y cada control responde con su propio :active. */
  -webkit-tap-highlight-color: transparent;
}

/* Controles: sin demora de 300 ms al tocar, y el texto de un botón no se
   selecciona al dejar el dedo apretado. El texto de contenido sí, claro. */
button, a, [role="button"], summary, label {
  touch-action: manipulation;
}
button, [role="button"], summary {
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}

/* En iOS, un input con fuente menor a 16 px hace que la página se acerque sola
   al enfocarlo, y no vuelve. Se arregla el tamaño, no se desactiva el zoom. */
@media (pointer: coarse) {
  /* Los selectores de clase del buscador y de los formularios ganan por
     especificidad, así que se nombran. */
  /* Con html adelante gana por especificidad, sin importar que las hojas de
     cada página carguen después de esta. */
  html input, html textarea, html select,
  html .buscador input, html .chat__form input,
  html .form input, html .form textarea, html .form select {
    font-size: 16px;
  }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 var(--fs-body)/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; line-height: 1.04; color: var(--ink); text-wrap: balance; }
p  { margin: 0 0 1em; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
hr { border: 0; border-top: 1px solid var(--border); margin: 0; }

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

.skip-link {
  position: absolute; left: 0; top: -100%;
  background: var(--ink); color: var(--bg);
  padding: .75rem 1.25rem; z-index: 200;
  font: 600 var(--fs-small)/1 var(--body);
}
.skip-link:focus { top: 0; }

/* -------------------------------------------------- layout */
.wrap {
  width: 100%; max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 2.75rem);
}
.section { padding-block: var(--pad-sec); }
/* Dos secciones seguidas con el mismo fondo no separan nada entre sí: el
   padding de abajo de una más el de arriba de la otra dejaba un vacío de
   hasta 15rem. La segunda arranca con menos aire. */
.section--surface + .section--surface,
.section--ink + .section--ink,
.section:not(.section--surface):not(.section--ink) + .section:not(.section--surface):not(.section--ink) {
  padding-top: calc(var(--pad-sec) * .45);
}
.section--surface { background: var(--surface); }
.section--ink { background: var(--ink); color: #cfc7ba; }
.section--ink h2, .section--ink h3 { color: var(--bg); }

/* -------------------------------------------------- tipografía */
.display {
  font: 400 var(--fs-hero)/.86 var(--display);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
}
.h2 {
  font: 700 var(--fs-h2)/1 var(--head);
  letter-spacing: .01em;
  text-transform: uppercase;
}
.h3 { font: 600 var(--fs-h3)/1.12 var(--head); letter-spacing: .01em; }
.lead { font-size: var(--fs-lead); color: var(--muted); max-width: 62ch; }

/* Eyebrow: rótulo con marca de escala. Se usa para ubicar la sección,
   no para decorar — cada uno nombra un contenido real. */
.eyebrow {
  display: flex; align-items: center; gap: .6rem;
  font: 500 var(--fs-micro)/1 var(--mono);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.15rem;
}
.eyebrow::before {
  content: ''; width: 26px; height: 8px; flex: none;
  background:
    linear-gradient(var(--ink) 0 0) 0 100% / 1px 8px no-repeat,
    linear-gradient(var(--ink) 0 0) 8px 100% / 1px 5px no-repeat,
    linear-gradient(var(--ink) 0 0) 16px 100% / 1px 5px no-repeat,
    linear-gradient(var(--accent) 0 0) 24px 100% / 2px 8px no-repeat;
}
.section--ink .eyebrow { color: #9d9484; }
.section--ink .eyebrow::before {
  background:
    linear-gradient(var(--bg) 0 0) 0 100% / 1px 8px no-repeat,
    linear-gradient(#6f6858 0 0) 8px 100% / 1px 5px no-repeat,
    linear-gradient(#6f6858 0 0) 16px 100% / 1px 5px no-repeat,
    linear-gradient(var(--accent) 0 0) 24px 100% / 2px 8px no-repeat;
}

/* -------------------------------------------------- botones */
.btn {
  --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--ink);
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.6rem;
  background: var(--btn-bg); color: var(--btn-fg);
  /* Cápsula y no rectángulo: con el radio de 2 px del resto del sitio y un
     borde de 1,5 px en negro, el botón se leía como el de un cuadro de
     diálogo viejo. El tipo sigue siendo el mismo, condensado y en mayúsculas;
     lo único que cambia es el contorno. El radio chico se queda donde
     corresponde: fichas, chapas y campos. */
  border: 1.5px solid var(--btn-bd); border-radius: 999px;
  font: 600 var(--fs-small)/1 var(--body);
  letter-spacing: .06em; text-transform: uppercase;
  transition: background .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .18s var(--ease);
}
.btn:active { transform: translateY(0) scale(.985); }
.btn--primary { --btn-bg: var(--accent); --btn-fg: var(--accent-fg); --btn-bd: var(--accent); }
.btn--ghost { --btn-bd: var(--border-2); --btn-fg: var(--muted); }
.btn--wa { --btn-bg: #25d366; --btn-bd: #25d366; --btn-fg: #08260f; }
.btn[disabled] { opacity: .55; pointer-events: none; }

/* -------------------------------------------------- chips de gas
   La fórmula química es el dato que ordena el catálogo: se muestra
   en mono, igual que en la pantalla de los equipos. */
.gaschip {
  display: inline-flex; align-items: center;
  padding: .28rem .5rem;
  border: 1px solid var(--border-2); border-radius: var(--radius);
  background: var(--bg);
  font: 500 var(--fs-micro)/1 var(--mono);
  letter-spacing: .04em; color: var(--fg);
  white-space: nowrap;
}
.gaschip--alarm { border-color: var(--accent); background: var(--accent); color: var(--accent-fg); }
.gaschips { display: flex; flex-wrap: wrap; gap: .35rem; }

/* -------------------------------------------------- reveal */
/* Sin JS no se oculta nada: el contenido tiene que leerse igual. */
.js .reveal { opacity: 0; transform: translateY(22px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--delay, 0ms);
}

/* Donde el navegador sabe animar contra el scroll, la entrada la maneja él:
   sigue el dedo, no se traba y no depende de un observador en JavaScript.
   main.js detecta el soporte y no engancha el observador en ese caso. */
@supports (animation-timeline: view()) {
  .scroll-nativo.js .reveal {
    opacity: 1; transform: none;
    /* Propiedades separadas a propósito: el atajo `animation` fija la duración
       en 0s y la animación salta directo al final. Con timeline de scroll la
       duración tiene que ser `auto` para repartirse a lo largo del recorrido. */
    animation-name: revelar;
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: view();
    /* El rango vive entero dentro de `entry`: la animación termina cuando el
       elemento terminó de entrar, sin depender de que quede scroll por delante.
       Con `cover` los bloques del final de la página no completaban nunca y se
       quedaban invisibles. */
    animation-range: entry 0% entry 72%;
  }
}
@keyframes revelar {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes acFade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }
  .scroll-nativo.js .reveal { animation-name: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* -------------------------------------------------- utilidades */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mono { font-family: var(--mono); }
/* Cifras de igual ancho: las tablas de especificaciones y los contadores no
   deben bailar al cambiar de número. */
.mono, table, [data-count] { font-variant-numeric: tabular-nums; }
.text-muted { color: var(--muted); }

/* -------------------------------------------------- hover solo con mouse
   En una pantalla táctil no hay hover: el navegador lo simula y el estilo
   queda pegado después de tocar. Estas reglas son las mismas de arriba,
   movidas acá sin cambiarles nada, para que solo corran donde hay puntero
   fino. El feedback táctil va por :active, que funciona en todo. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); }
  .btn--primary:hover { --btn-bg: var(--ink); --btn-fg: var(--accent); --btn-bd: var(--ink); }
  .btn--secondary:hover { --btn-bg: var(--ink); --btn-fg: var(--bg); }
  .btn--ghost:hover { --btn-bd: var(--ink); --btn-fg: var(--ink); }
  .btn--wa:hover { --btn-bg: #1fb457; --btn-bd: #1fb457; }
}