/* ================================================================
   PRODUCTO / TAMAÑOS  —  Colombian Wings
   Hoja complementaria: se carga DESPUÉS de style.css.
   Solo contiene lo propio de las páginas de tamaños.
   ================================================================ */

/* ---------- Encabezado del producto ---------- */
.p-hero{
  position:relative;
  min-height:52svh;
  display:flex;
  align-items:flex-end;
  padding:130px 0 48px;
  overflow:hidden;
  background:var(--black);
}

.p-hero-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:.5;
  z-index:0;
}

.p-hero::after{
  content:'';
  position:absolute; inset:0;
  z-index:1;
  background:linear-gradient(180deg, rgba(10,10,10,.7) 0%, rgba(10,10,10,.35) 38%, rgba(10,10,10,.96) 100%);
}

.p-hero .container{ 
  position:relative; z-index:2; 
  }


.p-hero .ccontainer{ 
  position:relative; z-index:2; 
  }


  @media (max-width: 768px){
  .sizes .reveal,
  .size-grid .reveal,
  .size-grid .size-card,
  .containerburger .reveal,
  .containersalchipapas .reveal,
  .containerninos .reveal,
  .ccontainer .reveal,
  .ncontainer .reveal,
  .reveal{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    animation:none !important;
    visibility:visible !important;
  }
}


.ccontainer{ 
    max-width:1100px;
    align-content:center;
    margin-left:255px;
  }



.p-hero .ncontainer{ 
  position:relative; z-index:2; 
  }

.ncontainer{ 
    max-width:1100px;
    align-content:center;
    margin-left:476px;
  }


.containerburger,
.containersalchipapas,
.containerninos{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 20px;
  box-sizing:border-box;
}

@media (min-width:1200px){
  .containerburger,
  .containersalchipapas{ max-width:950px; }
  .containerninos{ max-width:720px; }

  .containerburger .size-grid,
  .containersalchipapas .size-grid{ grid-template-columns:repeat(4,1fr); }
  .containerninos .size-grid{ grid-template-columns:repeat(3,1fr); }
}
.p-back{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.72rem; letter-spacing:2.4px; text-transform:uppercase;
  font-weight:600;
  color:var(--muted);
  margin-bottom:18px;
  transition:color .2s ease, gap .2s ease;
}
.p-back:hover{ color:var(--white); gap:14px; }
.p-back:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }

.p-title{
  font-size:clamp(2.2rem, 7vw, 4rem);
  line-height:1;
  text-shadow:0 4px 24px rgba(0,0,0,.6);
}
.p-title .accent{ color:var(--red); }

.p-desc{
  color:#e3dbdb;
  max-width:580px;
  margin-top:16px;
  font-size:1rem;
}

/* ---------- Sección de tamaños ---------- */
.sizes{ 
  padding:70px 0 90px; 
}

.size-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: stretch;
  }

  .size-card{
  position: relative;
  background: var(--card);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%; 
}


@media(min-width:520px){  .size-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:920px){  .size-grid{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:1200px){ .size-grid{ grid-template-columns:repeat(5,1fr); gap:14px; } }



.size-card:hover{
  transform:translateY(-6px);
  border-color:rgba(227,30,36,.45);
  box-shadow:0 18px 44px rgba(0,0,0,.55);
}
.size-card.is-popular{ border-color:rgba(252,209,22,.45); }

/* Etiqueta "Más pedida" */
.size-flag{
  position:absolute; top:12px; right:12px; z-index:3;
  background:var(--gold);
  color:var(--black);
  font-size:.58rem; font-weight:800;
  letter-spacing:1.4px; text-transform:uppercase;
  padding:5px 11px;
  border-radius:100px;
}

/* ---------- Ilustración de la canasta (crece con el tamaño) ---------- */
.size-visual{
  height:var(--vis-h, 150px);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 12px, transparent 12px 24px),
    linear-gradient(160deg,#241d1d,#120f0f);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.size-basket{
  width:76%;
  height:calc(var(--vis-h, 150px) - 22px);
  clip-path:polygon(15% 0, 85% 0, 100% 100%, 0 100%);
  background:linear-gradient(180deg, rgba(227,30,36,.32), rgba(227,30,36,.08));
  border-top:2px solid rgba(252,209,22,.5);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:12px 10px 0;
}

.basket-count{
  font-family:'Anton', sans-serif;
  font-size:1.5rem;
  line-height:1;
  letter-spacing:.5px;
  color:var(--white);
  text-shadow:0 2px 10px rgba(0,0,0,.65);
}

.basket-dips{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:7px;
  max-width:100px;
}
.basket-dips i{
  width:20px; height:20px;
  border-radius:50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255,255,255,.55), transparent 58%),
    var(--gold);
  box-shadow:0 2px 6px rgba(0,0,0,.55);
}

/* ---------- Cuerpo de la tarjeta ---------- */
.size-body{
  padding:18px 18px 20px;
  display:flex;
  flex-direction:column;
  flex:1;
}

.size-label{
  font-size:.63rem;
  letter-spacing:2.2px;
  text-transform:uppercase;
  font-weight:700;
  color:var(--gold);
}

.size-name{
  font-family:'Anton', sans-serif;
  font-size:1.3rem;
  letter-spacing:.5px;
  margin:7px 0 14px;
}

.size-includes{
  display:flex;
  flex-direction:column;
  gap:9px;
  flex:1;
}
.size-includes li{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:.83rem;
  color:var(--muted);
  line-height:1.4;
}
.size-includes li b{ color:#efe8e8; font-weight:600; }
.size-ico{ width:20px; flex-shrink:0; text-align:center; font-size:.95rem; }

.size-price{ margin:18px 0 14px; }
.size-price .price{
  display:block;
  font-family:'Anton', sans-serif;
  font-size:1.55rem;
  letter-spacing:.5px;
  color:var(--gold);
  line-height:1;
}
.size-price .price-note{
  display:block;
  margin-top:5px;
  font-size:.66rem;
  letter-spacing:.4px;
  color:var(--muted);
}

.btn-sm{
  padding:12px 18px;
  font-size:.76rem;
  width:100%;
  justify-content:center;
}

/* ---------- Nota de referencia ---------- */
.p-note{
  margin-top:34px;
  font-size:.82rem;
  font-style:italic;
  line-height:1.6;
  color:var(--muted);
  background:rgba(255,255,255,.04);
  border:1px dashed rgba(255,255,255,.18);
  border-radius:10px;
  padding:14px 20px;
}

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .size-card, .p-back, .menu-card-cta{ transition:none; }
}