/* ESTILO STEFANIE · inspirado en un lenguaje de belleza editorial (negro, marfil, champán).
   Se carga al final y sobrescribe paleta, cabecera, banner y tarjetas. */
:root{
  --ink:#0b0b0c; --ivory:#f6f3ee; --paper:#ffffff; --champagne:#b89461; --champagne-2:#d9c29b;
  --blush:#efe7e2; --muted:#6f6a66; --line:#e4ddd6; --ink-soft:#4b4644;
}
html{scroll-behavior:smooth;}
body{background:var(--ivory);color:var(--ink);font-family:"DM Sans",Arial,sans-serif;-webkit-font-smoothing:antialiased;}
h1,h2,h3,.logo-serif{font-family:"Libre Caslon Display",Georgia,serif;font-weight:400;letter-spacing:-.01em;}

/* Aviso superior */
.announce{background:var(--ink);color:#e9dfd0;font:600 10px/1 "DM Sans",sans-serif;letter-spacing:.22em;text-transform:uppercase;padding:10px 16px;}
.announce-dot{color:var(--champagne);}
.metro-band{background:var(--ivory);border-bottom:1px solid var(--line);font:600 10px/1 "DM Sans",sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);padding:10px 16px;}
.metro-band strong{color:var(--ink);font-weight:700;}

