/* ==========================================================================
   Novutec Dominicana
   Sistema visual: habilidad mi-estilo. Los tokens de :root vienen de ahí.
   Todo lo marcado DERIVADO no existe en mi-estilo y se documenta en el README.
   ========================================================================== */

@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/roboto-mono-latin.woff2') format('woff2');
}

:root {
  /* Colores */
  --color-snow-canvas: #fcfcfc;
  --color-lavender-wash: #f0f4fe;
  --color-midnight-ink: #020520;
  --color-graphite-body: #14141e;
  --color-slate-caption: #374151;
  --color-ash-helper: #6b7280;
  --color-stone-divider: #e2e8f0;
  --color-fog-surface: #f1f5f9;
  --color-novutec-blue: #063970;
  --color-novutec-bright: #0b6fda; /* derivado en mi-estilo */
  --color-cobalt-glow: #3b82f6;
  --color-mint-win: #16ca2e;
  --color-coral-lost: #f26052;
  --color-amber-pending: #ffa64d;
  --color-azure-focus: #0099ff;

  /* Tipografía */
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-roboto-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --text-caption: 12px;        --leading-caption: 1.2;
  --text-body-sm: 14px;        --leading-body-sm: 1.43;   --tracking-body-sm: 0px;
  --text-body: 16px;           --leading-body: 1.63;
  --text-subheading: 20px;     --leading-subheading: 1.4; --tracking-subheading: -0.16px;
  --text-heading-sm: 22px;     --leading-heading-sm: 1.4; --tracking-heading-sm: -0.2px;
  --text-heading: 40px;        --leading-heading: 1.05;   --tracking-heading: -1.48px;
  --text-heading-lg: 56px;     --leading-heading-lg: 1.05;--tracking-heading-lg: -1.51px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Espaciado */
  --spacing-4: 4px;   --spacing-6: 6px;   --spacing-8: 8px;   --spacing-9: 9px;
  --spacing-10: 10px; --spacing-11: 11px; --spacing-12: 12px; --spacing-16: 16px;
  --spacing-20: 20px; --spacing-24: 24px; --spacing-28: 28px; --spacing-32: 32px;
  --spacing-36: 36px; --spacing-40: 40px; --spacing-52: 52px; --spacing-72: 72px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 80px;

  /* Radios */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-3xl-2: 28px;
  --radius-3xl-4: 40px;
  --radius-3xl-5: 44px;
  --radius-full-5: 9999px;

  /* Sombras */
  --shadow-sm: rgba(0, 0, 0, 0.1) 0px 0px 4px -2px;
  --shadow-sm-3: rgba(6, 57, 112, 0.3) 0px 0px 4px -2px;
  --shadow-xl-2: rgba(6, 57, 112, 0.1) 0px 0px 50px -28px, rgba(0, 0, 0, 0.18) 0px 0px 3px -1px;
  --shadow-feature: rgba(0, 0, 0, 0.082) 0px 0.36px 1.8px -1.4px, rgba(0, 0, 0, 0.07) 0px 1.37px 6.87px -2.8px, rgba(0, 0, 0, 0.016) 0px 6px 30px -4.25px;

  /* Superficies */
  --surface-canvas: #fcfcfc;
  --surface-wash: #f0f4fe;
  --surface-card: #ffffff;

  --ease: ease;
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--surface-canvas);
  color: var(--color-graphite-body);
  font-family: var(--font-inter);
  font-size: var(--text-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
strong, b { font-weight: var(--font-weight-semibold); }
a { color: var(--color-novutec-blue); text-underline-offset: 3px; }
button, input, textarea, select { font: inherit; color: inherit; }
svg { display: block; flex: none; }
img { max-width: 100%; }

.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

:focus-visible { outline: 2px solid var(--color-novutec-blue); outline-offset: 2px; }

.container { width: 100%; max-width: var(--page-max-width); margin-inline: auto; padding-inline: var(--spacing-20); }
@media (min-width: 720px) { .container { padding-inline: var(--spacing-32); } }

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

.skip-link {
  position: absolute; left: var(--spacing-16); top: -80px; z-index: 30;
  padding: var(--spacing-12) var(--spacing-20);
  background: var(--surface-card); color: var(--color-novutec-blue);
  border: 1px solid var(--color-novutec-blue); border-radius: var(--radius-full-5);
  font-size: var(--text-body-sm); font-weight: var(--font-weight-medium); text-decoration: none;
}
.skip-link:focus { top: var(--spacing-12); }

/* Marcador de dato pendiente */
.tbc {
  display: inline-flex; align-items: center; gap: var(--spacing-6);
  padding: 1px var(--spacing-8); border: 1px dashed var(--color-ash-helper); border-radius: var(--radius-full-5);
  background: var(--color-fog-surface); color: var(--color-slate-caption);
  font-size: var(--text-caption); line-height: var(--leading-body-sm); font-weight: var(--font-weight-medium); white-space: nowrap;
}
.tbc::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-amber-pending); }

