/* ============================================================
   ARMEN PROYECTOS — Hoja de estilos única
   Orden: 1) Reset · 2) Variables · 3) Tipografía · 4) Utilidades
          5) Componentes · 6) Layout · 7) Páginas · 8) MQ locales
   Regla dura: cero colores hexadecimales fuera de :root
   ============================================================ */


/* ============================================================
   1. RESET
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

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

a { color: inherit; text-decoration: none; }

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

/* Al saltar por ancla (#id), deja hueco para el header sticky (76px + margen) */
[id] { scroll-margin-top: 100px; }

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

ul, ol { list-style: none; }

/* Salvaguarda global: ningún hijo puede provocar scroll horizontal.
   Complementa las reglas puntuales que ya usan minmax(0, 1fr) para
   evitar que un track fr crezca más allá del viewport por min-content
   (p. ej. palabras largas como "Impermeabilización"). */
html { overflow-x: clip; }


/* ============================================================
   2. VARIABLES
   ============================================================ */
:root {
  /* Azules */
  --azul-900: #0F1B31;   /* footer, fondos más oscuros */
  --azul-800: #16243F;   /* corporativo principal: header, franjas, CTA band */
  --azul-700: #22345A;   /* tarjetas sobre fondo azul */
  --azul-100: #C8D2E2;   /* texto secundario sobre azul */

  /* Rojos */
  --rojo-600: #B3121B;   /* CTA principal */
  --rojo-500: #E8484F;   /* acentos, eyebrows sobre azul */
  --rojo-700: #8E0E15;   /* hover de CTA */

  /* Grises */
  --gris-050: #F7F8FA;   /* secciones alternas */
  --gris-100: #F1F3F7;   /* chips, tarjetas suaves */
  --gris-300: #D9DEE7;   /* bordes */
  --gris-600: #5F6B80;   /* texto secundario sobre blanco */

  --blanco: #FFFFFF;

  /* Marca externa (color oficial WhatsApp) */
  --verde-whatsapp: #25D366;

  /* Sistema */
  --contenedor: 1200px;
  --radio: 8px;
  --sombra: 0 6px 18px rgba(15, 27, 49, .10);
  --transicion: .2s ease;
  --espaciado-seccion: 80px;
}

@media (max-width: 640px) {
  :root { --espaciado-seccion: 48px; }
}


/* ============================================================
   3. TIPOGRAFÍA BASE
   ============================================================ */
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--gris-600);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--azul-800);
  line-height: 1.25;
  font-weight: 600;
}

h1 { font-size: clamp(32px, 5vw, 44px); }
h2 { font-size: clamp(24px, 3.4vw, 32px); }
h3 { font-size: clamp(18px, 1.6vw, 20px); }
h4 { font-size: 16px; }

p { color: var(--gris-600); }

strong { color: var(--azul-800); font-weight: 600; }

/* Foco de teclado global visible */
:focus-visible {
  outline: 2px solid var(--azul-800);
  outline-offset: 2px;
  border-radius: 2px;
}


/* ============================================================
   4. UTILIDADES
   ============================================================ */
.contenedor {
  width: 100%;
  max-width: var(--contenedor);
  margin-inline: auto;
  padding-inline: 20px;
}

.seccion {
  padding-block: var(--espaciado-seccion);
}

.seccion--gris  { background: var(--gris-050); }
.seccion--azul  { background: var(--azul-800); color: var(--azul-100); }
.seccion--azul h1,
.seccion--azul h2,
.seccion--azul h3,
.seccion--azul h4 { color: var(--blanco); }
.seccion--azul p  { color: var(--azul-100); }

.centrado { text-align: center; }

/* Espaciado vertical utilitario (evita style="margin-top:…" en el HTML) */
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mb-32 { margin-bottom: 32px; }

/* Enlace destacado dentro de prosa (subrayado azul → rojo en hover) */
.enlace-fuerte { color: var(--azul-800); text-decoration: underline; }
.enlace-fuerte:hover { color: var(--rojo-600); }

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


/* ============================================================
   5. COMPONENTES
   ============================================================ */

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 24px;
  border-radius: var(--radio);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  border: 1px solid transparent;
  transition: var(--transicion);
  text-align: center;
  white-space: nowrap;
}

.btn:focus-visible {
  outline: 2px solid var(--blanco);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--azul-800);
}

.btn--rojo {
  background: var(--rojo-600);
  color: var(--blanco);
  border-color: var(--rojo-600);
}
.btn--rojo:hover { background: var(--rojo-700); border-color: var(--rojo-700); }

.btn--azul {
  background: var(--azul-800);
  color: var(--blanco);
  border-color: var(--azul-800);
}
.btn--azul:hover { background: var(--azul-900); border-color: var(--azul-900); }

.btn--linea {
  background: transparent;
  color: var(--azul-800);
  border-color: var(--azul-800);
}
.btn--linea:hover { background: var(--azul-800); color: var(--blanco); }

.btn--linea-blanca {
  background: transparent;
  color: var(--blanco);
  border-color: var(--blanco);
}
.btn--linea-blanca:hover { background: var(--blanco); color: var(--azul-800); }

.btn--wa {
  background: var(--verde-whatsapp);
  color: var(--blanco);
  border-color: var(--verde-whatsapp);
}
.btn--wa:hover { filter: brightness(.92); }

.btn--ancho { width: 100%; }

/* Botón con flecha: el <span> se desplaza en hover */
.btn .flecha {
  display: inline-block;
  transition: transform var(--transicion);
}
.btn:hover .flecha { transform: translateX(3px); }


/* ---------- Eyebrow ---------- */
.eyebrow {
  display: inline-block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rojo-600);
  margin-bottom: 12px;
  position: relative;
  padding-bottom: 10px;
}
.eyebrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 24px;
  height: 2px;
  background: var(--rojo-600);
}
.seccion--azul .eyebrow { color: var(--rojo-500); }
.seccion--azul .eyebrow::after { background: var(--rojo-500); }


/* ---------- Encabezado de sección ---------- */
.seccion-head { margin-bottom: 40px; }
.seccion-head h2 { margin-bottom: 12px; }
.seccion-head p  { max-width: 680px; }

.seccion-head--centrado { text-align: center; margin-inline: auto; }
.seccion-head--centrado .eyebrow { display: inline-block; }
.seccion-head--centrado .eyebrow::after {
  left: 50%;
  transform: translateX(-50%);
}
.seccion-head--centrado p { margin-inline: auto; }


