/* =========================================================
   Nuvlo Agency · style.css
   Sistema global definitivo
   ========================================================= */

/* ---------- 1. Fuente ---------- */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap');

/* ---------- Variables ---------- */
:root {
  --color-text:   #2C2C2C;
  --color-blanca: #FFFFFF;
  --color-azul:   #EFF5FE;
  --color-brand:  #6BAEDC;
  --color-dark:   #2B6C9D;

  --font-base:    'Nunito', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --fs-tagline:   14px;
  --fs-title:     45px;
  --fs-subtitle:  18px;
  --fs-body:      15px;

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

  --lh-title:     1.2;
  --lh-text:      1.5;

  --space-tagline:  10px;   /* tagline → título */
  --space-hero:     20px;   /* hero: título → subtítulo */
  --space-card:     20px;   /* interno en cuadros: título → texto */
  --space-block:    30px;   /* resto de bloques */

  --container-max: 1200px;
  --radius-btn:    5px;
  --radius-card:   7px;

  /* Altura estándar de la primera sección del Inicio */
  --height-hero:   500px;
  /* Altura de la primera sección en páginas internas (mitad del hero del Inicio) */
  --height-hero-interior: 250px;
  /* Altura estándar del resto de secciones */
  --height-section: 500px;
  /* Margen entre secciones */
  --space-section: 10px;

  --t-fast:        .25s ease;

  --color-error:   #C0392B;
  --color-success: #1A7A3C;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  letter-spacing: 0;
  /* Regla global: este sitio no usa sombras (ni box-shadow ni text-shadow)
     en ningún componente. Confiar en color, borde y composición. */
  box-shadow: none !important;
  text-shadow: none !important;
}

html, body { height: auto; }

body {
  font-family: var(--font-base);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-text);
  color: var(--color-text);
  background-color: var(--color-blanca);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; }

/* =========================================================
   2. Jerarquía de textos
   ========================================================= */

/* Tagline
   Regla: la tagline (texto en mayúsculas sobre el título principal) siempre
   comparte la alineación del título principal de su sección. Como text-align
   es heredable, basta con definir la alineación en el contenedor (.head-seccion,
   .hero__content, .contacto-intro, etc.) — la tagline y el título la heredan.
   No fijar text-align en .tagline ni en .titulo-principal de forma individual. */
.tagline {
  font-size: var(--fs-tagline);
  font-weight: var(--fw-bold);
  line-height: var(--lh-text);
  text-transform: uppercase;
  color: var(--color-text);
  text-align: inherit;
  margin-bottom: var(--space-tagline);
}

/* Títulos */
h1, h2, h3, h4, h5, h6 { color: var(--color-text); }

.titulo-principal,
h1 {
  font-size: var(--fs-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-title);
}

/* Subtítulos */
.subtitulo,
h2, h3 {
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-bold);
  line-height: var(--lh-text);
  margin-bottom: var(--space-block);
}

/* Texto común */
.texto-comun,
p {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-text);
  color: var(--color-text);
  margin-bottom: var(--space-block);
}

/* Texto destacado en color de marca */
.text-brand { color: var(--color-brand); }

/* Excepción: hero · título → subtítulo = 20px */
.titulo-principal + .subtitulo,
h1 + .subtitulo {
  margin-top: var(--space-hero);
  margin-bottom: 0;
}

/* =========================================================
   3. Contenedor + Secciones (700px fijo, contenido centrado)
   ========================================================= */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 24px;
}

.sec-blanca,
.sec-azul {
  width: 100%;
  margin-block: var(--space-section);
  padding-block: 80px;                  /* respiración interna en secciones normales */
  min-height: var(--height-section);    /* altura mínima estándar de sección */
  display: flex;
  flex-direction: column;
  justify-content: center;              /* contenido centrado verticalmente */
  position: relative;
}

/* Primera sección de la página (justo después del header):
   - se pega al header (sin margen superior)
   - usa la altura estándar de hero (500px) con contenido centrado
   - oculta los desbordes para que funcionen los bloques decorativos */
