/* ============================================================================
   CyJ Áridos — hoja de estilos
   ----------------------------------------------------------------------------
   El azul no es decorativo: se muestreó de las fotos del camión y del logo
   (#002490 / #001878 / #000060), porque el cliente pidió textualmente
   «blanco y azul, como los camiones». El ámbar queda solo como acento.
   ========================================================================== */

:root {
  --azul:        #00248C;   /* marca: barra, títulos, botones primarios */
  --azul-hondo:  #001450;   /* secciones oscuras, footer, overlay del hero */
  --azul-suave:  #EDF2FA;   /* fondo alternado de sección */
  --azul-borde:  #CBD8EC;
  --blanco:      #FFFFFF;
  --texto:       #001450;   /* 17.27:1 sobre blanco */
  --texto-suave: #4A5C7A;   /*  6.77:1 sobre blanco */
  --ambar:       #E8A33D;   /*  5.97:1 sobre azul · 8.01:1 con azul hondo */
  --ambar-hondo: #B87413;   /*  4.52:1 sobre blanco, para texto sobre claro */
  --wa:          #25D366;
  --wa-texto:    #06280F;

  --borde-claro: rgba(0, 36, 140, 0.14);
  --sombra-sm:   0 6px 22px rgba(0, 20, 80, 0.10);
  --sombra-md:   0 18px 40px rgba(0, 20, 80, 0.14);
  --sombra-lg:   0 30px 70px rgba(0, 20, 80, 0.18);

  --ancho:       1500px;
  --gutter:      clamp(20px, 4vw, 40px);
  --radio:       22px;
  --radio-sm:    17px;

  --sans:  Inter, system-ui, -apple-system, sans-serif;
  --titulo: Sora, var(--sans);
  --mono:  'IBM Plex Mono', ui-monospace, monospace;

  --ease:  cubic-bezier(0.2, 0.7, 0.25, 1);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--blanco);
  color: var(--texto);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; }
a   { color: var(--azul); text-decoration: none; }

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

/* ── Piezas que se repiten ────────────────────────────────────────────────── */

.wrap { max-width: var(--ancho); margin: 0 auto; padding-inline: var(--gutter); }

.seccion     { padding-block: clamp(80px, 11vw, 128px); }
.seccion--suave  { background: var(--azul-suave); }
.seccion--honda  { background: var(--azul-hondo); color: var(--blanco); }
.seccion--ancla  { scroll-margin-top: 76px; }

/* Tamaños de letra: 12px es el piso.
   Christopher revisó el sitio en su celular el 28-09-2026: «las letras chicas
   deben ser más grandes». Estaban en 10px, y en mono y mayúsculas con tracking
   se leen todavía más chicas de lo que miden. Los datos que la gente viene a
   buscar —precios, horario, mínimos— van de 14px para arriba; los rótulos
   decorativos, de 13px.

   Mandó tres capturas marcadas: «ÁRIDOS» sobre cada material, «LO QUE MOVEMOS»
   y «PRODUCTOS Y VALORES», y las tres píldoras de contacto. A esas además se
   les bajó el letter-spacing: en mayúsculas y con el tracking ancho, el ojo las
   lee más chicas de lo que miden, así que subir los px sin cerrar el espaciado
   no alcanzaba. */
.eyebrow {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ambar-hondo);
}
.seccion--honda .eyebrow,
.hero .eyebrow { color: var(--ambar); }

.titulo {
  margin: 0;
  font-family: var(--titulo);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--texto);
  font-size: clamp(28px, 6.2vw, 54px);
  /* Palabras largas en mayúsculas («MICROEMPRESA», «COMPROMETIDA») se salían
     de su columna a tamaños grandes y pisaban la foto de al lado.
     ⚠️ SIN `hyphens: auto`: partía palabras cortas con guion en medio del
     título («CUÉNTANOS QUÉ ES-TÁS CONSTRUYENDO»). Con break-word la palabra
     salta entera a la línea siguiente y solo se parte si no cabe ni sola. */
  overflow-wrap: break-word;
}
.seccion--honda .titulo { color: var(--blanco); }
.titulo em { font-style: normal; color: var(--azul); }
.seccion--honda .titulo em,
.hero .titulo em { color: var(--ambar); }

.bajada {
  margin: 0;
  font-size: clamp(15px, 3.4vw, 18px);
  line-height: 1.6;
  color: var(--texto-suave);
}
.seccion--honda .bajada { color: rgba(255, 255, 255, 0.82); }

/* Botones */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--titulo); font-weight: 700; font-size: 15px;
  padding: 15px 24px; border-radius: 999px; border: 0; cursor: pointer;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), background 200ms;
}
.btn:hover { transform: translateY(-2px); }

.btn--wa     { background: var(--wa); color: var(--wa-texto); box-shadow: 0 10px 30px rgba(37, 211, 102, 0.30); }
/* El ícono va con el disco BLANCO y el glifo en verde, como el logo original.
   Con currentColor heredaba el verde casi negro del texto y se veía un disco
   oscuro. */
