:root {
  --color1: #ec940c;
  --color2: #f8c980;
  --color3: #804105;
  --color4: #977448;
  --color5: #915b07;
}

/* Base */
body { font-family: 'Segoe UI', sans-serif; background-color: #fff8f0; color: var(--color3); }
.navbar-brand img { height: 50px; width: auto; }

/* ---------- HERO (nuevo slider) ---------- */
/* Altura real del navbar (ajusta si cambia) */
.hero-section { --nav-h: 72px; }

/* Quita padding global de <section> SOLO en el hero (evita banda gris) */
.hero-section { padding: 0 !important; padding-top: var(--nav-h) !important; }

/* Ocupa todo el viewport visible (móvil/desktop) y recorta desbordes */
.hero-section{
  min-height: calc(100svh - var(--nav-h));
  position: relative;
  overflow: hidden;
}
@supports not (height: 100svh) {
  .hero-section{ min-height: calc(100vh - var(--nav-h)); }
}

/* El carrusel y sus hijos heredan la altura del hero */
#heroCarousel,
#heroCarousel .carousel-inner,
#heroCarousel .carousel-item{ height: 100%; }

/* Neutraliza el min-height global SOLO dentro del hero */
#heroCarousel .carousel-item{ min-height: 0 !important; }

/* Imágenes del slider: llenan, recorte centrado, sin deformarse */
.hero-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Degradado para legibilidad del texto */
.hero-gradient{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.7) 100%);
  z-index: 1; pointer-events: none;
}

/* Overlay de contenido y logo */
.hero-overlay{ position: absolute; inset: 0; z-index: 2; }
.hero-logo-end{
  position: absolute; right: 1rem; top: calc(var(--nav-h) + .5rem);
  width: 88px; height: 88px; object-fit: contain; z-index: 3;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.35));
}

/* Texto del hero legible en cualquier fondo */
.hero-title{
  color:#fff; text-shadow:0 3px 14px rgba(0,0,0,.55);
  font-size: clamp(2rem, 4vw + 1rem, 3.5rem);
}
.hero-subtitle{
  color: rgba(255,255,255,.92);
  font-size: clamp(1rem, 1.2vw + .8rem, 1.35rem);
  text-shadow:0 2px 8px rgba(0,0,0,.5);
}

/* Indicadores visibles sobre el degradado */
#hero .carousel-indicators [data-bs-target]{
  width:10px; height:10px; border-radius:50%; background:#fff; opacity:.7;
}
#hero .carousel-indicators .active{ opacity:1; }

/* ---------- Hero legacy (si no lo usas, puedes borrar esta sección) ---------- */
.hero {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
              url("../assets/imagenes/babb.jpg") center/cover no-repeat;
  color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
  padding: 100px 20px; text-align: center;
  opacity: 0; transform: translateY(20px);
  animation: fadeInUp 1.2s ease-out forwards;
}
@keyframes fadeInUp { to { opacity:1; transform: translateY(0);} }
.hero h1, .hero p, .hero a{ animation: fadeIn 1s ease-out forwards; opacity:0; }
.hero h1{ animation-delay:.3s; } .hero p{ animation-delay:.6s; } .hero a{ animation-delay:.9s; }
@keyframes fadeIn { to { opacity:1; } }

/* ---------- Botones ---------- */
.btn-warning { background-color: var(--color1); border-color: var(--color1); }
.btn-warning:hover { background-color: var(--color5); border-color: var(--color5); }
.btn-success { background-color: var(--color3); border-color: var(--color3); }
.btn-success:hover { background-color: var(--color5); border-color: var(--color5); }

/* ---------- Productos ---------- */
.product-card { border: 1px solid var(--color2); }
.product-card img { max-height: 200px; object-fit: cover; }
.card-title { color: var(--color3); }

/* ---------- Carousel genérico (mantén tu min-height; el hero ya lo anula) ---------- */
.carousel-item { min-height: 150px; }

