/* =====================
   RESET & BASE
===================== */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background: #ffffff(248, 216, 190) ;
  color: #111;
}

/* =====================
   HEADER
===================== */
header {
  display: flex;
  align-items: center;
  padding: 12px 40px;
  background: #ffffff;
  position: relative;
}
.top-bar {
  position: absolute;
  top: 15px;
  right: 50px;
  display: flex;
  gap: 10px;
  z-index: 1;
}

.flags img {
  width: 30px;
  height: 22px;
  cursor: pointer;
}

/* =====================================================
   LOGO BASE (HOME + ARGENTINA)
===================================================== */
.logo-container {
  display: flex;
  align-items: center;
  margin: 0;
  margin-left: 120px;
}

.logo-container img {
  width: 210px;
  border-radius: 50%;
  background: #fff;
  padding: 4px;
}

/* Wrapper del logo */
.logo-wrapper {
  position: relative;
  display: inline-block;
  cursor: pointer;
  transition: transform 0.25s ease;
  max-width: 120vw;
  margin: 0 auto;
}

.logo-wrapper:hover {
  transform: scale(1.10);
}

.logo {
  width: 100%;
  height: auto;
}
@media (max-width: 768px) {

  header {
    padding: 4px 12px;     /* ⬅ reduce altura total */
    min-height: auto;
  }

  .logo-container {
    margin-left: 0 !important;
    padding-left: 8px;
  }

  .logo-wrapper {
    transform: none;      /* evita que agrande el header */
  }
  .logo-wrapper:hover {
  transform: scale(1.10);
  }
  .logo {
    width: 120px;         /* ⬅ tamaño real en mobile */
    max-width: 120px;
  }

  .hamburger {
    margin-left: auto;
    transform: scale(0.9);
  }

  /* Ajuste fino del top-bar (banderas) */
  .top-bar {
    top: 8px;
    right: 10px;
  }
}

/* =====================================================
   BALL (HOME) – NO TOCAR
===================================================== */
.ball {
  position: absolute;
  width: 13vw;
  height: 13vw;
  max-width: 60px;
  max-height: 60px;
  background: url('/static/img/pelotas.gif') center / cover no-repeat;
  left: 30%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.35) rotate(0deg);
  pointer-events: none;
  opacity: 0;
  will-change: transform, left, top, opacity;
  transition: opacity 0.15s ease-in;
}

.logo-wrapper:hover .ball {
  opacity: 1;
  animation: kickAndBounce 2s cubic-bezier(0.36, 0.07, 0.2, 0.97) forwards;
}
.logo-wrapper:hover .bird {
  opacity: 1;
}
/* =====================================================
   BIRD (ARGENTINA)
===================================================== */
.bird {
  position: fixed;
  left: 0;
  top: 10px;
  background: url('/static/img/effect/bird.gif') center / cover no-repeat;
  width: 140px;
  height: 140px;
  pointer-events: none;
  opacity: 0;
  z-index: 3000;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.35));
}


/* Cuerpo */
.bird-body {
  animation:
    glideTilt 3.6s ease-in-out infinite,
    bodyFloat 2.4s ease-in-out infinite,
    diveStretch 2.6s ease-in-out infinite;
}

/* Alas */
.bird-wings {
  width: 100%;
  height: 100%;
  transform-origin: center;
  animation: wingsFlight 2.6s cubic-bezier(.45,.05,.55,.95) infinite;
}
.bird {
  --speed: 0; /* valor dinámico desde JS */
}

/* Alas con velocidad */
.bird-wings {
  animation: flap 0.32s ease-in-out infinite;
  transform-origin: center;
  transform:
    scaleY(calc(1 - var(--speed) * 0.6))
    scaleX(calc(1 - var(--speed) * 0.4));
  transition: transform 0.15s ease-out;
}

/* Sombra */
.bird-shadow {
  position: absolute;
  bottom: -18px;
  left: 50%;
  width: 90px;
  height: 24px;
  background: rgba(0,0,0,0.35);
  filter: blur(14px);
  transform: translateX(-50%);
  animation: shadowMove 2.4s ease-in-out infinite;
}
@keyframes bodyFloat {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}
/* =====================================================
   ANIMACIONES
===================================================== */