/* ==========================================================================
   Botones: píldora, contorno fantasma. Nunca relleno sólido.
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-8);
  min-height: 48px; padding: 14px var(--spacing-32);
  background: var(--surface-canvas); color: var(--color-novutec-blue);
  border: 1px solid var(--color-novutec-blue); border-radius: var(--radius-full-5);
  font-size: var(--text-body-sm); line-height: var(--leading-body-sm); letter-spacing: var(--tracking-body-sm);
  font-weight: var(--font-weight-medium); text-decoration: none; cursor: pointer;
  transition: background-color 150ms var(--ease), box-shadow 150ms var(--ease), color 150ms var(--ease);
}
.btn:hover { background: var(--color-lavender-wash); box-shadow: var(--shadow-sm-3); }
.btn:active { background: var(--color-fog-surface); }
.btn:disabled { color: var(--color-ash-helper); border-color: var(--color-ash-helper); background: var(--color-fog-surface); box-shadow: none; cursor: not-allowed; }
.btn--lift { background: var(--surface-card); box-shadow: var(--shadow-xl-2); }
.btn--sm { min-height: 44px; padding: var(--spacing-10) var(--spacing-20); } /* DERIVADO: botón chico */
.btn--block { width: 100%; }
.btn .icon { width: 16px; height: 16px; }

.link-cta {
  display: inline-flex; align-items: center; gap: var(--spacing-8);
  min-height: 44px; padding: 0 var(--spacing-16); border-radius: var(--radius-full-5);
  font-size: var(--text-body-sm); line-height: var(--leading-body-sm); font-weight: var(--font-weight-medium);
  color: var(--color-novutec-blue); text-decoration: none;
  transition: background-color 150ms var(--ease);
}
.link-cta:hover { background: var(--color-lavender-wash); }
.link-cta .icon { width: 16px; height: 16px; }
.link-cta .icon--back { transform: rotate(180deg); }

/* ==========================================================================
   Navegación
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(252, 252, 252, 0.8);           /* DERIVADO: canvas al 80% (nav "frosted") */
  -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px);
  border-bottom: 1px solid var(--color-stone-divider);
}
.nav:has(.nav__panel.is-open) { background: var(--surface-canvas); }
.nav__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-16); min-height: var(--spacing-72); }

.brand { display: inline-flex; align-items: center; min-height: 44px; border-radius: var(--radius-lg); }
.brand img { display: block; height: 40px; width: auto; }

.nav__links { display: none; align-items: center; gap: var(--spacing-16); }
.nav__link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--spacing-16);
  border-radius: var(--radius-full-5);
  font-size: 15px; font-weight: var(--font-weight-medium); color: var(--color-graphite-body); text-decoration: none;
  transition: color 150ms var(--ease), background-color 150ms var(--ease);
}
.nav__link:hover, .nav__link[aria-current="true"] { color: var(--color-novutec-blue); }
.nav__link:hover { background: var(--color-lavender-wash); }
.nav__cta { display: none; }

.nav__toggle {
  display: grid; place-items: center; width: 44px; height: 44px;
  background: var(--surface-canvas); color: var(--color-novutec-blue);
  border: 1px solid var(--color-novutec-blue); border-radius: var(--radius-full-5); cursor: pointer;
}
.nav__toggle .icon--close { display: none; }
.nav__toggle[aria-expanded="true"] .icon--menu { display: none; }
.nav__toggle[aria-expanded="true"] .icon--close { display: block; }

.nav__panel { display: none; padding-bottom: var(--spacing-20); }
.nav__panel.is-open { display: block; }
.nav__panel .nav__link { display: flex; width: 100%; }
.nav__panel .btn { margin-top: var(--spacing-12); width: 100%; }