/* ---------- WhatsApp flotante ---------- */
.whatsapp-float {
  position: fixed; width: auto; padding: 10px 16px; background-color: #25d366; color: white;
  border-radius: 50px; text-decoration: none; font-size: 16px; font-weight: bold;
  display: flex; align-items: center; gap: 8px; bottom: 20px; right: 20px; z-index: 999;
  box-shadow: 0 2px 6px rgba(0,0,0,.3); transition: all .3s ease;
}
.whatsapp-float i { font-size: 22px; }
.whatsapp-float:hover { background-color:#1ebe5d; transform: scale(1.05); }

/* ---------- Secciones ---------- */
section { padding-top: 60px; padding-bottom: 60px; }
.bg-light { background-color: var(--color2) !important; }
.bg-dark { background-color: var(--color3) !important; color: #fff; }
.form-control { border-color: var(--color4); }
.form-control:focus { border-color: var(--color1); box-shadow: 0 0 0 .25rem rgba(236,148,12,.25); }

/* ---------- Marquee logos ---------- */
.logo-tech { max-height: 60px; object-fit: contain; border-radius: 8px; transition: transform .3s ease; }
.logo-tech:hover { transform: scale(1.15); }
@keyframes marquee { 0% {transform: translateX(0);} 100% {transform: translateX(-50%);} }
.animate-marquee { display:flex; width:max-content; animation: marquee 20s linear infinite; }
.hover-pause:hover { animation-play-state: paused; }

/* ---------- Testimonios (thumbnails de video) ---------- */
.testimonios-slider { overflow: hidden; position: relative; }
.slider-track { display: flex; gap: 20px; animation: scroll 25s linear infinite; }
@keyframes scroll { 0% { transform: translateX(0);} 100% { transform: translateX(-50%);} }
.testimonio-card {
  flex: 0 0 auto; background: #fff; padding: 20px; border-radius: 10px;
  box-shadow: 0 4px 10px rgba(241,3,3,.1); text-align: center; min-width: 280px;
}
.testimonio-card p { color: #555; }
.testimonios-slider:hover .slider-track { animation-play-state: paused; }

/* Botón subir */
#btnSubir{
  position: fixed; bottom: 80px; left: 20px; z-index: 999; width: 45px; height: 45px;
  font-size: 20px; display: none; box-shadow: 0 4px 8px rgba(169,8,8,.3); transition: opacity .3s ease;
}
#btnSubir:hover{ opacity: .85; }

/* Thumbs 9:16 para testimonios */
.thumb-9x16{
  position: relative; width: 100%; padding-top: 177.78%; background: #000; border-radius: .5rem;
}
.thumb-9x16 > .video-thumb{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none;
}
.thumb-card{ max-width: 360px; }
.video-open{ transition: transform .2s ease, box-shadow .2s ease; }
.video-open:hover{ transform: scale(1.02); box-shadow: 0 10px 25px rgba(0,0,0,.15); }
.play-badge{
  position:absolute; inset:auto 0 8px 0; margin:auto; width:54px; height:54px; display:grid; place-items:center;
  border-radius:50%; background:rgba(255,255,255,.9); color:#000; font-size:1.6rem; box-shadow:0 6px 18px rgba(0,0,0,.25);
}
@media (min-width: 992px){ .play-badge{ inset:0; width:64px; height:64px; } }

/* === HERO con 1 imagen (responsive) === */

/* Altura real del navbar fijo: ajusta si difiere */
.hero-section{ --nav-h: 72px; }

/* Quita el padding global de section SOLO para el hero y evita “bandas” */
section.hero-section{ padding: 0 !important; padding-top: var(--nav-h) !important; }

/* Ocupa el alto visible del viewport (móvil/desktop) y recorta desbordes */
.hero-section{
  min-height: calc(100dvh - var(--nav-h));
  position: relative;
  overflow: hidden;
}
@supports not (height: 100dvh) {
  .hero-section{ min-height: calc(100vh - var(--nav-h)); }
}

/* Imagen única: llena el contenedor, recorte centrado, nunca se deforma */
.hero-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;        /* se adapta a cualquier pantalla */
  object-position: center;  /* centra el recorte */
  display: block;
  z-index: 0;
}

/* Degradado para legibilidad del texto (no deja gris al final) */
.hero-gradient{
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.35) 45%,
    rgba(0,0,0,.15) 70%,
    rgba(0,0,0,0) 100%);
}

