/* =============================================================
   VALÍDATE — Stylesheet
   Colores extraídos directamente del SVG de diseño (index.svg)
============================================================= */

/* -------------------------------------------------------------
   1. VARIABLES
------------------------------------------------------------- */
:root {
  /* ── Fondos de sección ── */
  --navy-navbar:    #313A57;   /* Navbar · Footer                          */
  --navy-hero:      #3E4769;   /* Hero · Servicios bg · Contacto overlay   */
  --navy-card:      #4B557A;   /* Cards de servicios                       */

  /* ── Acentos ── */
  --accent-blue:    #7A8CCF;   /* Íconos bg · borders cards · strokes      */
  --accent-light:   #B4C2F5;   /* Border izq. quote · variante clara       */
  --btn-verify:     #6C7BB3;   /* Botón "Verificar"                        */
  --green:          #20C692;   /* WhatsApp · labels sección oscura         */
  --green-bg:       #E9FFF4;   /* Fondo badge verde                        */

  /* ── Secciones claras ── */
  --bg-light:       #F4F7FF;   /* Acerca de · Verificar · Cobertura        */
  --bg-quote:       #E6E9F6;   /* Fondo blockquote                         */
  --bg-white:       #FFFFFF;

  /* ── Cards About ── */
  --vision-card:    #3E4769;   /* Card "Nuestra Visión" (mismo que hero)   */

  /* ── Advertencia ── */
  --warning-bg:     rgba(255,186,186,0.15);
  --warning-icon:   #FFBABA;

  /* ── Texto ── */
  --text-dark:      #1e2540;
  --text-body:      #4B5880;
  --text-muted:     #8492B0;
  --text-white:     #FFFFFF;
  --text-light:     #B4C2F5;   /* texto secundario sobre fondo oscuro      */
  --text-sub:       #8A9BBF;   /* párrafos sobre fondo oscuro              */

  /* ── Bordes ── */
  --border-card:    #7A8CCF;   /* stroke de las cards de servicios         */
  --border-light:   #D1D5DB;

  /* ── Sombras ── */
  --shadow-card:    0 2px 16px rgba(49,58,87,0.10);
  --shadow-btn:     0 6px 20px rgba(74,90,232,0.28);
  --shadow-green:   0 6px 20px rgba(32,198,146,0.30);

  /* ── Radios ── */
  --r-card:    20px;   /* rx=20.5 en SVG */
  --r-icon:    15px;   /* rx=15 en SVG */
  --r-vision:  21px;   /* rx=21 en SVG — card Visión */
  --r-btn:      8px;
  --r-pill:   999px;

  /* ── Tipografía ── */
  --font: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --t: 220ms ease;
}

/* -------------------------------------------------------------
   2. RESET BASE
------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text-dark);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--navy-navbar); }
::-webkit-scrollbar-thumb { background: var(--accent-blue); border-radius: 3px; }
::selection { background: rgba(122,140,207,0.25); }

/* -------------------------------------------------------------
   3. NAVBAR  — h: 82px, bg: #313A57
------------------------------------------------------------- */
#navbar {
  position: fixed;
  top: 0;
  width: 100%;
  height: 64px;
  background-color: var(--navy-navbar);
  z-index: 100;
  display: flex;
  align-items: center;
}

#navbar .nav-inner {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  display: flex;
  align-items: center;
  line-height: 1;
}

.nav-logo img {
  display: block;
  height: 32px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255,255,255,0.60);
  transition: color var(--t);
}

.nav-links a:hover,
.nav-links a.active { color: var(--text-white); }

/* Botón Portal — bg: accent-blue */
.btn-portal {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 18px;
  background: var(--accent-blue);
  color: var(--text-white) !important;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: var(--r-btn);
  transition: background var(--t), transform var(--t);
}

.btn-portal:hover {
  background: var(--btn-verify);
  transform: translateY(-1px);
}

.nav-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--text-white);
}

#mobileMenu {
  display: none;
  position: fixed;
  top: 64px;
  width: 100%;
  background: var(--navy-navbar);
  border-top: 1px solid rgba(255,255,255,0.07);
  z-index: 99;
  padding: 16px 24px 24px;
  flex-direction: column;
  gap: 16px;
}

#mobileMenu.open { display: flex; }

#mobileMenu a {
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: color var(--t);
}

#mobileMenu a:last-child { border-bottom: none; }
#mobileMenu a:hover { color: #fff; }

