/* ================= Global Overflow Fix ================= */
html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  max-width: 100vw;
  position: relative;
}

* {
  max-width: 100%;
}

/* ================= Brand & Tokens ================= */
:root{
  --brand-blue: #035ca9;   /* primario */
  --brand-blue-dark: #034b8b;
  --brand-red:  #e93736;   /* acento */
  --black:      #000000;
  --white:      #ffffff;

  --text-primary: #111111;
  --text-secondary:#6b7280;
  --bg-soft:    #f7f7f7;

  --success: #10b981;
  --warning: #f59e0b;

  --shadow-sm: 0 2px 10px rgba(0,0,0,.06);
  --shadow-md: 0 6px 18px rgba(0,0,0,.08);
  --shadow-lg: 0 12px 30px rgba(0,0,0,.10);
  --transition: all .3s ease;
}

/* ================= Base ================= */
*{ box-sizing:border-box; }
body{
  font-family: 'Lato', system-ui, -apple-system, sans-serif;
  color: var(--text-primary);
  background: var(--bg-soft);
  line-height: 1.6;
}
h1,h2,h3,h4,h5,h6{
  font-family: "Bell MT","Merriweather",serif;
  font-weight: 900;
  color: var(--black);
}

/* ================= Buttons ================= */
.btn-primary{
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  font-weight: 600;
  padding: .6rem 1.5rem;
  transition: var(--transition);
}
.btn-primary:hover{
  background: var(--brand-blue-dark);
  border-color: var(--brand-blue-dark);
  transform: translateY(-2px);
}
.btn-outline-primary{
  color: var(--brand-blue);
  border-color: var(--brand-blue);
  font-weight: 600;
}
.btn-outline-primary:hover{
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
}

/* ================= Navbar ================= */
.navbar{ box-shadow: var(--shadow-sm); transition: var(--transition); }
.nav-link{ font-weight:500; color:var(--text-primary); transition:var(--transition); }
.nav-link:hover,.nav-link.active{ color: var(--brand-blue); }
.brand-logo{ height:45px; width:auto; display:block; }
.brand-claim{ font-size:.9rem; }

/* iOS Offcanvas Fix mejorado */
.offcanvas .nav-link,
.offcanvas .btn {
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  cursor: pointer !important;
}

/* Mejorar área táctil en móviles */
@media (max-width: 768px) {
  .offcanvas .nav-item {
    margin: 5px 0;
  }
  
  .offcanvas .nav-link {
    padding: 15px 20px !important;
    font-size: 1.1rem;
  }
}

/* ================= Hero ================= */
.hero-section{
  background: linear-gradient(135deg, var(--brand-blue) 0%, #063d78 60%);
  position: relative; 
  overflow:hidden; 
  padding: 4rem 0 3rem;
  min-height: 85vh; /* 85% de la pantalla, deja entrever que hay más contenido */
}

/* Y en móviles */
@media (max-width: 768px) {
  .hero-section {
    padding: 3rem 0 2rem; /* Reducido de 4rem a 3rem arriba */
  }
}
.hero-section::before{
  content:""; 
  position:absolute; 
  inset:0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center/auto;
  opacity:.1;
}
.hero-content{ position:relative; z-index:2; }
.hero-badge{
  background: rgba(255,255,255,.15);
  -webkit-backdrop-filter: blur(10px); 
  backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,.2);
  color:#fff; 
  font-weight:600; 
  padding:.5rem 1rem; 
  border-radius:999px; 
  display:inline-block; 
  margin-bottom:1.5rem;
}
.hero-title{ 
  font-size:3.5rem; 
  font-weight:900; 
  color:#fff; 
  margin-bottom:1.5rem; 
  text-shadow:0 2px 4px rgba(0,0,0,.1); 
}
.hero-subtitle{ 
  font-size:1.25rem; 
  color: rgba(255,255,255,.95); 
  margin-bottom:2rem; 
}
.accent{ color: var(--brand-red); }

