/* ==========================================================================
   Transformadores BUVE — Hoja de estilos única
   HTML5 + CSS3 nativo. Sin framework, sin preprocesador, sin bundler.
   --------------------------------------------------------------------------
    1. Fuentes
    2. Tokens de diseño
    3. Reset
    4. Tipografía base
    5. Accesibilidad y elementos base
    6. Utilidades
    7. Layout: contenedor y secciones
    8. Cabecera y navegación
    9. Pie de página
   10. Botones
   11. Migas de pan
   12. Figuras y placeholders
   13. Tarjetas de servicio
   14. Bloque CTA
   15. Botón flotante de WhatsApp
   16. Rejillas y piezas compartidas
   17. Estilos por página
   18. Movimiento reducido
   19. Impresión

   Convención de ámbito: los bloques reutilizables van sin prefijo; lo que
   pertenece a una sola página se anida bajo la clase `page-*` del <body>,
   para que nombres iguales en páginas distintas no colisionen.
   ========================================================================== */

/* 1. Fuentes ------------------------------------------------------------- */
/* Auto-alojadas (subconjunto latin). Sin peticiones a terceros. */

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  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+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("../fonts/barlow-latin-600-normal.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+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("../fonts/barlow-latin-700-normal.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+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. Tokens de diseño ---------------------------------------------------- */

:root {
  /* --- Color de marca --- */
  --buve-primary: #00689c;
  --buve-secondary: #385d8a;
  --buve-white: #ffffff;
  --buve-black: #0a0d10;
  --buve-light: #f4f6f8;
  --buve-gray: #66727d;

  /* --- Escala derivada (misma familia cromática, para estados y fondos) --- */
  --buve-primary-dark: #005481;
  --buve-primary-darker: #003f61;
  --buve-primary-soft: #e6f1f7;
  --buve-secondary-dark: #2c4a6f;
  --buve-ink-800: #16202a;
  --buve-ink-700: #22303c;

  /* --- Roles semánticos --- */
  --color-bg: var(--buve-white);
  --color-bg-alt: var(--buve-light);
  --color-bg-inverse: var(--buve-black);
  --color-text: var(--buve-ink-800);
  --color-text-muted: var(--buve-gray);
  --color-text-inverse: var(--buve-white);
  /* Texto secundario sobre fondo oscuro: contraste AA verificado. */
  --color-text-inverse-muted: #c3cdd6;
  --color-border: #dde3e9;
  --color-border-strong: #c3ccd5;
  --color-border-inverse: rgb(255 255 255 / 0.16);
  --color-accent: var(--buve-primary);
  --color-focus: #0b8ed0;

  /* --- Tipografía --- */
  --font-heading: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter Variable", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Escala fluida: mínimo en 320px, máximo en 1280px. */
  --fs-xs: 0.8125rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: clamp(1.0625rem, 0.99rem + 0.36vw, 1.1875rem);
  --fs-lg: clamp(1.1875rem, 1.09rem + 0.49vw, 1.375rem);
  --fs-h4: clamp(1.125rem, 1.05rem + 0.36vw, 1.3125rem);
  --fs-h3: clamp(1.3125rem, 1.17rem + 0.71vw, 1.625rem);
  --fs-h2: clamp(1.75rem, 1.45rem + 1.5vw, 2.625rem);
  --fs-h1: clamp(2.125rem, 1.6rem + 2.6vw, 3.75rem);
  --fs-display: clamp(2.5rem, 1.75rem + 3.75vw, 4.5rem);

  --lh-tight: 1.08;
  --lh-heading: 1.16;
  --lh-snug: 1.35;
  --lh-body: 1.65;

  --ls-tight: -0.02em;
  --ls-heading: -0.015em;
  --ls-normal: 0;
  --ls-wide: 0.08em;
  --ls-wider: 0.14em;

  /* --- Espaciado (escala base de 4px) --- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;

  --section-py: clamp(3.5rem, 2.5rem + 5vw, 7rem);
  --section-py-sm: clamp(2.5rem, 2rem + 2.5vw, 4rem);

  /* --- Layout --- */
  --container-max: 78rem;
  --container-narrow: 56rem;
  --container-wide: 90rem;
  --container-gutter: clamp(1.25rem, 0.9rem + 1.75vw, 2.5rem);
  --header-height: 4.5rem;

  /* --- Radios --- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* --- Sombras: discretas, nunca decorativas --- */
  --shadow-xs: 0 1px 2px rgb(10 13 16 / 0.05);
  --shadow-sm: 0 1px 3px rgb(10 13 16 / 0.07), 0 1px 2px rgb(10 13 16 / 0.04);
  --shadow-md: 0 4px 12px rgb(10 13 16 / 0.08);
  --shadow-lg: 0 12px 32px rgb(10 13 16 / 0.1);

  /* --- Transiciones --- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --transition-colors: color var(--duration-base) var(--ease-out),
    background-color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);

  /* --- Capas --- */
  --z-base: 1;
  --z-sticky: 100;
  --z-float: 250;
  --z-header: 200;
  --z-overlay: 300;
  --z-skip: 400;
}

/* Breakpoints de referencia del proyecto. CSS no admite custom properties
   dentro de @media, por lo que los valores se declaran aquí como contrato:
     xs   320px   móvil pequeño
     sm   430px   móvil grande
     md   768px   tablet
     lg   1024px  laptop
     nav  1120px  punto de cambio de la cabecera a barra horizontal
     xl   1280px  desktop
     2xl  1440px  desktop amplio                                            */

/* 3. Reset --------------------------------------------------------------- */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--space-md));
  /* Evita el salto horizontal al bloquear el scroll con el menú abierto. */
  scrollbar-gutter: stable;
}

body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  /* Evita scroll horizontal accidental sin romper position:sticky. */
  overflow-x: clip;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main {
  flex: 1 0 auto;
}

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

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

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

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

/* 4. Tipografía ---------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
  color: var(--color-text);
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3);
}

h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
}

p,
li {
  text-wrap: pretty;
}

p {
  max-width: 68ch;
}

strong,
b {
  font-weight: var(--fw-semibold);
}

a {
  color: var(--buve-primary-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: var(--transition-colors);
}

a:hover {
  color: var(--buve-primary);
}

/* 5. Accesibilidad y elementos base -------------------------------------- */

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

:where(a, button, input, textarea, select, summary):focus:not(:focus-visible) {
  outline: none;
}

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

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin-block: var(--space-lg);
}

.skip-link {
  position: absolute;
  top: var(--space-2xs);
  left: var(--space-2xs);
  z-index: var(--z-skip);
  padding: var(--space-2xs) var(--space-sm);
  background-color: var(--buve-primary);
  color: var(--buve-white);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transform: translateY(-250%);
  transition: transform var(--duration-fast) var(--ease-out);
}

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

/* Bloqueo de scroll mientras el menú móvil está abierto. */
html.has-menu-open,
html.has-menu-open body {
  overflow: hidden;
}

@media (min-width: 1120px) {
  html.has-menu-open,
  html.has-menu-open body {
    overflow: visible;
  }
}

/* 6. Utilidades ---------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.icon {
  flex: none;
  display: block;
}

/* Antetítulo técnico: versalitas espaciadas con línea corta a la izquierda. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--buve-primary);
}

.eyebrow::before {
  content: "";
  inline-size: var(--space-md);
  block-size: 2px;
  flex: none;
  background-color: currentColor;
}

.lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--color-text-muted);
  max-width: 62ch;
}

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

.prose h2,
.prose h3 {
  margin-block-start: var(--space-xl);
}

.prose ul {
  padding-inline-start: var(--space-md);
}

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

/* Documento legal: el aviso de privacidad es texto largo y denso, asi que
   necesita medida de lectura corta, aire vertical y encabezados que se
   distingan del cuerpo. No cambia el texto, solo como se lee. */
.legal__updated {
  margin-block-start: var(--space-2xs);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.legal-toc {
  margin-block-end: var(--space-xl);
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-alt);
}

.legal-toc__title {
  margin: 0 0 var(--space-xs);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.legal-toc__list {
  margin: 0;
  padding-inline-start: var(--space-md);
  font-size: var(--fs-sm);
}

.legal-toc__list li + li {
  margin-block-start: var(--space-3xs);
}

@media (min-width: 700px) {
  .legal-toc__list {
    columns: 2;
    column-gap: var(--space-lg);
  }
  .legal-toc__list li {
    break-inside: avoid;
  }
}

.legal h2 {
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid var(--color-border);
  font-size: var(--fs-md);
  line-height: var(--lh-heading);
}

.legal h2:first-child {
  margin-block-start: 0;
  padding-block-start: 0;
  border-block-start: 0;
}

.legal p,
.legal li {
  max-width: 68ch;
  line-height: var(--lh-body);
}

.legal ul {
  margin-block-start: var(--space-xs);
}

.legal code {
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
  background-color: var(--color-bg-alt);
  font-size: 0.92em;
}

/* Las URLs completas del aviso no deben desbordar en moviles. */
.legal a[href^="https://"] {
  overflow-wrap: anywhere;
}

/* Bloques oscuros: invierten los roles de color de una sola vez. */
.on-dark {
  --color-text: var(--color-text-inverse);
  --color-text-muted: var(--color-text-inverse-muted);
  --color-border: var(--color-border-inverse);
  --color-border-strong: rgb(255 255 255 / 0.28);
  color: var(--color-text-inverse);
  background-color: var(--color-bg-inverse);
}

.on-dark :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-text-inverse);
}