/* ---------- Tarjeta de servicio ---------- */
.card-servicio {
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  overflow: hidden;
  text-align: center;
  color: var(--gris-600);
  transition: var(--transicion);
  height: 100%;
}
.card-servicio__img {
  display: block;
  width: 100%;
  /* aspect-ratio fija la proporción en todas las tarjetas sin depender del
     tamaño intrínseco del <img>. flex-shrink:0 evita que la imagen se
     encoja cuando la fila crece por grid-auto-rows:1fr. */
  aspect-ratio: 2 / 1;
  flex-shrink: 0;
  object-fit: cover;
  transition: transform .35s ease;
}
.card-servicio__cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px;
}
.card-servicio__titulo {
  /* clamp() reduce el tamaño en pantallas angostas para que palabras largas
     como "Impermeabilización" quepan sin partirse. Piso 13 px (para 320 px de
     viewport), techo 16 px (desktop). */
  font-size: clamp(13px, 3.6vw, 16px);
  color: var(--azul-800);
  margin-bottom: 8px;
  /* Anula el overflow-wrap:break-word global sólo aquí: la separación por
     sílabas (hyphens:auto, requiere lang="es-MX" en <html>) parte palabras
     con guion visible ("Impermeabili-zación") en vez de cortarlas a mitad. */
  overflow-wrap: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.card-servicio__desc {
  font-size: 14px;
  color: var(--gris-600);
  margin-bottom: 16px;
}
.card-servicio__link {
  font-size: 14px;
  font-weight: 500;
  color: var(--azul-800);
  margin-top: auto;
}
@media (max-width: 640px) {
  /* Menos padding lateral libera espacio real para el título en columnas
     estrechas (2 tarjetas en 320-414 px). */
  .card-servicio__cuerpo { padding: 16px; }
  /* Alineación a la izquierda y line-height más apretado: evita las líneas
     de 1-2 palabras centradas que quedaban "flotando" en la tarjeta. */
  .card-servicio { text-align: left; }
  .card-servicio__desc { line-height: 1.4; }
}
.card-servicio:hover {
  border-color: var(--azul-800);
  box-shadow: var(--sombra);
}
.card-servicio:hover .card-servicio__img { transform: scale(1.05); }


/* ---------- Tarjeta de proyecto ---------- */
.card-proyecto {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radio);
  color: var(--blanco);
  aspect-ratio: 4 / 3;
  background: var(--gris-100);
}
.card-proyecto__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.card-proyecto::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(180deg, rgba(15,27,49,0) 0%, rgba(15,27,49,.75) 70%, rgba(15,27,49,.85) 100%);
  pointer-events: none;
}
.card-proyecto__info {
  position: absolute;
  left: 20px; right: 20px; bottom: 18px;
  z-index: 1;
}
.card-proyecto__titulo {
  color: var(--blanco);
  font-size: 18px;
  margin-bottom: 4px;
}
.card-proyecto__ubicacion {
  color: var(--azul-100);
  font-size: 13px;
}
.card-proyecto:hover .card-proyecto__img { transform: scale(1.05); }


/* ---------- Tarjeta de material ---------- */
.card-material {
  background: var(--blanco);
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--gris-600);
  transition: var(--transicion);
}
.card-material__img {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: cover;
  border-radius: 6px;
  background: var(--gris-100);
  margin-bottom: 8px;
}
.card-material__nombre {
  font-size: 15px;
  font-weight: 600;
  color: var(--azul-800);
  font-family: 'Montserrat', system-ui, sans-serif;
}
.card-material__categoria {
  font-size: 13px;
  color: var(--gris-600);
}
.card-material:hover { border-color: var(--azul-800); box-shadow: var(--sombra); }


/* ---------- Tarjeta de valor ---------- */
.card-valor {
  background: var(--gris-100);
  border-radius: var(--radio);
  padding: 24px;
}
.card-valor__icono {
  font-size: 28px;
  color: var(--azul-800);
  margin-bottom: 12px;
}
.card-valor__titulo {
  font-size: 16px;
  color: var(--azul-800);
  margin-bottom: 4px;
}
.card-valor__desc {
  font-size: 14px;
  color: var(--gris-600);
}


/* ---------- Franja CTA ---------- */
.cta-franja {
  background: var(--azul-800);
  color: var(--blanco);
  border-radius: var(--radio);
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cta-franja__texto { flex: 1 1 320px; }
.cta-franja__titulo {
  color: var(--blanco);
  font-size: clamp(20px, 2.4vw, 26px);
  margin-bottom: 6px;
}
.cta-franja__desc {
  color: var(--azul-100);
  font-size: 15px;
}
@media (max-width: 640px) {
  .cta-franja { padding: 24px; flex-direction: column; align-items: stretch; text-align: left; gap: 16px; }
  .cta-franja__texto { flex: 0 1 auto; }
  .cta-franja .btn { width: 100%; }
}

/* Contenedor de acciones dentro de la franja CTA (uno o varios botones) */
.cta-franja__acciones {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  .cta-franja__acciones { flex-direction: column; width: 100%; }
}


/* ---------- Aviso (bloque discreto de texto informativo) ---------- */
.aviso {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  color: var(--gris-600);
  font-size: 14px;
}
.aviso .ti {
  color: var(--azul-800);
  margin-right: 4px;
}


/* ---------- Acordeón (FAQ) ---------- */
.acordeon { border-top: 1px solid var(--gris-300); }
.acordeon__item {
  border-bottom: 1px solid var(--gris-300);
}
.acordeon__item > summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 8px;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 600;
  color: var(--azul-800);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.acordeon__item > summary::-webkit-details-marker { display: none; }
.acordeon__item .icono {
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px;
  color: var(--azul-800);
  transition: transform var(--transicion);
}
.acordeon__item[open] .icono { transform: rotate(45deg); }
.acordeon__cuerpo {
  padding: 0 8px 20px;
  font-size: 15px;
}

/* Grupo temático de acordeón (FAQ): h3 + acordeón, separados verticalmente */
.faq-grupo + .faq-grupo { margin-top: 40px; }
.faq-grupo__titulo {
  font-size: 20px;
  color: var(--azul-800);
  margin-bottom: 12px;
}


/* ---------- Páginas legales ---------- */
.legal-encabezado {
  background: var(--azul-800);
  color: var(--blanco);
}
.legal-encabezado__contenido { padding: 48px 0; }
.legal-encabezado .breadcrumb {
  padding: 0 0 12px;
  color: var(--azul-100);
}
.legal-encabezado .breadcrumb a { color: var(--azul-100); }
.legal-encabezado .breadcrumb a:hover { color: var(--blanco); }
.legal-encabezado .breadcrumb li + li::before {
  color: var(--azul-100);
  opacity: .5;
}
.legal-encabezado .breadcrumb [aria-current="page"] { color: var(--blanco); }
.legal-encabezado__titulo {
  color: var(--blanco);
  font-size: clamp(28px, 4vw, 40px);
  margin-bottom: 0;
  line-height: 1.2;
}
@media (max-width: 640px) {
  .legal-encabezado__contenido { padding: 32px 0; }
}

.legal-fecha {
  font-size: 13px;
  color: var(--gris-600);
  margin-bottom: 24px;
}

.legal-indice {
  background: var(--gris-050);
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  padding: 18px 22px;
  margin-bottom: 32px;
}
.legal-indice__titulo { font-size: 14px; font-weight: 600; color: var(--azul-800); margin-bottom: 10px; }
.legal-indice ol { display: grid; gap: 6px; padding-left: 20px; list-style: decimal; color: var(--gris-600); font-size: 14px; }
.legal-indice a { color: var(--azul-800); text-decoration: underline; }
.legal-indice a:hover { color: var(--rojo-600); }

.legal-prosa { max-width: 720px; }
.legal-prosa h2 { font-size: 22px; color: var(--azul-800); margin-top: 32px; margin-bottom: 12px; }
.legal-prosa h2:first-child { margin-top: 0; }
.legal-prosa h3 { font-size: 16px; color: var(--azul-800); margin-top: 20px; margin-bottom: 8px; }
.legal-prosa p { margin-bottom: 14px; }
.legal-prosa ul,
.legal-prosa ol { margin: 0 0 14px 20px; }
.legal-prosa ul li { list-style: disc; margin-bottom: 6px; }
.legal-prosa ol li { list-style: decimal; margin-bottom: 6px; }
.legal-prosa a { color: var(--azul-800); text-decoration: underline; }
.legal-prosa a:hover { color: var(--rojo-600); }


/* ---------- Migas de pan ---------- */
.breadcrumb {
  font-size: 13px;
  color: var(--gris-600);
  padding: 16px 0;
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumb li { display: inline-flex; align-items: center; gap: 6px; }
.breadcrumb li + li::before {
  content: "/";
  color: var(--gris-300);
  margin-right: 2px;
}
.breadcrumb a { color: var(--gris-600); }
.breadcrumb a:hover { color: var(--azul-800); }
.breadcrumb [aria-current="page"] { color: var(--azul-800); font-weight: 500; }


/* ---------- Formulario ---------- */
.form-grid {
  display: grid;
  gap: 16px;
}
@media (min-width: 640px) {
  .form-grid--2 { grid-template-columns: 1fr 1fr; }
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.campo__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--azul-800);
}
.req { color: var(--rojo-600); }
.campo__label .req { margin-left: 2px; }
.campo__ayuda { font-size: 13px; color: var(--gris-600); }

.input,
.select,
.textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  background: var(--blanco);
  color: var(--azul-800);
  font-size: 15px;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.textarea { min-height: 120px; resize: vertical; padding-top: 12px; line-height: 1.5; }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gris-600) 50%), linear-gradient(135deg, var(--gris-600) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 36px; }

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--azul-800);
  box-shadow: 0 0 0 3px rgba(22, 36, 63, .12);
}

