@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/* CSS Document */

:root {
  --font-main: "Poppins", sans-serif;
  --dark: #000;
  --light: #FFF;
  --primary: #de093f;
  --secondary: #ffbc00;
  --tertiary: #eee;
  --shadow: 0 0 3rem rgba(0,0,0,0.1);
}

html {
  font-size: 10px; /* 1rem = 10px */
  box-sizing: border-box;
  scroll-behavior: smooth;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
   font-family: var(--font-main);
  margin: 0;
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.no-scroll {
  overflow-x: hidden;
}


/*HEADER*/

.header {
  background-color: transparent;
  padding: 4rem;
  width: 100%;
  text-align: center;
  position: absolute;
  z-index: 2;
}

/* LOGO */
.logo {
  height: 6rem;
  content: url("images/logo-black.svg");
  color: transparent;
display: inline-block;
margin-bottom: 3rem;
}
.home .logo {
  content: url("images/logo-white.svg");
}
.home .nav-item {
  color: var(--light);
}
.home .nav-bt::after {
  background: var(--light);
}

/* NAV */
.nav {
  display: flex;
  justify-content: center;
  gap: 4rem;
  margin-top: 2rem;
}
/* ITEM */
.nav-item {
  text-decoration: none;
  color: var(--dark);
  text-align: center;
}
/* SUBTEXTO */
.nav-bt {
  display: block;
  font-size: 1.4rem;
  letter-spacing: .2rem;
  position: relative;
}
/* LÍNEA BASE (SIEMPRE) */
.nav-bt::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: .1rem;
  background: var(--dark);
  transition: background 0.3s ease;
}

/* hover */
.nav-item:hover .nav-bt::after {
  background: var(--primary);
}

/* activo */
.nav-item.active .nav-bt::after {
  background: var(--primary);
}

/* SUBTEXTO */
.nav-sb {
  display: block;
  font-size: 1rem;
  margin-top: 1rem;
  letter-spacing: .1rem;
}



/* BOTONES FIJOS */
.menu-btn, .cart-btn {
position: fixed;
top: 2rem;
border: none;
cursor: pointer;
color: transparent;
text-decoration: none;
background-position: center center;
background-repeat: no-repeat;
background-size: 75% auto;
border-radius: 50%;
width: 4rem;
height: 4rem;
appearance: none;
background-color: transparent;
z-index: 99;
}

.menu-btn {
  left: 2rem;
  background-image: url("images/icon-menu-black.svg");
}
.home .menu-btn {
  left: 2rem;
  background-image: url("images/icon-menu-white.svg");
}
.menu-btn-change {
background-image: url("images/icon-menu-black.svg") !important;
background-color: var(--light);
}

.cart-btn {
  right: 2rem;
  background-image: url("images/icon-cart-black.svg");
}
.home .cart-btn {
  right: 2rem;
  background-image: url("images/icon-cart-white.svg");
}
.cart-btn-change {
background-image: url("images/icon-cart-black.svg") !important;
background-color: var(--light);
}



/* FOOTER */
.footer {
  padding: 0 8rem;
  position: relative;
  z-index: 4;
}

/* línea superior (bandera) */
.footer-top-line {
  height: .8rem;
  width: 100%;
}
.footer-top-line .red {
background-color: var(--primary);
  height: .2rem;
  width: 100%;
}
.footer-top-line .yellow {
background-color: var(--secondary);
  height: .4rem;
  width: 100%;
}

/* layout principal */
.footer-main {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 6rem;
  align-items: center;
}
.footer-left {
  position: relative;
  top: -4rem;
}
/* imagen */
.footer-image {
  width: 100%;
  position: relative;
}

/* contenido derecho */
.footer-info {
  display: flex;
  justify-content: space-between;
  gap: 4rem;
}

/* bloques */
.footer-block p {
  margin: 1rem 0;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 2rem;
}

.footer-label {
  display: block;
  font-size: 1.2rem;
  letter-spacing: .2rem;
  margin-bottom: 1rem;
}


/* línea divisoria */
.footer-divider {
  height: .2rem;
  background-color: var(--dark);
  margin: 2rem 0;
}

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