/* Azul de marca aclarado para cumplir contraste AA sobre negro industrial. */
.on-dark .eyebrow {
  color: #6cb6dc;
}

.on-dark a {
  color: #9fd0ea;
}

.rule-top {
  border-block-start: 1px solid var(--color-border);
}

/* 7. Layout: contenedor y secciones -------------------------------------- */

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

.container--narrow {
  max-width: var(--container-narrow);
}

.container--wide {
  max-width: var(--container-wide);
}

.section {
  position: relative;
  padding-block: var(--section-py);
}

.section--compact {
  padding-block: var(--section-py-sm);
}

.section--flush {
  padding-block: 0;
}

.section--alt {
  background-color: var(--color-bg-alt);
}

.section--dark {
  background-color: var(--buve-black);
}

.section-heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 62ch;
  margin-block-end: var(--space-xl);
}

.section-heading--center {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}

.section-heading__title,
.section-heading__description {
  margin: 0;
}

.section-footer {
  margin-block-start: var(--space-xl);
  max-width: none;
}

/* Encabezado de página (H1 de las páginas interiores). */
.page-header {
  padding-block: var(--section-py-sm) var(--space-xl);
}

.page-header__title {
  margin-block-start: var(--space-sm);
  max-width: 20ch;
}

.page-header__intro {
  margin-block-start: var(--space-md);
}

/* 8. Cabecera y navegación ----------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: var(--buve-white);
  border-block-end: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-block-size: var(--header-height);
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  margin-inline-end: auto;
  padding-block: var(--space-2xs);
}

.site-header__logo {
  inline-size: auto;
  block-size: 2.5rem;
}

/* --- Botón hamburguesa (solo móvil / tablet) --- */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Área táctil de 44px. */
  inline-size: 2.75rem;
  block-size: 2.75rem;
  flex: none;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: var(--transition-colors);
}

.nav-toggle:hover {
  border-color: var(--color-border-strong);
}

.nav-toggle__icon--close {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon--open {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon--close {
  display: inline-flex;
}

/* --- Panel de navegación --- */
.site-header__panel {
  display: none;
  position: absolute;
  inset-inline: 0;
  top: 100%;
  max-block-size: calc(100svh - var(--header-height));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-md) var(--container-gutter) var(--space-xl);
  background-color: var(--buve-white);
  border-block-end: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}

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

.site-nav__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__item {
  border-block-end: 1px solid var(--color-border);
}

.site-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
  inline-size: 100%;
  min-block-size: 3rem;
  padding-block: var(--space-2xs);
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  text-align: start;
  text-decoration: none;
  transition: var(--transition-colors);
}

.site-nav__link:hover {
  color: var(--buve-primary);
}

.site-nav__link[aria-current="page"],
.site-nav__link[data-current="true"] {
  color: var(--buve-primary-dark);
}

.site-nav__chevron {
  transition: transform var(--duration-base) var(--ease-out);
}

[aria-expanded="true"] .site-nav__chevron {
  transform: rotate(180deg);
}

/* --- Submenú --- */
.subnav {
  display: none;
  flex-direction: column;
  margin: 0;
  padding: 0 0 var(--space-sm);
  list-style: none;
}

[data-disclosure][data-open="true"] .subnav {
  display: flex;
}

.subnav__link {
  display: block;
  min-block-size: 2.75rem;
  padding-block: var(--space-2xs);
  padding-inline-start: var(--space-sm);
  border-inline-start: 2px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--fs-base);
  text-decoration: none;
  transition: var(--transition-colors);
}

.subnav__link:hover,
.subnav__link[aria-current="page"] {
  border-inline-start-color: var(--buve-primary);
  color: var(--buve-primary-dark);
}

.subnav__link--index {
  font-weight: var(--fw-medium);
}

.site-header__cta {
  margin-block-start: var(--space-md);
}

.site-header__cta .btn {
  inline-size: 100%;
}

/* --- Cabecera en escritorio ---
   El cambio ocurre a 1120px y no a 1024px: por debajo de ese ancho la barra
   completa (logotipo + 8 enlaces + CTA) no cabe sin apretar los objetivos
   táctiles. El valor debe coincidir con HEADER_DESKTOP_QUERY de main.js. */
@media (min-width: 1120px) {
  .site-header__logo {
    block-size: 2.875rem;
  }

  .nav-toggle {
    display: none;
  }

  .site-header__panel,
  .site-header[data-open="true"] .site-header__panel {
    display: flex;
    position: static;
    align-items: center;
    gap: var(--space-lg);
    max-block-size: none;
    overflow: visible;
    padding: 0;
    border: none;
    box-shadow: none;
    background: none;
  }

  .site-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2xs);
  }

  .site-nav__item {
    position: relative;
    border: none;
  }

  .site-nav__link {
    min-block-size: 2.5rem;
    padding-inline: var(--space-2xs);
    font-size: var(--fs-sm);
    white-space: nowrap;
  }

  /* Subrayado técnico de la sección activa. */
  .site-nav__link[aria-current="page"]::after,
  .site-nav__link[data-current="true"]::after {
    content: "";
    position: absolute;
    inset-inline: var(--space-2xs);
    inset-block-end: -1px;
    block-size: 2px;
    background-color: var(--buve-primary);
  }

  .subnav {
    position: absolute;
    inset-inline-start: 0;
    top: calc(100% + 0.5rem);
    inline-size: max-content;
    min-inline-size: 16rem;
    padding: var(--space-2xs);
    background-color: var(--buve-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
  }

  .subnav__link {
    min-block-size: 2.5rem;
    padding: var(--space-2xs) var(--space-sm);
    border-inline-start: none;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
  }

  .subnav__link:hover,
  .subnav__link[aria-current="page"] {
    background-color: var(--buve-primary-soft);
  }

  .subnav__link--index {
    margin-block-end: var(--space-3xs);
    border-block-end: 1px solid var(--color-border);
    border-radius: 0;
  }

  .site-header__cta {
    margin-block-start: 0;
    flex: none;
  }

  .site-header__cta .btn {
    inline-size: auto;
  }
}

@media (min-width: 1200px) {
  .site-nav__link {
    font-size: var(--fs-base);
    padding-inline: var(--space-xs);
  }
}

/* 9. Pie de página -------------------------------------------------------- */

.site-footer {
  padding-block: var(--space-3xl) var(--space-lg);
  border-block-start: 4px solid var(--buve-primary);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-2xl);
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.site-footer__logo {
  inline-size: auto;
  block-size: 3.25rem;
}

.site-footer__about {
  margin: 0;
  max-width: 46ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--color-text-inverse-muted);
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.site-footer__title {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--buve-white);
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
}

.site-footer__list a {
  color: var(--color-text-inverse-muted);
  text-decoration: none;
}

.site-footer__list a:hover {
  color: var(--buve-white);
  text-decoration: underline;
}

.site-footer__list--contact li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
}

.site-footer__list--contact .icon {
  margin-block-start: 0.2em;
  color: var(--buve-primary);
  /* Aclarado sobre negro para mantener contraste perceptible. */
  filter: brightness(1.6);
}

.site-footer__address {
  font-style: normal;
  line-height: var(--lh-snug);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  align-items: center;
  justify-content: space-between;
  margin-block-start: var(--space-2xl);
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--color-border-inverse);
}

.site-footer__copyright {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--color-text-inverse-muted);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-xs);
}

.site-footer__legal a {
  color: var(--color-text-inverse-muted);
  text-decoration: none;
}

.site-footer__legal a:hover {
  color: var(--buve-white);
  text-decoration: underline;
}

@media (min-width: 600px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .site-footer__grid {
    grid-template-columns: 1.4fr 1fr 1.2fr 1.4fr;
    gap: var(--space-xl);
  }

  .site-footer__brand {
    grid-column: auto;
    padding-inline-end: var(--space-lg);
  }
}

/* 10. Botones ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  /* Área táctil mínima de 44px incluso en el tamaño md. */
  min-block-size: 2.875rem;
  padding-inline: var(--space-md);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-normal);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-colors), transform var(--duration-fast) var(--ease-out);
}

.btn--lg {
  min-block-size: 3.25rem;
  padding-inline: var(--space-lg);
  font-size: var(--fs-md);
}

.btn--block {
  display: flex;
  inline-size: 100%;
}

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

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