.input::placeholder,
.textarea::placeholder { color: var(--gris-600); opacity: .7; }

.campo--error .input,
.campo--error .select,
.campo--error .textarea {
  border-color: var(--rojo-600);
  box-shadow: 0 0 0 3px rgba(179, 18, 27, .12);
}
.campo__error {
  font-size: 13px;
  color: var(--rojo-600);
  font-weight: 500;
}

.check {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; color: var(--gris-600);
}
.check input[type="checkbox"] {
  width: 18px; height: 18px; margin-top: 3px;
  accent-color: var(--azul-800);
  flex-shrink: 0;
}
.check a { color: var(--azul-800); text-decoration: underline; }
.check a:hover { color: var(--rojo-600); }

/* Grupo de checkboxes (fieldset con leyenda) */
.checkgroup {
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  padding: 14px 16px 16px;
}
.checkgroup > legend {
  font-size: 14px;
  font-weight: 500;
  color: var(--azul-800);
  padding: 0 6px;
}
.checkgroup__grid {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
  margin-top: 8px;
}
@media (min-width: 640px) {
  .checkgroup__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .checkgroup__grid { grid-template-columns: 1fr 1fr 1fr; }
}
.campo--error.checkgroup { border-color: var(--rojo-600); }

/* Contador de caracteres */
.campo__contador { font-size: 12px; color: var(--gris-600); text-align: right; }
.campo__contador--exceso { color: var(--rojo-600); font-weight: 500; }

/* Área de acciones del formulario (submit + notas al lado) */
.form-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
}
@media (max-width: 640px) {
  .form-actions { flex-direction: column; align-items: stretch; }
}

/* Bloque de estado tras envío: mensaje + fallbacks WhatsApp / copiar */
.form-status {
  margin-top: 20px;
  padding: 20px;
  background: var(--gris-050);
  border-left: 4px solid var(--azul-800);
  border-radius: var(--radio);
}
.form-status--exito { border-left-color: var(--azul-800); }
.form-status--error { border-left-color: var(--rojo-600); }
.form-status__mensaje { color: var(--azul-800); font-size: 15px; margin-bottom: 16px; }
.form-status--error .form-status__mensaje { color: var(--rojo-600); }

/* Honeypot anti-bots. No usamos display:none porque muchos bots lo detectan
   y saltan el campo; en su lugar lo sacamos del viewport pero sigue
   "visible" para el DOM y focusable a los ojos de un scraper. */
.honeypot {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* ---------- Layout de página de cotización (form + aside) ---------- */
.form-layout {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .form-layout { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 40px; }
}

.aside-info {
  background: var(--azul-800);
  color: var(--azul-100);
  border-radius: var(--radio);
  padding: 28px;
}
.aside-info h3 { color: var(--blanco); font-size: 18px; margin-bottom: 16px; }
.aside-info ul { display: grid; gap: 12px; margin-bottom: 24px; }
.aside-info a { color: var(--blanco); font-weight: 500; }
.aside-info a:hover { color: var(--rojo-500); }
.aside-info__item { display: flex; gap: 12px; align-items: center; font-size: 14px; }
.aside-info__item .ti { color: var(--rojo-500); font-size: 18px; flex-shrink: 0; }
.aside-info__pasos { display: grid; gap: 14px; }
.aside-info__paso { display: flex; gap: 12px; align-items: flex-start; }
.aside-info__num {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--rojo-600);
  color: var(--blanco);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
}
.aside-info__paso p { color: var(--azul-100); font-size: 14px; line-height: 1.5; margin: 4px 0 0; }
.aside-info__titulo { color: var(--blanco); font-weight: 500; margin-top: 2px; }


/* Ancho máximo del formulario breve de contacto */
.form-contacto { max-width: 720px; }


