/* ═══════════════════════════════════════════════════════════════════
   JOU_proyect · sistema visual de la web
   Fuente: manual de marca (JOU_brand.md), handoff del 8-9-2026
   (preset Maia bbVKmji con fuentes JOU) y edición editorial 64:220.
   Colores por nombre de rampa; los componentes consumen roles por
   superficie (.surface-dark por defecto, .surface-light).
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Fuentes (alojadas aquí; OFL) ─── */
@font-face {
  font-family: "Space Grotesk JOU";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/SpaceGrotesk-wght.woff2") format("woff2-variations"),
       url("../fonts/SpaceGrotesk-wght.woff2") format("woff2");
}
@font-face {
  font-family: "Kode Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/KodeMono-wght-latin.woff2") format("woff2-variations"),
       url("../fonts/KodeMono-wght-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Kode Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/KodeMono-wght-latin-ext.woff2") format("woff2-variations"),
       url("../fonts/KodeMono-wght-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/SpaceMono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/SpaceMono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ─── Tokens de marca (rampas aprobadas) ─── */
:root {
  --vanilla-100: #F4F2F0;
  --vanilla-200: #E2DDD8;
  --vanilla-300: #D1C8C0;
  --vanilla-700: #877563;
  --vanilla-900: #574B40;
  --charcoal-400: #B1B1B1;
  --charcoal-700: #707070;
  --charcoal-1000: #2F2F2F;
  --charcoal-1100: #191919;
  --charcoal-1200: #0D0D0D;
  --teal-400: #63FEEA;
  --teal-800: #01B09A;
  --teal-1000: #016155;
  --teal-1100: #003D35;
  --teal-1200: #001916;
  --sun-500: #F5CA45;
  --sun-600: #F3BE1C;
  --emerald-800: #07CB9C;
  --emerald-1000: #047257;
  --emerald-1100: #024535;
  --cyan-600: #00BFFF;
  --cyan-900: #00698C;
  --rubi-300: #FF8E8E;
  --rubi-500: #FF3737;
  --rubi-800: #BC0000;
  --orange-400: #FF9F5C;
  --orange-600: #FF6900;
  --orange-900: #8C3A00;

  /* Tipografía */
  --font-display: "Kode Mono", ui-monospace, monospace;
  --font-body: "Space Grotesk JOU", "Space Grotesk", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;
  --ff-reading: "case" 1, "ss01" 1;
  --ff-display: "case" 1, "ss01" 1, "ss04" 1, "ss05" 1;

  /* Medidas Maia (radio small = .45rem) */
  --radius: .45rem;
  --radius-xl: calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-4xl: calc(var(--radius) * 2.6);

  /* Retícula: 12 / 8 / 4 columnas, módulo de 8 px */
  --gutter: 24px;
  --column-gap: 24px;
  --content-max: 1392px;
  --header-h: 64px;
  --header-space: 88px;
  --section-y: clamp(48px, 6vw, 80px);
}

@media (max-width: 599px) {
  :root { --gutter: 16px; --column-gap: 16px; }
}

/* ─── Roles por superficie y tema ───
   El tema sigue al sistema: oscuro (Charcoal) por defecto y claro (Vanilla)
   con prefers-color-scheme: light. Superficies:
   · base: la del tema · inverse: la contraria (ritmo editorial del manual)
   · accent: Teal/1100, estructura y proceso, igual en los dos temas
   · dark / light: fijas (pie, avisos).
   Sun/600 solo sobre fondo oscuro, como pide el manual: en claro el acento y
   la acción principal pasan a Teal/1000. */
:root,
.surface-base,
.surface-dark {
  --bg: var(--charcoal-1100);
  --fg: var(--vanilla-100);
  --fg-muted: var(--vanilla-300);
  --line: rgba(244, 242, 240, .16);
  --line-strong: var(--charcoal-700);
  --label: var(--teal-800);
  --accent-text: var(--sun-600);
  --primary: var(--sun-600);
  --primary-fg: var(--charcoal-1100);
  --primary-hover: var(--sun-500);
  --accent-bg: var(--charcoal-1000);
  --raised: var(--charcoal-1000);
  --ring: var(--sun-600);
  --placeholder: var(--charcoal-400);
  --bar-bg: rgba(25, 25, 25, .9);
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23D1C8C0' d='M16 22 6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z'/%3E%3C/svg%3E");
  --success: var(--emerald-800);
  --info: var(--cyan-600);
  --error: var(--rubi-500);
  --warning: var(--orange-600);
}

.surface-light,
.surface-inverse {
  --bg: var(--vanilla-100);
  --fg: var(--charcoal-1100);
  --fg-muted: var(--vanilla-900);
  --line: rgba(25, 25, 25, .25);
  --line-strong: var(--vanilla-700);
  --label: var(--teal-1000);
  --accent-text: var(--teal-1000);
  --primary: var(--teal-1000);
  --primary-fg: var(--vanilla-100);
  --primary-hover: var(--teal-1100);
  --accent-bg: var(--vanilla-200);
  --raised: var(--vanilla-200);
  --ring: var(--teal-1000);
  --placeholder: var(--vanilla-900);
  --bar-bg: rgba(244, 242, 240, .9);
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23574B40' d='M16 22 6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z'/%3E%3C/svg%3E");
  --success: var(--emerald-1100);
  --info: var(--cyan-900);
  --error: var(--rubi-800);
  --warning: var(--orange-900);
}

@media (prefers-color-scheme: light) {
  :root,
  .surface-base {
    --bg: var(--vanilla-100);
    --fg: var(--charcoal-1100);
    --fg-muted: var(--vanilla-900);
    --line: rgba(25, 25, 25, .25);
    --line-strong: var(--vanilla-700);
    --label: var(--teal-1000);
    --accent-text: var(--teal-1000);
    --primary: var(--teal-1000);
    --primary-fg: var(--vanilla-100);
    --primary-hover: var(--teal-1100);
    --accent-bg: var(--vanilla-200);
    --raised: var(--vanilla-200);
    --ring: var(--teal-1000);
    --placeholder: var(--vanilla-900);
    --bar-bg: rgba(244, 242, 240, .9);
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23574B40' d='M16 22 6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z'/%3E%3C/svg%3E");
    --success: var(--emerald-1100);
    --info: var(--cyan-900);
    --error: var(--rubi-800);
    --warning: var(--orange-900);
  }

  .surface-inverse {
    --bg: var(--charcoal-1100);
    --fg: var(--vanilla-100);
    --fg-muted: var(--vanilla-300);
    --line: rgba(244, 242, 240, .16);
    --line-strong: var(--charcoal-700);
    --label: var(--teal-800);
    --accent-text: var(--sun-600);
    --primary: var(--sun-600);
    --primary-fg: var(--charcoal-1100);
    --primary-hover: var(--sun-500);
    --accent-bg: var(--charcoal-1000);
    --raised: var(--charcoal-1000);
    --ring: var(--sun-600);
    --placeholder: var(--charcoal-400);
    --bar-bg: rgba(25, 25, 25, .9);
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23D1C8C0' d='M16 22 6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z'/%3E%3C/svg%3E");
    --success: var(--emerald-800);
    --info: var(--cyan-600);
    --error: var(--rubi-500);
    --warning: var(--orange-600);
  }
}

.surface-accent {
  --bg: var(--teal-1100);
  --fg: var(--vanilla-100);
  --fg-muted: var(--vanilla-300);
  --line: rgba(244, 242, 240, .16);
  --line-strong: var(--teal-800);
  --label: var(--teal-400);
  --accent-text: var(--sun-600);
  --primary: var(--sun-600);
  --primary-fg: var(--charcoal-1100);
  --primary-hover: var(--sun-500);
  --accent-bg: var(--teal-1000);
  --raised: var(--teal-1200);
  --ring: var(--sun-600);
  --placeholder: var(--vanilla-300);
  --bar-bg: rgba(25, 25, 25, .9);
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23D1C8C0' d='M16 22 6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z'/%3E%3C/svg%3E");
  --success: var(--emerald-800);
  --info: var(--cyan-600);
  --error: var(--rubi-300);
  --warning: var(--orange-400);
}

.surface-base,
.surface-dark,
.surface-light,
.surface-inverse,
.surface-accent {
  background: var(--bg);
  color: var(--fg);
}

.accent { color: var(--accent-text); }

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-space) + 16px);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  font-feature-settings: var(--ff-reading);
  font-kerning: normal;
  font-variant-numeric: lining-nums proportional-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

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

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

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