/* Rebote pelota */
@keyframes kickAndBounce {
  0%   { left: 25%; top: 28%; transform: translate(-50%, -50%) scale(0.3); opacity: 1; }
  18%  { left: -20%; top: 30%; transform: translate(-50%, -65%) scale(0.8); opacity: 1; }
  28%  { left: 30%; top: 55%; transform: translate(-30%, -20%) scale(1.12); opacity: 1;}
  38%  { left: 50%; top: 45%; transform: translate(-50%, -58%) scale(1.20); opacity: 1;}
  52%  { left: 95%; top: 80%; transform: translate(-50%, -25%) scale(1.10); opacity: 1;}
  66%  { left: 140%; top: 60%; transform: translate(-50%, -50%) scale(1.05); opacity: 0.9;}
  82%  { left: 180%; top: 80%; transform: translate(-50%, -35%) scale(1.02); opacity: 0.5;}
  100% { left: 220%; top: 70%; transform: translate(-50%, -40%) scale(0.5); opacity: 0; }
}

/* Aleteo */
@keyframes flap {
  0%   { transform: scaleY(1) rotate(0deg); }
  50%  { transform: scaleY(0.85) rotate(20px); }
  100% { transform: scaleY(1) rotate(0deg); }
}

/* Planeo */
@keyframes glideTilt {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(-3deg); }
  45%  { transform: rotate(4deg); }
  70%  { transform: rotate(-1deg); }
  100% { transform: rotate(0deg); }
}

/* Sombra */
@keyframes shadowMove {
  0% {
    transform: translateX(-50%) scale(1);
    opacity: .45;
  }

  /* ⬇️ picada */
  65% {
    transform: translateX(-50%) scale(0.45);
    opacity: .15;
  }

  100% {
    transform: translateX(-50%) scale(1);
    opacity: .45;
  }
}
@keyframes flapNatural {
  /* Batida fuerte */
  0%   { transform: scaleY(1) rotate(0deg); }
  12%  { transform: scaleY(0.65) rotate(-8deg); }
  25%  { transform: scaleY(1.15) rotate(6deg); }

  /* Planeo */
  45%  { transform: scaleY(1.05) rotate(2deg); }
  65%  { transform: scaleY(1.02) rotate(0deg); }

  /* Nueva batida */
  100% { transform: scaleY(1) rotate(0deg); }
}

@keyframes wingsFlight {

  /* 🪽 BATIDA FUERTE */
  0% {
    transform: scaleY(1) scaleX(1) rotate(0deg);
  }
  10% {
    transform: scaleY(0.6) scaleX(1.05) rotate(-10deg);
  }
  20% {
    transform: scaleY(1.15) scaleX(0.95) rotate(6deg);
  }

  /* ✈️ PLANEANDO */
  40% {
    transform: scaleY(1.05) scaleX(1) rotate(2deg);
  }

  /* ⬇️ PICADA – alas cerradas */
  60% {
    transform: scaleY(0.35) scaleX(0.6) rotate(0deg);
  }
  72% {
    transform: scaleY(0.3) scaleX(0.55) rotate(0deg);
  }

  /* 🛫 SALIDA DE PICADA */
  90% {
    transform: scaleY(1.05) scaleX(0.95) rotate(4deg);
  }

  100% {
    transform: scaleY(1) scaleX(1) rotate(0deg);
  }
}

@keyframes diveStretch {
  0%, 45% {
    transform: scaleY(1);
  }

  /* ⬇️ picada */
  60%, 72% {
    transform: scaleY(1.25);
  }

  100% {
    transform: scaleY(1);
  }
}
/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 768px) {
  .ball {
    width: 18vw;
    height: 18vw;
    max-width: 70px;
    max-height: 70px;
  }

  @media (max-width: 768px) {
  .bird {
    width: 140px;
    height: 140px;
   }
  }
}
/* =====================================================
   MOBILE – ACTIVACIÓN SIN HOVER
===================================================== */
@media (hover: none) {

  .logo-wrapper.active .ball {
    opacity: 1 !important;
    animation: kickAndBounce 2s cubic-bezier(0.36, 0.07, 0.2, 0.97) forwards !important;
  }

  .logo-wrapper.active .bird {
    opacity: 1 !important;
  }

  /* evita que queden ocultos */
  .ball,
  .bird {
    pointer-events: none;
  }
}

 
/* =====================
   NAVBAR
===================== */