.btn--wa svg, .wa-float svg { fill: #FFFFFF; }
.btn--ambar  { background: var(--ambar); color: var(--azul-hondo); box-shadow: 0 10px 30px rgba(232, 163, 61, 0.32); }
.btn--ambar:hover { box-shadow: 0 14px 36px rgba(232, 163, 61, 0.48); }
.btn--azul   { background: var(--azul); color: var(--blanco); box-shadow: var(--sombra-sm); }
.btn--linea  { background: transparent; border: 1px solid var(--azul-borde); color: var(--azul); font-weight: 600; }
.btn--linea:hover { background: var(--azul-suave); }
.btn--vidrio {
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--blanco); font-weight: 600;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.btn--vidrio:hover { background: rgba(255, 255, 255, 0.22); }

/* ── Barra de navegación ──────────────────────────────────────────────────── */
/* Transparente sobre el hero con el logo grande; al scrollear el logo se
   encoge y entra a la barra, que toma fondo blanco con blur. */

.nav {
  position: fixed; inset: 0 0 auto; z-index: 60;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background 420ms ease, border-color 420ms ease, backdrop-filter 420ms ease;
}
.nav.scrolled {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--azul-borde);
}
/* Grilla de tres columnas en vez de flex: con `space-between` el menú se
   centraba en el ESPACIO SOBRANTE, no en la página, y quedaba corrido 87px a
   la derecha porque el logo y la hamburguesa no miden lo mismo. Con
   `1fr auto 1fr` las dos columnas laterales son iguales por definición y el
   menú cae exacto en el centro. */
.nav-inner {
  max-width: var(--ancho); margin: 0 auto;
  padding: 12px var(--gutter);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: clamp(12px, 3vw, 28px);
}
/* Columna explícita para cada uno. Sin esto, en celular `.nav-centro` va con
   display:none y NO ocupa celda: la hamburguesa se corría a la columna del
   medio en lugar de la tercera, y quedaba despegada del borde derecho. */
.nav-marca  { grid-column: 1; justify-self: start; }
.nav-centro { grid-column: 2; }
.nav-burger { grid-column: 3; justify-self: end; }
.nav-marca { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; min-width: 0; }
.nav-logo {
  width: clamp(72px, 11vw, 128px); height: clamp(72px, 11vw, 128px);
  border-radius: 999px; display: block;
  box-shadow: 0 10px 30px rgba(0, 20, 80, 0.35);
  transition: width 450ms var(--ease), height 450ms var(--ease), box-shadow 450ms;
}
.nav.scrolled .nav-logo { width: 44px; height: 44px; box-shadow: none; }
.nav-word {
  opacity: 0; transition: opacity 350ms ease 120ms;
  font-family: var(--titulo); font-weight: 800; font-size: 14px;
  letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.1;
  color: var(--azul);
}
.nav.scrolled .nav-word { opacity: 1; }

.nav-centro { display: none; justify-content: center; }
.nav-pill {
  display: flex; gap: clamp(14px, 2vw, 30px);
  border-radius: 999px; padding: 11px 22px;
  border: 1px solid transparent;
  transition: background 420ms ease, border-color 420ms ease;
}
/* Antes del scroll los links van sobre el video: pill de vidrio oscuro detrás,
   que se disuelve cuando la barra toma su fondo blanco. */
.nav:not(.scrolled) .nav-pill {
  background: rgba(0, 20, 80, 0.55); border-color: rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.nav-link {
  display: none; position: relative; padding-bottom: 4px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--texto-suave);
  transition: color 200ms;
}
.nav:not(.scrolled) .nav-link { color: rgba(255, 255, 255, 0.86); }
.nav-link::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  height: 2px; width: 100%; background: var(--ambar); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform 380ms var(--ease);
}
.nav-link:hover { color: var(--azul); }
.nav:not(.scrolled) .nav-link:hover { color: var(--ambar); }
.nav-link:hover::after, .nav-link:focus-visible::after { transform: scaleX(1); }

/* Hamburguesa: en celular el menú NO desaparece, se abre desde acá. */
.nav-burger {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.92); border: 1px solid var(--azul-borde);
  color: var(--azul); cursor: pointer;
  transition: background 200ms, border-color 200ms;
}
.nav:not(.scrolled) .nav-burger {
  background: rgba(0, 20, 80, 0.55); border-color: rgba(255, 255, 255, 0.28);
  color: #FFFFFF;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.nav-burger:hover { background: var(--azul-suave); }
.nav:not(.scrolled) .nav-burger:hover { background: rgba(0, 20, 80, 0.75); }

.nav-movil {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--azul-borde);
  border-bottom: 1px solid var(--azul-borde);
  padding: 10px var(--gutter) 18px;
  display: grid; gap: 2px;
  max-height: calc(100svh - 76px); overflow-y: auto;
}
.nav-movil[hidden] { display: none; }
.nav-movil-link {
  display: block; padding: 15px 4px;
  border-bottom: 1px solid var(--azul-borde);
  font-family: var(--titulo); font-weight: 700; font-size: 16px;
  color: var(--texto);
}
.nav-movil-link:last-of-type { border-bottom: 0; }
.nav-movil-wa { margin-top: 12px; width: 100%; justify-content: center; }

@media (min-width: 900px) {
  .nav-link   { display: inline-block; }
  .nav-centro { display: flex; }
  .nav-burger { display: none; }
  .nav-movil  { display: none !important; }
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */

/* El hero es scrollytelling: a la pantalla se le suma una «pista» de scroll que
   mueve la animación mientras el contenido queda sticky.

   En el celular la pista vale 0. Christopher lo midió con el pulgar el
   28-09-2026: «tengo que deslizar tres veces para recién encontrarme con la
   siguiente información». Eran 2.194px, 2,6 pantallas de un mismo cuadro. Con
   la pista en 0 el hero mide exactamente una pantalla y el segundo deslizamiento
   ya trae contenido nuevo. En computador, donde se recorre con rueda y no con
   el dedo, el efecto se mantiene. */
.hero { --pista: 160vh; position: relative; height: calc(100svh + var(--pista)); }
.hero-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 62% center; will-change: filter;
}
/* Encuadre de celular. Con el video vertical puesto (cyj-hero-vertical.mp4) el
   recorte desaparece y `center` basta; mientras solo exista el horizontal, este
   desplazamiento es lo que rescata la tolva descargando, que es lo que
   comunica. */