.hero-stats{ 
  display:flex; 
  gap:3rem; 
  margin-top:3rem; 
  flex-wrap:wrap; 
}
.stat-item{ 
  text-align:center; 
  color:#fff; 
  opacity:0; 
  transform:translateY(12px); 
  transition: all .6s ease; 
}
.stat-item.visible{ 
  opacity:1; 
  transform:translateY(0); 
}
.stat-number{ 
  font-size:2.5rem; 
  font-weight:900; 
  display:block; 
  text-shadow:0 2px 4px rgba(0,0,0,.1); 
}
.stat-label{ 
  font-size:.9rem; 
  opacity:.9; 
  text-transform:uppercase; 
  letter-spacing:1px; 
}

.hero-image-wrapper{ 
  position:relative; 
  transform:perspective(1000px) rotateY(-5deg); 
  transition:transform .5s ease; 
}
.hero-image-wrapper:hover{ 
  transform:perspective(1000px) rotateY(0deg); 
}
.hero-image{ 
  border-radius:1rem; 
  box-shadow:0 20px 60px rgba(0,0,0,.3); 
  width:100%; 
  height:auto; 
}

/* ================= Floating Cards ================= */
.floating-card{
  position:absolute; 
  background:#fff; 
  border-radius:.75rem; 
  padding:1rem; 
  box-shadow:0 10px 30px rgba(0,0,0,.2); 
  animation:float 3s ease-in-out infinite;
  z-index: 3;
}
.floating-card-1{ 
  top:20%; 
  right:-20px; 
  animation-delay:0s; 
}
.floating-card-2{ 
  bottom:20%; 
  left:-20px; 
  animation-delay:1.5s; 
}
@keyframes float{ 
  0%,100%{ transform:translateY(0); } 
  50%{ transform:translateY(-10px); } 
}

/* Tablets */
@media (max-width: 992px) and (min-width: 769px) {
  .floating-card-1 { right: 10px; }
  .floating-card-2 { left: 10px; }
}