/* texto pequeño */
.footer-note {
  font-size: 1.2rem;
}

/* redes */
.footer-social  {
  width: 12rem;
  display: flex;
  flex-direction: row;
  gap:2rem;
}




/*MAIN BANNER*/

.main-banner {
  width: 100%;
  height: 100vh;
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;     /* vertical */
}

.main-banner .txt {
position: relative;
z-index: 5;
text-align: center;
}
.hero-title {
  margin: 0;
  color: var(--light);
}
.title {
  display: block;
  font-size: 5rem;
  font-weight: 600;
}
.subtitle {
  display: block;
  font-size: 3.6rem;
  font-weight: 300;
}

.main-banner .shadow {
background-color: #000;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 2;
opacity: .25;
}



.scrolldown {
position: absolute;
width: 4rem;
background-color: transparent;
border: none;
color: transparent;
bottom: 12rem;
z-index: 3;
}
.scrolldown img {
width: 100%;
height: auto;
}

.vidcell {
top: 0;
left: 0;
width: 100%;
height: 100vh;
position: absolute;
z-index: 0;
background-color: var(--dark);
}
.vidcell video {
width: 100%;
height: 100vh;
position: absolute;
object-fit: cover;
opacity: .5;
}


.access {
/*position: absolute; */
bottom: 0; 
left: 0; 
right: 0; 
z-index: 2;
background-color: var(--tertiary);
  display: flex;
  justify-content: center;
  gap: 2rem;
   padding: 0 4rem;
}

.access-item {
  width: 100%;
  height: 10rem;
  display: flex;              /* faltaba */
  flex-direction: column;     /* vertical */
  justify-content: center;    /* centra vertical */
  align-items: center;        /* centra horizontal */
  text-align: center;
  font-size: 1.6rem;
  color: var(--dark);
  text-decoration: none;
}

/* espacio controlado */
.access-item h3 {
margin: 0;
font-weight: 600;
}
.access-item p {
margin: 0;
font-weight: 400;
}






.slide-intro  {
  padding: 6rem 8rem;
}

/* TEXTO */

.text {
margin-bottom: 4rem;
}
.text h2 {
  font-size: 6rem;
  line-height: 1;
  margin: 0;
}

.text p {
  margin: 2rem 0;
  font-size: 1.6rem;
}

/* SECTION */
.slide-intro .gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6rem;
  align-items: start;
}


/* IMÁGENES */
.col  {
  width: 100%;
  display: block;
  position: sticky;
  top: 12rem;
  background-color: var(--dark);
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.col img  {
  width: 100%;
  height: auto;
}

/* ✨ DESFASE PROGRESIVO */
.col-1 {
  margin-top: 0; /* izquierda (última en alinearse) */
}

.col-2 {
  margin-top: -16rem; /* centro */
}

.col-3 {
  margin-top: -32rem; /* derecha (primera) */
}



.banner {
  aspect-ratio: 2.5 / 1;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center; /* 🔥 SIEMPRE centrado vertical */
  padding: 0 8rem;
  position: relative;
}
.banner h2 {
  font-size: 6rem;
  line-height: 1;
  margin: 0;
}
.banner p {
  margin: 2rem 0;
  font-size: 1.6rem;
}
/* overlay opcional */
.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.3);
}

/* contenido */
.banner-content {
  position: relative;
  color:  var(--light);
  max-width: 50rem;
}

/* VARIACIONES */

/* derecha */
.banner-right {
  justify-content: flex-end;
  text-align: right;
  margin: 0 8rem;
  margin-bottom: 6rem;
  background-image: url("images/img-family-box.jpg");
}

/* centro */
.banner-center {
  justify-content: center;
  text-align: center;
  margin: 0 8rem;
  background-image: url("images/img-spanish-paella.jpg");
}

/* izquierda */
.banner-left {
  justify-content: flex-start;
  text-align: left;
  aspect-ratio: 3 / 1;
  background-image: url("images/img-event.jpg");
}
.banner-left::before {
  background: none;
}
.banner-left h2 {
  font-size: 4rem;
  line-height: 1;
  margin: 0;
}
.banner-left .banner-content {
  color:  var(--dark);
}


