:root{
      --bg:#050505;
      --dark:#0b0d10;
      --red:#ff1b12;
      --red2:#b90000;
      --gold:#f7b500;
      --white:#ffffff;
      --muted:#b8b8b8;
      --glass:rgba(255,255,255,.07);
      --border:rgba(255,255,255,.16);
      --border:rgba(255,255,255,.16);
    }

    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{
      font-family:'Poppins',sans-serif;
      background:var(--bg);
      color:var(--white);
      overflow-x:hidden;
    }

    a{text-decoration:none;color:inherit}

    .navbar{
      position:fixed;
      top:0;
      left:0;
      width:100%;
      z-index:1000;
      padding:18px 7%;
      display:flex;
      justify-content:space-between;
      align-items:center;
      background:rgba(28,0,0,.28);
      backdrop-filter:blur(14px);
      border-bottom:1px solid rgba(255,255,255,.08);
    }

    .brand{
      display:flex;
      align-items:center;
      gap:14px;
    }

    .brand img{
      width:74px;
      height:74px;
      object-fit:contain;
      background:#fff;
      border-radius:12px;
}

/* HEADER PRO */
.navbar{
  position:fixed;
  top:0;
  width:100%;
  z-index:1000;

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

  padding:10px 40px;
  background:#3b0d0d;
}

/* BRAND */
.brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.brand img{
  height:55px;
}

.brand-text h2{
  font-size:14px;
  margin:0;
}

.brand-text p{
  font-size:12px;
  color:#ffcc00;
  margin:0;
}

/* MENU */

.menu li{
  position:relative;
}

.menu a{
  color:white;
  font-size:14px;
}

/* ACTIVE */
.menu a:hover{
  color:#ff3c2f;
}

/* DROPDOWN */
.submenu{
  position:absolute;
  top:35px;
  left:0;

  background:#5a1a1a;
  border-radius:10px;

  padding:10px 0;
  display:none;
  min-width:180px;
}

/* HAMBURGUESA */
.menu-toggle{
  display:none;
  font-size:28px;
  cursor:pointer;
  color:white;
}

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

  .menu-toggle{
    display:block;
  }

  
  .menu.active{
    max-height:500px;
    padding:20px 0;
  }

}

.submenu li{
  padding:10px 20px;
}

.submenu li:hover{
  background:#7a1f1f;
}

.dropdown:hover .submenu{
  display:block;
}

@media(max-width:768px){

  .brand-text{
    display:none; /* 🔥 clave */
  }

}

/* HERO */
.nosotros-hero {
  padding-top: 120px;
  height: 23px;
  text-align: center;
  color: white;

  background:
    linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.9)),
    url('../img/bg-hero.jpg') center/cover no-repeat;

  padding: 150px 20px;
}

.nosotros-hero h1 {
  font-size: 50px;
}

.nosotros-hero p {
  color: #ccc;
}

/* CONTENIDO */
.nosotros-section {
  padding: 100px 40px;

  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 🔥 2 columnas */
  gap: 40px;
}

.nosotros-box {
  background: #111;
  padding: 30px;
  border-radius: 15px;
  border: 1px solid rgba(255,255,255,0.1);
}

.nosotros-box h2 {
  color: red;
  margin-bottom: 10px;
}

/* CTA */
.nosotros-cta {
  text-align: center;
  padding: 60px 20px;
}

.nosotros-cta h2 {
  margin-bottom: 20px;
 padding:5px;
    }

    .brand-text strong{
      display:block;
      font-size:1rem;
      letter-spacing:.5px;
      text-transform:uppercase;
    }

    .brand-text span{
      font-size:.78rem;
      color:var(--gold);
      font-weight:700;
    }

    .menu a{
      font-weight:700;
      font-size:.92rem;
      padding:10px 15px;
      border-radius:12px;
      transition:.25s ease;
    }

    .menu a:hover,
    .menu .cta-small{
      background:linear-gradient(135deg,var(--red),var(--red2));
      box-shadow:0 10px 24px rgba(255,27,18,.28);
    }


    .eyebrow{
      color:var(--red);
      font-weight:900;
      letter-spacing:2px;
      text-transform:uppercase;
      margin-bottom:16px;
    }

    h1{
      font-family:'Anton',sans-serif;
      font-size:clamp(3rem,7vw,7.4rem);
      line-height:.92;
      text-transform:uppercase;
      letter-spacing:1px;
    }

    h1 span{color:var(--red)}


.hero {
  height: 87vh;
  width: 100%;

  background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.85)),
              url('../img/bg-hero.jpg') center/cover no-repeat;

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

  padding-top: 80px; /* espacio por el navbar */
}

.hero-content {
  max-width: 900px;
}

.hero h1 {
  font-size: 64px;
  font-weight: 900;
  letter-spacing: 2px;
  margin-bottom: 20px;
}

.hero p {
  font-size: 22px;
  color: #ddd;
  margin-bottom: 30px;
}

    .hero-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.btn-red {
  background: #ff1a12;
  padding: 15px 40px;
  border-radius: 6px;
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
  transition: 0.3s;
}