/* Overlay del contenido y logo sobre la imagen */
.hero-overlay{ position: absolute; inset: 0; z-index: 2; }
.hero-title{
  color:#fff;
  text-shadow:0 3px 14px rgba(0,0,0,.55);
  font-size: clamp(2rem, 4vw + 1rem, 3.5rem);
}
.hero-subtitle{
  color: rgba(255,255,255,.92);
  text-shadow:0 2px 8px rgba(0,0,0,.5);
  font-size: clamp(1rem, 1.2vw + .8rem, 1.35rem);
}

/* Logo a la derecha, bajo el navbar, con sombra sutil */
.hero-logo-end{
  position: absolute; right: clamp(8px,2vw,16px); top: calc(var(--nav-h) + 8px);
  width: clamp(60px,7vw,92px); height: auto;
  object-fit: contain; z-index: 3;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.35));
}
/* Altura del navbar (se actualiza por JS más abajo) */
:root { --nav-h: 72px; }

/* Desplazamiento global de anclas (soporta la mayoría de navegadores) */
html{
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
}

/* Extra por si el navegador no respeta scroll-padding-top */
section[id]:not(.hero-section){
  scroll-margin-top: calc(var(--nav-h) + 12px);
}

#contacto .btn:hover {
  filter: brightness(1.15);
  transform: translateY(-2px);
  box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.15);
}

#contacto input,
#contacto textarea {
  border: 1px solid #b37a3c;
  border-radius: 8px;
}

#contacto input:focus,
#contacto textarea:focus {
  border-color: var(--color3);
  box-shadow: 0 0 0 0.2rem rgba(139, 69, 19, 0.25);
}


/* ---------- ÍCONOS DE CONTACTO ---------- */
.contact-icon {
  font-size: 2.3rem;
  transition: transform 0.3s ease, color 0.3s ease;
}

/* Colores base */
.phone-icon { color: #28a745; }         /* Verde teléfono */
.mail-icon { color: var(--color3); }    /* Café principal del tema */
.insta-icon { color: #e4405f; }         /* Rosa Instagram */

/* Hover animado */
.hover-card:hover .contact-icon {
  transform: scale(1.15);
}

/* Cambios de color en hover */
.hover-card:hover .phone-icon { color: #20c997; }     /* Verde más brillante */
.hover-card:hover .mail-icon { color: var(--color1); } /* Dorado */
.hover-card:hover .insta-icon { color: #c13584; }     /* Magenta Instagram */


/* ---------- ICON BADGES ---------- */
.icon-badge {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-bottom: 0.5rem;
  font-size: 1.6rem;
  color: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
}

/* Colores por tipo */
.phone-badge { background: linear-gradient(135deg, #28a745, #20c997); }
.mail-badge { background: linear-gradient(135deg, var(--color3), var(--color1)); }
.insta-badge { background: linear-gradient(135deg, #e4405f, #c13584); }

/* Efecto hover */
.hover-card:hover .icon-badge {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 6px 14px rgba(0,0,0,0.2);
  filter: brightness(1.1);
}

/* Texto dentro de las cards */
.contact-card p {
  font-size: 1rem;
  color: var(--color3);
  max-width: 90%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Layout base */
.contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  transition: all 0.3s ease;
  min-height: 150px;
}

/* Hover de la card */
.hover-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* Responsive */
@media (max-width: 767.98px) {
  .icon-badge {
    width: 52px;
    height: 52px;
    font-size: 1.4rem;
  }
}