.btn--primary {
  background-color: var(--buve-primary);
  border-color: var(--buve-primary);
  color: var(--buve-white);
}

.btn--primary:hover:not(:disabled) {
  background-color: var(--buve-primary-dark);
  border-color: var(--buve-primary-dark);
  color: var(--buve-white);
}

.btn--primary:active:not(:disabled) {
  background-color: var(--buve-primary-darker);
}

.btn--secondary {
  background-color: transparent;
  border-color: var(--buve-primary);
  color: var(--buve-primary-dark);
}

.btn--secondary:hover:not(:disabled) {
  background-color: var(--buve-primary-soft);
  color: var(--buve-primary-darker);
}

.btn--light {
  background-color: var(--buve-white);
  border-color: var(--buve-white);
  color: var(--buve-black);
}

.btn--light:hover:not(:disabled) {
  background-color: var(--buve-light);
  border-color: var(--buve-light);
  color: var(--buve-black);
}

/* `.on-dark a` (0,1,1) tenia mas especificidad que `.btn--light` (0,1,0) y
   sobrescribia el color del CTA. `.on-dark .btn--light` sube a (0,2,0) y
   restituye el color previsto. El estado hover ya lo cubre la regla
   `.btn--light:hover:not(:disabled)` (0,3,0), que no necesita ayuda. */
.on-dark .btn--light {
  color: var(--buve-black);
}

.btn--ghost {
  background-color: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.btn--ghost:hover:not(:disabled) {
  border-color: var(--color-text);
  color: var(--color-text);
}

/* 11. Migas de pan -------------------------------------------------------- */

.breadcrumbs {
  border-block-end: 1px solid var(--color-border);
  font-size: var(--fs-sm);
  background-color: var(--color-bg-alt);
}

.breadcrumbs--plain {
  background-color: transparent;
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  padding-block: var(--space-xs);
  list-style: none;
}

.breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--color-text-muted);
}

.breadcrumbs__item a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.breadcrumbs__item a:hover {
  color: var(--buve-primary-dark);
  text-decoration: underline;
}

.breadcrumbs__item [aria-current="page"] {
  color: var(--color-text);
  font-weight: var(--fw-medium);
}

.breadcrumbs__separator {
  color: var(--color-border-strong);
}

/* 12. Figuras y placeholders ---------------------------------------------- */

.figure {
  margin: 0;
  position: relative;
}

.figure__image {
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: var(--figure-ratio, 3 / 2);
  object-fit: cover;
  border-radius: var(--radius-md);
}

.figure__placeholder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  aspect-ratio: var(--figure-ratio, 3 / 2);
  overflow: hidden;
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  text-align: center;
}

/* Retícula técnica discreta, sin recurrir a imágenes de stock. */
.figure__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--color-border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-border) 1px, transparent 1px);
  background-size: 2.5rem 2.5rem;
  opacity: 0.55;
}

.figure__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  max-inline-size: 26ch;
  padding: var(--space-md);
}

.figure__icon {
  color: var(--buve-primary);
  opacity: 0.75;
}

.figure__label {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text);
}

.figure__brief {
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
}

.on-dark .figure__placeholder {
  background-color: rgb(255 255 255 / 0.04);
  border-color: var(--color-border-inverse);
}

.on-dark .figure__grid {
  background-image:
    linear-gradient(to right, rgb(255 255 255 / 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / 0.08) 1px, transparent 1px);
  opacity: 1;
}

/* 13. Tarjetas de servicio ------------------------------------------------ */

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  block-size: 100%;
  padding: var(--space-lg);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition:
    border-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.service-card:hover {
  border-color: var(--buve-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.service-card:focus-within {
  border-color: var(--buve-primary);
}

.service-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3rem;
  block-size: 3rem;
  margin-block-end: var(--space-2xs);
  background-color: var(--buve-primary-soft);
  border-radius: var(--radius-sm);
  color: var(--buve-primary-dark);
}

.service-card__title {
  margin: 0;
  font-size: var(--fs-h4);
}

.service-card__link {
  color: var(--color-text);
  text-decoration: none;
}

/* Amplía el área clicable a toda la tarjeta sin anidar elementos. */
.service-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.service-card:hover .service-card__link {
  color: var(--buve-primary-dark);
}

.service-card__summary {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.service-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.service-card__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
}

.service-card__check {
  margin-block-start: 0.3em;
  color: var(--buve-primary);
}

.service-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-block-start: auto;
  padding-block-start: var(--space-xs);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--buve-primary-dark);
}

/* 14. Bloque CTA ---------------------------------------------------------- */

.cta {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

.cta__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.cta__title {
  margin: 0;
  max-width: 18ch;
}

.cta__description {
  margin: 0;
  color: var(--color-text-inverse-muted);
  font-size: var(--fs-md);
}

.cta__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: stretch;
}

/* Variante de contorno adaptada al fondo oscuro. */
.cta__whatsapp {
  border-color: rgb(255 255 255 / 0.4);
  color: var(--buve-white);
}

.cta__whatsapp:hover {
  background-color: rgb(255 255 255 / 0.08);
  border-color: var(--buve-white);
  color: var(--buve-white);
}

.cta__phone {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-text-inverse-muted);
}

.cta__phone a {
  color: var(--buve-white);
  font-weight: var(--fw-medium);
}

@media (min-width: 480px) {
  .cta__actions {
    align-items: flex-start;
  }
}

@media (min-width: 900px) {
  .cta {
    grid-template-columns: 1.25fr 1fr;
    gap: var(--space-3xl);
  }
}

/* 15. Botón flotante de WhatsApp ------------------------------------------ */

.whatsapp-float {
  position: fixed;
  inset-block-end: calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
  inset-inline-end: calc(var(--space-md) + env(safe-area-inset-right, 0px));
  z-index: var(--z-float);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3.25rem;
  block-size: 3.25rem;

  background-color: var(--buve-primary);
  color: var(--buve-white);
  border: 1px solid var(--buve-primary-dark);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  text-decoration: none;

  transition:
    background-color var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.whatsapp-float:hover {
  background-color: var(--buve-primary-dark);
  color: var(--buve-white);
  transform: translateY(-2px);
}

/* 16. Rejillas y piezas compartidas --------------------------------------- */

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

@media (min-width: 640px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Bloque con filete azul superior. */
.feature {
  padding-block-start: var(--space-md);
  border-block-start: 2px solid var(--buve-primary);
}

.feature__title {
  margin: 0 0 var(--space-2xs);
  font-size: var(--fs-h4);
}

.feature__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

/* Tarjeta con borde completo. */
.tile {
  padding: var(--space-md);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.tile--roomy {
  padding: var(--space-lg);
}

.tile--soft {
  background-color: var(--color-bg-alt);
  border: none;
}

.tile__title {
  margin: 0 0 var(--space-2xs);
  font-size: var(--fs-h4);
}

.tile__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

/* Pasos numerados, disposición en columnas. */
.steps {
  display: grid;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps__item {
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid var(--color-border-strong);
}

.steps__num {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  color: var(--buve-primary);
}

.steps__title {
  margin: var(--space-2xs) 0 var(--space-3xs);
  font-size: var(--fs-h4);
}

.steps__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

/* Variante con el número al costado. */
.steps--inline .steps__item {
  display: flex;
  gap: var(--space-sm);
  border-block-start-color: var(--color-border);
}

.steps--inline .steps__num {
  flex: none;
  font-size: var(--fs-h4);
  letter-spacing: var(--ls-normal);
}

.steps--inline .steps__title {
  margin-block-start: 0;
}

@media (min-width: 640px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .steps--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-xl);
  }
}

/* Composición a dos columnas: texto + figura. */
.split {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

.split--top {
  align-items: start;
}

.split__text .section-heading {
  margin-block-end: var(--space-md);
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-3xl);
  }

  .split--even {
    grid-template-columns: 1fr 1fr;
  }
}

/* Lista de verificación con palomita. */
.checklist {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
}

.checklist .icon {
  margin-block-start: 0.25em;
  color: var(--buve-primary);
}

.checklist--ruled li {
  padding-block: var(--space-2xs);
  border-block-end: 1px solid var(--color-border);
}

/* Enlace de texto con flecha. */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

.arrow-link:hover {
  text-decoration: underline;
}

.note {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* 17. Estilos por página --------------------------------------------------- */

/* --- Piezas introducidas por la portada, reutilizables ------------------- */

/* Antetítulo con número de sección: el número sustituye a la línea corta. */
.eyebrow--num::before {
  content: none;
}

.eyebrow__num {
  padding-inline-end: var(--space-xs);
  margin-inline-end: var(--space-3xs);
  border-inline-end: 1px solid currentColor;
  font-variant-numeric: tabular-nums;
}

.section-heading--wide {
  max-width: 46rem;
}

/* Flechas que avanzan al pasar el cursor. Desplazamiento de 2–3 px. */
.arrow-link__icon,
.btn__arrow {
  transition: transform var(--duration-base) var(--ease-out);
}

.arrow-link:hover .arrow-link__icon {
  transform: translateX(3px);
}

.btn:hover:not(:disabled) .btn__arrow {
  transform: translateX(2px);
}

/* Filete azul en la esquina superior de una figura destacada. */
.figure--framed {
  position: relative;
}

.figure--framed::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  inline-size: 4.5rem;
  block-size: 3px;
  background-color: var(--buve-primary);
}

.figure--framed .figure__placeholder {
  border-color: var(--color-border-strong);
}

/* --- Portada: hero ------------------------------------------------------- */

.page-home .hero {
  padding-block-start: clamp(2.5rem, 1.8rem + 3.5vw, 5rem);
}

.page-home .hero__inner {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
  padding-block-end: clamp(2.5rem, 1.8rem + 3.5vw, 5rem);
}

.page-home .hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

.page-home .hero__kicker {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--buve-primary);
}

