/* ============================================================
   COSACSA · Construcciones Santa Clara
   Landing pública. Sistema visual de la skill landing-page-design:
   una sola tipografía (Manrope), escala de espaciado y de texto
   cerradas, radios de Tailwind, fondos planos y movimiento con
   curva personalizada. Rojo del logotipo + asfalto.
   ============================================================ */

/* ---------- Tipografía (una sola familia) ---------- */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
}

/* ---------- Tokens ---------- */
:root {
  /* Escala de espaciado (únicos valores permitidos) */
  --s-25: 2px;
  --s-50: 4px;
  --s-75: 8px;
  --s-100: 12px;
  --s-200: 16px;
  --s-300: 24px;
  --s-400: 32px;
  --s-500: 40px;
  --s-600: 48px;
  --s-700: 64px;
  --s-800: 80px;
  --s-900: 96px;

  /* Radios de Tailwind */
  --r-sm: 2px;
  --r-base: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;
  --r-2xl: 16px;
  --r-full: 9999px;

  /* Movimiento: masa y resorte, nunca la curva por defecto */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur: 700ms;

  --font: 'Manrope', system-ui, sans-serif;
  --ancho: 1180px;
  --medida: 680px;

  /* Color · tema claro */
  --rojo: #C8102E;
  --rojo-hover: #A50D26;
  --rojo-banda: #C8102E;
  --tinta: #191410;
  --fondo: #FBFAF7;
  --alt: #F0EEE9;
  --superficie: #FFFFFF;
  --grava: #5E5850;
  --linea: #DCD8D0;
  --vidrio: rgba(255, 255, 255, 0.72);
  --velo-menu: rgba(255, 255, 255, 0.8);
  --negro: #000000;
  --asfalto: #131209;
  --asfalto-texto: #EDE8E0;
  --sombra: 0 8px 24px rgba(25, 20, 16, 0.10);
}

@media (prefers-color-scheme: dark) {
  :root {
    --rojo: #E22843;
    --rojo-hover: #C8102E;
    --tinta: #EDE8E0;
    --fondo: #131209;
    --alt: #181818;
    --superficie: #1F1F1F;
    --grava: #A59C90;
    --linea: #313131;
    --vidrio: rgba(19, 18, 9, 0.72);
    --velo-menu: rgba(0, 0, 0, 0.8);
    --sombra: 0 8px 24px rgba(0, 0, 0, 0.45);
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--s-900); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;      /* text-base */
  line-height: 1.5rem;
  font-weight: 400;
  color: var(--tinta);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
body.sin-scroll { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
svg { flex: none; }
[hidden] { display: none !important; }
a { color: var(--rojo); text-decoration: none; transition: color 300ms var(--ease); }
a:hover { color: var(--rojo-hover); }
h1, h2, h3, h4 { font-family: var(--font); font-weight: 700; margin: 0; text-wrap: balance; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--rojo); outline-offset: 2px; }
.icono { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.contenedor {
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--s-200);
}
@media (min-width: 768px) { .contenedor { padding-inline: var(--s-400); } }

/* Saltar al contenido */
.saltar {
  position: fixed;
  top: var(--s-75);
  left: var(--s-75);
  z-index: 100;
  padding: var(--s-75) var(--s-100);
  background: var(--rojo);
  color: #fff;
  font-size: 0.875rem;  /* text-sm */
  line-height: 1.25rem;
  font-weight: 600;
  border-radius: var(--r-lg);
  translate: 0 -200%;
  transition: translate 300ms var(--ease);
}
.saltar:focus { translate: 0 0; color: #fff; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-75);
  padding: var(--s-75) var(--s-100);   /* botón principal: 8px / 12px */
  font-family: var(--font);
  font-size: 1rem;      /* text-base */
  line-height: 1.5rem;
  font-weight: 600;
  border: 0;
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: background-color 300ms var(--ease), color 300ms var(--ease), scale 300ms var(--ease), translate 300ms var(--ease);
}
.btn--rojo { background: var(--rojo-banda); color: #fff; }
.btn--rojo:hover { background: var(--rojo-hover); color: #fff; translate: 0 -2px; }
.btn:active { scale: 0.98; translate: 0 1px; }
.btn--chico { font-size: 0.875rem; line-height: 1.25rem; }   /* botones de cabecera: text-sm */
.btn--bloque { width: 100%; }

.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: var(--s-75);
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  color: #fff;
  padding: var(--s-75) var(--s-50);
  border-radius: var(--r-lg);
}
.enlace-flecha:hover { color: #fff; }
.enlace-flecha .icono { transition: translate 300ms var(--ease); }
.enlace-flecha:hover .icono { translate: var(--s-50) 0; }

/* ---------- Navegación: isla flotante de vidrio ---------- */
.nav {
  position: fixed;
  top: var(--s-300);                   /* mt-6 */
  left: 0;
  right: 0;
  margin-inline: auto;
  width: max-content;
  max-width: calc(100% - var(--s-400));
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--s-100);
  padding: var(--s-75);
  border-radius: var(--r-full);
}
.nav::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--vidrio);
  border: 1px solid var(--linea);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: var(--sombra);
}
.nav__marca {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: var(--s-50) var(--s-200);
  background: #fff;                    /* el logo trae negro: solo se lee sobre blanco */
  border-radius: var(--r-full);
}
.nav__marca img { height: 32px; width: auto; }