.site-header + .sec-blanca,
.site-header + .sec-azul {
  height: var(--height-hero);
  padding-block: 0;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

/* Primera sección de páginas internas (todas excepto Inicio):
   - altura fija de --height-hero-interior (250px, mitad del hero del Inicio)
   - el resto de secciones de la página mantienen su altura/padding por defecto
   Uso: añadir la clase `.interior` al <body> en todas las páginas que NO sean Inicio.
   La primera sección tras el header heredará automáticamente la altura reducida. */
body.interior .site-header + .sec-blanca,
body.interior .site-header + .sec-azul {
  height: var(--height-hero-interior);
  min-height: var(--height-hero-interior);
}
.sec-blanca { background-color: var(--color-blanca); }
.sec-azul   { background-color: var(--color-azul); }

/* ---------- Reveal on scroll (aparición de abajo hacia arriba) ----------
   Animación dirigida por scroll (pura CSS, sin JS): cada sección aparece
   desde abajo a medida que entra en pantalla. Ocurre en cada carga/recarga.
   Gateada por @supports → en navegadores sin soporte las secciones se ven
   con normalidad (nunca quedan ocultas). Se respeta prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    section.sec-azul,
    section.sec-blanca {
      animation: reveal-up linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
  }
}
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(48px); }
  to   { opacity: 1; transform: none; }
}

/* Última sección antes del footer: sin margen inferior (evita franja blanca) */
.sec-blanca:has(+ .site-footer),
.sec-azul:has(+ .site-footer)   { margin-bottom: 0; }

/* =========================================================
   4. Cuadro de dos columnas (con divisoria + fondos inversos)
   ========================================================= */
.cuadro-dos-columnas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;                            /* separación entre cuadros */
  margin-bottom: var(--space-block);   /* 30px separación antes del botón */
}

.cuadro-dos-columnas .columna {
  padding: 20px;
  border: 1px solid var(--color-text);  /* borde en todo el perímetro */
  border-radius: 7px;                   /* mismo radio que el fondo */
  background-clip: padding-box;
}

/* Fondos inversos según contenedor */
.sec-blanca .cuadro-dos-columnas .columna { background-color: var(--color-azul); }
.sec-azul   .cuadro-dos-columnas .columna { background-color: var(--color-blanca); }

/* Interno: título → texto = 20px */
.columna .subtitulo,
.columna h3 { margin-bottom: var(--space-card); }
.columna p:last-child { margin-bottom: 0; }

/* Dos columnas en desktop, con 10px de separación entre cuadros */
@media (min-width: 768px) {
  .cuadro-dos-columnas {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}

/* =========================================================
   4.b Cuadro vertical (lista de recuadros apilados)
   Mismas reglas que .cuadro-dos-columnas (borde, radio, fondos inversos
   según .sec-blanca / .sec-azul), pero apilados en una sola columna.
   Uso: <div class="cuadro-vertical"><article class="columna">…</article>…</div>
   ========================================================= */
.cuadro-vertical {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: var(--space-block);
}
.cuadro-vertical .columna {
  padding: 20px;
  border: 1px solid var(--color-text);
  border-radius: var(--radius-card);
  background-clip: padding-box;
}
.sec-blanca .cuadro-vertical .columna { background-color: var(--color-azul); }
.sec-azul   .cuadro-vertical .columna { background-color: var(--color-blanca); }

/* =========================================================
   4.c Cuadro tres columnas (mismas reglas que el de dos columnas)
   Uso: <div class="cuadro-tres-columnas"><article class="columna">…</article>×3</div>
   ========================================================= */
.cuadro-tres-columnas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: var(--space-block);
}
.cuadro-tres-columnas .columna {
  padding: 20px;
  border: 1px solid var(--color-text);
  border-radius: var(--radius-card);
  background-clip: padding-box;
}
.sec-blanca .cuadro-tres-columnas .columna { background-color: var(--color-azul); }
.sec-azul   .cuadro-tres-columnas .columna { background-color: var(--color-blanca); }

@media (min-width: 768px) {
  .cuadro-tres-columnas { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}

/* =========================================================
   5. Encabezado de sección (tagline + título + subtítulo)
   ========================================================= */
.head-seccion {
  text-align: center;
  margin-bottom: var(--space-block);
}
.head-seccion .titulo-principal { margin-bottom: var(--space-block); }

/* =========================================================
   6. Botón principal
   ========================================================= */
.btn-principal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-blanca);
  background-color: var(--color-brand);
  border: 0;
  border-radius: var(--radius-btn);
  transition: color var(--t-fast), background-color var(--t-fast), transform var(--t-fast);
}
.btn-principal:hover {
  color: var(--color-text);
  background-color: #5aa1d6;
}

.btn-wrap { display: flex; justify-content: center; }