/* ---------- Página de contacto (tarjetas + mapa) ---------- */
.contacto-cards {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin-bottom: 32px;
}
@media (min-width: 640px) {
  .contacto-cards { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .contacto-cards { grid-template-columns: repeat(4, 1fr); }
}
.contacto-tarjeta {
  background: var(--blanco);
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.contacto-tarjeta__icono {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--gris-100);
  color: var(--azul-800);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: 8px;
}
.contacto-tarjeta__titulo { color: var(--azul-800); font-size: 14px; font-weight: 500; }
.contacto-tarjeta__valor { color: var(--gris-600); font-size: 14px; }
.contacto-tarjeta a { color: var(--gris-600); font-weight: 500; }
.contacto-tarjeta a:hover { color: var(--rojo-600); }

.contacto-mapa {
  width: 100%;
  border: 0;
  border-radius: var(--radio);
  min-height: 320px;
  display: block;
}


/* ---------- Hero interior (patrón reutilizable para páginas internas) ---------- */
.hero-interior {
  position: relative;
  min-height: 280px;
  display: flex;
  align-items: center;
  color: var(--blanco);
  background: var(--azul-800);
  overflow: hidden;
}
.hero-interior__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .25;
  z-index: 0;
}
.hero-interior__contenido {
  position: relative;
  z-index: 1;
  padding: 60px 0;
  width: 100%;
}
.hero-interior .breadcrumb {
  padding: 0 0 12px;
  color: var(--azul-100);
}
.hero-interior .breadcrumb a { color: var(--azul-100); }
.hero-interior .breadcrumb a:hover { color: var(--blanco); }
.hero-interior .breadcrumb li + li::before {
  color: var(--azul-100);
  opacity: .5;
}
.hero-interior .breadcrumb [aria-current="page"] { color: var(--blanco); }
.hero-interior__titulo {
  color: var(--blanco);
  font-size: clamp(28px, 4vw, 40px);
  margin-bottom: 10px;
  line-height: 1.2;
}
.hero-interior__resumen {
  color: var(--azul-100);
  font-size: clamp(15px, 1.6vw, 17px);
  max-width: 720px;
}
@media (max-width: 640px) {
  .hero-interior { min-height: 220px; }
  .hero-interior__contenido { padding: 40px 0; }
}


/* ---------- Tarjeta de misión / visión ---------- */
.card-mv {
  background: var(--blanco);
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  padding: 32px;
  height: 100%;
}
.card-mv__icono {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--azul-800);
  color: var(--blanco);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 16px;
}
.card-mv__titulo {
  color: var(--azul-800);
  font-size: 22px;
  margin-bottom: 8px;
}
.card-mv__desc {
  color: var(--gris-600);
  font-size: 15px;
}


/* ---------- Lista con checks rojos ---------- */
.lista-check {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lista-check li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--gris-600);
}
.lista-check li .ti {
  color: var(--rojo-600);
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Modificador: 2-3 columnas responsivas para listas largas */
.lista-check--cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px 32px;
}
@media (min-width: 640px) {
  .lista-check--cols { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .lista-check--cols { grid-template-columns: 1fr 1fr 1fr; }
}


/* ---------- Chip (etiqueta rellenable) ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--gris-100);
  color: var(--azul-800);
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: var(--transicion);
}
.chip:hover { background: var(--gris-300); }
.chip .ti { color: var(--rojo-600); font-size: 16px; }
.chip--linea {
  background: transparent;
  border-color: var(--gris-300);
}


/* ---------- Pasos numerados (grid horizontal + tarjeta de paso) ---------- */
.pasos-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
@media (max-width: 1024px) {
  .pasos-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .pasos-grid {
    grid-template-columns: 1fr;
    gap: 0;
    position: relative;
  }
  /* Línea conectora vertical entre los círculos numerados */
  .pasos-grid::before {
    content: "";
    position: absolute;
    left: 27px;
    top: 28px;
    bottom: 28px;
    width: 2px;
    background: var(--gris-300);
    z-index: 0;
  }
}
.paso {
  padding: 20px;
  background: var(--blanco);
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
}
.paso__num {
  display: inline-block;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--rojo-600);
  line-height: 1;
  margin-bottom: 10px;
}
.paso__titulo {
  color: var(--azul-800);
  font-size: 15px;
  font-weight: 600;
  font-family: 'Montserrat', system-ui, sans-serif;
  margin-bottom: 4px;
}
.paso__desc {
  font-size: 13px;
  color: var(--gris-600);
  line-height: 1.5;
}
@media (max-width: 640px) {
  .paso {
    position: relative;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 4px 16px;
    align-items: start;
    padding: 16px 16px 16px 0;
    background: transparent;
    border: none;
    border-radius: 0;
  }
  .paso__num {
    grid-row: 1 / span 2;
    align-self: start;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--rojo-600);
    color: var(--blanco);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0 8px;
    position: relative;
    z-index: 1;
  }
  .paso__titulo, .paso__desc { grid-column: 2; }
}


/* ============================================================
   6. LAYOUT — barra superior, header, menú móvil, flotantes, footer
   ============================================================ */

/* ---------- 6.1 Barra superior ---------- */
.topbar {
  background: var(--azul-800);
  color: var(--azul-100);
  font-size: 13px;
  height: 38px;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 24px;
}
.topbar__group {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.topbar__link,
.topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--azul-100);
  line-height: 1;
}
.topbar__link:hover { color: var(--blanco); }
.topbar__item .ti,
.topbar__link .ti { font-size: 15px; color: var(--rojo-500); }
.topbar__frase strong { color: var(--rojo-500); font-weight: 600; }

@media (max-width: 900px) {
  .topbar__group--desktop,
  .topbar__frase { display: none; }
}

/* ---------- 6.2 Header sticky ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--blanco);
  border-bottom: 1px solid var(--gris-300);
  transition: box-shadow var(--transicion);
}
.header--scroll { box-shadow: 0 2px 12px rgba(15, 27, 49, .08); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 76px;
}
.header__logo { display: inline-flex; align-items: center; }
.header__logo-img { height: 44px; width: auto; }
.header__cta {
  padding: 10px 18px;
  min-height: 40px;
  font-size: 14px;
}

/* ---------- 6.3 Nav desktop ---------- */
.nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav__item { position: relative; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 14px 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--azul-800);
  border-bottom: 2px solid transparent;
  transition: color var(--transicion), border-color var(--transicion);
}
.nav__link:hover { color: var(--rojo-600); }
.nav__link--activo { border-bottom-color: var(--rojo-600); }

@media (max-width: 900px) {
  .nav { display: none; }
  .header__cta { display: none; }
}

/* ---------- 6.4 Botón hamburguesa ---------- */
.menu-btn {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  color: var(--azul-800);
  font-size: 24px;
  border-radius: 6px;
}
.menu-btn:hover { background: var(--gris-050); }
@media (max-width: 900px) {
  .menu-btn { display: inline-flex; }
}

/* ---------- 6.5 Menú móvil ---------- */
.menu-movil {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  pointer-events: none;
}
.menu-movil--abierto {
  visibility: visible;
  pointer-events: auto;
}
.menu-movil__backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 27, 49, .5);
  opacity: 0;
  transition: opacity var(--transicion);
}
.menu-movil--abierto .menu-movil__backdrop { opacity: 1; }
.menu-movil__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(88vw, 360px);
  background: var(--blanco);
  padding: 16px 20px 24px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--transicion);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.menu-movil--abierto .menu-movil__panel { transform: translateX(0); }