.page-home .hero__kicker::before {
  content: "";
  inline-size: var(--space-lg);
  block-size: 3px;
  flex: none;
  background-color: currentColor;
}

.page-home .hero__title {
  margin: 0;
  max-width: 15ch;
}

.page-home .hero__lead {
  margin: 0;
  max-width: 52ch;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--color-text-muted);
}

.page-home .hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block-start: var(--space-2xs);
}

.page-home .hero__tel {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.page-home .hero__tel a {
  font-weight: var(--fw-medium);
}

/* Franja técnica bajo el hero: servicios y ubicación. */
.page-home .hero__meta {
  border-block: 1px solid var(--color-border);
  background-color: var(--color-bg-alt);
}

.page-home .hero__meta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-lg);
  padding-block: var(--space-sm);
}

.page-home .hero__services {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.page-home .hero__services li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.page-home .hero__services li + li::before {
  content: "·";
  color: var(--buve-primary);
}

.page-home .hero__services a {
  color: var(--color-text);
  text-decoration: none;
}

.page-home .hero__services a:hover {
  color: var(--buve-primary-dark);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.page-home .hero__place {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.page-home .hero__place .icon {
  color: var(--buve-primary);
}

@media (min-width: 1024px) {
  .page-home .hero__inner {
    grid-template-columns: 1fr 0.95fr;
    gap: var(--space-3xl);
  }
}

/* --- Portada: introducción ----------------------------------------------- */

.page-home .intro {
  display: grid;
  gap: var(--space-lg);
  padding-block-start: var(--space-lg);
  border-block-start: 1px solid var(--color-border);
}

.page-home .intro__title {
  margin-block-start: var(--space-sm);
  max-width: 16ch;
}

.page-home .intro__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

.page-home .intro__text {
  margin: 0;
  max-width: 60ch;
  font-size: var(--fs-md);
  color: var(--color-text-muted);
}

.page-home .intro__link {
  margin-block-start: var(--space-2xs);
}

@media (min-width: 900px) {
  .page-home .intro {
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--space-3xl);
  }
}

/* --- Portada: servicios --------------------------------------------------- */

:is(.page-home, .page-servicios) .svc-grid {
  display: grid;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

:is(.page-home, .page-servicios) .svc {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  block-size: 100%;
  padding: var(--space-lg);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition:
    border-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

:is(.page-home, .page-servicios) .svc:hover {
  border-color: var(--buve-primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-3px);
}

:is(.page-home, .page-servicios) .svc:focus-within {
  border-color: var(--buve-primary);
}

:is(.page-home, .page-servicios) .svc__num {
  position: absolute;
  top: var(--space-md);
  inset-inline-end: var(--space-md);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

:is(.page-home, .page-servicios) .svc__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  margin-block-end: var(--space-2xs);
  background-color: var(--buve-primary-soft);
  border-radius: var(--radius-sm);
  color: var(--buve-primary-dark);
}

:is(.page-home, .page-servicios) .svc__title {
  margin: 0;
  max-width: 18ch;
  font-size: var(--fs-h3);
}

:is(.page-home, .page-servicios) .svc__link {
  color: var(--color-text);
  text-decoration: none;
}

/* Amplía el área clicable a toda la tarjeta sin anidar interactivos. */
:is(.page-home, .page-servicios) .svc__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

:is(.page-home, .page-servicios) .svc:hover .svc__link {
  color: var(--buve-primary-dark);
}

:is(.page-home, .page-servicios) .svc__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

:is(.page-home, .page-servicios) .svc__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-block-start: auto;
  padding-block-start: var(--space-md);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--buve-primary-dark);
}

:is(.page-home, .page-servicios) .svc__arrow {
  transition: transform var(--duration-base) var(--ease-out);
}

:is(.page-home, .page-servicios) .svc:hover .svc__arrow {
  transform: translateX(3px);
}

/* Servicio complementario: jerarquía secundaria, banda horizontal. */
:is(.page-home, .page-servicios) .svc-extra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  margin-block-start: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

:is(.page-home, .page-servicios) .svc-extra__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  flex: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--buve-primary-dark);
}

:is(.page-home, .page-servicios) .svc-extra__body {
  flex: 1 1 18rem;
}

:is(.page-home, .page-servicios) .svc-extra__title {
  margin: 0 0 var(--space-3xs);
  font-size: var(--fs-h4);
}

:is(.page-home, .page-servicios) .svc-extra__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

:is(.page-home, .page-servicios) .svc-extra__link {
  flex: none;
  font-size: var(--fs-sm);
}

@media (min-width: 700px) {
  :is(.page-home, .page-servicios) .svc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  :is(.page-home, .page-servicios) .svc-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
  }
}

/* --- Portada: por qué BUVE ------------------------------------------------ */

.page-home .why {
  display: grid;
  gap: var(--space-xl);
}

.page-home .why__title {
  margin-block: var(--space-sm) var(--space-md);
  max-width: 14ch;
}

.page-home .why__intro {
  margin: 0;
  max-width: 40ch;
  color: var(--color-text-muted);
}

.page-home .why__link {
  display: inline-flex;
  margin-block-start: var(--space-md);
  font-size: var(--fs-sm);
}

.page-home .why__list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--color-border);
}

.page-home .why__item {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--space-2xs) var(--space-sm);
  padding-block: var(--space-md);
  border-block-end: 1px solid var(--color-border);
}

.page-home .why__num {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  font-variant-numeric: tabular-nums;
  color: var(--buve-primary);
  padding-block-start: 0.2em;
}

.page-home .why__item-title {
  margin: 0 0 var(--space-3xs);
  font-size: var(--fs-h4);
}

.page-home .why__item-text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

@media (min-width: 960px) {
  .page-home .why {
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--space-3xl);
    align-items: start;
  }
}

/* --- Portada: proceso ----------------------------------------------------- */

:is(.page-home, .page-servicios, .page-servicio) .flow {
  display: grid;
  gap: var(--space-lg) var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

:is(.page-home, .page-servicios, .page-servicio) .flow__step {
  display: flex;
  flex-direction: column;
}

/* La línea de cada paso se alinea con la del siguiente y forma una secuencia
   continua en escritorio; en móvil funciona como filete superior. */
:is(.page-home, .page-servicios, .page-servicio) .flow__marker {
  display: block;
  position: relative;
  block-size: 1px;
  margin-block-end: var(--space-md);
  background-color: var(--color-border-strong);
}

:is(.page-home, .page-servicios, .page-servicio) .flow__dot {
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  inline-size: 0.625rem;
  block-size: 0.625rem;
  border-radius: var(--radius-pill);
  background-color: var(--buve-primary);
}

:is(.page-home, .page-servicios, .page-servicio) .flow__num {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  font-variant-numeric: tabular-nums;
  color: var(--buve-primary);
}

:is(.page-home, .page-servicios, .page-servicio) .flow__title {
  margin: var(--space-2xs) 0 var(--space-3xs);
  font-size: var(--fs-h4);
}

:is(.page-home, .page-servicios, .page-servicio) .flow__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

@media (min-width: 620px) {
  :is(.page-home, .page-servicios, .page-servicio) .flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  :is(.page-home, .page-servicios, .page-servicio) .flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  :is(.page-home, .page-servicios, .page-servicio) .flow {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-md) var(--space-sm);
  }
}

/* --- Portada: infraestructura --------------------------------------------- */

.page-home .plant {
  display: grid;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home .plant__caption {
  margin: var(--space-2xs) 0 0;
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-inverse-muted);
}

.page-home .plant__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--color-border-inverse);
}

.page-home .plant__note {
  margin: 0;
  max-width: 52ch;
  font-size: var(--fs-sm);
  color: var(--color-text-inverse-muted);
}

