/* ==========================================================================
   EL REGIO PARTY RENTALS — Hoja de estilos principal
   Paleta según Guía de Desarrollo (Soy Karen Design)
   ========================================================================== */

/* ---------- Fuentes ---------- */
@font-face {
  font-family: 'Albert Sans';
  src: url('../fonts/AlbertSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Albert Sans';
  src: url('../fonts/AlbertSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Albert Sans';
  src: url('../fonts/AlbertSans-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: 'Albert Sans';
  src: url('../fonts/AlbertSans-Black.ttf') format('truetype');
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: 'Cooper Black';
  src: url('../fonts/Cooper Black.TTF') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Hecho A Mano';
  src: url('../fonts/HechoAMano-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --verde: #7FB120;
  --verde-claro: #8FC42C;
  --verde-oscuro: #085E55;
  --teal-profundo: #0A4A42;
  --teal-card: #073B34;
  --cian: #00DEF0;
  --amarillo: #F2CF00;
  --gris: #EDEDED;
  --gris-texto: #8A8A8A;
  --texto: #3C3C3B;
  --blanco: #FFFFFF;

  --f-sans: 'Albert Sans', -apple-system, system-ui, sans-serif;
  --f-display: 'Cooper Black', 'Albert Sans', serif;
  --f-mano: 'Hecho A Mano', cursive;

  --radio-pildora: 999px;
  --radio-card: 28px;
  --sombra-suave: 0 8px 30px rgba(0, 0, 0, .12);
  --transicion: .3s ease;

  --ancho-max: 1200px;
}

/* ---------- Reset básico ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  font-family: var(--f-sans);
  color: var(--texto);
  background: var(--blanco);
  line-height: 1.5;
  overflow-x: clip;
}
/* height:auto es obligatorio ahora que los <img> traen width/height:
   sin él, al encoger por max-width la altura se quedaría fija y deformaría la imagen. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; border: 0; background: none; cursor: pointer; }
section { scroll-margin-top: 90px; }

.contenedor {
  width: min(100% - 40px, var(--ancho-max));
  margin-inline: auto;
}

/* ---------- Componentes compartidos ---------- */

/* Píldora de título de sección */
.pildora {
  display: inline-block;
  padding: 14px 52px;
  border-radius: var(--radio-pildora);
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: .04em;
  color: var(--blanco);
  text-transform: uppercase;
}
.pildora--verde { background: var(--verde); }
.pildora--teal { background: var(--verde-oscuro); }

.titulo-seccion {
  text-align: center;
  margin-bottom: 40px;
  position: relative;
}

/* Destellos decorativos */
.destellos {
  position: relative;
  display: inline-block;
}
.destellos::before,
.destellos::after {
  content: '✦';
  position: absolute;
  color: var(--amarillo);
  font-size: 22px;
}
.destellos::before { top: -16px; left: -34px; }
.destellos::after { bottom: -14px; right: -34px; }

/* Botón display (Cooper) */
.btn-display {
  display: inline-block;
  font-family: var(--f-display);
  color: var(--blanco);
  background: var(--verde);
  border-radius: var(--radio-pildora);
  padding: 16px 46px;
  font-size: clamp(20px, 2.6vw, 30px);
  box-shadow: 0 0 34px rgba(143, 196, 44, .75);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.btn-display:hover {
  transform: scale(1.04);
  box-shadow: 0 0 48px rgba(143, 196, 44, .95);
}

/* Botón píldora simple */
.btn-pildora {
  display: inline-block;
  background: var(--verde);
  color: var(--blanco);
  font-weight: 700;
  font-size: 20px;
  padding: 12px 38px;
  border-radius: var(--radio-pildora);
  transition: background var(--transicion), transform var(--transicion);
}
.btn-pildora:hover { background: var(--verde-claro); transform: translateY(-2px); }

/* Flechas de carrusel */
.flecha {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  transition: transform var(--transicion), opacity var(--transicion);
}
.flecha:hover { transform: scale(1.1); }
.flecha svg { width: 22px; height: 22px; }
.flecha--verde { background: var(--verde); }
.flecha--teal { background: var(--verde-oscuro); }

/* Dots indicadores */
.dots { display: flex; gap: 10px; justify-content: center; margin-top: 22px; }
.dots button {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #C7C7C7;
  transition: background var(--transicion);
}
.dots button[aria-current="true"] { background: #8A8A8A; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 50;
  padding: 22px 0;
}
.header--solido {
  position: sticky;
  top: 0;
  background: var(--blanco);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .08);
}
.header__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.header__logo img { width: clamp(120px, 12vw, 170px); height: auto; }

.nav { display: flex; align-items: center; gap: clamp(8px, 2vw, 30px); }
.nav__enlace {
  position: relative;
  font-weight: 700;
  font-size: 17px;
  color: var(--blanco);
  padding: 10px 14px;
  border-radius: var(--radio-pildora);
  transition: background var(--transicion), color var(--transicion);
}
.header--solido .nav__enlace { color: var(--texto); }
.nav__enlace:hover { background: var(--verde); color: var(--blanco); }
.nav__enlace--cta {
  background: var(--verde);
  color: var(--blanco) !important;
  padding: 12px 28px;
}
.nav__enlace--cta:hover { background: var(--verde-claro); }

.lang {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 800;
  font-size: 14px;
  color: var(--blanco);
  background: rgba(255, 255, 255, .18);
  border-radius: var(--radio-pildora);
  padding: 6px 12px;
}
.header--solido .lang { color: var(--texto); background: var(--gris); }
.lang a { opacity: .55; transition: opacity var(--transicion); }
.lang a:hover { opacity: 1; }
.lang [aria-current="true"] { opacity: 1; }

/* Hamburguesa */
.hamburguesa {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.hamburguesa span {
  width: 26px; height: 3px;
  border-radius: 2px;
  background: var(--blanco);
  transition: transform var(--transicion), opacity var(--transicion);
}
.header--solido .hamburguesa span { background: var(--verde-oscuro); }

@media (max-width: 900px) {
  .hamburguesa { display: flex; }
  .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 26px;
    background: var(--verde-oscuro);
    transform: translateX(100%);
    transition: transform .35s ease;
    z-index: 60;
  }
  .nav.abierto { transform: translateX(0); }
  .nav__enlace { color: var(--blanco) !important; font-size: 24px; }
  .nav__cerrar {
    position: absolute;
    top: 26px; right: 26px;
    color: var(--blanco);
    font-size: 38px;
    line-height: 1;
  }
  body.nav-abierto { overflow: hidden; }
}
.nav__cerrar { display: none; }
@media (max-width: 900px) { .nav__cerrar { display: block; } }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: min(100vh, 980px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  padding: 160px 20px 90px;
  background: url('../img/hero-bg.webp') center / cover no-repeat, var(--verde-oscuro);
}
.hero__contenido { max-width: 860px; position: relative; }
.hero__destello {
  position: absolute;
  color: var(--amarillo);
  text-shadow: 0 0 12px rgba(242, 207, 0, .6);
  pointer-events: none;
  animation: destello 2.6s ease-in-out infinite;
}
.hero__destello:nth-child(odd) { animation-delay: 1.2s; }
@keyframes destello {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.82); }
}
.hero__titulo {
  color: var(--blanco);
  text-shadow: 0 4px 24px rgba(0, 0, 0, .35);
}
.hero__titulo .l1 {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(30px, 4.5vw, 54px);
  line-height: 1.05;
}
.hero__titulo .l2 {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(56px, 9vw, 110px);
  line-height: 1;
}
.hero__titulo .l3 {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(26px, 3.8vw, 46px);
  line-height: 1.2;
}
.hero__sub {
  color: var(--blanco);
  font-size: clamp(17px, 2vw, 23px);
  margin-top: 22px;
}
.hero__sub strong { font-weight: 800; }
.hero__region {
  color: var(--blanco);
  font-size: clamp(14px, 1.6vw, 18px);
  margin-top: 14px;
}
.hero .btn-display { margin-top: 30px; }

/* ==========================================================================
   PROMOCIONES
   ========================================================================== */
.promos { padding: 70px 0 30px; }
.promos__viewport { overflow: hidden; border-radius: var(--radio-card); }
.promos__pista {
  display: flex;
  transition: transform .45s ease;
}
.promos__slide { flex: 0 0 100%; }
.promos__slide img {
  width: 100%;
  border-radius: var(--radio-card);
}

/* ==========================================================================
   SERVICIOS
   ========================================================================== */
.servicios { padding: 60px 0; }
.servicios__marco {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
.servicios__caja {
  flex: 1;
  min-width: 0;
  background: var(--verde-oscuro) url('../img/footer-bg.webp') center / cover;
  border-radius: 40px;
  padding: 46px 36px 40px;
}
.servicios__pista {
  display: flex;
  gap: 26px;
  overflow-x: auto;
  /* `proximity` y no `mandatory`: con snap obligatorio el navegador cancela el
     scroll animado que disparan las flechas y devuelve la pista a su sitio.
     Se notaba sobre todo en celular, donde la tarjeta mide lo mismo que la
     ventana y el destino cae justo en un borde de snap. Con `proximity` el
     deslizado con el dedo sigue acomodando las tarjetas igual. */
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.servicios__pista::-webkit-scrollbar { display: none; }
.tarjeta-servicio {
  flex: 0 0 min(240px, 68vw);
  scroll-snap-align: center;
  text-align: center;
}
.tarjeta-servicio img {
  width: 100%;
  border-radius: 24px;
}
.tarjeta-servicio figcaption {
  color: var(--blanco);
  font-weight: 700;
  font-size: 18px;
  margin-top: 4px;
  line-height: 1.25;
}

/* ==========================================================================
   ¿POR QUÉ ELEGIR EL REGIO?
   ========================================================================== */
.porque { padding: 80px 0; }
/* El `width: 100%` es indispensable: sin él, este `max-width: 980px` le gana por
   especificidad al `max-width: 100%` global y en celular el arte se salía a 980px
   dentro de una pantalla de 375, quedando recortado. */
.porque__arte { width: 100%; max-width: 980px; margin-inline: auto; }
.porque__deco {
  position: absolute;
  width: clamp(60px, 8vw, 120px);
  pointer-events: none;
  z-index: 1;
}
.porque__deco--confeti { left: 2%; top: -30px; }
.porque__deco--disco { left: 50%; top: -70px; transform: translateX(-140%); }
.porque__lista {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 980px;
  margin-inline: auto;
}
.porque__pildora {
  align-self: flex-start;
  color: var(--blanco);
  font-weight: 700;
  font-size: clamp(18px, 2.6vw, 30px);
  padding: 16px 44px;
  border-radius: var(--radio-pildora);
  box-shadow: var(--sombra-suave);
}
.porque__pildora:nth-child(even) { align-self: flex-end; }
.porque__pildora--cian { background: var(--cian); }
.porque__pildora--teal { background: var(--verde-oscuro); }
.porque__pildora--verde { background: var(--verde); }
.porque__pildora[data-rot="1"] { transform: rotate(-3deg); }
.porque__pildora[data-rot="2"] { transform: rotate(2.4deg); }
.porque__pildora[data-rot="3"] { transform: rotate(-2deg); }
.porque__pildora[data-rot="4"] { transform: rotate(1.6deg); }
.porque__pildora[data-rot="5"] { transform: rotate(-2.6deg); }

/* ==========================================================================
   GALERÍA (preview en home)
   ========================================================================== */
.galeria-prev { padding: 60px 0 80px; text-align: center; }
.galeria-prev__strip {
  display: flex;
  gap: 18px;
  justify-content: center;
  align-items: center;
  perspective: 1200px;
  overflow: hidden;
  padding: 30px 0;
  position: relative;
}
.galeria-prev__strip::before,
.galeria-prev__strip::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 140px;
  z-index: 2;
  pointer-events: none;
}
.galeria-prev__strip::before { left: 0; background: linear-gradient(90deg, #fff, transparent); }
.galeria-prev__strip::after { right: 0; background: linear-gradient(-90deg, #fff, transparent); }
.galeria-prev__foto {
  flex: none;
  width: clamp(130px, 16vw, 230px);
  height: calc(clamp(130px, 16vw, 230px) * 4 / 3);
  object-fit: cover;
  border-radius: 6px;
  box-shadow: var(--sombra-suave);
}
.galeria-prev__foto:nth-child(1) { transform: rotateY(45deg) scale(.94); }
.galeria-prev__foto:nth-child(2) { transform: rotateY(35deg) scale(.97); }
.galeria-prev__foto:nth-child(3) { transform: rotateY(18deg); }
.galeria-prev__foto:nth-child(5) { transform: rotateY(-18deg); }
.galeria-prev__foto:nth-child(6) { transform: rotateY(-35deg) scale(.97); }
.galeria-prev__foto:nth-child(7) { transform: rotateY(-45deg) scale(.94); }
.galeria-prev .btn-pildora { margin-top: 26px; }

/* ==========================================================================
   PAQUETES
   ========================================================================== */
.paquetes {
  background: var(--teal-profundo) url('../img/footer-bg.webp') center / cover;
  padding: 0 0 80px;
  margin-top: 60px;
}
.paquetes .titulo-seccion { transform: translateY(-32px); margin-bottom: 20px; }
.paquetes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 70px);
  max-width: 1060px;
  margin-inline: auto;
}
.paquete {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.paquete__medalla {
  width: clamp(120px, 12vw, 160px);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  z-index: 1;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .35));
}
.paquete__card {
  background: var(--teal-card);
  border-radius: var(--radio-card);
  padding: 90px 26px 34px;
  margin-top: -70px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.paquete__item {
  color: var(--blanco);
  font-weight: 800;
  font-size: clamp(17px, 1.8vw, 21px);
}
.paquete__btn {
  margin-top: 12px;
  font-family: var(--f-display);
  color: var(--blanco);
  font-size: clamp(18px, 1.9vw, 23px);
  border: 3px solid var(--blanco);
  border-radius: var(--radio-pildora);
  padding: 10px 30px;
  transition: background var(--transicion), color var(--transicion);
}
.paquete__btn:hover { background: var(--blanco); color: var(--verde-oscuro); }
@media (max-width: 760px) {
  .paquetes__grid { grid-template-columns: 1fr; max-width: 380px; }
}

/* ==========================================================================
   NUESTROS CLIENTES (reseñas)
   ========================================================================== */
.clientes { padding: 90px 0 70px; }
.clientes__marco {
  display: flex;
  align-items: center;
  gap: 14px;
}
.clientes__pista {
  display: flex;
  gap: 26px;
  overflow-x: auto;
  /* `proximity` y no `mandatory`: con snap obligatorio el navegador cancela el
     scroll animado que disparan las flechas y devuelve la pista a su sitio.
     Se notaba sobre todo en celular, donde la tarjeta mide lo mismo que la
     ventana y el destino cae justo en un borde de snap. Con `proximity` el
     deslizado con el dedo sigue acomodando las tarjetas igual. */
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: 20px 4px;
  flex: 1;
  min-width: 0;
}
.clientes__pista::-webkit-scrollbar { display: none; }
.resena {
  position: relative;
  flex: 0 0 min(330px, 82vw);
  scroll-snap-align: center;
  background: var(--gris);
  border-radius: 22px;
  padding: 40px 26px 34px;
  text-align: center;
}
.resena__avatar {
  position: absolute;
  top: -24px;
  left: 26px;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--verde-oscuro);
  color: var(--blanco);
  font-weight: 800;
  font-size: 22px;
  display: grid;
  place-items: center;
  border: 3px solid var(--blanco);
  box-shadow: var(--sombra-suave);
}
.resena__nombre {
  position: absolute;
  top: -6px;
  left: 100px;
  font-weight: 800;
  color: var(--verde-oscuro);
  font-size: 18px;
}
.resena__texto { font-size: 15px; color: var(--texto); margin-top: 8px; }
.resena__estrellas { color: var(--amarillo); font-size: 22px; letter-spacing: 3px; margin-top: 14px; }
.resena__comilla {
  position: absolute;
  right: 20px; bottom: -18px;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--verde-oscuro);
  color: var(--blanco);
  font-family: var(--f-display);
  font-size: 24px;
  display: grid;
  place-items: center;
}

.compartir { text-align: center; margin-top: 70px; }
.compartir__titulo {
  color: var(--verde-oscuro);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 34px);
  letter-spacing: .02em;
}
.compartir__barra {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--gris);
  border-radius: var(--radio-pildora);
  padding: 10px 12px 10px 30px;
  max-width: 760px;
  margin: 28px auto 0;
}
.compartir__barra input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--f-sans);
  font-size: 18px;
  color: var(--texto);
  outline: none;
}
.compartir__barra input::placeholder { color: #A5A5A5; font-weight: 700; }

/* ==========================================================================
   NOSOTROS
   ========================================================================== */
.nosotros { padding: 90px 0 40px; }
/* El PNG de fondo ya trae la composición completa de la diseñadora:
   foto + degradado teal + patrón + sombrero sobresaliendo del borde. */
.nosotros__lienzo {
  position: relative;
  background: url('../img/nosotros-bg.webp') center / 100% 100% no-repeat;
  padding: clamp(40px, 6vw, 80px) clamp(40px, 6.5vw, 95px);
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(24px, 4vw, 60px);
  color: var(--blanco);
}
.nosotros__col-izq { display: flex; flex-direction: column; justify-content: flex-end; }
.nosotros__titulo {
  font-weight: 900;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.05;
  text-transform: uppercase;
}
.nosotros__texto { margin-top: 18px; font-size: 16px; }
.nosotros__texto strong { font-weight: 800; }
.nosotros__col-der { display: flex; flex-direction: column; gap: 20px; justify-content: center; }
.valor {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--blanco);
  border-radius: var(--radio-pildora);
  padding: 14px 26px 14px 14px;
  color: var(--texto);
  box-shadow: var(--sombra-suave);
}
.valor__icono {
  width: 72px;
  height: 72px;
  flex: none;
  border-radius: 50%;
  background: var(--verde);
  display: grid;
  place-items: center;
}
.valor__icono svg { width: 42px; height: 42px; }
.valor h3 {
  color: var(--gris-texto);
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.valor p { font-size: 14.5px; color: var(--gris-texto); }
@media (max-width: 860px) {
  .nosotros__lienzo {
    grid-template-columns: 1fr;
    background: linear-gradient(160deg, var(--verde-oscuro), var(--teal-profundo));
    border-radius: 40px;
  }
}

/* ==========================================================================
   FORMULARIO DE COTIZACIÓN
   ========================================================================== */
.cotizacion { padding: 50px 0 100px; }
.cotizacion__card {
  background: #F4F4F4;
  border-radius: var(--radio-card);
  padding: clamp(28px, 5vw, 56px);
}
.cotizacion__titulo {
  color: var(--verde);
  font-weight: 900;
  font-size: clamp(26px, 3.4vw, 40px);
  letter-spacing: .02em;
}
.cotizacion__sub { color: var(--gris-texto); font-weight: 700; font-size: 14px; margin-top: 8px; }
.formulario { margin-top: 30px; display: grid; gap: 22px; }
.formulario__fila { display: grid; gap: 22px; grid-template-columns: 1fr 1fr; }
.formulario__fila--una { grid-template-columns: 1fr; }
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo label { color: var(--gris-texto); font-weight: 700; font-size: 15px; }
.campo input,
.campo select,
.campo textarea {
  font-family: var(--f-sans);
  font-size: 16px;
  color: var(--texto);
  background: transparent;
  border: 2px solid #B9B9B9;
  border-radius: 24px;
  padding: 13px 20px;
  outline: none;
  transition: border-color var(--transicion);
  width: 100%;
}
.campo textarea { min-height: 130px; resize: vertical; border-radius: 24px; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus { border-color: var(--verde); }
.formulario__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  justify-content: space-between;
}
.formulario__legal {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--gris-texto);
  font-weight: 700;
}
.formulario__legal input { width: 18px; height: 18px; accent-color: var(--verde); }
.btn-enviar {
  background: var(--verde);
  color: var(--blanco);
  font-weight: 900;
  font-size: 19px;
  letter-spacing: .04em;
  border-radius: var(--radio-pildora);
  padding: 16px 40px;
  text-transform: uppercase;
  transition: background var(--transicion), transform var(--transicion);
}
.btn-enviar:hover { background: var(--verde-claro); transform: translateY(-2px); }
@media (max-width: 700px) {
  .formulario__fila { grid-template-columns: 1fr; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  background: var(--verde-oscuro) url('../img/footer-bg.webp') center / cover;
  color: var(--blanco);
  padding: 70px 0 0;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: start;
}
.footer__titulo {
  font-weight: 900;
  font-size: clamp(24px, 2.8vw, 34px);
  text-transform: uppercase;
  margin-bottom: 24px;
}
.footer__mapa {
  position: relative;
  display: block;
  max-width: 560px;
}
.footer__mapa > img:first-child {
  width: 100%;
  border-radius: 18px;
  border: 3px solid rgba(255, 255, 255, .25);
  transition: transform var(--transicion);
}
.footer__mapa:hover > img:first-child { transform: scale(1.02); }
.footer__circulo {
  position: absolute;
  right: -12%;
  bottom: -8%;
  width: 58%;
  pointer-events: none;
}
.footer__circulo img { width: 100%; }
.footer__circulo span {
  position: absolute;
  inset: 22% 6% auto 22%;
  font-family: var(--f-mano);
  color: var(--cian);
  font-size: clamp(14px, 1.6vw, 21px);
  line-height: 1.15;
  transform: rotate(-4deg);
}
.footer__col-der { text-align: center; }
.footer__col-der .logo { width: 190px; margin-inline: auto; }
.footer__contacto {
  font-family: var(--f-display);
  color: var(--verde-claro);
  font-size: clamp(20px, 2.4vw, 28px);
  margin-top: 26px;
}
.footer__tel {
  display: inline-block;
  font-family: var(--f-display);
  color: var(--blanco);
  font-size: clamp(30px, 3.6vw, 44px);
  margin-top: 6px;
  transition: transform var(--transicion);
}
.footer__tel:hover { transform: scale(1.05); }
.footer__redes-titulo { font-weight: 700; margin-top: 26px; }
.footer__redes {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 14px;
}
.footer__redes img {
  width: 44px;
  transition: transform var(--transicion);
}
.footer__redes a:hover img { transform: scale(1.12); }
.footer__legal {
  margin-top: 60px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  padding: 22px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(255, 255, 255, .8);
}
.footer__legal nav { display: flex; flex-wrap: wrap; gap: 24px; }
.footer__legal a:hover { color: var(--blanco); }
@media (max-width: 820px) {
  .footer__grid { grid-template-columns: 1fr; }
  .footer__mapa { margin-inline: auto; }
  .footer__circulo { right: 0; }
}

/* ==========================================================================
   PÁGINA GALERÍA
   ========================================================================== */
.pagina-galeria .header--solido { position: sticky; }
.galeria-hero { padding: 60px 0 20px; text-align: center; }
.galeria-hero h1 {
  color: var(--verde-oscuro);
  font-weight: 900;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.galeria-hero p {
  color: var(--gris-texto);
  max-width: 640px;
  margin: 16px auto 0;
  font-size: 15.5px;
}
.galeria-grid {
  columns: 3 300px;
  column-gap: 24px;
  padding: 40px 0 30px;
}
.galeria-grid__item {
  position: relative;
  display: block;
  width: 100%;
  margin-bottom: 24px;
  border-radius: 22px;
  overflow: hidden;
  break-inside: avoid;
  cursor: zoom-in;
}
.galeria-grid__item img {
  width: 100%;
  transition: transform .4s ease;
}
.galeria-grid__item:hover img { transform: scale(1.04); }
.galeria-grid__item::after {
  content: '';
  position: absolute;
  top: 14px; right: 14px;
  width: 34px; height: 34px;
  background: url('../img/icon-expandir.webp') center / contain no-repeat;
  opacity: 0;
  transition: opacity var(--transicion);
}
.galeria-grid__item:hover::after { opacity: 1; }
.galeria-grid__item[hidden] { display: none; }

.galeria-mas { text-align: center; padding: 10px 0 80px; }
.galeria-mas button {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--verde);
  display: inline-grid;
  place-items: center;
  transition: transform var(--transicion);
}
.galeria-mas button:hover { transform: translateY(4px); }
.galeria-mas svg { width: 26px; height: 26px; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(4, 40, 36, .92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 30px;
}
.lightbox.abierto { display: flex; }
.lightbox img {
  max-width: min(1100px, 92vw);
  max-height: 84vh;
  border-radius: 14px;
  box-shadow: 0 20px 80px rgba(0, 0, 0, .5);
}
.lightbox__cerrar,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  color: var(--blanco);
  display: grid;
  place-items: center;
}
.lightbox__cerrar {
  top: 24px; right: 28px;
  font-size: 40px;
  line-height: 1;
}
.lightbox__prev, .lightbox__next {
  top: 50%;
  transform: translateY(-50%);
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--verde);
}
.lightbox__prev { left: 22px; }
.lightbox__next { right: 22px; }
.lightbox__prev svg, .lightbox__next svg { width: 22px; height: 22px; }