.btn-red:hover {
  transform: scale(1.05);
  background: #d90000;
}

    .hero-card{
      background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.03));
      border:1px solid var(--border);
      border-radius:32px;
      padding:30px;
      box-shadow:0 28px 80px rgba(0,0,0,.55);
    }

    .hero-card h3{
      color:var(--gold);
      font-size:1.4rem;
      margin-bottom:18px;
    }

    .hero-list{
      display:grid;
      gap:14px;
    }

    .hero-list div{
      padding:16px;
      border-radius:18px;
      background:rgba(0,0,0,.42);
      border:1px solid rgba(255,255,255,.08);
      font-weight:700;
    }

    section{
      padding:90px 7%;
    }

    .section-title{
      text-align:center;
      margin-bottom:50px;
    }

    .section-title span{
      color:var(--red);
      font-weight:900;
      letter-spacing:2px;
      text-transform:uppercase;
    }

    .section-title h2{
      font-family:'Anton',sans-serif;
      font-size:clamp(2.4rem,5vw,4.8rem);
      text-transform:uppercase;
      margin-top:10px;
    }

    .section-title p{
      color:var(--muted);
      max-width:720px;
      margin:14px auto 0;
      line-height:1.7;
    }

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

    .plan{
      background:linear-gradient(180deg,#080c10,#030506);
      border:1px solid var(--border);
      border-radius:26px;
      padding:28px 22px;
      min-height:430px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      position:relative;
      overflow:hidden;
      transition:.25s ease;
    }

    .plan:hover{transform:translateY(-8px);border-color:var(--red)}
    .plan.featured{border-color:var(--gold);box-shadow:0 0 0 1px rgba(247,181,0,.35),0 22px 55px rgba(247,181,0,.12)}

    .plan::before{
      content:"";
      position:absolute;
      top:0;left:0;width:100%;height:5px;
      background:linear-gradient(90deg,var(--red),var(--gold));
    }

    .plan-icon{font-size:2.7rem;text-align:center;margin-bottom:8px}
    .plan h3{text-align:center;font-size:1.28rem;color:var(--gold);margin-bottom:12px}
    .price{text-align:center;font-size:1.35rem;font-weight:900;margin-bottom:20px}
    .plan ul{list-style:none;display:grid;gap:10px;color:#ddd;margin-bottom:24px}
    .plan li::before{content:"✓";color:var(--red);font-weight:900;margin-right:8px}

    .about{
      background:radial-gradient(circle at top left,rgba(255,27,18,.14),transparent 34%),#070707;
    }

    .about-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:34px;
      align-items:center;
    }

    .about-box{
      background:var(--glass);
      border:1px solid var(--border);
      border-radius:28px;
      padding:34px;
    }

    .about-box h2{
      font-family:'Anton',sans-serif;
      font-size:3.6rem;
      line-height:1;
      text-transform:uppercase;
      margin-bottom:20px;
    }

    .about-box h2 span{color:var(--red)}
    .about-box p{color:#ddd;line-height:1.8;margin-bottom:16px}

    .stats{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:18px;
    }

    .stat{
      background:#050505;
      border:1px solid var(--border);
      border-radius:22px;
      padding:26px;
      text-align:center;
    }

    .stat strong{
      display:block;
      color:var(--gold);
      font-size:2rem;
      font-weight:900;
    }

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

    .promo{
      background:linear-gradient(180deg,#090d12,#030303);
      border:1px solid var(--border);
      border-radius:26px;
      padding:30px;
      text-align:center;
      min-height:320px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }

    .promo h3{color:var(--gold);font-size:1.5rem;margin-bottom:14px}
    .promo p{color:#e8e8e8;font-size:1.1rem;line-height:1.55;font-weight:700}

    .cta-final{
      text-align:center;
      background:
        linear-gradient(rgba(0,0,0,.82),rgba(0,0,0,.92)),
        url('assets/img/foar-cta.jpg') center/cover no-repeat;
    }

    .cta-final h2{
      font-family:'Anton',sans-serif;
      font-size:clamp(2.6rem,6vw,5.8rem);
      text-transform:uppercase;
      line-height:1;
    }

    .cta-final h2 span{color:var(--red)}
    .cta-final p{color:#ddd;max-width:720px;margin:20px auto 32px;line-height:1.7}

    footer{
      padding:30px 7%;
      text-align:center;
      color:#aaa;
      border-top:1px solid rgba(255,255,255,.08);
      background:#030303;
    }

    .whatsapp-float{
      position:fixed;
      right:22px;
      bottom:22px;
      z-index:1200;
      width:62px;
      height:62px;
      border-radius:50%;
      background:#25d366;
      color:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:2rem;
      box-shadow:0 16px 34px rgba(37,211,102,.35);
      animation:pulse 1.7s infinite;
    }

    @keyframes pulse{
      0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}
      70%{box-shadow:0 0 0 18px rgba(37,211,102,0)}
      100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
    }

    @media(max-width:1050px){
      .plans{grid-template-columns:repeat(2,1fr)}
      .hero{grid-template-columns:1fr}
      .hero-card{max-width:640px}
    }

    @media(max-width:760px){
      .navbar{
        padding:12px 18px;
      }
      .brand img{width:58px;height:58px}
      .brand-text strong{font-size:.82rem}
      .brand-text span{font-size:.68rem}
      
      .hero{
        min-height:calc(100vh - 80px);;
        padding:40px 20px 40px;
        text-align:center;
        background-position:center;
      }
      .eyebrow{font-size:.8rem;line-height:1.5}
      h1{font-size:3.6rem}
      .hero p{font-size:1rem;margin:20px auto 28px}
      .hero-actions{justify-content:center}
      .btn{width:100%;max-width:320px}
      .hero-card{padding:22px;border-radius:24px;text-align:left}
      section{padding:70px 22px}
      .plans,.promos,.about-grid{grid-template-columns:1fr}
      .plan{min-height:auto}
      .about-box{padding:26px}
      .about-box h2{font-size:2.7rem;text-align:center}
      .stats{grid-template-columns:1fr}
      .whatsapp-float{width:56px;height:56px;right:16px;bottom:16px}
    }
    
    /* HEADER */
/* NAVBAR */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(40, 20, 20, 0.9);
  
  padding: 15px 50px;
  z-index: 1000;
}

.menu {
  display: flex;
  list-style: none;
  gap: 25px;
  align-items: center;
}

.menu li {
  position: relative;
}

.menu a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  padding: 10px;
  transition: 0.3s;
}

/* EFECTO HOVER LINEA */
.menu a::after {
  content: "";
  display: block;
  height: 2px;
  width: 0;
  background: #ff1a12;
  transition: 0.3s;
}

.menu a:hover::after {
  width: 100%;
}

/* DROPDOWN */
.dropdown .submenu {
  position: absolute;
  top: 120%;
  left: 0;

  background: rgba(60, 20, 20, 0.95);
  border-radius: 10px;
  padding: 10px 0;

  list-style: none;
  min-width: 200px;

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: 0.3s;
}

/* ITEMS */
.submenu li a {
  display: block;
  padding: 10px 20px;
  white-space: nowrap;
}

.submenu li a:hover {
  background: rgba(255, 26, 18, 0.2);
}

/* ACTIVAR DROPDOWN */
.dropdown:hover .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.hero {
  height: 100vh;
  background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.8)),
              url('../img/bg-hero.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav a:hover {
  border-bottom: 2px solid white;
}

/* HERO AJUSTADO */
.hero {
  height: 100vh;
  background: url('../img/bg-hero.jpg') center/cover no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 80px; /* para que no tape el header */
}

.hero h1 {
  font-size: 60px;
  letter-spacing: 2px;
}

.hero p {
  margin: 20px 0;
  font-size: 20px;
  color: #ddd;
}

/* BOTONES */
.buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.btn.red {
  background: #ff1a12;
  padding: 15px 30px;
  border-radius: 5px;
  color: white;
  text-decoration: none;
  font-weight: bold;
  transition: 0.3s;
}
    
.btn.red:hover {
  transform: scale(1.05);
}

@media (max-width: 768px) {

  .header {
    flex-direction: column;
    padding: 10px;
  }

  .nav {
    margin-top: 0px;
  }

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

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

  .buttons {
    flex-direction: column;
  }

}

.header {
  position: relative;
  top: 0;
  width: 100%;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(8px);
  padding: 15px 0;
  z-index: 1000;
}

.container {
  width: 90%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo img {
  height: 50px;
  max-width:250px;
}

.nav a {
  color: white;
  margin-left: 25px;
  text-decoration: none;
  font-weight: 500;
  position: relative;
}

.nav a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  background: #ff3c00;
  left: 0;
  bottom: -5px;
  transition: 0.3s;
}

.nav a:hover::after {
  width: 100%;
}

/* ===== HERO LIMPIO Y FUNCIONAL ===== */

.hero {
  height: 100vh;
  width: 100%;

  background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.8)),
              url('../img/bg-hero.jpg') center/cover no-repeat;

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

  padding-top: 80px; /* evita que el header tape */
}

.overlay {
  width: 100%;
  height: 100%;

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

  color: #fff;
}

.hero h1 {
  font-size: 60px;
  font-weight: 800;
  letter-spacing: 2px;
}

.hero h1{
  margin-top: -40px;
}

.hero p {
  margin: 20px 0;
  font-size: 20px;
  color: #ddd;
}

.logo {
  width: 100px;
  margin-bottom: 20px;
}

/* BOTÓN HAMBURGUESA */
.menu-toggle {
  display: none;
  font-size: 28px;
  color: white;
  cursor: pointer;
}

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

  .menu-toggle {
    display: block;
  }

  .menu {
    position: absolute;
    top: 80px;
    right: 0;
    width: 100%;

    background: rgba(20, 0, 0, 0.95);
    flex-direction: column;
    align-items: center;
    gap: 15px;

    max-height: 0;
    overflow: hidden;
    transition: 0.4s ease;
  }

  .menu.active {
    max-height: 500px;
    padding: 20px 0;
  }

  /* DROPDOWN EN MOBILE */
  .dropdown .submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }

  .dropdown.active .submenu {
    display: block;
  }
}

.menu {
  display: flex;
  gap: 20px;
  list-style: none;
}

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

  .menu-toggle {
    display: block;
  }

  .menu {
    position: absolute;
    top: 80px;
    left: 0;
    width: 100%;

    background: rgba(20, 0, 0, 0.95);

    flex-direction: column;
    align-items: center;

    max-height: 0;
    overflow: hidden;

    transition: 0.4s ease;
  }

  .menu.active {
    max-height: 500px;
    padding: 20px 0;
  }
}

.menu-toggle {
  display: none;
  font-size: 28px;
  color: white;
  cursor: pointer;
}

@media (max-width: 768px) {

  .menu {
    z-index: 9999;
  }

  .menu-toggle {
    z-index: 10000;
  }
}@media (max-width: 768px) {

  .menu {
    z-index: 9999;
  }

  .menu-toggle {
    z-index: 10000;
  }
}

.menu-toggle {
  display: none;
  font-size: 28px;
  color: white;
  cursor: pointer;
}

/* 📱 SOLO EN MÓVIL */
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }
}

/* HERO PLANES */
.planes-hero {
  padding-top: 40px;
  height: 30px;
  text-align: center;
  background: black;
  color: white;
}

.planes-hero h1 {
  font-size: 60px;
}

.planes-hero span {
  color: red;
}

/* GRID PLANES */
.planes-section {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 50px;
}

/* CARD */
.plan-card {
  background:
      linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.9)),
    url('../img/bg-hero.jpg') center/cover;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 20px;
  padding: 25px;
  text-align: center;
}

.plan-card h3 {
  color: red;
}

.price {
  font-size: 20px;
  margin: 15px 0;
}

.plan-card ul {
  list-style: none;
  margin-bottom: 20px;
}