/* NAV */
#main-nav {
  margin-left: 120px;
}


/* UL RESET + FLEX */
#main-nav ul {
  display: flex;
  align-items: center;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* LI */
#main-nav ul li {
  margin: 0;
  padding: 0;
}

/* LINKS */
#main-nav ul li a {
  display: block;
  padding: 10px 18px;
  font-size: 18px;
  font-weight: 500;
  color: #050d24; /* azul oscuro */
  text-decoration: none;
  border-radius: 30px;
  transition: all 0.3s ease;
}

/* HOVER */
#main-nav ul li a:hover {
  background: linear-gradient(40deg, #d18c1c, #f1f383);
  color: #fff;
}

.hamburger {
  display: none;
}


/* =====================
   HERO SLIDER (BASE)
===================== */

.hero-slider,
.hero-sliderAR {
  position: relative;
  width: 100%;
  height: 65vh;
  min-height: 520px;
  overflow: hidden;
}

/* =====================
   SLIDES
===================== */

.hero-slide,
.hero-slideAR {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;

  opacity: 0;
  transform: scale(1.02);

  transition:
    opacity 1.6s ease-in-out,
    transform 6s ease-out;

  z-index: 1;
}

.hero-slide.active,
.hero-slideAR.active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

/* =====================
   OVERLAY
===================== */

.hero-overlay {
  position: absolute;
  inset: 0;              /* ocupa todo el slide */

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

  text-align: center;
  color: #fff;
  padding: 20px;

  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.35) 0%,
    rgba(0,0,0,0.20) 40%,
    rgba(0,0,0,0.05) 70%,
    rgba(0,0,0,0) 100%
  );

  z-index: 3;
}
/* =====================
   TITULO
===================== */

.hero-overlay h1 {
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  font-weight: 800;
  max-width: 900px;
  margin-bottom: 50px;
  text-shadow: 0 3px 15px rgba(0,0,0,0.75);
  opacity: 0;
  transform: translateY(70px);
}
/* SOLO el título se anima */

.hero-overlay h2 {
  font-size: 1.58rem;
  line-height: 1.45;
  margin-bottom: 40px;
  opacity: 0.96;
  font-weight: 400;
}

.hero-slide.active .hero-overlay h1,
.hero-slideAR.active .hero-overlay h1 {
  animation: slideTitle 1s ease forwards;
}

