/* ==========================================================================
   PAMM CLEAN · components.css
   Piezas reutilizables. Nomenclatura BEM: .bloque__elemento--modificador
   ========================================================================== */

/* --------------------------------------------------------------------------
   Marcador de imagen ausente
   Cuando un archivo todavía no existe, JS marca el contenedor con .is-missing
   y aquí dibujamos el relleno rayado. Al soltar la imagen real, desaparece.
   -------------------------------------------------------------------------- */
.is-missing {
  background: repeating-linear-gradient(135deg, #12314c 0 16px, #0f2a3e 16px 32px);
}

/* Descendiente, no hijo directo: el <img> puede ir dentro de un <picture>. */
.is-missing img { display: none; }

.is-missing::after {
  content: "foto real · reemplazable";
  position: absolute;
  left: var(--sp-5);
  top: var(--sp-5);
  z-index: 3;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: rgb(198 212 224 / 0.6);
}

/* --------------------------------------------------------------------------
   Preloader
   -------------------------------------------------------------------------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-preload);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  background: var(--c-bg);
  transition: opacity var(--t-slow) ease, visibility var(--t-slow) ease;
}

.preloader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader__mark {
  width: 46px;
  animation: soft-pulse 1.4s ease-in-out infinite;
}

.preloader__label {
  font-size: 0.8125rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.preloader__bar {
  width: min(15rem, 60vw);
  height: 2px;
  background: rgb(140 163 184 / 0.22);
  border-radius: 2px;
  overflow: hidden;
}

.preloader__fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--grad-brand);
  box-shadow: 0 0 10px rgb(110 183 65 / 0.4);
  animation: bar-grow 1s ease forwards;
}

/* --------------------------------------------------------------------------
   Banner promocional
   Visual a la izquierda, texto y CTA a la derecha. El texto es HTML real:
   nítido en pantallas retina, seleccionable, traducible e indexable.
   -------------------------------------------------------------------------- */
.promo {
  position: relative;
  z-index: calc(var(--z-nav) + 10);
  background: var(--promo-bg);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  isolation: isolate;
}

/* Capas del banner:  fondo de color → .promo__bg (imagen) → destello → contenido */
.promo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(100deg, transparent 20%, rgb(255 255 255 / 0.14) 50%, transparent 80%);
  animation: shimmer 6s ease-in-out 1.5s infinite;
  pointer-events: none;
}

.promo__inner {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--sp-3);
  row-gap: var(--sp-2);
  max-width: var(--w-content);
  margin-inline: auto;
  padding: 0.625rem var(--sp-gutter);
}

/* ---- Imagen del banner -------------------------------------------------
   La imagen es de ANCHO COMPLETO: cubre todo el banner, también la zona que
   queda detrás del texto. Va sobre el degradado de marca y bajo el contenido,
   de modo que las zonas transparentes del WebP dejan ver el color del fondo.

   Sin archivo configurado, `--promo-image` vale `none`: el navegador no pide
   nada y la consola queda limpia.

   Para activarla:
     1. Deja `promo-escritorio.webp` y `promo-movil.webp` en src/img/promo/
     2. `npm run images`
     3. Descomenta el bloque `--promo-image` de más abajo.
   ----------------------------------------------------------------------- */
.promo__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: var(--promo-image, none);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
}

.promo__bg {
  --promo-image: url("../img/promo/promo-banner-mobile.webp");
  background-position: left 35%;
}

@media (min-width: 48em) {
  .promo__bg {
    --promo-image: url("../img/promo/promo-banner-desktop.webp");
    background-position: left center;
  }
}

.promo__visual {
  visibility: hidden;
  border-color: transparent;
  background: none;
}

.promo__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(10 24 38 / 0.52) 0%, rgb(10 24 38 / 0.36) 48%, rgb(10 24 38 / 0.12) 100%);
}