/* ---------- Utilidades ---------- */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
}

/* ==========================================================================
   PÁGINAS DE TEXTO (legales y 404)
   Reusan el header sólido de la galería; solo necesitan tipografía de lectura.
   ========================================================================== */
/* El header es sticky, no fijo: ocupa su lugar en el flujo y no hay que
   compensarlo con padding. Ponerlo en el <body> empujaba también al header
   y dejaba una franja blanca arriba. */
.texto-legal {
  max-width: 780px;
  margin: 0 auto;
  padding: 46px 22px 90px;
}
.texto-legal h1 {
  font-family: var(--f-display);
  color: var(--verde-oscuro);
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.1;
  margin-bottom: 10px;
}
.texto-legal .fecha {
  color: var(--gris-texto);
  font-size: 14px;
  margin-bottom: 34px;
}
.texto-legal h2 {
  font-family: var(--f-display);
  color: var(--verde);
  font-size: clamp(20px, 3vw, 26px);
  margin: 34px 0 10px;
}
.texto-legal p,
.texto-legal li { color: var(--texto); margin-bottom: 12px; }
/* El reset global quita el padding de las listas: aquí sí queremos viñeta visible */
.texto-legal ul { padding-left: 22px; list-style: disc; }
.texto-legal li::marker { color: var(--verde); }
.texto-legal a { color: var(--verde-oscuro); font-weight: 700; }