/* -------------------------------------------------------------
   4. HERO  — bg: #3E4769, imagen en lado derecho
------------------------------------------------------------- */
#hero {
  position: relative;
  min-height: 100vh;
  padding-top: 64px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--navy-hero);
}

.hero-bg {
  position: absolute;
  inset: 0;
}

.hero-bg::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 52%;
  background-image: url('./start-landing-image.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

/* Gradiente del SVG: paint2 — #3E4769 → transparent de izq a der */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    92deg,
    #3E4769 0%,
    #3E4769 38%,
    rgba(62,71,105,0.92) 52%,
    rgba(62,71,105,0.50) 70%,
    rgba(62,71,105,0.00) 100%
  );
}

.hero-content {
  position: relative;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 80px 32px;
}

/* Eyebrow badge */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(180,194,245,0.30);
  border-radius: var(--r-pill);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-light);
  margin-bottom: 24px;
}

.hero-eyebrow-icon {
  width: 12px;
  height: 12px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Headline */
.hero-h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 900;
  line-height: 1.12;
  color: var(--text-white);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
  max-width: 560px;
}

.hero-h1 .accent {
  color: var(--accent-blue);   /* #7A8CCF — periwinkle/slate-blue */
  display: block;
}

.hero-sub {
  font-size: 0.86rem;
  color: var(--text-white);
  max-width: 430px;
  line-height: 1.75;
  margin: 20px 0 32px;
}

/* Botones hero */
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

.btn-hero-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  background: #6C7BB3;
  border: 1.5px solid #6C7BB3;
  color: var(--text-white);
  font-size: 0.84rem;
  font-weight: 600;
  border-radius: var(--r-btn);
  transition: background var(--t), border-color var(--t), transform var(--t);
}

.btn-hero-solid:hover {
  background: #6272ad;
  border-color: #6272ad;
  transform: translateY(-1px);
}

.btn-hero-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  padding: 0 22px;
  background: transparent;
  border: 1.5px solid rgba(180,194,245,0.28);
  color: rgba(255,255,255,0.80);
  font-size: 0.84rem;
  font-weight: 500;
  border-radius: var(--r-btn);
  transition: background var(--t), border-color var(--t), transform var(--t);
}

.btn-hero-outline:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(180,194,245,0.55);
  transform: translateY(-1px);
}

.hero-btn-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}

.hero-flags {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
  font-size: 0.78rem;
  color: rgba(180,194,245,0.55);
}

.country-flags-icon {
  display: inline-block;
  vertical-align: middle;
}

.country-flags-icon-hero {
  height: 12px;
  width: auto;
}

/* -------------------------------------------------------------
   5. ACERCA DE NOSOTROS
   SVG: y=592 h=716 fill=#F4F7FF
   Content area: x=165–1275 → max-width 1110px centrado
   Padding top: 150px (592→742), bottom: ~70px
------------------------------------------------------------- */
#nosotros {
  background: var(--bg-light);   /* #F4F7FF */
  padding: 150px 0 70px;
}

.section-inner {
  max-width: 1110px;
  margin: 0 auto;
  padding: 0 32px;
}

/*
  Grid principal: 2 columnas
  SVG: left col 534px (48.1%) / gap 114px (10.3%) / right col 462px (41.6%)
  dentro de 1110px total
*/
.about-grid {
  display: grid;
  grid-template-columns: 568px 1fr;
  gap: 80px;
  align-items: start;
}


/* ────────────────────────────────────────────
   COLUMNA IZQUIERDA — sub-grid de cards
   SVG: Vision 287px (span 2 rows) + 2 blancas 233px
   col-gap=14px, row-gap=18px
   Vision h=460px = 221px + 18px gap + 221px ✓
──────────────────────────────────────────── */
.about-cards {
  display: grid;
  grid-template-columns: 304px 246px;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 18px;
  align-items: stretch;
}

/*
  Card Visión
  SVG: w=287 h=460  fill=#3E4769  rx=21
  Ícono a 23px top / 29px left
  Título + texto empiezan ~253px desde el top (≈55% de la card)
  → flex column + justify-content: space-between
*/
.card-vision {
  grid-column: 1;
  grid-row: 1 / span 2;
  background: var(--vision-card);   /* #3E4769 */
  border-radius: 21px;
  padding: 23px 24px 28px 29px;
  color: var(--text-white);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 132px;
  height: auto;
  min-height: 100%;
}

.card-vision-body { display: flex; flex-direction: column; }