.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--s-25);
}
.nav__menu a:not(.btn) {
  display: block;
  padding: var(--s-75) var(--s-100);
  border-radius: var(--r-full);
  font-size: 0.875rem;  /* text-sm */
  line-height: 1.25rem;
  font-weight: 600;
  color: var(--tinta);
  transition: background-color 300ms var(--ease), color 300ms var(--ease);
}
.nav__menu a:not(.btn):hover { background: var(--alt); color: var(--rojo); }
.nav__menu a[aria-current='true'] { color: var(--rojo); background: var(--alt); }
.nav__menu .btn { margin-left: var(--s-75); border-radius: var(--r-full); }
.nav__menu li { display: flex; }

.nav__burger {
  display: none;
  position: relative;
  z-index: 2;
  width: var(--s-500);
  height: var(--s-500);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--r-full);
  color: var(--tinta);
  cursor: pointer;
}
.nav__burger span {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  height: 2px;
  background: currentColor;
  border-radius: var(--r-full);
  transition: transform var(--dur) var(--ease);
}
.nav__burger span:first-child { transform: translateY(-4px); }
.nav__burger span:last-child { transform: translateY(4px); }
.nav-abierta .nav__burger span:first-child { transform: rotate(45deg); }
.nav-abierta .nav__burger span:last-child { transform: rotate(-45deg); }

@media (max-width: 1023px) {
  .nav { gap: var(--s-200); }
  .nav__burger { display: block; margin-left: auto; }

  /* Menú: cubre la pantalla con vidrio denso */
  .nav__menu {
    position: fixed;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--s-100);
    padding: var(--s-900) var(--s-200) var(--s-600);
    background: var(--velo-menu);
    -webkit-backdrop-filter: blur(64px);
    backdrop-filter: blur(64px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
  }
  .nav-abierta .nav__menu {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dur) var(--ease), visibility 0s;
  }
  .nav__menu a:not(.btn) {
    font-size: 1.875rem;   /* text-3xl */
    line-height: 2.25rem;
    padding: var(--s-75) var(--s-300);
  }
  .nav__menu .btn { margin: var(--s-200) 0 0; font-size: 1rem; line-height: 1.5rem; padding: var(--s-100) var(--s-300); }

  /* Enlaces: suben y aparecen en cascada */
  .nav__menu li {
    opacity: 0;
    translate: 0 48px;           /* translate-y-12 */
    transition: opacity var(--dur) var(--ease), translate var(--dur) var(--ease);
  }
  .nav-abierta .nav__menu li { opacity: 1; translate: 0 0; }
  .nav-abierta .nav__menu li:nth-child(1) { transition-delay: 100ms; }
  .nav-abierta .nav__menu li:nth-child(2) { transition-delay: 150ms; }
  .nav-abierta .nav__menu li:nth-child(3) { transition-delay: 200ms; }
  .nav-abierta .nav__menu li:nth-child(4) { transition-delay: 250ms; }
  .nav-abierta .nav__menu li:nth-child(5) { transition-delay: 300ms; }
  .nav-abierta .nav__menu li:nth-child(6) { transition-delay: 350ms; }
  .nav-abierta .nav__menu li:nth-child(7) { transition-delay: 400ms; }
  .nav-abierta .nav__menu li:nth-child(8) { transition-delay: 450ms; }
}