/* Aviso de borrador legal: visible a propósito, para que no se publique sin revisar */
.texto-legal .borrador {
  background: #FFF7D6;
  border-left: 5px solid var(--amarillo);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 30px;
  font-size: 14.5px;
}

/* ---------- 404 ---------- */
.pagina-404 {
  min-height: 62vh;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 12px;
  padding: 60px 22px 90px;
}
.pagina-404 .codigo {
  font-family: var(--f-display);
  font-size: clamp(80px, 18vw, 150px);
  line-height: .9;
  color: var(--verde);
}
.pagina-404 h1 {
  font-family: var(--f-display);
  color: var(--verde-oscuro);
  font-size: clamp(24px, 4vw, 34px);
}
.pagina-404 p { color: var(--gris-texto); margin-bottom: 14px; }
.pagina-404 .acciones {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- Formulario: anti-spam y avisos ---------- */

/* Honeypot. Se saca de la vista con posición, no con display:none:
   muchos bots ignoran los campos ocultos con display:none y este debe
   parecerles un campo normal para que caigan en la trampa. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.formulario__aviso {
  grid-column: 1 / -1;
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: 14px;
  font-weight: 800;
  text-align: center;
  background: rgba(127, 177, 32, .12);
  color: var(--verde-oscuro);
  border-left: 5px solid var(--verde);
  display: none;
}
.formulario__aviso.visible { display: block; }
.formulario__aviso.es-error {
  background: rgba(212, 76, 60, .1);
  color: #A8331F;
  border-left-color: #D44C3C;
}

.btn-enviar[disabled] { opacity: .6; cursor: wait; }

/* ---------- Formulario: selector de servicios ---------- */
.servicios-check {
  grid-column: 1 / -1;
  border: 0;
  margin: 4px 0 18px;
}
.servicios-check legend {
  font-weight: 800;
  color: var(--verde-oscuro);
  margin-bottom: 12px;
}
.servicios-check legend span {
  font-weight: 400;
  color: var(--gris-texto);
  font-size: 14px;
}
.servicios-check__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 20px;
}
.servicios-check__grid label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 2px solid var(--gris);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion);
}
.servicios-check__grid label:hover { border-color: var(--verde); }
.servicios-check__grid input { accent-color: var(--verde); width: 18px; height: 18px; flex: none; }
/* :has permite resaltar la tarjeta completa, no solo la casilla */
.servicios-check__grid label:has(input:checked) {
  border-color: var(--verde);
  background: rgba(127, 177, 32, .1);
}
.servicios-check__grid label:focus-within { outline: 2px solid var(--verde-oscuro); outline-offset: 2px; }

