/* main.css OPTIMIZADO */

/*--------------------------------------------------------------
# 1 VARIABLES
--------------------------------------------------------------*/

:root{

--default-font:"Roboto",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--heading-font:"Voltaire",sans-serif;
--nav-font:"Poppins",sans-serif;

--background-color:#ffffff;
--default-color:#000;
--heading-color:#000;
--accent-color:#ffc200;
--surface-color:#ffffff;
--contrast-color:#ffffff;

--nav-color:#ffffff;
--nav-hover-color:#eec02d;
--nav-mobile-background-color:#ffffff;
--nav-dropdown-background-color:#ffffff;
--nav-dropdown-color:#000;
--nav-dropdown-hover-color:#eec02d;

scroll-behavior:smooth;

}


/*--------------------------------------------------------------
# 2 RESET / BASE
--------------------------------------------------------------*/

*,
*::before,
*::after{
box-sizing:border-box;
}

img{
max-width:100%;
height:auto;
display:block;
}

body{
color:var(--default-color);
background-color:var(--background-color);
font-family:var(--default-font);
text-transform:uppercase;
}

a{
color:var(--accent-color);
text-decoration:none;
transition:color .3s ease;
}

a:hover{
color:color-mix(in srgb,var(--accent-color),transparent 25%);
}

h1,h2,h3,h4,h5,h6{
color:var(--heading-color);
font-family:var(--heading-font);
text-transform:uppercase;
}

/* FIX GLOBAL MOBILE */

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

* {
  box-sizing: border-box;
}

img,
video,
iframe {
  max-width: 100%;
  height: auto;
}
/* HEADER */

.header{
--background-color:rgba(238,192,45,.95);
--default-color:#fff;

background:var(--background-color);
color:var(--default-color);
z-index:997;
}


/* TOPBAR */

.header .topbar{
background:#000;
padding:10px 0;
font-size:14px;
}

.header .topbar a{
color:#fff;
text-decoration:none;
}

.header .topbar i{
color:#eec02d;
}


/* NAVBAR */

.header .branding{
min-height:70px;
padding:8px 0;
}


/* LOGO */

.logo img{
height:55px;
}


/* MENU DESKTOP */

@media (min-width:1200px){

.navmenu ul{
display:flex;
align-items:center;
gap:10px;
list-style:none;
margin:0;
padding:0;
}

.navmenu a{
color:#000;
padding:15px 14px;
font-weight:600;
font-size:16px;
display:flex;
align-items:center;
transition:.3s;
}

.navmenu a:hover,
.navmenu .active{
color:#fff;
}


/* REDES */

.nav-social{
margin-left:10px;
}

.nav-social a{
color:#000;
font-size:18px;
margin-left:10px;
}

.nav-social a:hover{
color:#fff;
}

}


/* MOBILE NAV */

@media (max-width:1199px){

.mobile-nav-toggle{
font-size:30px;
cursor:pointer;
color:#000;
z-index:1001;
}

/* contenedor menu */

.navmenu ul{
display:none;
position:absolute;
top:100%;
left:15px;
right:15px;
background:#fff;
border-radius:8px;
padding:25px 20px;
flex-direction:column;
gap:10px;
box-shadow:0 10px 30px rgba(0,0,0,.2);
}

/* cuando abre */

.mobile-nav-active .navmenu ul{
display:flex;
}

/* links */

.navmenu a{
color:#000;
font-size:18px;
padding:10px 0;
display:block;
}

/* redes sociales */

.nav-social{
display:flex;
justify-content:center;
gap:15px;
margin-top:15px;
}

.nav-social a{
font-size:22px;
color:#000;
}

}

/*--------------------------------------------------------------
# 5 SECTIONS
--------------------------------------------------------------*/

section,
.section{
padding:30px 0;
scroll-margin-top:112px;
overflow:clip;
}

.section-title{
text-align:center;
padding-bottom:40px;
}

.section-title h2{
font-size:52px;
font-weight:600;
padding:8px 20px;
border-radius:40px;
}



/* ==========================
ABOUT HERO
========================== */

.about-hero{
position:relative;
width:100%;
min-height:520px;
display:flex;
align-items:center;
overflow:hidden;
}

