/* =============== TOKENS DE MARCA (únicos) =============== */
:root{
  --brand-pink:#ff2e93;     /* acentos/viñetas/números */
  --brand-green:#18a45b;    /* CTA verde, barra de sección */
  --text-900:#2b2b2b;
  --text-700:#4b5563;
  --muted:#8b8b8b;
  --bg-hero:#fbf5ee;        /* crema del hero */
  --bg-split:#ecf7ec;       /* verde muy claro (split y contactos) */
  --card:#fff;
  --radius-lg:18px;
  --radius-xl:24px;
  --shadow-sm:0 8px 18px rgba(0,0,0,.06);
  --shadow-md:0 12px 28px rgba(0,0,0,.08);
}

/* ================= HERO (solo imagen de fondo) ================= */
.ex-hero{ 
  background:var(--bg-hero); 
}
.ex-hero-bg{ 
  position:relative; 
  max-height:100%; 
}

.ex-hero-bg img{ 
  object-fit:cover; 
  object-position:center right; 
  display:block; 
}


@media (max-width:992px){
.ex-hero-bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.2);   /* 👈 zoom fijo */
  transform-origin: center center; /* centrado del zoom */
}


}

/* ================= BENEFICIOS + PASOS ================= */

.ex-benefits .btn-success{
  background:var(--brand-green); 
  border-color:var(--brand-green);
  font-weight:800; 
  border-radius:999px; 
  margin-bottom: 2%;
  padding:.7rem 2.2rem;
  box-shadow:0 18px 34px rgba(24,164,91,.25);
}
.ex-benefits h2{
  color:var(--text-900); font-weight:800;
  font-size:clamp(1.4rem,2.2vw,2rem);
}

/* Fila de 3 beneficios (ícono magenta y texto centrado) */
.ex-benefits .row .col-12.col-md-4 .px-3 img {
  display: block;          /* el <img> deja de ser inline */
  margin: 0 auto;          /* lo centra horizontalmente */
  width: 66px;
  height: 66px;
  object-fit: contain;
  filter: hue-rotate(-10deg) saturate(1.4);
}