@media (min-width: 900px) {
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .nav__toggle, .nav__panel { display: none !important; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  padding-block: var(--spacing-40);
  background: linear-gradient(180deg, rgba(6, 57, 112, 0.1), rgba(182, 203, 253, 0.4));
  border-radius: 0 0 var(--radius-3xl) var(--radius-3xl);
}
.hero__copy { display: flex; flex-direction: column; align-items: center; text-align: center; }

.badge {
  display: inline-flex; align-items: center; gap: var(--spacing-8);
  padding: var(--spacing-6) var(--spacing-12) var(--spacing-6) var(--spacing-10);
  background: var(--surface-card); border: 1px solid var(--color-stone-divider); border-radius: var(--radius-full-5);
  font-size: var(--text-body-sm); line-height: var(--leading-body-sm); color: var(--color-graphite-body);
}
@media (max-width: 480px) {
  /* el badge se parte en dos líneas: se centra el texto y se oculta el punto decorativo */
  .badge { justify-content: center; text-align: center; text-wrap: balance; }
  .badge .dot { display: none; }
}
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; flex: none; }
.dot--blue { background: var(--color-cobalt-glow); }
.dot--orange { background: var(--color-amber-pending); }
.dot--green { background: var(--color-mint-win); }
.dot--red { background: var(--color-coral-lost); }

.display {
  margin-top: var(--spacing-20); max-width: 960px;
  font-size: var(--text-heading); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading);
  font-weight: var(--font-weight-semibold); color: var(--color-midnight-ink); text-wrap: balance;
}
.display em { font-style: normal; color: var(--color-novutec-bright); }
.lede { margin-top: var(--spacing-20); max-width: 560px; font-size: 18px; line-height: var(--leading-body); color: var(--color-slate-caption); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--spacing-12); margin-top: var(--spacing-32); }

.facts-frame {
  margin-top: var(--spacing-40); padding: var(--spacing-12);
  background: rgba(252, 252, 252, 0.2);
  -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px);
  border-radius: var(--radius-3xl);
}
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-8); }
.fact {
  display: flex; flex-direction: column; gap: var(--spacing-6);
  padding: var(--spacing-12) var(--spacing-16);
  background: var(--surface-card); border: 1px solid var(--color-stone-divider); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  text-align: left;
}
.fact__value { font-family: var(--font-roboto-mono); font-size: 22px; line-height: 1; letter-spacing: -0.03em; font-weight: 500; color: var(--color-novutec-blue); }
.fact__label { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-ash-helper); }

@media (min-width: 720px) {
  .hero { padding-block: var(--spacing-72) var(--spacing-52); border-radius: 0 0 var(--radius-3xl-5) var(--radius-3xl-5); }
  .display { font-size: var(--text-heading-lg); letter-spacing: var(--tracking-heading-lg); line-height: var(--leading-heading-lg); }
  .facts-frame { border-radius: var(--radius-3xl-2); }
  .fact__label { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
}
@media (min-width: 960px) {
  .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-12); }
}

/* ==========================================================================
   Secciones
   ========================================================================== */
.section { padding-block: 0 var(--spacing-52); scroll-margin-top: var(--section-gap); }
.hero + .section { padding-top: var(--spacing-52); }
@media (min-width: 720px) {
  .section { padding-block-end: var(--section-gap); }
  .hero + .section { padding-top: var(--section-gap); }
}
#inicio { scroll-margin-top: 0; }

.section__head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: var(--spacing-40); }
.h2 {
  font-size: var(--text-heading); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading);
  font-weight: var(--font-weight-semibold); color: var(--color-midnight-ink); text-wrap: balance;
}
.section__lede { margin-top: var(--spacing-16); max-width: 560px; font-size: 18px; color: var(--color-slate-caption); }

.grid { display: grid; gap: var(--spacing-12); }
@media (min-width: 720px) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 600px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* servicios: 6 tarjetas dentro de una tarjeta de sección */
.feature .grid--3 { grid-template-columns: 1fr; }
@media (min-width: 720px) { .feature .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .feature .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Tarjeta de sección (feature card) */
.feature {
  padding: var(--spacing-28) var(--spacing-20);
  background: var(--surface-canvas); border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-feature);
}
@media (min-width: 720px) { .feature { padding: var(--spacing-52) var(--spacing-72); border-radius: var(--radius-3xl-4); } }

/* Banda lavanda */
.wash { padding: var(--spacing-40) var(--spacing-20); background: var(--surface-wash); border-radius: var(--radius-3xl); }
@media (min-width: 720px) { .wash { padding: var(--spacing-52) var(--spacing-72); border-radius: var(--radius-3xl-4); } }