/* ==========================================================================
   PREGUNTAS FRECUENTES
   <details> nativo: sin JS, accesible por teclado y el texto queda en el HTML
   para que Google lo indexe aunque esté colapsado.
   ========================================================================== */
.faq { padding: 70px 0 90px; }
.faq__lista {
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}
.faq__item {
  border: 2px solid var(--gris);
  border-radius: 18px;
  background: var(--blanco);
  overflow: hidden;
  transition: border-color var(--transicion);
}
.faq__item[open] { border-color: var(--verde); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  font-weight: 800;
  font-size: clamp(16px, 2vw, 18px);
  color: var(--verde-oscuro);
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '';
  flex: none;
  width: 12px; height: 12px;
  border-right: 3px solid var(--verde);
  border-bottom: 3px solid var(--verde);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--transicion);
}
.faq__item[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq__item summary:hover { background: rgba(127, 177, 32, .07); }
.faq__item summary:focus-visible { outline: 2px solid var(--verde-oscuro); outline-offset: -2px; }
.faq__item p {
  padding: 0 24px 20px;
  color: var(--texto);
}

/* ---------- Ajustes para reseñas reales ----------
   Las de muestra tenían ~130 caracteres; las reales pasan de 400. En una tarjeta
   de 330px centrada quedaban altísimas y pesadas de leer, así que se ensanchan y
   el cuerpo se alinea a la izquierda (el nombre y las estrellas siguen centrados). */
.resena { flex: 0 0 min(400px, 86vw); }
.resena__texto {
  text-align: left;
  font-size: 15.5px;
  line-height: 1.6;
}
.resena__fuente {
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gris-texto);
}

