/* =============================
   IGUANA PUBLICIDAD – CSS UNIFICADO
   (pega esto en un archivo .css o dentro de un <style>)
   ============================= */

/* ---------- Variables ---------- */
:root {
  /* Colores / UI */
  --bg: #0b0b0f;
  --bg2: #0e1219;
  --card: #10131a;
  --muted: #b5c1c9;
  --hi: #a7ff1b; --hi2: #22d3ee; --hi3: #f0abfc; --hi4: #f59e0b;
  --radius: 18px;
  --shadow: 0 18px 44px rgba(0,0,0,.32);
  /* Espaciados */
  --space-1: 6px; --space-2: 10px; --space-3: 14px; --space-4: 18px;
  --space-5: clamp(24px,3.2vw,32px);
  --space-section: clamp(30px,4.5vw,48px);
  /* Navbar */
  --nav-h-desktop: 72px;  /* alto visible */
  --nav-h-mobile: 64px;
  /* Botones del menú-imagen */
  --nav-btn-h-desktop: 56px;
  --nav-btn-h-mobile: 48px;
  --nav-btn-scale: 1.22; /* 1.10–1.35 según gusto */
}

/* ---------- Reset mínimo ---------- */
*{ box-sizing:border-box }
html,body{ height:100%}
a{ color:inherit; text-decoration:none }
img{ max-width:100%; display:block }

/* ---------- Layout ---------- */
.container{ width:min(1100px,92%); margin-inline:auto }
section{ padding:var(--space-section) 0 }

/* ---------- Fondo del sitio ---------- */
body{
  background:
    linear-gradient(to right, rgba(0,0,0,.8) 0%, rgba(0,0,0,.5) 50%, rgba(0,0,0,.18) 80%, rgba(0,0,0,0) 50%),
    url("./assets/img/nav-bg-1920x240.png") center center/cover no-repeat fixed;
  background-color: var(--bg);
}
@media (min-width:2000px){
  body{ background-image:
    linear-gradient(to right, rgba(0,0,0,.88) 0%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.18) 80%, rgba(0,0,0,0) 100%),
    url("iguana-bg-4k.png"); }
}
@media (max-width:1024px){
  body{ background-attachment:scroll; background-position:center top; }
}