/* imagen fondo */

.about-bg{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:1;
}

/* contenedor texto */

.carousel-container{
position:relative;
z-index:2;
max-width:650px;
padding:0;
margin-left:8%;
text-align:left;
color:#fff;
background:none; /* elimina caja negra */
}

/* titulo */

.carousel-container h2{
font-size:40px;
margin-bottom:18px;
color:#f4c542; /* amarillo */
font-weight:700;
}

/* texto */

.carousel-container p{
font-size:16px;
line-height:1.7;
margin-bottom:12px;
}

/*-----------------------
MOBILE
-----------------------*/

@media (max-width:768px){

.about-hero{
min-height:420px;
}

.carousel-container{
margin-left:6%;
margin-right:6%;
max-width:100%;
}

.carousel-container h2{
font-size:28px;
}

.carousel-container p{
font-size:14px;
}

}


/*--------------------------------------------------------------
# GALLERY
--------------------------------------------------------------*/

.gallery .gallery-item{
overflow:hidden;
}

.gallery .gallery-item img{
transition:transform .4s ease;
}

.gallery .gallery-item:hover img{
transform:scale(1.1);
}


/*--------------------------------------------------------------
# CLIENTS
--------------------------------------------------------------*/

.clients{
padding:15px 0;
margin-top:30px;
margin-bottom:60px
;}

.clients img{
transition:transform .3s ease;
}

.clients img:hover{
transform:scale(1.1);
}


/*--------------------------------------------------------------
# CONTACT
--------------------------------------------------------------*/

.contact .info{
background:#000;
padding:0 80px;
}

.contact .php-email-form button{

background:var(--accent-color);
color:#fff;

border:0;

padding:13px 50px;

border-radius:4px;

transition:background .3s;

}

.contact .php-email-form button:hover{

background:color-mix(in srgb,var(--accent-color) 90%,black 15%);

}

/*--------------------------------------------------------------
# FOOTER
--------------------------------------------------------------*/

.footer{
font-size:14px;
padding:45px 20px;
background:#000;
color:#fff;
}

/* columnas */

.footer .row{
align-items:center;
}

/* links */

.footer a{
color:#fff;
text-decoration:none;
transition:.25s;
}

.footer a:hover{
color:#ffc200;
}

/* iconos contacto */

.footer .icon{
font-size:20px;
color:#ffc200;
margin-right:10px;
}

/* redes sociales */

.footer .social-links{
display:flex;
gap:12px;
}

.footer .social-links a{

width:38px;
height:38px;

display:flex;
align-items:center;
justify-content:center;

border-radius:50%;
border:1px solid rgba(255,255,255,.25);

color:#fff;
font-size:16px;

transition:.3s;

}

.footer .social-links a:hover{

border-color:#ffc200;
background:#ffc200;
color:#000;

transform:translateY(-2px);

}

/* logo footer */

.footer img{
max-height:60px;
width:auto;
}

/* textos */

.footer p{
margin:0;
}

/* mobile */

@media (max-width:768px){

.footer{
text-align:center;
padding:40px 20px;
}

.footer .d-flex{
justify-content:center;
}

.footer img{
margin-bottom:15px;
}

.footer .social-links{
justify-content:center;
margin-top:10px;
}

}

/* linea inferior copyright */

.footer-bottom{

border-top:1px solid rgba(255,255,255,.15);
margin-top:30px;

padding:18px 20px;

text-align:center;

}

.footer-bottom p{

margin:0;

font-size:13px;
color:rgba(255,255,255,.7);

letter-spacing:.3px;

}
/*--------------------------------------------------------------
# SCROLL TOP
--------------------------------------------------------------*/

.scroll-top{

position:fixed;
left:15px;   /* antes era right */

bottom: 70px;  /* misma altura que whatsapp */

width:42px;
height:42px;

background:#ffc200;
color:#000;

display:flex;
align-items:center;
justify-content:center;

border-radius:6px;

opacity:0;
visibility:hidden;

transition:.4s;

}

.scroll-top:hover{
transform:translateY(-3px);
}

.scroll-top.active{

opacity:1;
visibility:visible;

}
/*--------------------------------------------------------------
# WHATSAPP BUTTON PRO
--------------------------------------------------------------*/