.content {
padding: 26rem 8rem 6rem 8rem;
}


/*HELPDESK*/

.helpdesk {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100vw;
  height: 100%;
  background-color: var(--light);
  transition: right 0.3s ease;
  z-index: 100;
display: flex;
flex-direction: column;
}
.helpdesk.show {
  right: 0;
}

.hd-header {
width: 100%;
text-align: center;
padding: 4rem;
padding-bottom: 0;
}
.hd-header .logo {
  height: 6rem;
  content: url("images/logo-black.svg");
  color: transparent;
display: inline-block;
margin-bottom: 3rem;
}



.hd-footer {
  padding: 0 2rem;
  position: relative;
}
/* layout principal */
.hd-footer-main {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 6rem;
  align-items: center;
  margin-top: -8rem;
}
.hd-footer-main .footer-left {
  position: relative;
  margin-top: 0;
}
/* imagen */
.footer-image {
  width: 100%;
  position: relative;
}
/* contenido derecho */
.hd-footer-main .footer-info {
  display: flex;
  justify-content: space-between;
  gap: 4rem;
  padding-top: 8rem;
}
/* bloques */
.footer-block p {
  margin: 1rem 0;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 2rem;
}
.footer-label {
  display: block;
  font-size: 1.2rem;
  letter-spacing: .2rem;
  margin-bottom: 1rem;
}
/* bottom */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}




/* CENTRO */
.menu-center {
  flex: 1; /* ocupa todo el espacio restante */
  display: flex;
 align-items: center;    /* vertical */
  justify-content: center;
}

/* GRID */
.menu-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 4rem;
   align-items: stretch; /*  distribuido */
}

/* COLUMNAS */
.menu-col {
  padding: 0 2rem;
  border-left: .1rem solid var(--dark);
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 🔥 ESTO HACE LA MAGIA */
}
.menu-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* primera columna sin línea */
.menu-main {
  border-left: none;
}

/* links grandes */
.menu-main a {
  display: block;
  font-size: 5rem;
  line-height: 5rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--dark);
}
.menu-main a:hover {
  color: var(--primary);
}

/* títulos */
.menu-col h3 {
  font-size: 2.4rem;
  line-height: 2.4rem;
  font-weight: 500;
  color: var(--dark);
  margin: 0;
}


.icon-close, .icon-cart {
position: absolute;
top: 2rem;
border: none;
cursor: pointer;
color: transparent;
text-decoration: none;
background-position: center center;
background-repeat: no-repeat;
background-size: 75% auto;
border-radius: 50%;
width: 4rem;
height: 4rem;
appearance: none;
background-color: transparent;
z-index: 101;
}
.icon-close {
  left: 2rem;
  background-image: url("images/arrow-close.svg");
}
.icon-cart {
  right: 2rem;
  background-image: url("images/icon-cart-black.svg");
}



/* REDES */

.redes {
	color:transparent;
	cursor:pointer;
	width: 6rem;
	aspect-ratio: 1 / 1;
	text-decoration:none;
	vertical-align: middle;
	background-position: center center;
	background-repeat: no-repeat;
    border-radius: 50%;
    background-size: 75% auto;
}
.redes:hover {
transform: scale(1.1);
background-color: #FFF;
box-shadow: var(--shadow);
}


.instagram {
background-image: url("images/icon-in-black.svg?v=1.4");
}
.instagram:hover {
background-image: url(images/icon-in.svg?v=1.4);
}
.facebook {
background-image: url("images/icon-fb-black.svg?v=1.4");
}
.facebook:hover {
background-image: url(images/icon-fb.svg?v=1.4);
}


.bt-base {
all: unset;
font-size:1.2rem;
text-align: center;
text-decoration: none;
padding: 1rem 2rem;
font-weight: 400;
letter-spacing: .2rem;
display: inline-block;
text-transform: uppercase;
vertical-align: middle;
border: none;
appearance: none;
cursor: pointer;
transition: all .25s ease-out;
background-color: transparent;
}
.bt-base:hover {
transform: scale(1.05);
}