@media (max-width: 720px) {
  .hero { --pista: 0vh; }
  .hero-video { object-position: 58% 38%; }
  .hero-degrade {
    background: linear-gradient(180deg,
      rgba(0, 20, 80, 0.12) 0%,
      rgba(0, 20, 80, 0.28) 38%,
      rgba(0, 20, 80, 0.90) 100%);
  }
  .hero-inner { padding-top: 70px; }
}
.hero-degrade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 20, 80, 0.20) 0%,
    rgba(0, 20, 80, 0.45) 45%,
    rgba(0, 20, 80, 0.88) 100%);
}
.hero-velo { position: absolute; inset: 0; background: var(--azul-hondo); opacity: 0; }
.hero-inner {
  position: relative; height: 100%;
  max-width: var(--ancho); margin: 0 auto;
  padding: 86px var(--gutter) clamp(26px, 6vh, 88px);
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: clamp(12px, 2.2vh, 22px);
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 7px 7px 8px; border-radius: 999px;
  background: rgba(0, 20, 80, 0.55); border: 1px solid rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 24px rgba(0, 20, 80, 0.35);
  margin-bottom: clamp(12px, 2.4vh, 22px);
}
.hero-badge b {
  background: var(--ambar); color: var(--azul-hondo);
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
}
.hero-badge span {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--blanco); padding-right: 10px;
  text-shadow: 0 1px 8px rgba(0, 20, 80, 0.7);
}
.hero h1 {
  margin: 0;
  font-family: var(--titulo); font-weight: 800;
  font-size: clamp(34px, min(9.5vw, 11vh), 104px);
  line-height: 0.96; letter-spacing: -0.03em;
  text-transform: uppercase; text-wrap: balance; color: var(--blanco);
}
.hero h1 em { font-style: normal; color: var(--ambar); }
.hero-copy { max-width: 620px; will-change: transform, opacity; }
.hero-copy p {
  margin: 0; font-size: clamp(15px, 3.6vw, 19px);
  line-height: 1.5; color: rgba(255, 255, 255, 0.90);
}
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; will-change: transform; }

/* ── Cinta de materiales ──────────────────────────────────────────────────── */

.ticker { background: var(--azul); color: var(--blanco); padding-block: clamp(44px, 7vw, 72px); overflow: hidden; }
.ticker .eyebrow { color: var(--ambar); }
.ticker-intro { max-width: var(--ancho); margin: 0 auto 26px; padding-inline: var(--gutter); }
.ticker-intro p:last-child { margin: 0; font-size: clamp(15px, 3.4vw, 18px); color: rgba(255, 255, 255, 0.86); }
.ticker-wrap {
  display: flex; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track { display: flex; flex: 0 0 auto; width: max-content; will-change: transform; animation: marquee 36s linear infinite; }
.ticker-wrap:hover .ticker-track { animation-play-state: paused; }
.ticker-grupo {
  display: flex; align-items: center;
  gap: clamp(18px, 3vw, 40px); padding-right: clamp(18px, 3vw, 40px);
  font-family: var(--titulo); font-weight: 700; text-transform: uppercase;
  font-size: clamp(20px, 4.6vw, 38px); letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.94); white-space: nowrap;
}
.ticker-grupo i { font-style: normal; color: var(--ambar); }

@keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* ── Productos ────────────────────────────────────────────────────────────── */

.prod-head {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(24px, 4vw, 64px); align-items: end; margin-bottom: clamp(36px, 5vw, 64px);
}
.prod-head .bajada { max-width: 46ch; }




/* Aviso de condiciones: netos, «desde», sin despacho. Va sí o sí. */
.aviso {
  margin-top: clamp(24px, 3vw, 36px);
  padding: 16px 18px; border-radius: 14px;
  background: var(--azul-suave); border: 1px solid var(--azul-borde);
  font-size: 14px; line-height: 1.6; color: var(--texto-suave);
}
.aviso strong { color: var(--texto); }

/* ── Reparto ──────────────────────────────────────────────────────────────── */

.reparto-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: clamp(32px, 4vw, 64px); align-items: center;
}
.pasos { display: grid; gap: 26px; margin-top: clamp(28px, 4vw, 44px); }
.paso {
  border-top: 1px solid var(--azul-borde); padding-top: 16px;
  display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start;
}
.paso span { font-family: var(--mono); font-size: 32px; font-weight: 500; color: var(--ambar-hondo); line-height: 1; }
.paso h3 { margin: 0 0 6px; font-family: var(--titulo); font-weight: 700; font-size: 19px; color: var(--texto); }
.paso p  { margin: 0; font-size: 15px; line-height: 1.55; color: var(--texto-suave); }

.foto-marco { position: relative; }
.foto-marco > div { border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra-lg); }
.foto-marco img { width: 100%; display: block; }
.foto-chapa {
  position: absolute; left: clamp(12px, 3vw, 26px); bottom: clamp(-18px, -2vw, -12px);
  background: var(--azul); color: var(--blanco); border-radius: 16px;
  padding: 14px 18px; box-shadow: var(--sombra-md);
  display: flex; align-items: center; gap: 12px; max-width: 84%;
}
.foto-chapa span { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.4; }

/* ── Nosotros ─────────────────────────────────────────────────────────────── */

/* minmax 460px: con 380px la grilla partía en dos columnas demasiado
   angostas ya a 900px, y el título en mayúsculas no cabía. Ahora pasa a dos
   columnas recién cuando hay ancho de verdad. */
.nosotros-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: clamp(32px, 4vw, 64px); align-items: center;
}
.nosotros-grid > div { min-width: 0; }
/* Antes era flex-wrap y la última cifra caía sola a una segunda fila,
   desalineada con las de arriba. Ahora son dos en grilla: quedan parejas en
   cualquier ancho. La tercera (las reseñas) se fue a su propia sección, donde
   se luce con la valoración de Google en vez de ser un número suelto. */