/* =========================================================
   7. HEADER
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--color-blanca);
  border-bottom: 1px solid #f1f5f9;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}
.site-header__logo img { width: 150px; height: 48px; }

.nav { display: none; }
.nav__list { display: flex; gap: 32px; align-items: center; }
.nav__link {
  position: relative;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  padding-bottom: 4px;
  transition: color var(--t-fast);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background-color: var(--color-brand);
  transition: width .3s ease;
}
.nav__link:hover::after,
.nav__link--active::after { width: 100%; }

.site-header__cta { display: none; margin-bottom: 0; }

/* Hamburguesa */
.menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  border-radius: 6px;
}
.menu-toggle:hover { background-color: #f1f5f9; }
.menu-toggle__bar {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-text);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.menu-toggle__bar + .menu-toggle__bar { margin-top: 6px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2){ opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

.mobile-menu {
  overflow: hidden;
  max-height: 0;
  transition: max-height .3s ease-in-out;
  border-top: 1px solid #f1f5f9;
}
.mobile-menu__list { padding: 16px 24px; display: flex; flex-direction: column; gap: 4px; }
.mobile-menu__link {
  display: block;
  padding: 12px;
  border-radius: 8px;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  color: var(--color-text);
}
.mobile-menu__link:hover                     { background-color: #f8fafc; }
.mobile-menu__link.mobile-menu__link--active { background-color: #f1f5f9; }
.mobile-menu__cta {
  display: block;
  text-align: center;
  margin-top: 8px;
  padding: 12px 20px;
  border-radius: var(--radius-btn);
  background-color: var(--color-brand);
  color: var(--color-blanca);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
}

/* =========================================================
   8. HERO
   ========================================================= */
.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.hero__content > *:last-child { margin-bottom: 0; }
.hero__image {
  width: 100%;
  border-radius: var(--radius-card);
  border: 7px solid var(--color-blanca);
  position: relative;
  z-index: 2;
}

/* Bloques decorativos solo en desktop */
.hero__deco-dark,
.hero__deco-light { display: none; }

/* Regla: el borde de la imagen siempre es el opuesto al fondo de su sección.
   - sec-azul  → borde blanco  (valor por defecto en .hero__image)
   - sec-blanca → borde azul claro */
.sec-blanca .hero__image { border-color: var(--color-azul); }

/* =========================================================
   8.b HERO HEADLINE (primera sección de páginas internas)
   ========================================================= */
.hero-headline {
  text-align: center;
  position: relative;
  z-index: 2;
}
.hero-headline .titulo-principal { margin-bottom: 0; }

/* =========================================================
   9. FAQ
   ========================================================= */
.faq-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
  width: 100%;
}
.faq-list {
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
}
.faq-item { border-bottom: 1px solid #e5e7eb; }
.faq-item:last-child { border-bottom: 0; }

.faq-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 20px;
  cursor: pointer;
  list-style: none;
}
.faq-summary::-webkit-details-marker { display: none; }

.faq-question {
  font-size: 17px;
  font-weight: var(--fw-bold);
  line-height: var(--lh-text);
  color: var(--color-text);
  padding-right: 16px;
}
.faq-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  background-color: var(--color-brand);
  color: var(--color-blanca);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--t-fast);
}
.faq-icon svg { width: 14px; height: 14px; }
.faq-icon:hover { background-color: #2c2c2c; }
.faq-item[open] .faq-icon     { background-color: #2c2c2c; }
.faq-item[open] .faq-plus-v   { display: none; }
.faq-item[open] .faq-question { color: var(--color-brand); }

.faq-answer {
  padding: 0 48px 20px 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-text);
  color: var(--color-text);
}

.faq-head .titulo-principal { margin-bottom: 0; }

/* =========================================================
   10. CONTACTO (formulario)
   ========================================================= */
.contacto-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}

.contacto-intro .titulo-principal { margin-bottom: var(--space-block); }
.contacto-intro__text             { margin-bottom: 0; }

/* Subrayado curvo bajo el texto destacado */
.text-underline {
  color: var(--color-brand);
  position: relative;
  display: inline-block;
  white-space: normal;
}
.text-underline__line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  width: 100%;
  height: 14px;
  color: var(--color-brand);
  overflow: visible;
  pointer-events: none;
}

/* Formulario */
.form-contacto { width: 100%; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 16px;
}

.form-field { display: flex; flex-direction: column; }
.form-field--half { grid-column: span 2; }   /* móvil: todo ancho completo */
.form-field--full { grid-column: span 2; }