.plan-card li {
  margin: 8px 0;
}

.featured {
  border: 2px solid gold;
}

/* BOTÓN */
.btn-red {
  background: red;
  padding: 12px 25px;
  color: white;
  border-radius: 6px;
  display: inline-block;
}

/* MOBILE */
@media (max-width: 768px) {
  .planes-section {
    grid-template-columns: 1fr;
  }
}

/* CONTENEDOR LOGO + TEXTO */
.logo-box {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* IMAGEN */
.logo-box img {
  width: 70px;
  height: 70px;
  border-radius: 12px;
}

/* TEXTO */
.logo-text h2 {
  color: #fff;
  font-size: 20px;
  margin: 0;
}

.logo-text p {
  color: #ffcc00;
  font-size: 14px;
  margin: 0;
}

/* INICIACIÓN */.plan-card {
  transition: 0.3s;
}

.plan-card:hover {
  transform: translateY(-10px);
}

/* bordes por plan */
.iniciacion {
  border: 1px solid #ff1a12;
}

.bronce {
  border: 1px solid #cd7f32;
}

.plata {
  border: 1px solid #c0c0c0;
}

.oro {
  border: 1px solid #ffd700;
}

.bronce * {
  color: #cd7f32;
}

.plata * {
  color: #c0c0c0;
}

.oro * {
  color: #ffd700;
}

.plan-card p,
.plan-card li {
  opacity: 0.85;
}

.iniciacion h3 {
  color: #ff1a12;
}

/* BRONCE */
.bronce h3 {
  color: #cd7f32;
}

/* PLATA */
.plata h3 {
  color: #c0c0c0;
}

/* ORO */
.oro h3 {
  color: #ffd700;
}

.iniciacion * {
  color: #ff1a12;
}

.bronce * {
  color: #cd7f32;
}

.plata * {
  color: #c0c0c0;
}

.oro * {
  color: #ffd700;
}

.plan-card p,
.plan-card li {
  opacity: 0.85;
}

.plan-card h3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.icon {
  font-size: 28px;
}

.icon-img {
  width: 30px;
  margin-bottom: 5px;
}

.iniciacion .icon { color: #ff1a12; }
.bronce .icon { color: #cd7f32; }
.plata .icon { color: #c0c0c0; }
.oro .icon { color: #ffd700; }

body{
  background:#050505;
}

.premios-cta {
  margin: 80px 20px;
  padding: 60px 20px;
  text-align: center;

  border-radius: 20px;

  background: linear-gradient(135deg, #000000, #1a0000);
  border: 2px solid gold;
}

.premios-content h2 {
  font-size: 40px;
  color: gold;
  margin-bottom: 15px;
}

.premios-content p {
  color: #ddd;
  margin-bottom: 25px;
  font-size: 18px;
}

.btn-premios {
  background: gold;
  color: black;
  padding: 15px 35px;
  border-radius: 8px;
  font-weight: bold;
  text-decoration: none;
  transition: 0.3s;
}

.btn-premios:hover {
  transform: scale(1.08);
  background: #ffcc00;
}

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: rgba(0,0,0,0.8);

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

  opacity: 0;
  pointer-events: none;
  transition: 0.3s;
}

.popup.active {
  opacity: 1;
  pointer-events: all;
}

.popup-content {
  background: #111;
  padding: 40px;
  border-radius: 20px;
  text-align: center;
  border: 2px solid gold;
  color: white;
}

.popup-content h2 {
  color: gold;
}

.popup-content button {
  margin-top: 20px;
  padding: 12px 25px;
  background: red;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.contador {
  margin: 15px 0;
  color: #ff4444;
  font-weight: bold;
}

.btn-whatsapp {
  background: #25D366;
  color: white;
}

.btn-whatsapp:hover {
  transform: scale(1.05);
  background: #1ebe5d;
}
.btn-popup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  width: 100%;
  max-width: 260px;

  padding: 15px 30px;
  border-radius: 8px;

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

  text-decoration: none;
  cursor: pointer;
  transition: 0.3s;
}

.btn-cerrar {
  background: #ff1a12;
  color: white;
  border: none;
}

.btn-cerrar:hover {
  transform: scale(1.05);
  background: #cc0000;
}

/* HERO */
.nosotros-hero {
  padding-top: 120px;
  text-align: center;
  color: white;

  background:
    linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.9)),
    url('../img/bg-hero.jpg') center/cover no-repeat;

  padding: 150px 20px;
}

.nosotros-hero h1 {
  font-size: 50px;
}

.nosotros-hero p {
  color: #ccc;
}

body {
  padding-top: 0px;
}

/* CONTENIDO */

.nosotros-section {
  margin-top: 40px;
}

.nosotros-section {
  padding: 80px 20px;
  padding-top: 200px;
  display: grid;
  gap: 30px;
}

.nosotros-box {
  width: 300px;
  background: #111;
  padding: 40px;
  border-radius: 15px;
  border: 1px solid rgba(255,255,255,0.1);
}

.nosotros-box h2 {
  color: red;
  margin-bottom: 10px;
}

.nosotros-box {
  margin-bottom: 40px;
}

/* CTA */
.nosotros-cta {
  text-align: center;
  padding: 60px 20px;
}

.nosotros-cta h2 {
  margin-bottom: 20px;
}

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* 🔥 CLAVE */
}

@media (max-width: 768px) {

  .navbar {
    padding: 10px 20px;
  }

  .logo-box {
    width: 100%;
    justify-content: space-between;
  }

  .logo-text h2 {
    font-size: 14px;
  }

  .logo-text p {
    font-size: 11px;
  }

  .menu {
    width: 100%;
    flex-direction: column;
    align-items: center;
  }

}

/* GRID PRINCIPAL */
.nike-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr; /* izquierda domina */
  gap: 30px;

  max-width: 1100px;
  margin: 0 auto;
}

/* CARD GRANDE (marca) */
.box-grande{
  grid-column: span 1;
  grid-row: span 2; /* 🔥 ocupa dos filas */
}

/* VALORES FULL */
.box-full{
  grid-column: span 2;
}

/* CTA potente */
.cta-card{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;

  background:
    linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.9)),
    url('../img/bg-hero.jpg') center/cover;

  border:1px solid rgba(255,0,0,0.3);

  box-shadow:
    0 0 30px rgba(255,0,0,0.3);
}

.cta-card h2{
  margin-bottom:15px;
}

.cta-card .btn-red{
  padding:12px 25px;
}

@media(max-width:768px){

  .nike-grid{
    grid-template-columns: 1fr;
  }

  .box-grande,
  .box-full{
    grid-column: span 1;
    grid-row: span 1;
  }

}

.box-grande p{
  margin-bottom: 10px;
  line-height: 1.5; /* 🔥 mejora lectura */
}

.box-mision p,
.box-vision p{
  margin-bottom: 10px; /* 🔥 espacio entre párrafos */
  line-height: 1.4;     /* mejora lectura */
}

.nosotros-box p{
  margin-bottom: 10px;
  line-height: 1.4;
}

.box-grande p:last-child{
  margin-bottom: 0;
}

.valores-list{
  list-style: none;
  padding: 0;
}

.valores-list li{
  margin-bottom: 10px;
  color: #ccc;
  line-height: 1.5;
}

/* animación reveal */
.reveal{
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  transition: all 0.7s ease;
}

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

/* títulos con glow */
.nosotros-box h2{
  color:#ff1a1a;
  text-shadow: 0 0 10px rgba(255,0,0,0.4);
  letter-spacing:1px;
}

/* cards más “premium” */
.nosotros-box{
  background:
      linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.9)),
    url('../img/fotoplanes.jpg') center/cover;
  border-radius: 25px;
  padding: 40px;

  box-shadow:
    0 25px 50px rgba(0,0,0,0.8),
    0 0 25px rgba(255,0,0,0.2);

  transition: all 0.4s ease;
}

.nosotros-box:hover{
  transform: translateY(-12px) scale(1.02);
  box-shadow:
    0 35px 70px rgba(0,0,0,0.9),
    0 0 40px rgba(255,0,0,0.4);
}

/* overlay */
.popup{
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: rgba(0,0,0,0.9);

  display:none;
  z-index:9999;
}

        /* contenido FULL WIDTH */
.popup-content{
  width:100%;
  height:100%;

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

  padding:40px;
  text-align:center;
}

/* título brutal */
.popup-content h2{
  font-size:30px;
  margin-bottom:20px;
}

