/* =============================================================
   Recimat · recimat.cl
   Marca: marrón #5c4a43 + verde #5d8a1b (muestreados del logo).
   Geometría: estructura a canto vivo con filetes de 1 px,
   controles con radio 8 px, medios con radio 12 px.
   El verde es solo acción y medición; nunca decoración.
   ============================================================= */

/* ===== Tokens ===== */
:root {
  /* Color */
  --marron: #5c4a43;
  --marron-oscuro: #3b2e29;
  --grafito: #241c19;
  --grafito-filete: rgba(243, 237, 230, .16);
  --verde: #5d8a1b;
  --verde-oscuro: #4a6f14;
  --verde-mas-oscuro: #3b590f;
  --verde-claro: #9ccb46;
  --verde-suave: #edf4e0;
  --hueso: #f6f2ec;
  --arena: #ebe3d8;
  --arena-borde: #d8cabb;
  --blanco: #ffffff;
  --texto: #2a211e;
  --texto-suave: #6b5e58;
  --texto-claro: #f3ede6;
  --texto-claro-suave: rgba(243, 237, 230, .78);
  --rojo: #a3352b;

  /* Tipografía */
  --fuente-titulo: "Sora", "Segoe UI", system-ui, sans-serif;
  --fuente-texto: "Source Sans 3", "Segoe UI", system-ui, sans-serif;

  /* Medidas */
  --ancho: 1180px;
  --alto-cabecera: 72px;
  --radio-control: 8px;
  --radio-medio: 12px;
  --aire-seccion: clamp(4.5rem, 9vw, 8rem);

  /* Una sola elevación, reservada al único elemento que flota */
  --sombra: 0 22px 45px -25px rgba(42, 33, 30, .55);
  --transicion: .25s ease;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--hueso);
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: 1.125rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--verde-oscuro);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--verde-mas-oscuro); }

h1, h2, h3 {
  font-family: var(--fuente-titulo);
  margin: 0 0 .55em;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.45rem, 5.6vw, 4.35rem);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -.032em;
}
h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.85rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.022em;
}
h3 {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
}
p { margin: 0 0 1.1em; max-width: 66ch; }

/* El foco usa el verde que contrasta con cada fondo (el claro se pierde sobre
   hueso; el oscuro se pierde sobre grafito). */
:focus-visible { outline: 3px solid var(--verde-oscuro); outline-offset: 3px; }
.hero :focus-visible,
.seccion-oscura :focus-visible,
.pie :focus-visible { outline-color: var(--verde-claro); }

/* ===== Estructura ===== */
.wrap {
  width: min(100% - clamp(2.5rem, 6vw, 4.5rem), var(--ancho));
  margin-inline: auto;
}
/* Columna de lectura corta que arranca en el mismo margen izquierdo que el
   resto de las secciones (no centrada: la página se lee sobre un eje a la
   izquierda). El max() replica el margen que calcula .wrap. */
.estrecho {
  max-width: 48rem;
  margin-inline: max(clamp(1.25rem, 3vw, 2.25rem), calc((100% - var(--ancho)) / 2)) auto;
}

.seccion { padding-block: var(--aire-seccion); }
section[id] { scroll-margin-top: calc(var(--alto-cabecera) + 8px); }
.seccion-arena { background: var(--arena); }
.seccion-oscura {
  background: var(--grafito);
  color: var(--texto-claro);
}
.seccion-oscura h2 { color: var(--blanco); }

/* Etiqueta de sección: filete corto + palabra en caja baja (sin versalitas
   ni tracking exagerado: la línea verde ya marca el comienzo). */
.kicker {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--fuente-titulo);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--verde-oscuro);
  margin: 0 0 1.1rem;
  max-width: none;
}
.kicker::before {
  content: "";
  flex: 0 0 auto;
  width: 2.25rem;
  height: 3px;
  background: currentColor;
}
.kicker-claro { color: var(--verde-claro); }

.destacado {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--marron);
  max-width: 40ch;
}
.destacado-claro {
  color: var(--verde-claro);
  margin-top: 2.75rem;
  margin-bottom: 0;
}