.menu-movil__head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gris-300);
  margin-bottom: 8px;
}
.menu-movil__close {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--azul-800); font-size: 24px;
  border-radius: 6px;
}
.menu-movil__close:hover { background: var(--gris-050); }
.menu-movil__link {
  display: block;
  padding: 14px 8px;
  font-size: 18px;
  font-weight: 500;
  color: var(--azul-800);
  border-bottom: 1px solid var(--gris-300);
  min-height: 44px;
}
.menu-movil__link--activo { color: var(--rojo-600); }
.menu-movil__acordeon { border-bottom: 1px solid var(--gris-300); }
.menu-movil__acordeon > summary {
  list-style: none;
  padding: 14px 8px;
  font-size: 18px;
  font-weight: 500;
  color: var(--azul-800);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  min-height: 44px;
}
.menu-movil__acordeon > summary::-webkit-details-marker { display: none; }
.menu-movil__acordeon .icono {
  font-size: 22px;
  transition: transform var(--transicion);
  line-height: 1;
}
.menu-movil__acordeon[open] .icono { transform: rotate(45deg); }
.menu-movil__sublist { padding: 4px 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.menu-movil__sublist a {
  display: block;
  padding: 10px 4px;
  font-size: 15px;
  color: var(--gris-600);
}
.menu-movil__sublist a.destacado { color: var(--azul-800); font-weight: 500; }
.menu-movil__cta { margin-top: 16px; }

body.menu-abierto { overflow: hidden; }

/* ---------- 6.6 Botones flotantes ---------- */
.flotantes {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.flotante {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  color: var(--blanco);
  font-size: 22px;
  box-shadow: 0 4px 12px rgba(15, 27, 49, .18);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.flotante:hover { transform: scale(1.06); box-shadow: 0 6px 18px rgba(15, 27, 49, .25); }
.flotante--wa   { background: var(--verde-whatsapp); }
.flotante--tel  { background: var(--azul-800); }
.flotante--mail { background: var(--rojo-600); }

.flotante__label {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: var(--azul-800);
  color: var(--blanco);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transicion), transform var(--transicion);
}
.flotante:hover .flotante__label,
.flotante:focus-visible .flotante__label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Volver arriba */
.scroll-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 91;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--blanco);
  color: var(--azul-800);
  border: 1px solid var(--gris-300);
  font-size: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sombra);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity var(--transicion), transform var(--transicion);
}
.scroll-top--visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

@media (max-width: 900px) {
  .flotantes {
    top: auto;
    bottom: 84px; /* deja hueco para el scroll-top y evita tapar CTAs de formularios */
    right: 12px;
    transform: none;
    gap: 8px;
  }
  .flotante { width: 44px; height: 44px; font-size: 20px; }
  .flotante__label { display: none; }
  .scroll-top { right: 12px; bottom: 20px; }

  /* Salvaguarda general: reservamos la franja derecha del contenido en
     móvil para que la columna de flotantes fijos (44px + 12px de margen)
     no tape texto ni enlaces de NINGUNA sección. Aplicado en el único
     lugar por el que pasa todo el contenido: la .contenedor de main y
     footer. Evita tener que parchear caso por caso. */
  main .contenedor,
  .footer .contenedor { padding-inline-end: 68px; }
}

/* ---------- 6.7 Footer ---------- */
.footer {
  background: var(--azul-900);
  color: var(--azul-100);
  font-size: 14px;
  padding-top: 60px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 40px;
}
/* El logo del footer es cuadrado (600×600) e incluye el nombre debajo del isotipo.
   Los atributos width/height del <img> deben conservar la aspect-ratio 1:1
   para que el navegador no comprima verticalmente la reserva de layout. */
.footer__logo {
  height: 72px;
  width: auto;
  max-width: 100%;
  margin-bottom: 16px;
  object-fit: contain;
}
.footer__desc { color: var(--azul-100); margin-bottom: 20px; max-width: 320px; font-size: 14px; }
.footer__title {
  color: var(--blanco);
  font-size: 13px;
  font-weight: 600;
  font-family: 'Montserrat', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 16px;
}
.footer__list { display: flex; flex-direction: column; gap: 10px; }
.footer__link {
  color: var(--azul-100);
  font-size: 14px;
  transition: color var(--transicion);
}
.footer__link:hover { color: var(--blanco); }

.footer__contacto { display: flex; flex-direction: column; gap: 12px; }
.footer__contacto-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--azul-100);
  font-size: 14px;
}
.footer__contacto-item .ti { color: var(--rojo-500); font-size: 18px; flex-shrink: 0; }

.redes { display: flex; gap: 8px; }
.redes__link {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .06);
  color: var(--blanco);
  font-size: 20px;
  transition: background var(--transicion);
}
.redes__link:hover { background: var(--rojo-600); }

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
}
.footer__copy { color: var(--azul-100); }
.footer__legales {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.footer__legales a { color: var(--azul-100); }
.footer__legales a:hover { color: var(--blanco); }

/* Crédito del estudio: mismo tamaño y color que el copyright.
   En móvil el .footer__bottom ya se apila en columna, así que
   este bloque cae debajo del copyright sin reglas extra. */
.footer__credito {
  color: var(--azul-100);
  font-size: 13px;
}
.footer__credito a {
  color: var(--blanco);
  text-decoration: none;
}
.footer__credito a:hover,
.footer__credito a:focus-visible { text-decoration: underline; }

/* ----- Acordeones de footer en móvil (mismo patrón que el menú móvil) -----
   En desktop las columnas se comportan como bloques abiertos:
   el <summary> se ve como un título estático y el ícono se oculta.
   En móvil (≤900px) se convierten en acordeones reales cerrados por
   defecto; JS agrega/quita el atributo `open` según el media query. */
.footer__col--acordeon { display: block; }
.footer__acordeon-summary {
  list-style: none;
  cursor: default;
  display: block;
}
.footer__acordeon-summary::-webkit-details-marker { display: none; }
.footer__acordeon-summary::marker { content: ''; }
.footer__acordeon-summary .footer__title { margin-bottom: 16px; }
.footer__acordeon-icono { display: none; }

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

  .footer__col--acordeon {
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }
  .footer__acordeon-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    min-height: 44px;
    cursor: pointer;
  }
  .footer__acordeon-summary .footer__title {
    margin-bottom: 0;
  }
  .footer__acordeon-icono {
    display: inline-block;
    font-size: 22px;
    color: var(--azul-100);
    line-height: 1;
    transition: transform var(--transicion);
    flex-shrink: 0;
  }
  .footer__col--acordeon[open] > .footer__acordeon-summary .footer__acordeon-icono {
    transform: rotate(45deg);
  }
  .footer__col--acordeon > .footer__list,
  .footer__col--acordeon > .footer__contacto {
    padding: 4px 0 16px;
  }
}
@media (max-width: 640px) {
  .footer { padding-top: 48px; }
  .footer__grid { grid-template-columns: 1fr; gap: 0; padding-bottom: 24px; }
  /* La columna del logo mantiene su respiración inferior porque no es acordeón */
  .footer__col:not(.footer__col--acordeon) { padding-bottom: 8px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; text-align: left; }
}


/* ============================================================
   7. PÁGINAS (bloques específicos, prefijo por página)
   ============================================================ */