.card-vision .card-title {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--text-white);
  margin: 0 0 16px;
}

.card-vision p {
  font-size: 0.92rem;
  color: var(--text-light);
  line-height: 1.78;
  margin: 0;
}

/*
  Cards blancas
  SVG: w=233 h=221  fill=white  rx=21
  Ícono: 24px left / 23px top
*/
.card-white {
  background: var(--bg-white);
  border-radius: 21px;
  padding: 23px 20px 22px 24px;
  box-shadow: var(--shadow-card);
  grid-column: 2;
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 255px;
}

.card-white:nth-child(2) { grid-row: 1; }
.card-white:nth-child(3) { grid-row: 2; }

.card-white .card-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-dark);
  margin: 12px 0 8px;
}

.card-white p {
  font-size: 0.78rem;
  color: var(--text-body);
  line-height: 1.58;
  margin: 0;
}

/*
  Ícono — SVG: 52×52 fill=#7A8CCF rx=15
*/
.card-icon {
  width: 52px;
  height: 52px;
  min-width: 52px;
  background: var(--accent-blue);   /* #7A8CCF */
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-white);
  flex-shrink: 0;
}

.card-icon svg,
.card-icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}

/* ────────────────────────────────────────────
   COLUMNA DERECHA — texto
──────────────────────────────────────────── */
.about-text { padding-top: 0; }

/* Label tipo "ACERCA DE NOSOTROS" */
.section-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-blue);
}

/* Separador "__" del diseño (línea corta bajo el label) */
.section-rule {
  width: 24px;
  height: 2px;
  background: var(--accent-blue);
  margin: 6px 0 18px;
}

.section-rule--green  { background: var(--green); }
.section-rule--white  { background: var(--text-white); }

.about-h2 {
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  font-weight: 900;
  line-height: 1.16;
  color: var(--text-dark);
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}

.about-h2 .accent { color: var(--accent-blue); }   /* #7A8CCF */

.about-body {
  font-size: 0.80rem;
  color: var(--text-body);
  line-height: 1.76;
  margin: 0 0 12px;
}

/*
  Quote
  SVG: x=813 y=1040 w=417 h=99 fill=#E6E9F6
       border-left rect: w=11 fill=#B4C2F5
*/
.about-quote {
  border-left: 11px solid var(--accent-light);   /* #B4C2F5 */
  background: var(--bg-quote);                   /* #E6E9F6 */
  border-radius: 0;
  padding: 14px 16px 14px 14px;
  margin: 16px 0 24px;
  font-size: 0.74rem;
  font-style: italic;
  color: var(--text-body);
  line-height: 1.7;
}

.about-quote footer {
  margin-top: 8px;
  font-style: normal;
  font-weight: 600;
  font-size: 0.70rem;
  color: var(--text-dark);
  border: none;
  padding: 0;
  background: none;
}

/*
  Stats
  SVG: divisores verticales stroke=#7A8CCF stroke-width=0.5
       en y=1166–1239
*/
.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-top: 16px;
  margin-top: 4px;
}

.stat { text-align: center; }

.stat + .stat {
  border-left: 0.5px solid var(--accent-blue);   /* #7A8CCF, stroke-width=0.5 */
}

.stat-num {
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--text-dark);
  line-height: 1;
}

.stat-lbl {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-top: 5px;
  line-height: 1.4;
}

/* -------------------------------------------------------------
   6. SERVICIOS HEADER  — bg: #3E4769 + imagen, opacity 0.6
------------------------------------------------------------- */
#servicios-header {
  position: relative;
  min-height: 527px;
  display: flex;
  align-items: center;
  background-image: url('./service-landing-image.jpg');
  background-size: cover;
  background-position: center 20%;
  overflow: hidden;
}

/* Overlay color #3E4769 al 60% — igual que SVG */
.services-header-bg {
  position: absolute;
  inset: 0;
  background: var(--navy-hero);
  opacity: 0.60;
}

.services-header-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: end;
  padding: 110px 0 80px;
}

.services-h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.7rem);
  font-weight: 900;
  color: var(--text-white);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}

.services-desc {
  font-size: 0.9rem;
  color: var(--text-white);
  line-height: 1.7;
  opacity: 0.9;
}
.services-desc strong {
  color: var(--text-white);
  font-weight: 700;
  opacity: 1;
}

/* -------------------------------------------------------------
   7. SERVICIOS CARDS  — bg: #3E4769 sólido
------------------------------------------------------------- */
#servicios-cards {
  background: var(--navy-hero);
  padding: 53px 0 61px;   /* SVG: top=53px, bottom=61px */
}