.bt-black {
border: solid .1rem var(--dark);
color: var(--dark);
}

.bt-white {
border: solid .1rem var(--light);
color: var(--light);
}

.bt-order {
border: solid .1rem var(--dark);
color: var(--light);
background-color: var(--dark);
padding: 2rem;
font-size:1.6rem;
}
.bt-order:hover {
background-color: var(--primary);
border-color: var(--primary);
}


/*ABOUT*/

.about-banner {
  width: 100%;
  position: relative;
  padding: 35rem 8rem 15rem 8rem;
  z-index: 1;
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;     /* vertical */
  background-color: var(--dark);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("images/banner-about.jpg");
}
.about-wrapper {
position: relative;
z-index: 5;
text-align: center;
color: var(--light);
margin: 0 auto;
max-width: 80rem;
}
.about-wrapper .title {
font-size: 4rem;
line-height: 3.6rem;
margin: 0;
margin-bottom: 2rem;
font-weight: 600;
}
.about-wrapper h1 {
font-size: 3rem;
margin: 0;
margin-bottom: 4rem;
font-weight: 400;
line-height: 3.6rem;
}
.about-wrapper p {
font-size: 1.6rem;
margin: 0;
margin-bottom: 2rem;
}
.about-shadow {
background-color: var(--dark);
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 2;
opacity: .6;
}





/* PAGINAS DE COMIDA */
.builder-header {
  text-align: center;
  color:  var(--dark);
   max-width: 90rem;   /* 🔥 controla el ancho */
  margin: 0 auto 4rem; /* 🔥 centra horizontal + mantiene margen inferior */
}

.builder-header h2 {
  font-size: 3rem;
  line-height: 3rem;
  font-weight: 400;
  margin: 0;
  margin-bottom: 2rem;
}

.builder-header p {
   font-size: 1.6rem;
   margin: 0;
}

/* GALERÍA */
.builder-gallery {
  display: grid;
grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  position: relative;
  left: -8rem;
  width: 100vw;
}

.builder-gallery img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  background-color: var(--tertiary);
}

/* BANNER */
.builder-banner {
  display: grid;
  position: relative;
  left: -8rem;
  width: 100vw;
}
.builder-banner img {
  width: 100%;
  aspect-ratio: 3/1;
  object-fit: cover;
  background-color: var(--tertiary);
}

/* STEP */
.title-step {
font-size: 2.4rem;
}
.desc{
font-size: 1.5rem;
}

.step {
  margin-top: 6rem;
  text-align: center;
  position: relative;
}
.step-1 {
margin-top: -4rem;
}
/* wrapper SOLO para línea + círculo */
.step-head {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
}

/* línea */
.step-line {
  position: absolute;
  width: 100%;
  height: .3rem;
  background: var(--dark);
}

