/* ==================================================================
   Preservación de Cadera — site.css (FINAL limpio)
   - Fondo general más elegante (evita blancazo)
   - Banda "Sobre nosotros" con tinte marino y menor separación
   - Paneles elegantes (#f2f4f8) sin recuadro duro
   - Navbar, Hero, botones premium
   - Utilidades y fixes
   Fecha: 2026-01-19
================================================================== */

:root{
  --brand:#0a2240;
  --brand-2:#0b2d5a;
  --brand-primary:#0b5ed7;
  --brand-grad-start:#0b5ed7;
  --brand-grad-end:#093a86;
  --brand-glow:rgba(11,94,215,.35);
  --text:#0f172a;
  --muted:#475569;
  --line:#e5e7eb;
  --bg-soft:#f6f8fb;
  --footer-navy:#0b1b3a;
  --footer-text:#f1f5f9;
}

/* ===== Base ===== */
html, body { height:100%; }
html { scroll-behavior:smooth; }
body{
  min-height:100vh; display:flex; flex-direction:column;
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color:var(--text); background:#f6f7fb; /* blanco más elegante */
}
main, .page-content, .container.py-4 { flex:1 0 auto; }
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--brand-primary); text-decoration:none; }
a:hover{ color:#094db0; text-decoration:underline; }
:focus{ outline:3px solid rgba(11,94,215,.35); outline-offset:2px; }

/* ===== Topbar ===== */
.topbar-wrap{ background:#fff; border-bottom:1px solid var(--line); }
.topbar-contact{ color:#6b7280 !important; }
.topbar-contact:hover{ color:#4b5563 !important; }
.topbar-social { color:#6b7280 !important; }
.topbar-social:hover { color:#4b5563 !important; }
.topbar-contact i, .topbar-social i { color:#6b7280 !important; }
.topbar-sep{ color:#6b7280 !important; }

/* ===== Navbar blanca ===== */
.navbar{ background:#fff !important; border-bottom:1px solid #e9eef5; box-shadow:0 6px 18px rgba(2,25,55,.06) }
.navbar.shadow-sm { box-shadow:0 .125rem .25rem rgba(0,0,0,.075)!important }
.navbar-brand img{ height:64px; width:auto }
@media (max-width:575.98px){ .navbar-brand img{ height:52px } }
.navbar .nav-link{ color:#0f172a!important; font-weight:500; padding:.6rem 1rem; border-radius:10px; transition:background .2s,color .2s }
.navbar .nav-link:hover{ color:#0f172a!important; background:var(--bg-soft); text-decoration:none }
.navbar .nav-link.active{ color:var(--brand-primary)!important; font-weight:700; border-bottom:2px solid var(--brand-primary) }
.navbar-light .navbar-toggler{ border-color:rgba(0,0,0,.1) }
.navbar-light .navbar-toggler-icon{ background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,0,0,0.85)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") }

/* ===== HERO ===== */
.hero{ position:relative; padding:140px 0 100px; color:#fff; background:
  linear-gradient(180deg, rgba(10,34,64,.60), rgba(10,34,64,.45)),
  url('../img/hero.jpg') center/cover no-repeat!important }
.hero .hero-content{ max-width:920px; margin:0 auto; padding:0 16px; text-align:center }
.hero h1{ letter-spacing:.2px; text-shadow:0 2px 12px rgba(0,0,0,.25); margin-bottom:.75rem }
.hero p{ color:#e8eef7; margin-bottom:1.25rem }
.hero .btn-primary, .hero .btn-padre{ box-shadow:0 10px 24px rgba(11,94,215,.35) }
@media (max-width:991.98px){ .hero{ padding:110px 0 80px } }
@media (max-width:575.98px){ .hero{ padding:88px 0 64px } }

/* ===== Sobre nosotros ===== */
.section-title{ font-size:2rem; font-weight:800; color:#0a2240; margin-bottom:1rem }
.section-subtitle{ font-size:1.15rem; color:#64748b; margin-bottom:1.5rem }
.about-list li{ display:flex; align-items:flex-start; gap:.75rem; font-size:1.05rem; padding:.35rem 0 }
.about-list i{ color:#0b5ed7; font-size:1.25rem; margin-top:2px }

/* Marco premium about.jpg (panel elegante) */
.about-img-frame{
  border-radius:16px; padding:12px;
  background:#f2f4f8; /* tono final */
  border:1px solid rgba(200,205,215,.40);
  box-shadow:0 12px 26px rgba(15,25,40,.10);
  position:relative;
}
.about-img-frame::after{
  content:""; position:absolute; inset:0; border-radius:18px; padding:1px;
  background:linear-gradient(135deg, #0b5ed7aa, #093a86aa);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}

/* ===== Botones ===== */
.btn-primary{ background:linear-gradient(135deg,#0b5ed7,#093a86); border-color:#0b5ed7; font-weight:700; border-radius:12px; padding:.75rem 1.25rem; box-shadow:0 10px 24px rgba(11,94,215,.35); transition:transform .15s, box-shadow .15s, filter .2s }
.btn-primary:hover{ transform:translateY(-2px); filter:brightness(1.02); box-shadow:0 14px 30px rgba(11,94,215,.45) }
.btn-padre{ position:relative; border:none; color:#fff; padding:.75rem 1.25rem; border-radius:12px; font-weight:700; letter-spacing:.2px; background:linear-gradient(135deg,var(--brand-grad-start),var(--brand-grad-end)); box-shadow:0 10px 24px var(--brand-glow); transition:transform .15s, box-shadow .15s, filter .2s }
.btn-padre:hover{ transform:translateY(-2px); filter:brightness(1.02); box-shadow:0 14px 30px var(--brand-glow) }
.btn-padre-outline{ color:var(--brand-primary); background:#fff; border:2px solid var(--brand-primary); padding:.55rem 1rem; border-radius:12px; font-weight:600; transition:all .15s }
.btn-padre-outline:hover{ color:#fff; background:var(--brand-primary); box-shadow:0 8px 20px var(--brand-glow) }
.table .btn-padre-sm{ padding:.35rem .6rem; border-radius:10px; font-weight:600 }
.btn-edit{ background:linear-gradient(135deg,#0b5ed7,#093a86); color:#fff }
.btn-export{ background:linear-gradient(135deg,#12a06a,#0b7a58); color:#fff }
.btn-info{ background:linear-gradient(135deg,#6b7280,#374151); color:#fff }
.icon-only{ width:34px; height:34px; padding:.25rem; display:inline-flex; align-items:center; justify-content:center }
.table .icon-only{ width:32px; height:32px; border-radius:8px }

/* ===== Ubicación (panel elegante) ===== */
.map-embed{ max-width:760px; margin:0 auto; border-radius:16px; overflow:hidden; box-shadow:0 12px 28px rgba(2,25,55,.10) }
.location-box{
  background:#f2f4f8; /* tono final */
  border:1px solid rgba(200,205,215,.40);
  box-shadow:0 12px 26px rgba(15,25,40,.10);
  border-radius:16px; max-width:860px; margin:0 auto; padding:40px;
}
.location-title{ font-size:1.8rem; font-weight:800; color:#0a2240; margin-bottom:.75rem }
.location-subtitle{ color:#4b5563; font-size:1.1rem; margin-bottom:1.8rem }
.location-map{ border-radius:18px; overflow:hidden; box-shadow:0 10px 26px rgba(0,0,0,.10); border:0 }
.location-map iframe{ height:380px }

/* ===== Back to top ===== */
.back-to-top{ position:fixed; right:20px; bottom:20px; z-index:1030; display:none }
.back-to-top.btn.btn-lg.btn-primary.btn-lg-square{ width:48px; height:48px; border-radius:10px; padding:0; display:inline-flex; align-items:center; justify-content:center; background:#fff; color:var(--brand-primary); border:1px solid var(--line); box-shadow:0 10px 24px rgba(0,0,0,.08) }
.back-to-top.btn.btn-lg.btn-primary.btn-lg-square:hover{ background:#f3f6ff }

/* ===== Footer ===== */
footer{ background:linear-gradient(180deg,#0b1b3a,#0a1833); border-top:1px solid rgba(255,255,255,.06) }
footer p, footer a{ color:#dee6f5 }
footer a:hover{ color:#ffffff; text-decoration:underline }

/* ===== Utilidades ===== */
.hr{ height:1px; background:linear-gradient(90deg,transparent, var(--line), transparent); border:0; margin:24px 0 }
.rounded-12{ border-radius:12px }
.rounded-16{ border-radius:16px }
.bg-soft{ background:var(--bg-soft) }
.text-muted{ color:var(--muted)!important }

/* ===== Capas / márgenes / anclas ===== */
.hero{ z-index:0 }
.section{ position:relative; z-index:1; background:#fff; padding:64px 0 }
.section > *:first-child{ margin-top:0; padding-top:0.01px }
.section::before{ content:""; position:absolute; left:0; right:0; top:-24px; height:24px; background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,0)); opacity:.08; pointer-events:none }
[id]{ scroll-margin-top:96px }
@media (max-width:575.98px){ [id]{ scroll-margin-top:78px } }

/* ===== Banda desde "Sobre nosotros" (tinte marino + menos separación) ===== */
.section-bg-soft{ background:#e4e9f1; padding-top:60px; padding-bottom:60px }
#sobre.section-bg-soft{ padding-bottom:30px }
.section-bg-soft + .section-bg-soft{ padding-top:30px }
.section-bg-soft .section-title{ color:#0a2240 }
.section-bg-soft .section-subtitle{ color:#465266 }
.section-bg-soft .text-muted{ color:#5a6675!important }

/* ===== Responsive extra ===== */
@media (max-width: 991.98px){ .navbar .nav-link{ padding:.55rem .8rem } }
@media (max-width: 575.98px){ .footer-wrapper{ padding-top:1.5rem; padding-bottom:1.5rem } }



/* === PANEL ELEGANTE PARA SOBRE NOSOTROS === */
.about-img-frame,
.section .row {
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%) !important;
  border: 1px solid rgba(180,190,205,0.35) !important;
  box-shadow: 0 22px 48px rgba(15,25,40,.10) !important;
  border-radius: 18px !important;
  padding: 28px !important;
}

/* Marco suave del about */
.about-img-frame {
  padding: 16px !important;
  background: rgba(255,255,255,0.65) !important;
}

/* Quitar la sensación de caja dentro del bloque */
.section-bg-soft .section {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Reducir aún más la separación para que el panel respire mejor */
#sobre.section-bg-soft { padding-bottom: 18px !important; }
.section-bg-soft + .section-bg-soft { padding-top: 24px !important; }


/* ======== QUITAR ESPACIOS INNECESARIOS ======== */

/* Reduce la altura global entre secciones */
.section {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

/* Banda azul-gris más compacta */
.section-bg-soft {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

/* “Sobre nosotros” aún más cerca del siguiente bloque */
#sobre.section-bg-soft {
  padding-bottom: 24px !important; /* estaba en 30 / 48 */
}

/* “¿Dónde estamos?” pegarlo más al bloque anterior */
.section-bg-soft + .section-bg-soft {
  padding-top: 24px !important;
}

/* Contenedor interno demasiado grande → ajustarlo */
.container.section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Bajar espacio debajo del Hero */
.hero {
  padding-bottom: 70px !important; /* antes era 100px */
}

/* Imagen del ABOUT: quitar espacio extra alrededor */
.about-img-frame {
  margin-bottom: 12px !important;
}

/* Quitar margen extra entre texto y la lista */
.about-list {
  margin-top: 12px !important;
}

/* Tarjeta de ubicación: compactar */
.location-box {
  padding: 28px !important; /* antes 40px */
  margin-top: 10px !important;
}
.location-map iframe {
  height: 360px !important; /* antes 380/420 */
}


/* ===== FIX DEFINITIVO PARA QUE EL TEXTO NO SE EMPALME ===== */
.about-hero {
  padding-top: 150px !important;   /* antes 130px – sube el contenido */
  padding-bottom: 150px !important; /* antes 110px – agrega base de aire */
}

.about-hero h1 {
  margin-bottom: 22px !important;   /* separación real entre título y párrafo */
}

.about-hero p {
  margin-top: 0 !important;         /* evita salto excesivo */
  padding-top: 8px !important;      /* espacio justo */
}


@media (max-width: 768px) {
  .about-hero {
    padding-top: 120px !important;
    padding-bottom: 130px !important;
  }
  .about-hero h1 {
    font-size: 1.9rem !important;
  }
  .about-hero p {
    font-size: 1rem !important;
    line-height: 1.45 !important;
  }
}


/* Mapa más compacto en Home */
.location-map-wrap iframe{
  display: block;
  width: 100%;
  height: 320px; /* 👈 compacto en desktop */
}

@media (max-width: 991.98px){
  .location-map-wrap iframe{
    height: 260px; /* 👈 compacto en móvil/tablet */
  }
}

.location-badges li{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:8px;
  color:#374151;
}
.location-badges i{
  color:#1d4ed8;
}

.btn-whatsapp{
  background:#25D366;
  border-color:#25D366;
  color:#fff;
  font-weight:500;
}
.btn-whatsapp:hover{
  background:#1ebe5d;
  border-color:#1ebe5d;
  color:#fff;
}
.navbar .btn{
  border-radius:999px;
  padding:.45rem .9rem;
}