.whatsapp{

position:fixed;

width:56px;
height:56px;

bottom:70px;
right:16px;

background:#25D366;
color:#fff;

border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

font-size:28px;

z-index:1000;

box-shadow:0 8px 18px rgba(0,0,0,.25);

transition:all .25s ease;

animation:whatsapp-pulse 2.2s infinite;

/* IMPORTANTE */
position:fixed;
}

/* hover */

.whatsapp:hover{
transform:translateY(-3px) scale(1.05);
animation:none;
}

/* icono */

.whatsapp i{
line-height:1;
}

/* tooltip */

.whatsapp-tooltip{

position:absolute;

right:70px;
top:50%;
transform:translateY(-50%);

background:#075E54;
color:#fff;

font-size:13px;

padding:6px 10px;

border-radius:6px;

opacity:0;
visibility:hidden;

white-space:nowrap;

transition:.25s;

}

/* mostrar tooltip */

.whatsapp:hover .whatsapp-tooltip{

opacity:1;
visibility:visible;

}

/* animacion pulso */

@keyframes whatsapp-pulse{

0%{
box-shadow:0 0 0 0 rgba(37,211,102,.6);
}

70%{
box-shadow:0 0 0 12px rgba(37,211,102,0);
}

100%{
box-shadow:0 0 0 0 rgba(37,211,102,0);
}

}

/* mobile */

@media (max-width:768px){

.whatsapp{

width:54px;
height:54px;

bottom:80px;
right:14px;

font-size:26px;

}

.whatsapp-tooltip{
display:none;
}

}


/* compensar header fixed */

body{
padding-top:112px;
}

@media (max-width:768px){
body{
padding-top:110px;
}
}

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

img{
max-width:100%;
height:auto;
display:block;
}


/* ==============================
MENU CARTA FILTROS
============================== */

.menu-filters{
padding:0;
margin:0 auto 40px auto;
list-style:none;
text-align:center;
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:12px;
}

.menu-filters li{
cursor:pointer;
padding:10px 22px;
font-size:14px;
font-weight:600;
border-radius:30px;
background:#f4c542;
color:#fff;
transition:all .3s ease;
}

.menu-filters li:hover{
background:#b38b46;
}

.menu-filters .filter-active{
background:#000;
color:#fff;
}

/* ==========================
BOTONES GENERALES
========================== */

.btn{
display:inline-block;
padding:12px 30px;
font-size:15px;
font-weight:600;
color:#fff;
background:#f4c542;
border-radius:30px;
text-decoration:none;

transition:background .3s ease, transform .2s ease;
}

/* hover */

.btn:hover{
background:#000;
color:#fff;
transform:translateY(-2px);
}

/* bot贸n cotizar */

.btn-cotizar{
font-size:16px;
padding:14px 40px;
box-shadow:0 6px 18px rgba(0,0,0,.15);
}
/* =========================
PORTFOLIO HOVER FIX
========================= */

.portfolio-item{
position:relative;
overflow:hidden;
}

.portfolio-item img{
width:100%;
display:block;
transition:transform .4s ease;
}

.portfolio-item:hover img{
transform:scale(1.05);
}

.portfolio-info{
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
background:rgba(0,0,0,0.6);
opacity:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
transition:all .3s ease;
padding:20px;
}

.portfolio-item:hover .portfolio-info{
opacity:1;
}

.portfolio-info h4{
color:#fff;
font-size:20px;
margin-bottom:10px;
}

.portfolio-info p{
color:#fff;
font-size:15px;
margin-bottom:10px;
}

.portfolio-info a{
color:#fff;
font-size:20px;
margin:5px;
transition:0.3s;
}

.portfolio-info a:hover{
color:#cda45e;
}

/* =================================
PORTFOLIO / GALERIA
================================= */

.portfolio-item{
  position: relative;
  overflow: hidden;
  border-radius: 6px;
}

.portfolio-item img{
  width: 100%;
  height: auto;
  display: block;
  transition: transform .5s ease;
}

/* zoom imagen */
.portfolio-item:hover img{
  transform: scale(1.08);
}

/* overlay */
.portfolio-info{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.65);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:20px;

  opacity:0;
  transition: opacity .35s ease, transform .35s ease;
}

