:root{
      --verde-principal:#b7d94c;
      --verde-oscuro:#6aa84f;
      --azul:#0b4f6c;
      --gris:#f5f5f5;
    }
    *{margin:0;padding:0;box-sizing:border-box;font-family:Arial, Helvetica, sans-serif}
    body{background:#fff;color:#222}

    /* HEADER */
    header{
      background:var(--azul);
      color:#fff;
      text-align:center;
      padding:60px 20px;
    }
    header h1{font-size:2.4rem;margin-bottom:10px}
    header h3{font-weight:normal;margin-bottom:15px}
    header p{max-width:900px;margin:auto;font-size:.95rem}

.hero-grid {
  background-color: #ffffff;
  border-radius: 30px;
  padding: 40px;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;

  max-width: 1200px;
  margin: 0 auto;

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18);
}


    /* NAV */
    nav{background:#08384d;position:sticky;top:0;z-index:100}
    nav ul{display:flex;justify-content:center;list-style:none}
    nav a{color:#fff;text-decoration:none;padding:15px 25px;display:block;font-weight:bold}
    nav a:hover{background:var(--azul)}

    section{padding:150px 50px}
    .container{max-width:1200px;margin:auto}



    /* PROMOS */
    #promociones{text-align:center}
    #promociones h2{color:var(--azul);margin-bottom:10px}
    #promociones p{color:#555}
    
.grid-promos{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:30px;
  justify-items:center;
}

/* Ajuste para las imágenes de promociones */
.grid-promos .card img {
    width: 100%;          /* Que ocupe todo el ancho de la tarjeta */
    height: 180px;        /* Altura fija para que todas las tarjetas sean iguales */
    object-fit: contain;  /* Muestra la imagen completa sin recortarla */
    background: #f9f9f9;  /* Color de fondo por si la imagen es pequeña */
    border-radius: 8px;   /* Bordes redondeados suaves */
    margin-bottom: 10px;  /* Espacio con el texto inferior */
}


    /* CATALOGO */
    #catalogo{background:var(--verde-principal)}
    #catalogo h2{text-align:center;margin-bottom:40px;color:#234}

    .categoria{margin-bottom:60px}
    .categoria h3{
      background:var(--verde-oscuro);
      color:#fff;
      padding:10px 20px;
      display:inline-block;
      margin-bottom:25px;
      border-radius:20px;
    }

  .card{ 
  background:#fff; 
  border-radius:20px; 
  padding:15px; 
  text-align:center; 
  box-shadow:0 4px 10px rgba(0,0,0,.1);
  display: flex;
  flex-direction: column;
} 
.card{ 
  max-width: 300px; 
  margin: 0 auto; 
}
.card .media-horizontal{
  margin-top: auto;
  margin-bottom: auto;
}
/* Agrupar video horizontal + texto y centrarlos */
.card:has(.media-horizontal){
  justify-content: center;
}


/* =========================
  MULTIMEDIA – BASE
========================= */
.media{
  background:#000;
  border-radius:12px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center; 
  position: relative;
  

}

/* =========================
  VIDEO HORIZONTAL – FINAL FIX
========================= */
.media.media-horizontal{
  height: 280px;            /* ⬅ ALTURA REAL DEL VIDEO */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:#000000;
  position: relative;
  cursor: pointer;
}

.media.media-horizontal video{
  width: 100%;
  height: 100%;             /* ⬅ AQUÍ ESTÁ LA CLAVE */
  object-fit: contain;      /* NO recorta */
  display: block;
}

/* =========================
  VIDEO VERTICAL
========================= */
.media-vertical{
  width:100%;
  max-width:240px;      /* ancho fijo elegante */
  margin:0 auto;
  position: relative;
  cursor: pointer;
}

.media-vertical video{
  width:100%;
  height:auto;
  aspect-ratio:9/16;   /* fuerza formato vertical */
  object-fit:contain;  /* NO recorta */
  display:block;
  background:#000;
}


.grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
  justify-items: center;   
  align-items: stretch; 
}

/* =========================
   AJUSTE SOLO VIDEOS HORIZONTALES
========================= */

/* El card completo */
.card{
  display:flex;
  flex-direction:column;
}

/* Contenedor del video horizontal */
.media-horizontal{
  margin-top:auto;
}

/* Empuja el texto hacia arriba */
.media-horizontal + h4,
.media-horizontal + h4 + p{
  margin-bottom:auto;
}



.info-card {
  max-width: 950px;
  margin: 0 auto 60px;
  background: #ffffff;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}

.info-title {
  font-size: 2.8rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: #0b4f6c;
  margin-bottom: 50px;
}

.contact-box {
  max-width: 500px;
  margin: 0 auto;
  padding: 35px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  text-align: center;
}

.contact-box h3 {
  margin-bottom: 15px;
  color: #0b4f6c;
}

.btn-primary {
  background: #4CAF50;
  color: #fff;
  padding: 14px 28px;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  margin: 10px;
}

.btn-secondary {
  background: #ff5252;
  color: #fff;
  padding: 14px 28px;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
}



    /* Redes Sociales */
.social-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.social-links a {
  width: 48px;
  height: 48px;
  background: #f3f3f3;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.social-links a:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.social-links img {
  width: 24px;
  height: 24px;
}

    .card h4{margin:8px 0;color:#234}
    .card p{font-size:.85rem;color:#555}





    /* COMPRAR */
    #comprar{
      background:linear-gradient(180deg,#25a8a0,#6fd6cf);
      text-align:center;
    }

    #comprar h2{
      font-size: 3.2rem;   /* ⬅ tamaño grande */
      font-weight: 800;
      margin-bottom: 20px;
            color:#ffffff
    }
    #comprar p{
      font-size: 2.5rem;
      opacity: 0.95;
        color:#fd7c03
    }

    #comprar h2{margin-bottom:25px}
    .btns a{
      display:inline-block;
      margin:10px;
      padding:12px 22px;
      background:#ff0000;
      color:#ffffff;
      border-radius:25px;
      text-decoration:none;
      font-weight:bold
    }


@media (max-width:768px){
  #comprar h2{
    font-size: 2.2rem;
  }

  #comprar p{
    font-size: 1.5rem;
  }
}




    /* INFO */
    #informacion{text-align:center;background:#e9f2f2}
    #informacion h2{color:#234;margin-bottom:20px}

    footer{
      background:#f1f1f1;
      text-align:center;
      padding:25px;
      font-size:.8rem;
      color:#666
    }