.form-label {
  display: block;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: var(--lh-text);
  color: var(--color-text);
  margin-bottom: 6px;
}
.form-required { color: var(--color-brand); }

.form-input {
  width: 100%;
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-text);
  color: var(--color-text);
  background-color: var(--color-blanca);
  border: 1px solid #d6dde6;
  border-radius: var(--radius-card);
  padding: 12px 14px;
  transition: border-color var(--t-fast), background-color var(--t-fast);
  -webkit-appearance: none;
  appearance: none;
}
.form-input::placeholder { color: #9aa3ad; }
.form-input:hover        { border-color: #b9c4d1; }
.form-input:focus,
.form-input:focus-visible {
  outline: 0;
  border-color: var(--color-brand);
}

.form-textarea {
  resize: vertical;
  min-height: 140px;
}

.form-submit { margin-top: 6px; }
.form-button { width: 100%; padding-block: 14px; }
.btn-principal:disabled { opacity: 0.65; cursor: not-allowed; }

/* Honeypot anti-spam: campo señuelo fuera de pantalla, invisible para humanos.
   Se usa position en vez de display:none porque algunos bots ignoran los
   campos ocultos con display:none / visibility:hidden. */
.form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Feedback de validación y envío */
.form-input--error {
  border-color: var(--color-error);
}
.form-input--error:hover,
.form-input--error:focus,
.form-input--error:focus-visible {
  border-color: var(--color-error);
}
.form-error-msg {
  display: block;
  font-size: 13px;
  line-height: var(--lh-text);
  color: var(--color-error);
  margin-top: 4px;
}
.form-feedback {
  grid-column: span 2;
  padding: 12px 16px;
  border-radius: var(--radius-card);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-text);
}
.form-feedback--exito {
  background-color: #E8F5EE;
  color: var(--color-success);
  border: 1px solid #A8D5B5;
}
.form-feedback--error {
  background-color: #FDECEA;
  color: var(--color-error);
  border: 1px solid #F0B0AA;
}

/* Select personalizado */
select.form-input {
  cursor: pointer;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239aa3ad' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}

/* =========================================================
   10.b Páginas legales (texto largo: aviso, privacidad, cookies)
   Estructura: <section class="sec-blanca"><div class="container">
                 <div class="legal-content"> … </div>
               </div></section>
   - Títulos de sección (h2) usan estilo subtítulo pero algo más grandes
   - Listas con viñeta personalizada en color de marca
   - Bloques separados con espaciado consistente
   ========================================================= */
.legal-content {
  max-width: 820px;
  margin-inline: auto;
}
.legal-content > * + * { margin-top: var(--space-block); }

.legal-content h2 {
  font-size: 22px;
  font-weight: var(--fw-bold);
  line-height: var(--lh-text);
  color: #2c2c2c;              /* títulos numerados de páginas legales */
  margin-bottom: 0;
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 5px solid #6baedc;
}

.legal-content p {
  font-size: var(--fs-body);
  line-height: var(--lh-text);
  color: var(--color-text);
  margin-bottom: 0;
}

.legal-content ul.legal-list {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.legal-content ul.legal-list li {
  position: relative;
  padding-left: 22px;
  font-size: var(--fs-body);
  line-height: var(--lh-text);
  color: var(--color-text);
}
.legal-content ul.legal-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background-color: var(--color-brand);
}

.legal-content a {
  color: var(--color-brand);
  font-weight: var(--fw-semibold);
  transition: color var(--t-fast);
}
.legal-content a:hover { color: var(--color-dark); }

.legal-update {
  font-size: var(--fs-tagline);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--color-brand);
}

/* Tabla legal (Política de Cookies) */
.legal-content .legal-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
.legal-content .legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
  line-height: var(--lh-text);
  background-color: var(--color-blanca);
}
.legal-content .legal-table thead th {
  text-align: left;
  font-weight: var(--fw-bold);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text);
  background-color: #f6f7f9;
  padding: 14px 16px;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}
.legal-content .legal-table tbody td {
  padding: 16px;
  vertical-align: top;
  border-top: 1px solid #eef0f3;
  color: var(--color-text);
}
.legal-content .legal-table tbody tr:first-child td { border-top: 0; }
.legal-content .legal-table code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  background-color: #f3f4f6;
  padding: 2px 6px;
  border-radius: 4px;
}