/* ==========================================================================
   CARRUSELES EN CELULAR
   Bug detectado en producción (5 ago 2026): en una pantalla de 375px las dos
   flechas (54px c/u + separaciones) y el padding del recuadro se comían el
   ancho, dejando una ventana de 135px para tarjetas de 240px. Nunca se veía
   una tarjeta completa y al deslizar quedabas entre dos, con la caja vacía.
   Lo mismo pasaba en reseñas: ventana de 199px para tarjetas de 323px.

   La corrección: flechas más chicas, menos padding y — lo importante — las
   tarjetas pasan a ocupar el 100% de la ventana, así siempre se ve una entera.
   ========================================================================== */
@media (max-width: 700px) {
  .servicios__marco,
  .clientes__marco { gap: 6px; }

  .servicios__marco .flecha,
  .clientes__marco .flecha { width: 40px; height: 40px; }
  .servicios__marco .flecha svg,
  .clientes__marco .flecha svg { width: 16px; height: 16px; }

  .servicios__caja { padding: 34px 14px 30px; border-radius: 28px; }

  /* Una tarjeta por pantalla: el ancho lo manda la ventana, no un valor fijo. */
  .tarjeta-servicio,
  .resena { flex: 0 0 100%; }

  .servicios__pista,
  .clientes__pista { gap: 14px; }

  .resena { padding: 40px 20px 30px; }
}