a:hover { text-decoration-thickness: 2px; }

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

::selection {
  background: var(--sun-600);
  color: var(--charcoal-1100);
}

sup { font-variant-position: super; }
sub { font-variant-position: sub; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-xl);
  background: var(--vanilla-100);
  color: var(--charcoal-1100);
  font-weight: 500;
  transform: translateY(-200%);
}

.skip-link:focus { transform: none; }

/* ─── Tipografía por función ─── */
.t-display,
.t-page {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}

/* Portada: hasta 128 px según el manual; aquí hasta 96 px para que el mensaje
   y los botones quepan en la primera pantalla. */
.t-display { font-size: clamp(2.5rem, 7vw, 6rem); }
.t-page { font-size: clamp(2rem, 4.5vw, 3.5rem); }

.t-section {
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 2.25rem;
  letter-spacing: 0;
}

.t-title {
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 2rem;
  font-feature-settings: var(--ff-display);
}

.t-lead {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.t-ui {
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.t-label,
.t-data {
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 400;
  line-height: 1rem;
  font-variant-numeric: lining-nums tabular-nums slashed-zero;
}

.t-label { color: var(--label); }

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

/* ─── Retícula ─── */
.wrap {
  width: 100%;
  max-width: calc(var(--content-max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--column-gap);
}

@media (max-width: 899px) {
  .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.section { padding-block: var(--section-y); }
.section:not([class*="surface-"]) + .section:not([class*="surface-"]) { padding-top: 0; }

.section-foot { margin-top: 40px; }
.row__body .actions { margin-top: 8px; }

/* Cabecera de sección: regla con etiqueta y número, título en la parte
   dominante de la L y entradilla como contrapunto. */
.section-head {
  row-gap: 16px;
  margin-bottom: 40px;
}

.section-rule {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--fg-muted);
}

.section-rule span:last-child { color: var(--label); }

.section-head h2 {
  grid-column: 1 / 8;
  margin-top: 24px;
}

.section-head .intro {
  grid-column: 8 / 13;
  margin-top: 24px;
  color: var(--fg-muted);
}

@media (max-width: 899px) {
  .section-head h2,
  .section-head .intro { grid-column: 1 / -1; }
  .section-head .intro { margin-top: 0; }
  .section-head { margin-bottom: 32px; }
}

/* ─── Iconos (Carbon, monocromos) ─── */
.icon {
  width: 16px;
  height: 16px;
  flex: none;
  fill: currentColor;
}

.icon--20 { width: 20px; height: 20px; }
.icon--24 { width: 24px; height: 24px; }

/* ─── Botones (Maia: 36 px, lg 40 px, radio 4xl, foco de 3 px) ─── */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-4xl);
  background: transparent;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25rem;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 100ms, border-color 100ms, color 100ms;
}

.button:hover { text-decoration: none; }
.button:active { transform: translateY(1px); }
.button:disabled,
.button[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.button--primary {
  background: var(--primary);
  color: var(--primary-fg);
}

.button--primary:hover { background: var(--primary-hover); }

.button--outline { border-color: var(--line-strong); }
.button--outline:hover,
.button--ghost:hover { background: var(--accent-bg); }

.button--sm {
  min-height: 36px;
  padding: 0 12px;
}

.button--icon {
  width: 44px;
  min-height: 44px;
  padding: 0;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Enlace de texto con flecha */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25rem;
  text-decoration: underline;
}

.text-link .icon { color: var(--accent-text); }

/* ─── Estado (siempre icono + texto) ─── */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: .75rem;
  line-height: 1rem;
}

.status--ok { color: var(--success); }
.status--info { color: var(--info); }

/* ─── Cabecera del sitio ───
   Barra flotante alineada con los márgenes del contenido. Fondo traslúcido
   con desenfoque, como el menú Maia (menuColor default-translucent);
   sin sombras. El contenido de la página pasa por debajo. */
.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  height: var(--header-space);
  padding-top: 12px;
  pointer-events: none;
}