@media (min-width: 700px) {
  .page-home .plant {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-home .plant__cell--lead {
    grid-column: span 2;
  }
}

@media (min-width: 1024px) {
  .page-home .plant {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-home .plant__cell--lead {
    grid-column: span 2;
    grid-row: span 2;
  }

  /* La celda principal ocupa toda su área; su figura se estira con ella. */
  .page-home .plant__cell--lead .figure {
    block-size: calc(100% - 2rem);
  }

  .page-home .plant__cell--lead .figure__placeholder {
    block-size: 100%;
    aspect-ratio: auto;
  }
}

/* --- Portada: calidad ------------------------------------------------------ */

.page-home .quality {
  display: grid;
  gap: var(--space-xl);
}

.page-home .quality__title {
  margin-block: var(--space-sm) var(--space-md);
  max-width: 18ch;
}

.page-home .quality__intro {
  margin: 0 0 var(--space-md);
  max-width: 42ch;
  color: var(--color-text-muted);
}

.page-home .quality__list {
  display: grid;
  gap: var(--space-md) var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home .pillar {
  padding-block-start: var(--space-md);
  border-block-start: 2px solid var(--buve-primary);
}

.page-home .pillar__title {
  margin: 0 0 var(--space-2xs);
  font-size: var(--fs-h4);
}

.page-home .pillar__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

@media (min-width: 560px) {
  .page-home .quality__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .page-home .quality {
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--space-3xl);
    align-items: start;
  }
}

/* --- Portada: sectores ----------------------------------------------------- */

.page-home .sectors {
  display: grid;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home .sector {
  padding: var(--space-lg);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  border-block-start: 2px solid var(--buve-secondary);
  transition: border-color var(--duration-base) var(--ease-out);
}

.page-home .sector:hover {
  border-color: var(--color-border-strong);
  border-block-start-color: var(--buve-primary);
}

.page-home .sector__title {
  margin: 0 0 var(--space-2xs);
  font-size: var(--fs-h4);
}

.page-home .sector__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

@media (min-width: 640px) {
  .page-home .sectors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .page-home .sectors {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --- Portada: proyectos ----------------------------------------------------- */

.page-home .projects {
  display: grid;
  gap: var(--space-xl);
}

.page-home .projects__title {
  margin-block: var(--space-sm) var(--space-md);
  max-width: 14ch;
}

.page-home .projects__intro {
  margin: 0 0 var(--space-md);
  max-width: 48ch;
  color: var(--color-text-muted);
}

.page-home .projects__grid {
  display: grid;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home .project__title {
  margin: var(--space-sm) 0 var(--space-3xs);
  font-size: var(--fs-h4);
}

.page-home .project__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

@media (min-width: 900px) {
  .page-home .projects__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page-home .projects__head {
  max-width: 46rem;
}

/* --- Portada: recursos ------------------------------------------------------ */

.page-home .topics {
  display: grid;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home .topic {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-lg);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.page-home .topic__title {
  margin: 0;
  font-size: var(--fs-h4);
}

.page-home .topic__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.page-home .topic__status {
  margin: auto 0 0;
  padding-block-start: var(--space-sm);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--buve-primary);
}

@media (min-width: 860px) {
  .page-home .topics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- Portada: CTA final ------------------------------------------------------ */

.page-home .cta__hint {
  margin: var(--space-2xs) 0 0;
  max-width: 46ch;
  font-size: var(--fs-sm);
  color: var(--color-text-inverse-muted);
}

/* --- Servicios: hub e índice --------------------------------------------- */

/* Hero del hub: sin fotografía, apoyado en el texto y en el filete inferior. */
.page-servicios .hub-hero {
  padding-block: clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem);
  border-block-end: 1px solid var(--color-border);
}

.page-servicios .hub-hero__kicker {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0 0 var(--space-md);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--buve-primary);
}

.page-servicios .hub-hero__kicker::before {
  content: "";
  inline-size: var(--space-lg);
  block-size: 3px;
  flex: none;
  background-color: currentColor;
}

.page-servicios .hub-hero__title {
  margin: 0;
  max-width: 18ch;
}

.page-servicios .hub-hero__lead {
  margin: var(--space-md) 0 0;
  max-width: 62ch;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--color-text-muted);
}

.page-servicios .hub-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block-start: var(--space-lg);
}

/* Guía de elección: necesidad a la izquierda, servicio a la derecha. */
.page-servicios .chooser {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--color-border-strong);
}

.page-servicios .chooser__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-md);
  padding-block: var(--space-md);
  border-block-end: 1px solid var(--color-border);
}

.page-servicios .chooser__need {
  flex: 1 1 22rem;
  font-size: var(--fs-md);
}

.page-servicios .chooser__link {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-decoration: none;
}

.page-servicios .chooser__link:hover {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.page-servicios .chooser__arrow {
  transition: transform var(--duration-base) var(--ease-out);
}

.page-servicios .chooser__link:hover .chooser__arrow {
  transform: translateX(3px);
}

/* Calidad del hub: enunciado a la izquierda, pilares a la derecha. */
.page-servicios .quality-split {
  display: grid;
  gap: var(--space-xl);
}

.page-servicios .quality-split__title {
  margin-block: var(--space-sm) var(--space-md);
  max-width: 18ch;
}

.page-servicios .quality-split__intro {
  margin: 0 0 var(--space-md);
  max-width: 40ch;
  color: var(--color-text-muted);
}

@media (min-width: 960px) {
  .page-servicios .quality-split {
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--space-3xl);
    align-items: start;
  }
}

/* --- Notas compartidas por hub y detalle ---------------------------------- */

:is(.page-servicios, .page-servicio) .chooser__note {
  margin-block-start: var(--space-lg);
  max-width: 62ch;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* --- Detalle de servicio: hero -------------------------------------------- */

.page-servicio .svc-hero {
  padding-block: clamp(2rem, 1.5rem + 2.5vw, 3.5rem) clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem);
  border-block-end: 1px solid var(--color-border);
}

.page-servicio .svc-hero__inner {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

.page-servicio .svc-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

.page-servicio .svc-hero__kicker {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--buve-primary);
}

.page-servicio .svc-hero__kicker::before {
  content: "";
  inline-size: var(--space-lg);
  block-size: 3px;
  flex: none;
  background-color: currentColor;
}

.page-servicio .svc-hero__title {
  margin: 0;
  max-width: 17ch;
}

.page-servicio .svc-hero__lead {
  margin: 0;
  max-width: 56ch;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--color-text-muted);
}

.page-servicio .svc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block-start: var(--space-2xs);
}

/* Variante sin fotografía, para el servicio de menor jerarquía. */
.page-servicio .svc-hero--compact .svc-hero__title {
  max-width: 20ch;
}

.page-servicio .svc-hero--compact .svc-hero__lead {
  margin-block-start: var(--space-md);
  max-width: 66ch;
}

.page-servicio .svc-hero--compact .svc-hero__actions {
  margin-block-start: var(--space-lg);
}

@media (min-width: 1000px) {
  .page-servicio .svc-hero__inner {
    grid-template-columns: 1fr 0.9fr;
    gap: var(--space-3xl);
  }
}

/* --- Casos: cuándo aplica el servicio (Fabricación, Reparación) ------------ */

.page-servicio .cases {
  display: grid;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-servicio .case {
  padding: var(--space-lg);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.page-servicio .case__num {
  display: block;
  margin-block-end: var(--space-2xs);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  font-variant-numeric: tabular-nums;
  color: var(--buve-primary);
}

.page-servicio .case__title {
  margin: 0 0 var(--space-2xs);
  font-size: var(--fs-h4);
}

.page-servicio .case__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

@media (min-width: 800px) {
  .page-servicio .cases {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- Necesidades: cuándo solicitar (Mantenimiento) ------------------------- */

.page-servicio .need {
  display: grid;
  gap: var(--space-xl);
}

.page-servicio .need__title {
  margin-block: var(--space-sm) var(--space-md);
  max-width: 16ch;
}

.page-servicio .need__intro {
  margin: 0;
  max-width: 42ch;
  color: var(--color-text-muted);
}

.page-servicio .need__list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--color-border);
}

.page-servicio .need__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding-block: var(--space-md);
  border-block-end: 1px solid var(--color-border);
}

.page-servicio .need__list .icon {
  margin-block-start: 0.3em;
  color: var(--buve-primary);
}

.page-servicio .need__item-title {
  margin: 0 0 var(--space-3xs);
  font-size: var(--fs-h4);
}

.page-servicio .need__item-text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

@media (min-width: 960px) {
  .page-servicio .need {
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--space-3xl);
    align-items: start;
  }
}

/* --- Alcance: texto + fotografía ------------------------------------------ */

.page-servicio .scope {
  display: grid;
  gap: var(--space-xl);
  align-items: start;
}

.page-servicio .scope__text .section-heading {
  margin-block-end: var(--space-md);
}

.page-servicio .scope__note {
  margin-block-start: var(--space-md);
  max-width: 58ch;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

@media (min-width: 900px) {
  .page-servicio .scope {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-3xl);
  }

  /* Invierte el orden para que dos landings seguidas no se lean iguales. */
  .page-servicio .scope--reverse .scope__text {
    order: 2;
  }
}