@keyframes slideTitle {
  from {
    opacity: 0;
    transform: translateY(70px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =====================
   BOTÓN (NO SE MUEVE)
===================== */

.hero-btn {
  padding: 14px 36px;
  border-radius: 40px;

  background: linear-gradient(40deg, #d18c1c, #f1f383);
  color: #fff;

  font-weight: 600;
  text-decoration: none;

  box-shadow: 0 12px 30px rgba(0,0,0,0.25);

  
}

.hero-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

/* =====================
   FADE INFERIOR
===================== */

.hero-slider::after,
.hero-sliderAR::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;

  width: 100%;
  height: 160px;

  pointer-events: none;
  z-index: 4;

  background: linear-gradient(
    to bottom,
    rgba(107,117,13,0) 10%,
    rgba(125,123,100,0.6) 70%,
    #fff 100%
  );
}

/* =====================
   TEXTO GRADIENTE
===================== */



@keyframes shine {
  0%,100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

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

.hero-description {
  font-weight: 900;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
  letter-spacing: 1.5px;

  text-shadow:
    0 2px 10px rgba(248,245,245,0.7),
    0 0 20px rgba(248,249,250,0.45),
    0 0 40px rgba(195,238,5,0.25);
}

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

@media (max-width:768px){

  .hero-slider,
  .hero-sliderAR {
    height: 60vh;
    min-height: 420px;
  }

  .hero-overlay {
    background: rgba(0,0,0,0.22);
  }

  .hero-overlay h1 {
    text-align: center;
    font-size: 2.0rem;
    padding: 0 16px;
  }

  .hero-overlay h2 {
    text-align: center;
    font-size: 1.1rem;
  }

 

}

/* =====================
   OPTIMIZACIÓN
===================== */

.hero-slide.active,
.hero-slideAR.active {
  will-change: opacity;
}

/*==================
 TEXTO HOME
 =======================*/
 /* ================= HOW IT WORKS ================= */

.how-it-works {

  padding: 60px 20px;
  text-align: center;
  background: #f8f9fb;
}


.how-intro {

  max-width: 800px;
  margin: 0 auto 40px auto;
}


.how-top-text {

  font-size: 16px;
  color: #555;
  margin-bottom: 10px;
}


.section-title {

  font-size: 28px;
  font-weight: 800;
  margin-bottom: 10px;
}


.section-subtitle {

  font-size: 18px;
  color: #666;
  margin-bottom: 40px;
}


/* GRID */

.steps-grid {

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  max-width: 1000px;
  margin: auto;
}


/* STEP */

.step {

  background: white;
  padding: 25px;
  border-radius: 12px;

  box-shadow: 0 4px 12px rgba(0,0,0,0.08);

  transition: 0.3s;
}

.step:hover {

  transform: translateY(-5px);
}


/* NUMBER */

.step-number {

  width: 40px;
  height: 40px;

  margin: auto;
  margin-bottom: 10px;

  border-radius: 50%;

  background: #0b5cff;
  color: white;

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

  font-weight: bold;
}


/* TEXT */

.step h4 {

  margin: 10px 0;
  font-size: 18px;
}

.step p {

  font-size: 14px;
  color: #666;
}


/* RESPONSIVE */

@media (max-width: 900px) {

  .steps-grid {

    grid-template-columns: 1fr;
  }

}

/*=================
   HOME BOXES – FIX REAL
===================== */

.home-boxes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-top: 0;
  padding-top: 0;
  max-width: 1500px;
  margin: 0 auto;
  padding: 50px 24px;
}

/* Cada tarjeta */
.home-box {
  display: block;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

/* Imagen */
.box-image {
  position: relative;
  height: 260px;
  border-radius: 18px 18px 0 0;
  overflow: hidden;
}

.box-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay */
.box-overlay {
  position: absolute;
  inset: 0;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.65),
    rgba(0,0,0,.00)
  );
  color: #fff;
  border-radius: 18px 18px 0 0;
  text-align: center;            /* ayuda extra al centrado */
}


.text-black .box-overlay {
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.85),
    rgba(255,255,255,0.45) 40%,
    rgba(255,255,255,0.00)
  );
}

/* =====================
   HOVER PREMIUM BOX
===================== */

.home-box {
  transition: transform .35s ease;
}

.home-box:hover {
  transform: translateY(-6px);
}

/* Zoom suave de imagen */
.box-image img {
  transition: transform .6s ease;
}

.home-box:hover .box-image img {
  transform: scale(1.08);
}

/* Sombra más fuerte en hover */
.home-box:hover .box-footer {
  box-shadow: 0 22px 45px rgba(0,0,0,.18);
}
/* color de texto del box */

.text-white .box-from,
.text-white .box-overlay h2{
  color: #ffffff;
}

.text-black .box-from,
.text-black .box-overlay h2{
  color: #111111;
}

.text-blue .box-from,
.text-blue .box-overlay h2{
  color: #1e66ff;
}

.text-yellow .box-from,
.text-yellow .box-overlay h2{
  color: #e3f557;
}
/* =====================
   BOX TEXT – MOBILE
===================== */
@media (max-width: 768px) {

  .box-overlay h2 {
    font-size: 0.90rem;   /* antes muy grande */
    line-height: 1.2;
  }
  .home-boxes {
    position: relative;
    z-index: 6;
    grid-template-columns: repeat(2, 1fr);
    padding: 0px 10px;
    margin-top: -1px; /* 🔥 elimina línea fantasma */
  }
  
  
  
  .box-image {
    border-radius: 16px 16px 0 0;
    height: 160px;
  }

}