/* ---------- Reseñas: avatar y nombre centrados ----------
   El diseño original colgaba el avatar a la izquierda y ponía el nombre en
   posición absoluta a `left:100px; top:-6px`, o sea encima del borde superior.
   Se veía apretado contra el borde y, como cada nombre mide distinto, todos
   terminaban en un punto diferente. Ahora el avatar se centra colgando del
   borde y el nombre vuelve al flujo, centrado debajo. */
.resena__avatar {
  left: 50%;
  transform: translateX(-50%);
  top: -29px;
}
.resena__nombre {
  position: static;
  text-align: center;
  font-size: 18px;
  margin-bottom: 6px;
}
/* Espacio suficiente para que el nombre no quede debajo del avatar colgado */
.resena { padding-top: 46px; }
@media (max-width: 700px) {
  .resena { padding-top: 44px; }
}

/* ==========================================================================
   PÁGINAS POR SERVICIO
   Existen para SEO local: cada una apunta a una búsqueda concreta
   ("renta de brincolines Hemet") con texto propio, en vez de competir todas
   desde la home. Reusan el header sólido y el bloque .faq__item.
   ========================================================================== */
.servicio { padding: 46px 0 80px; }

.miga { font-size: 14px; color: var(--gris-texto); margin-bottom: 22px; }
.miga a { color: var(--verde-oscuro); font-weight: 700; }
.miga span[aria-hidden] { margin: 0 6px; }