/* --- Etapas: método de reparación ----------------------------------------- */

.page-servicio .stages {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.page-servicio .stage {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: var(--space-sm);
  padding-block: var(--space-lg);
  border-block-start: 1px solid var(--color-border-strong);
}

.page-servicio .stage:last-child {
  border-block-end: 1px solid var(--color-border-strong);
}

.page-servicio .stage__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border: 1px solid var(--buve-primary);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--buve-primary-dark);
}

.page-servicio .stage__title {
  margin: 0 0 var(--space-3xs);
  font-size: var(--fs-h3);
}

.page-servicio .stage__text {
  margin: 0;
  max-width: 62ch;
  color: var(--color-text-muted);
}

.page-servicio .stages__note {
  margin-block-start: var(--space-lg);
  max-width: 62ch;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

@media (min-width: 900px) {
  .page-servicio .stage {
    grid-template-columns: 4.5rem 1fr;
    gap: var(--space-lg);
    align-items: center;
  }
}

/* --- Evidencia visual (sobre fondo oscuro) -------------------------------- */

.page-servicio .evidence {
  display: grid;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 700px) {
  .page-servicio .evidence {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
  }
}

/* --- Servicios relacionados: solución compacta ---------------------------- */

:is(.page-servicios, .page-servicio, .page-nosotros, .page-calidad, .page-sectores) .related {
  display: grid;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

:is(.page-servicios, .page-servicio, .page-nosotros, .page-calidad, .page-sectores) .related__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  block-size: 100%;
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
  transition:
    border-color var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

:is(.page-servicios, .page-servicio, .page-nosotros, .page-calidad, .page-sectores) .related__item:hover {
  border-color: var(--buve-primary);
  transform: translateY(-2px);
}

:is(.page-servicios, .page-servicio, .page-nosotros, .page-calidad, .page-sectores) .related__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  flex: none;
  background-color: var(--buve-primary-soft);
  border-radius: var(--radius-sm);
  color: var(--buve-primary-dark);
}

:is(.page-servicios, .page-servicio, .page-nosotros, .page-calidad, .page-sectores) .related__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  flex: 1 1 auto;
}

:is(.page-servicios, .page-servicio, .page-nosotros, .page-calidad, .page-sectores) .related__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
}

:is(.page-servicios, .page-servicio, .page-nosotros, .page-calidad, .page-sectores) .related__text {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

:is(.page-servicios, .page-servicio, .page-nosotros, .page-calidad, .page-sectores) .related__arrow {
  flex: none;
  color: var(--buve-primary);
  transition: transform var(--duration-base) var(--ease-out);
}

:is(.page-servicios, .page-servicio, .page-nosotros, .page-calidad, .page-sectores) .related__item:hover .related__arrow {
  transform: translateX(3px);
}

@media (min-width: 900px) {
  :is(.page-servicios, .page-servicio, .page-nosotros, .page-calidad, .page-sectores) .related {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  :is(.page-servicios, .page-servicio, .page-nosotros, .page-calidad, .page-sectores) .related__item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2xs);
    padding: var(--space-lg);
  }

  :is(.page-servicios, .page-servicio, .page-nosotros, .page-calidad, .page-sectores) .related__arrow {
    margin-block-start: auto;
    padding-block-start: var(--space-2xs);
  }
}

/* --- Servicios complementarios -------------------------------------------- */

.page-servicio--complementarios .extra-grid {
  display: grid;
  gap: var(--space-md);
  margin-block-end: var(--space-xl);
}

.page-servicio--complementarios .extra {
  padding: var(--space-lg);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  border-block-start: 2px solid var(--buve-secondary);
}

.page-servicio--complementarios .extra__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3rem;
  block-size: 3rem;
  margin-block-end: var(--space-sm);
  background-color: var(--buve-primary-soft);
  border-radius: var(--radius-sm);
  color: var(--buve-primary-dark);
}

.page-servicio--complementarios .extra__title {
  margin: 0 0 var(--space-2xs);
  font-size: var(--fs-h3);
}

.page-servicio--complementarios .extra__text {
  margin: 0;
  color: var(--color-text-muted);
}

@media (min-width: 800px) {
  .page-servicio--complementarios .extra-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Tabla de especificaciones ---------------------------------------------
   Componente preparado para el momento en que BUVE confirme su catálogo
   técnico (tipos, capacidades, tensiones y aplicaciones). Todavía NO se usa en
   ninguna página: no se publican campos vacíos. El marcado previsto está
   documentado en el README, sección «Tabla de especificaciones técnicas».     */

.page-servicio .spec-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.page-servicio .spec-table caption {
  margin-block-end: var(--space-sm);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-align: start;
  color: var(--buve-primary-dark);
}

.page-servicio .spec-table :is(th, td) {
  padding: var(--space-xs) var(--space-sm);
  border-block-end: 1px solid var(--color-border);
  text-align: start;
  vertical-align: top;
}

.page-servicio .spec-table th {
  inline-size: 40%;
  font-weight: var(--fw-semibold);
}

.page-servicio .spec-table td {
  color: var(--color-text-muted);
}

.page-servicio .spec-table thead th {
  border-block-end-color: var(--color-border-strong);
}

/* --- Proyectos --- */
.page-proyectos .gallery {
  display: grid;
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-proyectos .gallery__caption {
  margin: var(--space-2xs) 0 0;
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

@media (min-width: 700px) {
  .page-proyectos .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .page-proyectos .grid--scopes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --- Recursos --- */
.page-recursos .topic {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.page-recursos .topic__status {
  margin: auto 0 0;
  padding-block-start: var(--space-sm);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--buve-primary);
}

@media (min-width: 1100px) {
  .page-recursos .grid--topics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --- Páginas institucionales: hero compartido ------------------------------
   Nosotros, Calidad y Sectores comparten el arranque —sin fotografía, apoyado
   en el texto— y a partir de ahí cada una desarrolla su propio lenguaje.      */

:is(.page-nosotros, .page-calidad, .page-sectores) .inst-hero {
  padding-block: clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem);
  border-block-end: 1px solid var(--color-border);
}

:is(.page-nosotros, .page-calidad, .page-sectores) .inst-hero__kicker {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0 0 var(--space-md);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--buve-primary);
}

:is(.page-nosotros, .page-calidad, .page-sectores) .inst-hero__kicker::before {
  content: "";
  inline-size: var(--space-lg);
  block-size: 3px;
  flex: none;
  background-color: currentColor;
}

:is(.page-nosotros, .page-calidad, .page-sectores) .inst-hero__title {
  margin: 0;
  max-width: 19ch;
}

:is(.page-nosotros, .page-calidad, .page-sectores) .inst-hero__lead {
  margin: var(--space-md) 0 0;
  max-width: 62ch;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--color-text-muted);
}

:is(.page-nosotros, .page-calidad, .page-sectores) .inst-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block-start: var(--space-lg);
}

/* Nota de apoyo bajo un bloque, en varias de estas páginas. */
:is(.page-nosotros, .page-calidad, .page-sectores) .about__note {
  margin-block-start: var(--space-lg);
  max-width: 62ch;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* Composición de tres fotografías, sobre fondo oscuro. */
:is(.page-nosotros, .page-calidad) .gallery3 {
  display: grid;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 760px) {
  :is(.page-nosotros, .page-calidad) .gallery3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
  }
}

/* Banda de relación directa: enunciado + hechos verificables. */
:is(.page-nosotros, .page-sectores) .direct {
  display: grid;
  gap: var(--space-xl);
  align-items: start;
}

:is(.page-nosotros, .page-sectores) .direct__title {
  margin-block: var(--space-sm) var(--space-md);
  max-width: 16ch;
}

:is(.page-nosotros, .page-sectores) .direct__lead {
  margin: 0;
  max-width: 52ch;
  font-size: var(--fs-md);
  color: var(--color-text-muted);
}

:is(.page-nosotros, .page-sectores) .direct__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  margin-block-start: var(--space-lg);
  font-size: var(--fs-sm);
}

:is(.page-nosotros, .page-sectores) .direct__facts {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--color-border-strong);
}

:is(.page-nosotros, .page-sectores) .direct__facts li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding-block: var(--space-md);
  border-block-end: 1px solid var(--color-border);
  font-size: var(--fs-md);
}

:is(.page-nosotros, .page-sectores) .direct__facts .icon {
  margin-block-start: 0.3em;
  color: var(--buve-primary);
}

@media (min-width: 960px) {
  :is(.page-nosotros, .page-sectores) .direct {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
  }
}

/* --- Nosotros: voz editorial ---------------------------------------------- */

.page-nosotros .about {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

/* Enunciado institucional: el H2 se compone como declaración, con filete. */
.page-nosotros .statement {
  margin: var(--space-md) 0 0;
  padding-inline-start: var(--space-md);
  border-inline-start: 3px solid var(--buve-primary);
  max-width: 24ch;
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
}

.page-nosotros .about__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-block-start: var(--space-lg);
}