/* El fondo de cada página (también el de NutriRenal y Venzen) llega hasta
   arriba, por debajo de la barra. */
body > main {
  margin-top: calc(-1 * var(--header-space));
  padding-top: var(--header-space);
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--header-h);
  padding: 0 12px 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
  background: var(--bar-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--fg);
  pointer-events: auto;
}

.brand-link {
  display: block;
  flex: none;
  margin-right: auto;
  padding: 4px 0;
  border-radius: var(--radius-xl);
}

/* Imagotipo completo a 240 px: excepción expresa de Jesús al mínimo preferido
   de 340 px del manual, para que la barra quede proporcionada (unos 37 px de
   alto visible). Igual en todos los anchos. El SVG trae margen interior
   (x 20, y 7 de 50; abajo 6): se compensa para que el símbolo arranque en
   el borde interior de la barra. */
.header-logo {
  width: 240px;
  max-width: none;
  height: auto;
  margin: calc(240px * -7 / 240) 0 calc(240px * -6 / 240) calc(240px * -20 / 240);
}

.site-nav > ul {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a,
.nav-apps summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--radius-xl);
  color: var(--fg-muted);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25rem;
  text-decoration: none;
  text-underline-offset: 6px;
  cursor: pointer;
}

.site-nav a:hover,
.nav-apps summary:hover {
  color: var(--fg);
  text-decoration: underline;
}