/* texto premio */
#premio-texto{
  font-size:16px;
  margin-bottom:20px;
}

/* botones grandes */
.btn-popup{
  padding:15px 30px;
  border-radius:30px;
  font-size:18px;
  margin-top:10px;
}

.popup-content{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:40px;
  align-items:center;
}

.popup-content h2{
  grid-column: span 2;
}

.nosotros-section{
  display: grid;
  grid-template-columns: 1fr 1fr; /* 🔥 2 columnas */
  gap: 40px;

  padding: 120px 40px;
  width: 100%;
}

.nosotros-box{
  width: 100%;
}

.nosotros-section{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 40px;
}

@media(max-width:768px){
  .nosotros-section{
    grid-template-columns: 1fr; /* 🔥 una debajo de otra */
  }
}

.nosotros-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 40px;
}

.cta-box{
  background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.9)),
              url('../img/bg-hero.jpg') center/cover;

  border-radius: 25px;
  padding: 40px;

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

  text-align:center;

  box-shadow:
    0 20px 40px rgba(0,0,0,0.8),
    0 0 30px rgba(255,0,0,0.3);
}

.cta-box h2{
  font-size:28px;
  margin-bottom:20px;
}

.btn-red{
  background:#ff1b12;
  padding:15px 30px;
  border-radius:10px;
  color:white;
  font-weight:bold;
}

@media(max-width:768px){
  .nosotros-row{
    grid-template-columns: 1fr;
  }
}

/*********************************************
CONTACTO
********************************************/
.contacto-section{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:90vh;
  padding:40px;
}

.contacto-card{
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(12px);

  padding:40px;
  border-radius:20px;

  width:100%;
  max-width:400px;

  box-shadow:
    0 20px 50px rgba(0,0,0,0.8),
    0 0 25px rgba(255,0,0,0.2);
}

/* FORM */
#formContacto{
  display:flex;
  flex-direction:column;
  gap:12px;
}

#formContacto input,
#formContacto textarea{
  padding:12px;
  border-radius:10px;
  border:none;
  outline:none;
}

#formContacto textarea{
  resize:none;
  height:100px;
}

#formContacto button{
  margin-top:10px;
}

/*********************************************
  NOSOTROS
********************************************/
.nosotros-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  width: 100%;
}

.cta-card{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  text-align:center;

  background:
    linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.9)),
    url('../img/bg-hero.jpg') center/cover;

  box-shadow:
    0 25px 60px rgba(0,0,0,0.9),
    0 0 40px rgba(255,0,0,0.4);
}

.cta-title{
  font-size:32px;
  color:#ff1a1a;
  margin-bottom:25px;
  line-height:1.2;
}

.cta-card .btn-red{
  padding:15px 35px;
  font-size:18px;
  border-radius:12px;
}

.nosotros-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;

  max-width: 1100px;   /* 🔥 controla ancho */
  margin: 0 auto;      /* 🔥 centra */
}

.nosotros-box{
  height: 100%;
}

.cta-card{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  text-align:center;

  padding:60px 30px; /* 🔥 más aire */

  background:
    linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.9)),
    url('../img/bg-hero.jpg') center/cover;

  border:1px solid rgba(255,0,0,0.3);
}

/* FONDO */
.popup-content{
  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;

  background: #0a0a0a;
  border-radius: 25px;

  padding: 14px 18px; /* 🔥 menos padding */
  max-width: 320px;
  height: 420px;
  box-shadow:
    0 0 15px rgba(255,215,0,0.3),
    0 10px 30px rgba(0,0,0,0.8);

  gap: 4px; /* 🔥 reduce altura total */
}

canvas{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100000 !important; /* 🔥 por encima del popup */
  pointer-events: none;
}

/*************************************
 FOOTER
*************************************/
.footer-links{
  margin-top:10px;
}

.footer-links a{
  margin:0 10px;
  color:#ccc;
}

.footer-links a:hover{
  color:#ff1b12;
}

.btn-wa-float{
  position: fixed;
  bottom: 20px;
  right: 20px;

  width: 60px;
  height: 60px;

  background: #25D366;
  color: white;

  border-radius: 50%;

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

  font-size:28px;

  box-shadow:
    0 10px 25px rgba(0,0,0,0.4),
    0 0 15px rgba(37,211,102,0.4);

  z-index: 999999;

  transition: 0.3s;
}

.btn-wa-float:hover{
  transform: scale(1.1);
}

/* 🔥 EFECTO PULSE */
.btn-wa-float::after{
  content:"";
  position:absolute;

  width:100%;
  height:100%;

  border-radius:50%;
  background:#25D366;

  animation: pulseWA 1.8s infinite;
  z-index:-1;
}

@keyframes pulseWA{
  0%{
    transform: scale(1);
    opacity:0.6;
  }
  100%{
    transform: scale(1.8);
    opacity:0;
  }
}

body{
  overflow-x: hidden;
}

section{
  padding: 80px 20px;
}

/***************************************
  ENTRENAMIENTOS
***************************************/

.entrenamientos-section{
  padding:100px 40px;
  text-align:center;
}

.titulo-seccion{
  font-size:40px;
  margin-bottom:40px;
  color:#ff1b12;
}

/* GRID */
.entrenamientos-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
  gap:30px;
}

/* CARD */
.entrenamiento-card{
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(10px);

  padding:25px;
  border-radius:20px;

  box-shadow:
    0 15px 40px rgba(0,0,0,0.8);

  transition:0.3s;
}

.entrenamiento-card:hover{
  transform:translateY(-10px);
}

/* DESTACADO */
.destacado{
  border:2px solid #f7b500;

  box-shadow:
    0 0 30px rgba(255,215,0,0.4);
}

/* TEXTO */
.entrenamiento-card h3{
  color:#ff1b12;
  margin-bottom:10px;
}

.objetivo{
  font-size:14px;
  color:#ccc;
  margin-bottom:15px;
}

.entrenamiento-card ul{
  list-style:none;
  margin-bottom:20px;
}

.entrenamiento-card li{
  margin:5px 0;
  color:#ddd;
}

#chat-box{
  height:200px;
  overflow-y:auto;
  margin-bottom:10px;
  text-align:left;
}

.calendario{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:10px;
  margin:15px 0;
}

.dia{
  padding:5px;
  border:none;
  border-radius:10px;
  background:#111;
  color:#fff;
  cursor:pointer;
}

.dia:hover{
  background:#ff1b12;
}

.popup-calendario{  
  background:#000;
  border-radius:25px;

  padding:30px;
  max-width:350px;
  width:90%;

  border:2px solid #f7b500;

  box-shadow:
    0 0 20px rgba(255,215,0,0.4),
    0 0 40px rgba(255,0,0,0.2);

  text-align:center;
}

.popup.active{
  display: flex;
}

.calendario.activo{
  display:grid;
}

.calendario{
  display: none;
}

.calendario.activo{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap:10px;
}

.calendario {
  display: none; /* JS lo cambia a grid */
  margin-top: 20px;
  padding: 15px;
  background: #111;
  border-radius: 12px;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.calendario .dia {
  padding: 5px;
  background: #222;
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  transition: 0.3s;
  color: #fff;
  font-weight: bold;
}

.calendario .dia:hover {
  background: #ff4d00;
  transform: translateY(-3px);
}

#chat-box {
  width: 100%;
  max-width: 600px;
  margin-bottom: 20px;
  text-align: left;
}

.calendario {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.popup-content {
  width: 100%;
  max-width: 700px;
  height: auto;

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

  padding: 40px;
  overflow-y: auto;
}

.calendario{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:15px;
  margin-top:20px;
}

.popup.active{
  display:flex;
}

.popup-calendar{
  z-index:99999;
}

.select-objetivo {
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  background: #1a1a1a;
  color: white;
  border: 1px solid #333;
  font-size: 1rem;
  margin-bottom: 15px;
  cursor: pointer;
}

.select-objetivo option {
  background: #111;
  color: white;
}

/* POPUP EN DOS COLUMNAS */
#ia-popup .popup-content {
  width: 90%;
  max-width: 900px;

  display: grid;
  grid-template-columns: 1fr 1fr; /* Chat izquierda / Calendario derecha */
  gap: 30px;

  padding: 40px;
  height: auto;
  overflow-y: auto;
  align-items: start;
}

#chat-box {
  width: 100%;
  text-align: left;
}

#rutina-box {
  grid-column: 1; /* debajo del chat */
  margin-top: 20px;
  background: #111;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #333;
}