/* ---------- 7.1 Home · Hero ---------- */
.home-hero {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  color: var(--blanco);
  overflow: hidden;
  background: var(--azul-800);
}
.home-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(15, 27, 49, .82) 0%,
    rgba(15, 27, 49, .62) 55%,
    rgba(15, 27, 49, .5) 100%);
  z-index: 1;
}
.home-hero__contenido {
  position: relative;
  z-index: 2;
  padding: 80px 0;
  max-width: 60%;
}
.home-hero__titulo {
  color: var(--blanco);
  font-size: clamp(32px, 5vw, 48px);
  margin-bottom: 20px;
  line-height: 1.15;
}
.home-hero__parrafo {
  color: var(--azul-100);
  font-size: clamp(16px, 1.6vw, 18px);
  margin-bottom: 28px;
  max-width: 600px;
}
.home-hero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 900px) {
  .home-hero__contenido { max-width: 100%; }
}
@media (max-width: 640px) {
  .home-hero { min-height: 420px; }
  .home-hero__contenido { padding: 56px 0; }
  .home-hero__ctas .btn { width: 100%; }
}

/* ---------- 7.1b Home · Franja "Proyectos realizados" ---------- */
.home-realizados {
  background: var(--azul-800);
  color: var(--blanco);
  padding: 48px 0;
}
.home-realizados__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.home-realizados__texto {
  flex: 1 1 260px;
  min-width: 0;
}
.home-realizados__titulo {
  color: var(--blanco);
  font-size: clamp(22px, 2.6vw, 28px);
  margin-bottom: 6px;
}
.home-realizados__apoyo {
  color: var(--azul-100);
  font-size: 15px;
}
.home-realizados__miniaturas {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}
.home-realizados__mini {
  display: block;
  width: 96px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--azul-700);
  transition: transform .2s ease;
}
.home-realizados__mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.home-realizados__mini:hover { transform: translateY(-2px); }
@media (max-width: 640px) {
  .home-realizados { padding: 32px 0; }
  .home-realizados__inner {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 12px;
  }
  .home-realizados__texto,
  .home-realizados__miniaturas { flex: 0 0 auto; }
  .home-realizados__miniaturas {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: -20px;
    padding-inline: 20px;
  }
  .home-realizados__miniaturas::-webkit-scrollbar { display: none; }
  .home-realizados__mini {
    width: 128px;
    height: 96px;
    scroll-snap-align: start;
  }
  .home-realizados .btn { width: 100%; }
}

/* ---------- 7.1c Home · Banner panorámico inferior ---------- */
.banner-inicio {
  position: relative;
  width: 100%;
  min-height: 340px;
  display: flex;
  align-items: center;
  color: var(--blanco);
  overflow: hidden;
  background: var(--azul-800);
}
.banner-inicio__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.banner-inicio::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(15, 27, 49, .9) 0%,
    rgba(15, 27, 49, .72) 55%,
    rgba(15, 27, 49, .38) 100%);
  z-index: 1;
}
.banner-inicio__contenido {
  position: relative;
  z-index: 2;
  padding: 72px 0;
  max-width: 60%;
}
.banner-inicio__titulo {
  color: var(--blanco);
  font-size: clamp(26px, 3.6vw, 40px);
  margin-bottom: 12px;
  line-height: 1.2;
}
.banner-inicio__apoyo {
  color: var(--azul-100);
  font-size: clamp(15px, 1.5vw, 17px);
  margin-bottom: 24px;
  max-width: 520px;
}
@media (max-width: 900px) {
  .banner-inicio__contenido { max-width: 100%; text-align: center; }
  .banner-inicio__apoyo { margin-left: auto; margin-right: auto; }
}
@media (max-width: 640px) {
  .banner-inicio { min-height: 280px; }
  .banner-inicio__contenido { padding: 56px 0; }
  .banner-inicio .btn { width: 100%; }
}

/* ---------- 7.2 Home · Servicios ---------- */
/* minmax(0, 1fr) en lugar de 1fr para permitir que el track sea
   más pequeño que su min-content y evitar que "Impermeabilización"
   empuje la cuadrícula fuera del viewport en móvil. */
.home-servicios__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  /* Iguala la altura de TODAS las filas al alto de la fila más alta, para que
     ninguna tarjeta quede más corta que sus vecinas de otra fila cuando el
     texto de descripción varía. Requiere que .card-servicio tenga height:100%
     y flex column (ver más arriba) para que el cuerpo estire y el enlace baje. */
  grid-auto-rows: 1fr;
}
@media (max-width: 1024px) {
  .home-servicios__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .home-servicios__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* ---------- 7.3 Home · Proyectos destacados ---------- */
.home-proyectos { background: var(--azul-800); }
.home-proyectos .seccion-head h2,
.home-proyectos .seccion-head p { color: var(--blanco); }
.home-proyectos .seccion-head p { color: var(--azul-100); }

.home-proyectos__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}
@media (max-width: 1024px) {
  .home-proyectos__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .home-proyectos__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    margin-inline: -20px;
    padding-inline: 20px;
    scrollbar-width: none;
  }
  .home-proyectos__grid::-webkit-scrollbar { display: none; }
  .home-proyectos__grid > * { scroll-snap-align: start; }
}
.home-proyectos__cta { text-align: center; }

/* ---------- 7.4 Home · Materiales ---------- */
.home-materiales__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
@media (max-width: 1024px) {
  .home-materiales__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .home-materiales__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
.home-materiales__cta { text-align: center; }

/* ---------- 7.5 Home · Nosotros + Valores ---------- */
.home-nosotros__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 48px;
  align-items: stretch;
}
.home-nosotros__media { height: 100%; }
.home-nosotros__contenido {
  display: flex;
  flex-direction: column;
}
.home-nosotros__contenido > .mt-32 {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.home-nosotros__imagen {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radio);
  background: var(--gris-100);
}
.home-nosotros__texto p + p { margin-top: 12px; }

.home-valores__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
  flex: 1;
  grid-auto-rows: 1fr;
}
@media (max-width: 900px) {
  .home-nosotros__grid { grid-template-columns: 1fr; gap: 32px; }
  .home-nosotros__media { height: auto; }
  .home-nosotros__imagen { height: auto; aspect-ratio: 4 / 5; }
}
@media (max-width: 640px) {
  .home-valores__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 7.6 Nosotros · Quiénes somos (2 columnas) ---------- */
.nosotros-quienes__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 900px) {
  .nosotros-quienes__grid { grid-template-columns: 1fr; gap: 32px; }
}
.nosotros-quienes__imagen {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  border-radius: var(--radio);
  background: var(--gris-100);
}

/* ---------- 7.7 Nosotros · Misión y Visión ---------- */
.nosotros-mv__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 640px) {
  .nosotros-mv__grid { grid-template-columns: 1fr; }
}

/* 7.8 (movido) → ver componente "Pasos" en sección 5 (.pasos-grid + .paso) */