/* ---------- Encabezados de sección ---------- */
.eyebrow {
  display: block;
  font-size: 0.875rem;  /* text-sm */
  line-height: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rojo);
}
.seccion { padding-block: var(--s-700); }
@media (min-width: 768px) { .seccion { padding-block: var(--s-900); } }
.seccion--alt { background: var(--alt); }
.seccion__head { max-width: var(--medida); margin-bottom: var(--s-600); }
.seccion__head h2,
.titulo-h2 {
  font-size: 1.875rem;  /* text-3xl */
  line-height: 2.25rem;
  margin: var(--s-75) 0 var(--s-200);
  position: relative;
  padding-bottom: var(--s-200);
}
.seccion__head h2::after,
.titulo-h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--s-700);
  height: var(--s-50);
  background: var(--rojo);
  border-radius: var(--r-full);
}
.seccion__head p { font-size: 1.125rem; line-height: 1.75rem; color: var(--grava); }
@media (min-width: 768px) {
  .seccion__head h2, .titulo-h2 { font-size: 2.25rem; line-height: 2.5rem; }  /* text-4xl */
}
@media (min-width: 1024px) {
  .seccion__head h2, .titulo-h2 { font-size: 3rem; line-height: 1; }          /* text-5xl */
}

/* Tarjeta base: borde completo, nunca de un solo lado */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  padding: var(--s-300);
}
.tarjeta h3 { font-size: 1.25rem; line-height: 1.75rem; margin-bottom: var(--s-75); }   /* text-xl */
.tarjeta p { font-size: 0.875rem; line-height: 1.25rem; color: var(--grava); }          /* text-sm */
.etiqueta {
  display: block;
  margin-bottom: var(--s-75);
  font-size: 0.75rem;   /* text-xs */
  line-height: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rojo);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(100svh, 800px);
  padding-block: var(--s-900) var(--s-700);
  overflow: hidden;
  background: var(--asfalto);
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);    /* velo plano, sin degradado */
}
.hero__contenido { position: relative; z-index: 1; color: #fff; }
.hero .eyebrow { color: #FF6B80; margin-bottom: var(--s-200); }
.hero h1 {
  max-width: var(--medida);
  font-size: 1.875rem;  /* text-3xl */
  line-height: 2.25rem;
  font-weight: 700;
  margin-bottom: var(--s-300);
  background-image: linear-gradient(to right, #FFFFFF, #9B9B9B);   /* único degradado: sobre el texto */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero h1 span { display: block; }
.hero__sub {
  max-width: var(--medida);
  font-size: 1.125rem;  /* text-lg */
  line-height: 1.75rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--s-400);
}
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-200); }
@media (min-width: 480px) { .hero h1 { font-size: 2.25rem; line-height: 2.5rem; } }   /* text-4xl */
@media (min-width: 768px) { .hero h1 { font-size: 3rem; line-height: 1; } }            /* text-5xl */
@media (min-width: 1024px) { .hero h1 { font-size: 3.75rem; line-height: 1; } }        /* text-6xl */

/* ---------- Franja de proyectos ---------- */
.proyectos-strip {
  background: var(--negro);
  color: var(--asfalto-texto);
  padding-block: var(--s-200);
  overflow-x: auto;
}
.proyectos-strip ul {
  display: flex;
  gap: var(--s-600);
  justify-content: center;
  align-items: baseline;
  white-space: nowrap;
  font-size: 0.875rem;  /* text-sm */
  line-height: 1.25rem;
  font-weight: 600;
}
.proyectos-strip .anio { color: #FF6B80; font-weight: 700; margin-left: var(--s-75); }
@media (max-width: 767px) { .proyectos-strip ul { justify-content: flex-start; } }

/* ---------- Nosotros ---------- */
.nosotros__grid {
  display: grid;
  gap: var(--s-600);
  align-items: center;
}
@media (min-width: 900px) { .nosotros__grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--s-700); } }
.nosotros__texto p { max-width: 62ch; margin-bottom: var(--s-200); }
.nosotros__img { border-radius: var(--r-lg); box-shadow: var(--sombra); aspect-ratio: 800 / 560; object-fit: cover; width: 100%; }
@media (max-width: 899px) { .nosotros__img { order: -1; } }
.cifras {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-400);
  margin-top: var(--s-400);
  padding-top: var(--s-300);
}
.cifra__valor { font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; color: var(--rojo); }   /* text-3xl */
.cifra__etiqueta { font-size: 0.875rem; line-height: 1.25rem; color: var(--grava); }