.cifras {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 4vw, 40px); margin-top: 32px;
}
.cifra { min-width: 0; }
.cifra p:first-child {
  margin: 0; font-family: var(--mono); font-size: clamp(34px, 7vw, 52px);
  font-weight: 500; color: var(--azul); line-height: 1;
}
.cifra p:last-child {
  margin: 6px 0 0; font-family: var(--mono); font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-suave);
  overflow-wrap: anywhere;   /* «comunas con despacho» no desborda su columna */
}
.marco-suave {
  padding: 10px; border-radius: var(--radio);
  background: var(--azul-suave); border: 1px solid var(--azul-borde);
}
.marco-suave > div { border-radius: var(--radio-sm); overflow: hidden; }
.marco-suave img { width: 100%; display: block; }
.marco-suave p {
  margin: 14px 8px 8px; font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--texto-suave);
}

/* ── Entregas (slider) ────────────────────────────────────────────────────── */

.entregas-head {
  max-width: var(--ancho); margin: 0 auto clamp(28px, 4vw, 44px);
  padding-inline: var(--gutter);
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 22px;
}
.sl-btns { display: flex; gap: 12px; }
.sl-btn {
  width: 54px; height: 54px; border-radius: 999px; border: 0;
  background: var(--blanco); color: var(--azul); font-size: 20px; cursor: pointer;
  box-shadow: var(--sombra-md); transition: transform 200ms var(--ease);
}
.sl-btn:hover { transform: translateY(-2px); }
.sl-viewport { overflow: hidden; padding-inline: var(--gutter); }
/* El carrusel avanza solo; el JS lo frena con el cursor encima, al enfocar con
   el teclado o mientras se arrastra con el dedo. */
.slide { cursor: grab; }
.sl-viewport:hover .sl-btn { opacity: 1; }
.sl-track { display: flex; gap: clamp(12px, 1.15vw, 24px); width: max-content; }
.slide {
  flex: 0 0 auto; width: clamp(260px, 82vw, 360px); cursor: pointer;
  padding: 10px; border-radius: var(--radio);
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16);
  outline-offset: 3px; transition: background 200ms;
}
.slide:hover { background: rgba(255, 255, 255, 0.14); }
.slide-foto {
  border-radius: var(--radio-sm); overflow: hidden; aspect-ratio: 4 / 3;
  background: var(--azul); display: flex; align-items: center; justify-content: center;
}
.slide-foto > div { width: 100%; height: 100%; background-size: cover; background-position: center; }
.slide p {
  margin: 12px 8px 6px; font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72);
}

/* ── CTA final ────────────────────────────────────────────────────────────── */

.cta { position: relative; overflow: hidden; }
.cta-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-attachment: fixed; }
@media (max-width: 1024px), (hover: none) { .cta-bg { background-attachment: scroll; } }
.cta-velo { position: absolute; inset: 0; background: rgba(0, 20, 80, 0.82); }
.cta-inner { position: relative; max-width: 880px; margin: 0 auto; padding: clamp(88px, 12vw, 140px) var(--gutter); text-align: center; }
.cta h2 { color: var(--blanco); font-size: clamp(30px, 7vw, 62px); line-height: 1.02; }
.cta h2 em { color: var(--ambar); }
.cta .bajada { margin: 0 auto 34px; max-width: 52ch; color: rgba(255, 255, 255, 0.88); }
.cta-botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-bottom: 34px; }
.datos { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.datos span {
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.04em;
  color: var(--blanco); background: rgba(0, 20, 80, 0.60);
  border: 1px solid rgba(255, 255, 255, 0.30); border-radius: 999px; padding: 9px 16px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}

.mapa {
  margin-top: clamp(40px, 6vw, 64px); padding: 10px; border-radius: var(--radio);
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); text-align: left;
}
.mapa-marco { border-radius: var(--radio-sm); overflow: hidden; background: var(--azul-hondo); }
.mapa iframe { width: 100%; height: clamp(240px, 42vw, 380px); border: 0; display: block; }
.mapa-pie {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px 12px 10px;
}
.mapa-pie p:last-child { margin: 0; font-family: var(--titulo); font-weight: 700; font-size: clamp(15px, 3.4vw, 18px); color: var(--blanco); line-height: 1.35; }
.mapa-pie .comollegar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.mapa-pie .comollegar > span { font-family: var(--titulo); font-weight: 700; font-size: clamp(14px, 3.2vw, 16px); color: var(--blanco); }
.icono-mapa {
  width: 48px; height: 48px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  transition: transform 200ms var(--ease);
}
.icono-mapa:hover { transform: translateY(-2px); }

/* ── Footer ───────────────────────────────────────────────────────────────── */

.site-footer { background: var(--azul-hondo); color: var(--blanco); }
.footer-grid {
  max-width: var(--ancho); margin: 0 auto;
  padding: clamp(48px, 7vw, 80px) var(--gutter) 28px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(28px, 4vw, 48px);
}
.footer-marca { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.footer-marca img { width: 56px; height: 56px; border-radius: 999px; display: block; }
.footer-marca span { font-family: var(--titulo); font-weight: 800; font-size: 15px; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.2; }
.footer-grid h4 {
  margin: 0 0 14px; font-family: var(--mono); font-size: 13px; font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.56);
}
.footer-lista { display: grid; gap: 10px; font-size: 15px; }
.f-link { color: rgba(255, 255, 255, 0.86); transition: color 200ms; }
.f-link:hover { color: var(--ambar); }
.footer-datos { display: grid; gap: 10px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.78); }
.footer-horario { font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.56); }
.soc {
  width: 44px; height: 44px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.22);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--blanco); transition: background 200ms;
}
.soc:hover { background: rgba(255, 255, 255, 0.20); }
.soc--wa { background: rgba(37, 211, 102, 0.18); border-color: rgba(37, 211, 102, 0.46); color: var(--wa); }
.soc--wa:hover { background: rgba(37, 211, 102, 0.30); }
.footer-legal {
  max-width: var(--ancho); margin: 0 auto;
  padding: 20px var(--gutter) 40px; border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.68);
}
.footer-legal a { color: var(--ambar); }