/* mostrar overlay */
.portfolio-item:hover .portfolio-info{
  opacity:1;
}

/* titulo */
.portfolio-info h4{
  color:#fff;
  font-size:20px;
  font-weight:600;
  margin-bottom:10px;
}

/* texto */
.portfolio-info p{
  color:#fff;
  font-size:15px;
  margin-bottom:10px;
}

/* links */
.portfolio-info a{
  color:#fff;
  font-size:20px;
  margin:6px;
  transition:0.3s;
}

/* hover iconos */
.portfolio-info a:hover{
  color:#cda45e;
}

/* iconos */
.preview-link i,
.details-link i{
  font-size:22px;
}

/* =================================
FILTROS MENU (ISOTOPE)
================================= */

.menu-filters{
  padding:0;
  margin:0 auto 30px auto;
  list-style:none;
  text-align:center;
}

.menu-filters li{
  cursor:pointer;
  display:inline-block;
  padding:10px 20px;
  font-size:14px;
  font-weight:600;
  margin:5px;
  border-radius:50px;
  transition:all .3s;
  border:1px solid rgba(255,255,255,0.2);
}

.menu-filters li:hover{
  background:#cda45e;
  color:#fff;
}

.menu-filters .filter-active{
  background:#000;
  color:#fff;
}

/* =================================
RESPONSIVE
================================= */

@media (max-width:768px){

  .portfolio-info h4{
    font-size:18px;
  }

  .portfolio-info p{
    font-size:14px;
  }

}

/* prevenir desbordes horizontales */
body{
overflow-x:hidden;
}

/* im谩genes siempre responsivas */
img{
max-width:100%;
height:auto;
display:block;
}

/* ==========================
ABOUT HERO
========================== */

.about-hero{
position:relative;
width:100%;
min-height:800px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}

.about-bg{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:1;
}

.carousel-container{
position:absolute;
top:50%;
left:20%;   /* controla la posición horizontal */
transform:translateY(-50%);
max-width:520px;

color:#fff;
text-align:left;
background:none;
padding:0;
}

.carousel-container h2{
font-size:36px;
margin-bottom:20px;
}

.carousel-container p{
font-size:16px;
line-height:1.7;
text-align:left;
}
@media (max-width:768px){

.carousel-container{
margin-left:-5%;
margin-right:8%;
max-width:100%;
}

}


/* ==============================
PORTFOLIO PRO GRID
============================== */

.portfolio-item{
position:relative;
overflow:hidden;
border-radius:6px;
}

/* marco visual uniforme */
.portfolio-item img{
width:100%;
height:100%;
aspect-ratio: 4 / 3;   /* puedes usar 1/1 o 4/3 */
object-fit:cover;
display:block;
transition:transform .4s ease;
}

/* overlay */
.portfolio-info{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
justify-content:flex-end;
padding:20px;
background:linear-gradient(to top, rgba(0,0,0,.7), transparent);
color:#fff;
opacity:0;
transition:opacity .3s ease;
}

/* hover */
.portfolio-item:hover img{
transform:scale(1.05);
}

.portfolio-item:hover .portfolio-info{
opacity:1;
}


/* quitar espacio entre header y hero */

#hero,
.hero-slider,
.slider{
margin-top:0 !important;
padding-top:0 !important;
}

/* evitar separación del primer section */

main > section:first-child{
margin-top:0 !important;
padding-top:0 !important;
}

/*--------------------------------------------------------------
# FAQ SECTION
--------------------------------------------------------------*/

.faq-section{

background:#ffc200;
padding:90px 20px;

}

.faq-title{

text-align:center;
margin-bottom:50px;

}

.faq-title h2{

font-size:36px;
font-weight:700;
color:#000;
margin-bottom:10px;

}

.faq-title p{

color:#333;
font-size:16px;

}

/* contenedor */

.faq-wrapper{

max-width:800px;
margin:auto;

}

/* item */

.faq-item{

background:#fff;
border-radius:8px;
margin-bottom:15px;
padding:18px 22px;

box-shadow:0 6px 16px rgba(0,0,0,.08);

cursor:pointer;
transition:.3s;

}