/* ===== Botones ===== */
.boton {
  display: inline-block;
  padding: .9rem 1.6rem;
  border-radius: var(--radio-control);
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.25;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.boton-verde { background: var(--verde-oscuro); color: var(--blanco); }
.boton-verde:hover { background: var(--verde-mas-oscuro); color: var(--blanco); }
.boton-marron { background: var(--marron); color: var(--blanco); }
.boton-marron:hover { background: var(--marron-oscuro); color: var(--blanco); }
.boton-borde {
  background: rgba(36, 28, 25, .25);
  color: var(--blanco);
  border-color: rgba(255, 255, 255, .75);
}
.boton-borde:hover { background: rgba(255, 255, 255, .16); color: var(--blanco); border-color: var(--blanco); }
.boton-borde-oscuro { background: transparent; color: var(--marron); border-color: var(--marron); }
.boton-borde-oscuro:hover { background: var(--marron); color: var(--blanco); }

/* ===== Cabecera ===== */
.cabecera {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  background: rgba(246, 242, 236, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--arena-borde);
}
/* Guirnalda de Fiestas Patrias: el JS marca <html data-fiesta> solo durante septiembre.
   La cabecera crece para que las banderitas cuelguen en una franja propia sin tapar nada. */
:root[data-fiesta] { --alto-cabecera: 96px; }
[data-fiesta] .cabecera-fila { padding-top: 24px; }
.cabecera::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 28px; display: none; pointer-events: none;
  background: url("../assets/img/guirnalda.svg?v=1") repeat-x left top / 240px 28px;
}
[data-fiesta] .cabecera::before { display: block; }

.cabecera-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--alto-cabecera);
}
.logo { display: block; position: relative; }
.logo img { height: 54px; width: auto; }

.menu { display: flex; align-items: center; gap: 1.75rem; }
.menu a:not(.boton) {
  font-family: var(--fuente-titulo);
  font-size: .95rem;
  font-weight: 500;
  color: var(--texto);
  text-decoration: none;
  padding-block: .35rem;
  border-bottom: 2px solid transparent;
}
.menu a:not(.boton):hover { color: var(--verde-oscuro); border-bottom-color: var(--verde); }
.menu .boton { padding: .6rem 1.1rem; font-size: .875rem; }

.menu-boton {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  padding: 11px 9px;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
}
.menu-boton span {
  display: block;
  height: 3px;
  background: var(--marron);
  border-radius: 2px;
  transition: transform var(--transicion), opacity var(--transicion);
}
.menu-boton[aria-expanded="true"] span:nth-child(1) { transform: translateY(9.5px) rotate(45deg); }
.menu-boton[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-boton[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9.5px) rotate(-45deg); }

/* ===== Hero ===== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: end;
  background: var(--grafito) url("../assets/video/hero-poster.jpg?v=1") center / cover no-repeat;
  color: var(--blanco);
  padding-top: var(--alto-cabecera);
  isolation: isolate;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
/* Velo en dos capas: una franja densa anclada abajo (donde va el texto, sea cual
   sea el alto de la pantalla) sobre un velo base tenue que deja ver el cielo.
   Contraste medido sobre el póster: ver tools/verificar-visual.sh. */
.hero-velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(36, 28, 25, 0) 0%,
      rgba(36, 28, 25, .30) 18%,
      rgba(36, 28, 25, .62) 45%,
      rgba(36, 28, 25, .88) 75%,
      rgba(36, 28, 25, .95) 100%) bottom / 100% min(700px, 80%) no-repeat,
    linear-gradient(180deg, rgba(36, 28, 25, .20) 0%, rgba(36, 28, 25, .42) 100%);
}
.hero-contenido { padding-block: clamp(4rem, 12vh, 8rem) clamp(3.5rem, 9vh, 6rem); }
/* Sobre el video el verde no llega a 4,5:1 en el punto más claro del póster:
   la etiqueta va en blanco y el acento queda en el filete. */
.hero .kicker { color: var(--blanco); }
.hero .kicker::before { background: var(--verde-claro); }
.hero h1 { color: var(--blanco); max-width: 17ch; margin-bottom: .35em; }
.hero-texto {
  font-size: clamp(1.1rem, 1.4vw, 1.25rem);
  max-width: 56ch;
  color: rgba(255, 255, 255, .92);
}
.hero-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: 2.25rem;
}
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }

/* ===== Nosotros ===== */
.dos-columnas {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.cifra-inline {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  font-family: var(--fuente-titulo);
  font-size: 1rem;
  color: var(--texto-suave);
  margin: 2rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--arena-borde);
}
.cifra-inline strong {
  font-size: 2.9rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--verde-oscuro);
}