.calendario {
  display: none; /* se activa con JS */
  width: 100%;
  background: #0d0d0d;
  padding: 20px;
  border-radius: 15px;
  border: 1px solid #222;

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

  max-height: 350px;
  overflow-y: auto;
}

@media(max-width: 768px) {
  #ia-popup .popup-content {
    grid-template-columns: 1fr; /* se apilan */
  }

  #rutina-box {
    grid-column: 1;
  }
}

/* ============================
   POPUP IA EN DOS COLUMNAS
   ============================ */
#ia-popup .popup-content {
  width: 90%;
  max-width: 900px;

  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 30px;

  padding: 40px;
  height: auto;
  overflow-y: auto;
  align-items: start;
}

/* Chat a la izquierda */
#chat-box {
  width: 100%;
  text-align: left;
}

/* Calendario a la derecha */
#ia-popup .calendario {
  display: none;
  width: 100%;
  background: #0d0d0d;
  padding: 20px;
  border-radius: 15px;
  border: 1px solid #222;

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

  max-height: 350px;
  overflow-y: auto;
}

/* Rutina debajo del chat */
#rutina-box {
  grid-column: 1;
  margin-top: 20px;
  background: #111;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #333;
}

/* Responsive */
@media(max-width: 768px) {
  #ia-popup .popup-content {
    grid-template-columns: 1fr !important;
  }

  #rutina-box {
    grid-column: 1;
  }
}


.popup.active{
  display: flex;
}

/* 🔥 POPUP CALENDARIO */
#calendar-popup{
  z-index: 99999;
}



/* 🔥 GRID DIAS */
.calendario{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 5px;

  margin-top: 5px;
}

.dia{
  border: none;
  border-radius: 12px;

  padding: 5px;

  background: #111;
  color: #fff;

  cursor: pointer;
  transition: .3s;
}

.dia:hover{
  background: red;
  transform: scale(1.05);
}

.popup.active{
  display:flex;
}

.popup-calendar{
  z-index:99999;
}

.calendario{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:5px;

  margin-top:5px;
}

.dia{
  padding:10px;

  border:none;
  border-radius:12px;

  background:#111;
  color:#fff;

  cursor:pointer;
}

.dia:hover{
  background:red;
}

.popup.active{
  display:flex;
}

#calendar-window{
  position:absolute;

  top:50%;
  left:50%;

  transform:translate(-50%,-50%);

  cursor:default;
}

.drag-bar{

  width:100%;

  padding:14px;

  border-radius:14px;

  margin-bottom:20px;

  background:linear-gradient(145deg,#151515,#222);

  color:#ffd700;

  font-weight:700;

  cursor:move;

  text-align:center;

  user-select:none;
}

.ia-content{

  width:420px;
  max-width:92%;

  padding:30px;

  border-radius:26px;

  background:
  linear-gradient(
    145deg,
    #050505,
    #101010
  );

  border:1px solid rgba(255,215,0,.15);

  display:flex;
  flex-direction:column;

  gap:18px;
}

/* 🔥 TOP */
.ia-top{

  display:flex;
  flex-direction:column;

  align-items:center;

  text-align:center;
}

.ia-icon{

  width:70px;
  height:70px;

  border-radius:20px;

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

  font-size:32px;

  background:
  linear-gradient(
    145deg,
    #d40000,
    #ff2a2a
  );

  margin-bottom:15px;
}

.ia-top h2{
  color:#ffd700;
  margin:0;
}

.ia-top p{
  color:#aaa;
  margin-top:8px;
}

/* 🔥 SELECT */
.select-objetivo{

margin-top: 15px;
margin-right: 150px ;
  width:90%;
  max-width:500px;
  height:58px;

  border:none;
  border-radius:16px;

  background:#181818;

  color:#fff;

  padding:0 18px;

  font-size:15px;

  outline:none;
}

/* 🔥 CHAT */
#chat-box{

  min-height:50px;

  background:222;

  border-radius:16px;

  padding:16px;

  color:#fff;
}


.ia-content{

  display:flex !important;

  flex-direction:column !important;

  align-items:stretch !important;

  justify-content:flex-start !important;

  gap:8px !important;
}

/* 🔥 FORZAR TODO EN BLOQUE */
.ia-content > *{
    width:90%;
    max-width:500px;
}

/* 🔥 TOP CENTRADO */
.ia-top{

  display:flex !important;

  flex-direction:column !important;

  align-items:center !important;

  text-align:center;
}

#calendar-popup{

  position:relative;

  top:50%;
  right:300px;
  width:250px;

  transform:translateY(-50%);

  z-index:99999;

  display:none;
}

#calendar-popup.active{
  display:block;
}

/*aNIMACION*/
#calendar-popup.active{
  animation:slideRight .35s ease;
}

@keyframes slideRight{

  from{
    opacity:0;
    transform:translate(50px,-50%);
  }

  to{
    opacity:1;
    transform:translate(0,-50%);
  }

}

.ia-content{

  display:flex !important;

  flex-direction:column !important;

  align-items:center !important;

  justify-content:flex-start !important;

  gap:18px !important;

  width:420px !important;

  max-width:92% !important;
}

/* 🔥 TODO EN BLOQUE */
.ia-content > *{

  width:100% !important;
}

/* 🔥 TOP */
.ia-top{

  display:flex !important;

  flex-direction:column !important;

  align-items:center !important;

  text-align:center !important;
}

/* 🔥 BOTÓN */
#btn-ia{

  height:56px !important;
}

/* 🔥 SELECT */
.select-objetivo{

  width:100% !important;
}

#ia-popup .select-objetivo{

  width:100% !important;

  display:block !important;

  margin:0 auto !important;

  position:relative !important;

  left:auto !important;
  right:auto !important;

  float:none !important;
}

#ia-popup{

  display:flex !important;

  justify-content:center !important;

  align-items:center !important;
}

/* 🔥 CONTENEDOR REAL */
#ia-popup .popup-content{

  display:flex !important;

  flex-direction:column !important;

  grid-template-columns:none !important;

  width:420px !important;

  max-width:92% !important;

  gap:18px !important;
}

/* 🔥 TODOS LOS HIJOS */
#ia-popup .popup-content > *{

  width:100% !important;
}

/* 🔥 TOP */
#ia-popup .ia-top{

  display:flex !important;

  flex-direction:column !important;

  align-items:center !important;

  justify-content:center !important;

  text-align:center !important;
}

#ia-window{

  position:absolute;

  top:50%;
  left:50%;

  transform:translate(-50%,-50%);
}

/* 🔥 BARRA */
.drag-bar-ia{

  width:100%;

  padding:14px;

  margin-bottom:18px;

  border-radius:14px;

  background:
  linear-gradient(
    145deg,
    #151515,
    #222
  );

  color:#ffd700;

  font-weight:700;

  text-align:center;

  cursor:move;

  user-select:none;
}

#ia-popup{
  z-index:9999;
}

#calendar-popup{
  z-index:99999;
}

#calendar-popup{

  position:fixed;
width: 450px;
  top:320px;
  left:600px;

  z-index:99999;

  display:none;
}

#calendar-popup.active{
  display:block;
}

.rutina-card{

  margin-top:18px;

  padding:20px;

  border-radius:18px;

  background:
  linear-gradient(
    145deg,
    #111,
    #1b1b1b
  );

  cursor:pointer;

  transition:.3s;
}

.rutina-card:hover{

  transform:translateY(-4px);

  background:
  linear-gradient(
    145deg,
    #c40000,
    #ff2a2a
  );
}

.ver-ejercicios{

  display:block;

  margin-top:12px;

  color:#ffd700;

  font-size:14px;
}

.ejercicios-box{

  margin-top:20px;
}

.ejercicio-btn{

  width:100%;

  margin-top:10px;

  padding:14px;

  border:none;

  border-radius:14px;

  background:#151515;

  color:green;

  cursor:pointer;

  transition:.3s;
}

.ejercicio-btn:hover{

  background:#ff1a1a;
}

.drag-bar-ia{

  touch-action:none;
}

@media(max-width:0x){

  #ia-window,
  #calendar-popup{

    position:fixed !important;

    top:20px !important;
    left:50% !important;
    right:50% !important;

    transform:translateX(-50%) !important;

    width:450px !important;

    max-width:95% !important;
  }

}@media(max-width:768px){

  .dia,
  .ejercicio-btn{

    min-height:58px;

    font-size:16px;
  }

}