/* LOADER */
.loader{
  position: fixed;
  inset: 0;
  background:#b7d94c;
  z-index: 9999;

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

/* ocultar */
.loader.hide{
  opacity:0;
  pointer-events:none;
  transition:opacity .6s ease;
}

.loader-logo img{
  width:140px;
  height:140px;
  border-radius:50%;
  object-fit:cover;
  animation:pulse 2s infinite;
}

@keyframes pulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.2)}
  100%{transform:scale(1)}
}

.loader-text{
  margin-top:16px;
  font-weight:600;
  color:#234;
}


#loader-overlay iframe{
  width: 320px;
  height: 320px;
  border: none;
}


.menu-botones{
  margin-top:50px;
  display:flex;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
}

/* === BOTÓN BASE === */
.corner-button{
  position: relative;
  padding: 12px 25px;
  border-radius: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #000;
  font-size: 0.95rem;
  transition: transform .2s, color .3s;
  overflow: hidden;
}

/* texto encima */
.corner-button span{
  position: relative;
  z-index: 2;
}

/* marco animado */
.corner-button::before,
.corner-button::after{
  content:'';
  position:absolute;
  inset:0;
  border:2px solid currentColor;
  border-radius:30px;
  transition: transform .3s;
}

.corner-button::before{
  transform: scaleX(1);
}

.corner-button::after{
  transform: scaleY(1);
}

.corner-button:hover::before{
  transform: scaleX(0);
}

.corner-button:hover::after{
  transform: scaleY(0);
}

.corner-button:hover{
  transform: translateY(-2px);
}

/* === COLORES === */
.promo{
  background:#63c44d;
  color:#000;
}

.catalogo{
  background:#63c44d;
  color:#000;
}

.info{
  background:#63c44d;
  color:#000;
}
.comprar{
  background:#c44d4d;
  color:#000;
}
.btns{
  display:flex;
  justify-content:center;
  gap:20px;
  margin-top:25px;
  flex-wrap:wrap;
}

.compra-op{
  background:#ff0000;
  color:#00a99d;
  border-radius:30px;
}
.final-buttons{
  text-align:center;
  margin-top:50px;
  display:flex;
  justify-content:center;
  gap:25px;
  flex-wrap:wrap;
}

.final{
  padding:14px 30px;
  font-size:1rem;
}

/* colores */
.catalogo-btn{
  background:#4caf50;
  color:#fff;
}