/* Marcador de la zona principal de la ilustración */
.promo__visual {
  --promo-visual: repeating-linear-gradient(
    -45deg,
    rgb(255 255 255 / 0.10) 0 6px,
    rgb(255 255 255 / 0.04) 6px 12px
  );

  position: relative;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  border: 1px dashed rgb(255 255 255 / 0.35);
  border-radius: 0.5rem;
  background: var(--promo-visual) center / cover no-repeat;
  overflow: hidden;
}

/* En móvil el hueco mide 48 px: la etiqueta no cabe y se recortaría.
   La trama diagonal ya comunica que ahí falta una imagen. */
.promo__visual-label {
  display: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.5625rem;
  line-height: 1.2;
  text-align: center;
  letter-spacing: 0.02em;
  color: rgb(255 255 255 / 0.75);
  padding-inline: 2px;
}

.promo__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
}

.promo__text {
  font-size: 0.75rem;
  line-height: 1.35;
  color: #fff;
  text-shadow: 0 1px 2px rgb(10 24 38 / 0.3);
}

.promo__text strong { font-weight: 700; }

.promo__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
  background: var(--c-text);
  color: var(--c-bg);
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 0.375rem 0.875rem;
  border-radius: var(--r-pill);
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast) ease;
}

.promo__cta:hover {
  color: var(--c-bg);
  background: #fff;
  transform: translateX(2px);
}

@media (min-width: 48em) {
  .promo__inner {
    column-gap: var(--sp-5);
    padding-block: 0.6875rem;
  }

  .promo__visual {
    width: 8.25rem;
    height: 3.25rem;
    border-radius: 0.5rem;
  }

  .promo__cta { font-size: var(--fs-xs); padding: 0.4375rem var(--sp-4); }

  .promo__visual-label { display: block; }

  .promo__content {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-5);
  }

  /* Empuja el CTA al extremo derecho de la franja */
  .promo__cta { margin-left: auto; }

  .promo__text { font-size: var(--fs-base); }
}

/* --------------------------------------------------------------------------
   Navegación
   -------------------------------------------------------------------------- */
.nav-shell {
  position: absolute;
  top: var(--promo-h);
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-4) var(--sp-gutter);
  pointer-events: none;
}

/* JS activa este estado al pasar el banner */
.nav-shell.is-stuck {
  position: fixed;
  top: 0;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  max-width: var(--w-wide);
  pointer-events: auto;
  background: rgb(15 36 56 / 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgb(140 163 184 / 0.18);
  border-radius: var(--r-pill);
  padding: 0.5625rem 0.625rem 0.5625rem 1.125rem;
  transition: background var(--t-slow) ease, box-shadow var(--t-slow) ease;
}

.nav-shell.is-scrolled .nav {
  background: rgb(12 24 40 / 0.92);
  box-shadow: var(--sh-nav);
}

/* `flex: none` es obligatorio: como ítem flex, el logotipo se encogería cuando la
   barra va justa de espacio (pasaba entre 768 y 880 px) y el SVG se deformaba. */
.nav__brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  margin-right: auto;
}

/* Altura controlada + ancho automático: el logotipo horizontal nunca se deforma.
   Por debajo de ~26 px el subtítulo "SERVICIOS INTEGRALES S.A.S" deja de leerse. */
.nav__brand img {
  flex: none;
  height: 1.75rem;
  width: auto;
  max-width: none;
}

.nav__links { display: none; }

/* Se cualifica con `.nav` para ganar a `.btn { display: inline-flex }`,
   que se declara más abajo con la misma especificidad. */
.nav .nav__cta { display: none; }

/* Botón hamburguesa */
.nav__burger {
  display: grid;
  place-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-pill);
  cursor: pointer;
}

.nav__burger span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--c-text);
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-base) ease;
}

.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