.video-lite {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radio-medio);
  overflow: hidden;
  cursor: pointer;
  background: var(--grafito);
  box-shadow: var(--sombra);
  aspect-ratio: 16 / 9;
}
.video-lite img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .9;
  transition: opacity var(--transicion);
}
.video-lite:hover img { opacity: 1; }
.video-play {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: var(--verde-oscuro);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, .22);
  transition: background var(--transicion), box-shadow var(--transicion);
}
.video-lite:hover .video-play {
  background: var(--verde);
  box-shadow: 0 0 0 12px rgba(255, 255, 255, .28);
}
.video-play::after {
  content: "";
  position: absolute;
  left: 55%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #fff;
}
.video-lite iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ===== Servicios ===== */
/* Cuatro paneles a canto vivo con filete: ficha técnica, no tarjetas flotantes. */
.tarjetas {
  list-style: none;
  padding: 0;
  margin: 3rem 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--arena-borde);
  border: 1px solid var(--arena-borde);
}
.tarjetas li {
  background: var(--hueso);
  padding: 2rem 1.6rem 2.25rem;
  transition: background var(--transicion);
}
.tarjetas li:hover { background: var(--blanco); }
/* Sin «balance»: en tres líneas cortas deja renglones huérfanos raros. */
.tarjetas h3 { margin: 1.35rem 0 0; text-wrap: normal; }
/* El propio <svg> es la caja del ícono: sin envoltorio extra en el HTML. */
.icono {
  width: 54px;
  height: 54px;
  padding: 13px;
  background: var(--verde-suave);
  border-radius: var(--radio-control);
  fill: none;
  stroke: var(--marron);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: background var(--transicion), stroke var(--transicion);
}
.tarjetas li:hover .icono { background: var(--verde-oscuro); stroke: var(--blanco); }

/* ===== Impacto ===== */
.cifras {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: 2.75rem;
}
.cifra { padding-top: 1.5rem; border-top: 2px solid var(--verde-claro); }
.cifra strong {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: clamp(3.2rem, 8vw, 6.25rem);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.045em;
  color: var(--verde-claro);
  font-variant-numeric: tabular-nums;
}
.cifra strong span {
  font-size: .32em;
  letter-spacing: -.01em;
  color: var(--texto-claro);
  font-weight: 600;
}
.cifra p {
  margin: 1rem 0 0;
  max-width: 26ch;
  color: var(--texto-claro-suave);
  font-size: 1.1rem;
}

.h2-segundo { margin-top: clamp(3.5rem, 7vw, 5.5rem); }

.lista-marcas {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 clamp(2rem, 5vw, 4rem);
}
.lista-marcas li {
  position: relative;
  padding: 1.4rem 0 1.4rem 2.6rem;
  border-top: 1px solid var(--grafito-filete);
  font-size: 1.05rem;
  color: var(--texto-claro-suave);
}
.lista-marcas li::before {
  content: "";
  position: absolute;
  left: .35rem;
  top: 1.85rem;
  width: 10px;
  height: 17px;
  border: solid var(--verde-claro);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* ===== Impacto · carrusel de acciones con la comunidad =====
   Tira horizontal con scroll-snap: sin JS se arrastra con el dedo o la barra;
   con JS aparecen las flechas y los puntos. Las tarjetas repiten el lenguaje
   del filete claro sobre grafito de .lista-marcas, sin sombra (la única
   elevación de la página está reservada al video). */
.h3-carrusel {
  margin: 3.5rem 0 .35rem;
  color: var(--blanco);
}
.carrusel-intro {
  margin: 0 0 1.75rem;
  color: var(--texto-claro-suave);
  font-size: 1.05rem;
}

.carrusel-pista {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  list-style: none;
  padding: 0 0 .5rem;
  margin: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .3) transparent;
}
.carrusel-tarjeta {
  flex: 0 0 min(100%, 22rem);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radio-medio);
  transition: background var(--transicion), border-color var(--transicion);
}
.carrusel-tarjeta:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .24); }
.carrusel-tarjeta time {
  font-family: var(--fuente-titulo);
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--verde-claro);
}
.carrusel-tarjeta h4 {
  font-family: var(--fuente-titulo);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--blanco);
  margin: 0;
}
.carrusel-tarjeta p {
  margin: 0;
  flex: 1;
  max-width: none;
  font-size: 1rem;
  color: rgba(243, 237, 230, .85);
}
.carrusel-fuente {
  align-self: start;
  font-weight: 600;
  font-size: .95rem;
  color: var(--verde-claro);
}
.carrusel-fuente:hover { color: var(--verde-claro); }
.carrusel-fuente::after { content: "\2197"; margin-left: .3em; }