/* =====================
   RESPONSIVE
===================== */
@media (max-width: 768px) {

  .logo-container {
    padding: 20px 20px;
    margin-left: 15px;
  }

  .logo-container img {
    width: 140px;
   
  }

  .hero-slider {
    height: 60vh;
    min-height: 420px;
  }
  
  .hero-sliderAR {
    height: 60vh;
    min-height: 400px;
  }
  .hero-overlay h1 {
    font-size: 1.5rem;
    padding: 0 20px;
  }
}


@media (max-width: 768px) {
  header {
    position: relative;          /* ← importante para posicionar el menú respecto al header */
    justify-content: space-between;
    align-items: center;
  }
 
  /* Botón hamburguesa: lo ponemos al final (derecha) */
  .hamburger {
    display: block;
    order: 3;                    /* asegura que quede a la derecha si hay flex */
    margin-left: auto;           /* empuja todo lo posible a la derecha */
    z-index: 1400;
  }

  /* Contenedor del menú (el que se muestra/oculta) */
  #main-nav {
    display: none;               /* oculto por defecto */
    position: absolute;
    top: 35%;                   /* justo debajo del header */
    right: 0;                     /* desde el borde derecho*/
    width: 85%;                   /* ← Aquí lo hacemos más ancho (antes era 50%) */
    max-width: 320px;             /* Evita que sea demasiado ancho en pantallas grandes */
    background: rgba(255, 255, 255, 0.98);
    padding: 25px 20px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    z-index: 999;
  }

  #main-nav.open {
    display: block;
  }

  #main-nav ul {
    flex-direction: column;
    align-items: center;         /* centrado o flex-start según prefieras */
    gap: 22px;
    margin: 10px 0 0 0;
    padding: 0;
    list-style: none;
  }

}
/* =====================
   SCROLL REVEAL
===================== */

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .8s ease, transform .8s ease;
}

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

/* Contenedor animable */
.box-inner {
  width: 100%;
}

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

/* =====================
   OFFER GIF
===================== */

.offer {
  position: absolute;
  top: 650px;                /* ajustable */
  z-index: 9999;            /* 🔥 CLAVE */
  display: block;
}

.offer img {
  display: block;
  max-width: 160px;
  height: auto;
  background: transparent;
  pointer-events: auto;
}

/* Posiciones */
.offer-right {
  right: 15%;
}

.offer-left {
  left: 15%;
}

.offer-center {
  left: 50%;
  transform: translateX(-50%);
}

/* Tamaños */
.offer-small img {
  max-width: 120px;
}

.offer-medium img {
  max-width: 170px;
}

/* Responsive */
@media (max-width: 768px) {
  .offer {
    top: 90%;
    right: 10%;
  }
  
  .offer-small img {
    max-width: 70px;
  }

  .offer-medium img {
    max-width: 90px;
  }
 
}
/* =====================
   BOTON PRESUPUESTO
===================== */
.hero-buttons {
  display: flex;
  justify-content: center;        /* Centra los botones horizontalmente */
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 30px;               /* Espacio superior para separar del texto */
}

.btn {
  padding: 14px 28px;             /* Botón más pequeño */
  border-radius: 50px;
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;               /* Ancho mínimo para que no quede muy angosto */
}

.btn-large {
  padding: 18px 18px;
  font-size: 1.01rem;
}
.btn-primary {
  background: #e63939;
  color: white;
}

.btn-primary:hover {
  background: #c1121f;
  transform: translateY(-4px);
}

/* Responsive */
@media (max-width: 768px) {
  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .btn {
    min-width: 280px;             /* Más ancho en móvil para mejor toque */
  }
}

/* =====================
   FOOTER
===================== */
.site-footer {
  background: #000107;
  color: #eee;
  padding: 30px 20px;
  text-align: center;
  font-size: 12px;
  margin-top: 60px;
}