@media(max-width:768px){

  .drag-bar-ia,
  .drag-bar{

    cursor:default;
  }

}

/* 🔥 CONTENEDOR EJERCICIOS */
.ejercicios-box{

  display:flex !important;

  flex-direction:column !important;

  gap:14px !important;

  width:100% !important;
}

/* 🔥 BOTONES */
.ejercicio-btn{

  width:100% !important;

  min-height:60px !important;

  border:none;

  border-radius:14px;

  background:#ff1010;

  color:#fff;

  font-size:16px;

  padding:14px;

  text-align:center;
}

/* 🔥 POPUP CALENDARIO */
.calendar-content{

  width:700px !important;
  max-width:95% !important;

  padding:30px !important;
  border-radius:26px;

  background:
  linear-gradient(
    145deg,
    #050505,
    #101010
  );

  border:1px solid rgba(255,215,0,.15);

  display:flex;
  flex-direction:column;

  gap:18px;
  overflow-x:hidden !important;
}

/* 🔥 SCROLL INTERNO */
.calendario-scroll{

  max-height:70vh;

  overflow-y:auto;

  overflow-x:hidden;
}

.ejercicio-btn{

  color:#fff !important;

  font-size:15px !important;

  font-weight:600;

  text-align:center;

  display:flex;

  align-items:center;

  justify-content:center;

  padding:14px;

  line-height:1.4;
}

#video-popup{

  position:fixed;

  inset:0;

  display:none;

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

  background:rgba(0,0,0,.88);

  backdrop-filter:blur(8px);

  z-index:999999;
}

/* 🔥 ACTIVO */
#video-popup.active{
  display:flex;
}

.video-content{

  width:60%;

  max-width:520px;

  position:relative;

  animation:videoOpen .3s ease;
}

@media(max-width:768px){

  .video-content{

    width:92%;
  }

}

.video-content video{

  width:100%;

  border-radius:24px;

  background:#000;

  box-shadow:
  0 20px 60px rgba(0,0,0,.7);
}

@keyframes videoOpen{

  from{
    opacity:0;
    transform:scale(.92);
  }

  to{
    opacity:1;
    transform:scale(1);
  }

}

#video-popup{

  position:fixed;

  inset:0;

  display:none;

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

  background:rgba(0,0,0,.88);

  backdrop-filter:blur(8px);

  z-index:999999;
}

#video-popup.active{
  display:flex;
}

/* 🔥 CONTENIDO */
.video-content{

  position:relative;

  width:70%;
  max-width:600px;
}

/* 🎬 VIDEO */
#video-player{

  width:50%;

  border-radius:22px;

  background:#000;
}

/* ❌ BOTÓN */
.cerrar-video{

  position:absolute;

  top:-18px;
  right:-18px;

  width:46px;
  height:46px;

  border:none;

  border-radius:50%;

  background:#ff1a1a;

  color:#fff;

  font-size:22px;

  cursor:pointer;

  z-index:999999;

  box-shadow:
  0 10px 25px rgba(0,0,0,.45);

  transition:.3s;
}

.cerrar-video:hover{

  transform:scale(1.1);
}

.ejercicio-btn{

  width:100%;

  min-height:58px;

  padding:14px;

  border:none;

  border-radius:14px;

  background:#c40000;

  color:#ffffff !important;

  font-size:15px !important;

  font-weight:600;

  text-align:center;

  display:flex;

  align-items:center;

  justify-content:center;

  cursor:pointer;

  line-height:1.4;

  transition:.3s;
}

/* 🔥 HOVER */
.ejercicio-btn:hover{

  background:#ff1a1a;

  transform:translateY(-2px);
}

.ejercicio-btn *{

  color:#fff !important;

  font-size:15px !important;

  opacity:1 !important;
}

button.ejercicio-btn{

  color:#fff !important;

  -webkit-text-fill-color:#fff !important;

  opacity:1 !important;

  visibility:visible !important;

  font-size:16px !important;

  font-weight:700 !important;

  text-indent:0 !important;

  line-height:1.4 !important;

  text-shadow:none !important;
}

/* 🔥 TODO DENTRO */
button.ejercicio-btn *{

  color:#fff !important;

  -webkit-text-fill-color:#fff !important;

  opacity:1 !important;

  visibility:visible !important;
}

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

  .planes-section,
  .entrenamientos-grid{

    grid-template-columns:1fr;
  }

  .popup-content,
  .video-content,
  #ia-window,
  #calendar-window{

    width:94% !important;

    left:50% !important;

    transform:translateX(-50%) !important;

    right:auto !important;
  }

  h1{

    font-size:34px !important;
  }

  h2{

    font-size:28px !important;
  }

  h3{

    font-size:22px !important;
  }

  p,
  li,
  button,
  a{

    font-size:15px !important;
  }

  .calendario{

    grid-template-columns:1fr;
  }
}

/* ===================================
📱 IPHONE PEQUEÑO
=================================== */

@media(max-width:480px){

  .planes-hero,
  .hero{

    padding-top:120px;
  }

  .price{

    font-size:2rem;
  }

  .popup-content{

    padding:18px;
  }
}

/* ===================================
📱 IPHONE PEQUEÑO
=================================== */

@media(max-width:480px){

  .planes-hero h1{

    font-size:28px !important;
  }

  .popup-content{

    padding:20px !important;
  }

  .price{

    font-size:28px !important;
  }

}

input,
select,
textarea{

  font-size:16px;
}

/* ===================================
🔥 NAVBAR RESPONSIVE FOAR
=================================== */
.navbar{

  width:100%;

  max-width:1400px;

  margin:auto;

  display:flex;

  align-items:center;

  justify-content:space-between;

  flex-wrap:wrap;

  gap:20px;

  padding:15px 25px;

  position:relative;

  z-index:9999;
}

.nav-links{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

}

/* 🔥 BRAND */
.brand{

  display:flex;

  align-items:center;

  gap:14px;

  min-width:0;
}

.brand img{

  width:65px;

  height:65px;

  object-fit:contain;
}

/* 🔥 TEXTO */
.brand-text{

  min-width:0;
}

.brand-text h2{

  font-size:20px;

  line-height:1.1;
}

.brand-text p{

  font-size:13px;

  opacity:.8;
}

/* 🔥 MENU */

.menu a{

  text-decoration:none;

  color:#fff;

  font-weight:600;
}

/* 🔥 BOTÓN HAMBURGUESA */
.menu-toggle{

  display:none;

  font-size:32px;

  color:#fff;

  cursor:pointer;
}

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

@media(max-width:900px){

  .navbar{

    flex-wrap:wrap;
  }

  /* 🔥 BOTÓN */
  .menu-toggle{

    display:block;
  }

  /* 🔥 TEXTO */
  .brand-text h2{

    font-size:16px;
  }

  .brand-text p{

    font-size:11px;
  }

  .brand img{

    width:52px;

    height:52px;
  }

  /* 🔥 MENU MOBILE */
  .menu{

    position:absolute;

    top:100%;

    right:20px;

    width:260px;

    background:#111;

    border-radius:18px;

    padding:20px;

    flex-direction:column;

    align-items:flex-start;

    gap:16px;

    box-shadow:
    0 15px 40px rgba(0,0,0,.5);

    display:none;
  }

  .menu.active{

    display:flex;
  }

  .menu li{

    width:100%;
  }

  .menu a{

    width:100%;

    display:block;

    padding:10px 0;
  }

  /* 🔥 SUBMENU */
  .submenu{

    position:static !important;

    width:100%;

    margin-top:10px;

    background:#1a1a1a;

    border-radius:12px;

    padding:10px;
  }

}

/* ===================================
📱 IPHONE PEQUEÑO
=================================== */

@media(max-width:480px){

  .navbar{

    padding:14px;
  }

  .brand{

    gap:10px;
  }

  .brand img{

    width:45px;

    height:45px;
  }

  .brand-text h2{

    font-size:14px;
  }

  .brand-text p{

    display:none;
  }

}

/* ===================================
🔥 FOOTER FOAR
=================================== */

.footer{

  width:100%;

  padding:30px 20px;

  background:#050505;

  border-top:1px solid rgba(255,255,255,.08);

  position:relative;
}

.footer-content{

  width:100%;

  max-width:1400px;

  margin:auto;

  display:flex;

  justify-content:center;

  align-items:center;

  text-align:center;
}

.footer p{

  color:#fff;

  opacity:.8;

  font-size:14px;

  line-height:1.5;
}