.ex-benefits .row .col-12.col-md-4 .px-3 p:first-of-type{
  font-size:1rem; font-weight:700; color:var(--text-900);
}
.ex-benefits .row .col-12.col-md-4 .px-3 p.small{ color:#9aa1aa; }

/* Tarjetas de los 6 pasos */
.ex-benefits .rounded-4.bg-white{
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius-lg);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s;
}
.ex-benefits .rounded-4.bg-white:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-sm);
  border-color:rgba(0,0,0,.1);
}
.ex-benefits .ratio{ background:#f6f8fa; border-radius:18px; }
.ex-benefits .ratio img{ object-fit:contain; padding:.6rem; }
.ex-benefits .rounded-4.bg-white p.small{ color:var(--text-700); }
.ex-benefits .rounded-4.bg-white p.small b{ color:var(--text-900); }

/* ================= BANNER DIVISOR (SPLIT AVIÓN) ================= */
.ex-split{ background:var(--bg-split); }
.ex-split h3{
  font-weight:800; color:var(--text-900);
  font-size:clamp(1.4rem,2.6vw,2rem);
}
.ex-split .lead{ color:var(--text-700); font-weight:600; line-height:1.55; }
.ex-split img{ max-height:320px; object-fit:contain; }

/* ================= PROPUESTA DE VALOR ================= */
.section-h3{ font-weight:800; color:var(--text-900); margin-bottom:.6rem; }
.value-bullets{ list-style:none; padding:0; margin:1rem 0 0; }
.value-bullets li{
  position:relative; padding-left:1.3rem; margin:.4rem 0;
  color:var(--text-700); line-height:1.55;
}
.value-bullets li::before{
  content:"•"; position:absolute; left:0; top:0;
  color:var(--brand-pink); font-weight:900;
}

/* ================= TÍTULOS CON BARRA VERDE ================= */
.ex-section-title{ display:flex; align-items:center; gap:.8rem; }
.ex-section-title h3{ margin:0; font-weight:800; color:var(--text-900); }
.ex-section-title i{
  flex:1; height:6px; border-radius:6px;
  background:linear-gradient(90deg,var(--brand-green),#c8f0da);
}

/* ================= SERVICIOS COMPLEMENTARIOS (cards) ================= */
.ex-card{
  background:var(--card);
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius-lg);
  padding:1.25rem;
  box-shadow:var(--shadow-sm);
}
.ex-card-title{ font-weight:600; margin-bottom:.75rem; }
.ex-card-img{ width:100%; height:auto; border-radius:14px; object-fit:cover; }
.ex-card-text{ color:var(--text-700); }

/* ================= CHIPS (lista horizontal) ================= */
.ex-chips .chip-intro{
  background:var(--brand-green); color:#fff;
  border-radius:var(--radius-xl); padding:1.2rem 1.4rem;
  font-size:1.1rem; font-weight:700; height:100%;
  display:flex; align-items:center;
}
.chip-box{
  display:flex; align-items:center; gap:.75rem;
  background:#fff; border:1px solid rgba(0,0,0,.07);
  border-radius:var(--radius-xl); padding:.9rem 1.1rem;
  box-shadow:var(--shadow-sm); height:100%;
}
.chip-icon{ width:40px; height:40px; object-fit:contain; border-radius:12px; background:#86d58e1a }

/* Scroll horizontal en móvil para chips */
@media (max-width:991.98px){
  .ex-chips .row{ flex-wrap:nowrap; overflow-x:auto; }
  .ex-chips .row > [class*="col-"]{ flex:0 0 auto; }
}

/* ================= SUPPLY CHAIN ================= */
.ex-supply .lead{ color:var(--text-700); font-weight:600; }
.ex-pill-card{
  background:#fff; color:var(--text-700);
  border:1px solid rgba(0,0,0,.08); border-radius:var(--radius-lg);
  padding:1.2rem; line-height:1.6; box-shadow:var(--shadow-sm);
}
.ex-supply-foot{ color:var(--text-900); }
.ex-supply-foot b, .ex-supply-foot strong{ font-weight:800; }

/* ================= MUNDO DE SOLUCIONES (split) ================= */
.ex-solutions{ background:var(--bg-split); }
.sol-item{ display:flex; gap:.8rem; }
.sol-number{ color:var(--brand-pink); font-weight:800; }
.sol-title{ font-weight:800; margin:0; }
.sol-text{ color:var(--text-700); }

/* ================= LÍNEAS DE ATENCIÓN (desktop) ================= */
/* Contenedor común */
.ex-contacts-grid,
.ex-contacts-row { /* filas superior e inferior cuando total == 5 */
  --card-w: clamp(240px, 22vw, 320px);
}

/* Cada tarjeta ocupa ese ancho; el flex centrará automáticamente cada fila */
.ex-contact {
  flex: 0 0 var(--card-w);
  max-width: var(--card-w);
  background: transparent;
  border-radius: var(--radius-lg);
  padding: 1rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; height:100%;
}

/* Tus reglas estéticas */
.ex-contacts { background: var(--bg-split); }
.ex-contacts .ex-contact-icon { width:32px; height:32px; margin:0 auto .5rem; object-fit:contain; filter:hue-rotate(-10deg) saturate(1.2); display:block; }
.ex-contact-phone { display:block; color:var(--text-900); font-weight:700; text-decoration:none; }
.ex-contacts .ex-flag { display:block; width:80px; height:auto; margin:.6rem auto 0; object-fit:contain; }


/* ================= Helpers ================= */
html:has(:target){ scroll-behavior:smooth; }

/* ================= Tipografía unificada (colocar al final) ================= */
:root{
  --fs-title-xl: clamp(1.875rem, 2.8vw, 2.5rem);   /* titulación muy grande si se necesita */
  --fs-section:  clamp(1.5rem,  2.2vw, 2rem);      /* Títulos de sección (h2/h3) */
  --fs-subtitle: clamp(1.125rem,1.6vw, 1.375rem);  /* Títulos de card / subtítulos */
  --fs-lead:     clamp(1.0625rem,1.3vw,1.25rem);   /* párrafo destacado (lead) */
  --fs-body:     1rem;                              /* cuerpo normal */
  --fs-small:    .9375rem;                          /* texto pequeño */
  --lh-tight:    1.15;
  --lh-body:     1.6;
}

/* Títulos de SECCIÓN: todos iguales */
.ex-benefits h2,
.ex-split h3,
.section-h3,
.ex-section-title h3,
.ex-supply .ex-section-title h3,
.ex-solutions h3,
.ex-contacts > .container > h4 {
  font-size: var(--fs-section);
  line-height: var(--lh-tight);
  font-weight: 800;
  letter-spacing: 0;
  color: var(--text-900);
}

/* Subtítulos / títulos de cards */
.ex-card-title,
.sol-title,
.ex-contact .fw-semibold {
  line-height: 1.35;
  font-weight: 600;
  color: var(--text-900);
}

/* Párrafos destacados (lead) */
.ex-supply .lead,
.ex-split .lead,
.ex-value .lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  font-weight: 600;
  color: var(--text-700);
}

/* Cuerpo de texto unificado */
.ex-value p,
.ex-benefits p,
.ex-complements p,
.ex-chips p,
.ex-supply p,
.ex-supply .ex-pill-card,
.ex-complements .ex-card-text,
.ex-solutions p,
.ex-contacts p,
.value-bullets li,
.sol-text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-700);
}