/* Panel desplegable en móvil */
.nav-mobile {
  width: 100%;
  max-width: var(--w-wide);
  margin-top: var(--sp-2);
  pointer-events: auto;
  background: rgb(12 24 40 / 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgb(140 163 184 / 0.18);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
}

.nav-mobile[hidden] { display: none; }

.nav-mobile ul {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--sp-4);
}

.nav-mobile a {
  display: block;
  color: var(--c-text-soft);
  font-size: var(--fs-md);
  padding: var(--sp-3) var(--sp-2);
  border-radius: var(--r-sm);
}

.nav-mobile a:hover { color: var(--c-brand); }

/* Tablet: la barra completa cabe justa. Se aprietan huecos y rellenos, nunca el
   logotipo (`flex: none`) ni el texto de los botones (`white-space: nowrap`). */
@media (min-width: 48em) {
  .nav { width: auto; gap: var(--sp-1); }

  .nav__brand { margin-right: var(--sp-2); }
  .nav__brand img { height: 2.125rem; }

  .nav__links {
    display: flex;
    align-items: center;
    gap: 0;
  }

  .nav__links a {
    display: block;
    color: var(--c-text-muted);
    font-size: 0.8125rem;
    padding: var(--sp-2) 0.5rem;
    border-radius: var(--r-pill);
    white-space: nowrap;
  }

  .nav__links a:hover { color: var(--c-brand); }

  .nav .nav__cta {
    display: inline-flex;
    font-size: 0.8125rem;
    padding: 0.5rem 0.875rem;
  }

  .nav__burger,
  .nav-mobile { display: none; }
}

/* Escritorio: vuelve a respirar. */
@media (min-width: 64em) {
  .nav { gap: clamp(0.5rem, 2vw, 1.375rem); }

  .nav__links { gap: var(--sp-1); }

  .nav__links a {
    font-size: var(--fs-sm);
    padding: var(--sp-2) 0.875rem;
  }

  .nav .nav__cta {
    font-size: var(--fs-sm);
    padding: 0.625rem 1.125rem;
  }
}

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  padding: 0.625rem 1.125rem;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-base) ease, background var(--t-base) ease;
}

.btn:active { transform: translateY(1px); }

.btn--brand {
  background: var(--grad-brand-cta);
  color: #fff;
}

.btn--brand:hover {
  color: #fff;
  box-shadow: var(--sh-cta);
}

.btn--solid {
  background: var(--c-brand);
  color: var(--c-bg);
  padding: 0.8125rem 1.25rem;
  font-size: var(--fs-base);
}

.btn--solid:hover { color: var(--c-bg); background: var(--c-brand-soft); }

/* Respaldo de WhatsApp en el formulario. Verde oficial de WhatsApp para que se
   reconozca al instante; texto en azul marino (10.5:1 de contraste). */
.btn--wa {
  background: #25D366;
  color: var(--c-bg);
}