/* Misión, visión y valores */
.filosofia { margin-top: var(--s-800); }
.filosofia__subtitulo { font-size: 1.5rem; line-height: 2rem; margin: var(--s-600) 0 var(--s-300); }   /* text-2xl */
.vm__grid { display: grid; gap: var(--s-300); }
@media (min-width: 768px) { .vm__grid { grid-template-columns: repeat(2, 1fr); } }
.valores__grid { display: grid; gap: var(--s-300); }
@media (min-width: 640px) { .valores__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .valores__grid { grid-template-columns: repeat(3, 1fr); } }
.valor h4 { font-size: 1.125rem; line-height: 1.75rem; margin-bottom: var(--s-75); }   /* text-lg */
.valor p { font-size: 0.875rem; line-height: 1.25rem; color: var(--grava); }

/* ---------- Servicios ---------- */
.servicios__grid { display: grid; gap: var(--s-300); }
@media (min-width: 768px) { .servicios__grid { grid-template-columns: repeat(3, 1fr); } }
.servicio {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  transition: translate var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.servicio:hover { translate: 0 calc(var(--s-50) * -1); box-shadow: var(--sombra); }
.servicio__foto { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.servicio__cuerpo { padding: var(--s-300); }
.servicio h3 { font-size: 1.25rem; line-height: 1.75rem; margin-bottom: var(--s-75); }
.servicio p { font-size: 0.875rem; line-height: 1.25rem; color: var(--grava); }
.servicios__nota {
  margin-top: var(--s-400);
  padding: var(--s-200) var(--s-300);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  color: var(--grava);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* ---------- Lema: aparece palabra por palabra ---------- */
.lema { padding-block: var(--s-800); }
@media (min-width: 768px) { .lema { padding-block: calc(var(--s-900) + var(--s-400)); } }
.lema__texto {
  max-width: var(--medida);
  font-size: 2.25rem;   /* text-4xl */
  line-height: 2.5rem;
  font-weight: 700;
}
@media (min-width: 1024px) { .lema__texto { font-size: 3rem; line-height: 1; } }   /* text-5xl */
.js .palabra {
  opacity: 0.3;
  transition: opacity var(--dur) var(--ease);
}
.js .palabra.activa { opacity: 1; }

/* ---------- Obras recientes ---------- */
.obras__anio { margin-bottom: var(--s-600); }
.obras__anio:last-child { margin-bottom: 0; }
.obras__anio h3 {
  display: flex;
  align-items: center;
  gap: var(--s-200);
  margin-bottom: var(--s-300);
  font-size: 1.5rem;    /* text-2xl */
  line-height: 2rem;
  color: var(--rojo);
}
.obras__anio h3::after { content: ''; flex: 1; height: 1px; background: var(--linea); }
.obras__grid { display: grid; gap: var(--s-200); }
@media (min-width: 768px) { .obras__grid { grid-template-columns: repeat(2, 1fr); } }
.obra p { font-size: 0.875rem; line-height: 1.25rem; color: var(--tinta); }

/* ---------- Calidad ---------- */
.calidad { background: var(--rojo-banda); color: #fff; }
.calidad .contenedor {
  padding-block: var(--s-700);
  display: grid;
  gap: var(--s-500);
  align-items: center;
}
@media (min-width: 900px) { .calidad .contenedor { grid-template-columns: 1fr auto; padding-block: var(--s-900); } }
.calidad h2 {
  margin-bottom: var(--s-200);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.calidad blockquote {
  margin: 0;
  max-width: 36em;
  font-size: 1.25rem;   /* text-xl */
  line-height: 1.75rem;
  font-weight: 600;
}
@media (min-width: 768px) { .calidad blockquote { font-size: 1.5rem; line-height: 2rem; } }   /* text-2xl */
.calidad__texto { margin-top: var(--s-300); max-width: 62ch; color: rgba(255, 255, 255, 0.92); }
.calidad__ref {
  margin-top: var(--s-300);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}
.calidad__sello {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-100);
  justify-self: start;
  padding: var(--s-200);
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  color: #5E5850;
}
.calidad__sello img { height: 192px; width: auto; }
.calidad__sello span { font-size: 0.75rem; line-height: 1rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- Objetivos de calidad ---------- */
.objetivos__grid { display: grid; gap: var(--s-200); }
@media (min-width: 640px) { .objetivos__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .objetivos__grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Clientes: carrusel de logos ---------- */
.carrusel { position: relative; }
.carrusel__ventana {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.carrusel__pista {
  display: flex;
  width: max-content;
  animation: desplazar 48s linear infinite;      /* velocidad constante: la única animación lineal */
}
.carrusel:hover .carrusel__pista,
.carrusel:focus-within .carrusel__pista,
.carrusel.en-pausa .carrusel__pista { animation-play-state: paused; }
@keyframes desplazar { to { transform: translateX(-50%); } }
.cliente-logo {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--s-900);
  min-width: 176px;
  margin-right: var(--s-200);
  padding: var(--s-200) var(--s-300);
  background: #fff;                  /* los logos de clientes son para fondo blanco */
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
}
.cliente-logo img { height: 64px; width: auto; max-width: 168px; object-fit: contain; }
.carrusel__control {
  display: inline-flex;
  align-items: center;
  gap: var(--s-75);
  padding: var(--s-75) var(--s-100);
  font-family: var(--font);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: background-color 300ms var(--ease), scale 300ms var(--ease);
}
.carrusel__control:hover { background: var(--alt); }
.carrusel__control:active { scale: 0.98; }
.carrusel__controles { display: flex; align-items: center; gap: var(--s-100); margin-top: var(--s-300); }
.carrusel__control .icono { width: 1rem; height: 1rem; }
.carrusel__control .i-play { display: none; }
.carrusel.en-pausa .carrusel__control .i-play { display: block; }
.carrusel.en-pausa .carrusel__control .i-pausa { display: none; }

/* ---------- Grupo ---------- */
.grupo__grid { display: grid; gap: var(--s-300); }
@media (min-width: 768px) { .grupo__grid { grid-template-columns: repeat(2, 1fr); } }
.grupo__card img { max-height: var(--s-600); width: auto; margin-bottom: var(--s-200); }

/* ---------- Preguntas frecuentes ---------- */
.faq__lista { display: grid; gap: var(--s-100); max-width: 820px; }
.faq details {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  transition: background-color 300ms var(--ease);
}
.faq details[open] { background: var(--alt); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-200);
  padding: var(--s-200) var(--s-300);
  font-size: 1.125rem;   /* text-lg */
  line-height: 1.75rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  border-radius: var(--r-lg);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icono { color: var(--rojo); transition: rotate var(--dur) var(--ease); }
.faq details[open] summary .icono { rotate: 180deg; }
.faq__respuesta { padding: 0 var(--s-300) var(--s-300); max-width: 65ch; color: var(--grava); }

/* ---------- Contacto ---------- */
.contacto__grid { display: grid; gap: var(--s-600); align-items: start; }
@media (min-width: 900px) { .contacto__grid { grid-template-columns: 1fr 1.1fr; gap: var(--s-700); } }
.contacto__dato { display: flex; gap: var(--s-200); align-items: flex-start; margin-bottom: var(--s-300); }
.contacto__dato .icono-caja {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--s-500);
  height: var(--s-500);
  background: var(--rojo-banda);
  color: #fff;
  border-radius: var(--r-md);
}
.contacto__dato strong {
  display: block;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grava);
  margin-bottom: var(--s-25);
}
.contacto__dato a { color: var(--tinta); font-weight: 600; }
.contacto__dato a:hover { color: var(--rojo); }

.form {
  padding: var(--s-400);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra);
}
.form__campo { margin-bottom: var(--s-200); }
.form label {
  display: block;
  margin-bottom: var(--s-50);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
}
.form input,
.form textarea {
  width: 100%;
  font: inherit;
  color: var(--tinta);
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  padding: var(--s-100);
  transition: border-color 300ms var(--ease), box-shadow 300ms var(--ease);
}
.form input:focus,
.form textarea:focus { outline: none; border-color: var(--rojo); box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.2); }
.form [aria-invalid='true'] { border-color: var(--rojo); }
.form textarea { resize: vertical; min-height: 128px; }
.form__error {
  margin-top: var(--s-50);
  min-height: 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--rojo);
}
.form__estado { margin-top: var(--s-200); font-size: 0.875rem; line-height: 1.25rem; color: var(--grava); }
.form__nota { margin-top: var(--s-100); font-size: 0.75rem; line-height: 1rem; color: var(--grava); }

/* ---------- Footer ---------- */
.footer { background: var(--asfalto); color: var(--asfalto-texto); padding-block: var(--s-700) var(--s-400); }
.footer a { color: var(--asfalto-texto); }
.footer a:hover { color: #FF6B80; }
.footer__grid { display: flex; flex-wrap: wrap; gap: var(--s-400); align-items: center; justify-content: space-between; }
.footer__placa { background: #fff; border-radius: var(--r-lg); padding: var(--s-100) var(--s-200); }
.footer__placa img { height: 48px; width: auto; }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--s-100) var(--s-300); font-size: 0.875rem; line-height: 1.25rem; }
.footer__certificacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-300);
  margin-top: var(--s-500);
  padding-top: var(--s-400);
  border-top: 1px solid #313131;
}
.footer__sello { background: #fff; border-radius: var(--r-lg); padding: var(--s-100); }  /* el sello naranja solo va sobre blanco */
.footer__sello img { width: 64px; height: auto; }                                       /* 64 px = 1,7 cm, sobre el mínimo de 1,5 cm */
.footer__certificacion-texto { max-width: 60ch; font-size: 0.875rem; line-height: 1.25rem; color: rgba(237, 232, 224, 0.85); }
.footer__certificacion-texto p + p { margin-top: var(--s-75); }
.footer__certificacion-texto strong { color: var(--asfalto-texto); }
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-75) var(--s-400);
  justify-content: space-between;
  margin-top: var(--s-400);
  padding-top: var(--s-300);
  border-top: 1px solid #313131;
  font-size: 0.75rem;
  line-height: 1rem;
  color: rgba(237, 232, 224, 0.7);
}
.footer__legal a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Páginas interiores (404, aviso de privacidad) ---------- */
.pagina { min-height: 100svh; display: flex; flex-direction: column; }
.pagina main { flex: 1; padding-block: var(--s-900) var(--s-700); }
.pagina__marca { display: inline-flex; margin-bottom: var(--s-600); background: #fff; border-radius: var(--r-lg); padding: var(--s-100) var(--s-200); border: 1px solid var(--linea); }
.pagina__marca img { height: 48px; width: auto; }
.pagina .eyebrow { margin-bottom: var(--s-75); }
.pagina h1 { font-size: 2.25rem; line-height: 2.5rem; margin-bottom: var(--s-200); max-width: var(--medida); }
@media (min-width: 768px) { .pagina h1 { font-size: 3rem; line-height: 1; } }
.pagina .lead { font-size: 1.125rem; line-height: 1.75rem; color: var(--grava); max-width: 55ch; margin-bottom: var(--s-400); }
.prosa { max-width: 720px; }
.prosa h2 { font-size: 1.5rem; line-height: 2rem; margin: var(--s-500) 0 var(--s-100); }
.prosa p, .prosa li { margin-bottom: var(--s-100); }
.prosa ul { list-style: disc; padding-left: var(--s-300); }
.prosa .actualizacion { font-size: 0.875rem; line-height: 1.25rem; color: var(--grava); }

/* ---------- Aparición al desplazarse ---------- */
.js .revelar {
  opacity: 0;
  transform: translateY(64px);        /* translate-y-16 */
  filter: blur(12px);                 /* blur-md */
  transition: opacity 800ms var(--ease), transform 800ms var(--ease), filter 800ms var(--ease);
}
.js .revelar.visible { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .js .revelar { opacity: 1; transform: none; filter: none; }
  .js .palabra { opacity: 1; }
  /* El carrusel de clientes se mueve solo siempre (decisión del cliente): lleva botón de pausa */
}