/* Texto pequeño coherente */
.ex-benefits .small,
.ex-complements .small,
.ex-supply .small,
.ex-solutions .small,
.ex-contacts .small {
  font-size: var(--fs-small);
  line-height: 1.5;
}

/* Números y bullets con escala de cuerpo */
.sol-number { font-size: var(--fs-body); line-height: var(--lh-body); }
.value-bullets li { font-size: var(--fs-body); }

/* Hero: si agregas titular principal */
.ex-hero .hero-title { font-size: var(--fs-title-xl); line-height: var(--lh-tight); font-weight: 800; }

/* ====== CONTACTOS: maqueta de 4 columnas con WhatsApp+Correo apilados ====== */


/* Micro-estética para igualar pesos y tamaños de la maqueta */
.ex-contact{ padding-top:.25rem; }
.ex-contact-icon{ width:36px; height:36px; margin:0 0 .5rem 0; }
.ex-contact .fw-semibold{ font-weight:400; }
.ex-contact-phone{ margin-top:.2rem; font-weight:600; }
.ex-flag{ width:72px; height:auto; margin-top:1rem; }

/* En móviles seguimos con Bootstrap 2 por fila y centrado */
@media (max-width: 991.98px){
  .ex-contacts .row{
    display:flex !important;
    gap:1.25rem 0;
  }
  .ex-contacts .row > [class*="col-"]{ text-align:center; }
  .ex-contact{ align-items:center; }
}


/* ================= LEAD FORM (Cotiza) ================= */
.ex-lead{
  background: white;
}

.ex-lead .form-title{
  color: var(--brand-pink);
  font-weight: 800;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
}

.ex-form .form-label{
  font-weight: 700;
  color: var(--text-900);
}

.ex-form .form-control,
.ex-form .form-select{
  background:#efefef;
  border:0;
  border-radius: 14px;
  padding:.9rem 1rem;
  color:var(--text-900);
}
.ex-form .form-control:focus,
.ex-form .form-select:focus{
  box-shadow: 0 0 0 .2rem rgba(24,164,91,.15);
  background:#f3f3f3;
}

.ex-form .form-check-input{
  border-color:#d0d0d0;
}
.ex-form .form-check-input:checked{
  background-color: var(--brand-pink);
  border-color: var(--brand-pink);
}

.ex-form .btn.btn-success{
  background: var(--brand-green);
  border-color: var(--brand-green);
  border-radius: 999px;
  font-weight: 800;
  padding:.7rem 2.2rem;
  box-shadow: 0 18px 34px rgba(24,164,91,.25);
}

/* errores */
.ex-form .is-invalid{
  outline:2px solid #ffb6d0;
  background:#fff6fa;
}

/* intl-tel-input – integrarlo visualmente */
.iti{
  width:100%;
}
.iti--allow-dropdown .iti__flag-container{
  border-top-left-radius:14px;
  border-bottom-left-radius:14px;
}

/* Estado normal */
#lead-form #lf-country.form-select{
  /* Compat con Bootstrap 5 por variables */
  --bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --bs-form-select-bg-position: right 12px center;
  --bs-form-select-bg-size: 18px 18px;
  --bs-form-select-padding-right: 44px;

  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  width:100%;
  min-height:48px;

  /* anula la regla global .ex-form .form-select */
  padding:12px var(--bs-form-select-padding-right,44px) 12px 14px !important;
  border:1px solid rgba(0,0,0,.15) !important;
  border-radius:12px !important;

  background-color:#fff !important;
  background-image:var(--bs-form-select-bg-img) !important;
  background-repeat:no-repeat !important;
  background-position:var(--bs-form-select-bg-position) !important;
  background-size:var(--bs-form-select-bg-size) !important;

  color:#0f172a; font:inherit; line-height:1.3;
  outline-offset:2px;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

/* Hover */
#lead-form #lf-country.form-select:hover{
  border-color:rgba(0,0,0,.25) !important;
}

/* Focus: importante NO usar 'background:' abreviado */
#lead-form #lf-country.form-select:focus{
  outline:none;
  border-color:#18a45b !important;                         /* tu verde */
  box-shadow:0 0 0 3px rgba(24,164,91,.18) !important;     /* halo verde */
  background-color:#fff !important;                        /* mantiene blanco */
  background-image:var(--bs-form-select-bg-img) !important;/* mantiene chevron */
  background-position:var(--bs-form-select-bg-position) !important;
  background-size:var(--bs-form-select-bg-size) !important;
}