/* Cabecera: menú a la izquierda, logo al centro, herramientas a la derecha */
.header{background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);box-shadow:none;}
.header.scrolled{box-shadow:0 6px 20px rgba(11,11,12,.06);}
.header-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;max-width:1280px;padding:14px 26px;}
.logo{grid-column:2;justify-self:center;}
.logo img{height:52px;width:auto;}
.nav{grid-column:1;justify-self:start;display:flex;gap:30px;margin:0;}
.nav a{font:600 11px/1 "DM Sans",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);text-decoration:none;padding:8px 0;position:relative;}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--champagne);transform:scaleX(0);transform-origin:left;transition:transform .35s ease;}
.nav a:hover::after{transform:scaleX(1);}
.header-tools{grid-column:3;justify-self:end;gap:8px;}
.header-tools a{border-radius:0;border:1px solid var(--ink);background:transparent;color:var(--ink);font:700 10px/1 "DM Sans",sans-serif;letter-spacing:.18em;text-transform:uppercase;padding:11px 14px;}
.header-tools a.cart{background:var(--ink);color:#fff;}
.header-tools a.cart b{background:var(--champagne);color:#fff;border-radius:0;}
.menu-btn{grid-column:1;justify-self:start;}
.menu-btn span{background:var(--ink);}

/* Banner principal */
.storefront{padding-top:0;}
.store-intro.stef-banner{border-radius:0;margin:0;min-height:560px;border:0;box-shadow:none;background:#0b0b0c;}
.store-intro.stef-banner::before{background:radial-gradient(ellipse at 8% 0%,rgba(184,148,97,.22),transparent 55%),linear-gradient(120deg,#0b0b0c 0%,#17120f 85%,#231b15 100%);}
.stef-banner__copy{padding:64px clamp(30px,5vw,84px);}
.stef-banner__eyebrow{border:0;background:none;color:var(--champagne-2);padding:0;letter-spacing:.3em;font-size:10px;}
.stef-banner__eyebrow .stef-banner__dot{background:var(--champagne);box-shadow:none;}
.store-intro.stef-banner h1{font-size:clamp(44px,5.6vw,84px);line-height:.98;letter-spacing:-.02em;margin:24px 0 22px;}
.store-intro.stef-banner h1 em{color:var(--champagne-2);}
.store-intro.stef-banner p{color:#cfc6bb;font-size:14px;letter-spacing:.01em;}
.stef-banner__actions a{border-radius:0;font:700 11px/1 "DM Sans",sans-serif;letter-spacing:.2em;text-transform:uppercase;padding:16px 26px;min-height:52px;}
.stef-banner__primary{background:var(--champagne);border-color:var(--champagne);color:#0b0b0c;}
.stef-banner__secondary{border-color:rgba(255,255,255,.4);color:#fff;}
.stef-banner__facts span{color:#a79c90;font-size:10px;letter-spacing:.14em;text-transform:uppercase;}
.stef-banner__facts b{color:var(--champagne-2);}
.stef-banner__visual{background:#15120f;}
.stef-banner__visual::after{content:"";position:absolute;inset:22px;border:1px solid rgba(255,255,255,.28);z-index:3;pointer-events:none;animation:frameIn 1.4s ease both .3s;}
.stef-banner__photo-note{background:rgba(11,11,12,.7);border:1px solid rgba(255,255,255,.14);color:#fff;border-radius:0;}
.stef-banner__photo-note span{color:var(--champagne-2);}
.stef-banner__photo-note strong{color:#fff;}
.stef-banner__copy > *{animation:riseIn 1s cubic-bezier(.2,.7,.2,1) both;}
.stef-banner__copy > :nth-child(1){animation-delay:.05s;}
.stef-banner__copy > :nth-child(2){animation-delay:.18s;}
.stef-banner__copy > :nth-child(3){animation-delay:.32s;}
.stef-banner__copy > :nth-child(4){animation-delay:.46s;}
.stef-banner__copy > :nth-child(5){animation-delay:.6s;}
.stef-banner__photo{filter:saturate(1.02) contrast(1.02);}
@keyframes riseIn{from{opacity:0;translate:0 22px;}to{opacity:1;translate:0 0;}}
@keyframes frameIn{from{opacity:0;transform:scale(1.04);}to{opacity:1;transform:none;}}

/* Controles y categorías */
.store-controls{border-bottom:1px solid var(--line);padding-bottom:18px;}
.store-search{border-bottom:1px solid var(--ink);border-radius:0;background:transparent;}
.store-search input{background:transparent;border:0;font:500 14px "DM Sans",sans-serif;letter-spacing:.02em;}
.store-search button{background:transparent;color:var(--ink);font:700 10px "DM Sans",sans-serif;letter-spacing:.2em;text-transform:uppercase;border:0;}
.store-actions a{font:600 10px "DM Sans",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--champagne);padding-bottom:4px;}
.category-strip{justify-content:center;gap:4px 28px;padding:22px 0 8px;border-bottom:0;}
.category-strip a{background:none;border:0;border-radius:0;padding:8px 0;font:600 10px "DM Sans",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);position:relative;}
.category-strip a span{color:var(--champagne);font-weight:700;}
.category-strip a.active{color:var(--ink);background:none;}
.category-strip a.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);}
.category-strip a:hover{color:var(--ink);transform:none;}
.store-results{text-align:center;padding:30px 0 6px;}
.store-results h2{font-size:30px;}
.store-results .kicker{color:var(--champagne);letter-spacing:.24em;}
.clear-filter{color:var(--muted);}

/* Tarjetas de producto estilo editorial */
.store-grid{gap:34px 24px;margin-top:18px;}
.store-card{background:transparent;border:0;border-radius:0;box-shadow:none;}
.store-card:hover{transform:none;box-shadow:none;}
.store-card .product-image{background:linear-gradient(180deg,#f5efea,#ebe2da);border-radius:0;padding:24px;aspect-ratio:4/5;}
.store-card .product-image img{transition:transform .8s cubic-bezier(.2,.7,.2,1);}
.store-card:hover .product-image img{transform:scale(1.05);}
.store-card .product-image i{background:var(--ink);border-radius:0;font:700 9px/1 "DM Sans",sans-serif;letter-spacing:.18em;}
.store-card .product-meta{padding:18px 4px 0;text-align:center;align-items:center;}
.store-card .product-meta small{color:var(--champagne);font-size:9px;letter-spacing:.22em;}
.store-card .product-meta h3{font-size:20px;margin:8px 0 6px;color:var(--ink);}
.store-card .product-meta p{font-size:12px;color:var(--muted);}
.store-buy-row{align-items:center;width:100%;}
.add-order-mini button{border-radius:0;background:var(--ink);border:1px solid var(--ink);font:700 10px/1 "DM Sans",sans-serif;letter-spacing:.2em;text-transform:uppercase;min-height:46px;}
.store-card-actions a:first-child{border-radius:0;border:0;background:transparent;color:var(--ink);text-decoration:underline;text-decoration-color:var(--champagne);text-underline-offset:6px;text-transform:uppercase;letter-spacing:.18em;font:700 10px "DM Sans",sans-serif;min-height:34px;}
.store-service{background:var(--blush);border:0;}

/* Ficha de producto */
.detail{max-width:1280px;}
.detail-media{background:linear-gradient(180deg,#f5efea,#e8dfd6);border:0;border-radius:0;min-height:560px;}
.detail-copy h1{font-size:clamp(40px,4.4vw,64px);}
.detail-copy .kicker{color:var(--champagne);letter-spacing:.24em;}
.detail-specs > div{border-radius:0;border-color:var(--line);background:transparent;}
.detail-lead{font-family:"Libre Caslon Display",Georgia,serif;font-size:22px;color:var(--ink-soft);}
.add-order button,.buy a.btn{border-radius:0;}
.add-order input[type=number]{border-radius:0;}

/* Botones generales */
.btn{border-radius:0;font:700 11px/1 "DM Sans",sans-serif;letter-spacing:.2em;text-transform:uppercase;min-height:50px;}
.btn.black{background:var(--ink);border-color:var(--ink);}
.btn.light{background:#fff;color:var(--ink);border-color:#fff;}
.btn.ghost,.btn.outline{background:transparent;color:var(--ink);border-color:var(--ink);}
.fx-primary,.fx-actions button{border-radius:0;letter-spacing:.14em;text-transform:uppercase;}
.fx-modal{border-radius:0;}
.fx-page{border-radius:0;}
.fx-page.is-current{background:var(--ink);}
.fx-page:hover:not(:disabled){border-color:var(--ink);}

/* Carrito */
.cart-page-v5 .cart-head h1{font-size:clamp(36px,4vw,56px);}
.cart-row,.cart-summary,.account-card,.contact-form-wrap,.empty-state{border-radius:0;border-color:var(--line);box-shadow:none;}
.cart-summary{background:var(--ink);color:#fff;border-color:var(--ink);}
.cart-summary > span{color:var(--champagne-2);}
.cart-summary > b{color:#fff;}
.cart-summary > p{color:#cfc6bb;}
.cart-summary .btn.black{background:var(--champagne);color:var(--ink);border-color:var(--champagne);}
.cart-summary .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35);}
.cart-summary .clear-cart{color:#a79c90;}
.cart-qty button{border-radius:0;}
.cart-copy h3{font-size:20px;}

/* Contacto, ingreso, registro y cuenta */
.contact-hero,.auth-visual{border-radius:0;}
.contact-hero{background:linear-gradient(160deg,#0b0b0c,#211a16);}
.contact-hero h1{font-size:clamp(38px,4.4vw,60px);}
.sales-contact-card,.social-big a{border-radius:0;}
.auth{border-radius:0;border-color:var(--line);box-shadow:none;}
.auth-visual{background:linear-gradient(160deg,#0b0b0c,#2a211b);}
.auth-visual.rose{background:linear-gradient(160deg,#d9c29b,#8c6e47);}
.auth-form h1{font-size:clamp(34px,3.6vw,48px);}
.auth-form input,.contact-form-wrap input,.contact-form-wrap textarea{border-radius:0;background:#fff;border-color:var(--line);}
.account-head h1{font-size:clamp(34px,4vw,52px);}
.account-card.dark{background:var(--ink);border-color:var(--ink);}
.account-card.dark span{color:var(--champagne-2);}

/* Pie de página */
.footer{background:var(--ink);margin-top:80px;}
.footer-brand img{filter:none;opacity:1;height:58px;width:auto;}
.footer h4{color:var(--champagne-2);letter-spacing:.22em;}
.footer .footer-in > div > a,.footer .footer-in > div > p{color:#cfc6bb;}
.social-row a{border-color:rgba(255,255,255,.25);}
.footer-bottom{letter-spacing:.14em;text-transform:uppercase;font-size:10px;color:#8a8179;border-top-color:rgba(255,255,255,.1);}

/* Móvil */
@media (max-width:900px){
  .header-in{grid-template-columns:auto 1fr auto;}
  .logo{grid-column:2;}
  .menu-btn{grid-column:1;}
  .header-tools{grid-column:3;}
  .store-intro.stef-banner{min-height:0;}
  .stef-banner__copy{padding:40px 24px 30px;}
  .category-strip{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;gap:22px;padding-left:4px;padding-right:4px;scrollbar-width:none;}
  .category-strip a{white-space:nowrap;}
}
@media (max-width:560px){
  .logo img{height:40px;}
  .header-tools a{padding:9px 10px;font-size:9px;}
  .store-grid{gap:26px 14px;}
  .store-card .product-image{padding:14px;}
  .store-card .product-meta h3{font-size:16px;}
  .stef-banner__actions{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion: reduce){
  .stef-banner__copy > *,.stef-banner__visual::after{animation:none!important;}
}

/* ===== CABECERA: reglas con mayor prioridad que app.css (evita que se encimen) ===== */
body .header{height:auto!important;min-height:0!important;position:sticky!important;top:0;z-index:60;background:#fff!important;}
body .header .header-in{height:auto!important;display:grid!important;grid-template-columns:1fr auto 1fr!important;align-items:center!important;gap:16px!important;padding:12px 24px!important;max-width:1280px;margin:0 auto;}
body .header .logo{grid-column:2;justify-self:center;display:block;}
body .header .logo img{width:auto!important;height:50px!important;max-width:none;}
body .header .nav{grid-column:1;justify-self:start;display:flex!important;gap:28px;position:static!important;margin:0;padding:0;background:none!important;border:0!important;box-shadow:none!important;}
body .header .header-tools{grid-column:3;justify-self:end;display:flex!important;align-items:center;gap:8px;margin:0;}
body .header .header-tools a{height:auto!important;width:auto!important;min-width:0;white-space:nowrap;}
body .header .header-tools a.cart b{width:auto!important;height:auto!important;min-width:22px;padding:4px 6px;display:inline-block;line-height:1;}
body .header .menu-btn{display:none;grid-column:1;justify-self:start;}
@media (max-width:900px){
  body .header .header-in{grid-template-columns:auto 1fr auto!important;}
  body .header .logo{grid-column:2;}
  body .header .menu-btn{display:block!important;grid-column:1;}
  body .header .header-tools{grid-column:3;}
  body .header .nav{display:none!important;}
  body .header .nav.open{display:flex!important;position:absolute!important;top:100%!important;left:0;right:0;flex-direction:column;gap:0;background:#fff!important;padding:8px 24px 16px!important;border-bottom:1px solid var(--line);}
  body .header .nav.open a{padding:14px 0;border-bottom:1px solid var(--line);}
  body .header .header-tools a.sales-call{display:none!important;}
}

/* ===== CATÁLOGO: carrusel infinito ===== */
.car-wrap{position:relative;margin-top:10px;}
.car-nav{display:flex;justify-content:flex-end;gap:10px;margin:0 0 14px;}
.car-nav button{width:50px;height:50px;border-radius:50%;border:1px solid var(--ink);background:#fff;color:var(--ink);font:300 28px/1 "DM Sans",sans-serif;cursor:pointer;transition:background .25s ease,color .25s ease,transform .25s ease;}
.car-nav button:hover{background:var(--ink);color:#fff;transform:scale(1.07);}
.store-carousel{display:flex;gap:26px;overflow-x:auto;overflow-y:hidden;padding:8px 4px 22px;scrollbar-width:none;cursor:grab;scroll-snap-type:none;-webkit-overflow-scrolling:touch;}
.store-carousel::-webkit-scrollbar{display:none;}
.store-carousel.is-drag{cursor:grabbing;}
.store-carousel .store-card{flex:0 0 clamp(210px,24vw,282px);user-select:none;-webkit-user-select:none;}
.store-carousel .reveal{opacity:1!important;transform:none!important;}
.store-carousel .store-card{animation:none!important;}
.store-carousel img{-webkit-user-drag:none;}
@media (max-width:700px){
  .store-carousel{gap:16px;}
  .store-carousel .store-card{flex:0 0 66vw;}
  .car-nav{justify-content:center;}
}

/* ===== FRANJA ANIMADA ===== */
.fx-marquee{overflow:hidden;background:var(--champagne);color:var(--ink);padding:14px 0;}
.fx-marquee > div{display:flex;gap:28px;align-items:center;width:max-content;white-space:nowrap;font:700 12px/1 "DM Sans",sans-serif;letter-spacing:.26em;text-transform:uppercase;animation:marqueeX 30s linear infinite;}
.fx-marquee i{font-style:normal;opacity:.55;}
@keyframes marqueeX{to{transform:translate3d(-33.3333%,0,0);}}

/* ===== MOVIMIENTO EXTRA ===== */
.store-intro.stef-banner::before{animation:bgDrift 18s ease-in-out infinite alternate;}
@keyframes bgDrift{from{transform:translate3d(0,0,0) scale(1);}to{transform:translate3d(-3%,2%,0) scale(1.08);}}
.btn,.add-order-mini button,.car-nav button,.stef-banner__primary,.add-order button{position:relative;overflow:hidden;isolation:isolate;}
.btn::after,.add-order-mini button::after,.stef-banner__primary::after,.add-order button::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .7s ease;z-index:-1;}
.btn:hover::after,.add-order-mini button:hover::after,.stef-banner__primary:hover::after,.add-order button:hover::after{left:120%;}
.store-card-actions a:first-child{transition:letter-spacing .3s ease,color .3s ease;}
.store-card:hover .product-meta h3{color:var(--champagne);transition:color .3s ease;}
.category-strip a{transition:color .3s ease,transform .3s ease;}

/* ---- Anti-vibración del carrusel de productos ----
   El parallax de app.js movía las fotos de cada tarjeta en cada evento scroll,
   y además la foto tenía transición de zoom al pasar el cursor. Dentro del
   carrusel se desactivan ambos: las tarjetas quedan estáticas. */
.store-carousel [data-parallax],
.store-carousel .parallax-media{transform:none!important;will-change:auto!important;}
.store-carousel .store-card .product-image img,
.store-carousel .store-card:hover .product-image img{transition:none!important;transform:none!important;}
.store-carousel .store-card,
.store-carousel .store-card:hover{transition:none!important;transform:none!important;}
.store-carousel .store-card .product-meta{display:flex;flex-direction:column;}
.store-carousel .store-card .store-buy-row{margin-top:auto;}
.store-carousel .store-card .product-image .product-tag,
.store-carousel .store-card .product-image i{max-width:calc(100% - 24px);}

/* ---- Carrusel: flechas siempre clicables y sin parallax en las fotos ---- */
.car-wrap{position:relative;}
.car-nav{position:relative;z-index:5;display:flex;justify-content:flex-end;gap:10px;margin:0 0 14px;}
.car-nav button{position:relative;z-index:6;pointer-events:auto;}
.store-carousel .parallax-media,
.store-carousel [data-parallax]{translate:none!important;transform:none!important;}

/* ---- Navegación por pestañas: la tienda cabe en una pantalla ---- */
.tabs-bar{position:sticky;top:var(--tabs-top,0px);z-index:40;background:rgba(246,243,238,.96);backdrop-filter:blur(10px);border-bottom:1px solid #e6dcd4;}
.tabs-in{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;padding:8px 12px;max-width:1200px;margin:0 auto;}
.tabs-in button{border:1px solid transparent;background:transparent;font:700 11px/1 "DM Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#0b0b0c;padding:10px 16px;border-radius:99px;cursor:pointer;transition:background .25s ease,color .25s ease,border-color .25s ease;}
.tabs-in button:hover{border-color:#0b0b0c;}
.tabs-in button.is-active{background:#0b0b0c;color:#fff;}
.tab-panel[hidden]{display:none!important;}
.tab-panel.is-active{animation:panelIn .45s ease both;}
@keyframes panelIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.tab-panel[data-panel="inicio"] .stef-banner{min-height:min(calc(100vh - 175px),620px)!important;}
.tab-panel[data-panel="inicio"] .fx-marquee{margin-top:10px;}
.tab-panel[data-panel="buscar"] .store-controls{padding-top:16px;}
@media (max-width:700px){
  .tabs-in{gap:4px;}
  .tabs-in button{padding:9px 11px;font-size:10px;letter-spacing:.1em;}
  .tab-panel[data-panel="inicio"] .stef-banner{min-height:0!important;}
}

/* ---- Vista fija de una pantalla (escritorio) ----
   Banner arriba, carrusel en el centro y barra de navegación abajo.
   Buscar y Atención se abren como hojas sobre la barra. */
.storefront{position:relative;height:calc(100svh - var(--tabs-top,72px));display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;}
.tab-panel[data-panel="inicio"]{min-height:0;}
.tab-panel[data-panel="inicio"] .stef-banner{min-height:0!important;height:clamp(190px,36svh,360px)!important;margin-bottom:0!important;}
.tab-panel[data-panel="inicio"] .fx-marquee{margin:8px 0 0;}
.tab-panel[data-panel="catalogo"]{display:flex;flex-direction:column;min-height:0;}
.tab-panel[data-panel="catalogo"] .store-results{padding:6px 0 0;margin:0;}
.tab-panel[data-panel="catalogo"] .car-wrap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}
.tab-panel[data-panel="catalogo"] .store-carousel{flex:1 1 auto;min-height:0;height:100%;align-items:stretch;padding-bottom:8px;}
.tab-panel[data-panel="catalogo"] .store-card{height:100%;min-height:0;}
.tab-panel[data-panel="catalogo"] .store-card .product-image{flex:1 1 auto;min-height:0;aspect-ratio:auto!important;}
.tab-panel[data-panel="catalogo"] .store-card .product-image img{max-height:100%;}
.tabs-bar{position:static!important;backdrop-filter:none;background:#f6f3ee;border-top:1px solid #e6dcd4;border-bottom:0;}
.tabs-in{padding:10px 12px;gap:10px;}
.tabs-link{display:inline-flex;align-items:center;border-radius:99px;padding:10px 16px;font:700 11px/1 "DM Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#0b0b0c;text-decoration:none;border:1px solid transparent;}
.tabs-link:hover{border-color:#0b0b0c;}
.tab-panel[data-panel="buscar"],.tab-panel[data-panel="atencion"]{position:absolute;left:0;right:0;bottom:58px;max-height:58%;overflow:auto;background:#fff;z-index:30;padding:16px 18px;box-shadow:0 -18px 44px rgba(11,11,12,.14);border-top:1px solid #e6dcd4;}
@media (max-width:700px){
  .storefront{height:auto;overflow:visible;display:block;}
  .tab-panel[data-panel="inicio"] .stef-banner{height:46vh!important;}
  .tab-panel[data-panel="catalogo"] .store-carousel{height:auto;}
  .tab-panel[data-panel="catalogo"] .store-card{height:auto;}
  .tab-panel[data-panel="catalogo"] .store-card .product-image{aspect-ratio:4/5!important;flex:none;}
  .tab-panel[data-panel="buscar"],.tab-panel[data-panel="atencion"]{position:fixed;bottom:0;max-height:70vh;}
  .tabs-bar{position:sticky!important;bottom:0;z-index:40;}
}