.btn--wa:hover { color: var(--c-bg); background: #1fb457; }
.btn--wa svg { flex: none; }

.btn--sm  { font-size: var(--fs-sm); padding: 0.6875rem 1.125rem; }
.btn--lg  { font-size: 1rem; padding: 1rem 1.5rem; box-shadow: var(--sh-cta); }
.btn--block { width: 100%; }

/* --------------------------------------------------------------------------
   Antetítulo de sección
   -------------------------------------------------------------------------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: var(--sp-5);
  font-size: var(--fs-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.eyebrow--center { justify-content: center; }

.eyebrow--plain {
  display: block;
  margin-bottom: var(--sp-5);
  font-size: var(--fs-xs);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-brand-soft);
}

.eyebrow__rule {
  flex: none;
  width: 2rem;
  height: 1px;
  background: var(--c-brand);
}

/* --------------------------------------------------------------------------
   Carrusel de servicios · coverflow / abanico
   JS coloca cada tarjeta en abanico (transform + opacity + z-index). Aquí solo
   van el aspecto de la tarjeta, la transición del vaivén y el degradado a los
   extremos. Lógica en assets/js/modules/services.js
   -------------------------------------------------------------------------- */
.svc-carousel {
  position: relative;
  /* Ancho de tarjeta: lo lee el JS para calcular la separación del abanico. */
  --svc-card-w: min(78vw, 20rem);
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

@media (min-width: 40em) { .svc-carousel { --svc-card-w: 20rem; } }     /* 320px */
@media (min-width: 64em) { .svc-carousel { --svc-card-w: 21.25rem; } }  /* 340px */
@media (min-width: 90em) { .svc-carousel { --svc-card-w: 22.5rem; } }   /* 360px */

.svc-carousel__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;              /* recorta las tarjetas de los extremos: sin scroll horizontal */
  perspective: 1600px;           /* da profundidad al giro de las laterales */
  touch-action: pan-y;           /* el dedo desplaza la página; el gesto horizontal lo captura JS */
  cursor: grab;
  /* Alto real lo fija JS (tarjeta + aire); este valor evita el recorte inicial. */
  min-height: 31rem;
}

.svc-carousel.is-dragging .svc-carousel__viewport { cursor: grabbing; }

.svc-carousel__track {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Cada diapositiva se ancla al centro del escenario; JS la desplaza desde ahí. */
.svc-slide {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--svc-card-w);
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 0.6s var(--ease-out), opacity 0.6s ease;
  will-change: transform, opacity;
}

/* --- Tarjeta visual --- */
.svc-card {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--c-surface);
  border: 1px solid rgb(140 163 184 / 0.14);
  box-shadow: var(--sh-card);
  transition: box-shadow var(--t-slow) ease;
}

/* Glow de marca en la tarjeta protagonista */
.svc-slide.is-active .svc-card {
  border-color: transparent;
  box-shadow: 0 34px 80px rgb(0 0 0 / 0.55), 0 10px 40px rgb(24 70 122 / 0.35);
}

.svc-slide.is-active .svc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-brand) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.svc-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-surface-alt);
}

.svc-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
  /* Los clics caen sobre la tarjeta, no sobre la imagen: así no arrastra el fantasma nativo. */
  pointer-events: none;
}

.svc-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(10 24 38 / 0) 58%, rgb(15 36 56 / 0.9) 100%);
  pointer-events: none;
}

.svc-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
}

/* Título a dos líneas fijas: todas las tarjetas miden lo mismo de alto. */
.svc-card__title {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.2;
  color: var(--c-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.2em * 2);
}

/* Descripción a tres líneas fijas. Reserva su espacio aunque esté invisible en
   las laterales, para que la altura del abanico no cambie. */
.svc-card__desc {
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--c-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.55em * 3);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.svc-card__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-brand-soft);
  opacity: 0;
  transition: opacity 0.4s ease, color var(--t-base) ease;
}

.svc-card__cta span { transition: transform var(--t-base) var(--ease-out); }
.svc-card__cta:hover { color: var(--c-brand); }
.svc-card__cta:hover span { transform: translateX(4px); }

/* Descripción y CTA solo en la tarjeta protagonista. En las laterales el texto
   sigue en el DOM (SEO) pero no distrae. */
.svc-slide.is-active .svc-card__desc,
.svc-slide.is-active .svc-card__cta { opacity: 1; }

/* --- Controles anterior / siguiente --- */
.svc-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
}

.svc-nav {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgb(15 36 56 / 0.72);
  border: 1px solid rgb(140 163 184 / 0.24);
  color: var(--c-text-soft);
  cursor: pointer;
  transition: background var(--t-base) ease, color var(--t-base) ease, transform var(--t-fast) var(--ease-out);
}

.svc-nav:hover { background: rgb(15 36 56 / 0.95); color: var(--c-text); }
.svc-nav:active { transform: scale(0.94); }
.svc-nav svg { width: 1.25rem; height: 1.25rem; }