/* =========================================================
   11. FOOTER
   ========================================================= */
.site-footer {
  background-color: var(--color-blanca);
  border-top: 1px solid #e5e7eb;
  color: var(--color-text);
}
.site-footer__inner { padding-top: 56px; padding-bottom: 0; }

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: baseline;
}
.footer-heading {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: var(--lh-text);
  text-transform: uppercase;
  margin: 0 0 16px 0;
  color: var(--color-text);
}
.footer-brand .footer-heading { text-transform: none; font-size: 18px; }
.footer-text {
  font-size: var(--fs-body);
  line-height: var(--lh-text);
  margin: 0 0 16px 0;
  max-width: 235px;
}
.footer-link {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  transition: color var(--t-fast);
}
.footer-link:hover { color: var(--color-brand); }
.footer-list { display: flex; flex-direction: column; gap: 12px; }

.social-list { display: flex; gap: 12px; }
.social-link {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background-color: var(--color-brand);
  color: var(--color-blanca);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--t-fast);
}
.social-link:hover { color: #2c2c2c; }
.social-link svg { width: 16px; height: 16px; fill: currentColor; }

.footer-bottom {
  margin-top: 48px;
  padding-top: 24px;
  padding-bottom: 24px;
  border-top: 1px solid #e5e7eb;
  text-align: center;
}
.footer-copy {
  font-size: var(--fs-body);
  white-space: nowrap;
  margin: 0;
}

/* =========================================================
   RESPONSIVE — Desktop (≥ 1024px)
   ========================================================= */
@media (min-width: 1024px) {

  .nav              { display: flex; }
  .site-header__cta { display: inline-flex; }
  .menu-toggle      { display: none; }

  .hero__grid { grid-template-columns: 3fr 2fr; gap: 64px; }
  .hero__image-wrap { justify-self: end; width: 100%; }

  .hero__deco-dark {
    display: block;
    position: absolute;
    inset-block: 0;
    right: 0;
    width: 20%;
    background-color: var(--color-dark);
    z-index: 0;
  }
  .hero__deco-light {
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 28.5%;
    height: 35%;
    background-color: var(--color-brand);
    z-index: 1;
  }

  .faq-layout { grid-template-columns: 1fr 1fr; gap: 64px; }

  /* Contacto: dos columnas y campos del formulario en pares */
  .contacto-layout { grid-template-columns: 1fr 1fr; gap: 64px; }
  .form-field--half { grid-column: span 1; }

  .footer-grid   { grid-template-columns: repeat(4, 1fr); }
  .footer-social { text-align: right; }
  .footer-social .social-list { justify-content: flex-end; }
}

@media (min-width: 640px) and (max-width: 1023.98px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   12. CORRECCIONES RESPONSIVE
   Solo arreglos de adaptación a pantallas pequeñas.
   No alteran el diseño, colores ni tamaños en desktop.
   ========================================================= */

/* --- Red de seguridad: ninguna palabra larga desborda su caja ---
   overflow-wrap solo parte la palabra si NO cabe de otro modo, por lo que
   en condiciones normales no cambia nada visualmente. */
.titulo-principal,
h1, h2, h3,
.subtitulo,
.tagline,
.texto-comun,
.faq-question,
.faq-answer,
.footer-text,
.footer-link,
.form-label {
  overflow-wrap: break-word;
}

/* --- El copyright nunca debe forzar scroll horizontal en móvil ---
   En desktop entra en una sola línea igualmente; aquí solo lo dejamos
   envolver si el ancho no alcanza (≈ <430px). */
.footer-copy { white-space: normal; }

/* --- Mobile y tablet (< 1024px): la primera sección (hero) NO debe
   recortar su contenido al apilarse en una columna ---
   En desktop conserva su altura fija de 500px y los bloques decorativos.
   Aquí pasamos a altura automática (con un mínimo de respiración) y
   liberamos el overflow para que la imagen y el título nunca se corten. */
@media (max-width: 1023.98px) {
  .site-header + .sec-blanca,
  .site-header + .sec-azul {
    height: auto;
    min-height: var(--height-hero);
    padding-block: 56px;
    overflow: visible;
  }

  /* Heros de páginas internas (250px): misma lógica, padding más ajustado. */
  body.interior .site-header + .sec-blanca,
  body.interior .site-header + .sec-azul {
    height: auto;
    min-height: var(--height-hero-interior);
    padding-block: 40px;
    overflow: visible;
  }
}