/*
  Base · Fisios Islas21 (demo)
  ============================
  Reset, @font-face de Poppins autoalojada, comportamiento global de scroll,
  foco visible, prefers-reduced-motion y vista de impresión.
  Requiere tokens.css cargado antes.
*/

/* -------------------------------------------------------------------
   @font-face — Poppins autoalojada, rutas relativas. NUNCA
   fonts.googleapis.com: es una invariante de este proyecto.
   ------------------------------------------------------------------- */
@font-face {
  font-family: "Poppins";
  src: url("../fuentes/poppins-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fuentes/poppins-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fuentes/poppins-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------------------------
   Respaldo métrico de Poppins — evita el CLS del intercambio de
   tipografía (FOUT). Métricas calculadas con fontTools sobre
   poppins-300.woff2 (unitsPerEm 1000, ascender 1050, descender -350,
   lineGap 100, anchura media minúscula 0.5531em) contra Arial/Helvetica
   (0.5293em). Mientras Poppins carga, este respaldo ocupa el mismo
   espacio en pantalla y el documento no salta. Va en la pila
   tipográfica justo detrás de "Poppins" (ver tokens.css).
   ------------------------------------------------------------------- */
@font-face {
  font-family: "Poppins Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 104.50%;
  ascent-override: 100.48%;
  descent-override: 33.49%;
  line-gap-override: 9.57%;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
h1, h2, h3, h4,
p,
figure,
blockquote,
dl, dd {
  margin: 0;
}

body {
  font-family: var(--fuente-base);
  font-weight: var(--peso-ligero);
  font-size: 17px;
  line-height: var(--lh-cuerpo);
  color: var(--color-tinta);
  background: var(--color-blanco);
  overflow-x: hidden;         /* red de seguridad: la maqueta no debe generar scroll horizontal */
}

/* El cuerpo va en Poppins 300 y el navegador aplica a <strong> su regla por
   defecto, `font-weight: bolder`, que sobre 300 da 400 — un peso que no está
   autoalojado. Resultado medido el 2026-09-17: diez «strong» del sitio que no
   se distinguían del texto normal. Se fija al peso medio, que sí está cargado. */
strong,
b {
  font-weight: var(--peso-medio);
}

h1, h2, h3 {
  color: var(--color-tinta);
  letter-spacing: var(--interletra-titulares);
  font-weight: var(--peso-medio);
}

img, picture, svg {
  display: block;
  max-width: 100%;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: var(--color-indigo);
  text-decoration: none;
}

a:hover {
  color: var(--color-indigo-hover);
  text-decoration: underline;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

input, textarea {
  font: inherit;
  color: inherit;
}

/* -------------------------------------------------------------------
   Contenedor compartido — 1120px, sin excepción en escritorio (§1.5).
   ------------------------------------------------------------------- */
/* Texto que solo leen los lectores de pantalla: la alternativa de un control
   que en pantalla es un icono o un punto. No se usa `display:none`, que lo
   esconde también del árbol de accesibilidad. */
.oculto-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.contenedor {
  max-width: var(--ancho-contenedor);
  margin-inline: auto;
}

/* -------------------------------------------------------------------
   Anclas — compensa cualquier elemento fijo/pegajoso al hacer scroll a
   un id. La cabecera de este sistema no es sticky, pero la barra fija
   inferior de móvil sí ocupa una franja del viewport; scroll-margin no
   corrige eso (afecta al borde superior).

   CORRECCIÓN (I5, QA final 2026-09-11): el comentario original daba por
   resuelto el hueco inferior con el padding-bottom del body, de más abajo —
   no es cierto. Ese padding solo protege el FINAL del documento; cuando el
   usuario navega con Tab, el navegador hace scroll mínimo y dejaba el
   elemento enfocado pegado al borde inferior, justo donde vive la barra
   fija (100 % tapado, medido a 360×640). El que corrige eso de verdad es
   `scroll-padding-bottom` en `html`, más abajo, junto a esa misma regla.
   ------------------------------------------------------------------- */
[id] {
  scroll-margin-block-start: var(--espacio-6);
}

/* -------------------------------------------------------------------
   Foco visible — teclado. Los artboards no dibujan estado de foco;
   esta regla es obligatoria y no depende del mockup.
   ------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: var(--ancho-foco) solid var(--color-foco);
  outline-offset: var(--desfase-foco);
}

/* -------------------------------------------------------------------
   Barra fija inferior móvil — su altura se descuenta al final del
   documento para que no tape el pie ni el bloque de cierre del aviso.
   ------------------------------------------------------------------- */
@media (max-width: 959px) {
  body {
    padding-bottom: calc(var(--alto-barra-fija-movil) + env(safe-area-inset-bottom));
  }

  /* I5 QA final (2026-09-11), WCAG 2.4.11 — el foco de teclado quedaba
     100 % tapado por la barra fija (medido a 360×640). El padding-bottom de
     arriba no lo resuelve: solo protege el final del documento, no el
     scroll mínimo que hace el navegador al enfocar con Tab a mitad de
     página. `scroll-padding-bottom` sí desplaza ese scroll mínimo. */
  html {
    scroll-padding-bottom: calc(var(--alto-barra-fija-movil) + env(safe-area-inset-bottom) + 8px);
  }
}

/* -------------------------------------------------------------------
   prefers-reduced-motion — el sistema no tiene animaciones propias,
   solo transiciones cortas de color/sombra en hover y foco; se anulan.
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------------
   Impresión — es una demo comercial; lo que interesa imprimir es el
   contenido, no la interfaz de navegación ni los avisos de demo.
   ------------------------------------------------------------------- */
@media print {
  .aviso-demo,
  .aviso-demo-cierre,
  .barra-fija-movil,
  .cabecera__boton,
  .hero__acciones .boton,
  .cta-final__boton,
  .formulario {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
    padding-bottom: 0;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  /* Texto que solo leen los lectores de pantalla: la alternativa de un control
   que en pantalla es un icono o un punto. No se usa `display:none`, que lo
   esconde también del árbol de accesibilidad. */
.oculto-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.contenedor {
    max-width: none;
  }
}