/* Móviles - Imagen centrada y grande */
@media (max-width: 768px) {
  .hero-title{ font-size:2.5rem; }
  
  /* Centrar la columna de la imagen */
  .col-lg-6:has(.hero-image-wrapper) {
    display: flex;
    justify-content: center;
  }
  
  .hero-image-wrapper {
    position: relative;
    transform: none;
    margin: 2rem auto; /* Auto para centrar */
    padding: 0;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  
  .hero-image {
    width: 100%;
    height: auto;
    max-height: 450px;
    object-fit: cover;
    object-position: center;
    border-radius: 0.75rem;
    box-shadow: 0 15px 40px rgba(0,0,0,.2);
  }
  
  .floating-card {
    padding: 0.7rem;
    animation: float 4s ease-in-out infinite;
  }
  
  .floating-card-1 { 
    top: 15px;
    right: 15px;
    max-width: 140px;
  }
  
  .floating-card-2 { 
    bottom: 15px;
    left: 15px;
    max-width: 140px;
  }
  
  .floating-card small {
    font-size: 0.75rem;
  }
  
  .floating-card strong {
    font-size: 0.85rem;
  }
  
  .floating-card .bi {
    font-size: 1.2rem !important;
  }
  
  /* Stats centradas */
  .hero-stats {
    justify-content: space-around;
    gap: 1.5rem;
    margin-top: 2rem;
  }
}

/* Móviles - Imagen grande y REALMENTE centrada */
@media (max-width: 768px) {
  .hero-title{ font-size:2.5rem; }
  
  /* Forzar el contenedor a full width */
  .row {
    margin-left: 0;
    margin-right: 0;
  }
  
  .col-lg-6 {
    padding-left: 0;
    padding-right: 0;
  }
  
  .hero-image-wrapper {
    position: relative;
    transform: none;
    margin: 2rem 0;
    padding: 0 15px; /* Padding para las tarjetas flotantes */
    width: 100%;
  }
  
  .hero-image {
    width: calc(100vw - 30px); /* Full width menos padding */
    height: auto;
    min-height: 350px;
    max-height: 500px;
    object-fit: cover;
    object-position: center;
    border-radius: 1rem;
    box-shadow: 0 15px 40px rgba(0,0,0,.2);
    display: block;
    margin: 0 auto; /* Centrar horizontalmente */
  }
  
  .floating-card {
    padding: 0.7rem;
    animation: float 4s ease-in-out infinite;
  }
  
  .floating-card-1 { 
    top: 15px;
    right: 25px; /* Ajustado para el padding */
    max-width: 140px;
  }
  
  .floating-card-2 { 
    bottom: 15px;
    left: 25px; /* Ajustado para el padding */
    max-width: 140px;
  }
  
  .floating-card small {
    font-size: 0.75rem;
  }
  
  .floating-card strong {
    font-size: 0.85rem;
  }
  
  .floating-card .bi {
    font-size: 1.2rem !important;
  }
  
  /* Stats centradas */
  .hero-stats {
    justify-content: space-around;
    gap: 1.5rem;
    margin-top: 2rem;
  }
}

/* Móviles pequeños */
@media (max-width: 500px) {
  .hero-image {
    min-height: 300px;
    max-height: 450px;
  }
  
  .floating-card {
    padding: 0.5rem;
    font-size: 0.75rem;
  }
  
  .floating-card-1,
  .floating-card-2 {
    max-width: 120px;
  }
}

/* Fix overflow móviles */
@media (max-width: 768px) {
  .hero-section {
    overflow: hidden;
    position: relative;
  }
  
  section {
    overflow-x: hidden;
  }
  
  .container,
  .container-fluid {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* Optimización iOS Safari */
@supports (-webkit-touch-callout: none) {
  .floating-card {
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
  }
}

/* ================= Service Cards ================= */
.service-card{
  position:relative; 
  overflow:hidden; 
  border-radius:1rem; 
  min-height:280px;
  background:#fff; 
  box-shadow:var(--shadow-md); 
  transition:transform .3s ease, box-shadow .3s ease; 
  cursor:pointer;
}
.service-card:hover{ 
  transform:translateY(-8px); 
  box-shadow:var(--shadow-lg); 
}
.service-icon{
  width:60px; 
  height:60px; 
  border-radius:1rem; 
  display:flex; 
  align-items:center; 
  justify-content:center;
  background: linear-gradient(135deg, var(--brand-blue), #2a4eb8);
  color:#fff; 
  font-size:1.5rem; 
  margin-bottom:1rem;
}
.service-content{ 
  position:relative; 
  z-index:2; 
  padding:2rem; 
  height:100%; 
  display:flex; 
  flex-direction:column; 
}
.service-content h5{ 
  font-size:1.25rem; 
  font-weight:800; 
  margin-bottom:.75rem; 
  color:var(--brand-blue); 
}
.service-content p{ 
  color:var(--text-secondary); 
  margin-bottom:1rem; 
  flex-grow:1; 
}
.service-link{ 
  color:var(--brand-blue); 
  font-weight:600; 
  text-decoration:none; 
  display:inline-flex; 
  align-items:center; 
  gap:.5rem; 
  transition:gap .3s ease; 
}
.service-link:hover{ gap:1rem; }
.service-img-overlay{
  position:absolute; 
  inset:0; 
  background:linear-gradient(135deg, rgba(3,92,169,0.9), rgba(233,55,54,0.9));
  opacity:0; 
  transition:opacity .3s ease; 
  z-index:1;
}
.service-card:hover .service-img-overlay{ opacity:.1; }

/* ================= Process ================= */
.process-step{
  text-align:center; 
  padding:2rem; 
  background:#fff; 
  border-radius:1rem; 
  height:100%; 
  transition:var(--transition); 
  border:2px solid transparent;
}
.process-step:hover{ 
  border-color:var(--brand-blue); 
  transform:translateY(-5px); 
  box-shadow:var(--shadow-md); 
}
.process-number{
  width:50px; 
  height:50px; 
  background:linear-gradient(135deg, var(--brand-blue), #2a4eb8);
  color:#fff; 
  border-radius:50%; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  font-weight:900; 
  font-size:1.25rem; 
  margin:0 auto 1rem;
}

/* ================= Testimonios ================= */
.testimonial-card{ 
  background:#fff; 
  padding:2.5rem; 
  border-radius:1rem; 
  box-shadow:var(--shadow-md); 
  position:relative; 
}
.testimonial-card::before{
  content:'"'; 
  position:absolute; 
  top:1rem; 
  left:2rem; 
  font-size:4rem; 
  color:var(--brand-blue); 
  opacity:.1; 
  font-family:serif;
}
.testimonial-text{ 
  font-size:1.125rem; 
  font-style:italic; 
  margin-bottom:1.5rem; 
  color:var(--text-primary); 
}
.testimonial-author{ 
  display:flex; 
  align-items:center; 
  gap:1rem; 
}
.author-avatar{
  width:50px; 
  height:50px; 
  border-radius:50%;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-red));
  display:flex; 
  align-items:center; 
  justify-content:center; 
  color:#fff; 
  font-weight:700;
}
.max-800{ max-width:800px; }

/* ================= CTA ================= */
.cta-section{
  background: linear-gradient(135deg, var(--brand-blue), #243b6e);
  color:#fff; 
  border-radius:1.5rem; 
  padding:3rem; 
  text-align:center; 
  position:relative; 
  overflow:hidden;
}
.cta-section::before{
  content:''; 
  position:absolute; 
  top:-50%; 
  right:-50%; 
  width:200%; 
  height:200%;
  background: radial-gradient(circle, rgba(255,255,255,.12) 0%, transparent 70%); 
  animation: pulse 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes pulse{ 
  0%,100%{ transform:scale(1);} 
  50%{ transform:scale(1.1);} 
}
.cta-section .btn {
  position: relative;
  z-index: 10;
}

/* ================= Footer ================= */
footer{ 
  background:#000; 
  color:#cbd5e1; 
  padding:3rem 0 2rem; 
}
footer a{ 
  color:#cbd5e1; 
  text-decoration:none; 
  transition:var(--transition); 
}
footer a:hover{ color:#fff; }
.logo-badge{
  display:inline-flex; 
  align-items:center; 
  justify-content:center;
  width:40px; 
  height:40px; 
  border-radius:.5rem; 
  background:#fff; 
  color:var(--brand-blue);
}

/* ================= Floating Buttons ================= */
.whatsapp-btn{
  position:fixed; 
  right:20px; 
  bottom:20px; 
  width:60px; 
  height:60px; 
  border-radius:50%;
  background:#25D366; 
  color:#fff; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  font-size:1.75rem;
  box-shadow:0 10px 24px rgba(37,211,102,.3); 
  z-index:1040; 
  transition:var(--transition); 
  text-decoration:none;
}
.whatsapp-btn:hover{ 
  transform:scale(1.1); 
  color:#fff; 
}

.back-to-top{
  position:fixed; 
  right:20px; 
  bottom:90px; 
  width:45px; 
  height:45px; 
  border-radius:50%;
  background:var(--brand-blue); 
  color:#fff; 
  display:none; 
  align-items:center; 
  justify-content:center;
  z-index:1040; 
  border:none; 
  box-shadow:var(--shadow-md); 
  transition:var(--transition);
}
.back-to-top:hover{ 
  background:var(--brand-blue-dark); 
  transform:translateY(-3px); 
}

/* ================= Misc ================= */
.modal-big-icon{ font-size:4rem; }