.footer-text {
  font-size: 12px;
  margin-bottom: 8px;
  color: #dddcdb;
}



.footer-contacto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #f2f8f4;
  font-weight: 600;
  text-decoration: none;
  font-size: 15px;
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 20px 0;
}

/* Estilo base de los botones - Más pequeño */
.social-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;           /* Más pequeño que antes */
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.98rem;           /* Texto más pequeño */
  transition: all 0.3s ease;
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}

.social-btn img {
  width: 22px;
  height: 22px;
  filter: brightness(0) invert(1);
}

/* ================= WHATSAPP - Botón grande y verde ================= */
.whatsapp-btn {
  background-color: #25D366;
  color: white;
  padding: 11px 24px;
  font-size: 1.05rem;
}

.whatsapp-btn:hover {
  background-color: #20ba5a;
  transform: translateY(-3px);
}

/* Instagram */
.instagram-btn {
  background: linear-gradient(135deg, #f56040, #c13584, #833ab4);
  color: white;
}

.instagram-btn:hover {
  transform: translateY(-3px);
}

/* Facebook */
.facebook-btn {
  background-color: #1877F2;
  color: white;
}

.facebook-btn:hover {
  background-color: #1666d6;
  transform: translateY(-3px);
}

/* YouTube */
.youtube-btn {
  background-color: #FF0000;
  color: white;
}

.youtube-btn:hover {
  background-color: #cc0000;
  transform: translateY(-3px);
}

.tiktok-btn {
  background: linear-gradient(135deg, #000000, #1c1c1c, #ff0050);
  color: white;
}

.tiktok-btn:hover {
  transform: translateY(-3px);
}
/* Responsive */

@media (max-width: 768px) {

  .footer-main {
    flex-direction: column;
    text-align: center;
    margin-top: 80px;
  }

  .main-footer {
    padding: 50px 0 25px;
  }

  .footer-container {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }

  .footer-col {
    text-align: center;
  }

  
  .footer-social {
    gap: 8px;
  }

  .social-btn {
    padding: 9px 16px;           /* Aún más pequeño en móvil */
    font-size: 0.95rem;
    gap: 7px;
  }

  .social-btn img {
    width: 20px;
    height: 20px;
  }

  /* WhatsApp un poco más grande que los demás incluso en móvil */
  .whatsapp-btn {
    padding: 10px 22px;
    font-size: 1.02rem;
  }


  .footer-bottom-content {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
}
/* =====================================================
   BUSCADOR DE PAQUETES
===================================================== */
.packages-search-hero {
  background: #3c3835;
  padding: 30px 20px;
}

.packages-search-form {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  align-items: end;
}

.search-field label {
  color: #f57746;
  font-size: 12px;
  margin-bottom: 4px;
  display: block;
}


.search-field input,
.search-field select {
  width: 100%;
  padding: 12px;
  border-radius: 6px;
  border: none;
  font-size: 14px;
}

.search-action button {
  width: 100%;
  height: 46px;
  background: #e53935;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}

.search-action button:hover {
  background: #c62828;
}

/* =====================================================
   FILTROS ACTIVOS (CHIPS)
===================================================== */
.active-filters {
  max-width: 1200px;
  margin: 15px auto 0;
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-chip {
  background: #eee;
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.filter-chip button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

/* =====================================================
   GRID DE RESULTADOS
===================================================== */
.packages-results {
  max-width: 1200px;
  margin: 50px auto;
  padding: 0 20px;
}

.packages-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* =====================================================
   CARD PAQUETE
===================================================== */
.package-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity .45s ease,
    transform .45s ease,
    box-shadow .25s ease;
  will-change: transform;
}

.package-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.package-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,.15);
}

/* Imagen */
.package-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}

.package-card:hover .package-image img {
  transform: scale(1.05);
}

/* Badge */
.package-card .badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #ff7a00;
  color: #fff;
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 20px;
  font-weight: 600;
  z-index: 2;
}

/* Header */
.package-header {
  padding: 14px 16px 4px;
}

.package-header h3 {
  margin: 0;
  font-size: 18px;
}

.package-origin {
  font-size: 18px;
  color: #0e0d0d;
}

/* Body */
.package-body {
  padding: 12px 16px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.package-type {
  font-size: 12px;
  text-transform: uppercase;
  color: #999;
}

.package-price {
  font-size: 16px;
  font-weight: 700;
  color: #1a6b35;
}

/* Link overlay */
.package-link {
  position: absolute;
  inset: 0;
}

/* =====================================================
   SKELETON LOADERS
===================================================== */
.skeleton {
  height: 320px;
  border-radius: 16px;
  background: linear-gradient(90deg, #eee, #f5f5f5, #eee);
  background-size: 200%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  to { background-position: -200%; }
}

/* =====================================================
   LOAD MORE
===================================================== */
.load-more-container {
  text-align: center;
  margin: 40px 0;
}

#loadMoreBtn {
  padding: 14px 28px;
  border-radius: 30px;
  border: none;
  background: #e53935;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}

#loadMoreBtn:hover {
  background: #c62828;
}

/* =====================================================
   ADMIN ACTIONS
===================================================== */
.admin-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-btn {
  padding: 10px 18px;
  background: #eee;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  color: #333;
}

.admin-btn:hover {
  background: #ddd;
}

.admin-btn-primary {
  background: #e53935;
  color: #fff;
}

.admin-btn-primary:hover {
  background: #c62828;
}

/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 1100px) {
  .packages-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .packages-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .packages-search-form {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .packages-grid {
    grid-template-columns: 1fr;
  }

  .packages-search-form {
    grid-template-columns: 1fr;
  }
}
.package-overlay {
  position: absolute;
  bottom: 12px;
  left: 12px;
  color: #fff;
}

.package-overlay h3 {
  margin: 0;
  font-size: 20px;
}



.package-footer {
  padding: 14px 16px;
}

.package-meta {
  font-size: 13px;
  color: #141414;
  display: flex;
  gap: 10px;
}

.package-extras {
  margin: 8px 0;
  font-size: 14px;
}

.package-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.package-image {
  position: relative;
  height: 220px;
}

.package-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.package-title {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  color: #121224;
   
}

.package-title {
  margin: 0;
  font-family: "Playfair Display", sans-serif;
  font-size: 26px;
  line-height: 1.25;
  color: white;
  font-weight: 800;
  -webkit-text-stroke: 1.5px rgba(0, 0, 0, 0.8);
  text-shadow:
    0 2px 4px rgba(10, 9, 1, 0.6);
}


.package-footer {
  padding: 14px 16px;
}

.package-row {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  margin-bottom: 6px;
  }

.package-row.strong {
  font-weight: 600;
  font-size: 14px;
  
}

.price-row {
  align-items: center;
  color: rgb(1, 53, 1);
}

.btn-ver {
  background: #e53935;
  color: #fff;
  padding: 8px 14px;
  border-radius: 20px;
  text-decoration: none;
  font-weight: 600;
}
.package-row.top {
  align-items: center;
  font-size: 12px;
}

.package-nights {
  color: #333;
}

.package-icons {
  display: flex;
  gap: 6px;
  font-size: 16px;
}
/* =========================
   BARRA ORDENAR
========================= */
.packages-order-bar {
  max-width: 1200px;
  margin: 0 auto 35px;   /* 🔑 espacio abajo */
  padding: 0 20px;

  display: flex;
  align-items: center;
  justify-content: flex-start; /* 👈 IZQUIERDA */
  gap: 12px;
}

.packages-order-bar label {
  font-size: 14px;
  color: #555;
  font-weight: 500;
}

.packages-order-bar select {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-size: 14px;
  background: #fff;
  cursor: pointer;
}

.scope-general,
.scope-argentina {
  margin-top: 12px;
  padding: 10px;
  border-left: 3px solid #e0e0e0;
  background: #fafafa;
  border-radius: 6px;
}
.scope-argentina {
  border-left-color: #4caf50;
}

.scope-general {
  border-left-color: #2196f3;
}