/* --- Sin JS: pila estática legible en lugar de tarjetas apiladas en el centro --- */
.no-js .svc-carousel__viewport {
  position: static;
  overflow: visible;
  perspective: none;
  min-height: 0;
  cursor: auto;
}

.no-js .svc-carousel__track {
  position: static;
  display: grid;
  gap: var(--sp-5);
}

.no-js .svc-slide {
  position: static;
  width: auto;
  max-width: 24rem;
  margin-inline: auto;
  transform: none;
  opacity: 1;
  transition: none;
}

.no-js .svc-card__desc,
.no-js .svc-card__cta { opacity: 1; }

.no-js .svc-carousel__controls { display: none; }

/* --------------------------------------------------------------------------
   Carrusel de testimonios
   -------------------------------------------------------------------------- */
/* Ocupa todo el ancho de la ventana: la sección que lo contiene no lleva relleno
   lateral y el aire de los extremos lo pone `.carousel__track`. */
.carousel { position: relative; }

.carousel__viewport {
  overflow: hidden;
  /* Deja pasar el gesto vertical: el dedo desliza la página, no solo el carrusel */
  touch-action: pan-y;
  cursor: grab;
  padding-block: var(--sp-2);
}

.carousel__viewport:focus-visible { outline-offset: -2px; }

.carousel.is-dragging .carousel__viewport { cursor: grabbing; }

.carousel__track {
  display: flex;
  align-items: stretch;
  gap: var(--sp-5);
  width: max-content;
  padding-inline: var(--sp-gutter);
  will-change: transform;
  /* Evita seleccionar texto sin querer mientras se arrastra */
  user-select: none;
  -webkit-user-select: none;
}

/* Difuminado en los bordes para insinuar que hay más contenido */
.carousel__edge {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(1.5rem, 6vw, 5rem);
  pointer-events: none;
  z-index: 2;
}

.carousel__edge--start { left: 0;  background: linear-gradient(90deg, var(--c-bg) 0%, transparent 100%); }
.carousel__edge--end   { right: 0; background: linear-gradient(270deg, var(--c-bg) 0%, transparent 100%); }

/* Tarjeta de testimonio */
.testimonial {
  display: flex;
  flex-direction: column;
  flex: none;
  width: min(19.5rem, 78vw);
  padding: var(--sp-6);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  transition: border-color var(--t-base) ease, transform var(--t-base) var(--ease-out);
}

.testimonial:hover {
  border-color: rgb(110 183 65 / 0.35);
  transform: translateY(-4px);
}

.testimonial__logo {
  position: relative;
  display: flex;
  align-items: center;
  height: 3.5rem;
  margin-bottom: var(--sp-5);
}

.testimonial__logo img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
  /* Unifica logotipos de colores dispares con la paleta oscura */
  filter: brightness(0) invert(1);
  opacity: 0.85;
  transition: opacity var(--t-base) ease;
}

.testimonial:hover .testimonial__logo img { opacity: 1; }

/* Respaldo cuando el logotipo aún no existe: se muestra el nombre */
.testimonial__logo.is-missing {
  background: none;
  border-radius: var(--r-sm);
}

.testimonial__logo.is-missing::after { content: none; }

.testimonial__logo-name {
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--c-text-soft);
}

.testimonial__quote {
  flex: 1;
  margin-bottom: var(--sp-5);
}

.testimonial__quote p {
  position: relative;
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--c-text-soft);
}

.testimonial__quote p::before {
  content: "\201C";
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 0;
  vertical-align: -0.35em;
  color: var(--c-brand);
  margin-right: 0.125rem;
}

.testimonial__meta {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line);
}

.testimonial__name {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--c-text);
}

.testimonial__role {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

@media (min-width: 48em) {
  .testimonial { width: 21.875rem; padding: var(--sp-8); }
}

/* --------------------------------------------------------------------------
   Formulario
   -------------------------------------------------------------------------- */
.form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}