.site-nav a[aria-current],
.nav-apps summary[data-current] {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--accent-text);
  text-decoration-thickness: 2px;
}

/* Desplegable «Apps» (<details>: funciona también sin JavaScript) */
.nav-apps { position: relative; }
.nav-apps summary { list-style: none; }
.nav-apps summary::-webkit-details-marker { display: none; }
.nav-apps summary .icon { transition: transform 100ms; }
.nav-apps details[open] summary .icon { transform: rotate(180deg); }

.nav-menu {
  position: absolute;
  z-index: 5;
  top: calc(100% + 14px);
  right: 0;
  display: grid;
  gap: 2px;
  min-width: 336px;
  margin: 0;
  padding: 4px;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
  background: var(--bar-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.site-nav .nav-menu a {
  display: flex;
  gap: 12px;
  min-height: 0;
  padding: 8px 12px;
  color: var(--fg);
  text-decoration: none;
}

.site-nav .nav-menu a:hover,
.site-nav .nav-menu a[aria-current] { background: var(--accent-bg); }

.nav-menu img { width: 32px; height: 32px; flex: none; }
.nav-menu strong { display: block; font-weight: 500; }
.nav-menu .t-data { display: block; color: var(--fg-muted); }

.header-cta { margin-left: 8px; }
.menu-toggle { display: none; }

@media (max-width: 879px) {
  .site-nav,
  .header-cta { display: none; }
  .menu-toggle { display: inline-flex; }
}

/* En móviles estrechos solo cabe el icono; el texto sigue para lectores. */
@media (max-width: 374px) {
  .menu-toggle { width: 44px; padding: 0; }
  .menu-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

/* Menú móvil: <dialog> nativo (foco atrapado y Escape sin código extra) */
.menu-dialog {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--bg);
  color: var(--fg);
}

.menu-dialog::backdrop { background: rgba(25, 25, 25, .8); }
.menu-dialog > .wrap { padding-top: 12px; }

.menu-dialog nav ul {
  padding: 16px 0 0;
  list-style: none;
}

.menu-dialog nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  border-bottom: 1px solid var(--line);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 2rem;
  text-decoration: none;
  font-feature-settings: var(--ff-display);
}

.menu-dialog nav .menu-sub a {
  min-height: 56px;
  padding-left: 24px;
  font-size: 1.125rem;
  line-height: 1.5rem;
}

.menu-dialog nav .menu-sub .t-data { color: var(--label); }

.menu-dialog nav a[aria-current] {
  text-decoration: underline;
  text-decoration-color: var(--accent-text);
  text-decoration-thickness: 2px;
}

.menu-dialog__contact {
  display: grid;
  gap: 4px;
  padding-block: 32px;
  color: var(--fg-muted);
}

/* ─── Portada ───
   Compacta: etiqueta, mensaje, entradilla y acciones en la primera pantalla.
   La firma de marca ya está en la cabecera. */
.hero {
  display: grid;
  justify-items: start;
  gap: 24px;
  padding-block: clamp(40px, 7vw, 96px) clamp(40px, 5vw, 64px);
}

.hero h1 { max-width: 14ch; }
.hero-lead { max-width: 36rem; color: var(--fg-muted); }
.hero .actions { margin-top: 8px; }

/* ─── Cabecera de página interior ─── */
.page-hero {
  padding-block: clamp(40px, 6vw, 72px) clamp(24px, 3vw, 40px);
}

.page-hero .t-label { margin-bottom: 16px; }

.page-hero .t-lead {
  max-width: 40rem;
  margin-top: 16px;
  color: var(--fg-muted);
}

/* ─── Lista de servicios / pasos (filas separadas por líneas) ─── */
.rows {
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.row {
  row-gap: 16px;
  padding-block: 24px;
  border-bottom: 1px solid var(--line);
}

.row__index {
  grid-column: 1 / 2;
  padding-top: 6px;
  color: var(--label);
}

.row__title {
  grid-column: 2 / 6;
}

.row__body {
  grid-column: 7 / 13;
  display: grid;
  gap: 16px;
  align-content: start;
  color: var(--fg-muted);
}

.row__body strong { color: var(--fg); font-weight: 500; }

@media (max-width: 899px) {
  .row__index { grid-column: 1 / -1; padding-top: 0; }
  .row__title,
  .row__body { grid-column: 1 / -1; }
}

/* Sistema modular del manual: cuadrados de 16 px (2 módulos de 8) que
   señalan la progresión de un proceso. Teal = estructura; Sun = el paso
   que se activa. La cantidad responde al contenido (3 pasos, 3 módulos). */
.modules {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 4px;
  margin-top: 12px;
}

.modules i {
  display: block;
  width: 16px;
  height: 16px;
  background: var(--teal-1000);
}

.modules[data-step="1"] i:nth-child(-n+1),
.modules[data-step="2"] i:nth-child(-n+2),
.modules[data-step="3"] i:nth-child(-n+3) { background: var(--teal-800); }

.modules[data-step="1"] i:nth-child(1),
.modules[data-step="2"] i:nth-child(2),
.modules[data-step="3"] i:nth-child(3) { background: var(--sun-600); }

.row__index { display: flex; flex-direction: column; align-items: flex-start; }

/* Lista de detalles con guion editorial */
.details {
  display: grid;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.details li {
  display: flex;
  gap: 12px;
}

.details li::before {
  content: "/";
  color: var(--label);
  font-family: var(--font-mono);
}

/* ─── Accesos a servicios (tarjetas enlazadas) ─── */
.offers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--column-gap);
  padding: 0;
  list-style: none;
}

@media (max-width: 1023px) { .offers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .offers { grid-template-columns: 1fr; } }

.offer {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 8px;
  height: 100%;
  padding: 24px;
  border-radius: var(--radius-xl);
  background: var(--raised);
  color: var(--fg);
  text-decoration: none;
}

.offer > span:not(.t-title) { color: var(--fg-muted); }
.offer .icon { color: var(--accent-text); margin-top: 8px; }
a.offer:hover { box-shadow: inset 0 0 0 1px var(--fg); }
a.offer:hover .icon { transform: translateX(2px); }
.offers--plain .offer { grid-template-rows: auto 1fr; }

/* ─── Pasos (Cómo trabajamos) ─── */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--column-gap);
  padding: 0;
  list-style: none;
}