/* Opciones del desplegable (hasta donde permite el UA) */
#lead-form #lf-country.form-select,
#lead-form #lf-country.form-select option{
  font-family:inherit; font-size:15px; line-height:1.8;
}
#lead-form #lf-country.form-select option{
  color:#0f172a; background:#fff; text-indent:.4rem; -webkit-text-fill-color:currentColor;
}
#lead-form #lf-country.form-select option:checked{
  background:color-mix(in oklab, #18a45b 16%, white); color:#0f172a;
}

/* Firefox: estados de opciones */
@-moz-document url-prefix(){
  #lead-form #lf-country.form-select option:hover{
    background:color-mix(in oklab, #18a45b 20%, white);
  }
  #lead-form #lf-country.form-select:-moz-focusring > option:checked{
    background:color-mix(in oklab, #18a45b 24%, white);
  }
}

/* Scrollbar del menú (Chromium/WebKit) */
#lead-form #lf-country.form-select::-webkit-scrollbar{ width:10px; }
#lead-form #lf-country.form-select::-webkit-scrollbar-track{ background:rgba(0,0,0,.05); border-radius:8px; }
#lead-form #lf-country.form-select::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.18); border-radius:8px; }
#lead-form #lf-country.form-select::-webkit-scrollbar-thumb:hover{ background:rgba(0,0,0,.28); }

/* IE/Edge heredado */
#lead-form #lf-country.form-select::-ms-expand{ display:none; }

/* Móvil */
@media (max-width:640px){
  #lead-form #lf-country.form-select{
    padding-right:40px !important;
    min-height:46px;
    border-radius:10px !important;
  }
}

/* ===== Select País - UI mejorada ===== */
.cs-wrap{ position:relative; }

/* Ocultamos visualmente el select pero sigue en el DOM para POST/validación */
.cs-wrap > select.form-select{
  position:absolute; inset:0;
  width:100%; height:100%;
  opacity:0; pointer-events:none;          /* gestionamos eventos con el botón */
}

/* Botón “bonito” (igual a la captura) */
.cs-btn{
  -webkit-appearance:none; appearance:none;
  display:flex; align-items:center; justify-content:space-between;
  width:100%; min-height:48px;
  padding:12px 44px 12px 14px;
  border:1px solid rgba(0,0,0,.15);
  border-radius:12px;
  background:#fff;
  font:inherit; color:#0f172a; line-height:1.3; text-align:left;
  transition:border-color .15s, box-shadow .15s, background-color .15s;
}
.cs-btn:hover{ border-color:rgba(0,0,0,.25); }
.cs-btn:focus{ outline:none; border-color:#18a45b; box-shadow:0 0 0 3px rgba(24,164,91,.18); }

/* Chevron */
.cs-btn::after{
  content:""; flex:0 0 18px; width:18px; height:18px;
  background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:18px 18px;
  margin-left:12px;
}
.cs-wrap[aria-expanded="true"] .cs-btn::after{
  transform:rotate(180deg);
}

/* Lista de opciones */
.cs-list{
  position:absolute; left:0; right:0; top:calc(100% + 6px);
  margin:0; padding:6px;
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  list-style:none; z-index:50; max-height:240px; overflow:auto;
  display:none;
}
.cs-wrap[aria-expanded="true"] .cs-list{ display:block; }

.cs-opt{
  padding:10px 12px; border-radius:10px; cursor:pointer;
  color:#0f172a;
}
.cs-opt[aria-selected="true"]{
  background:color-mix(in oklab, #18a45b 16%, white);
}
.cs-opt:hover,
.cs-opt[aria-current="true"]{
  background:color-mix(in oklab, #18a45b 20%, white);
}

/* Scrollbar (Chromium/WebKit) */
.cs-list::-webkit-scrollbar{ width:10px; }
.cs-list::-webkit-scrollbar-track{ background:rgba(0,0,0,.05); border-radius:8px; }
.cs-list::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.18); border-radius:8px; }
.cs-list::-webkit-scrollbar-thumb:hover{ background:rgba(0,0,0,.28); }

/* Móvil */
@media (max-width:640px){
  .cs-btn{ min-height:46px; padding-right:40px; border-radius:10px; }
}

  .ex-form select.form-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg ...></svg>");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 1rem;
    padding-right: 2rem;
  }
  .ex-form select.form-select::-ms-expand { display: none; }