/* ===================================
📱 BOTÓN WHATSAPP
=================================== */

.btn-wa-float{

  position:fixed;

  right:25px;

  bottom:25px;

  width:65px;

  height:65px;

  border-radius:50%;

  background:#25D366;

  color:#fff;

  display:flex;

  justify-content:center;

  align-items:center;

  font-size:32px;

  text-decoration:none;

  z-index:9999;

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

  transition:.3s;
}

.btn-wa-float:hover{

  transform:scale(1.08);
}

/* ===================================
📱 TABLET
=================================== */

@media(max-width:768px){

  .footer{

    padding:25px 15px 90px;
  }

  .footer p{

    font-size:13px;
  }

  .btn-wa-float{

    width:58px;

    height:58px;

    font-size:28px;

    right:18px;

    bottom:18px;
  }

}

/* ===================================
📱 IPHONE PEQUEÑO
=================================== */

@media(max-width:480px){

  .footer{

    padding-bottom:100px;
  }

  .footer p{

    font-size:12px;
  }

  .btn-wa-float{

    width:54px;

    height:54px;

    font-size:26px;

    right:14px;

    bottom:14px;
  }

}

.btn-red{

  cursor:pointer;

  touch-action:manipulation;

  -webkit-tap-highlight-color:transparent;
}

/* ===================================
🔥 DROPDOWN
=================================== */

.dropdown{

  position:relative;
}

/* 🔥 SUBMENU */
.submenu{

  position:absolute;

  top:100%;

  left:0;

  min-width:240px;

  background:#111;

  border-radius:18px;

  padding:14px;

  list-style:none;

  display:none;

  flex-direction:column;

  gap:12px;

  z-index:999999;

  box-shadow:
  0 15px 40px rgba(0,0,0,.45);
}

/* 🔥 MOSTRAR */
.dropdown:hover .submenu{

  display:flex;
}

/* 🔥 LINKS */
.submenu a{

  color:#fff;

  text-decoration:none;

  padding:10px;

  border-radius:10px;

  transition:.3s;

  display:block;
}

.submenu a:hover{

  background:#c40000;
}

/* ===================================
🔥 FIX GLOBAL FOAR
=================================== */

body{

    overflow-x:hidden;
}


img{

    max-width:100%;

    display:block;
}


.popup{

    display:none;
}


.popup.active{

    display:flex !important;
}


.menu{

    list-style:none;
}

/*******************************************/
/* CSS TIENDA 
------------------------------------------*/

.tienda-container{

    width:100%;

    max-width:1400px;

    margin:auto;

    padding:40px 20px;

}

.productos-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(120px,1fr));

    gap:10px;

    margin-top:5px;

}

.admin-card{}
.admin-btn{}
.admin-grid{}
.admin-form{}

.foar-title{

    font-size:120px;

    font-weight:900;

    color:red;

    line-height:1;

    margin-top:-20px;

}

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

.hero-tienda{

    width:100%;

    text-align:center;

    padding:120px 20px 160px;

}

.hero-tienda h1{

    font-size:70px;

    line-height:1;

    margin-bottom:20px;

}

.hero-tienda p{

    font-size:22px;

    color:#ccc;

}   

.hero-tienda .overlay{

    position:absolute;
    inset:0;

    background:linear-gradient(
        rgba(0,0,0,.75),
        rgba(0,0,0,.85)
    );

}
.hero-content{

    position:relative;

    z-index:2;

    width:100%;
    max-width:900px;

    margin:auto;

}

.hero-content h1{

    font-size:clamp(3rem,8vw,7rem);

    line-height:.95;

    margin-bottom:20px;

}

body{

    overflow-x:hidden;

}

.hero-content span{
  color:#ff1a1a;

  text-shadow:
  0 0 25px rgba(255,0,0,.5);
}

.hero-content p{
  margin-top:20px;
  font-size:1.1rem;
  opacity:.85;

  max-width:700px;
  margin-inline:auto;
}

/* ===================================
🔥 CATEGORÍAS
=================================== */

.categorias{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;

  gap:15px;

  padding:40px 20px;
}

.cat-btn{
  border:none;

  padding:14px 24px;

  border-radius:40px;

  background:#111;

  color:#fff;

  cursor:pointer;

  font-weight:700;

  transition:.3s ease;
}

.cat-btn:hover,
.cat-btn.active{
  background:#c40000;

  transform:translateY(-2px);
}

/* ===================================
🔥 GRID PRODUCTOS
=================================== */

.productos-grid{

    width:100%;

    max-width:1400px;

    margin:auto;

    padding:40px 20px;

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(300px,1fr));

    gap:30px;

}



/* ===================================
🔥 CARD
=================================== */

.producto-card{
  position:relative;

  background:#111;

  border-radius:24px;

  overflow:hidden;

  padding:25px;

  text-align:center;

  transition:.35s ease;

  border:1px solid rgba(255,255,255,.05);
}

.producto-card{

    width:100%;

}
.producto-card:hover{
  transform:translateY(-8px);

  box-shadow:
  0 20px 40px rgba(0,0,0,.45);
}

/* ===================================
🔥 IMAGENES
=================================== */

.producto-card img{
    width:100%;
    max-width: 280px;
    height: 280px;
    object-fit: cover;
    border-radius: 15px;
    display: block;
    margin: auto;
}

/* ===================================
🔥 TEXTOS
=================================== */

.producto-card h3{
  font-size:1.4rem;

  margin-bottom:12px;

  line-height:1.3;
}

.precio{
  font-size:2rem;

  font-weight:800;

  color:#ff1a1a;

  margin-bottom:20px;
}

/* ===================================
🔥 BADGES
=================================== */

.badge{
  position:absolute;

  top:15px;
  left:15px;

  background:#ff1a1a;

  color:#fff;

  padding:8px 14px;

  border-radius:30px;

  font-size:12px;

  font-weight:700;

  z-index:3;
}

.badge.elite{
  background:gold;
  color:#000;
}

/* ===================================
🔥 POPUP PRODUCTO
=================================== */

.producto-popup{

    width:90%;

    max-width:500px;

    max-height:90vh;

    overflow-y:auto;

    background:#111;

    border-radius:20px;

    padding:25px;

}
.producto-popup img{
  width:100%;

  max-height:300px;

  object-fit:contain;

  margin-bottom:20px;
}

#popup-title{
  font-size:2rem;
  margin-bottom:10px;
}

#popup-price{
  font-size:2rem;

  color:#ff1a1a;

  font-weight:800;

  margin-bottom:15px;
}

#popup-desc{
  opacity:.85;

  margin-bottom:25px;

  line-height:1.6;
}

/* ===================================
🔥 CERRAR
=================================== */

.cerrar-popup{
  position:absolute;

  top:15px;
  right:15px;

  width:42px;
  height:42px;

  border:none;

  border-radius:50%;

  background:#ff1a1a;

  color:#fff;

  font-size:20px;

  cursor:pointer;
}

/* ===================================
📱 TABLET
=================================== */

@media(max-width:992px){

  .productos-grid{
    grid-template-columns:
    repeat(auto-fit,minmax(240px,1fr));
  }

}

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

@media(max-width:768px){

  .tienda-hero{
    min-height:55vh;
    padding:40px 20px;
  }

  .hero-content h1{
    font-size:3rem;
  }

  .hero-content p{
    font-size:1rem;
  }

  .productos-grid{
    grid-template-columns:1fr;

    gap:25px;
  }

  .producto-card{
    padding:20px;
  }

  .producto-card h3{
    font-size:1.2rem;
  }

  .precio{
    font-size:1.7rem;
  }

}

/* ===================================
📱 MOBILE PEQUEÑO
=================================== */

@media(max-width:480px){

  .hero-content h1{
    font-size:2.4rem;
  }

  .cat-btn{
    width:100%;
  }

}

/* AGREGAR A styles.css */


body{
    background: #0f0f0f;
    color: white;
    font-family: Arial;
}


/* HEADER */

.header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}


/* CONTADOR */

.carrito-icono{
    position: relative;
    font-size: 25px;
}

#contador-carrito{
    position: absolute;
    top: -10px;
    right: -10px;
    background: red;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* BUSCADOR */

.buscador-box{
    padding: 20px;
    text-align: center;
}

#buscador{
    width: 90%;
    max-width: 500px;
    padding: 15px;
    border-radius: 10px;
    border: none;
}


/* PRODUCTOS */

.contenedor-productos{
    display: grid;
    grid-template-columns:
    repeat(auto-fit, minmax(250px, 1fr));

    gap: 20px;

    padding: 20px;
}

.producto{
    background: #181818;
    border-radius: 20px;
    padding: 15px;
    text-align: center;
    transition: .3s;
}

.producto:hover{
    transform: translateY(-5px);
}

.producto img{
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 15px;
}


/* BOTON */

.btn-red{
    display: inline-block;
    margin-top: 10px;
    background: crimson;
    color: white;
    padding: 12px 20px;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
}


/* CARRITO */

#carrito{
    position: relative;
    left:1100px;
    top: 10px;
    width: 320px;
    background: #181818;
    padding: 20px;
    border-radius: 20px;
}

#lista-carrito{
    list-style: none;
    font-size:12px;
    padding: 0;
}

#lista-carrito li{
    margin-bottom: 10px;
}

/* ===================================
🛒 PANEL CARRITO
=================================== */

#carrito{

  position:fixed;

  top:0;

  right:1;

  width:280px;

  max-width:90%;

  height:90vh;

  background:gray;

  padding:25px;

  z-index:99999;

  overflow-y:auto;

  transition:
  transform .4s ease;

  box-shadow:
  -10px 0 30px rgba(0,0,0,.45);
}

#carrito{

    position:fixed;

    top:0;

    right:-450px;

    width:400px;

    height:100vh;

    background:#111;

    z-index:99999;

    transition:.4s;

}

#carrito.active{

    right:0;

}

/* ===================================
🙈 OCULTO
=================================== */

#carrito.oculto{

  transform:translateX(120%);

  opacity:0;

  visibility:hidden;

  pointer-events:none;
}

/* ===================================
✅ VISIBLE
=================================== */

#carrito:not(.oculto){

  transform:translateX(0);
}

/* ===================================
❌ CERRAR CARRITO
=================================== */

#cerrar-carrito{

  position:absolute;

  top:15px;
  right:15px;

  width:40px;
  height:40px;

  border:none;

  border-radius:50%;

  background:#c40000;

  color:#fff;

  font-size:20px;

  cursor:pointer;

  transition:.3s;
}

#cerrar-carrito:hover{

  width: 25px;
  height: 25px;
  background:#ff1a1a;

  transform:rotate(180deg);
}

/* ===================================
🛒 LINK CARRITO HEADER
=================================== */

.cart-link{

  position:relative;

  display:flex;

  align-items:center;

  gap:10px;
}

/* ===================================
🔢 CONTADOR
=================================== */

#cart-count{

  width:22px;
  height:22px;

  border-radius:50%;

  background:#ff1a190;

  color:#fff;

  font-size:12px;

  font-weight:800;

  display:flex;

  justify-content:center;
  align-items:center;
}

/* BOTON WHATSAPP */

.btn-whatsapp{
    width: 90%;
    background: #25D366;
    color: white;
    border: none;
    padding: 15px;
    border-radius: 10px;
    cursor: pointer;
}


/* MOBILE */

@media(max-width:768px){

    #carrito{
        position: relative;
        width: auto;
        right: 0;
        top: 0;
        margin: 20px;
    }

    .producto img{
        height: 220px;
    }

}

#carrito{

    position: fixed;

    top: 0;
    right: -450px;

    width: 400px;
    height: 100vh;

    background: #111;

    z-index: 99999;

    transition: .4s ease;

    padding: 25px;

    overflow-y: auto;
}

/* 🔥 CUANDO SE ABRE */

#carrito.active{

    right: 0;

}

button,
a{

  min-height:48px;
}

/* ===================================
❌ BOTON ELIMINAR CARRITO
=================================== */

.eliminar-item{

    width: 38px !important;
    height: 38px !important;

    min-width: 38px !important;
    min-height: 38px !important;

    border-radius: 50% !important;

    border: none !important;

    background: #1f1f1f !important;

    color: white !important;

    font-size: 18px !important;

    display: flex !important;

    justify-content: center !important;
    align-items: center !important;

    cursor: pointer !important;

    box-shadow:
    0 4px 10px rgba(0,0,0,.4) !important;

    transition: .3s ease !important;

    padding: 0 !important;

    line-height: 1 !important;
}


/* HOVER */

.eliminar-item:hover{

    background: crimson !important;

    transform: scale(1.1);

    box-shadow:
    0 0 15px rgba(220,20,60,.5);
}

.btn-print{

      position:fixed;
      bottom: 15px;
      margin-right: 5px;
      z-index:1200;
      width:210px;
      height:22px;
      border:none;
      border-radius:12px;
      background:#25d366;
      color:#fff;
      padding:14px;  
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:12px;
      font-weight: bold;
}


.btn-print:hover{

    background: #444;

    transform: scale(1.03);
}

.filtros-tienda{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

    margin-top:30px;

}

.filtro-btn{

    padding:12px 22px;

    border:none;

    border-radius:50px;

    background:#111;

    color:white;

    cursor:pointer;

    transition:.3s;

    font-weight:600;

}

.filtro-btn:hover{

    background:#ff2a2a;

    transform:translateY(-3px);

}

.filtro-btn.active{

    background:#ff2a2a;

}


/* ===================================
🛒 CARRITO
=================================== */

#carrito{

    display:none;

    position:fixed;

    top:10;
    right:-410;

    width:280px;
    height:100vh;

    background:gray;

    z-index:999999;

    padding:25px;

    overflow-y:auto;

    box-shadow:
    -10px 0 30px rgba(0,0,0,.5);
}

#carrito.active{

    display:block;

}

.item-carrito{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px 0;

    border-bottom:1px solid rgba(255,255,255,.1);
}

.eliminar-item{

    background:red;

    border:none;

    color:white;

    padding:5px 10px;

    cursor:pointer;
}


/* ===================================
❌ BOTON CERRAR CARRITO
=================================== */

.cerrar-carrito{

    position:absolute;
    top:15px;
    right:15px;
    width:52px;
    height:52px;
    border:none;
    border-radius:50%;
    background:red;
    color:white;
    font-size:20px;
    cursor:pointer;
    transition:.3s ease;
    display:flex;
    align-items:center;
    justify-content:center;
    backdrop-filter:blur(5px);
}

/* 🔥 HOVER */

.cerrar-carrito:hover{
    background:#ff3b3b;
    transform:rotate(90deg) scale(1.08);
    box-shadow:
    0 0 15px rgba(255,59,59,.5);
}

.btn-print{
    width:50px;
    height:50px;
    border:none;
    border-radius:50%;
    background:#222;
    color:white;
    font-size:18px;
    cursor:pointer;
    transition:.3s ease;
    display:flex;
    align-items:center;
    justify-content:center;
}

.btn-print:hover{

    background:#e63946;

    transform:scale(1.08);

}

.encabezado{

    display:flex;

    justify-content:space-between;

    font-weight:bold;

    margin-bottom:10px;
}

.encabezado span:first-child{

    width:70%;
}

.encabezado span:last-child{

    width:30%;

    text-align:right;
}

.producto{

    display:flex;
    justify-content:space-between;
    align-items:flex-start;

    padding:15px 0;

    border-bottom:1px solid #ddd;

    gap:20px;
}   

.nombre{
    flex:1;
    font-size:15px;
    font-weight:bold;
}

.detalle{

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

    margin-top:5px;
}

.valor{
    min-width:90px;
    text-align:right;
    font-size:15px;
    font-weight:bold;
    white-space:nowrap;
}

.encabezado-tabla{

    display:flex;
    justify-content:space-between;

    font-weight:bold;

    border-bottom:2px solid #999;

    padding-bottom:10px;
    margin-top:30px;
    margin-bottom:10px;
}

.btn-limpiar{
      position:fixed;
      bottom: 15px;
      margin-left: 180px;
      z-index:1200;
      width:50px;
      height:50px;
      border:none;
      border-radius:50%;
      background:red;
      color:#fff;
      padding:14px;  
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:18px;
      font-weight: bold;
}

.btn-limpiar:hover{
    background:black;
    transform:scale(1.03);
}

.foar-producto{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;
    padding:10px 0;
    border-bottom:1px dashed #ddd;
}

.btn-whatsapp{

    display:none;
}
    
.controles-cantidad{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:5px;
}

.controles-cantidad button{

    width:28px;

    height:28px;

    border:none;

    background:#111;

    color:#fff;

    border-radius:6px;

    cursor:pointer;

    font-weight:bold;
}

.controles-cantidad span{

    min-width:20px;

    text-align:center;

    font-weight:bold;
}