.page-nosotros .about__body p {
  margin: 0;
  max-width: 58ch;
  color: var(--color-text-muted);
}

@media (min-width: 960px) {
  .page-nosotros .about {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-3xl);
  }

  .page-nosotros .statement {
    max-width: 26ch;
    font-size: var(--fs-h2);
    letter-spacing: var(--ls-heading);
  }
}

.page-nosotros .principles {
  display: grid;
  gap: var(--space-xl);
}

.page-nosotros .principles__title {
  margin-block: var(--space-sm) var(--space-md);
  max-width: 16ch;
}

.page-nosotros .principles__intro {
  margin: 0;
  max-width: 40ch;
  color: var(--color-text-muted);
}

.page-nosotros .principles__list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--color-border);
}

.page-nosotros .principle {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--space-2xs) var(--space-sm);
  padding-block: var(--space-md);
  border-block-end: 1px solid var(--color-border);
}

.page-nosotros .principle__num {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  font-variant-numeric: tabular-nums;
  color: var(--buve-primary);
  padding-block-start: 0.2em;
}

.page-nosotros .principle__title {
  margin: 0 0 var(--space-3xs);
  font-size: var(--fs-h4);
}

.page-nosotros .principle__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

@media (min-width: 960px) {
  .page-nosotros .principles {
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--space-3xl);
    align-items: start;
  }
}

/* --- Calidad: voz técnica -------------------------------------------------- */

.page-calidad .approach {
  display: grid;
  gap: var(--space-xl);
}

.page-calidad .approach__title {
  margin-block: var(--space-sm) var(--space-md);
  max-width: 18ch;
}

.page-calidad .approach__intro {
  margin: 0;
  max-width: 42ch;
  color: var(--color-text-muted);
}

.page-calidad .pillars {
  display: grid;
  gap: var(--space-md) var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-calidad .pillar {
  padding-block-start: var(--space-md);
  border-block-start: 2px solid var(--buve-primary);
}

.page-calidad .pillar__title {
  margin: 0 0 var(--space-2xs);
  font-size: var(--fs-h4);
}

.page-calidad .pillar__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

@media (min-width: 560px) {
  .page-calidad .pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .page-calidad .approach {
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--space-3xl);
    align-items: start;
  }
}

/* Escalera de proceso: raíl vertical continuo con numeración en recuadro.
   Es el recurso dominante de esta página y no se repite en ninguna otra. */
.page-calidad .ladder {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 54rem;
}

.page-calidad .ladder__step {
  position: relative;
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: var(--space-md);
  padding-block: var(--space-md);
}

/* Raíl que une las etapas; se recorta en la primera y en la última. */
.page-calidad .ladder__step::before {
  content: "";
  position: absolute;
  inset-inline-start: 1.625rem;
  inset-block: 0;
  inline-size: 1px;
  background-color: var(--color-border-strong);
}

.page-calidad .ladder__step:first-child::before {
  inset-block-start: 50%;
}

.page-calidad .ladder__step:last-child::before {
  inset-block-end: 50%;
}

.page-calidad .ladder__num {
  position: relative;
  z-index: var(--z-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  background-color: var(--color-bg-alt);
  border: 1px solid var(--buve-primary);
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--buve-primary-dark);
}

.page-calidad .ladder__body {
  padding-block-start: var(--space-2xs);
}

.page-calidad .ladder__title {
  margin: 0 0 var(--space-3xs);
  font-size: var(--fs-h4);
}

.page-calidad .ladder__text {
  margin: 0;
  max-width: 58ch;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

@media (min-width: 700px) {
  .page-calidad .ladder__step {
    gap: var(--space-lg);
    padding-block: var(--space-lg);
  }

  .page-calidad .ladder__title {
    font-size: var(--fs-h3);
  }

  .page-calidad .ladder__text {
    font-size: var(--fs-base);
  }
}

.page-calidad .control {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

.page-calidad .control__text .section-heading {
  margin-block-end: var(--space-md);
}

.page-calidad .control__lead {
  margin: 0 0 var(--space-lg);
  max-width: 58ch;
  color: var(--color-text-muted);
}

@media (min-width: 900px) {
  .page-calidad .control {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-3xl);
  }
}

/* Usos del registro: marcadores alfabéticos, para no repetir numeración. */
.page-calidad .uses {
  display: grid;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-calidad .use {
  padding: var(--space-lg);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.page-calidad .use__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  margin-block-end: var(--space-sm);
  background-color: var(--buve-primary-soft);
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--buve-primary-dark);
}

.page-calidad .use__title {
  margin: 0 0 var(--space-2xs);
  font-size: var(--fs-h4);
}

.page-calidad .use__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

@media (min-width: 800px) {
  .page-calidad .uses {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page-calidad .compliance__lead {
  margin: 0;
  max-width: 62ch;
  font-size: var(--fs-md);
  color: var(--color-text-muted);
}

/* Aviso editorial: deliberadamente discreto, no debe competir con el
   contenido ni sugerir la existencia de documentos que no se publican. */
.page-calidad .disclosure {
  margin-block-start: var(--space-lg);
  padding-inline-start: var(--space-md);
  border-inline-start: 2px solid var(--color-border-strong);
  max-width: 62ch;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* --- Sectores: voz modular -------------------------------------------------- */

.page-sectores .sector-rows {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-sectores .sector-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xs);
  padding-block: var(--space-xl);
  border-block-start: 1px solid var(--color-border);
}

.page-sectores .sector-row:last-child {
  border-block-end: 1px solid var(--color-border);
}

.page-sectores .sector-row__num {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 1.6rem + 3vw, 3.75rem);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--color-text-muted);
}

.page-sectores .sector-row__title {
  margin: 0 0 var(--space-2xs);
  font-size: var(--fs-h3);
}

.page-sectores .sector-row__lead {
  margin: 0 0 var(--space-sm);
  max-width: 62ch;
  font-size: var(--fs-md);
}

.page-sectores .sector-row__text {
  margin: 0;
  max-width: 66ch;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

@media (min-width: 860px) {
  .page-sectores .sector-row {
    grid-template-columns: 7rem 1fr;
    gap: var(--space-lg);
    align-items: start;
  }
}

/* Necesidades a dos columnas, con filete por elemento. */
.page-sectores .needs2 {
  display: grid;
  gap: 0 var(--space-2xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-sectores .needs2 li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding-block: var(--space-md);
  border-block-end: 1px solid var(--color-border);
  font-size: var(--fs-md);
}

.page-sectores .needs2 .icon {
  margin-block-start: 0.3em;
  color: var(--buve-primary);
}

@media (min-width: 800px) {
  .page-sectores .needs2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Componentes preparados, todavía sin usar -------------------------------
   Ninguno se emplea en ninguna página: no se publican bloques vacíos.

   .timeline   — historia de la empresa, cuando existan fechas verificadas.
   .docs-grid  — normas, certificaciones, documentación y protocolos de prueba,
                 cuando BUVE los valide documentalmente.

   El marcado previsto de ambos está en el README, sección «Componentes
   preparados». No rellenarlos con conocimiento general del sector.            */

.page-nosotros .timeline {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--color-border-strong);
}

.page-nosotros .timeline__item {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-block-end: 1px solid var(--color-border);
}

.page-nosotros .timeline__year {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--buve-primary);
}

.page-nosotros .timeline__title {
  margin: 0 0 var(--space-3xs);
  font-size: var(--fs-h4);
}

.page-nosotros .timeline__text {
  margin: 0;
  max-width: 62ch;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.page-calidad .docs-grid {
  display: grid;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-calidad .doc-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  border-block-start: 2px solid var(--buve-primary);
}

.page-calidad .doc-card__title {
  margin: 0;
  font-size: var(--fs-h4);
}

.page-calidad .doc-card__meta {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--buve-primary);
}

.page-calidad .doc-card__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

@media (min-width: 800px) {
  .page-calidad .docs-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- Contacto: hero -------------------------------------------------------- */

.page-contacto .ct-hero {
  padding-block: clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem);
  border-block-end: 1px solid var(--color-border);
}

.page-contacto .ct-hero__kicker {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0 0 var(--space-md);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--buve-primary);
}

.page-contacto .ct-hero__kicker::before {
  content: "";
  inline-size: var(--space-lg);
  block-size: 3px;
  flex: none;
  background-color: currentColor;
}

.page-contacto .ct-hero__title {
  margin: 0;
  max-width: 18ch;
}

.page-contacto .ct-hero__lead {
  margin: var(--space-md) 0 0;
  max-width: 62ch;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--color-text-muted);
}