.field label {
  display: block;
  font-size: 0.8125rem;
  color: var(--c-text-soft);
  margin-bottom: var(--sp-2);
}

.field abbr {
  color: var(--c-brand);
  text-decoration: none;
  cursor: help;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--c-bg);
  border: 1px solid var(--c-line-strong);
  color: var(--c-text);
  font-size: var(--fs-base);
  padding: 0.8125rem 0.9375rem;
  border-radius: var(--r-sm);
  transition: border-color var(--t-base) ease, box-shadow var(--t-base) ease;
}

.field textarea { resize: vertical; }

.field input::placeholder,
.field textarea::placeholder { color: rgb(140 163 184 / 0.7); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px rgb(110 183 65 / 0.15);
}

/* Solo marcamos error tras un envío fallido, no mientras se escribe */
.form.is-validated :invalid { border-color: rgb(214 90 90 / 0.7); }

.form__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

.form__actions .btn { min-width: 15rem; }

/* El respaldo de WhatsApp está oculto salvo cuando el envío falla. */
.form__actions [hidden] { display: none; }

/* ---- Aviso de estado del envío ---- */
.form__status {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  font-size: var(--fs-sm);
  line-height: 1.5;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-6);
  border: 1px solid transparent;
}

.form__status[hidden] { display: none; }

.form__status::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: 0.4em;
  border-radius: 50%;
  background: currentColor;
}

.form__status[data-tone="ok"] {
  background: rgb(110 183 65 / 0.12);
  border-color: rgb(110 183 65 / 0.4);
  color: var(--c-brand-soft);
}

.form__status[data-tone="error"] {
  background: rgb(214 90 90 / 0.12);
  border-color: rgb(214 90 90 / 0.4);
  color: var(--c-error-text);
}

/* Pendiente de conectar: ni éxito ni error. No debe parecer que se envió. */
.form__status[data-tone="warn"] {
  background: rgb(214 168 90 / 0.12);
  border-color: rgb(214 168 90 / 0.4);
  color: #F0D9A8;
}

/* ---- Consentimiento ---- */
.consent {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-line);
}

.consent__notice {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--c-text-muted);
  margin-bottom: var(--sp-4);
}

.consent__notice a {
  color: var(--c-brand-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.consent__check {
  display: flex;
  align-items: flex-start;
  gap: 0.6875rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--c-text-soft);
  cursor: pointer;
}

/* 20px de casilla dentro de un área de toque cómoda. */
.consent__check input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--c-brand);
  cursor: pointer;
}

.consent__check span { padding-top: 0.125rem; }

@media (min-width: 40em) {
  .form__grid { grid-template-columns: 1fr 1fr; }
  .field--full { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   Botón flotante de WhatsApp
   -------------------------------------------------------------------------- */
/* Verde oficial de WhatsApp: el botón se reconoce antes de leerlo.
   El texto va en azul marino (10.5:1); el glifo blanco es el logotipo oficial. */
.wa-fab {
  position: fixed;
  right: max(1.125rem, env(safe-area-inset-right));
  bottom: calc(1.125rem + env(safe-area-inset-bottom));
  z-index: var(--z-fab);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: #25D366;
  color: var(--c-bg);
  font-weight: 600;
  font-size: var(--fs-base);
  padding: 0.875rem;
  border-radius: var(--r-pill);
  box-shadow: 0 14px 34px rgb(37 211 102 / 0.35), 0 4px 12px rgb(0 0 0 / 0.35);
  transition: transform var(--t-fast) var(--ease-out);
}

.wa-fab:hover {
  color: var(--c-bg);
  transform: scale(1.05);
}

.wa-fab__icon {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
}

/* En móvil solo el icono: ocupa menos y no tapa contenido */
.wa-fab__label { display: none; }

@media (min-width: 30em) {
  .wa-fab { padding: 0.875rem 1.125rem; }
  .wa-fab__label { display: inline; white-space: nowrap; }
}