/* ---------- Header / Navbar ---------- */
header.glass{
  position:sticky; top:0; z-index:50;
  background:
    linear-gradient(to right,
      rgba(0,0,0,.78) 0%, rgba(0,0,0,.66) 40%, rgba(0,0,0,.46) 65%,
      rgba(0,0,0,.22) 82%, rgba(0,0,0,0) 100%),
    url('./assets/img/nav-bg-1920x240.png') right center/cover no-repeat;
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
@media (max-width:860px){
  header.glass{
    background:
      linear-gradient(to right, rgba(0,0,0,.75), rgba(0,0,0,.5) 60%, rgba(0,0,0,.12) 88%, rgba(0,0,0,0) 100%),
      url('./assets/img/nav-bg.png') right center/cover no-repeat;
  }
}
@media (max-width:540px){
  header.glass{ backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(0,0,0,.84); }
}

.nav{ display:flex; align-items:center; justify-content:space-between; padding:var(--space-3) 0; }
header.glass .nav{ min-height:var(--nav-h-desktop); padding-block:clamp(6px,.8vw,10px); }
@media (max-width:860px){ header.glass .nav{ min-height:var(--nav-h-mobile); } }

/* Marca con logo grande sin aumentar la altura del nav */
.brand{ position:relative; display:flex; align-items:center; gap:var(--space-3); padding-left:164px; }
.logo{ position:absolute; left:0; top:50%; transform:translateY(-50%); width:160px; height:160px; border-radius:12px; background:transparent; box-shadow:none; overflow:visible; }
.logo img{ width:100%; height:100%; object-fit:contain; }
@media (max-width:860px){ .brand{ padding-left:120px; } .logo{ width:110px; height:110px; } }

.brand-text{ display:flex; flex-direction:column }
.brand-title{ font-size:1.12rem; font-weight:800; letter-spacing:.4px }
.tag{ font-size:.78rem; color:var(--muted); margin-top:-2px }

/* Menú principal */
#menu{ display:block }
.main-menu{ display:flex; gap:var(--space-5); list-style:none; padding:0; margin:0 }
.main-menu a{ padding:8px 10px; border-radius:10px; color:#e8f2f2 }
.main-menu a:hover,.main-menu a.active{ background:rgba(255,255,255,.08) }

/* Menú de botones-imagen */
.main-menu.image-menu{ align-items:center; gap:clamp(18px,2.6vw,40px); }
.main-menu.image-menu li{ list-style:none; padding-inline:clamp(2px,.5vw,8px); }
.main-menu.image-menu a.nav-imgwrap{ height:var(--nav-btn-h-desktop); display:grid; place-items:center; overflow:visible; padding:0; border:none; background:transparent; border-radius:10px; transition:transform .2s ease, opacity .2s ease; }
.main-menu.image-menu a.nav-imgwrap:hover{ transform:translateY(-2px) scale(1.02) }
.main-menu.image-menu a.nav-imgwrap:active{ transform:translateY(0) scale(.98) }
.main-menu.image-menu img.nav-img{ height:var(--nav-btn-h-desktop); width:auto; display:block; transform:scale(var(--nav-btn-scale)); transform-origin:center; will-change:transform; }
.main-menu.image-menu a.nav-imgwrap:hover img.nav-img{ transform:scale(calc(var(--nav-btn-scale) + .06)); }
@media (max-width:860px){
  .main-menu.image-menu a.nav-imgwrap{ height:var(--nav-btn-h-mobile); }
  .main-menu.image-menu img.nav-img{ height:var(--nav-btn-h-mobile); transform:scale(1.18); }
}

/* Burger + menú móvil */
.burger{ display:none; background:transparent; border:0; gap:5px; padding:8px }
.burger span{ display:block; width:22px; height:2px; background:#e8f2f2; border-radius:2px }
@media (max-width:860px){
  .burger{ display:inline-flex }
  #menu{ position:fixed; inset:64px 12px auto 12px; background:#0b0f14; border:1px solid rgba(255,255,255,.08); border-radius:16px; box-shadow:var(--shadow); display:none }
  #menu.open{ display:block }
  #menu.open .image-menu{ align-items:center }
  .main-menu{ flex-direction:column; padding:var(--space-3) }
  .main-menu a{ padding:12px 14px }
}

/* ---------- Hero / Carrusel ---------- */
.hero-carousel{ position:relative; overflow:hidden; background:#000; isolation:isolate; padding:0 !important; margin:0 }
.hero-carousel::before{ content:""; display:none }
.hero-carousel .carousel-item{ height:clamp(380px,60vh,720px); min-height:420px }
@media (max-width:576px){ .hero-carousel .carousel-item{ height:clamp(300px,56vh,640px); min-height:380px } }

/* Imagen: cover en desktop, contain en móvil; con máscara degradada en desktop */
.hero-carousel .carousel-item img{ width:100%; height:100%;  display:block; filter:brightness(.82) saturate(.98); backface-visibility:hidden; -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 68%, rgba(0,0,0,.95) 74%, rgba(0,0,0,.7) 82%, rgba(0,0,0,.35) 91%, rgba(0,0,0,0) 99%); mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 68%, rgba(0,0,0,.95) 74%, rgba(0,0,0,.7) 82%, rgba(0,0,0,.35) 91%, rgba(0,0,0,0) 99%); background:#000 }
@media (max-width:768px){
  .hero-carousel .carousel-item img{ object-fit:contain; -webkit-mask-image:none; mask-image:none }
}

/* Transiciones Bootstrap del carrusel (suaves) */
#heroCarousel.carousel .carousel-item{ will-change:transform; transition:transform .58s cubic-bezier(.4,0,.2,1); opacity:1 !important }
#heroCarousel.carousel .carousel-item-next,#heroCarousel.carousel .carousel-item-prev{ position:absolute; top:0; width:100% }
#heroCarousel.carousel .carousel-item-next{ transform:translateX(100%) }
#heroCarousel.carousel .active.carousel-item-start{ transform:translateX(-100%) }
#heroCarousel.carousel .carousel-item-next.carousel-item-start{ transform:translateX(0) }
#heroCarousel.carousel .carousel-item-prev{ transform:translateX(-100%) }
#heroCarousel.carousel .active.carousel-item-end{ transform:translateX(100%) }
#heroCarousel.carousel .carousel-item-prev.carousel-item-end{ transform:translateX(0) }

/* Caption / indicadores / flechas */
.hero-carousel .carousel-caption{ bottom:2.2rem; z-index:12 }
@media (max-width:576px){ .hero-carousel .carousel-caption{ bottom:1rem } }
.caption-bubble{ width:clamp(280px,62vw,900px); margin:0 auto; padding:1.25rem 2rem 1.35rem; color:#fff; text-align:center; background:rgba(15,16,20,.55); border:1px solid rgba(255,255,255,.08); border-radius:1.1rem; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); box-shadow:0 16px 40px -12px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.02) }
.caption-bubble h2{ font-weight:800; letter-spacing:.2px; font-size:clamp(1.65rem,3.6vw,2.8rem); margin:0 0 .35rem; text-shadow:0 6px 22px rgba(0,0,0,.65) }
.caption-bubble p{ margin:0; font-size:clamp(.95rem,1.2vw,1.1rem); color:#e8edf3 }
.hero-carousel .carousel-indicators{ gap:10px; margin-bottom:1.1rem; z-index:14 }
.hero-carousel .carousel-indicators [data-bs-target]{ width:10px; height:10px; border-radius:50%; padding:0; margin:0 4px; border:none; background-color:rgba(255,255,255,.55); transition:transform .25s ease, background-color .25s ease }
.hero-carousel .carousel-indicators .active{ background-color:#fff; transform:scale(1.25) }
.carousel-control-prev,.carousel-control-next{ width:56px; height:56px; top:50%; transform:translateY(-50%); border-radius:50%; background:rgba(236,234,234,.35); opacity:1; transition:background .2s ease }
.carousel-control-prev:hover,.carousel-control-next:hover{ background:rgba(0,0,0,.55) }
.carousel-control-prev-icon,.carousel-control-next-icon{ filter:invert(1); width:24px; height:24px; background-size:100% 100% }

/* ---------- Grids / Cards / Servicios ---------- */
.section-title{ font-size:1.8rem; margin:0 0 var(--space-2); font-weight:800 }
.section-sub{ color:#cfe1d0; margin:0 0 var(--space-4) }
.grid{ display:grid; gap:var(--space-3) }
.grid.cols-3{ grid-template-columns:repeat(3,1fr) }
.grid.cols-4{ grid-template-columns:repeat(4,1fr) }
@media (max-width:980px){ .grid.cols-3,.grid.cols-4{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px){ .grid.cols-3,.grid.cols-4{ grid-template-columns:1fr } }
.card{ background:linear-gradient(180deg,#10131a,#0d1117); border:1px solid rgba(255,255,255,.06); padding:var(--space-4); border-radius:var(--radius); box-shadow:var(--shadow) }
.svc{ display:flex; gap:var(--space-3); align-items:flex-start }
.svc i{ flex:0 0 40px; height:40px; border-radius:12px; display:grid; place-items:center; background:conic-gradient(from 220deg, #a7ff1b33, #22d3ee33, #f0abfc33, #f59e0b33, #a7ff1b33); border:1px solid rgba(255,255,255,.08) }

/* ---------- Footer ---------- */
footer{ padding:22px 0 30px; color:#cddbe2; border-top:1px solid rgba(255,255,255,.06); background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.25)) }
.foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3) }
.social-icons{ display:flex; gap:var(--space-3); align-items:center }
@media (max-width:720px){ .foot{ flex-direction:column; text-align:center } .social-icons{ justify-content:center } }

/* ---------- WhatsApp Float ---------- */
.whatsapp-container{ position:fixed; bottom:20px; right:20px; z-index:1000 }
.whatsapp-float{ position:relative; width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:transform .2s }
.whatsapp-float:hover{ transform:scale(1.1) }
.whatsapp-icon{ width:60px; height:60px }
.whatsapp-message{ position:absolute; top:50%; right:110%; transform:translateX(20px) translateY(-50%); background:#fff; padding:5px 5px; border-radius:8px; opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; white-space:nowrap }
.whatsapp-float:hover .whatsapp-message{ opacity:1; pointer-events:auto; transform:translateX(0) translateY(-50%) }
.whatsapp-message p{ margin:0; color:#333; font-size:14px }
.whatsapp-message p:last-child{ font-weight:bold }

/* ---------- Contacto / Mapa ---------- */
.contact-info{ margin:20px 0; padding:0 15px }
.contact-info h5{ margin:0; font-weight:500; font-size:clamp(1rem,2.6vw,1.25rem); display:flex; align-items:center; gap:clamp(10px,2vw,18px); flex-wrap:wrap }
.contact-info i{ color:var(--hi); font-size:1.25rem }
.separator{ opacity:.55 }
@media (max-width:560px){ .separator{ display:none } }

.map-wrap{ position:relative; width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden; box-shadow:0 18px 44px rgba(0,0,0,.28) }
.map-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }





/* === Responsivo global y anti-desborde === */
html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }


body { max-width: 100%; overflow-x: hidden; }


/* Imágenes y medios fluidos */
img, svg, video, canvas, audio, iframe { display: block; max-width: 100%; height: auto; }


/* Tipografías y espacios fluidos */
:root {
--step-1: clamp(0.95rem, 0.6vw + 0.8rem, 1.05rem);
--step-2: clamp(1.10rem, 1vw + 0.9rem, 1.25rem);
--step-3: clamp(1.35rem, 1.4vw + 1rem, 1.6rem);
}
body { font-size: var(--step-1); }
h1, .h1 { font-size: var(--step-3); }
h2, .h2 { font-size: var(--step-2); }


/* Contenedores que nunca se desbordan */
.container,
.container-fluid { width: min(100%, 1200px); margin-inline: auto; padding-inline: clamp(12px, 3vw, 24px); }


/* Utilidades rápidas */
.hide-overflow { overflow: hidden; }
.fit-cover { width: 100%; aspect-ratio: var(--ar, 16/9); object-fit: cover; }
.obj-left { object-position: left center; }
.obj-right { object-position: right center; }


/* Grids responsivos fiables */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(12px, 2vw, 20px); }
@media (max-width: 992px) { .grid-2 { grid-template-columns: 1fr; } }


/* Tarjetas seguras */
.card-soft { background: linear-gradient(180deg, #0f131a, #0b0f14); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: clamp(12px, 2vw, 18px); box-shadow: 0 18px 44px rgba(0,0,0,.28); }
.card-soft:hover{ transform: translateY(-2px); transition: .2s; }