@media (max-width: 767px) { .steps { grid-template-columns: 1fr; gap: 32px; } }

.steps li {
  display: grid;
  align-content: start;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.steps .modules { margin-top: 0; }
.steps h3 .t-data { color: var(--label); margin-right: 4px; }
.steps p { color: var(--fg-muted); }

/* ─── Desplegables de servicios (<details>) ─── */
.accordion { border-top: 1px solid var(--line); }

.acc { border-bottom: 1px solid var(--line); }

.acc summary {
  display: grid;
  grid-template-columns: 48px minmax(0, 4fr) minmax(0, 6fr) 24px;
  align-items: center;
  gap: 16px;
  min-height: 80px;
  padding-block: 16px;
  list-style: none;
  cursor: pointer;
}

.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover .acc__title { text-decoration: underline; text-underline-offset: 6px; }
.acc__index { color: var(--label); }
.acc__teaser { color: var(--fg-muted); }
.acc summary .icon { color: var(--accent-text); transition: transform 100ms; }
.acc[open] summary .icon { transform: rotate(180deg); }

.acc__body {
  display: grid;
  gap: 24px;
  padding: 0 0 32px 64px;
}

@media (max-width: 767px) {
  .acc summary {
    grid-template-columns: 32px minmax(0, 1fr) 24px;
    row-gap: 4px;
  }
  .acc__teaser { grid-column: 2 / 3; grid-row: 2; }
  .acc summary .icon { grid-column: 3; grid-row: 1; }
  .acc__body { padding-left: 48px; }
}

@media (max-width: 599px) {
  .acc__body { padding-left: 0; }
}

/* ─── Proyectos ─── */
.projects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--column-gap);
  padding: 0;
  list-style: none;
}

