:root{
  --cream:#FFF8F9;--oat:#F1E1E6;--oat-soft:#F8EDF0;--oat-line:#EDD5DC;
  --taupe:#E3A5B7;--accion:#9E4A68;--taupe-deep:#B0607C;--charcoal:#4A4A4A;--charcoal-soft:#6E6B66;
  --blush:#F2C7D8;--sage:#BFE0D0;--powder:#B7D8F5;--lavender:#D9D2EE;--butter:#F2D89B;
  --sage-soft:#F0F7F3;--sage-ink:#5E8C74;--terracota:#B5786C;
  --serif:'Lora',Georgia,serif;--sans:'Montserrat',system-ui,-apple-system,sans-serif;
  --shadow:0 14px 36px rgba(74,74,74,.11);--shadow-sm:0 4px 16px rgba(74,74,74,.07);--r:18px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* Aquí había un overflow-x:hidden "de seguridad". Se quitó: la medición
   mostró que nada se sale (viewport 885 · página 870), y un overflow en
   la raíz rompe el position:sticky de sus hijos — o sea el encabezado de
   la tienda y la galería de la ficha. Un parche que no hacía falta y que
   se llevaba dos cosas que sí funcionan. */
body{background:var(--cream);color:var(--charcoal);font-family:var(--sans);font-weight:400;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:color .2s}
a:hover{color:var(--taupe-deep)}
h1,h2,h3,.serif{font-family:var(--serif)}
/* El ancho crece con la pantalla en vez de quedarse clavado en 1200: en
   un monitor grande, 1200 dejaba franjas enormes y todo se veía corrido
   al centro. El tope de 1440 existe porque una línea de texto más ancha
   que eso se vuelve incómoda de leer. */
.wrap{width:min(100% - 56px, 1440px);margin:0 auto;padding:0}
@media(max-width:720px){ .wrap{width:min(100% - 36px, 1440px)} }
.eyebrow{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--taupe);font-weight:600}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:1px;text-transform:uppercase;padding:14px 30px;border-radius:40px;border:1.5px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .12s;text-align:center}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accion);color:#fff}
.btn-primary:hover{background:#86395A;color:#fff}
.btn-outline{background:transparent;color:var(--charcoal);border-color:var(--taupe)}
.btn-outline:hover{background:var(--taupe);color:#fff}
.btn-dark{background:var(--charcoal);color:#fff}
.btn-dark:hover{background:#333;color:#fff}
.btn-block{width:100%}
.btn-sm{padding:12px 18px;font-size:12px}

/* topbar */
.topbar{background:var(--oat);color:var(--charcoal-soft);font-size:12px;letter-spacing:.4px}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:38px;flex-wrap:wrap;padding:6px 0}
.topbar .msg{min-width:0}
.topbar .msg span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .msg{display:flex;align-items:center;gap:8px}
.topbar .msg img{width:15px;height:15px;opacity:.7}
.topbar .socials{display:flex;gap:14px}
.topbar .socials a{opacity:.75}.topbar .socials a:hover{opacity:1}

/* header */
.header{background:var(--cream);border-bottom:1px solid var(--oat-line);position:sticky;top:0;z-index:40}
.header .wrap{display:flex;align-items:center;gap:24px;min-height:84px}
.header .wrap>*{min-width:0}
.logo{flex-shrink:0;display:flex}
.logo svg,.logo img{height:48px;width:auto;display:block}
/* el menú se reparte el espacio que queda entre el logo y los iconos y
   se centra en él, en vez de quedar recargado contra el logo */
.nav{display:flex;gap:26px;flex:1;justify-content:center}
.nav a{font-size:13px;letter-spacing:.6px;color:var(--charcoal);padding:6px 0;position:relative}
.nav a::after{content:'';position:absolute;left:0;bottom:-2px;height:2px;width:0;
  background:var(--col-linea,var(--taupe));transition:width .25s}
.nav a:hover::after,.nav a.active::after{width:100%}
.nav a.active{color:var(--taupe-deep)}

.icons{display:flex;align-items:center;gap:18px}
.icons a{color:var(--charcoal);display:flex;position:relative}
.icons a:hover{color:var(--taupe-deep)}
.icons svg{width:21px;height:21px}
.cart-count{position:absolute;top:-7px;right:-9px;background:var(--taupe);color:#fff;font-size:9px;font-weight:600;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--sans)}
.burger{display:none;background:none;border:none;color:var(--charcoal);cursor:pointer}

/* sections */
.section{padding:82px 0}
.section-alt{background:var(--oat-soft)}
.shead{text-align:center;max-width:560px;margin:0 auto 46px}
.shead .eyebrow{margin-bottom:12px;display:inline-block}
.shead h2{font-size:clamp(27px,3vw,37px);font-weight:500;letter-spacing:-.3px}
.shead p{margin-top:12px;font-size:14.5px;font-weight:300;color:var(--charcoal-soft)}

/* HERO (home) */
.heroA{position:relative;min-height:600px;display:flex;align-items:center;
  background-image:linear-gradient(90deg, rgba(255,248,249,.97) 0%, rgba(255,248,249,.86) 32%, rgba(255,248,249,.38) 55%, rgba(255,248,249,0) 72%), var(--hero,url('demo/hero.svg'));
  background-size:cover;background-position:right center}
.heroA-inner{width:min(100% - 56px, 1440px);margin:0 auto;padding:64px 0}
@media(max-width:720px){ .heroA-inner{width:min(100% - 36px, 1440px)} }
.heroA .eyebrow{margin-bottom:16px;display:inline-block}
.heroA h1{font-size:clamp(36px,4.4vw,60px);font-weight:500;line-height:1.08;
  letter-spacing:-.5px;max-width:15ch}
.heroA h1 em{font-style:italic;color:var(--taupe)}
.heroA p{margin:20px 0 0;font-size:15.5px;font-weight:300;color:var(--charcoal-soft);max-width:430px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

/* categories */
.cats{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.cat{position:relative;aspect-ratio:3/4;border-radius:20px;overflow:hidden;display:block;transition:transform .28s ease,box-shadow .28s ease}
.cat:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.cat>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.cat:hover>img{transform:scale(1.05)}
.cat .veil{position:absolute;inset:0}
.cat.bebe .veil{background:linear-gradient(to top,rgba(191,224,208,.96) 0%,rgba(191,224,208,.35) 40%,transparent 66%)}
.cat.nina .veil{background:linear-gradient(to top,rgba(242,199,216,.96) 0%,rgba(242,199,216,.35) 40%,transparent 66%)}
.cat.nino .veil{background:linear-gradient(to top,rgba(183,216,245,.96) 0%,rgba(183,216,245,.35) 40%,transparent 66%)}
.cat.teen .veil{background:linear-gradient(to top,rgba(217,210,238,.96) 0%,rgba(217,210,238,.35) 40%,transparent 66%)}
.cat.acc .veil{background:linear-gradient(to top,rgba(242,216,155,.96) 0%,rgba(242,216,155,.35) 40%,transparent 66%)}
.cat.ofertas .veil{background:linear-gradient(to top,rgba(200,190,178,.96) 0%,rgba(200,190,178,.4) 40%,transparent 66%)}
.cat .txt{position:absolute;left:0;right:0;bottom:0;padding:16px 14px 18px;text-align:center;color:var(--charcoal)}
.cat h3{font-size:19px;font-weight:600}
.cat .age{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--charcoal);opacity:.7;margin-top:2px;font-family:var(--sans)}
.cat .go{margin-top:8px;font-size:12px;letter-spacing:1px;font-weight:600;opacity:.65;transition:opacity .2s}
.cat:hover .go{opacity:1}

/* product card */
.products{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.product-card{background:#fff;border:1px solid var(--oat-line);border-radius:var(--r);overflow:hidden;transition:transform .28s ease,box-shadow .28s ease;display:flex;flex-direction:column}
.product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.pc-media{position:relative;aspect-ratio:1/1;overflow:hidden;background:#fff}
.pc-media img{width:100%;height:100%;object-fit:contain}
.pc-tag{position:absolute;top:12px;left:12px;font-size:10px;letter-spacing:.6px;text-transform:uppercase;font-weight:600;color:var(--charcoal);background:#fff;padding:4px 10px;border-radius:20px;box-shadow:var(--shadow-sm)}
.pc-tag.sale{background:var(--blush)}
.pc-fav{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);cursor:pointer;color:var(--charcoal-soft);border:none;transition:transform .2s,color .2s}
.pc-fav:hover{transform:scale(1.08);color:var(--blush)}
.pc-fav svg{width:17px;height:17px}
.pc-fav.on{color:var(--blush)}.pc-fav.on svg{fill:var(--blush)}
.pc-body{padding:15px 16px 17px;display:flex;flex-direction:column;flex:1}
.pc-eyebrow{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--taupe);font-weight:600;margin-bottom:6px}
.pc-name{font-family:var(--serif);font-size:16px;font-weight:600;line-height:1.35;margin-bottom:10px}
.pc-price{display:flex;align-items:baseline;gap:8px;margin-top:auto;margin-bottom:14px}
.pc-price .now{font-family:var(--serif);font-size:19px;font-weight:600}
.pc-price .was{font-size:13px;color:var(--charcoal-soft);text-decoration:line-through}

/* values */
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.value{text-align:center;padding:8px}
.value .vi{width:58px;height:58px;border-radius:50%;background:#fff;border:1px solid var(--oat-line);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-family:var(--serif);font-size:22px;font-weight:600;color:var(--taupe-deep)}
.value h3{font-size:15px;font-weight:600;margin-bottom:6px;font-family:var(--sans)}
.value p{font-size:12.5px;font-weight:300;color:var(--charcoal-soft);max-width:210px;margin:0 auto}

/* promo */
.promo{background:var(--taupe);border-radius:24px;padding:56px 40px;text-align:center;color:#fff;position:relative;overflow:hidden}
.promo::before,.promo::after{content:'';position:absolute;border-radius:50%}
.promo::before{width:280px;height:280px;top:-120px;left:-80px;background:rgba(255,255,255,.09)}
.promo::after{width:220px;height:220px;bottom:-110px;right:-60px;background:rgba(255,255,255,.08)}
.promo .eyebrow{color:rgba(255,255,255,.85);position:relative}
.promo h2{font-size:clamp(28px,3.4vw,40px);font-weight:500;margin:14px 0 8px;position:relative;color:#fff}
.promo p{position:relative;font-weight:300;color:rgba(255,255,255,.9);max-width:460px;margin:0 auto 26px}
.promo .btn-primary{background:#fff;color:var(--charcoal);position:relative}
.promo .btn-primary:hover{background:var(--cream)}

/* instagram */
/* instagram */
.insta{text-align:center}
.insta-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:34px}
.insta-tile{position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden;display:block;background:var(--oat-soft)}
.insta-tile .photo{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.insta-tile:hover .photo{transform:scale(1.06)}
.insta-tile .ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(74,74,74,0);transition:background .3s}
.insta-tile:hover .ov{background:rgba(74,74,74,.28)}
.insta-tile .ov img{width:26px;height:26px;opacity:0;filter:invert(1);transition:opacity .3s}
.insta-tile:hover .ov img{opacity:1}

/* footer */
.footer{background:var(--charcoal);color:rgba(255,255,255,.72);padding:64px 0 0;font-size:13px;font-weight:300}
.footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer h4{font-family:var(--serif);font-size:15px;font-weight:600;color:#fff;margin-bottom:18px}
.footer ul{list-style:none;display:grid;gap:11px}
.footer a{opacity:.75}.footer a:hover{opacity:1;color:var(--butter)}
.footer .brandchip{background:var(--cream);border-radius:12px;padding:12px 14px;display:inline-block}
.footer .brandchip img{height:40px}
.footer .brandcol p{margin:16px 0;max-width:280px;opacity:.7;line-height:1.7}
.footer .contact li{display:flex;gap:10px;align-items:flex-start;opacity:.8}
.footer .contact img{width:16px;height:16px;flex-shrink:0;margin-top:3px;filter:invert(1);opacity:.6}
.footer .fsoc{display:flex;gap:14px;margin-top:18px}
.footer .fsoc a{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center}
.footer .fsoc img{width:17px;height:17px;filter:invert(1);opacity:.8}
.subfooter{display:flex;align-items:center;justify-content:space-between;padding:20px 0;font-size:12px;opacity:.6;flex-wrap:wrap;gap:12px}
.pay{display:flex;gap:7px}
.pay span{background:rgba(255,255,255,.1);border-radius:5px;padding:4px 9px;font-size:10px;letter-spacing:.5px}

/* breadcrumb */
.crumb{font-size:12px;color:var(--charcoal-soft);padding:22px 0 0}
.crumb a:hover{color:var(--taupe-deep)}
.crumb .sep{color:var(--taupe);margin:0 8px}

/* category page */
.cat-hero{padding:26px 0 6px}
.cat-hero .pill{display:inline-block;width:34px;height:12px;border-radius:20px;vertical-align:middle;margin-right:12px}
.cat-hero h1{font-size:clamp(30px,3.4vw,42px);font-weight:500;letter-spacing:-.3px;display:inline-block;vertical-align:middle}
.cat-hero p{margin-top:12px;font-size:14.5px;font-weight:300;color:var(--charcoal-soft);max-width:560px}
.cat-toolbar{display:flex;align-items:center;justify-content:space-between;margin:22px 0 8px;font-size:13px;color:var(--charcoal-soft);flex-wrap:wrap;gap:10px}
.cat-toolbar select{font-family:var(--sans);font-size:13px;color:var(--charcoal);border:1px solid var(--oat-line);border-radius:40px;padding:9px 16px;background:#fff}
.shop{display:grid;grid-template-columns:230px 1fr;gap:34px;align-items:start;padding-bottom:40px}
.filters{position:sticky;top:104px}
.fblock{border-bottom:1px solid var(--oat-line);padding:20px 0}
.fblock:first-child{padding-top:6px}
.fblock h4{font-family:var(--sans);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--charcoal);margin-bottom:14px;font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:12.5px;border:1px solid var(--oat-line);border-radius:20px;padding:7px 14px;cursor:pointer;background:#fff;transition:.18s;color:var(--charcoal)}
.chip:hover,.chip.on{border-color:var(--taupe);background:var(--oat-soft)}
/* =====================================================================
   PARA QUIÉN — el filtro grande
   =====================================================================
   No es un chip más. Dentro de Bebé —donde niña, niño y unisex viven
   revueltos— es el primer corte que hace quien compra, así que va hasta
   arriba, ocupa todo el ancho y trae la cuenta de cada uno. Un chip
   chiquito perdido entre los de talla no se ve.
   ===================================================================== */
.fpara{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pbtn{display:flex;flex-direction:column;align-items:center;gap:2px;
  border:1.5px solid var(--oat-line);border-radius:14px;background:#fff;
  padding:12px 6px 10px;cursor:pointer;transition:.18s;
  font-family:var(--sans);color:var(--charcoal);line-height:1.2}
.pbtn b{font-size:13.5px;font-weight:600}
.pbtn span{font-size:11px;color:var(--charcoal-soft);font-variant-numeric:tabular-nums}
.pbtn:hover{border-color:var(--taupe)}
.pbtn.on{border-color:var(--taupe-deep);background:var(--tono,var(--oat-soft));
  box-shadow:0 1px 0 var(--taupe-deep) inset}
.pbtn.on span{color:var(--charcoal)}
@media(max-width:860px){ .filters .fblock.ancho{grid-column:1 / -1} }

.swatch-row{display:flex;gap:10px;flex-wrap:wrap}
.swatch{width:26px;height:26px;border-radius:50%;cursor:pointer;border:2px solid #fff;box-shadow:0 0 0 1px var(--oat-line);transition:.18s}
.swatch:hover{box-shadow:0 0 0 2px var(--taupe-deep)}
.shop .products{grid-template-columns:repeat(3,1fr)}

/* product detail */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:20px 0 40px;align-items:start}
/* --- flechas de recorrido, debajo de la galería ---
   Van aquí y no junto a las migas para que el ojo no tenga que subir
   hasta arriba: quedan a la altura de las miniaturas, que es donde ya
   está la mano cuando se anda viendo la prenda.
   La galería sigue siendo hija directa de la rejilla —si se envolviera,
   se rompería su position:sticky— así que la celda se asigna a mano. */
.gal-col{position:sticky;top:104px}
.gal-col .pdp-nav{justify-content:center;margin-top:16px}
.pdp-nav{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--charcoal-soft)}
.pdp-nav-b{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:30px;
  border:1px solid var(--oat-line);background:#fff;color:var(--charcoal);text-decoration:none;
  max-width:190px;transition:border-color .2s ease}
.pdp-nav-b:hover{border-color:var(--taupe)}
.pdp-nav-b span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdp-nav-b svg{width:15px;height:15px;flex:none}
.pdp-nav-b.off{opacity:.45;background:transparent;border-style:dashed}
.pdp-nav-n{font-variant-numeric:tabular-nums;padding:0 4px;white-space:nowrap}
@media (max-width:720px){
  .crumb-row{flex-direction:column;align-items:flex-start}
  .pdp-nav{width:100%;justify-content:space-between}
  .pdp-nav-b{max-width:40%}
}

.gallery{position:static}
/* contain y no cover: el marco es cuadrado y las fotos vienen en
   proporciones distintas, así que cover recortaba cada una por un lado
   diferente. Con contain se ve la prenda completa y lo que sobra se
   rellena de blanco, que es el mismo fondo de las fotos de producto. */
.gallery .main{aspect-ratio:1/1;border-radius:22px;overflow:hidden;position:relative;background:#fff}
.gallery .main img{width:100%;height:100%;object-fit:contain}
.gallery .badge{position:absolute;top:16px;left:16px;background:var(--blush);color:var(--charcoal);font-size:11px;font-weight:600;letter-spacing:.5px;padding:5px 12px;border-radius:20px}
.thumbs{display:flex;gap:12px;margin-top:14px}
.thumb{width:74px;height:74px;border-radius:12px;overflow:hidden;cursor:pointer;border:2px solid transparent;background:var(--oat-soft)}
.thumb img{width:100%;height:100%;object-fit:contain;background:#fff}
.thumb.on{border-color:var(--taupe)}
.pdp-info .eyebrow{display:inline-block;margin-bottom:10px}
.pdp-info h1{font-size:clamp(26px,3vw,36px);font-weight:500;letter-spacing:-.3px;line-height:1.15}
.rating{display:flex;align-items:center;gap:8px;margin:12px 0;font-size:13px;color:var(--charcoal-soft)}
.stars{display:flex;gap:2px}.stars img{width:15px;height:15px}
.price-block{display:flex;align-items:center;gap:12px;margin:18px 0 4px}
.price-block .now{font-family:var(--serif);font-size:30px;font-weight:600}
.price-block .was{font-size:16px;color:var(--charcoal-soft);text-decoration:line-through}
.price-block .save{background:var(--blush);color:var(--charcoal);font-size:11px;font-weight:600;padding:4px 11px;border-radius:20px}
.pdp-desc{font-size:15px;font-weight:300;color:var(--charcoal-soft);margin:16px 0 24px;max-width:480px}
.opt-label{font-size:12px;letter-spacing:1.2px;text-transform:uppercase;font-weight:600;color:var(--charcoal);margin-bottom:10px;display:flex;justify-content:space-between}
/* la etiqueta va en versalitas apretadas; el nombre del color, no. Con
   el mismo tratamiento los dos, "COLOR FUCSIA" se lee como una sola
   palabra larga. */
.opt-label .opt-t{display:inline-flex;align-items:baseline;gap:12px}
.opt-label .opt-val{font-weight:400;color:var(--charcoal-soft);text-transform:none;
  letter-spacing:.2px;font-size:13px}
.opt-label a{font-size:11px;color:var(--taupe-deep);text-transform:none;letter-spacing:0}
.opt-row{margin-bottom:22px}
.swatches{display:flex;gap:12px}
.sw{width:30px;height:30px;border-radius:50%;cursor:pointer;box-shadow:0 0 0 1px var(--oat-line)}
.sw.on{box-shadow:0 0 0 4px var(--taupe-deep)}
.sizes{display:flex;gap:10px;flex-wrap:wrap}
.size{min-width:46px;height:46px;padding:0 12px;border-radius:12px;border:1.5px solid var(--oat-line);background:#fff;cursor:pointer;font-family:var(--sans);font-size:14px;font-weight:500;color:var(--charcoal);transition:.15s;display:flex;align-items:center;justify-content:center}
.size:hover{border-color:var(--taupe)}
.size.on{background:var(--charcoal);color:#fff;border-color:var(--charcoal)}
.buy{display:flex;gap:12px;align-items:center;margin:26px 0 22px}
/* el fondo va en la pastilla completa: antes los botones eran blancos y
   el número se quedaba con el crema de la página, y se veía como si el 1
   estuviera seleccionado */
.qty{display:flex;align-items:center;border:1.5px solid var(--oat-line);border-radius:40px;
  overflow:hidden;background:#fff}
.qty button{width:42px;height:52px;background:transparent;border:none;font-size:18px;color:var(--charcoal);cursor:pointer}
.qty button:hover{background:var(--oat-soft)}
.qty span{min-width:34px;text-align:center;font-weight:500}
.buy .btn-primary{flex:1;height:52px}
.buy .heart{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--oat-line);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--charcoal-soft)}
.buy .heart:hover{color:var(--blush);border-color:var(--blush)}
.buy .heart img{width:20px;height:20px}
.assure{display:grid;gap:11px;margin:6px 0 26px}
.assure li{display:flex;gap:10px;align-items:center;font-size:13.5px;color:var(--charcoal)}
.assure img{width:18px;height:18px}
.acc{border-top:1px solid var(--oat-line)}
.acc-item{border-bottom:1px solid var(--oat-line)}
.acc-head{width:100%;background:none;border:none;display:flex;justify-content:space-between;align-items:center;padding:16px 0;font-family:var(--sans);font-size:14px;font-weight:500;color:var(--charcoal);cursor:pointer}
.acc-head .pm{color:var(--taupe-deep);font-size:18px}
.acc-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.acc-body p{padding:0 0 16px;font-size:13.5px;font-weight:300;color:var(--charcoal-soft);max-width:520px}
.acc-item.open .acc-body{max-height:220px}

/* preview switcher */
.switcher{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--charcoal);border-radius:40px;padding:6px;display:flex;gap:4px;z-index:100;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.switcher a{color:rgba(255,255,255,.7);font-size:12px;letter-spacing:.5px;padding:8px 16px;border-radius:30px}
.switcher a.active{background:var(--taupe);color:#fff}
.switcher .lbl{color:rgba(255,255,255,.4);font-size:10px;letter-spacing:1px;text-transform:uppercase;display:flex;align-items:center;padding:0 8px 0 12px}


/* brand band (neutral) */
.brandband .wrap{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.brandband .media{aspect-ratio:5/4;border-radius:24px;overflow:hidden;box-shadow:var(--shadow)}
.brandband .media img{width:100%;height:100%;object-fit:cover}
.brandband .eyebrow{display:inline-block;margin-bottom:14px}
.brandband h2{font-size:clamp(26px,3vw,36px);font-weight:500;letter-spacing:-.3px;line-height:1.15}
.brandband p{margin:18px 0;font-size:15px;font-weight:300;color:var(--charcoal-soft);max-width:460px}
.blist{list-style:none;display:grid;gap:12px;margin:22px 0 30px}
.blist li{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--charcoal)}
.blist img{width:18px;height:18px;flex-shrink:0;margin-top:2px}
@media(max-width:980px){.brandband .wrap{grid-template-columns:1fr;gap:32px}}


/* promo banner (home) */
.promobanner{position:relative;min-height:380px;border-radius:24px;overflow:hidden;display:flex;align-items:center;
  background-image:linear-gradient(90deg, rgba(255,248,249,.97) 0%, rgba(255,248,249,.72) 40%, rgba(255,248,249,0) 68%), var(--banner,url('demo/banner-01.svg'));
  background-size:cover;background-position:right center}
.promobanner .inner{padding:48px 44px;max-width:470px}
.promobanner .eyebrow{display:inline-block;margin-bottom:12px}
.promobanner h2{font-size:clamp(26px,3vw,36px);font-weight:500;letter-spacing:-.3px;line-height:1.12}
.promobanner p{margin:14px 0 24px;font-size:15px;font-weight:300;color:var(--charcoal-soft);max-width:380px}
/* category header banner */
.cat-banner{position:relative;min-height:300px;border-radius:24px;overflow:hidden;display:flex;align-items:center;margin-top:10px;
  background-image:linear-gradient(90deg, rgba(255,248,249,.97) 0%, rgba(255,248,249,.74) 42%, rgba(255,248,249,0) 70%), var(--catbanner,url('demo/cat-ofertas.svg'));
  background-size:cover;background-position:right center}
.cat-banner .inner{padding:40px 44px;max-width:520px}
.cat-banner .pill{display:inline-block;width:34px;height:12px;border-radius:20px;vertical-align:middle;margin-right:12px}
.cat-banner h1{font-size:clamp(30px,3.4vw,42px);font-weight:500;letter-spacing:-.3px;display:inline-block;vertical-align:middle}
.cat-banner p{margin-top:12px;font-size:14.5px;font-weight:300;color:var(--charcoal-soft);max-width:440px}
@media(max-width:560px){.promobanner .inner,.cat-banner .inner{padding:32px 22px}
  .promobanner,.cat-banner{background-image:linear-gradient(180deg,rgba(255,248,249,.95),rgba(255,248,249,.55) 60%,rgba(255,248,249,.2)),var(--banner,url('demo/banner-01.svg'));background-position:center}
  .cat-banner{background-image:linear-gradient(180deg,rgba(255,248,249,.95),rgba(255,248,249,.55) 60%,rgba(255,248,249,.2)),var(--catbanner,url('demo/cat-ofertas.svg'))}
}


/* mobile hero: foto arriba visible, texto debajo legible */
@media(max-width:600px){
  .heroA{min-height:0;align-items:flex-end;padding-top:340px;
    background-image:linear-gradient(to bottom, rgba(255,248,249,0) 0%, rgba(255,248,249,0) 34%, rgba(255,248,249,.5) 46%, rgba(255,248,249,.92) 62%, var(--cream) 74%), var(--hero,url('demo/hero.svg'));
    background-position:56% 12%;background-size:cover}
  .heroA-inner{padding:0 18px 38px}
  .heroA .eyebrow{font-size:10px;margin-bottom:10px}
  .heroA h1{font-size:29px;line-height:1.14;max-width:none}
  .heroA p{font-size:13.5px;margin-top:12px;max-width:none}
  .hero-cta{margin-top:22px;gap:10px}
  .hero-cta .btn{padding:12px 20px;font-size:11.5px}
}

/* reveal */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* responsive */
@media(max-width:980px){
  .products{grid-template-columns:repeat(2,1fr)}
  .shop .products{grid-template-columns:repeat(2,1fr)}
  .cats{grid-template-columns:repeat(3,1fr)}
  .values{grid-template-columns:repeat(2,1fr);gap:28px 18px}
  .footer .cols{grid-template-columns:1fr 1fr;gap:32px}
  .pdp{grid-template-columns:1fr;gap:32px}
  .gallery{position:static}
  .gal-col{position:static}
}
@media(max-width:820px){
  .shop{grid-template-columns:1fr}
  .filters{position:static;display:grid;grid-template-columns:1fr 1fr;gap:0 24px;margin-bottom:20px;background:var(--oat-soft);border-radius:16px;padding:6px 18px 18px}
}
@media(max-width:720px){
  .nav,.icons .d{display:none}
  .burger{display:flex}
  .header .wrap{gap:14px;justify-content:space-between}
  .insta-grid{grid-template-columns:repeat(3,1fr)}
  .topbar .socials{display:none}
}
@media(max-width:560px){
  .wrap{padding:0 18px}
  .section{padding:56px 0}
  .cats{grid-template-columns:1fr 1fr}
  
  .products,.shop .products{grid-template-columns:1fr 1fr}
  .promo{padding:44px 22px;border-radius:18px}
  .footer .cols{grid-template-columns:1fr}
  .logo svg,.logo img{height:40px}
  .switcher{bottom:12px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.reveal{opacity:1;transform:none}}

/* =====================================================================
   AÑADIDOS DE LA TIENDA DE VERDAD
   Todo lo de arriba viene del mockup aprobado y no se toca. Aquí va lo
   que el mockup no necesitaba porque no tenía datos: el carrito, el
   menú de celular y los estados de vacío y de carga.
   ===================================================================== */

/* menú de celular */
.nav-movil{display:none;background:var(--cream);border-bottom:1px solid var(--oat-line);padding:6px 28px 14px}
.nav-movil.on{display:block}
.nav-movil a{display:block;padding:11px 0;font-size:15px;border-bottom:1px solid var(--oat-line)}
.nav-movil a:last-child{border-bottom:0}
@media(min-width:901px){.nav-movil{display:none!important}}

/* carrito */
.carrito{position:fixed;inset:0;z-index:200;visibility:hidden}
.carrito.on{visibility:visible}
.carrito .velo{position:absolute;inset:0;background:rgba(74,74,74,.42);opacity:0;transition:opacity .22s}
.carrito.on .velo{opacity:1}
.carrito .caja{position:absolute;right:0;top:0;bottom:0;width:min(420px,100%);background:var(--cream);
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform .26s ease;
  box-shadow:-18px 0 50px rgba(74,74,74,.18)}
.carrito.on .caja{transform:none}
.carrito .cab{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;
  border-bottom:1px solid var(--oat-line)}
.carrito .cab b{font-family:var(--serif);font-size:19px;font-weight:500}
.carrito .cab .x{border:0;background:transparent;font-size:26px;line-height:1;cursor:pointer;
  color:var(--charcoal-soft);padding:0 4px}
.carrito .items{flex:1;overflow-y:auto;padding:8px 24px}
.carrito .item{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--oat-line)}
.carrito .item img{width:64px;height:84px;object-fit:cover;border-radius:10px;flex:none;background:var(--oat-soft)}
.carrito .item .d{flex:1;min-width:0}
.carrito .item .n{font-size:14px;line-height:1.35;margin-bottom:2px}
.carrito .item .v{font-size:12px;color:var(--charcoal-soft);margin-bottom:8px}
.carrito .item .p{text-align:right;font-size:14px;white-space:nowrap}
.carrito .item .quita{display:block;margin-top:8px;border:0;background:transparent;cursor:pointer;
  font-family:var(--sans);font-size:11px;color:var(--taupe-deep);text-decoration:underline;padding:0}
.qty.chico{display:inline-flex;align-items:center;border:1px solid var(--oat-line);border-radius:30px;overflow:hidden}
.qty.chico button{width:26px;height:26px;border:0;background:transparent;cursor:pointer;font-size:14px;
  color:var(--charcoal-soft)}
.qty.chico span{min-width:24px;text-align:center;font-size:13px}
.carrito .pie{border-top:1px solid var(--oat-line);padding:20px 24px calc(20px + env(safe-area-inset-bottom))}
.carrito .tot{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;font-size:15px}
.carrito .tot b{font-family:var(--serif);font-size:22px;font-weight:500}
.carrito .nota{font-size:11.5px;color:var(--charcoal-soft);line-height:1.55;margin-top:12px;text-align:center}
/* desglose de la promoción: el subtotal y el descuento se ven arriba del
   total, porque un descuento que no se ve no existe para quien compra */
.carrito .sub-t{display:flex;justify-content:space-between;align-items:baseline;
  font-size:13px;color:var(--charcoal-soft);margin-bottom:8px}

/* El cupón. Chico y con forma de etiqueta: se lee de un vistazo y no le
   quita protagonismo al total. Va en el sage de la marca —el mismo verde
   pastel de la paleta— y no en un verde de sistema: en una boutique, un
   verde de "operación exitosa" se ve prestado de otro lado. */
.carrito .cupon{display:flex;align-items:center;gap:8px;margin-bottom:12px;
  padding:7px 11px;border:1px dashed var(--sage);border-radius:10px;
  background:var(--sage-soft);color:var(--sage-ink)}
.carrito .cupon svg{width:15px;height:15px;flex:none}
.carrito .cupon .n{flex:1;font-size:12.5px;line-height:1.3;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.carrito .cupon .m{font-size:13px;font-weight:600;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.carrito .promo-linea{font-size:11.5px;color:var(--sage-ink);margin-top:2px;
  font-variant-numeric:tabular-nums}
.carrito .item.agotado{opacity:.55}
.carrito .item.agotado img{filter:grayscale(1)}
.carrito .aviso-c{color:var(--terracota);text-align:left;margin:0 0 12px}
/* --- formulario del pedido --- */
.form-ped{padding:4px 0 10px}
.form-ped .volver{border:0;background:none;color:var(--taupe-deep);font-family:var(--sans);
  font-size:12.5px;cursor:pointer;padding:6px 0;margin-bottom:6px}
.form-ped h3{font-family:var(--serif);font-size:16px;font-weight:500;margin:18px 0 10px}
.form-ped h3:first-of-type{margin-top:8px}
.form-ped label{display:block;font-size:12px;color:var(--charcoal-soft);margin-bottom:12px}
.form-ped label span{color:var(--terracota);margin-left:3px}
.form-ped label small{color:var(--charcoal-soft);opacity:.7}
.form-ped input,.form-ped textarea{width:100%;margin-top:5px;font-family:var(--sans);
  font-size:15px;color:var(--charcoal);background:#fff;border:1px solid var(--oat-line);
  border-radius:12px;padding:11px 13px;outline:none;resize:vertical}
.form-ped input:focus,.form-ped textarea:focus{border-color:var(--taupe)}
.form-ped .dos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-ped .ops{display:flex;flex-direction:column;gap:9px;margin-bottom:6px}
.form-ped .op{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--oat-line);
  border-radius:14px;padding:12px 14px;cursor:pointer;margin:0;transition:border-color .15s}
.form-ped .op.on{border-color:var(--taupe);background:var(--oat-soft)}
.form-ped .op input{width:17px;height:17px;margin:2px 0 0;flex:none;accent-color:var(--taupe-deep)}
.form-ped .op b{display:block;font-size:14px;font-weight:500;color:var(--charcoal)}
.form-ped .op small{display:block;font-size:12px;color:var(--charcoal-soft);margin-top:2px}
.form-ped .escondido{display:none}
.form-ped .chico{font-size:11.5px;color:var(--charcoal-soft);line-height:1.55;margin-top:14px}
.form-ped .err-ped{color:var(--terracota);font-size:12.5px;line-height:1.5;margin-top:8px;min-height:16px}
/* --- confirmación después de mandar el pedido --- */
.carrito .listo{text-align:center;padding:36px 6px 10px}
.carrito .listo .tic{width:52px;height:52px;margin:0 auto 16px;border-radius:50%;
  background:var(--sage-soft);border:1px solid var(--sage);color:var(--sage-ink);
  display:flex;align-items:center;justify-content:center}
.carrito .listo .tic svg{width:24px;height:24px}
.carrito .listo h3{font-family:var(--serif);font-size:19px;font-weight:500;margin-bottom:8px}
.carrito .listo .folio{font-size:15px;letter-spacing:1px;color:var(--taupe-deep);
  margin-bottom:12px}
.carrito .listo p{font-size:13px;color:var(--charcoal-soft);line-height:1.65;margin-bottom:14px}
.carrito .listo .liga-ped{display:inline-block;font-size:13px;color:var(--taupe-deep);
  border-bottom:1px solid var(--taupe);padding-bottom:2px}
.carrito .listo .chico{font-size:11.5px;margin-top:16px}
.vacio-c{text-align:center;padding:60px 20px;color:var(--charcoal-soft);font-size:14px;line-height:1.9}
.vacio-c a{color:var(--taupe-deep);text-decoration:underline}

/* vacíos y carga */
.vacio-p{text-align:center;padding:90px 20px;color:var(--charcoal-soft)}
.vacio-p h3{font-family:var(--serif);font-size:22px;color:var(--charcoal);margin-bottom:8px;font-weight:500}
.vacio-p p{font-size:14px;margin-bottom:20px}
.cargando{display:flex;flex-direction:column;align-items:center;gap:14px;padding:90px 20px;
  color:var(--charcoal-soft);font-size:11px;letter-spacing:2px;text-transform:uppercase}
.cargando .aro{width:28px;height:28px;border:2px solid var(--oat-line);border-top-color:var(--taupe);
  border-radius:50%;animation:hk-giro .75s linear infinite}
@keyframes hk-giro{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.cargando .aro{animation:none}}

/* agotado */
.size.no,.sw.no{opacity:.32;cursor:not-allowed;text-decoration:line-through}
.aviso-stock{font-size:12.5px;color:var(--charcoal-soft);margin-top:10px}
.aviso-stock.malo{color:#C2553F}
.fbusca{width:100%;border:1px solid var(--oat-line);background:#fff;border-radius:30px;
  padding:11px 16px;font-family:var(--sans);font-size:13.5px;color:var(--charcoal);outline:none}
.fbusca:focus{border-color:var(--taupe)}
.filters .btn-sm{letter-spacing:.6px}

/* mismo criterio que en el sistema: el texto de ayuda de un campo vacío
   va tenue y en cursiva, para que no se lea como un dato ya escrito */
input::placeholder{color:var(--charcoal-soft);opacity:.5;font-style:italic;font-weight:300}
input:focus::placeholder{opacity:.32}