.servicio__hero {
  display: grid;
  grid-template-columns: 1fr minmax(0, 340px);
  gap: 36px;
  align-items: center;
  margin-bottom: 46px;
}
.servicio__hero img { border-radius: 26px; width: 100%; }
.servicio h1 {
  font-family: var(--f-display);
  color: var(--verde-oscuro);
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.08;
  margin-bottom: 14px;
}
.servicio__intro { font-size: 18px; margin-bottom: 22px; max-width: 60ch; }

.servicio__bloque { margin-bottom: 40px; max-width: 860px; }
.servicio__bloque h2 {
  font-family: var(--f-display);
  color: var(--verde);
  font-size: clamp(21px, 3vw, 28px);
  margin-bottom: 12px;
}
.servicio__bloque p { margin-bottom: 12px; }
.servicio__bloque a { color: var(--verde-oscuro); font-weight: 700; text-decoration: underline; }

.servicio__lista { list-style: disc; padding-left: 22px; }
.servicio__lista li { margin-bottom: 9px; }
.servicio__lista li::marker { color: var(--verde); }

.servicio__otros { display: flex; flex-wrap: wrap; gap: 12px; }
.servicio__otros a {
  display: inline-block;
  padding: 10px 20px;
  border: 2px solid var(--gris);
  border-radius: var(--radio-pildora);
  font-weight: 700;
  color: var(--verde-oscuro);
  text-decoration: none;
  transition: border-color var(--transicion), background var(--transicion);
}
.servicio__otros a:hover { border-color: var(--verde); background: rgba(127, 177, 32, .1); }

.servicio__cta {
  background: var(--verde-oscuro) url('../img/footer-bg.webp') center / cover;
  border-radius: var(--radio-card);
  padding: 40px 32px;
  text-align: center;
  margin-bottom: 40px;
  color: var(--blanco);
}
.servicio__cta h2 {
  font-family: var(--f-display);
  color: var(--blanco);
  font-size: clamp(24px, 3.4vw, 32px);
  margin-bottom: 10px;
}
.servicio__cta p { margin-bottom: 20px; }
.servicio__botones { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 780px) {
  .servicio__hero { grid-template-columns: 1fr; gap: 24px; }
  .servicio__hero img { max-width: 300px; margin-inline: auto; }
}