/* Grid 2×2 — col-gap=14px, row-gap=28px (SVG exacto) */
.services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 14px;
  row-gap: 28px;
}

/* Card — bg: #4B557A, stroke: #7A8CCF 1px, rx: 20.5px */
.service-card {
  background: var(--navy-card);
  border: 1px solid var(--border-card);
  border-radius: 20.5px;
  padding: 28px;
  transition: border-color var(--t), transform var(--t), background var(--t);
}

.service-card:hover {
  border-color: var(--accent-light);
  transform: translateY(-3px);
  background: #536080;
}

.service-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

/* Número decorativo — fill #3E4769 sobre #4B557A = ghost sutil (SVG exacto) */
.service-num {
  font-size: 3.5rem;
  font-weight: 900;
  color: var(--navy-hero);   /* #3E4769 sobre #4B557A → ghost */
  line-height: 1;
  user-select: none;
}

.service-card h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-white);
  margin: 0 0 10px;
}

.service-card p {
  font-size: 0.78rem;
  color: var(--text-white);
  line-height: 1.72;
  margin: 0;
}

/* Banner advertencia — h=80px, margin-top=28px (SVG: gap desde grid) */
.warning-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 80px;
  background: var(--navy-card);
  border: 1px solid var(--border-card);
  border-radius: 20.5px;
  padding: 16px 24px;
  margin-top: 28px;
}

/* Ícono de advertencia — bg: #FFBABA */
.warning-icon-wrap {
  width: 41px;
  height: 41px;
  min-width: 41px;
  background: var(--warning-icon);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.warning-icon-wrap img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}

.warning-bar p {
  font-size: 0.76rem;
  color: var(--text-white);
  line-height: 1.65;
  margin: 0;
}

.warning-bar p strong { color: #f1f5f9; }

/* -------------------------------------------------------------
   8. VERIFICAR  — bg: #F4F7FF
------------------------------------------------------------- */
#verificar {
  background: var(--bg-light);
  padding: 88px 0 56px;
}

/* Card blanca — w=903px, h=394px, rx=21 (SVG exacto) */
.verify-box {
  max-width: 903px;
  margin: 0 auto;
  padding: 51px 48px 48px;
  background: #ffffff;
  border-radius: 21px;
  text-align: center;
  min-height: 306px;
}

.verify-panel { display: none; }
.verify-panel.verify-panel-active { display: block; }

/* Badge — bg:#E9FFF4, border sólido #20C692, rx=11px, h=22px */
.verify-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 12px;
  background: var(--green-bg);
  border: 1px solid var(--green);
  border-radius: 11px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--green);
  margin-bottom: 24px;
}

/* Heading: ~32px, color #3E4769 (SVG fill exacto) */
.verify-h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 900;
  color: var(--navy-hero);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}