.project {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 16px;
  padding: 24px;
  border-radius: var(--radius-xl);
  background: var(--raised);
}

.project { position: relative; }

/* Si la ficha tiene destino, toda la tarjeta es clicable (enlace extendido). */
.project__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.project--link:hover { box-shadow: inset 0 0 0 1px var(--fg); }
.project--link:hover .project__link { text-decoration-thickness: 2px; }
.project--link:has(.project__link:focus-visible) { outline: 3px solid var(--ring); outline-offset: 3px; }
.project__link:focus-visible { outline: none; }

.project__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.project__mark {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.project__mark--wide { width: 112px; }

/* Logos de cliente en blanco: siempre sobre una teja oscura */
.project__mark--tile {
  box-sizing: content-box;
  padding: 8px 12px;
  border-radius: var(--radius-xl);
  background: var(--charcoal-1100);
}

/* Tarjeta de contacto en la banda Teal */
.contact-card {
  padding: 24px;
  border-radius: var(--radius-xl);
}

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

.project p:not([class]) { color: var(--fg-muted); }

.project .t-title { margin-top: 8px; }

@media (max-width: 767px) {
  .projects { grid-template-columns: 1fr; }
}

/* ─── Bloque de dos columnas (texto + apoyo) ─── */
.split {
  row-gap: 40px;
}

.split__main { grid-column: 1 / 8; display: grid; gap: 24px; align-content: start; }
.split__aside { grid-column: 9 / 13; display: grid; gap: 24px; align-content: start; }

@media (max-width: 899px) {
  .split__main,
  .split__aside { grid-column: 1 / -1; }
}

.prose {
  display: grid;
  gap: 24px;
  max-width: 44rem;
}

.prose p { color: var(--fg-muted); }
.prose h2 { margin-top: 24px; }
.prose ul { display: grid; gap: 8px; padding-left: 20px; color: var(--fg-muted); }

/* Datos de contacto */
.facts {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.facts div {
  display: grid;
  gap: 4px;
  padding-block: 16px;
  border-bottom: 1px solid var(--line);
}

.facts dt { color: var(--fg-muted); }
.facts dd a { font-weight: 500; }

/* Lista de herramientas (dato secundario, Space Mono) */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.tags li {
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-4xl);
}

/* ─── Llamada final ─── */
.closing {
  row-gap: 32px;
  align-items: end;
}

.closing h2 { grid-column: 1 / 8; }
.closing .closing__copy { grid-column: 8 / 13; display: grid; gap: 24px; }
.closing .closing__copy p { color: var(--fg-muted); }

@media (max-width: 899px) {
  .closing h2,
  .closing .closing__copy { grid-column: 1 / -1; }
}

/* ─── Formularios ─── */
.form {
  display: grid;
  gap: 24px;
}

.form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

@media (max-width: 599px) {
  .form__row { grid-template-columns: 1fr; }
}

.field {
  display: grid;
  gap: 8px;
}

.field label {
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 40px;
  padding: 4px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-4xl);
  background: var(--bg);
  color: var(--fg);
  font-size: .875rem;
  line-height: 1.25rem;
}