.faq-item:hover{
transform:translateY(-2px);
}

/* pregunta */

.faq-item summary{

font-weight:600;
font-size:16px;

list-style:none;
position:relative;
padding-right:30px;

}

/* quitar flecha nativa */

.faq-item summary::-webkit-details-marker{
display:none;
}

/* icono + */

.faq-item summary::after{

content:"+";
position:absolute;
right:0;
top:0;

font-size:22px;
font-weight:700;

}

/* icono abierto */

.faq-item[open] summary::after{
content:"-";
}

/* respuesta */

.faq-item p{

margin-top:12px;
line-height:1.6;
color:#444;

}



/* ==============================
CONTACT SECTION (SIN FORMULARIO)
============================== */

#contact{
padding:80px 0 40px;
background:#000;
}

/* contenedor */

#contact .container{
max-width:900px;
margin:auto;
padding-left:20px;
padding-right:20px;
}

/* imágenes */

#contact img{
display:block;
margin-left:auto;
margin-right:auto;
height:auto;
}

/* logo principal */

#contact .img-fluid2,
#contact img[src*="logo-carrito-gourmet"]{
max-width:280px;
width:100%;
margin-bottom:25px;
}

/* texto */

#contact p{
color:#fff;
line-height:1.6;
}

/* botón */

#contact .btn{
background:#ffc200;
color:#000;
padding:10px 25px;
border-radius:6px;
font-weight:600;
transition:.25s;
}

#contact .btn:hover{
transform:translateY(-2px);
background:#ffd633;
}

/* LOGO GOBIERNO */

#contact img[src*="gob2"]{
width:420px !important;
max-width:none !important;
height:auto;
margin-top:25px;
}

/* centrar layout */

#contact .row{
justify-content:center;
}

#contact .col-lg-6{
max-width:650px;
}

/* ==============================
MOBILE
============================== */

@media (max-width:768px){

#contact{
padding:60px 15px;
}

/* logo principal */

#contact .img-fluid2,
#contact img[src*="logo-carrito-gourmet"]{
max-width:220px;
}

/* logo gobierno adaptable */

#contact img[src*="gob2"]{
width:100% !important;
max-width:360px !important;
}

/* texto */

#contact p{
font-size:15px;
}

}

/* =========================
   HERO
========================= */

#hero {
  padding: 0;
  margin: 0;
}

.hero {
  position: relative;
  width: 100%; /* 👈 FIX importante */
  height: 90vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  contain: layout paint; /* 👈 mejora rendimiento */
}

/* Imagen fondo */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; /* 👈 FIX importante */
}

/* Overlay */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1;
  pointer-events: none;
}

/* Contenido */
.hero-content {
  position: absolute;
  z-index: 10;
  text-align: center;
  color: #fff;
  max-width: 800px;
  padding: 0 20px;

  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Título */
.hero-content h1 {
  font-size: clamp(32px, 5vw, 60px);
  margin-bottom: 15px;
  line-height: 1.1;
  color: #fff;
}

/* Subtexto */
.hero-sub {
  margin-bottom: 25px;
  opacity: 0.9;
}

/* Botones */
.hero-cta {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Base botón */
.btn {
  padding: 14px 28px;
  border-radius: 40px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s;
  display: inline-block;
}

/* Botón gourmet */
.btn-primary {
  background: #f4c542;
  color: #000;
  box-shadow: 0 8px 20px rgba(244,197,66,0.3);
}

.btn-primary:hover {
  background: #e0b837;
}

/* WhatsApp */
.btn-whatsapp {
  position: relative;
  display: inline-block;
  background: #25d366;
  color: #fff;
  border-radius: 50px;
  padding: 14px 22px;
  text-decoration: none;
  font-weight: 600;
  overflow: hidden;
  z-index: 1;
}

/* ⚠️ OPTIMIZADO (menos pesado) */
.btn-whatsapp::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50px;
  background: conic-gradient(
    from 0deg,
    transparent,
    #ffffff,
    #25d366,
    transparent 40%
  );
  animation: girar 8s linear infinite; /* 👈 más lento = menos CPU */
  z-index: -2;
  filter: blur(2px); /* 👈 menos blur = más rendimiento */
}

.btn-whatsapp::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: #25d366;
  border-radius: 50px;
  z-index: -1;
}