/* ===== Preguntas frecuentes (sección oscura) ===== */
.faq-lead { margin: 0 0 1.75rem; max-width: 62ch; font-size: 1.15rem; line-height: 1.6; color: rgba(243,237,230,.9); }
.faq-lead strong { display: block; margin-bottom: .35rem; font-family: var(--fuente-titulo); font-weight: 600; color: var(--verde-claro); }
.faq { display: grid; gap: .75rem; max-width: 52rem; }
.faq-item {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radio);
}
.faq-item summary {
  cursor: pointer; list-style: none; position: relative; padding: 1.1rem 3.2rem 1.1rem 1.4rem;
  font-family: var(--fuente-titulo); font-weight: 600; font-size: 1.05rem; color: var(--blanco); border-radius: var(--radio);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; position: absolute; right: 1.4rem; top: 50%; width: 10px; height: 10px;
  border: solid var(--verde-claro); border-width: 0 2px 2px 0; transform: translateY(-70%) rotate(45deg);
  transition: transform var(--transicion);
}
.faq-item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-item summary:hover, .faq-item[open] summary { background: rgba(255,255,255,.04); }
.faq-item summary:focus-visible { outline: 3px solid var(--verde-claro); outline-offset: -3px; }
.faq-item p { margin: 0; padding: 0 1.4rem 1.25rem; color: rgba(243,237,230,.85); max-width: 65ch; }
.faq-item a { color: var(--verde-claro); }
.faq-cierre {
  margin: 2.25rem 0 0; max-width: 60ch; padding-left: 1.25rem; border-left: 3px solid var(--verde-claro);
  font-family: var(--fuente-titulo); font-weight: 600; font-size: 1.15rem; line-height: 1.5; color: var(--blanco);
}

/* Sin JS no hay controles: la tira se desplaza sola. */
.carrusel-controles { display: none; }
[data-carrusel][data-listo] .carrusel-controles {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
  margin-top: 1rem;
}
.carrusel-boton {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  background: transparent;
  color: var(--blanco);
  font-family: var(--fuente-titulo);
  font-size: 1.5rem;
  line-height: 1;
  padding: 0 0 .15em;
  cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion);
}
.carrusel-boton:hover,
.carrusel-boton:focus-visible { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .6); }
.carrusel-boton[disabled] { opacity: .35; cursor: default; }
.carrusel-boton[disabled]:hover { background: transparent; border-color: rgba(255, 255, 255, .35); }