.verify-sub {
  font-size: 0.84rem;
  color: var(--text-body);
  line-height: 1.7;
  margin: 0 0 32px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* Form: input + button separados — total 441px, gap 7px */
.verify-form {
  display: flex;
  gap: 7px;
  justify-content: center;
  margin-bottom: 16px;
}

/* Input — w=297px, h=43px, rx=5.5px, border #D1D5DB */
.verify-input {
  width: 297px;
  height: 43px;
  padding: 0 14px;
  border: 1px solid #D1D5DB;
  border-radius: 5.5px;
  background: transparent;
  font-family: var(--font);
  font-size: 0.84rem;
  color: var(--navy-hero);
  outline: none;
}

.verify-input:focus { border-color: var(--accent-blue); }
.verify-input::placeholder { color: #9CA3AF; }
.verify-input:disabled {
  background: #F8FAFC;
  cursor: wait;
}
.verify-input.is-invalid {
  border-color: #DC2626;
}

/* Botón — w=137px, h=44px, rx=6px, fill=#6C7BB3 */
.btn-verify {
  width: 137px;
  height: 44px;
  background: var(--btn-verify);
  color: var(--text-white);
  font-family: var(--font);
  font-size: 0.84rem;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t), transform var(--t);
}

.btn-verify:hover {
  background: var(--accent-blue);
  transform: translateY(-1px);
}

/* Nota — color #3E4769 (SVG fill exacto) */
.btn-verify:disabled {
  cursor: wait;
  opacity: 0.85;
  transform: none;
}
.btn-verify.is-loading {
  background: var(--accent-blue);
}

.verify-status {
  min-height: 20px;
  margin: 2px 0 12px;
  font-size: 0.8rem;
  font-weight: 600;
}
.verify-status.is-loading {
  color: var(--navy-hero);
}
.verify-status.is-success {
  color: #15803D;
}
.verify-status.is-not-found,
.verify-status.is-error {
  color: #DC2626;
}

.verify-result-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 18px;
}
.verify-result-icon img {
  width: 100%;
  height: 100%;
  display: block;
}
.verify-result-icon-success { color: #20C692; }
.verify-result-icon-error { color: #FF1F1F; }

.verify-result-title {
  margin: 0 0 34px;
  font-size: 30px;
  line-height: 1.1;
  font-weight: 700;
  color: #3E4769;
}

.verify-result-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
  text-align: left;
  margin: 0 auto 36px;
  max-width: 700px;
}

.verify-result-col {
  display: grid;
  gap: 22px;
}

.verify-result-divider {
  width: 2px;
  min-height: 116px;
  margin-top: 0;
  background: rgba(62, 71, 105, 0.82);
}

.verify-result-item {
  display: grid;
  gap: 4px;
}

.verify-result-label,
.verify-result-value,
.verify-empty-text {
  color: #3E4769;
}

.verify-result-label {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.verify-result-value {
  font-size: 12px;
  line-height: 1.25;
}

.verify-result-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.verify-result-actions-center {
  margin-top: 36px;
}

.verify-action-btn {
  min-width: 96px;
  height: 36px;
  padding: 0 16px;
  border-radius: 6px;
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: transform var(--t), background var(--t), color var(--t), border-color var(--t);
}

.verify-action-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.verify-action-icon img {
  width: 100%;
  height: 100%;
  display: block;
}

.verify-action-btn:hover {
  transform: translateY(-1px);
}

.verify-action-btn-outline {
  background: #ffffff;
  color: #7A8CCF;
  border: 1px solid #7A8CCF;
}

.verify-action-btn-solid {
  background: #6C7BB3;
  color: #ffffff;
  border: 1px solid #6C7BB3;
}

.verify-empty-text {
  margin: 0 auto;
  max-width: 300px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.verify-note {
  font-size: 0.8rem;
  color: var(--navy-hero);
}

/* -------------------------------------------------------------
   9. COBERTURA REGIONAL  — bg: #F4F7FF
------------------------------------------------------------- */
#cobertura {
  background: #ffffff;    /* SVG: sin rect de fondo = canvas blanco */
  padding: 95px 0 70px;
}

.coverage-grid {
  display: grid;
  grid-template-columns: 534px 1fr;  /* mismo patrón que about/services */
  gap: 156px;                         /* gap amplio del SVG */
  align-items: start;
}

.coverage-h2 {
  font-size: clamp(1.6rem, 3vw, 2rem);  /* SVG: ~32px = 2rem */
  font-weight: 900;
  color: var(--navy-hero);              /* SVG fill: #3E4769 */
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}

.coverage-flags {
  display: flex;
  align-items: center;
}

.country-flags-icon-coverage {
  height: 20px;
  width: auto;
}

.coverage-desc {
  font-size: 0.9rem;
  color: var(--navy-hero);   /* SVG fill: #3E4769 */
  line-height: 1.75;
  opacity: 0.85;
}
.coverage-desc strong {
  color: var(--navy-hero);
  font-weight: 700;
  opacity: 1;
}

/* -------------------------------------------------------------
   10. CONTACTO  — bg: imagen + overlay #3E4769 opacity 0.7
------------------------------------------------------------- */
#contacto {
  position: relative;
  min-height: 498px;           /* SVG: h=498px */
  display: flex;
  align-items: center;
  background-image: url('./contact-landing-image.jpg');
  background-size: cover;
  background-position: center 20%;
  overflow: hidden;
  text-align: center;
}

/* Overlay #3E4769 a 0.7 — SVG exacto */
.contact-bg {
  position: absolute;
  inset: 0;
  background: var(--navy-hero);
  opacity: 0.70;
}

.contact-inner {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 131px 24px 148px;  /* SVG: label offset=131px, bottom gap=148px */
}

.contact-h2 {
  font-size: clamp(1.6rem, 3vw, 2rem);  /* SVG: h≈30px single line */
  font-weight: 900;
  color: var(--text-white);
  letter-spacing: -0.02em;
  margin: 16px 0 12px;
}

.contact-sub {
  font-size: 0.87rem;
  color: var(--text-white);    /* SVG: #FEFEFE ≈ white */
  opacity: 0.9;
  line-height: 1.6;
  margin: 0 0 28px;
}

/* Botón WhatsApp — bg:#04C8A1, 224×36px, rx=6 (SVG exacto) */
.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 18px;
  background: #04C8A1;
  color: var(--text-white);
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 6px;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t), transform var(--t);
}