/* ── Preguntas frecuentes ──────────────────────────────────────────────────
   <details> nativo: se abre y cierra sin JavaScript, y el contenido está en el
   HTML aunque esté plegado, que es lo que necesita Google para leerlo. */
.faq { display: grid; gap: 10px; max-width: 760px; }
.faq-item {
  background: var(--blanco); border: 1px solid var(--azul-borde);
  border-radius: 14px; overflow: hidden;
}
.faq-item summary {
  list-style: none; cursor: pointer;
  padding: 18px 52px 18px 20px; position: relative;
  font-family: var(--titulo); font-weight: 700; font-size: 16px; line-height: 1.4;
  color: var(--texto);
}
.faq-item summary::-webkit-details-marker { display: none; }
/* La cruz que gira: dibujada, no un carácter, para que no cambie según la
   fuente que alcance a cargar. */
.faq-item summary::after {
  content: ''; position: absolute; right: 20px; top: 50%;
  width: 14px; height: 14px; margin-top: -7px;
  background: no-repeat center / 14px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300248C' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  transition: transform 220ms var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { background: var(--azul-suave); }
.faq-item p {
  margin: 0; padding: 0 20px 20px; font-size: 15px; line-height: 1.65;
  color: var(--texto-suave);
}

/* ── WhatsApp flotante ────────────────────────────────────────────────────── */
/* Nace visible: si el JS falla, nunca desaparece. El JS solo lo esconde sobre
   el hero, donde ya hay un botón verde grande. */

.wa-float {
  position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px);
  z-index: 80; width: 60px; height: 60px; border-radius: 999px;
  background: var(--wa); color: var(--wa-texto);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 34px rgba(37, 211, 102, 0.42);
  transition: transform 220ms var(--ease), opacity 300ms;
}
.wa-float:hover { transform: translateY(-3px) scale(1.04); }
.wa-float.oculto { opacity: 0; pointer-events: none; }

/* ── Animaciones de entrada ───────────────────────────────────────────────── */

@keyframes blurIn { from { opacity: 0; filter: blur(12px); transform: translateY(14px); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes rise   { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker-track { animation: none !important; }
  .ticker-grupo { flex-wrap: wrap; white-space: normal; }
  [data-blur] span, [data-reveal] { opacity: 1 !important; animation: none !important; }
  .card, .btn, .sl-btn, .icono-mapa, .wa-float { transition: none; }
}

/* ── Cotizador ─────────────────────────────────────────────────────────────
   Dos columnas en escritorio (formulario | resultado) y una sola en celular,
   con el resultado debajo: es donde llega el 100% de sus clientes. */

/* Dos columnas desiguales: el formulario lleva nueve opciones con foto y
   necesita el ancho; el resultado es una tarjeta compacta. Con columnas
   iguales el formulario se estiraba a lo alto y la derecha quedaba vacía. */
.cotizador {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(18px, 2.4vw, 28px); align-items: start;
}
@media (min-width: 900px) {
  .cotizador { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  /* El pedido acompaña mientras la persona recorre las opciones: son nueve
     materiales, y sin esto el resumen se queda arriba y deja de verse justo
     cuando se está llenando. */
  .cot-lado { position: sticky; top: 92px; }
}

.cot-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 14px;
  padding: clamp(20px, 3vw, 30px);
  border-radius: var(--radio);
  background: var(--blanco);
  border: 1px solid var(--azul-borde);
  box-shadow: var(--sombra-sm);
}
.campo--ancho { grid-column: 1 / -1; }

.campo label {
  display: block; margin-bottom: 7px;
  font-family: var(--titulo); font-weight: 700; font-size: 14px; color: var(--texto);
}
.campo-unidad { font-family: var(--sans); font-weight: 400; color: var(--texto-suave); }

.campo input[type="text"], .campo input[type="tel"],
.campo input[type="number"], .campo select {
  width: 100%; padding: 13px 14px;
  border: 1px solid var(--azul-borde); border-radius: 12px;
  background: var(--blanco); color: var(--texto);
  font-family: var(--sans); font-size: 16px;   /* 16px: menos y iOS hace zoom al enfocar */
  transition: border-color 160ms, box-shadow 160ms;
}
/* Con appearance: none el select pierde la flecha del sistema y queda igual a
   un campo de texto: nadie sabe que se despliega. Se dibuja una propia. */
.campo select {
  appearance: none; -webkit-appearance: none;
  padding-right: 42px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5 7 7.5 13 1.5' stroke='%2300248C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
}
.campo input:focus, .campo select:focus {
  outline: none; border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(0, 36, 140, 0.14);
}
.campo input[aria-invalid="true"], .campo select[aria-invalid="true"] { border-color: #C0392B; }

.campo-ayuda { margin: 7px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--texto-suave); }
.campo-error {
  margin: 7px 0 0; font-size: 13px; line-height: 1.45;
  color: #C0392B; font-weight: 600; display: none;
}
.campo-error.visible { display: block; }
.campo-error--general { margin-bottom: 12px; }

.acepto {
  display: flex; gap: 11px; align-items: flex-start;
  font-family: var(--sans) !important; font-weight: 400 !important;
  font-size: 14px !important; line-height: 1.5; color: var(--texto-suave) !important;
  cursor: pointer;
}
.acepto input { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; accent-color: var(--azul); }

.cot-form .btn { width: 100%; justify-content: center; }

/* Resultado */
.cot-salida { display: block; }

/* El pedido armándose en vivo, al costado. */
.cot-lado { display: grid; gap: 16px; }
.cot-resumen {
  padding: clamp(20px, 3vw, 28px); border-radius: var(--radio);
  background: var(--azul); color: var(--blanco); box-shadow: var(--sombra-md);
}
.cot-resumen[hidden] { display: none; }
.cot-resumen .cot-etiqueta { margin-bottom: 14px; }
.cot-resumen-vacio {
  margin: 0; font-size: 15px; line-height: 1.55;
  color: rgba(255, 255, 255, 0.78); text-align: center;
}
.cot-icono { font-size: 30px; display: block; margin-bottom: 12px; }
.cot-resumen-pie {
  margin: 16px 0 0; font-size: 13.5px; line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}

.cot-resultado {
  padding: clamp(22px, 3vw, 32px); border-radius: var(--radio);
  background: var(--azul); color: var(--blanco); box-shadow: var(--sombra-md);
}
.cot-etiqueta {
  margin: 0 0 6px; font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ambar);
}
.cot-monto {
  margin: 0; font-family: var(--titulo); font-weight: 800;
  font-size: clamp(38px, 8vw, 58px); line-height: 1; letter-spacing: -0.03em;
}
.cot-detalle { margin: 8px 0 0; font-size: 15px; color: rgba(255, 255, 255, 0.86); }

.cot-lista { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 0; }
.cot-lista li {
  display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: space-between;
  padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.18); font-size: 15px;
}
.cot-lista li:last-child { border-bottom: 0; }
.cot-lista b { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); font-weight: 400; }
.cot-lista span { color: var(--blanco); text-align: right; flex: 1 1 auto; }

