/* ════════════════════════════════════════════════════════════
   FPRO · Capa de diseño estilo BBVA
   Se enlaza DESPUÉS del <style> interno de cada página para
   sobreescribir el look conservando todo el contenido.
   ════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ── Tokens BBVA ──────────────────────────────────────────── */
:root {
  --azul-oscuro: #072146;   /* BBVA Navy        */
  --azul-medio:  #1464A5;   /* BBVA Core Blue   */
  --azul-claro:  #2A7DE1;   /* BBVA Bright Blue */
  --acento:      #2DCCCD;   /* BBVA Aqua        */
  --naranja:     #2DCCCD;   /* repuntado a aqua (mantiene compatibilidad) */
  --texto:       #121A2A;
  --texto-suave: #5A6577;
  --fondo:       #F2F6FB;
  --blanco:      #FFFFFF;
  --borde:       #E3E9F2;
  --sombra:       0 6px 24px rgba(7,33,70,.08);
  --sombra-hover: 0 18px 48px rgba(7,33,70,.16);
  --radio:        16px;
  --radio-lg:     24px;
  --fuente: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--fuente);
  color: var(--texto);
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
}

.contenedor { max-width: 1240px; }

/* ── Tipografía con peso BBVA ─────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--fuente); letter-spacing: -0.025em; }
.section-titulo { font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.section-label {
  color: var(--azul-medio);
  font-weight: 700;
  letter-spacing: 2px;
}

/* ── Botones estilo BBVA ──────────────────────────────────── */
.btn {
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 15px 30px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-primario {
  background: var(--azul-medio);
  color: #fff;
  box-shadow: 0 8px 20px rgba(20,100,165,.28);
}
.btn-primario:hover {
  background: var(--azul-oscuro);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(7,33,70,.32);
}
.btn-acento {
  background: var(--acento);
  color: var(--azul-oscuro);
  box-shadow: 0 8px 20px rgba(45,204,205,.32);
}
.btn-acento:hover {
  background: #20b8b9;
  color: var(--azul-oscuro);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(45,204,205,.4);
}
.btn-secundario:hover { background: rgba(255,255,255,.18); }

/* Botones-enlace (tarjetas de contacto): texto siempre legible */
.canal-link.btn-primario { color: #fff !important; }
.canal-link.btn-acento { color: var(--azul-oscuro) !important; }

/* ── Header limpio ────────────────────────────────────────── */
.header {
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--borde);
  box-shadow: none;
}
.nav { height: 78px; }
.nav-links a { font-weight: 600; color: var(--texto); }
.nav-links a::after { height: 3px; border-radius: 3px; background: var(--acento); }

/* ── Heros con profundidad BBVA ───────────────────────────── */
.hero, .page-hero {
  background:
    radial-gradient(1100px 520px at 85% -10%, rgba(45,204,205,.22), transparent 60%),
    linear-gradient(135deg, #061a38 0%, var(--azul-oscuro) 45%, var(--azul-medio) 100%);
}
.hero h1, .page-hero h1 { font-weight: 800; letter-spacing: -0.035em; }
.hero h1 span, .page-hero h1 span { color: var(--acento); }
.hero-badge, .page-hero .badge, .page-hero-texto .badge {
  background: rgba(45,204,205,.14);
  border: 1px solid rgba(45,204,205,.4);
  color: #d6fbfb;
  border-radius: 99px;
}
.hero-stat-num { color: var(--acento); }
.hero-img-wrap img, .page-hero-img img {
  border-radius: var(--radio-lg);
  box-shadow: 0 40px 90px rgba(0,0,0,.4);
}

/* ── Tarjetas: estilo BBVA con borde fino + elevación ─────── */
.paso, .servicio-card, .canal-card, .valor-card, .testimonio, .form-card {
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra);
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, border-color .28s ease;
}
.paso:hover, .servicio-card:hover, .canal-card:hover, .valor-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--sombra-hover);
  border-color: rgba(45,204,205,.5);
}
.servicio-card { overflow: hidden; }
svg.servicio-img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; }
.servicio-img, .servicio-card .servicio-img { transition: transform .5s ease; }
.servicio-card:hover .servicio-img { transform: scale(1.06); }

/* Numeritos y círculos de icono en azul BBVA */
.paso-num, .servicio-icono, .contacto-dato-icono,
.form-beneficio-icono, .servicio-check {
  background: linear-gradient(135deg, var(--azul-medio), var(--acento)) !important;
}
.servicio-link, .canal-link { color: var(--azul-medio); }

/* Sección oscura "por qué" / testimonios */
.por-que {
  background:
    radial-gradient(900px 400px at 15% 0%, rgba(45,204,205,.18), transparent 60%),
    linear-gradient(135deg, var(--azul-oscuro) 0%, var(--azul-medio) 100%);
}
.beneficio {
  border-radius: var(--radio);
  border: 1px solid rgba(255,255,255,.16);
  transition: transform .28s ease, background .28s ease;
}
.beneficio:hover { transform: translateY(-6px); background: rgba(255,255,255,.16); }

/* Inputs */
.form-grupo input:focus,
.form-grupo select:focus,
.form-grupo textarea:focus {
  border-color: var(--azul-medio);
  box-shadow: 0 0 0 3px rgba(20,100,165,.14);
}

/* Ocultar el CTA del menú móvil cuando estamos en escritorio */
@media (min-width: 769px) {
  .nav-mobile-cta { display: none !important; }
}

/* Footer */
.footer { background: var(--azul-oscuro); }
.footer-col h4 { color: var(--acento); }
.footer-red:hover { background: var(--acento); color: var(--azul-oscuro); }

/* ── Animaciones de aparición al hacer scroll ─────────────── */
.fade-in {
  opacity: 0;
  transform: tra