/* círculo */
.step-number {
  width: 8rem;
  height: 8rem;
  background: var(--dark);
  color: var(--light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  font-weight: 600;
  position: relative;
  z-index: 2;
}

/* opciones */
.options-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  margin-top: 4rem;
}
.op-fix {
margin-top: -4rem;
margin-bottom: 4rem;
}
/* grupo */
.options-group {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
/* títulos */
.options-group h3 {
  text-align: center;
  margin-bottom: 1rem;
  font-size: 2.4rem;
}


/* card */
.option {
  background-color: var(--tertiary);
  padding: 2rem;
  border: .1rem solid var(--tertiary);
  display: flex;
  justify-content: space-between; /* 🔥 separa izquierda/derecha */
  align-items: center;
  gap: 2rem;
}

/* contenido */
.option-content {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  text-align: left;
}
h4 {
font-size: 2rem;
font-weight: 600;
margin: 0;
}
p {
font-size: 1.6rem;
margin: 0;
}
.price {
  font-size: 2rem;
  font-weight: 600;
}

/* botón */
.option-action {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* check oculto por defecto */
 .option-action .check {
  font-size: 2rem;
  color: var(--primary);
  display: none;
}
 .option-action .qty {
   display: none;
  gap: 1rem;
}

/* activo */
.option.active {
  border: .1rem solid var(--primary);
  color: var(--primary);
  background-color: var(--light);
}
.option.active .option-action .add {
  display: none;
  pointer-events: none;
}
.option.active .option-action .check {
  display: flex;
  transform: scale(1);
}
.option.active .option-action .qty {
  display: flex;
  transform: scale(1);
}




/* TABS */
.tabs {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 4rem 0;
}
/* base */
.tab {
  width: 20rem; 
  height: 6rem;
  border: .1rem solid var(--dark);
  background-color: var(--light);
  color: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center; /* default centrado */
  position: relative;
  cursor: pointer;
  transition: all .2s ease;
}

/* texto */
.tab-text {
  pointer-events: none;
  font-size: 2rem;
}

/* check oculto */
.tab-check {
  position: absolute;
  right: 15px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color:  var(--primary);
  color: var(--light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  opacity: 0;
  transform: scale(0.8);
  transition: all .2s ease;
}

/* HOVER */
.tab:hover {
  background-color: var(--primary);
  color: var(--light);
  border-color: var(--primary);
}

/* ACTIVE */
.tab.active {
  background: var(--light);
  color: var(--primary);
  border-color: var(--primary);
  justify-content: flex-start; /*  texto a la izquierda */
  padding-left: 20px;
}

/* mostrar check */
.tab.active .tab-check {
  opacity: 1;
  transform: scale(1);
}

/* evitar que hover rompa active */
.tab.active:hover {
  background-color: var(--light);
  color: var(--primary);
}


/* items */
.items-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}



/* summary */
.summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 4rem 0;
}

/* card */
.summary-item {
  position: relative; 
  background: var(--tertiary);
  color: var(--dark);
  padding: 4rem 2rem;
  text-align: center;
  padding-bottom: 3rem;
}

/* contenido */
.summary-content {
  font-size: 1.6rem;
}

/* CHECK ARRIBA CENTRADO */
.summary-check {
  position: absolute;
  top: -2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--primary);
  color:  var(--light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

/* EDIT abajo derecha */
.summary-edit {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  background: none;
  border: none;
  cursor: pointer;
  color: 2rem;
}



.confirmation-action p {
width: 100%;
margin: 2rem 0;
font-size: 1.2rem;
color: var(--dark);
}

.call {
max-width: 60rem;   /* 🔥 controla el ancho */
margin: 0 auto 4rem; /* 🔥 centra horizontal + mantiene margen inferior */
margin-top:4rem;
}

.call p {
font-size: 4rem;
font-weight: 600;
margin: 0;
line-height: 3.6rem;
margin-bottom: 4rem;
}






/* =========================
   FAQS
========================= */
.faq {
  max-width: 100rem;
  margin: 0 auto;
}

/* HEADER */
.faq-header {
  text-align: center;
  color: var(--dark);
  max-width: 90rem;
  margin: 0 auto 4rem;
}

.faq-header h2 {
  font-size: 3rem;
  line-height: 4rem;
  font-weight: 400;
  margin: 0 0 2rem;
}

.faq-header p {
  font-size: 2rem;
  margin: 0;
}

/* TABS */
.faq-tabs {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 4rem;
}

.faq-tab {
  padding: 1.5rem 2rem;
  border: none;
  background-color: var(--tertiary);
  cursor: pointer;
  transition: .2s;
  font-size: 2rem;
  font-weight: 500;
}

.faq-tab:hover {
  background: var(--dark);
  color: var(--light);
}

.faq-tab.active {
  background-color: var(--secondary);
  color: var(--dark);
}

/* =========================
   ACCORDION
========================= */

.faq-item {
  border-top: 1px solid var(--dark);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--dark);
}

.faq-question {
  width: 100%;
  padding: 2rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  font-size: 2rem;
  font-weight: 600;
  cursor: pointer;
}

/* respuesta dinámica */
.faq-answer {
  max-height: 0;
  font-size: 1.6rem;
  overflow: hidden;
  transition: max-height .3s ease;
}
.faq-answer p {
  padding-bottom: 4rem;
}

.icon {
  position: relative;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ambos iconos */
.icon-closed,
.icon-open {
  position: absolute;
  color: transparent;
  width: 2rem;
  height: 2rem;
  background-position: right center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

/* estado inicial */
.icon-closed {
  background-image: url(images/arrow-down.svg);
}
.icon-open {
  display: none;
  background-image: url(images/arrow-up.svg);
}

/* activo */
.faq-item.active .icon-closed {
  display: none;
}

.faq-item.active .icon-open {
  display: block;
}



/*PICKUP*/
.pickup-header {
  text-align: center;
  color: var(--dark);
  max-width: 90rem;
  margin: 0 auto 4rem;
}
.pickup-header h2 {
  font-size: 3rem;
  line-height: 4rem;
  font-weight: 400;
  margin: 0 0 2rem;
}
.pickup-header p {
  font-size: 2rem;
  margin: 0;
}

/* layout */
.pickup-wrapper {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 4rem;
  align-items: stretch; /* 🔥 clave */
}

/* MAPA con ratio */
.pickup-map {
  aspect-ratio: 1.75 / 1;
  width: 100%;
}

.pickup-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* LEFT ocupa misma altura */
.pickup-info {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 4rem;
}

/* empuja el note abajo */
.pickup-note {
  margin-top: auto; /* clave */
  font-size: 1.4rem;
}

/* ITEM */
.pickup-item {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}
/* icono */
.pickup-icon img {
  width: 3rem;
  height: 3rem;
}
/* texto */
.label {
  display: block;
  font-size: 1.2rem;
  letter-spacing: .2rem;
  margin-bottom: .5rem;
}
.pickup-text p {
  font-size: 2rem;
  margin: 0;
}

/* botones */
.pickup-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}
.btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: .5rem;
  text-decoration: none;
  font-size: 1.4rem;
}
/* waze */
.btn-waze {
  background: #33ccff;
  color: #000;
}
/* google */
.btn-google {
  background: #f2f2f2;
  color: #000;
}
.btn img {
  width: 2.6rem;
  height: auto;
}



/*CONTACTO FRM*/

/* grid */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

/* columnas */
.form-left, .form-right {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* inputs */
input, textarea {
  width: 100%;
  height: 6rem;
  border: .1rem solid var(--dark);
  background-color: var(--light);
  font-size: 1.6rem;
  font-family: inherit;
  outline: none;
  padding: 2rem;
}

/* altura textarea */
textarea {
  height: 14rem; /* controla altura real */
  resize: none;
}

/* botón */
.btn-submit {
  background-color: var(--dark);
  color: var(--light);
  border: none;
  height: 6rem;
  font-size: 1.6rem;
  letter-spacing: .2rem;
  cursor: pointer;
}

/* placeholder */
input::placeholder, textarea::placeholder {
  color: var(--dark);
  opacity: 1;
}



/* checkout */

.checkout-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 4rem;
  align-items: start; /*  clave */
}

/* LEFT */
.checkout-left {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.checkout-left h2, .checkout-right h2  {
font-size: 2.4rem;
margin: 0;
}

/* RIGHT */
.checkout-right {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-left: 3rem;
  border-left: .1rem solid var(--dark);
  position: sticky;
  top: 20rem;
  align-self: start; /* clave */
}
/* =========================
   CART ITEM
========================= */

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #eee;
  padding: 2rem;
}

.item-info {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  font-size: 1.6rem;
}

.item-info a {
  font-size: 1.2rem;
  text-decoration: underline;
}

.item-actions {
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* qty */
.qty {
  display: flex;
  align-items: center;
  background: #ddd;
}

.qty button {
  border: none;
  background: transparent;
  padding: .5rem 1rem;
  cursor: pointer;
}

.qty span {
  padding: 0 1rem;
}

/* price */
.price {
  font-weight: bold;
}

/* remove */
.remove {
  background: none;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
}

/* =========================
   FORM
========================= */

/* input con icono */
.input-icon {
  position: relative;
}

.input-icon span {
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
}