/* Las líneas del pedido en la confirmación. */
.cot-titulo {
  margin: 0 0 18px; font-family: var(--titulo); font-weight: 800;
  font-size: clamp(24px, 5vw, 32px); line-height: 1.1; color: var(--blanco);
}
.cot-items { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.cot-items li {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.10);
}
.cot-items b { font-family: var(--mono); font-size: 17px; color: var(--ambar); }
.cot-items span { color: var(--blanco); font-size: 15px; }

.cot-letra-chica {
  margin: 18px 0 0; font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, 0.82);
}
.cot-letra-chica b { color: var(--blanco); }

.cot-wa { width: 100%; justify-content: center; margin-top: 22px; }

/* La vía de borrado. Discreta pero real: tiene que poder tocarse en el celular
   sin quedar pegada al botón de WhatsApp. */
.cot-baja {
  margin: 16px 0 0; text-align: center;
  font-size: 12.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.62);
}
.cot-baja a {
  color: rgba(255, 255, 255, 0.9); text-decoration: underline; text-underline-offset: 3px;
  display: inline-block; padding: 12px 10px; margin: -6px 0;
}

.cot-aviso {
  padding: 18px 20px; border-radius: 14px; margin-bottom: 16px;
  background: var(--blanco); border-left: 4px solid var(--ambar-hondo);
  box-shadow: var(--sombra-sm);
}
.cot-aviso h3 { margin: 0 0 6px; font-family: var(--titulo); font-size: 17px; color: var(--texto); }
.cot-aviso p  { margin: 0; font-size: 14px; line-height: 1.55; color: var(--texto-suave); }
.cot-aviso--error { border-left-color: #C0392B; }

@media (max-width: 560px) {
  .cot-form { grid-template-columns: 1fr; }
  .campo--ancho { grid-column: auto; }
}

/* ── Reseñas ───────────────────────────────────────────────────────────────
   Solo datos verificables: la valoración y el total del Perfil de Empresa,
   con enlace a la ficha. Las tarjetas de reseña solo se dibujan cuando hay
   reseñas REALES desde la API de Places (con nombre y fecha).
   Antes había cuatro tarjetas con los diferenciadores del cliente y, sin
   nombre, se leían como testimonios anónimos. Esas se fueron a su propia
   sección, «Cómo trabajamos», en primera persona. */





/* ── Cómo trabajamos ──────────────────────────────────────────────────────
   Las promesas de la empresa, en primera persona y sobre fondo claro: nada
   que se pueda confundir con la opinión de un cliente. */

/* Columnas explícitas en vez de auto-fit: con cuatro ítems, auto-fit dejaba
   el «04» solo en una segunda fila. En 2 o en 4 columnas siempre quedan
   parejos; nunca 3, que es lo que deja al huérfano. */
.compromiso-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 34px);
}
@media (min-width: 900px) {
  .compromiso-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .compromiso-grid { grid-template-columns: 1fr; }
}
.compromiso-item { border-top: 2px solid var(--azul-borde); padding-top: 18px; min-width: 0; }
.compromiso-num {
  display: block; margin-bottom: 10px;
  font-family: var(--mono); font-size: 14px; font-weight: 500;
  letter-spacing: 0.18em; color: var(--ambar-hondo);
}
.compromiso-item h3 {
  margin: 0 0 8px; font-family: var(--titulo); font-weight: 700;
  font-size: 18px; color: var(--texto);
}
.compromiso-item p {
  margin: 0; font-size: 15px; line-height: 1.55;
  color: var(--texto-suave); overflow-wrap: anywhere;
}

/* El ícono de marca nunca hereda el color del texto: lleva el suyo. */
.ic-marca { flex-shrink: 0; display: block; }

/* Foto del material dentro del resultado del cotizador: confirma de una
   mirada que la persona está pidiendo lo que cree estar pidiendo. */
.cot-foto {
  width: 96px; height: 96px; border-radius: 16px; object-fit: cover;
  display: block; margin: 0 auto 16px; border: 1px solid rgba(255, 255, 255, 0.22);
}