.comprar-btn{
  background:#ff5252;
  color:#fff;
}
.card{
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* =========================
   📱 MOBILE FIX (OBLIGATORIO)
========================= */
@media (max-width: 768px){

  /* TEXTO GENERAL */
  body{
    font-size: 15px;
  }

  header{
    padding:40px 15px;
  }

  header h1{
    font-size:1.8rem;
  }

  header h3{
    font-size:1rem;
  }

  /* NAV */
  nav ul{
    flex-wrap: wrap;
  }

  nav a{
    padding:12px 15px;
    font-size:.9rem;
  }

  /* SECCIONES */
  section{
    padding:50px 15px;
  }

  /* GRIDS */
  .grid,
  .grid-promos{
    grid-template-columns: 1fr;
  }

  /* CARDS */
  .card{
    max-width:100%;
  }

  /* VIDEOS HORIZONTALES */
  .media.media-horizontal{
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .media.media-horizontal video{
    width:100%;
    height:auto;
  }

  /* VIDEOS VERTICALES */
  .media-vertical{
    max-width:100%;
  }

  /* BOTONES */
  .btns,
  .menu-botones,
  .final-buttons{
    flex-direction:column;
    gap:15px;
  }

  .corner-button,
  .final{
    width:100%;
    text-align:center;
  }

  /* INFO */
  .info-card{
    padding:20px;
  }

}
/* =========================
  FIX FONDO VERDE EN MÓVIL
========================= */
html, body{
  width:100%;
  overflow-x:hidden;
}

body{
  background: var(--verde-principal);
}

/* Todas las secciones deben crecer */
section{
  width:100%;
  min-height:100%;
}

/* Catálogo SIEMPRE verde completo */
#catalogo{
  background: var(--verde-principal);
  padding-bottom:80px;
}

/* Evita colapsos de grids */
.grid,
.grid-promos{
  align-items: stretch;
}

/* Cards ocupan altura real */
.card{
  height:auto;
}

/* Quita espacios fantasmas */

@media (max-width:768px){
  body{
    background: var(--verde-principal);
  }

  section{
    background: var(--verde-principal);
  }
}

/* =========================



@media (max-width: 768px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 25px;
  }

  .media img {
    max-width: 240px;
  }
}


.hero-title{
  font-size:4.5rem;
  color:#0850ed;
  margin-bottom:40px;
  line-height:1.1;
}

/* Mobile */
@media (max-width:768px){
  .hero-title{
    font-size:2.4rem;
    word-break:break-word;
  }
}
/* INFO IMAGE FIX */
.info-card img{
  width:100%;
  max-width:100%;
  height:auto;
  display:block;
  border-radius:16px;
  object-fit:contain;
}

.top-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:40px;
}

.brand-box{
  background:#000000;
  border-radius:40px;
  padding:10px 20px;
  display:flex;
  align-items:center;
  gap:12px;
}

.brand-logo{
  width:45px;
  height:45px;
  border-radius:50%;
  object-fit:cover;
  background:#fff;
}

.brand-text{
  color:#fff;
  line-height:1;
}

.top-slogan{
  color:#000;
  margin-bottom:20px;
}

.hero-text h2{
  margin-bottom:15px;
  color:#000;
}

.hero-bold{
  font-weight:bold;
  color:#0805d8;
}

.hero-paragraph{
  margin-top:20px;
  color:#000;
}

#catalogo{
  background:#b7e35a;
  padding:90px 20px;
}

.catalogo-container{
  text-align:center;
}

.catalogo-title{
  font-size:2.4rem;
  margin-bottom:50px;
  text-align:center;
}
#promociones{
  background:#fff;
  padding:80px 20px;
}

.promociones-container{
  text-align:center;
}

#inicio{
  background:#a6dd4f;
  padding:80px 20px;
}

.inicio-container{
  max-width:1200px;
  margin:auto;
}

/* =========================
  TOP BAR
========================= */
.top-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:40px;
}

.brand-box{
  background:#305cee;
  border-radius:40px;
  padding:10px 20px;
  display:flex;
  align-items:center;
  gap:12px;
}

.brand-logo{
  width:45px;
  height:45px;
  border-radius:50%;
  object-fit:cover;
  background:#fff;
}

.brand-text{
  color:#fff;
  line-height:1;
}

.hero-slogan{
  color:#000;
  margin-bottom:20px;
}
/* =========================
   HERO
========================= */
.hero-header{
  background:#a6dd4f;
  padding:80px 20px;
}

.hero-title{
  text-align:center;
  font-size:3rem;
  margin-bottom:40px;
}

/* =========================
   CONTAINER
========================= */

.center{
  text-align:center;
}



/* =========================
   PROMOCIONES
========================= */
.promos-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

/* =========================
   CATÁLOGO
========================= */
.catalogo-section{
  background:#b7e35a;
  padding:90px 20px;
}

/* =========================
   HERO FINAL (LIMPIO)
========================= */

.hero-header{
  background:#a6dd4f;
  padding:80px 20px;
}

.hero-title{
  text-align:center;
  font-size:3.5rem;
  margin-bottom:40px;
  color:#0850ed;
  line-height:1.1;
}

.hero-grid{
  background:#fff;
  border-radius:30px;
  padding:50px;

  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;

  max-width:1200px;
  margin:0 auto;

  box-shadow:0 20px 50px rgba(0,0,0,.12);
}

/* Imagen */
.hero-grid .media{
  background:transparent;
}

.hero-grid .media img{
  width:100%;
  max-width:420px;
  margin:auto;
  display:block;
  object-fit:contain;
}

/* Texto */
.hero-text{
  text-align:center;
}

.hero-paragraph{
  color:#000;
  line-height:1.6;
  margin-bottom:20px;
}

.hero-bold{
  font-weight:bold;
  color:#0805d8;
  margin-top:15px;
}

.loader{
  opacity:0;
  pointer-events:none;
}


@media (max-width:768px){

  .hero-title{
    font-size:2.2rem;
  }

  .hero-grid{
    grid-template-columns:1fr; /* UNA sola columna */
    padding:30px 20px;
    text-align:center;
  }

  .hero-grid .media img{
    max-width:240px;
    margin:0 auto 25px;
  }

  .hero-text{
    text-align:center;
  }


  
}.loader{
  display:none;
}