/* Tarjetas internas */
.card {
  display: flex; flex-direction: column; gap: var(--spacing-12);
  padding: var(--spacing-24);   /* DESVÍO documentado: 24px en vez de 12px para tarjetas con texto corrido */
  background: var(--surface-card); border: 1px solid var(--color-stone-divider); border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm);
  transition: box-shadow 150ms var(--ease);
}
.card:hover { box-shadow: var(--shadow-sm-3); }
.card--lg { padding: var(--spacing-24) var(--spacing-24) var(--spacing-28); }
@media (min-width: 720px) { .card--lg { padding: var(--spacing-32); } }
.tile { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-xl); background: var(--color-lavender-wash); color: var(--color-novutec-blue); }
.wash .tile { background: var(--color-fog-surface); }
.tile--initials { font-size: var(--text-body-sm); line-height: 1; font-weight: var(--font-weight-semibold); letter-spacing: 0; }
.card__title { font-size: var(--text-subheading); line-height: var(--leading-subheading); letter-spacing: var(--tracking-subheading); font-weight: var(--font-weight-semibold); color: var(--color-graphite-body); }
.card__tagline { margin-top: calc(var(--spacing-4) * -1); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); font-weight: var(--font-weight-medium); color: var(--color-novutec-blue); }
.card__text { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); color: var(--color-slate-caption); }
.card__link { align-self: flex-start; margin: auto 0 calc(var(--spacing-12) * -1) calc(var(--spacing-16) * -1); }
.card__text--lg { font-size: var(--text-body); line-height: var(--leading-body); }

/* Partners */
.partner__logo { display: flex; align-items: center; min-height: 48px; margin: 0; }
/* Logos en monocromo y ~70 % de opacidad, como la "Customer Logo Strip" de mi-estilo (aprox. de #14141e).
   Para mostrarlos a color, quita la línea `filter`. */
.partner__logo img { display: block; max-width: 100%; height: auto; filter: brightness(0); opacity: 0.7; transition: opacity 150ms var(--ease); }
.partner:hover .partner__logo img { opacity: 1; }
.partner__fallback { font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm); letter-spacing: var(--tracking-heading-sm); font-weight: var(--font-weight-semibold); color: var(--color-midnight-ink); }
.partner__fallback[hidden], .partner__logo img[hidden] { display: none; }

/* Equipo */
.certs { margin-top: var(--spacing-12); gap: var(--spacing-20); }
.certs__list { display: grid; gap: var(--spacing-12); }
.cert { display: flex; align-items: center; gap: var(--spacing-12); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); font-weight: var(--font-weight-medium); color: var(--color-graphite-body); }
@media (min-width: 900px) {
  .certs { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--spacing-40); padding: var(--spacing-24) var(--spacing-32); }
  .certs__list { grid-template-columns: repeat(2, auto); gap: var(--spacing-32); }
}

/* ==========================================================================
   Contacto y formulario
   ========================================================================== */
.contact { display: grid; gap: var(--spacing-40); }
@media (min-width: 960px) { .contact { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--spacing-52); } }
.contact__intro .section__lede { max-width: 420px; }
.contact__intro .h2 { text-align: left; }
.contact__list { display: grid; gap: var(--spacing-16); margin-top: var(--spacing-32); }
.contact__item { display: flex; align-items: flex-start; gap: var(--spacing-12); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); color: var(--color-slate-caption); }
.contact__label { display: block; font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-ash-helper); margin-bottom: var(--spacing-4); }
.contact__value { color: var(--color-graphite-body); font-weight: var(--font-weight-medium); }
.contact__value a { display: flex; align-items: center; min-height: 44px; }
.form { display: grid; gap: var(--spacing-16); align-content: start; }
.field { display: grid; gap: var(--spacing-8); }
.label { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); font-weight: var(--font-weight-medium); color: var(--color-graphite-body); }
.label small { font-size: var(--text-caption); font-weight: var(--font-weight-regular); color: var(--color-ash-helper); }
.input {
  width: 100%; padding: 15px;
  background: var(--surface-card);
  border: 1px solid var(--color-ash-helper);       /* DESVÍO: la spec dice #e2e8f0 (1.2:1); ver README */
  border-radius: var(--radius-xl);
  font-size: var(--text-body); line-height: var(--leading-body);
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
textarea.input { min-height: 132px; resize: vertical; }
.select {
  appearance: none; -webkit-appearance: none; padding-right: var(--spacing-52); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23063970' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
}
.input:hover { border-color: var(--color-novutec-blue); }
.input:focus { outline: none; border-color: var(--color-novutec-blue); box-shadow: 0 0 0 3px var(--color-azure-focus); }
.input[aria-invalid="true"] { border-color: var(--color-coral-lost); }
.input[aria-invalid="true"]:focus { border-color: var(--color-novutec-blue); }
.field__hint { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-ash-helper); }
.field__error { display: none; align-items: center; gap: var(--spacing-8); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); color: var(--color-graphite-body); }
.field__error.is-visible { display: flex; }