/* ── Catálogo: una tarjeta por material ────────────────────────────────────
   Antes eran dos tarjetas de grupo con una miniatura de 52px por material. A
   ese tamaño no se distinguía la gravilla del ripio, que es justo lo que la
   persona necesita ver antes de pedir. */

.mat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.mat-card {
  display: flex; flex-direction: column; min-width: 0;
  border-radius: var(--radio); overflow: hidden;
  background: var(--blanco); border: 1px solid var(--azul-borde);
  box-shadow: var(--sombra-sm);
  transition: transform 260ms var(--ease), box-shadow 260ms;
}
.mat-card:hover { transform: translateY(-4px); box-shadow: var(--sombra-md); }

.mat-foto { aspect-ratio: 16 / 10; background: var(--azul-hondo); overflow: hidden; }
.mat-foto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 700ms var(--ease);
}
.mat-card:hover .mat-foto img { transform: scale(1.05); }

.mat-cuerpo { padding: 20px 20px 18px; display: flex; flex-direction: column; flex: 1; }
.mat-grupo {
  margin: 0 0 8px; font-family: var(--mono); font-size: 13px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ambar-hondo);
}
.mat-card h3 {
  margin: 0 0 8px; font-family: var(--titulo); font-weight: 700;
  font-size: 21px; letter-spacing: -0.01em; color: var(--texto);
  overflow-wrap: break-word;
}
.mat-nota { margin: 0 0 14px; font-size: 14.5px; line-height: 1.5; color: var(--texto-suave); flex: 1; }
.mat-precio {
  margin: 0 0 16px; padding-top: 14px; border-top: 1px solid var(--azul-borde);
  font-size: 14px; color: var(--texto-suave);
}
.mat-precio b { font-family: var(--mono); font-weight: 500; font-size: 21px; color: var(--azul); }
.mat-precio span { font-size: 14px; }

.mat-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px; border-radius: 999px;
  background: var(--azul-suave); border: 1px solid var(--azul-borde);
  font-family: var(--titulo); font-weight: 700; font-size: 14px; color: var(--azul);
  transition: background 200ms, border-color 200ms;
}
.mat-cta:hover { background: var(--azul); border-color: var(--azul); color: var(--blanco); }
.mat-cta:hover svg { stroke: var(--blanco); }

/* ── Selector de material del cotizador ────────────────────────────────────
   Opciones a la vista en vez de un desplegable: con la foto al lado, la
   persona reconoce el material sin saberse el nombre técnico. */

.campo-titulo {
  display: block; margin-bottom: 10px;
  font-family: var(--titulo); font-weight: 700; font-size: 14px; color: var(--texto);
}
.mat-opciones {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: 10px;
}
.mat-opcion { position: relative; display: block; cursor: pointer; min-width: 0; }
.mat-opcion-cuerpo {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; border-radius: 14px 14px 0 0;
  background: var(--blanco); border: 2px solid var(--azul-borde); border-bottom: 0;
  transition: border-color 180ms, background 180ms;
}
/* La cantidad vive dentro de la misma tarjeta del material, no en un campo
   aparte más abajo: con varios materiales, un solo campo de cantidad lejos de
   lo que se marcó obligaría a recordar cuál se estaba llenando. */
/* La caja es la pieza completa: tarjeta + cantidad. Con `height: 100%` todas
   miden lo mismo en la grilla, que era lo que se descuadraba cuando la cantidad
   aparecía y desaparecía. */
.mat-opcion-caja {
  display: flex; flex-direction: column; height: 100%;
  border-radius: 14px; min-width: 0;
  transition: box-shadow 180ms;
}
.mat-opcion-caja .mat-opcion-cuerpo { flex: 1; }
.mat-cantidad {
  display: grid; gap: 6px; padding: 10px 12px 12px;
  background: var(--blanco);
  border: 2px solid var(--azul-borde); border-top: 0; border-radius: 0 0 14px 14px;
  transition: border-color 180ms, background 180ms;
}
.mat-opcion-caja.elegida .mat-cantidad {
  border-color: var(--azul); background: var(--azul-suave);
}
.mat-cantidad label {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em;
  color: var(--texto-suave);
}
.mat-cantidad input {
  width: 100%; padding: 12px 14px; font-size: 16px;
  border: 1px solid var(--azul-borde); border-radius: 10px;
  background: var(--blanco); color: var(--texto);
}
.mat-cantidad input:focus {
  outline: none; border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(0, 36, 140, 0.16);
}
/* El nombre arriba y el «desde» abajo, no en una línea: con el precio al lado,
   un nombre largo como «Base estabilizada» parte la línea en cualquier parte.
   (Estas tres reglas se perdieron al sacar la casilla; se repusieron.) */
.mat-opcion-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mat-opcion-txt b {
  font-family: var(--titulo); font-weight: 700; font-size: 15px; color: var(--texto);
  overflow-wrap: break-word;
}
.mat-opcion-txt small { font-family: var(--mono); font-size: 14px; color: var(--texto-suave); }

.mat-opcion:hover .mat-opcion-cuerpo { border-color: var(--azul); }
/* La tarjeta se enciende cuando su cantidad tiene un número: la clase la pone
   el JavaScript al escribir, no una casilla. */
.mat-opcion-caja.elegida .mat-opcion-cuerpo {
  border-color: var(--azul); background: var(--azul-suave);
}
.mat-opcion-caja.elegida { box-shadow: 0 0 0 3px rgba(0, 36, 140, 0.12); }


/* Cabecera de la sección de reseñas.
   ⚠️ Estas reglas se perdieron al limpiar el CSS con un patrón: «.resena»
   coincidía también con «.resenas-cab» y «.resenas-chip», que son otras
   clases. Un patrón de selector tiene que exigir el delimitador de fin. */