/* ---------- 7.9 Nosotros · Compromiso (lista en 2 columnas) ---------- */
.nosotros-compromiso__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
@media (max-width: 640px) {
  .nosotros-compromiso__grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ---------- 7.10 Nosotros · Cobertura ---------- */
.nosotros-cobertura__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.nosotros-cobertura__nota {
  font-size: 15px;
  color: var(--gris-600);
}
.nosotros-cobertura__mapa {
  width: 100%;
  height: 340px;
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  margin-top: 24px;
}

/* ---------- 7.11 Servicios · Índice (12 tarjetas en 3 columnas) ---------- */
.servicios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) {
  .servicios-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .servicios-grid { grid-template-columns: 1fr; }
}

/* ---------- 7.12 Páginas de servicio interior (plantilla común) ---------- */
.servicio-beneficios {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
  .servicio-beneficios { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .servicio-beneficios { grid-template-columns: 1fr; }
}

.servicio-galeria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 900px) {
  .servicio-galeria { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .servicio-galeria { grid-template-columns: 1fr; }
}
.servicio-galeria img {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  border-radius: var(--radio);
  background: var(--gris-100);
}

/* ---------- 7.12b Servicios · Acordeones ----------
   Los 12 servicios viven como <details> apilados, mismo patrón en
   desktop y móvil (el primero abierto por defecto). Se abren desde
   los chips del índice superior a través del hash (JS syncs `open`).
   Sin alternancia de fondo — cada acordeón se separa por hairline. */
.servicios-acordeon {
  display: block;
  border-top: 1px solid var(--gris-300);
}
.servicio-acordeon {
  border-bottom: 1px solid var(--gris-300);
}
.servicio-acordeon__summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 20px 4px;
  min-height: 64px;
}
.servicio-acordeon__summary::-webkit-details-marker { display: none; }
.servicio-acordeon__summary::marker { content: ''; }
.servicio-acordeon__summary:hover .servicio-acordeon__titulo {
  color: var(--rojo-600);
}
.servicio-acordeon__summary:focus-visible {
  outline: 2px solid var(--azul-800);
  outline-offset: 2px;
  border-radius: 4px;
}
.servicio-acordeon__icono {
  font-size: 28px;
  color: var(--rojo-600);
  line-height: 1;
}
.servicio-acordeon__texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.servicio-acordeon__titulo {
  font-size: 20px;
  font-weight: 600;
  color: var(--azul-800);
  margin: 0;
  transition: color var(--transicion);
}
.servicio-acordeon__resumen {
  font-size: 14px;
  color: var(--gris-600);
  line-height: 1.4;
}
.servicio-acordeon__toggle {
  font-size: 24px;
  color: var(--azul-800);
  transition: transform var(--transicion);
  line-height: 1;
}
.servicio-acordeon[open] > .servicio-acordeon__summary .servicio-acordeon__toggle {
  transform: rotate(45deg);
}
.servicio-acordeon__contenido {
  padding: 4px 4px 24px;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 24px;
  align-items: start;
}
@media (max-width: 640px) {
  .servicio-acordeon__contenido {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
/* El 13º acordeón (Proyectos realizados) usa toda la fila para la galería. */
.servicio-acordeon__contenido--pleno {
  display: block;
}
.servicio-acordeon__media { min-width: 0; }
.servicio-acordeon__img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border-radius: var(--radio);
}
.servicio-acordeon__detalle { min-width: 0; }
.servicio-acordeon__detalle p {
  color: var(--gris-600);
  max-width: 680px;
  margin-bottom: 16px;
}
.servicio-acordeon__detalle p:last-of-type {
  margin-bottom: 20px;
}
/* Alcance: 2 columnas en móvil, 3 en desktop, con tipografía compacta.
   Sobrescribe .lista-check--cols (que arranca en 1 columna) sin tocarla. */
.servicio-acordeon__alcance {
  grid-template-columns: 1fr 1fr;
  gap: 8px 20px;
}
/* El color se fija aquí (no se hereda) porque el rojo del ícono no debe
   tocar al texto del ítem. Solo el hijo directo `.ti` queda en rojo. */
.servicio-acordeon__alcance li {
  font-size: 13px;
  gap: 8px;
  color: var(--azul-800);
}
.servicio-acordeon__alcance li > .ti {
  color: var(--rojo-600);
  font-size: 16px;
  margin-top: 1px;
}
@media (min-width: 900px) {
  .servicio-acordeon__alcance { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 640px) {
  .servicio-acordeon__summary {
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    padding: 16px 0;
  }
  .servicio-acordeon__icono { font-size: 24px; }
  .servicio-acordeon__titulo { font-size: 17px; }
  .servicio-acordeon__resumen { font-size: 13px; }
  .servicio-acordeon__toggle { font-size: 22px; }
  .servicio-acordeon__contenido { padding: 0 0 20px; }
}

/* ---------- 7.12c Materiales · Cuadrícula compacta ----------
   5 tarjetas dentro de una sola sección. Sin alternancia de fondo:
   cada categoría vive en una tarjeta con borde ligero. En desktop
   son 2 columnas y la última (Sistemas constructivos) ocupa el
   ancho completo para cerrar la última fila. */
.materiales-seccion { padding-block: 48px; }
@media (max-width: 640px) {
  .materiales-seccion { padding-block: 32px; }
}
.materiales-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 900px) {
  .materiales-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .materiales-card--full { grid-column: 1 / -1; }
}
.materiales-card {
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  background: var(--blanco);
  padding: 18px 20px;
}
.materiales-card__titulo {
  font-size: 15px;
  font-weight: 600;
  color: var(--azul-800);
  letter-spacing: .02em;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gris-300);
}
.materiales-card__lista {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 20px;
}
/* El color va explícito en el <li> y en el hijo directo `.ti` para que
   solo la palomita quede en rojo y el nombre del material en azul. */
