/* ==========================================================================
   BERTELY CIF — capa v2: mezcla de tonalidades + luz del hero
   Se carga DESPUÉS de styles.css. Es aditiva: quitar el <link> del index
   devuelve el sitio exactamente a como estaba.

   NO redefine la paleta global (--bg, --surface, --amber...). El sitio en vivo
   ya tiene su azul y su fondo ajustados, y se respetan tal cual. Aquí solo hay:
     1. Módulos en tono claro
     2. Luz de izquierda a derecha en el hero
     3. El formulario como tarjeta
   ========================================================================== */

/* ==========================================================================
   1. Tonos de módulo
   Las clases redefinen las custom properties compartidas DENTRO de la sección.
   Como todo el CSS de componentes ya lee esas variables, las tarjetas, bordes,
   iconos y textos se recolorean solos: no cambia una sola línea de estructura,
   ni el copy, ni el orden de los bloques.
   ========================================================================== */

.tone-light,
.tone-light-accent {
  --surface-3: #E4ECFB;
  --line: rgba(11, 18, 32, 0.08);
  --line-strong: rgba(11, 18, 32, 0.14);
  --paper: #0B1220;
  --paper-dim: #45526B;
  --paper-faint: #6B7A98;
  /* El azul claro de la marca (#8CAFE1) no contrasta sobre blanco: dentro de
     los módulos claros se sustituye por un azul de igual familia pero legible. */
  --steel-light: #1D4ED8;
  --amber-light: #1D4ED8;
  background: var(--bg);
  color: var(--paper);
}

.tone-light {
  --bg: #F7F9FC;
  --surface: #FFFFFF;
  --surface-2: #EEF2F9;
}

.tone-light-accent {
  --bg: #F2F6FF;
  --surface: #FFFFFF;
  --surface-2: #E8F0FF;
}

/* Sombra suave en las tarjetas de los módulos con acento */
.tone-light-accent .featured-card,
.tone-light-accent .testimonial-card {
  box-shadow: 0 12px 32px -16px rgba(15, 23, 42, 0.18);
}
.tone-light-accent .featured-card:hover {
  box-shadow: 0 18px 40px -16px rgba(15, 23, 42, 0.24);
}

/* Chip de categoría relleno (no solo contorno) cuando va sobre la foto */
.tone-light-accent .featured-card__media .tag {
  background: var(--amber);
  color: #FFFFFF;
  border-color: transparent;
}

/* Foco de campos más visible sobre fondo claro */
.tone-light input:focus,
.tone-light select:focus,
.tone-light textarea:focus,
.tone-light-accent input:focus,
.tone-light-accent select:focus,
.tone-light-accent textarea:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(34, 67, 117, 0.16);
}

/* ==========================================================================
   2. Hero: luz de izquierda a derecha
   Un solo linear-gradient. Nada de radial: un degradado radial deja ver el arco
   de la elipse como un borde recortado, que es justo el defecto que se quería
   corregir. Un lineal no tiene forma, así que la transición nunca se delata.

   La intensidad está topada a propósito para que el logotipo (que es claro, para
   fondo oscuro) y el titular en blanco se mantengan legibles. La franja del
   header queda prácticamente intacta.
   ========================================================================== */

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(97deg,
    rgba(233, 241, 252, 0.50) 0%,
    rgba(224, 236, 250, 0.30) 8%,
    rgba(208, 224, 243, 0.16) 18%,
    rgba(190, 210, 234, 0.05) 30%,
    transparent 42%);
  /* La máscara casi apaga la luz en la franja del header. El logotipo es claro
     (está hecho para fondo oscuro), así que ahí el fondo tiene que seguir
     oscuro. De la franja hacia abajo la luz entra completa. */
  mask-image: linear-gradient(180deg,
    rgba(0, 0, 0, 0.10) 0%,
    rgba(0, 0, 0, 0.16) 10%,
    rgba(0, 0, 0, 0.55) 16%,
    black 24%,
    black 100%);
  -webkit-mask-image: linear-gradient(180deg,
    rgba(0, 0, 0, 0.10) 0%,
    rgba(0, 0, 0, 0.16) 10%,
    rgba(0, 0, 0, 0.55) 16%,
    black 24%,
    black 100%);
}

/* Halo suave: imperceptible, pero protege el texto en la franja de transición. */
.hero__title,
.hero__lede,
.trust-bar__item {
  text-shadow: 0 1px 22px rgba(4, 11, 19, 0.6);
}

/* ==========================================================================
   3. Formulario como tarjeta
   Sin fondo propio los campos quedaban sueltos sobre el módulo y se veía
   angosto. Con superficie, borde y aire se lee como una pieza.
   ========================================================================== */

.tone-light-accent .form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-8);
  box-shadow: 0 16px 40px -18px rgba(15, 23, 42, 0.2);
}
@media (min-width: 640px) {
  .tone-light-accent .form { padding: var(--sp-12); }
}

/* ==========================================================================
   4. Separación entre el hero y la franja de credenciales
   Un margen a secas sería invisible: el hero termina en #040B13 y el fondo de
   página es ese mismo color, así que la franja solo empezaría más abajo con la
   misma costura. La separación se resuelve con una regla clara que ocupa ese
   hueco. Va en el mismo blanco de los módulos claros (#F7F9FC) para que rime
   con ellos y no quede como una línea negra suelta.
   6px ≈ 0.16 cm.
   ========================================================================== */

.credentials {
  position: relative;
  margin-top: 6px;
}
.credentials::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -6px;
  height: 6px;
  background: #F7F9FC;
}

/* ==========================================================================
   5. Testimonios: la cita en la tipografía de cuerpo
   Venía en serif (Source Serif 4) y desentonaba con el resto de la sección.
   Ahora usa la misma familia que la entrada del bloque ("Publicamos
   comentarios de clientes...").
   ========================================================================== */

.testimonial-card__quote {
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.6;
}

/* ==========================================================================
   6. Botón flotante de WhatsApp en el verde oficial de la marca
   Venía en el azul del sitio con un icono genérico de globo de diálogo. Ahora
   usa el verde de WhatsApp (#25D366) y el glifo real de la marca, que es como
   se reconoce este botón.

   El glifo se aplica con mask-image sobre el pseudo-elemento, no tocando el
   SVG del HTML: así todo el cambio vive en esta hoja y quitar el <link> del
   index revuelve el botón a como estaba.
   ========================================================================== */

.wa-float {
  background: #25D366;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(37, 211, 102, 0.35);
}
.wa-float svg { display: none; }
.wa-float::before {
  content: "";
  width: 30px;
  height: 30px;
  background: #FFFFFF;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.999-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.999-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ==========================================================================
   7. Iconos sociales en el footer (Facebook / Instagram)
   Chicos y discretos, en el mismo idioma visual que el resto del sitio (trazo
   fino, sin relleno, marco cuadrado redondeado como en las tarjetas de
   servicio). Color apagado en reposo, acento de marca al pasar el mouse,
   igual que los demás enlaces del footer y del bloque de contacto.
   ========================================================================== */

.footer__social {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.footer__social a {
  display: inline-flex;
  color: var(--paper-dim);
  transition: color var(--dur-fast) var(--ease);
}
.footer__social a:hover { color: var(--amber-light); }
.footer__social svg { width: 18px; height: 18px; }