/* =========================================================
   SMILE TEAM — capa de marca
   Identidad real: dorado #FECC02 sobre grafito.
   Todo lo que cambia de un cliente a otro vive en este archivo.
   styles.css NO se toca: el diseño queda idéntico.
   ========================================================= */

:root {
  /* --- Colores de marca (tomados del logo dorado) --- */
  --azul: #16232B;          /* primario: grafito (botones, franja de confianza, enlaces) */
  --azul-oscuro: #0D161C;   /* hover del primario y degradado del CTA final */
  --lima: #FECC02;          /* dorado del logo: cifras, acentos, botones de conversión */
  --naranja: #E2574C;       /* urgencias */
  --magenta: #8A6A00;       /* dorado oscuro para etiquetas pequeñas sobre blanco */

  /* --- Neutros --- */
  --tinta: #121A1F;
  --texto: #3A474F;
  --suave: #5E6B73;
  --papel: #ffffff;
  --tinte: #FAF7EF;         /* crema cálida, acompaña al dorado */
  --linea: #E7E1D5;
  --noche: #12181D;
}

/* --- Legibilidad sobre el nuevo primario y el dorado --- */
.btn-orange { color: var(--tinta); }
.btn-orange:hover { background: #C9422B; }
.btn-lime { color: #12181D; }
.btn-lime:hover { background: #FFD84D; }

/* --- Estados y sombras que en styles.css están fijos en azul --- */
.service-card:hover { box-shadow: 0 18px 40px -22px rgba(22, 35, 43, .38); }
.urgent-strip { background: #FFF6EC; border-bottom: 1px solid #FFE3C4; }
.service-card-urgent { background: #FFF9F3; border-color: #FFDCC9; }
.service-card-urgent .service-tag { color: #A63A1B; }
.reason svg { background: #FBF2D6; }
.eyebrow::before { background: var(--lima); }

/* --- Fondo del film del hero --- */
.scroll-film,
.film-stage { background: #0B1013; }
.film-shade {
  background:
    linear-gradient(90deg, rgba(8,13,16,.74) 0%, rgba(8,13,16,.40) 38%, rgba(8,13,16,0) 62%),
    linear-gradient(0deg, rgba(8,13,16,.58) 0%, rgba(8,13,16,0) 40%);
}
@media (max-width: 860px) {
  .film-shade {
    background: linear-gradient(0deg, rgba(8,13,16,.84) 0%, rgba(8,13,16,.46) 45%, rgba(8,13,16,0) 72%);
  }
}
.compare { background: var(--noche); }

/* --- Estela dorada: los brillos cálidos que ahora forman parte de la marca --- */
.trust {
  background:
    radial-gradient(120% 180% at 88% -20%, rgba(254,204,2,.22) 0%, rgba(254,204,2,0) 58%),
    var(--azul);
}
.section-dark {
  background:
    radial-gradient(85% 55% at 100% 0%, rgba(254,204,2,.12) 0%, rgba(254,204,2,0) 60%),
    var(--noche);
}
.final-cta {
  background:
    radial-gradient(75% 120% at 88% 8%, rgba(254,204,2,.22) 0%, rgba(254,204,2,0) 55%),
    linear-gradient(135deg, #1B2A33 0%, #0D161C 100%);
}
.site-footer { border-top: 1px solid rgba(254,204,2,.18); }

/* --- Logo en el header: versión a dos tintas (marca y sonrisa doradas,
       wordmark en grafito) para que se lea sobre blanco sin cajón.
       Si se quisiera el logo 100% dorado sobre el blanco, conviene el
       .brand-chip grafito de abajo en vez de dorado suelto (1.5:1). --- */
.brand img { width: auto; height: 42px; }
.footer-brand img { width: auto; height: 44px; }

/* Alternativa (desactivada): logo dorado sobre pastilla grafito */
/*
.brand-chip {
  display: inline-flex; align-items: center;
  background: #0F1519; border-radius: 14px; padding: 7px 13px;
  box-shadow: 0 8px 20px -14px rgba(0, 0, 0, .7);
}
.brand-chip img { height: 38px; }
*/

@media (max-width: 860px) {
  .brand img { height: 30px; }
  .footer-brand img { height: 38px; }
}