.page-contacto .ct-hero__alt {
  margin: var(--space-lg) 0 0;
  max-width: 62ch;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* --- Contacto: formulario de solicitud -------------------------------------
   Se compone en el ancho de la página, no dentro de una tarjeta gris: los
   grupos se separan con filetes y numeración, como el resto del sistema.     */

.page-contacto .quote-form {
  max-width: 56rem;
}

.page-contacto .qf-intro {
  margin: 0 0 var(--space-lg);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.page-contacto .qf-group {
  margin: 0;
  padding: 0 0 var(--space-lg);
  border: none;
  border-block-end: 1px solid var(--color-border);
}

.page-contacto .qf-group + .qf-group {
  padding-block-start: var(--space-lg);
}

.page-contacto .qf-legend {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-block-end: var(--space-md);
  padding: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

.page-contacto .qf-legend__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  flex: none;
  background-color: var(--buve-primary-soft);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-wide);
  color: var(--buve-primary-dark);
}

.page-contacto .qf-row {
  display: grid;
  gap: var(--space-md);
}

.page-contacto .qf-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  margin-block-end: var(--space-md);
}

.page-contacto .qf-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

/* El asterisco acompaña a un texto oculto «(obligatorio)»: la obligatoriedad
   nunca depende solo del color ni solo del símbolo. */
.page-contacto .qf-req {
  color: var(--buve-primary-dark);
  font-weight: var(--fw-bold);
}

.page-contacto .qf-opt {
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
}

.page-contacto .qf-input {
  inline-size: 100%;
  /* 16px evita el zoom automático de iOS al enfocar un campo. */
  font-size: 1rem;
  min-block-size: 3rem;
  padding: var(--space-2xs) var(--space-xs);
  background-color: var(--buve-white);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  transition: var(--transition-colors);
}

.page-contacto .qf-input:hover {
  border-color: var(--color-text-muted);
}

.page-contacto .qf-input:focus-visible {
  border-color: var(--buve-primary);
}

.page-contacto .qf-input--area {
  min-block-size: 9rem;
  resize: vertical;
  line-height: var(--lh-body);
}

.page-contacto .qf-help,
.page-contacto .qf-hint {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.page-contacto .qf-hint {
  margin-block-start: calc(var(--space-md) * -1 + var(--space-2xs));
}

.page-contacto .qf-count {
  font-variant-numeric: tabular-nums;
}

/* Aviso de que los datos técnicos son opcionales. */
.page-contacto .qf-optional-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  margin: 0 0 var(--space-md);
  padding: var(--space-xs) var(--space-sm);
  max-width: none;
  background-color: var(--buve-primary-soft);
  border-inline-start: 3px solid var(--buve-primary);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--buve-primary-darker);
}

.page-contacto .qf-optional-note .icon {
  margin-block-start: 0.2em;
  flex: none;
}

/* Bloque de fotografías: sustituye al selector de archivos. */
.page-contacto .qf-photos {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-block-start: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.page-contacto .qf-photos__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  flex: none;
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-sm);
  color: var(--buve-primary-dark);
}

.page-contacto .qf-photos__title {
  margin: 0 0 var(--space-3xs);
  font-size: var(--fs-h4);
}

.page-contacto .qf-photos__text {
  margin: 0;
  max-width: 60ch;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.page-contacto .qf-check {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  /* Área táctil cómoda para la casilla. */
  min-block-size: 2.75rem;
  margin-block-start: var(--space-2xs);
  font-size: var(--fs-sm);
  cursor: pointer;
}

.page-contacto .qf-check input {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  flex: none;
  accent-color: var(--buve-primary);
}

.page-contacto .qf-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-block-start: var(--space-lg);
}

.page-contacto .qf-submit {
  inline-size: 100%;
}

/* Aviso de privacidad simplificado: dentro del formulario, antes del boton.
   Siempre visible; no depende de JavaScript, hover ni modal. */
.page-contacto .qf-legal {
  margin-block: var(--space-md) var(--space-lg);
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-alt);
}

.page-contacto .qf-legal__title {
  margin: 0 0 var(--space-xs);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.page-contacto .qf-legal p {
  margin: 0;
  max-width: 68ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

.page-contacto .qf-legal p + p {
  margin-block-start: var(--space-xs);
}

.page-contacto .qf-legal a {
  overflow-wrap: anywhere;
}

/* Región de estado: vacía hasta que el visitante pulsa el botón. */
.page-contacto .qf-status:empty {
  display: none;
}

.page-contacto .qf-status {
  margin: var(--space-md) 0 0;
  padding: var(--space-sm) var(--space-md);
  max-width: 62ch;
  background-color: var(--buve-primary-soft);
  border-inline-start: 3px solid var(--buve-primary);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--buve-primary-darker);
}

.page-contacto .qf-status__link {
  font-weight: var(--fw-semibold);
}

/* Alternativa mostrada solo cuando no hay JavaScript (ver nojs.css). */
.page-contacto .qf-noscript {
  margin-block-end: var(--space-xl);
  padding: var(--space-lg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
}

.page-contacto .qf-noscript__title {
  margin: 0 0 var(--space-2xs);
  font-size: var(--fs-h4);
}

.page-contacto .qf-noscript__text {
  margin: 0 0 var(--space-md);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.page-contacto .qf-noscript__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-md);
}

.page-contacto .qf-noscript__list li {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.page-contacto .qf-noscript__list .icon {
  color: var(--buve-primary);
}

@media (min-width: 640px) {
  .page-contacto .qf-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-contacto .qf-submit {
    inline-size: auto;
  }
}

@media (min-width: 900px) {
  .page-contacto .qf-row--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- Contacto: qué información ayuda --------------------------------------- */

.page-contacto .helps {
  display: grid;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-contacto .help {
  padding: var(--space-lg);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.page-contacto .help__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  margin-block-end: var(--space-sm);
  background-color: var(--buve-primary-soft);
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--buve-primary-dark);
}

.page-contacto .help__title {
  margin: 0 0 var(--space-2xs);
  font-size: var(--fs-h4);
}

.page-contacto .help__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

@media (min-width: 700px) {
  .page-contacto .helps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .page-contacto .helps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --- Contacto: canales directos -------------------------------------------- */

.page-contacto .channels {
  display: grid;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-contacto .channel {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding-block-start: var(--space-md);
  border-block-start: 2px solid var(--buve-primary);
}

.page-contacto .channel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  flex: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--buve-primary-dark);
}

.page-contacto .channel__title {
  margin: 0 0 var(--space-3xs);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.page-contacto .channel__value {
  margin: 0;
  font-size: var(--fs-md);
}

.page-contacto .channel__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-md);
}

@media (min-width: 800px) {
  .page-contacto .channels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
  }
}

/* --- Contacto: ubicación y próximo paso ------------------------------------ */

.page-contacto .place {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}

.page-contacto .place__title {
  margin-block: var(--space-sm) var(--space-md);
  max-width: 18ch;
}

.page-contacto .place__lead {
  margin: 0;
  max-width: 52ch;
  color: var(--color-text-muted);
}

.page-contacto .place__address {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  padding: var(--space-md);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-style: normal;
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
}

.page-contacto .place__icon {
  flex: none;
  color: var(--buve-primary);
}

.page-contacto .next {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

.page-contacto .next__title {
  margin-block: var(--space-sm) var(--space-md);
  max-width: 20ch;
}

.page-contacto .next__lead {
  margin: 0;
  max-width: 52ch;
  color: var(--color-text-inverse-muted);
}

.page-contacto .next__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-sm);
}

.page-contacto .next__phone {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-text-inverse-muted);
}

.page-contacto .next__phone a {
  color: var(--buve-white);
  font-weight: var(--fw-medium);
}

@media (min-width: 480px) {
  .page-contacto .next__actions {
    align-items: flex-start;
  }
}

@media (min-width: 900px) {
  .page-contacto .place {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
  }

  .page-contacto .next {
    grid-template-columns: 1.25fr 1fr;
    gap: var(--space-3xl);
  }
}

/* --- 404 --- */
.page-404 .error-title {
  margin: var(--space-sm) 0 var(--space-md);
}

.page-404 .actions {
  margin-block: var(--space-xl);
}

.page-404 .subtitle {
  margin-block-end: var(--space-sm);
  padding-block-start: var(--space-lg);
  border-block-start: 1px solid var(--color-border);
  font-size: var(--fs-h4);
}

.page-404 .links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 18. Movimiento reducido -------------------------------------------------- */

@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;
  }

  .btn:active:not(:disabled),
  .service-card:hover,
  .whatsapp-float:hover,
  :is(.page-home, .page-servicios) .svc:hover {
    transform: none;
  }

  .arrow-link:hover .arrow-link__icon,
  .btn:hover:not(:disabled) .btn__arrow,
  :is(.page-home, .page-servicios) .svc:hover .svc__arrow {
    transform: none;
  }
}

/* 19. Impresión ------------------------------------------------------------ */

@media print {
  .site-header,
  .site-footer,
  .whatsapp-float,
  .skip-link {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }
}