.btn-whatsapp:hover {
  background: #03b390;
  transform: translateY(-2px);
  box-shadow: var(--shadow-green);
}

.btn-whatsapp svg { width: 20px; height: 20px; flex-shrink: 0; }

/* -------------------------------------------------------------
   11. FOOTER  — bg: #313A57
------------------------------------------------------------- */
footer {
  background: var(--navy-navbar);   /* #313A57 */
  padding: 117px 0 84px;            /* SVG: logo offset=117px, bottom=84px */
}

.footer-inner {
  max-width: 1110px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

/* Logo — #FEFEFE, ~1.4rem (SVG: h≈26px) */
.footer-logo {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  line-height: 1;
}

.footer-logo img {
  display: block;
  height: 32px;
  width: auto;
}

.footer-tagline {
  font-size: 0.78rem;
  color: var(--text-white);
  max-width: 300px;
  line-height: 1.6;
  margin: 0 0 18px;
}

.footer-contact a,
.footer-contact p {
  display: block;
  font-size: 0.78rem;
  color: var(--accent-light);    /* #B4C2F5 sólido */
  margin-bottom: 3px;
  text-decoration: none;
  transition: color var(--t);
}

.footer-contact a:hover { color: var(--text-white); }

/* "Operamos en 🇨🇱🇵🇪🇨🇴🇦🇷" — inline, right-aligned */
.footer-operamos {
  font-size: 0.78rem;
  color: var(--accent-light);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.country-flags-icon-footer {
  height: 14px;
  width: auto;
}

/* -------------------------------------------------------------
   12. SCROLL REVEAL
------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-delay-1 { transition-delay: 0.10s; }
.reveal-delay-2 { transition-delay: 0.20s; }
.reveal-delay-3 { transition-delay: 0.30s; }
.reveal-delay-4 { transition-delay: 0.40s; }

/* -------------------------------------------------------------
   13. RESPONSIVE
------------------------------------------------------------- */
@media (max-width: 1200px) {
  /* About: colapsa el grid fijo a proporciones flexibles */
  .about-grid {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }

  .about-cards {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }

  .card-vision {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
}

@media (max-width: 1024px) {
  .services-header-grid { grid-template-columns: 1fr; gap: 16px; }
  .coverage-grid        { grid-template-columns: 1fr; gap: 32px; }

  /* About: columnas apiladas */
  .about-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .about-cards {
    grid-template-columns: 287px 233px;
    grid-template-rows: 221px 221px;
    column-gap: 14px;
    row-gap: 18px;
  }

  #nosotros { padding: 80px 0 60px; }
}

@media (max-width: 768px) {
  .nav-links, .btn-portal { display: none; }
  .nav-hamburger { display: block; }

  .section-inner { padding: 0 20px; }
  #nosotros { padding: 60px 0 48px; }
  #servicios-header, #servicios-cards,
  #verificar, #cobertura, #contacto, footer { padding-top: 56px; padding-bottom: 56px; }
  .hero-content { padding: 56px 20px; }

  /* About cards apiladas en mobile */
  .about-cards {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    column-gap: 0;
    row-gap: 14px;
  }

  .card-vision {
    grid-column: 1;
    grid-row: auto;
    min-height: 200px;
  }

  .card-white { grid-column: 1; grid-row: auto; }

  .services-grid { grid-template-columns: 1fr; }

  .hero-ctas { flex-direction: column; }
  .btn-hero-solid,
  .btn-hero-outline { width: 100%; justify-content: center; }

  .verify-form { flex-direction: column; align-items: stretch; }
  .verify-input { width: 100%; }
  .btn-verify { width: 100%; }
  .verify-box { padding: 40px 24px; }
  .verify-result-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
  }
  .verify-result-divider {
    width: 100%;
    min-height: 1px;
    height: 1px;
  }
  .verify-result-col {
    justify-items: center;
  }

  .btn-whatsapp { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .hero-h1 { font-size: 2rem; }
  .services-h2 { font-size: 1.8rem; }
  .about-stats { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}