.btn-whatsapp:hover::after {
  background: #1ebe5d;
}

/* animación */
@keyframes girar {
  100% {
    transform: rotate(360deg);
  }
}

/* =========================
   RESPONSIVE (IMPORTANTE)
========================= */

@media (max-width: 768px) {
  .hero {
    height: 75vh;
    min-height: 500px;
  }

  .hero-content {
    top: 45%; /* 👈 mejora centrado en mobile */
  }
}

@media (max-width: 480px) {
  .hero {
    height: 65vh;
    min-height: 420px;
  }

  .hero-content {
    top: 48%;
  }
}


/* =========================
   MODAL FORM
========================= */

.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

/* Caja */
.modal-content {
  background: linear-gradient(180deg, #1a1a1a, #000);
  padding: 30px;
  border-radius: 20px;
  width: 90%;
  max-width: 420px;
  color: #fff;
  position: relative;

  /* animación */
  animation: fadeIn 0.3s ease;
}

/* Botón cerrar */
.close-btn {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 24px;
  cursor: pointer;
  color: #f4c542;
}

/* Título */
.modal-content h2 {
  margin-bottom: 20px;
  font-size: 22px;
  color: #f4c542;
  text-align: center;
}

/* Inputs + textarea + select */
.modal-content input,
.modal-content textarea,
.modal-content select {
  width: 100%;
  padding: 14px;
  margin-bottom: 12px;
  border-radius: 12px;
  border: none;
  background: #eee;
  font-size: 14px;
  outline: none;
}

/* =========================
   BOTONES TIPO EVENTO
========================= */

.evento-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.evento-buttons input {
  display: none;
}

.evento-buttons label {
  flex: 1;
  padding: 12px;
  text-align: center;
  border-radius: 10px;
  background: #222;
  color: #fff;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

/* hover */
.evento-buttons label:hover {
  border-color: #f4c542;
}

/* activo */
.evento-buttons input:checked + label {
  background: #f4c542;
  color: #000;
  font-weight: bold;
}

/* =========================
   BOTÓN ENVIAR
========================= */

.btn-submit {
  width: 100%;
  padding: 14px;
  border-radius: 30px;
  border: none;
  background: #f4c542;
  color: #000;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(244,197,66,0.3);
  transition: all 0.3s ease;
}

.btn-submit:hover {
  background: #e0b837;
  transform: translateY(-2px);
}

/* quitar borde azul */
.btn-submit:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(244,197,66,0.4);
}

/* =========================
   MENSAJE PEQUEÑO
========================= */

.modal-content p {
  font-size: 12px;
  color: #ccc;
  text-align: center;
  margin-bottom: 10px;
}

/* =========================
   ANIMACIÓN
========================= */

@keyframes fadeIn {
  from { 
    opacity: 0; 
    transform: scale(0.95); 
  }
  to { 
    opacity: 1; 
    transform: scale(1); 
  }
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 768px) {
  .hero {
    height: 80vh;
  }

  .hero-content h1 {
    font-size: 32px;
  }

  .hero-sub {
    font-size: 14px;
  }
}



/* ==============================
   BOTÓN CUSTOM (OVERRIDE BOOTSTRAP)
============================== */

.btn-primary {
  --bs-btn-bg: #000;
  --bs-btn-border-color: transparent;

  --bs-btn-hover-bg: #333;
  --bs-btn-hover-border-color: transparent;

  --bs-btn-active-bg: #111;
  --bs-btn-active-border-color: transparent;

  --bs-btn-focus-shadow-rgb: 0,0,0;
}

.btn:focus,
.btn:active:focus {
  box-shadow: none !important;
  outline: none !important;
}

.btn-whatsapp,
.btn-whatsapp:hover,
.btn-whatsapp:focus,
.btn-whatsapp:active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* ===== REVEAL OPTIMIZADO (SIN CLS) ===== */

.reveal {
  opacity: 1;
  transform: none;
}

/* Solo aplica animación si JS está activo */
.js .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js .reveal.show {
  opacity: 1;
  transform: translateY(0);
}

/* Opcional: delays */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }