* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  background: #03060b;
  color: white;
}

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

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 900;
  font-size: 20px;
}

.brand img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 12px;
}

.links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.links a {
  color: white;
  text-decoration: none;
  font-weight: 700;
}

.links .wa {
  color: #25d366;
  border: 1px solid #25d366;
  padding: 10px 22px;
  border-radius: 999px;
}

.hero {
  min-height: 92vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background:
    linear-gradient(90deg, rgba(255,0,0,.35), transparent 30%, rgba(0,80,255,.25) 70%, rgba(255,150,0,.25)),
    radial-gradient(circle at center, rgba(255,0,0,.25), transparent 35%),
    #03060b;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("../img/logo.jpg") center/420px no-repeat;
  opacity: .08;
  filter: blur(2px);
}

.hero-content {
  position: relative;
  text-align: center;
  z-index: 2;
}

.hero h1 {
  font-size: clamp(70px, 12vw, 150px);
  line-height: .85;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -4px;
  text-shadow: 0 0 40px rgba(255,0,0,.65);
}

.hero h1 span {
  color: #ff1e1e;
}

.hero p {
  margin: 22px 0;
  font-size: 24px;
  letter-spacing: 1px;
}

.main-btn,
.buy {
  display: inline-block;
  background: linear-gradient(135deg, #ff1e1e, #ff3b3b);
  color: white;
  text-decoration: none;
  padding: 14px 36px;
  border-radius: 999px;
  font-weight: 900;
  box-shadow: 0 0 28px rgba(255,0,0,.55);
  transition: .3s;
}

.main-btn:hover,
.buy:hover {
  transform: scale(1.05);
}

.benefits {
  width: min(1200px, 92%);
  margin: -45px auto 40px;
  position: relative;
  z-index: 5;
  background: rgba(10,16,25,.88);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.6);
}

.benefits div {
  padding: 24px;
  border-right: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 28px;
}

.benefits strong {
  font-size: 15px;
  text-transform: uppercase;
}

.benefits span {
  font-size: 14px;
  color: #cfcfcf;
}

.catalogo {
  padding: 45px 42px;
}

.top-section {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 25px;
}

.top-section small {
  color: #ff1e1e;
  font-weight: 900;
}

.top-section h2 {
  font-size: 32px;
  font-weight: 900;
}

#buscador {
  width: 320px;
  background: #070c14;
  color: white;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px;
  padding: 14px 18px;
  outline: none;
}

#buscador:focus {
  border-color: #ff1e1e;
  box-shadow: 0 0 18px rgba(255,0,0,.25);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 22px;
}

.card {
  background: linear-gradient(180deg, #0c1420, #05080d);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  overflow: hidden;
  transition: .3s;
  box-shadow: 0 20px 40px rgba(0,0,0,.45);
}

.card:hover {
  transform: translateY(-10px) scale(1.02);
  border-color: #ff1e1e;
  box-shadow: 0 0 35px rgba(255,0,0,.35);
}

.cover {
  height: 190px;
  position: relative;
  display: flex;
  align-items: end;
  padding: 22px;
  background:
    linear-gradient(180deg, transparent, rgba(0,0,0,.9)),
    radial-gradient(circle at top, rgba(255,0,0,.4), transparent 55%),
    #101010;
}

.cover h3 {
  position: relative;
  z-index: 2;
  font-size: 32px;
  font-weight: 900;
  text-transform: uppercase;
  color: white;
  text-shadow: 0 0 20px black;
}

.plans {
  padding: 18px;
}

.plan {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.plan span {
  color: #eee;
}

.plan strong {
  color: #ff2d2d;
  font-size: 20px;
}

.buy {
  display: block;
  margin: 0 18px 18px;
  text-align: center;
  border-radius: 12px;
  padding: 13px;
}

.info {
  display: grid;
  grid-template-columns: 2fr 1.2fr;
  gap: 24px;
  padding: 20px 42px 45px;
}

.info > div {
  background: #070c14;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  padding: 26px;
}

.info h3 {
  color: #ff1e1e;
  margin-bottom: 18px;
  font-size: 18px;
  text-transform: uppercase;
}

.info-grid,
.payments {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.info-grid p,
.payments span {
  background: rgba(255,255,255,.06);
  padding: 16px;
  border-radius: 14px;
  font-weight: 800;
  text-align: center;
}

footer {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 28px 42px;
  display: flex;
  align-items: center;
  gap: 20px;
  background: #03060b;
}

footer img {
  width: 70px;
  border-radius: 16px;
}

footer a {
  margin-left: auto;
  color: #25d366;
  text-decoration: none;
  font-size: 24px;
  font-weight: 900;
}

.float-wa {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 62px;
  height: 62px;
  background: #25d366;
  color: black;
  text-decoration: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 30px;
  z-index: 1000;
  box-shadow: 0 0 30px rgba(37,211,102,.55);
}

@media(max-width: 850px) {
  .links a:not(.wa) {
    display: none;
  }

  .benefits,
  .info {
    grid-template-columns: 1fr;
  }

  .benefits {
    margin-top: 0;
  }

  .top-section {
    flex-direction: column;
    align-items: start;
  }

  #buscador {
    width: 100%;
  }

  .info-grid,
  .payments {
    grid-template-columns: 1fr 1fr;
  }

  .hero h1 {
    letter-spacing: -2px;
  }
}
.cover {
  height: 220px !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important;
  display: block !important;
  background: #101010 !important;
}

.cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .4s;
}

.card:hover .cover-img {
  transform: scale(1.08);
}

.cover-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 20px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.92));
}

.cover-overlay h3 {
  font-size: 30px;
  font-weight: 900;
  color: white;
  text-shadow: 0 0 12px black;
}
.badge-oferta{
    position:absolute;
    top:12px;
    left:12px;
    background:linear-gradient(135deg,#FFD700,#FFB300);
    color:#111;
    padding:7px 14px;
    border-radius:999px;
    font-size:12px;
    font-weight:900;
    z-index:10;
    box-shadow:0 0 20px rgba(255,215,0,.6);
}

.card{
    position:relative;
}
.badge-destacado {
  position: absolute;
  top: 48px;
  left: 12px;
  background: linear-gradient(135deg, #00d4ff, #0066ff);
  color: white;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  z-index: 10;
  box-shadow: 0 0 20px rgba(0, 140, 255, .6);
}
.product-accordion {
  margin-bottom: 20px;
}

.accordion-title {
  list-style: none;
  cursor: pointer;
}

.accordion-title::-webkit-details-marker {
  display: none;
}

.accordion-title::after {
  content: "▼";
  float: right;
  color: #ffd700;
  font-size: 20px;
}

.product-accordion:not([open]) .accordion-title::after {
  content: "▶";
}

.product-accordion:not([open]) form,
.product-accordion:not([open]) .row-box {
  display: none;
}
.btn-respaldo{
  display:inline-block;
  background:#2563eb;
  color:white;
  padding:12px 18px;
  border-radius:10px;
  text-decoration:none;
  font-weight:bold;
  margin-top:12px;
}
.orden-item{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  padding:15px;
  border-radius:14px;
  margin-bottom:10px;
  font-weight:900;
  cursor:grab;
}

.orden-item.dragging{
  opacity:.4;
}
/* ==============================
   CARRUSEL DE PROMOCIONES
================================ */

.promociones-home{
  padding:70px 5%;
  background:
    radial-gradient(circle at top left, rgba(255,45,45,.13), transparent 35%),
    #03060b;
}

.promociones-titulo{
  max-width:1200px;
  margin:0 auto 25px;
}

.promociones-titulo small{
  color:#ff2d2d;
  font-size:13px;
  font-weight:900;
  letter-spacing:2px;
}

.promociones-titulo h2{
  color:white;
  font-size:34px;
  margin:8px 0;
}

.promociones-titulo p{
  color:#a1a1aa;
}

.promo-slider{
  position:relative;
  max-width:1200px;
  margin:auto;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  border-radius:28px;
  background:#07101c;
  box-shadow:0 25px 60px rgba(0,0,0,.55);
}

.promo-track{
  display:flex;
  transition:transform .65s cubic-bezier(.22,.61,.36,1);
}

.promo-slide{
  flex:0 0 100%;
  display:block;
  position:relative;
  background:#07101c;
}

.promo-slide img{
  display:block;
  width:100%;
  height:520px;
  object-fit:contain;
  background:#050912;
}

.promo-slide::after{
  content:"💬 Ver promoción por WhatsApp";
  position:absolute;
  left:50%;
  bottom:30px;
  transform:translateX(-50%);
  background:#25d366;
  color:#04110a;
  padding:13px 22px;
  border-radius:999px;
  font-weight:900;
  opacity:0;
  transition:.25s;
  white-space:nowrap;
  box-shadow:0 10px 30px rgba(37,211,102,.35);
}

.promo-slide:hover::after{
  opacity:1;
}

.promo-flecha{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  width:52px;
  height:52px;
  padding:0;
  border:none;
  border-radius:50%;
  background:rgba(3,6,11,.80);
  color:white;
  font-size:38px;
  line-height:1;
  cursor:pointer;
  backdrop-filter:blur(8px);
  transition:.2s;
}

.promo-flecha:hover{
  background:#ff2d2d;
  transform:translateY(-50%) scale(1.08);
}

.promo-anterior{
  left:18px;
}

.promo-siguiente{
  right:18px;
}

.promo-puntos{
  position:absolute;
  left:50%;
  bottom:15px;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  z-index:6;
}

.promo-punto{
  width:10px;
  height:10px;
  padding:0;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,.40);
  cursor:pointer;
  transition:.25s;
}

.promo-punto.activo{
  width:28px;
  border-radius:999px;
  background:#ff2d2d;
}

@media(max-width:768px){
  .promociones-home{
    padding:45px 15px;
  }

  .promociones-titulo h2{
    font-size:27px;
  }

  .promo-slider{
    border-radius:18px;
  }

  .promo-slide img{
    height:480px;
    object-fit:contain;
  }

  .promo-flecha{
    width:42px;
    height:42px;
    font-size:30px;
  }

  .promo-anterior{
    left:8px;
  }

  .promo-siguiente{
    right:8px;
  }

  .promo-slide::after{
    display:none;
  }
}
/* =====================================
   VERSIÓN MÓVIL — NO AFECTA EL PC
===================================== */
@media (max-width: 768px){

  body{
    overflow-x:hidden;
  }

  /* Barra superior más limpia */
  .nav{
    padding:12px 14px;
    gap:10px;
  }

  .brand{
    gap:9px;
  }

  .brand img{
    width:42px;
    height:42px;
  }

  .brand span{
    font-size:17px;
    white-space:nowrap;
  }

  /* En celular ocultamos enlaces secundarios */
  .links a:not(.wa){
    display:none;
  }

  .links .wa{
    padding:10px 14px;
    font-size:14px;
  }

  /* Catálogo con buen margen */
  .catalogo{
    padding:30px 14px;
  }

  .top-section{
    display:block;
    margin-bottom:22px;
  }

  .top-section h2{
    font-size:25px;
    line-height:1.15;
    margin-bottom:16px;
  }

  #buscador{
    width:100%;
    max-width:none;
  }

  /* Una tarjeta centrada por fila */
  
  /* Imagen menos alta y mejor proporcionada */

  .plans{
    padding:15px;
  }

  .plan{
    gap:10px;
    font-size:15px;
  }

  .buy{
    margin:0 15px 16px;
    width:calc(100% - 30px);
    padding:14px;
  }

  /* Etiquetas más pequeñas */
  .badge-oferta,
  .badge-destacado{
    font-size:11px;
    padding:7px 10px;
  }

  /* WhatsApp flotante para que no tape botones */
  .float-wa{
    width:54px;
    height:54px;
    right:14px;
    bottom:18px;
    font-size:23px;
  }
}
/* ==========================================
   CATÁLOGO MÓVIL TIPO APP / CARRUSEL
   NO AFECTA LA VERSIÓN DE PC
========================================== */
@media (max-width: 768px){

  .hero{
    display:none;
  }

  .promociones-home{
    padding:28px 14px 18px;
  }

  .promociones-titulo h2{
    font-size:26px;
  }

  .benefits{
    display:none;
  }

  .catalogo{
    padding:22px 0 40px;
    overflow:hidden;
  }

  .top-section{
    padding:0 16px;
    margin-bottom:18px;
  }

  .top-section > div{
    width:100%;
  }

  .top-section small{
    color:#ff2d2d;
    font-weight:900;
    letter-spacing:1.5px;
  }

  .top-section h2{
    font-size:26px;
    line-height:1.15;
    margin:6px 0 14px;
  }

  #buscador{
    width:100%;
  }

  /* Convierte el grid en carrusel horizontal */
  .grid{
    display:flex;
    gap:16px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    padding:6px 16px 22px;
    scrollbar-width:none;
  }

  .grid::-webkit-scrollbar{
    display:none;
  }

  .card{
    flex:0 0 calc(100vw - 42px);
    max-width:390px;
    min-width:0;
    margin:0;
    scroll-snap-align:center;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 22px 50px rgba(0,0,0,.55);
    transform:scale(.96);
    transition:transform .28s ease, opacity .28s ease;
    opacity:.72;
  }

  .card.card-activa{
    transform:scale(1);
    opacity:1;
  }

  #productosGrid .cover{
  width:100%;
  height:360px !important;
  aspect-ratio:auto;
  padding:0 !important;
  display:block !important;
  overflow:hidden;
}

#productosGrid .cover-img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

  .cover-overlay{
    background:
      linear-gradient(to top,rgba(0,0,0,.98),rgba(0,0,0,.15) 65%);
  }

 #productosGrid .cover-overlay h3{
  font-size:30px;
  line-height:1;
  bottom:18px;
  left:18px;
  right:18px;
}

  .plans{
    padding:18px;
  }

  .plan{
    font-size:16px;
    padding:10px 0;
  }

  .buy{
    width:calc(100% - 36px);
    margin:0 18px 18px;
    padding:16px;
    border-radius:14px;
    font-size:17px;
  }

  .badge-oferta,
  .badge-destacado{
    z-index:10;
  }

  /* Indicador de página */
  .catalogo-contador{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    color:#9ca3af;
    margin-top:2px;
    font-weight:900;
  }

  .catalogo-contador strong{
    color:white;
    font-size:17px;
  }

  .catalogo-puntos{
    display:flex;
    justify-content:center;
    gap:7px;
    margin-top:12px;
  }

  .catalogo-punto{
    width:8px;
    height:8px;
    border-radius:50%;
    background:rgba(255,255,255,.28);
    transition:.25s;
  }

  .catalogo-punto.activo{
    width:26px;
    border-radius:999px;
    background:#ff2d2d;
  }

  .info{
    margin-top:20px;
  }
}

@media (min-width:769px){
  .catalogo-contador,
  .catalogo-puntos{
    display:none;
  }
}
.promo-slide-footer{

padding:16px;

display:flex;

justify-content:space-between;

align-items:center;

background:#0a1019;

}

.promo-slide-footer span{

color:#fff;

font-size:14px;

font-weight:800;

}

.promo-slide-footer button{

padding:10px 16px;

border:none;

border-radius:999px;

background:#25d366;

color:#04110a;

font-weight:900;

cursor:pointer;

transition:.25s;

}

.promo-slide-footer button:hover{

transform:scale(1.05);

}
/* ==========================================
   PROMOCIONES EN COMPUTADOR
========================================== */

@media (min-width:769px){

  /* Esto solo se necesita en celular */
  #ayudaPromociones{
    display:none !important;
  }

  .promociones-home{
    width:100%;
    max-width:1100px;
    margin:0 auto;
    padding:55px 24px;
  }

  .promociones-titulo{
    margin-bottom:24px;
  }

  .promociones-titulo h2{
    margin:6px 0 8px;
    font-size:34px;
  }

  .promo-slider{
    position:relative;
    width:100%;
    overflow:hidden;

    border:1px solid rgba(255,255,255,.10);
    border-radius:24px;

    background:#07101c;

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

  .promo-track{
    display:flex;
    width:100%;

    transition:
      transform .55s cubic-bezier(.22,.61,.36,1);
  }

  .promo-slide{
    flex:0 0 100%;
    width:100%;

    display:flex;
    flex-direction:column;

    color:white;
    text-decoration:none;
  }

  .promo-slide img{
    display:block;

    width:100%;
    height:520px;

    object-fit:contain;
    object-position:center;

    background:#03060b;
  }

  .promo-card-info{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;

    padding:18px 22px;

    border-top:1px solid rgba(255,255,255,.08);
    background:#0a111d;
  }

  .promo-card-info strong{
    color:white;
    font-size:16px;
    font-weight:900;
  }

  .promo-card-info span{
    padding:11px 18px;

    border-radius:999px;

    background:#25d366;
    color:#04110a;

    font-size:14px;
    font-weight:900;

    box-shadow:
      0 8px 22px rgba(37,211,102,.25);
  }

  .promociones-contador{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;

    margin-top:16px;

    color:#9ca3af;
    font-weight:900;
  }

  .promociones-contador strong{
    color:white;
  }

  .promociones-puntos{
    display:flex;
    justify-content:center;
    gap:8px;

    margin-top:10px;
  }

  .promocion-punto{
    width:8px;
    height:8px;

    border-radius:50%;

    background:rgba(255,255,255,.25);
  }

  .promocion-punto.activo{
    width:28px;
    border-radius:999px;

    background:#ff2d2d;
    box-shadow:0 0 14px rgba(255,45,45,.55);
  }
}
/*=====================================
        PRODUCTO AGOTADO
======================================*/

.card:has(.agotado-ribbon) .cover-img{
    filter:
        brightness(.18)
        grayscale(.85)
        contrast(.85);
    transform:scale(1.03);
}
.card:has(.agotado-ribbon) .cover::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.38);
    z-index:3;
    pointer-events:none;
}

.card:has(.agotado-ribbon) .cover-overlay{
    z-index:4;
}

.card:has(.agotado-ribbon) .cover-overlay h3{
    color:rgba(255,255,255,.78);
    text-shadow:none;
}