.resenas-cab {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 40px); align-items: center;
}
/* Título a la izquierda y la nota a la derecha, en columnas explícitas: con
   auto-fit la tarjeta se estiraba a todo el ancho y quedaba desbalanceada. */
@media (min-width: 860px) {
  .resenas-cab { grid-template-columns: minmax(0, 1fr) 320px; }
}

.resenas-chip {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px; padding: 8px 16px;
}
.resenas-chip span { font-size: 12.5px; font-weight: 600; letter-spacing: 0.03em; color: var(--blanco); }

/* Tarjeta de la valoración de Google. Estas reglas se perdieron al limpiar
   el CSS con un patrón: «.resena» también capturaba «.resena-google» y sus
   hermanas, y el bloque del 5,0 quedó como texto plano. */
.resena-google {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  padding: clamp(26px, 4vw, 38px); border-radius: var(--radio);
  background: rgba(232, 163, 61, 0.10); border: 1px solid rgba(232, 163, 61, 0.42);
  transition: border-color 200ms, transform 200ms var(--ease);
}
.resena-google:hover { border-color: var(--ambar); transform: translateY(-3px); }
.resena-nota {
  font-family: var(--titulo); font-weight: 800; font-size: clamp(46px, 9vw, 62px);
  line-height: 1; color: var(--ambar); letter-spacing: -0.03em;
}
.resena-estrellas { color: #F5A623; font-size: 18px; letter-spacing: 3px; }
.resena-meta { font-size: 14px; color: rgba(255, 255, 255, 0.84); }
.resena-ver {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  border: 1px solid rgba(232, 163, 61, 0.55); color: var(--ambar);
  padding: 11px 20px; border-radius: 999px; font-size: 14.5px; font-weight: 700;
}

/* ── Carrusel de reseñas ───────────────────────────────────────────────────
   Reseñas REALES del Perfil de Empresa, con nombre y fecha. Corre solo y se
   frena con el cursor encima, igual que el de entregas. Si no hay ninguna
   cargada, el PHP no dibuja el bloque: nunca se rellena. */

.rv-wrap { margin-top: clamp(30px, 4vw, 46px); }

.rv-viewport { overflow: hidden; }
.rv-track { display: flex; gap: 16px; width: max-content; }

.rv {
  flex: 0 0 auto; width: clamp(280px, 84vw, 380px);
  display: flex; flex-direction: column;
  padding: 26px; border-radius: var(--radio);
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
}
.rv-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.rv-estrellas { color: #F5A623; font-size: 15px; letter-spacing: 2px; }
.rv-texto {
  margin: 0 0 22px; flex: 1;
  font-size: 16.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.90);
  overflow-wrap: anywhere;
}
.rv-pie { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rv-avatar {
  width: 42px; height: 42px; border-radius: 999px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ambar); color: var(--azul-hondo);
  font-family: var(--titulo); font-weight: 800; font-size: 18px;
}
.rv-quien { display: flex; flex-direction: column; min-width: 0; }
.rv-autor {
  font-family: var(--titulo); font-weight: 700; font-size: 15px; color: var(--blanco);
  overflow-wrap: anywhere;
}
.rv-fecha { font-size: 12.5px; color: rgba(255, 255, 255, 0.62); }

.rv-btns { display: flex; gap: 12px; margin-top: 22px; }

/* Sin carrusel, la sección conserva el alto que tenía con él y queda un hueco
   grande antes de las entregas. Cuando va sola, se compacta. */
.resenas--sola { padding-block: clamp(56px, 7vw, 86px); }
.resenas--sola .resenas-cab { align-items: center; }

/* ── Páginas legales (privacidad, baja) ────────────────────────────────────
   Texto largo para leer, no para escanear: columna angosta, interlínea amplia
   y secciones bien separadas. Va sobre fondo claro porque se lee entero. */

.legal-pagina { padding-top: clamp(96px, 14vh, 140px); }
.legal-wrap   { max-width: 820px; }
.legal-wrap--angosto { max-width: 620px; }

.legal-version {
  margin: 14px 0 0; font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.08em; color: var(--texto-suave);
}

.legal { display: grid; gap: clamp(26px, 4vw, 38px); margin-top: clamp(30px, 5vw, 48px); }
.legal section { display: grid; gap: 12px; }
.legal h2 {
  margin: 0; font-family: var(--titulo); font-weight: 700;
  font-size: clamp(19px, 3.4vw, 23px); color: var(--texto);
  letter-spacing: -0.01em;
}
.legal p {
  margin: 0; font-size: 16px; line-height: 1.68; color: var(--texto-suave);
  overflow-wrap: break-word;
}
.legal p strong { color: var(--texto); }
.legal a { text-decoration: underline; text-underline-offset: 3px; }

/* La puerta del panel, discreta pero visible: es la única forma que tiene
   Christopher de entrar a administrar su sitio desde su propio sitio. */
.foot-admin { opacity: .6; }
.foot-admin:hover { opacity: 1; }

.legal ul { margin: 0; padding-left: 22px; display: grid; gap: 9px; }
.legal li { font-size: 16px; line-height: 1.6; color: var(--texto-suave); }
.legal li strong { color: var(--texto); }

/* Los 5 derechos van sin viñeta y con más aire: son lo que la gente viene a
   buscar a esta página. */
.legal-derechos {
  list-style: none; padding: 18px 20px; border-radius: 14px;
  background: var(--azul-suave); border: 1px solid var(--azul-borde); gap: 12px;
}

.legal-ojo {
  padding: 16px 18px; border-radius: 14px;
  background: var(--azul-suave); border-left: 4px solid var(--azul);
}

.legal-vias, .legal-cierre {
  display: flex; flex-wrap: wrap; gap: 12px;
}
.legal-cierre { margin-top: clamp(32px, 5vw, 48px); }