.materiales-card__lista li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--azul-800);
}
.materiales-card__lista li > .ti {
  color: var(--rojo-600);
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ---------- 7.13 Acabados y especialidades ---------- */
.acabados-indice {
  padding-block: 16px;
  background: var(--gris-050);
  border-bottom: 1px solid var(--gris-300);
}
.acabados-indice__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
@media (max-width: 640px) {
  /* En móvil el scroll horizontal vive en el propio <ul>. Antes usábamos
     margin-inline: -20px sobre el <ul> para sangrar a los bordes del
     viewport, pero eso ampliaba el bloque más allá de su .contenedor y
     provocaba que el scroll arrancara desplazado (solo se veían los
     últimos chips). Ahora cancelamos el padding del .contenedor en
     este bloque y el <ul> lleva su propio padding + scroll-snap al inicio. */
  .acabados-indice .contenedor { padding-inline: 0; }
  .acabados-indice__lista {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0 20px 8px;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    scroll-padding-inline-start: 20px;
  }
  .acabados-indice__lista::-webkit-scrollbar { display: none; }
  .acabados-indice__lista li {
    flex-shrink: 0;
    scroll-snap-align: start;
  }
}

/* Sección de acordeones de servicios: pega el bloque al índice de chips
   de arriba y deja un colchón inferior normal. Sin este override, la
   .seccion heredaba padding-block: 80px (48 en móvil), dejando un
   espacio muerto muy grande entre chips y el primer acordeón. */
.servicios-acordeon-seccion { padding-block: 32px 64px; }
@media (max-width: 640px) {
  .servicios-acordeon-seccion { padding-block: 20px 40px; }
}

/* ---------- 13º acordeón · Proyectos realizados (destacado en gris) ---------- */
.servicio-acordeon--destacado {
  background: var(--gris-100);
}
.servicio-acordeon--destacado > .servicio-acordeon__summary,
.servicio-acordeon--destacado > .servicio-acordeon__contenido {
  padding-inline: 16px;
}

/* ---------- Galería de proyectos realizados ---------- */
.galeria-proyectos {
  position: relative;
  padding-block: 8px 4px;
}
.galeria-proyectos__pista {
  display: flex;
  flex-wrap: nowrap;          /* refuerzo: nunca apilar los items */
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;         /* evita scroll vertical parásito por sombras/foco */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 4px 8px;
  margin: 0;
  list-style: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Sin esto, Safari puede colapsar el <ul> a 0 y hacer que los <li> se
     desborden hacia abajo cuando el ancestro es display:block. */
  min-width: 0;
}
.galeria-proyectos__pista::-webkit-scrollbar { display: none; }
.galeria-proyectos__pista:focus-visible {
  outline: 2px solid var(--azul-800);
  outline-offset: 4px;
  border-radius: var(--radio);
}
.galeria-proyectos__item {
  flex: 0 0 auto;              /* no crecer, no encoger, base auto */
  flex-basis: min(82vw, 320px);
  scroll-snap-align: start;
  width: min(82vw, 320px);
  max-width: min(82vw, 320px); /* refuerzo contra reglas globales que pongan width:100% en <li> */
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  background: var(--blanco);
  overflow: hidden;
}
@media (min-width: 900px) {
  .galeria-proyectos__item { width: 420px; }
}
.galeria-proyectos__figura {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.galeria-proyectos__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.galeria-proyectos__pie {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px 14px;
}
.galeria-proyectos__obra {
  font-weight: 600;
  color: var(--azul-800);
  font-size: 15px;
}
.galeria-proyectos__lugar {
  font-size: 13px;
  color: var(--gris-600);
}
.galeria-proyectos__flecha {
  display: none;
  position: absolute;
  top: calc(50% - 16px);
  transform: translateY(-50%);
  z-index: 2;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: var(--blanco);
  border: 1px solid var(--gris-300);
  border-radius: 999px;
  cursor: pointer;
  color: var(--azul-800);
  font-size: 22px;
  padding: 0;
  transition: var(--transicion);
}
.galeria-proyectos__flecha:hover {
  border-color: var(--azul-800);
  color: var(--rojo-600);
}
.galeria-proyectos__flecha:focus-visible {
  outline: 2px solid var(--azul-800);
  outline-offset: 2px;
}
.galeria-proyectos__flecha:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.galeria-proyectos__flecha--prev { left: -8px; }
.galeria-proyectos__flecha--next { right: -8px; }
@media (min-width: 900px) {
  .galeria-proyectos__flecha { display: inline-flex; }
}
.galeria-proyectos__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}
.galeria-proyectos__dots button {
  width: 10px; height: 10px;
  border-radius: 999px;
  border: none;
  background: var(--gris-300);
  cursor: pointer;
  padding: 0;
  transition: var(--transicion);
}
.galeria-proyectos__dots button[aria-selected="true"] {
  background: var(--azul-800);
  transform: scale(1.25);
}
.galeria-proyectos__dots button:focus-visible {
  outline: 2px solid var(--azul-800);
  outline-offset: 2px;
}

.especialidad__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .especialidad__grid { grid-template-columns: 1fr; gap: 20px; }
}
.especialidad__grid h2 { margin-bottom: 8px; }

.especialidad__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  font-weight: 500;
  color: var(--azul-800);
  transition: color var(--transicion);
}
.especialidad__cta:hover { color: var(--rojo-600); }
.especialidad__cta .flecha {
  display: inline-block;
  transition: transform var(--transicion);
}
.especialidad__cta:hover .flecha { transform: translateX(3px); }


/* ---------- 7.14 Proyectos · Filtros por categoría ---------- */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.chip-filtro {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  min-height: 40px;
  border-radius: 999px;
  background: var(--blanco);
  color: var(--azul-800);
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--gris-300);
  transition: var(--transicion);
  white-space: nowrap;
}
.chip-filtro:hover {
  border-color: var(--azul-800);
  background: var(--gris-050);
}
.chip-filtro--activo,
.chip-filtro[aria-pressed="true"] {
  background: var(--azul-800);
  color: var(--blanco);
  border-color: var(--azul-800);
}

.filtros-resultado {
  font-size: 14px;
  color: var(--gris-600);
  margin-bottom: 24px;
}

/* Estado vacío cuando ningún proyecto/material coincide con el filtro */
.filtros-vacio {
  text-align: center;
  padding: 48px 24px;
  background: var(--gris-050);
  border: 1px dashed var(--gris-300);
  border-radius: var(--radio);
}
.filtros-vacio p { margin-bottom: 16px; }


/* ---------- Trigger de foto de la galería (abre el lightbox) ---------- */
.galeria-proyectos__trigger {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  color: inherit;
  font: inherit;
}
.galeria-proyectos__trigger:focus-visible {
  outline: 2px solid var(--azul-800);
  outline-offset: -2px;
}


/* ---------- Lightbox de la galería ---------- */
body.lightbox-abierto { overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
}
.lightbox[hidden] { display: none; }

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 27, 49, .88);
}

.lightbox__figura {
  position: relative;
  z-index: 1;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  max-height: 100%;
}
.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 180px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radio);
  background: var(--azul-900);
  box-shadow: 0 12px 40px rgba(15, 27, 49, .55);
}
.lightbox__pie {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
  color: var(--blanco);
  padding-inline: 8px;
  max-width: min(90vw, 720px);
}
.lightbox__obra {
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}
.lightbox__lugar {
  font-size: 13px;
  color: var(--azul-100);
}

.lightbox__cerrar,
.lightbox__flecha {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(15, 27, 49, .55);
  color: var(--blanco);
  font-size: 22px;
  cursor: pointer;
  padding: 0;
  transition: var(--transicion);
}
.lightbox__cerrar:hover,
.lightbox__flecha:hover {
  background: var(--azul-800);
  border-color: var(--blanco);
}
.lightbox__cerrar:focus-visible,
.lightbox__flecha:focus-visible {
  outline: 2px solid var(--blanco);
  outline-offset: 2px;
}

.lightbox__cerrar {
  top: 16px;
  right: 16px;
}
.lightbox__flecha--prev { left: 16px;  top: 50%; transform: translateY(-50%); }
.lightbox__flecha--next { right: 16px; top: 50%; transform: translateY(-50%); }

@media (max-width: 640px) {
  .lightbox__flecha--prev { left: 8px; }
  .lightbox__flecha--next { right: 8px; }
  .lightbox__cerrar { top: 8px; right: 8px; }
  .lightbox__img { max-height: calc(100vh - 200px); }
}