.field textarea {
  min-height: 144px;
  padding: 10px 12px;
  border-radius: var(--radius-2xl);
  resize: vertical;
}

.field select {
  appearance: none;
  padding-right: 40px;
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}

.field ::placeholder { color: var(--placeholder); opacity: 1; }

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 1px;
}

.field [aria-invalid="true"] {
  border: 2px solid var(--error);
}

.field__error,
.form__message {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: .875rem;
  line-height: 1.25rem;
}

.field__error { color: var(--error); }
.field__error[hidden] { display: none; }

.form__message[data-tone="error"] { color: var(--error); }
.form__message[data-tone="info"] { color: var(--fg); }
.form__message[data-tone="ok"] { color: var(--success); }
.form__message .icon { margin-top: 2px; }

.form__legal {
  font-size: .875rem;
  line-height: 1.25rem;
  color: var(--fg-muted);
}

@media (max-width: 899px) {
  .field input,
  .field select,
  .field textarea { font-size: 1rem; }
}

/* Honeypot fuera de la vista */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ─── Diálogo de contacto (Maia: 448 px, padding y gap 24 px) ─── */
.dialog {
  width: calc(100% - 32px);
  max-width: 448px;
  max-height: calc(100% - 32px);
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-4xl);
  overflow-y: auto;
}

.dialog::backdrop {
  background: rgba(25, 25, 25, .8);
  backdrop-filter: blur(4px);
}

.dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.dialog__head p { margin-top: 8px; color: var(--fg-muted); font-size: .875rem; }

.dialog__close { margin: -8px -8px 0 0; }

@media (prefers-reduced-motion: no-preference) {
  .dialog[open] { animation: dialog-in 100ms ease-out; }
}

@keyframes dialog-in {
  from { opacity: 0; transform: scale(.95); }
  to { opacity: 1; transform: none; }
}

/* ─── Pie ─── */
.site-footer {
  padding-block: 64px 32px;
  background: var(--charcoal-1200);
  color: var(--vanilla-100);
}

.site-footer .grid { row-gap: 48px; }

.footer-brand {
  grid-column: 1 / 6;
  display: grid;
  gap: 24px;
  align-content: start;
}

.footer-brand img {
  width: 340px;
  max-width: none;
  height: auto;
  margin-left: calc(340px * -20 / 240);
}

.footer-brand p { color: var(--vanilla-300); }
.footer-brand .t-lead { color: var(--vanilla-100); }

.footer-nav { grid-column: 7 / 10; }
.footer-contact { grid-column: 10 / 13; }

.footer-nav ul,
.footer-contact ul {
  display: grid;
  gap: 0;
  margin-top: 16px;
  padding: 0;
  list-style: none;
}

.footer-nav a,
.footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  color: var(--vanilla-300);
  font-size: .875rem;
  text-decoration: none;
}

.footer-nav a:hover,
.footer-contact a:hover {
  color: var(--vanilla-100);
  text-decoration: underline;
}

.footer-legal {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(244, 242, 240, .16);
  color: var(--vanilla-300);
}

.footer-legal > span { display: inline-flex; align-items: center; }

.footer-legal a,
.footer-legal button {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--vanilla-300);
  font-family: var(--font-mono);
  font-size: .75rem;
  line-height: 1rem;
  text-decoration: underline;
  cursor: pointer;
}

.footer-legal a:hover,
.footer-legal button:hover { color: var(--vanilla-100); }

@media (max-width: 899px) {
  .footer-brand { grid-column: 1 / -1; }
  .footer-nav { grid-column: 1 / 5; }
  .footer-contact { grid-column: 5 / -1; }
}

@media (max-width: 599px) {
  .footer-nav,
  .footer-contact { grid-column: 1 / -1; }
}

@media (max-width: 371px) {
  .footer-brand img { width: 240px; margin-left: calc(240px * -20 / 160); }
}

/* ─── Movimiento reducido ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .button:active { transform: none; }
}