.carrusel-puntos {
  display: flex;
  align-items: center;
  gap: .4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.carrusel-puntos li {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
  transition: background var(--transicion);
}
.carrusel-puntos li[aria-current] { background: var(--verde-claro); }

/* ===== Clientes ===== */
.chips {
  list-style: none;
  padding: 0;
  margin: 1.75rem 0 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.chips li {
  background: var(--verde-suave);
  color: var(--verde-oscuro);
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-size: .9rem;
  padding: .5rem .9rem;
  border-radius: 4px;
}

/* ===== Contacto ===== */
.contacto { align-items: start; }
.contacto form { max-width: 32rem; }
.campo { margin-bottom: 1.15rem; }
.campo label {
  display: block;
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-size: .92rem;
  margin-bottom: .4rem;
}
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--texto);
  background: var(--blanco);
  border: 1px solid var(--arena-borde);
  border-radius: var(--radio-control);
  padding: .75rem .95rem;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: 2px solid var(--verde-oscuro);
  outline-offset: 2px;
  border-color: var(--verde-oscuro);
  box-shadow: 0 0 0 3px rgba(93, 138, 27, .25);
}
.campo textarea { resize: vertical; min-height: 8.5rem; }
.campo-oculto { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.form-msg { min-height: 1.5em; margin: 1rem 0 0; font-weight: 600; }
.form-msg.ok { color: var(--verde-mas-oscuro); }
.form-msg.err { color: var(--rojo); }

/* ===== Página interior (retiro) ===== */
/* La cabecera es fija: sin este colchón taparía el h1 de una página sin hero. */
.pagina-interior { padding-top: var(--alto-cabecera); }
.campos-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.nota-final {
  margin-top: 2.25rem;
  font-size: 1rem;
  color: var(--texto-suave);
}

.contacto-datos {
  background: var(--blanco);
  border: 1px solid var(--arena-borde);
  border-radius: var(--radio-medio);
  padding: clamp(1.75rem, 3vw, 2.25rem);
}
.contacto-datos h3 { margin-bottom: 1.5rem; font-size: 1.3rem; }
.contacto-datos p { max-width: 34ch; }
.contacto-datos p:last-child { margin-bottom: 0; }
.contacto-datos strong {
  display: block;
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-size: .92rem;
  color: var(--texto-suave);
  margin-bottom: .15rem;
}
/* El <br> que sigue a la etiqueta sobra cuando la etiqueta ya es un bloque. */
.contacto-datos strong + br { display: none; }

/* ===== Pie ===== */
.pie {
  background: var(--grafito);
  color: var(--texto-claro-suave);
  padding-top: clamp(3rem, 6vw, 4.5rem);
}
.pie a { color: var(--texto-claro); }
.pie a:hover { color: var(--verde-claro); }
.pie-fila {
  display: grid;
  grid-template-columns: 1.4fr .8fr 1.2fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: 3rem;
}
.pie-marca img {
  height: 56px;
  width: auto;
  background: var(--hueso);
  padding: .5rem .8rem;
  border-radius: var(--radio-control);
  margin-bottom: 1.25rem;
}
.pie-marca p { max-width: 32ch; font-size: 1rem; }
.pie-redes {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pie-redes a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  text-decoration: none;
  font-family: var(--fuente-titulo);
  font-weight: 500;
  font-size: .95rem;
}
.pie-redes svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pie-redes a:hover span { text-decoration: underline; }
.pie-nav { display: flex; flex-direction: column; gap: .6rem; }
.pie-nav a {
  text-decoration: none;
  font-family: var(--fuente-titulo);
  font-weight: 500;
  font-size: .95rem;
}
.pie-nav a:hover { text-decoration: underline; }
.pie-contacto p { margin-bottom: .6rem; font-size: 1rem; max-width: 32ch; }
.pie-legal {
  border-top: 1px solid var(--grafito-filete);
  padding-block: 1.35rem;
  font-size: .9rem;
}
.pie-legal p { margin: 0; max-width: none; }

/* ===== Aparición al hacer scroll (las clases las pone js/main.js) ===== */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.in { opacity: 1; transform: none; }
.hero .reveal { opacity: 1; transform: none; }

/* ===== Responsive ===== */
@media (max-width: 1080px) {
  .tarjetas { grid-template-columns: repeat(2, 1fr); }
  .lista-marcas { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .dos-columnas { grid-template-columns: 1fr; }
  .pie-fila { grid-template-columns: 1fr 1fr; }
  .pie-marca { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  body { font-size: 1.0625rem; }

  .menu-boton { display: flex; }
  .logo img { height: 44px; }
  :root[data-fiesta] { --alto-cabecera: 90px; }
  [data-fiesta] .cabecera-fila { padding-top: 20px; }
  .cabecera::before { height: 24px; background-size: 206px 24px; }
    .menu {
    position: fixed;
    inset: var(--alto-cabecera) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--hueso);
    border-bottom: 1px solid var(--arena-borde);
    padding: .25rem 1.25rem 1.5rem;
    transform: translateY(-110%);
    opacity: 0;
    /* Cerrado: fuera del foco y del clic. visibility se retrasa hasta terminar la animación. */
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--transicion), opacity var(--transicion), visibility 0s var(--transicion);
    box-shadow: var(--sombra);
  }
  .menu[data-abierto] {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
  .menu a:not(.boton) {
    padding: .95rem 0;
    border-bottom: 1px solid var(--arena-borde);
    border-top: 0;
  }
  .menu a:not(.boton):hover { border-bottom-color: var(--arena-borde); }
  .menu .boton { margin-top: 1.25rem; text-align: center; padding: .85rem 1.1rem; }

  .tarjetas, .cifras, .campos-2 { grid-template-columns: 1fr; }
  .pie-fila { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(2rem, 8.6vw, 3.2rem); }
  .hero-acciones .boton { width: 100%; text-align: center; }
  .cifra strong { font-size: clamp(3.4rem, 17vw, 4.6rem); }
  .video-lite { margin-top: .5rem; }
  /* Menos del ancho completo: así se ve que hay más tarjetas a la derecha. */
  .carrusel-tarjeta { flex-basis: 85%; }
}

/* Impresión: el contenido revelado por JS debe verse aunque no haya scroll. */
@media print {
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero-video { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* El desplazamiento por botón ya pide behavior:auto; esto cubre el resto. */
  .carrusel-pista { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}