/* Honeypot: fuera de pantalla, no display:none, para que los bots lo llenen */
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.notice { display: none; padding: var(--spacing-16); background: var(--surface-card); border: 1px solid var(--color-stone-divider); border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); color: var(--color-slate-caption); }
.notice.is-visible { display: block; }
.notice__title { display: flex; align-items: center; gap: var(--spacing-8); margin-bottom: var(--spacing-8); font-size: var(--text-body); font-weight: var(--font-weight-semibold); color: var(--color-graphite-body); }
.notice ul { display: grid; gap: var(--spacing-4); padding-left: var(--spacing-20); list-style: disc; }
.notice li a { display: inline-block; padding-block: var(--spacing-6); }
.form__note { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-ash-helper); }
.form__note a { display: inline-block; padding-block: var(--spacing-6); }

/* ==========================================================================
   Footer (navy)
   ========================================================================== */
.footer {
  background: var(--color-novutec-blue); color: var(--surface-canvas);
  border-radius: var(--radius-3xl) var(--radius-3xl) 0 0;
  padding-block: var(--spacing-52) var(--spacing-32);
}
@media (min-width: 720px) { .footer { border-radius: var(--radius-3xl-4) var(--radius-3xl-4) 0 0; } }
.footer__grid { display: grid; gap: var(--spacing-32); }
@media (min-width: 720px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-40); } }
@media (min-width: 1100px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1.3fr 1fr; } }
.footer__tag { margin-top: var(--spacing-16); max-width: 320px; font-size: var(--text-body-sm); line-height: var(--leading-body-sm); color: rgba(252, 252, 252, 0.78); } /* DERIVADO: canvas al 78% (7.4:1 sobre navy) */
.footer__title { font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-12); }
.footer__list { display: grid; gap: var(--spacing-4); }
.footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--surface-canvas); font-size: var(--text-body-sm); text-decoration: none; }
.footer .brand { min-height: 44px; }
.footer a:hover { text-decoration: underline; }
.footer__text { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-body-sm); color: rgba(252, 252, 252, 0.78); }
.footer :focus-visible { outline-color: var(--surface-canvas); }
.footer__meta {
  display: flex; flex-wrap: wrap; gap: var(--spacing-8) var(--spacing-24); align-items: center; justify-content: space-between;
  margin-top: var(--spacing-40); padding-top: var(--spacing-20); border-top: 1px solid rgba(252, 252, 252, 0.2);
  font-size: var(--text-caption); line-height: var(--leading-body-sm); color: rgba(252, 252, 252, 0.78);
}

/* ==========================================================================
   Página 404
   ========================================================================== */
.notfound { padding-block: var(--spacing-72) var(--section-gap); }
.notfound__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.notfound .h2 { margin-top: var(--spacing-20); }

/* ==========================================================================
   Páginas legales
   ========================================================================== */
.legal { padding-block: var(--spacing-40) var(--section-gap); }
.prose { max-width: 760px; }
.prose .link-cta--back { margin-left: calc(var(--spacing-16) * -1); margin-bottom: var(--spacing-12); }
.prose .h2 { text-wrap: pretty; }
.prose__meta { margin-top: var(--spacing-16); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); color: var(--color-ash-helper); }
.prose__h2 { margin-top: var(--spacing-36); font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm); letter-spacing: var(--tracking-heading-sm); font-weight: var(--font-weight-semibold); color: var(--color-midnight-ink); }
.prose p { margin-top: var(--spacing-12); color: var(--color-slate-caption); }
.prose ul { margin-top: var(--spacing-12); padding-left: var(--spacing-20); list-style: disc; color: var(--color-slate-caption); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}