.buy-agotado{
    background:linear-gradient(135deg,#4b5563,#2d3748)!important;
    color:white!important;
    box-shadow:none!important;
}

.buy-agotado:hover{
    background:linear-gradient(135deg,#6b7280,#374151)!important;
    transform:translateY(-2px);
}
.card:has(.agotado-ribbon){
    border:1px solid rgba(140,140,140,.35);
    box-shadow:none;
    opacity:.88;
    transition:.35s;
}

.card:has(.agotado-ribbon):hover{
    transform:translateY(-4px);
    border-color:rgba(180,180,180,.45);
    box-shadow:0 0 18px rgba(255,255,255,.08);
}

.card:has(.agotado-ribbon) .plans{
    opacity:.75;
}

.card:has(.agotado-ribbon) .plan strong{
    color:#bdbdbd;
}

.card:has(.agotado-ribbon) .plan span{
    color:#b0b0b0;
}
/*=====================================
      RIBBON AGOTADO PREMIUM
======================================*/

.agotado-ribbon{
    position:absolute;
    top:28px;
    left:-55px;
    width:220px;
    padding:10px 0;

    background:linear-gradient(
        135deg,
        #7a0000,
        #ff1e1e,
        #7a0000
    );

    transform:rotate(-35deg);

    z-index:20;

    text-align:center;

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

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

.agotado-ribbon span{

    color:white;

    font-size:16px;

    font-weight:900;

    letter-spacing:3px;

    text-transform:uppercase;

    text-shadow:
        0 2px 8px rgba(0,0,0,.7);
}




/* ==========================================
   APARIENCIA GLOBAL CONFIGURABLE
   CONECTADA DESDE EL PANEL ADMIN
========================================== */

/* COLOR PRINCIPAL DE MARCA */

.hero h1 span,
.top-section small,
.promociones-titulo small,
.info h3{
    color:var(--pechy-principal);
}

.main-btn,
.buy{
    background:
        linear-gradient(
            135deg,
            var(--pechy-principal),
            color-mix(
                in srgb,
                var(--pechy-principal) 72%,
                white
            )
        );

    box-shadow:
        0 0 28px
        color-mix(
            in srgb,
            var(--pechy-principal) 42%,
            transparent
        );
}

#buscador:focus{
    border-color:var(--pechy-principal);

    box-shadow:
        0 0 18px
        color-mix(
            in srgb,
            var(--pechy-principal) 25%,
            transparent
        );
}

.card:hover{
    border-color:var(--pechy-principal);

    box-shadow:
        0 0 35px
        color-mix(
            in srgb,
            var(--pechy-principal) 30%,
            transparent
        );
}

.cover{
    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(0,0,0,.90)
        ),
        radial-gradient(
            circle at top,
            color-mix(
                in srgb,
                var(--pechy-principal) 38%,
                transparent
            ),
            transparent 55%
        ),
        #101010;
}

.plan strong{
    color:var(--pechy-principal);
}

.promociones-home{
    background:
        radial-gradient(
            circle at top left,
            color-mix(
                in srgb,
                var(--pechy-principal) 13%,
                transparent
            ),
            transparent 35%
        ),
        color-mix(
            in srgb,
            var(--pechy-secundario) 24%,
            #03060b
        );
}

.promo-flecha:hover,
.promo-punto.activo,
.catalogo-punto.activo,
.promocion-punto.activo{
    background:var(--pechy-principal);
}


/* COLOR SECUNDARIO DE SUPERFICIES */

.card{
    background:
        linear-gradient(
            180deg,
            color-mix(
                in srgb,
                var(--pechy-secundario) 82%,
                #101827
            ),
            color-mix(
                in srgb,
                var(--pechy-secundario) 50%,
                #03060b
            )
        );
}

#buscador,
.info > div,
.promo-slider,
.promo-slide,
.promo-card-info{
    background-color:var(--pechy-secundario);
}


/* COLOR DE ACENTO PREMIUM */

.badge-oferta{
    background:
        linear-gradient(
            135deg,
            var(--pechy-acento),
            color-mix(
                in srgb,
                var(--pechy-acento) 72%,
                #ffb300
            )
        );

    box-shadow:
        0 0 20px
        color-mix(
            in srgb,
            var(--pechy-acento) 48%,
            transparent
        );
}

.accordion-title::after{
    color:var(--pechy-acento);
}


/* AGOTADO CONSERVA SU COLOR DE ALERTA */

.buy-agotado{
    background:
        linear-gradient(
            135deg,
            #4b5563,
            #2d3748
        ) !important;

    box-shadow:none !important;
}

.agotado-ribbon{
    background:
        linear-gradient(
            135deg,
            #7a0000,
            #ff1e1e,
            #7a0000
        );
}
.modal-plan--customer-cart{flex-wrap:wrap}.modal-plan-cart-add{flex:0 0 100%;width:100%;padding:10px 14px;border:1px solid color-mix(in srgb,var(--modal-color) 55%,#fff);border-radius:10px;background:color-mix(in srgb,var(--modal-color) 18%,#111);color:#fff;font-weight:800;cursor:pointer}.modal-plan-cart-add:focus-visible{outline:3px solid #fff;outline-offset:2px}
.public-nav-cart{position:relative;display:flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid rgba(244,196,48,.48);border-radius:999px;background:linear-gradient(145deg,rgba(244,196,48,.16),rgba(255,255,255,.04));color:#fff;font-weight:800;cursor:pointer}.public-nav-cart svg{width:21px;height:21px;fill:none;stroke:#f4c430;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.public-nav-cart strong{display:grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border-radius:999px;background:#ef2635;color:#fff;font-size:11px}.public-nav-cart:focus-visible{outline:3px solid #f4c430;outline-offset:3px}.public-nav-cart.is-updated{animation:customerCartPulse .55s ease}@keyframes customerCartPulse{50%{transform:scale(1.09);box-shadow:0 0 26px rgba(244,196,48,.55)}}
.customer-cart-floating{position:fixed;left:calc(100vw - 81px);top:calc(100dvh - 154px);z-index:100000;display:grid;place-items:center;box-sizing:border-box;width:54px;height:54px;padding:0;border:1px solid rgba(244,196,48,.55);border-radius:50%;background:linear-gradient(145deg,#202630,#080b11 75%);color:#f4c430;box-shadow:0 18px 48px rgba(0,0,0,.58),0 0 20px rgba(244,196,48,.1),inset 0 0 0 1px rgba(255,255,255,.06);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;transition:transform .16s ease,left .2s ease,top .2s ease}.customer-cart-floating:hover{transform:scale(1.04)}.customer-cart-floating.is-dragging{cursor:grabbing;transform:scale(1.06);transition:none}.customer-cart-floating.is-snapping{transition:left .2s ease,top .2s ease,transform .16s ease}.customer-cart-floating svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.customer-cart-floating strong{position:absolute;right:-5px;top:-6px;display:grid;place-items:center;min-width:23px;height:23px;padding:0 5px;border:2px solid #090c12;border-radius:999px;background:#ef2635;color:#fff;font-size:11px;pointer-events:none}.customer-cart-floating:focus-visible{outline:3px solid #f4c430;outline-offset:4px}
.customer-cart-modal{position:fixed;inset:0;z-index:100010;display:grid;place-items:center;padding:24px}.customer-cart-modal[hidden]{display:none}.customer-cart-backdrop{position:absolute;inset:0;border:0;background:rgba(0,0,0,.72);backdrop-filter:blur(7px)}.customer-cart{position:relative;box-sizing:border-box;width:min(760px,100%);max-height:min(820px,calc(100dvh - 48px));overflow:auto;padding:0;border:1px solid rgba(244,196,48,.28);border-radius:24px;background:radial-gradient(circle at 12% 0,rgba(244,196,48,.1),transparent 35%),linear-gradient(145deg,#171920,#090a0e);color:#fff;box-shadow:0 34px 110px rgba(0,0,0,.78),0 0 38px rgba(244,196,48,.08)}.customer-cart:focus{outline:none}.customer-cart-header{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:22px 24px;border-bottom:1px solid rgba(255,255,255,.08)}.customer-cart-header__icon{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:rgba(244,196,48,.13);font-size:24px}.customer-cart-header h2{margin:3px 0;font-size:28px}.customer-cart-header small{color:#f4c430;letter-spacing:.12em}.customer-cart-header p{color:#aeb5c2}.customer-cart-header>button{width:40px;height:40px;border:1px solid #3a3c45;border-radius:12px;background:#24262d;color:#fff;font-size:1.5rem}.customer-cart-lines{display:grid;gap:10px;padding:18px 24px}.customer-cart-line{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;gap:14px;align-items:center;padding:14px;border:1px solid #30323a;border-radius:15px;background:rgba(255,255,255,.025)}.customer-cart-line__icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:rgba(244,196,48,.1);color:#f4c430}.customer-cart-line__identity{display:grid;min-width:0;gap:2px}.customer-cart-line__identity strong,.customer-cart-line__identity span{overflow-wrap:anywhere}.customer-cart-line__identity small{color:#9da5b2}.customer-cart-line__eligibility{font-size:.72rem}.customer-cart-quantity{display:flex;align-items:center;gap:8px}.customer-cart-quantity button,.customer-cart-line>[data-cart-remove]{width:38px;height:38px;border:0;border-radius:10px;background:#292b33;color:#fff;font-size:1.1rem}.customer-cart-line-total{white-space:nowrap;color:#f6d76e}.customer-cart-discount-banner{margin:0 24px 10px;padding:10px 14px;border:1px solid rgba(49,196,111,.28);border-radius:11px;background:rgba(49,196,111,.08);color:#8df0b4;font-weight:700}.customer-cart-summary{margin:8px 24px 0;padding:17px 0;border-top:1px solid #333}.customer-cart-summary p{display:flex;justify-content:space-between;margin:8px 0}.customer-cart-summary .is-discount{color:#8df0b4}.customer-cart-summary .is-total{padding-top:12px;border-top:1px solid rgba(255,255,255,.08);font-size:1.28rem;color:#f4c430}.customer-cart footer{display:flex;justify-content:flex-end;gap:10px;padding:16px 24px 22px;border-top:1px solid rgba(255,255,255,.07)}.customer-cart footer button{padding:12px 18px;border-radius:11px;border:1px solid #444;background:#24262d;color:#fff;font-weight:700}.customer-cart footer button[disabled]{opacity:.55}.customer-cart-empty{display:grid;justify-items:center;gap:9px;padding:48px 24px;text-align:center;color:#9ca3af}.customer-cart-empty>span{font-size:44px}.customer-cart-empty strong{color:#fff;font-size:1.2rem}.customer-cart-empty a{margin-top:6px;padding:11px 17px;border-radius:10px;background:#f4c430;color:#111;text-decoration:none;font-weight:800}.customer-cart [role=alert]{margin:16px 24px;color:#fecaca}.customer-cart-modal-open{overflow:hidden}
@media(max-width:768px){.links{gap:8px}.public-nav-cart{padding:9px}.public-nav-cart>span{display:none}.customer-cart-floating{width:50px;height:50px}.customer-cart-modal{padding:10px}.customer-cart{width:100%;max-height:88dvh;border-radius:22px}.customer-cart-header{padding:17px 15px}.customer-cart-header p{font-size:.82rem}.customer-cart-lines{padding:14px}.customer-cart-line{grid-template-columns:auto minmax(0,1fr) auto}.customer-cart-quantity{grid-column:2}.customer-cart-line-total{grid-column:2}.customer-cart-line>[data-cart-remove]{grid-column:3;grid-row:2}.customer-cart-summary{margin-inline:15px}.customer-cart footer{display:grid;padding:14px 15px max(16px,env(safe-area-inset-bottom))}.modal-plan-cart-add{min-height:44px}}
@media(prefers-reduced-motion:reduce){.customer-cart-floating{transition:none}}
.customer-checkout{display:grid;gap:18px;padding:24px}.customer-checkout[hidden],.customer-order-ready[hidden],[data-customer-cart-stage][hidden]{display:none}.customer-checkout__heading{display:grid;gap:6px}.customer-checkout__heading small,.customer-order-ready>small{color:#f4c430;font-weight:800;letter-spacing:.12em}.customer-checkout__heading h3,.customer-order-ready h3{margin:0;color:#fff;font-size:25px}.customer-checkout__heading p,.customer-checkout>small,.customer-order-ready p{margin:0;color:#aeb5c2}.customer-checkout__fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}.customer-checkout__fields label{display:grid;gap:7px;color:#d8dde5;font-size:13px;font-weight:700}.customer-checkout__fields input{box-sizing:border-box;width:100%;min-height:46px;padding:11px 13px;border:1px solid #363b45;border-radius:11px;background:#11141a;color:#fff;font:inherit;outline:none}.customer-checkout__fields input:focus{border-color:#f4c430;box-shadow:0 0 0 3px rgba(244,196,48,.12)}.customer-checkout footer{padding:16px 0 0}.customer-order-ready{display:grid;justify-items:center;gap:12px;padding:48px 24px;text-align:center}.customer-order-ready>span{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:rgba(244,196,48,.13);color:#f4c430;font-size:28px}.customer-order-ready button{margin-top:8px;padding:13px 20px;border:1px solid #444;border-radius:11px;background:#24262d;color:#fff;font-weight:800;opacity:.55}
.customer-cart-empty[hidden]{display:none}.customer-cart-announcer{position:fixed;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.customer-cart-floating.is-updated{animation:customerCartFabPop .48s ease}.modal-plan-cart-add.is-added{background:#177345;color:#fff;transform:scale(1.025);box-shadow:0 0 22px rgba(39,206,116,.3)}[data-customer-cart-stage="cart"].is-empty>footer{display:none}@keyframes customerCartFabPop{50%{transform:scale(1.14);box-shadow:0 18px 48px rgba(0,0,0,.58),0 0 30px rgba(244,196,48,.52)}}
@media(prefers-reduced-motion:reduce){.public-nav-cart.is-updated,.customer-cart-floating.is-updated{animation:none}.modal-plan-cart-add.is-added{transform:none;transition:none}}
.customer-checkout__email{grid-column:1/-1}
@media(max-width:600px){.customer-checkout{padding:18px 15px}.customer-checkout__fields{grid-template-columns:1fr}.customer-order-ready{padding:38px 18px}}
.customer-order-lookup-floating{position:fixed;right:27px;bottom:172px;z-index:100000;display:grid;place-items:center;width:54px;height:54px;padding:0;border:1px solid rgba(239,38,53,.62);border-radius:50%;background:#171b22;color:#fff;box-shadow:0 16px 42px rgba(0,0,0,.52);cursor:pointer}.customer-order-lookup-floating svg{width:27px;height:27px;fill:none;stroke:#ef2635;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.customer-order-lookup-floating:focus-visible{outline:3px solid #fff;outline-offset:4px}.customer-order-lookup-modal{position:fixed;inset:0;z-index:100020;display:grid;place-items:center;padding:20px}.customer-order-lookup-modal[hidden]{display:none}.customer-order-lookup-backdrop{position:absolute;inset:0;border:0;background:rgba(0,0,0,.76)}.customer-order-lookup{position:relative;box-sizing:border-box;width:min(520px,100%);max-height:calc(100dvh - 40px);overflow:auto;padding:24px;border:1px solid rgba(255,255,255,.12);border-radius:20px;background:#11151b;color:#fff;box-shadow:0 28px 90px rgba(0,0,0,.68)}.customer-order-lookup>header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.customer-order-lookup>header small{color:#ef7078;font-size:.7rem;font-weight:800;letter-spacing:.15em}.customer-order-lookup>header h2{margin:6px 0 0}.customer-order-lookup>header>button{flex:0 0 40px;width:40px;height:40px;padding:0;border:1px solid #343a45;border-radius:11px;background:#242830;color:#fff;font-size:24px;cursor:pointer}.customer-order-lookup>p{margin:15px 0 18px;color:#aeb5c0;line-height:1.55}.customer-order-lookup form{display:grid;gap:10px}.customer-order-lookup form>label{color:#cbd5e1;font-size:.8rem;font-weight:700}.customer-order-lookup input{box-sizing:border-box;width:100%;padding:12px 13px;border:1px solid #343a45;border-radius:10px;background:#0b0f14;color:#fff;outline:none}.customer-order-lookup input:focus{border-color:#ef2635;box-shadow:0 0 0 3px rgba(239,38,53,.14)}.customer-order-lookup form>button,.customer-order-lookup__result a{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 15px;border:0;border-radius:10px;background:#ef2635;color:#fff;font-weight:750;text-decoration:none;cursor:pointer}.customer-order-lookup form>button:disabled{opacity:.65;cursor:wait}.customer-order-lookup__result{margin-top:16px;padding:16px;border:1px solid #303640;border-radius:14px;background:#0c1015}.customer-order-lookup__result small,.customer-order-lookup__result strong{display:block}.customer-order-lookup__result strong{margin-top:5px}.customer-order-lookup__result p{margin:7px 0 0;color:#cbd5e1}.customer-order-lookup__result[data-state=fulfilled]{border-color:rgba(34,197,94,.35)}.customer-order-lookup__result[data-state=fulfilled] strong{color:#86efac}.customer-order-lookup__result a{width:max-content;margin-top:13px}.customer-order-lookup__result[hidden],.customer-order-lookup__result a[hidden]{display:none}.customer-order-lookup-modal-open{overflow:hidden}@media(max-width:768px){.customer-order-lookup-floating{right:27px;bottom:166px;width:50px;height:50px}.customer-order-lookup-modal{padding:10px}.customer-order-lookup{padding:20px;max-height:calc(100dvh - 20px)}}
.customer-order-recovery,.customer-order-otp{margin-top:16px;padding:16px;border:1px solid #303640;border-radius:14px;background:#0c1015}.customer-order-recovery[hidden],.customer-order-otp[hidden]{display:none}.customer-order-recovery h3{margin:0 0 8px;color:#fff}.customer-order-recovery p,.customer-order-otp p{margin:0;color:#b8c0cc;line-height:1.5}.customer-order-recovery__channels{display:grid;gap:9px;margin-top:14px}.customer-order-recovery__channels button{min-height:44px;padding:10px 14px;border:1px solid #84304b;border-radius:10px;background:#251728;color:#fff;font-weight:800;cursor:pointer}.customer-order-otp fieldset{margin:0;padding:0;border:0}.customer-order-otp legend{margin-bottom:10px;color:#fff;font-size:.85rem;font-weight:800}.customer-order-otp__digits{display:grid;grid-template-columns:repeat(6,minmax(38px,1fr));gap:8px}.customer-order-lookup .customer-order-otp__digits input{padding:10px 3px;text-align:center;font-size:22px;font-weight:800}.customer-order-otp__resend{background:#252a34!important}.customer-order-otp__resend:disabled{opacity:.62}@media(max-width:420px){.customer-order-otp__digits{gap:5px}.customer-order-lookup .customer-order-otp__digits input{min-width:0;font-size:19px}}
.customer-payment-result{width:min(92vw,620px);margin:clamp(72px,12vh,140px) auto;padding:clamp(28px,6vw,52px);border:1px solid rgba(255,255,255,.12);border-radius:24px;background:#11151c;color:#f8fafc;text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.35)}.customer-payment-result small{color:#ef4444;font-weight:800;letter-spacing:.14em}.customer-payment-result h1{margin:14px 0 10px}.customer-payment-result p{color:#b5bdc9;line-height:1.6}.customer-payment-result a{display:inline-flex;margin-top:18px;padding:12px 18px;border-radius:999px;background:#ef4444;color:#fff;text-decoration:none;font-weight:800}
.customer-delivery{display:grid;gap:18px;margin-top:26px;text-align:left}.customer-delivery[hidden]{display:none}.customer-delivery>header{display:flex;align-items:center;gap:12px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1)}.customer-delivery>header>span{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:rgba(49,196,111,.14);color:#8df0b4;font-weight:900}.customer-delivery h2,.customer-delivery h3{margin:3px 0;color:#fff}.customer-delivery-list{display:grid;gap:14px}.customer-delivery-list>article{padding:20px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(255,255,255,.025)}.customer-delivery-list>article>header>p{margin:2px 0 14px}.customer-delivery-list>article>div:not(:last-child){display:grid;gap:8px}.customer-delivery-list>article>div:not(:last-child)>p{display:grid;grid-template-columns:minmax(110px,.7fr) minmax(0,1.3fr);gap:12px;margin:0;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.07)}.customer-delivery-list>article>div:not(:last-child) strong{overflow-wrap:anywhere;color:#fff}.customer-delivery-list button{width:100%;margin-top:16px;padding:12px 18px;border:0;border-radius:999px;background:#ef4444;color:#fff;font-weight:800;cursor:pointer}.customer-delivery-list>article>div:last-child{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}.customer-delivery-list>article>div:last-child p{margin:7px 0}@media(max-width:600px){.customer-payment-result{width:auto;margin:24px 12px;padding:24px 16px}.customer-delivery-list>article>div:not(:last-child)>p{grid-template-columns:1fr;gap:3px}}