@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Work+Sans:wght@400;500;600&display=swap");
:root{
--white:#ffffff;
--black:#161311;
--rose:#e3c2bc;
--rose-soft:#f5e9e5;
--rose-deep:#c79b92;
--gold:#b8923e;
--gold-soft:#eadfc0;
--gold-deep:#8f6f2b;
--radius:2px;
--serif:"Fraunces", Georgia, serif;
--sans:"Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
margin:0; background:var(--white); color:var(--black);
font-family:var(--sans); line-height:1.5; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 18px; }
/* ---------- header ---------- */
.site-header{
position:sticky; top:0; z-index:40;
background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
border-bottom:1px solid var(--rose-deep);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; height:64px; gap:18px; }
.brand{ font-family:var(--serif); font-weight:600; font-size:1.4rem; letter-spacing:.03em; text-decoration:none; color:var(--black); }
.nav-links{ display:none; gap:clamp(14px, 1.7vw, 26px); font-size:.84rem; white-space:nowrap; }
.nav-links a{ text-decoration:none; color:var(--black); opacity:.75; transition:opacity .15s ease; }
.nav-links a:hover{ opacity:1; }
@media(min-width:900px){ .nav-links{ display:flex; } }
.header-actions{ display:flex; align-items:center; gap:14px; margin-left:auto; }
.nav-whatsapp{ display:none; font-size:.82rem; text-decoration:none; color:var(--gold-deep); font-weight:600; }
@media(min-width:640px){ .nav-whatsapp{ display:inline; } }
.cart-btn{
position:relative; background:transparent; border:1px solid var(--black); color:var(--black);
border-radius:var(--radius); padding:9px 14px; font-size:.85rem; display:flex; align-items:center; gap:8px;
transition:background .15s ease, color .15s ease;
}
.cart-btn:hover{ background:var(--black); color:var(--white); }
.cart-count{
background:var(--gold); color:var(--black); font-weight:600; font-size:.72rem;
min-width:18px; height:18px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; padding:0 4px;
}
/* ---------- hero ---------- */
.hero{ background:var(--rose-soft); padding:64px 0 56px; position:relative; overflow:hidden; }
.hero::before{
content:""; position:absolute; width:300px; height:300px; border:1px solid var(--gold);
border-radius:50%; top:-140px; right:-90px; opacity:.55; pointer-events:none;
}
.hero::after{
content:""; position:absolute; width:150px; height:150px; background:var(--rose);
top:58%; right:8%; border-radius:0 56px 0 56px; opacity:.7; pointer-events:none;
}
@media(max-width:760px){ .hero::before{ width:200px; height:200px; top:-90px; right:-70px; } .hero::after{ display:none; } }
.hero-inner{ max-width:620px; position:relative; z-index:1; }
.eyebrow{ display:inline-flex; align-items:center; gap:10px; color:var(--gold-deep); font-size:.78rem; letter-spacing:.09em; text-transform:uppercase; margin:0 0 12px; }
.eyebrow::before{ content:""; width:22px; height:1px; background:currentColor; display:inline-block; }
.hero h1{ font-family:var(--serif); font-weight:400; font-size:clamp(2.1rem,7vw,3.4rem); line-height:1.06; margin:0 0 16px; max-width:13ch; color:var(--black); }
.hero h1 em{ font-style:italic; color:var(--gold-deep); }
.hero p.sub{ color:rgba(22,19,17,.68); max-width:44ch; margin:0; font-size:1rem; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.btn-hero-primary, .btn-hero-secondary{
display:inline-flex; align-items:center; justify-content:center;
padding:13px 26px; border-radius:0 16px 0 16px; font-size:.83rem; font-weight:600; text-decoration:none;
letter-spacing:.01em; transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-hero-primary{ background:var(--black); color:var(--white); }
.btn-hero-primary:hover{ background:var(--gold); color:var(--black); }
.btn-hero-secondary{ background:transparent; color:var(--black); border:1px solid var(--black); }
.btn-hero-secondary:hover{ background:var(--black); color:var(--white); }
/* ---------- trust bar ---------- */
.trust-bar{ background:var(--white); border-bottom:1px solid var(--rose); padding:26px 0; }
.trust-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 14px; }
@media(min-width:760px){ .trust-grid{ grid-template-columns:repeat(4,1fr); } }
.trust-title{ margin:0 0 3px; font-weight:600; font-size:.86rem; color:var(--black); }
.trust-sub{ margin:0; font-size:.76rem; color:rgba(22,19,17,.55); }
/* ---------- narrativa ---------- */
.narrative{ background:var(--white); padding:54px 0; }
.narrative-inner{ max-width:640px; }
.narrative h2{ font-family:var(--serif); font-weight:400; font-size:clamp(1.5rem,4.5vw,2.1rem); line-height:1.2; margin:0 0 14px; color:var(--black); }
.narrative h2 em{ font-style:italic; color:var(--gold-deep); }
.narrative p{ color:rgba(22,19,17,.7); font-size:.94rem; line-height:1.65; margin:0 0 16px; }
.link-underline{ color:var(--black); font-weight:600; font-size:.86rem; text-decoration:underline; text-underline-offset:3px; }
/* ---------- pasos ---------- */
.steps{ background:var(--rose-soft); padding:54px 0; }
.steps h2{ font-family:var(--serif); font-weight:400; font-size:clamp(1.5rem,4.5vw,2.1rem); margin:6px 0 30px; color:var(--black); }
.steps-grid{ display:grid; grid-template-columns:1fr; gap:20px; }
@media(min-width:760px){ .steps-grid{ grid-template-columns:repeat(3,1fr); } }
.step-card{ background:var(--white); border:1px solid var(--rose); border-radius:var(--radius); padding:22px 20px; }
.step-num{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:var(--black); color:var(--gold-soft); font-family:var(--serif); font-size:.95rem; margin-bottom:12px; }
.step-card h3{ font-family:var(--serif); font-weight:500; font-size:1.02rem; margin:0 0 8px; color:var(--black); }
.step-card p{ margin:0; font-size:.85rem; color:rgba(22,19,17,.65); line-height:1.55; }
/* ---------- envíos y pagos ---------- */
.shipping{ background:var(--white); padding:54px 0; border-top:1px solid var(--rose); }
.shipping-grid{ display:grid; grid-template-columns:1fr; gap:32px; }
@media(min-width:760px){ .shipping-grid{ grid-template-columns:1fr 1fr; } }
.ship-col h3{ font-family:var(--serif); font-weight:500; font-size:1.2rem; margin:4px 0 14px; color:var(--black); }
.ship-col ul{ margin:0; padding-left:18px; color:rgba(22,19,17,.68); font-size:.88rem; line-height:1.7; }
.shipping .eyebrow{ margin:0 0 18px; }
.ship-col h3{ margin-top:0; }
.ship-col .ship-lead{ margin:0 0 14px; font-size:.92rem; line-height:1.65; color:rgba(22,19,17,.8); }
.ship-col .ship-text{ margin:0 0 12px; color:rgba(22,19,17,.68); font-size:.88rem; line-height:1.7; }
.ship-col ul strong{ color:var(--black); }
.ship-col .ship-note{ margin:18px 0 0; padding:12px 14px; background:var(--rose-soft); border-left:3px solid var(--gold); font-size:.84rem; line-height:1.55; color:rgba(22,19,17,.75); }
.ship-col .ship-note strong{ color:var(--black); }
.ship-col .btn-hero-primary{ margin-top:10px; }
/* ---------- instagram cta ---------- */
.insta-cta{ background:var(--black); padding:56px 0; text-align:center; }
.insta-inner{ max-width:520px; margin:0 auto; }
.insta-cta .eyebrow{ color:var(--gold); }
.insta-cta h2{ font-family:var(--serif); font-weight:400; font-size:clamp(1.5rem,4.5vw,2.1rem); color:var(--white); margin:0 0 12px; }
.insta-cta h2 em{ font-style:italic; color:var(--gold); }
.insta-cta p{ color:rgba(245,237,233,.7); font-size:.92rem; margin:0 0 22px; }
.insta-cta .btn-hero-primary{ background:var(--gold); color:var(--black); }
.insta-cta .btn-hero-primary:hover{ background:var(--white); }
/* ---------- filtros de categoría / talla: pestañas, no píldoras ---------- */
.filters-wrap{ border-bottom:1px solid var(--rose-deep); margin-bottom:22px; }
.filters{ display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; }
.filters::-webkit-scrollbar{ display:none; }
.filters[hidden]{ display:none; }
.chip{
flex-shrink:0; background:none; border:none; color:rgba(22,19,17,.5);
padding:11px 15px 13px; font-size:.76rem; font-weight:600; white-space:nowrap;
letter-spacing:.04em; text-transform:uppercase; position:relative; top:1px;
}
.chip::after{ content:""; position:absolute; left:15px; right:15px; bottom:0; height:2px; background:transparent; transition:background .15s ease; }
.chip.active{ color:var(--black); }
.chip.active::after{ background:var(--gold); }
.chip:hover:not(.active){ color:var(--black); }
.size-filters{ border-top:1px dashed var(--rose); align-items:center; }
.size-filters::before{ content:"Talla"; flex-shrink:0; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-deep); padding:0 6px 0 0; }
.size-filters .chip{ padding:9px 13px 11px; font-size:.7rem; color:rgba(22,19,17,.42); }
.size-filters .chip::after{ left:13px; right:13px; }
.size-filters .chip.active{ color:var(--black); }
.size-filters .chip.active::after{ background:var(--gold-deep); height:1px; }
/* ---------- catalog ---------- */
.catalog-section{ padding:54px 0 60px; background:var(--white); }
.catalog-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.catalog-head h2{ font-family:var(--serif); font-weight:400; font-size:clamp(1.5rem,4.5vw,2.1rem); margin:4px 0 0; color:var(--black); }
.catalog-head .count{ color:rgba(22,19,17,.55); font-size:.85rem; }
.grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media(min-width:640px){ .grid{ grid-template-columns:repeat(3,1fr); gap:20px; } }
@media(min-width:980px){ .grid{ grid-template-columns:repeat(4,1fr); } }
/* ---------- paginación del catálogo ---------- */
.pagination{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:38px; padding-top:22px; border-top:1px solid var(--rose); }
.pagination[hidden]{ display:none; }
.pg-nums{ display:flex; align-items:center; gap:4px; }
.pg-btn{
background:var(--white); color:var(--black); border:1px solid var(--rose-deep); border-radius:var(--radius);
min-width:38px; height:38px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center; gap:7px;
font-size:.76rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.pg-btn:hover:not(:disabled):not(.active){ background:var(--rose-soft); border-color:var(--gold); }
.pg-btn.active{ background:var(--black); color:var(--gold-soft); border-color:var(--black); cursor:default; }
.pg-btn:disabled{ color:rgba(22,19,17,.28); border-color:var(--rose); cursor:not-allowed; }
.pg-gap{ min-width:22px; text-align:center; color:rgba(22,19,17,.45); letter-spacing:.1em; }
@media(max-width:560px){
.pagination{ gap:6px; }
.pg-nums{ gap:3px; }
.pg-btn{ min-width:34px; height:36px; padding:0 8px; }
.pg-step .pg-label{ display:none; }
.pg-gap{ min-width:14px; }
}
.card{
background:var(--white); border:none; border-bottom:1px solid var(--rose); border-radius:0;
overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .2s ease;
}
.card:hover{ border-bottom-color:var(--gold); }
/* FOTOS-COMPLETAS-V2 · Marco 1:1 (las fotos son cuadradas) con object-fit:contain: nunca se recorta nada.
Sin esquinas curvas ni zoom al pasar el mouse, porque ambos cortarían los bordes de la foto. */
.card-img{ aspect-ratio:1/1; width:100%; background:var(--rose-soft); overflow:hidden; position:relative; cursor:pointer; border-radius:0; }
.card-img img{ display:block; width:100%; height:100%; object-fit:contain; object-position:center; background:var(--rose-soft); }
.badge{ position:absolute; top:0; left:0; font-size:.6rem; padding:6px 11px 5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.badge.ok{ background:var(--black); color:var(--gold-soft); }
.badge.out{ background:var(--rose-deep); color:var(--white); }
.card-body{ padding:12px 12px 14px; display:flex; flex-direction:column; gap:5px; flex:1; }
.cat-tag{ margin:0; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-deep); }
.card-body h3{ font-family:var(--serif); font-weight:500; font-size:1rem; margin:0; cursor:pointer; }
.card-body .price{ font-size:1.02rem; font-weight:600; color:var(--black); margin:0; }
.card-body .price span{ color:var(--gold-deep); }
.size-row{ display:flex; flex-wrap:wrap; gap:5px; margin-top:2px; }
.size-chip{
border:1px solid var(--black); background:var(--white); color:var(--black);
border-radius:0; font-size:.68rem; font-weight:600; padding:3px 9px; line-height:1.4; min-width:30px; text-align:center;
}
.size-chip.selected{ background:var(--black); color:var(--gold-soft); }
.size-chip.disabled{ border-color:var(--rose-deep); color:var(--rose-deep); text-decoration:line-through; cursor:not-allowed; background:var(--white); }
.card-actions{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.qty-stepper{ display:flex; align-items:center; border:1px solid var(--rose-deep); border-radius:var(--radius); }
.qty-stepper button{ background:none; border:none; color:var(--black); width:28px; height:30px; font-size:1rem; }
.qty-stepper span{ min-width:20px; text-align:center; font-size:.85rem; }
.add-btn{ flex:1; background:var(--black); color:var(--white); border:none; border-radius:0 10px 0 10px; height:32px; font-weight:600; font-size:.8rem; transition:background .15s ease, color .15s ease; }
.add-btn:hover:not(:disabled){ background:var(--gold); color:var(--black); }
.add-btn:disabled{ background:var(--rose-soft); color:rgba(22,19,17,.4); cursor:not-allowed; }
.empty-msg{ color:rgba(22,19,17,.55); padding:30px 0; text-align:center; grid-column:1/-1; }
/* ---------- modal de producto ---------- */
.modal-overlay{
position:fixed; inset:0; background:rgba(22,19,17,.6);
opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:80;
display:flex; align-items:flex-end; justify-content:center;
}
.modal-overlay.open{ opacity:1; pointer-events:auto; }
.modal-panel{
background:var(--white); width:100%; max-width:820px; max-height:92vh; overflow-y:auto;
border-radius:var(--radius); transform:translateY(24px); transition:transform .25s ease;
display:grid; grid-template-columns:1fr;
}
.modal-overlay.open .modal-panel{ transform:translateY(0); }
@media(min-width:760px){
.modal-overlay{ align-items:center; }
.modal-panel{ grid-template-columns:1fr 1fr; }
}
.modal-close{
position:absolute; top:14px; right:14px; z-index:2;
background:var(--white); border:1px solid var(--rose-deep); color:var(--black);
width:32px; height:32px; border-radius:50%; font-size:1.1rem; line-height:1;
}
.modal-gallery{ position:relative; background:var(--rose-soft); }
.modal-main-img{ display:block; width:100%; height:auto; aspect-ratio:auto 1/1; max-height:min(80vh, 760px); object-fit:contain; object-position:center; background:var(--rose-soft); }
.modal-thumbs{ display:flex; gap:8px; padding:10px; overflow-x:auto; background:var(--white); }
.modal-thumbs img{ width:58px; height:58px; object-fit:contain; background:var(--rose-soft); border-radius:0; cursor:pointer; border:1px solid var(--rose); opacity:.7; flex-shrink:0; }
.modal-thumbs img.active{ opacity:1; border-color:var(--gold); }
.modal-info{ padding:24px 22px 28px; display:flex; flex-direction:column; gap:10px; }
.modal-info .cat-tag{ margin:0; }
.modal-info h2{ font-family:var(--serif); font-weight:500; font-size:1.5rem; margin:0; }
.modal-info .price{ font-size:1.2rem; font-weight:600; color:var(--gold-deep); margin:0; }
.modal-info .full-desc{ color:rgba(22,19,17,.72); font-size:.9rem; line-height:1.6; margin:0; }
.modal-info .size-label{ font-size:.78rem; color:rgba(22,19,17,.6); margin:8px 0 0; }
.modal-info .size-row{ margin-top:4px; }
.modal-info .size-chip{ font-size:.78rem; padding:6px 13px; }
.modal-info .card-actions{ margin-top:14px; }
.modal-info .add-btn{ height:44px; font-size:.88rem; }
.modal-size-hint{ font-size:.74rem; color:var(--gold-deep); display:none; }
.modal-size-hint.show{ display:block; }
/* ---------- cart drawer ---------- */
.overlay{ position:fixed; inset:0; background:rgba(22,19,17,.5); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:60; }
.overlay.open{ opacity:1; pointer-events:auto; }
.cart-drawer{
position:fixed; top:0; right:0; bottom:0; width:100%; max-width:400px;
background:var(--white); border-left:1px solid var(--rose-deep);
transform:translateX(100%); transition:transform .25s ease; z-index:70; display:flex; flex-direction:column;
}
.cart-drawer.open{ transform:translateX(0); }
.cart-head{ display:flex; align-items:center; justify-content:space-between; padding:18px; border-bottom:1px solid var(--rose-deep); }
.cart-head h2{ font-family:var(--serif); font-weight:500; font-size:1.15rem; margin:0; }
.cart-close{ background:none; border:none; color:var(--black); font-size:1.3rem; line-height:1; }
.cart-items{ flex:1; overflow-y:auto; padding:10px 18px; }
.cart-item{ display:flex; gap:10px; padding:12px 0; border-bottom:1px solid var(--rose-soft); }
.cart-item img{ width:60px; height:60px; object-fit:contain; background:var(--rose-soft); border-radius:0; flex-shrink:0; }
.cart-item .info{ flex:1; min-width:0; }
.cart-item .info h4{ margin:0 0 2px; font-size:.88rem; font-weight:500; }
.cart-item .info .size-note{ font-size:.72rem; color:var(--gold-deep); }
.cart-item .info .line-price{ color:var(--black); font-size:.85rem; display:block; margin-top:2px; }
.cart-item .row-actions{ display:flex; align-items:center; gap:8px; margin-top:6px; }
.remove-link{ background:none; border:none; color:rgba(22,19,17,.5); font-size:.75rem; text-decoration:underline; padding:0; }
.cart-empty{ color:rgba(22,19,17,.55); text-align:center; padding:40px 0; font-size:.9rem; }
.cart-foot{ padding:16px 18px 20px; border-top:1px solid var(--rose-deep); }
.cart-total{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; font-size:1rem; }
.cart-total strong{ font-family:var(--serif); font-size:1.3rem; color:var(--gold-deep); }
.whatsapp-btn{
display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
background:var(--black); color:var(--white); border:none; border-radius:0 14px 0 14px; height:46px; font-weight:600; font-size:.92rem;
transition:background .15s ease, color .15s ease;
}
.whatsapp-btn:hover:not(:disabled){ background:var(--gold); color:var(--black); }
.whatsapp-btn:disabled{ background:var(--rose-soft); color:rgba(22,19,17,.4); cursor:not-allowed; }
.cart-note{ color:rgba(22,19,17,.5); font-size:.72rem; margin:10px 0 0; text-align:center; }
/* ---------- footer ---------- */
.site-footer{ background:var(--rose-soft); padding:44px 0 20px; }
.footer-grid{ display:grid; grid-template-columns:1fr; gap:28px; padding-bottom:28px; border-bottom:1px solid var(--rose-deep); }
@media(min-width:760px){ .footer-grid{ grid-template-columns:2fr 1fr 1fr; } }
.footer-brand .brand{ display:block; margin-bottom:8px; }
.footer-brand p{ color:rgba(22,19,17,.6); font-size:.85rem; max-width:34ch; margin:0; }
.footer-title{ font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--gold-deep); margin:0 0 12px; font-weight:600; }
.footer-col{ display:flex; flex-direction:column; gap:8px; }
.footer-col a{ font-size:.85rem; color:var(--black); text-decoration:none; opacity:.75; }
.footer-col a:hover{ opacity:1; text-decoration:underline; }
.footer-rights{ color:rgba(22,19,17,.5); font-size:.75rem; margin:18px 0 0; text-align:center; }
/* ---------- toast ---------- */
.toast{
position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px);
background:var(--black); border:1px solid var(--gold); color:var(--white);
padding:10px 18px; border-radius:var(--radius); font-size:.85rem;
opacity:0; pointer-events:none; transition:all .2s ease; z-index:90;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }
/* ---------- admin ---------- */
.admin-body{ min-height:100vh; }
.login-screen{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; background:var(--rose-soft); }
.login-card{ width:100%; max-width:360px; background:var(--white); border:1px solid var(--rose-deep); border-radius:var(--radius); padding:32px 26px; }
.login-card h1{ font-family:var(--serif); font-weight:500; font-size:1.4rem; margin:0 0 4px; }
.login-card p{ color:rgba(22,19,17,.6); font-size:.85rem; margin:0 0 18px; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:.78rem; color:rgba(22,19,17,.6); margin-bottom:6px; }
.field input, .field textarea{
width:100%; background:var(--white); border:1px solid var(--rose-deep); color:var(--black);
border-radius:var(--radius); padding:10px 12px; font-size:.9rem; font-family:inherit;
}
.field textarea{ resize:vertical; min-height:64px; }
.btn-primary{ width:100%; background:var(--black); color:var(--white); border:none; border-radius:var(--radius); height:42px; font-weight:600; font-size:.9rem; transition:background .15s ease, color .15s ease; }
.btn-primary:hover{ background:var(--gold); color:var(--black); }
.btn-secondary{ width:100%; background:var(--white); color:var(--black); border:1px solid var(--rose-deep); border-radius:var(--radius); height:38px; font-weight:500; font-size:.84rem; margin-top:8px; }
.error-text{ color:#a5453c; font-size:.8rem; margin-top:10px; display:none; }
.error-text.show{ display:block; }
.admin-shell{ display:none; }
.admin-shell.active{ display:block; }
.admin-header{ border-bottom:1px solid var(--rose-deep); padding:12px 0 0; background:var(--rose-soft); position:sticky; top:0; z-index:40; }
.admin-header .wrap{ display:flex; justify-content:space-between; align-items:center; }
.admin-header h1{ font-family:var(--serif); font-size:1.2rem; font-weight:500; margin:0; }
.logout-btn{ background:none; border:1px solid var(--black); color:var(--black); border-radius:var(--radius); padding:7px 12px; font-size:.78rem; }
.admin-main{ padding:26px 0 60px; }
.panel{ background:var(--white); border:1px solid var(--rose-deep); border-radius:var(--radius); padding:20px; margin-bottom:22px; }
.panel h2{ font-family:var(--serif); font-weight:500; font-size:1.05rem; margin:0 0 4px; display:flex; align-items:center; gap:10px; }
.panel .panel-sub{ font-size:.78rem; color:rgba(22,19,17,.55); margin:0 0 16px; }
.form-grid{ display:grid; grid-template-columns:1fr; gap:12px; }
@media(min-width:640px){ .form-grid{ grid-template-columns:1fr 1fr; } }
.form-grid .full{ grid-column:1/-1; }
.sizes-box{ display:flex; flex-wrap:wrap; gap:10px; border:1px solid var(--rose-deep); border-radius:var(--radius); padding:12px; }
.size-input-row{ display:flex; align-items:center; gap:6px; font-size:.82rem; }
.size-input-row input[type="checkbox"]{ accent-color:var(--black); }
.size-input-row input[type="number"]{
width:56px; background:var(--white); border:1px solid var(--rose-deep); border-radius:var(--radius);
padding:4px 6px; font-size:.8rem; color:var(--black);
}
.size-input-row input[type="number"]:disabled{ opacity:.4; }
.table-wrap{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:.85rem; min-width:720px; }
th{ text-align:left; color:rgba(22,19,17,.55); font-weight:500; font-size:.75rem; padding:8px 10px; border-bottom:1px solid var(--rose-deep); text-transform:uppercase; letter-spacing:.03em; }
td{ padding:8px 10px; border-bottom:1px solid var(--rose-soft); vertical-align:middle; }
td img{ width:48px; height:48px; object-fit:contain; background:var(--rose-soft); border-radius:0; }
td input[type="number"], td input[type="text"]{
background:var(--white); border:1px solid var(--rose-deep); color:var(--black);
border-radius:var(--radius); padding:6px 8px; font-size:.82rem; width:100%;
}
.sizes-summary{ font-size:.78rem; color:rgba(22,19,17,.65); white-space:nowrap; }
.edit-btn{ background:none; border:1px solid var(--black); color:var(--black); border-radius:var(--radius); padding:6px 10px; font-size:.75rem; }
.del-btn{ background:none; border:1px solid var(--rose-deep); color:#a5453c; border-radius:var(--radius); padding:6px 10px; font-size:.75rem; }
.save-hint{ font-size:.72rem; color:rgba(22,19,17,.5); margin-top:4px; }
.saved-flag{ color:var(--gold-deep); font-size:.72rem; opacity:0; transition:opacity .3s ease; }
.saved-flag.show{ opacity:1; }
/* ---------- lo más consultado ---------- */
.trending{ background:var(--white); padding:54px 0 34px; border-bottom:1px solid var(--rose); }
.trending[hidden]{ display:none; }
.trending h2{ font-family:var(--serif); font-weight:400; font-size:clamp(1.5rem,4.5vw,2.1rem); margin:4px 0 26px; color:var(--black); }
.trending-track{ display:flex; gap:22px; overflow-x:auto; padding-bottom:18px; scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:var(--rose-deep) transparent; }
.trend-card{ flex:0 0 190px; cursor:pointer; scroll-snap-align:start; }
.trend-rank{
font-family:var(--serif); font-size:3.6rem; line-height:.9; font-weight:400;
color:transparent; -webkit-text-stroke:1px var(--gold-deep); margin-bottom:-16px; position:relative; z-index:2; padding-left:2px;
}
.trend-img{ aspect-ratio:1/1; background:var(--rose-soft); overflow:hidden; border-radius:0; }
.trend-img img{ display:block; width:100%; height:100%; object-fit:contain; background:var(--rose-soft); }
.trend-card h4{ font-family:var(--serif); font-weight:500; font-size:.95rem; margin:10px 0 2px; color:var(--black); }
.trend-card .trend-price{ font-size:.85rem; font-weight:600; color:var(--gold-deep); margin:0; }
/* ---------- portada: foto de fondo del hero, con el texto encima ---------- */
.hero-banner{ position:absolute; inset:0; z-index:0; }
.hero-banner[hidden]{ display:none; }
.banner-track{ position:absolute; inset:0; display:flex; transition:transform .7s cubic-bezier(.65,0,.2,1); }
.banner-track img{ flex:0 0 100%; width:100%; height:100%; object-fit:cover; filter:saturate(.8) contrast(.94); }
/* velo suave: más opaco donde va el texto, deja ver la foto hacia la derecha */
.banner-veil{
position:absolute; inset:0; pointer-events:none;
background:linear-gradient(90deg, rgba(245,233,229,.96) 0%, rgba(245,233,229,.84) 38%, rgba(245,233,229,.34) 72%, rgba(245,233,229,.14) 100%);
}
@media(max-width:760px){
.banner-veil{ background:linear-gradient(180deg, rgba(245,233,229,.9) 0%, rgba(245,233,229,.78) 55%, rgba(245,233,229,.55) 100%); }
}
.banner-controls{ position:absolute; left:0; right:0; bottom:18px; margin:0 auto; display:flex; align-items:center; justify-content:flex-end; gap:18px; z-index:2; pointer-events:none; }
.banner-controls > *{ pointer-events:auto; }
.banner-arrows{ display:flex; }
.banner-nav{
width:42px; height:42px; border:none; background:var(--black); color:var(--gold-soft); font-size:1.05rem;
transition:background .15s ease, color .15s ease;
}
.banner-nav + .banner-nav{ border-left:1px solid rgba(234,223,192,.25); }
.banner-nav:hover{ background:var(--gold); color:var(--black); }
.hero-banner.single .banner-arrows{ display:none; }
.banner-dots{ display:flex; gap:6px; }
.banner-dot{ width:24px; height:3px; border:none; padding:0; background:var(--black); opacity:.3; transition:all .2s ease; }
.banner-dot.active{ opacity:1; width:42px; }
.hero.has-banner{ min-height:520px; display:flex; align-items:center; padding:76px 0 84px; }
@media(min-width:760px){ .hero.has-banner{ min-height:600px; } }
.hero.has-banner .hero-inner{ width:100%; max-width:1180px; margin:0 auto; }
.hero.has-banner::after{ display:none; }
/* ---------- admin: fotos de portada ---------- */
.banner-form{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.banner-form input{ flex:1; min-width:200px; background:var(--white); border:1px solid var(--rose-deep); border-radius:var(--radius); padding:10px 12px; font-size:.9rem; color:var(--black); }
.banner-form .btn-primary{ width:auto; padding:0 22px; }
.banner-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; }
.banner-item{ border:1px solid var(--rose); }
.banner-item img{ width:100%; aspect-ratio:21/9; object-fit:contain; display:block; background:var(--rose-soft); }
.banner-actions{ display:flex; gap:6px; padding:8px; }
.banner-actions .edit-btn:disabled{ opacity:.35; cursor:not-allowed; }
.banner-actions .del-btn{ margin-left:auto; }
/* ---------- aviso "agregado al carrito" ---------- */
.added-pop{
position:fixed; z-index:95; left:12px; right:12px; bottom:12px;
max-width:400px; margin:0 auto; background:var(--white); border:1px solid var(--black);
border-left:6px solid var(--gold); box-shadow:10px 10px 0 var(--rose);
padding:16px 16px 12px; opacity:0; pointer-events:none; transform:translateY(24px);
transition:opacity .22s ease, transform .22s ease;
}
.added-pop.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
@media(min-width:760px){ .added-pop{ left:auto; right:24px; bottom:24px; margin:0; } }
body.has-bar .added-pop{ bottom:76px; }
@media(min-width:760px){ body.has-bar .added-pop{ bottom:84px; } }
.added-close{ position:absolute; top:6px; right:10px; background:none; border:none; font-size:1.3rem; color:var(--black); line-height:1; }
.added-head{ display:flex; gap:12px; align-items:center; padding-right:18px; }
.added-head img{ width:64px; height:64px; object-fit:contain; background:var(--rose-soft); flex-shrink:0; border-radius:0; }
.added-label{ margin:0 0 3px; font-size:.7rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--gold-deep); display:flex; align-items:center; gap:7px; }
.added-check{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; background:var(--black); color:var(--gold-soft); font-size:.7rem; }
.added-name{ margin:0; font-family:var(--serif); font-weight:500; font-size:1rem; color:var(--black); }
.added-meta{ margin:2px 0 0; font-size:.76rem; color:rgba(22,19,17,.6); }
.added-actions{ display:grid; grid-template-columns:1.4fr 1fr; gap:8px; margin-top:14px; }
.added-btn-main, .added-btn-alt{ height:42px; font-size:.8rem; font-weight:600; border-radius:0 12px 0 12px; transition:background .15s ease, color .15s ease; }
.added-btn-main{ background:var(--black); color:var(--white); border:none; }
.added-btn-main:hover{ background:var(--gold); color:var(--black); }
.added-btn-alt{ background:var(--white); color:var(--black); border:1px solid var(--black); }
.added-btn-alt:hover{ background:var(--rose-soft); }
.added-continue{ display:block; width:100%; margin-top:8px; background:none; border:none; font-size:.74rem; color:rgba(22,19,17,.55); text-decoration:underline; padding:6px 0; }
/* ---------- barra fija del carrito ---------- */
.cart-bar{
position:fixed; z-index:50; left:0; right:0; bottom:0; background:var(--black); color:var(--white);
display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px;
border-top:2px solid var(--gold);
}
.cart-bar[hidden]{ display:none; }
body.has-bar{ padding-bottom:64px; }
.cart-bar-info{ display:flex; align-items:center; gap:10px; min-width:0; }
.cart-bar-count{ min-width:28px; height:28px; padding:0 6px; display:inline-flex; align-items:center; justify-content:center; background:var(--gold); color:var(--black); font-weight:700; font-size:.82rem; }
.cart-bar-text{ font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cart-bar-text strong{ font-family:var(--serif); font-size:1.05rem; color:var(--gold-soft); font-weight:500; }
.cart-bar-text em{ font-style:normal; opacity:.65; font-size:.78rem; }
.cart-bar-actions{ display:flex; gap:8px; flex-shrink:0; }
.cart-bar-view, .cart-bar-order{ height:38px; font-size:.78rem; font-weight:600; padding:0 16px; border-radius:0 10px 0 10px; }
.cart-bar-view{ background:transparent; color:var(--white); border:1px solid rgba(255,255,255,.45); }
.cart-bar-view:hover{ border-color:var(--gold); color:var(--gold-soft); }
.cart-bar-order{ background:var(--gold); color:var(--black); border:none; }
.cart-bar-order:hover{ background:var(--white); }
@media(max-width:420px){ .cart-bar-text em{ display:none; } .cart-bar-order{ padding:0 12px; } }
body.has-bar .toast{ bottom:84px; }
/* ---------- animación al agregar ---------- */
@keyframes bump{ 0%{ transform:scale(1); } 35%{ transform:scale(1.35); } 100%{ transform:scale(1); } }
.bump{ animation:bump .45s ease; }
/* ---------- rendimiento: proporciones fijas + render solo de lo visible ---------- */
/* Todas las fotos viven en contenedores con aspect-ratio fijo: la página no "salta" al cargar */
.trend-img, .card-img{ aspect-ratio:1/1; }
.cart-item img{ aspect-ratio:1/1; }
.added-head img{ aspect-ratio:1/1; }
.modal-thumbs img{ aspect-ratio:1/1; }
.banner-item img{ aspect-ratio:21/9; }
td img{ aspect-ratio:1/1; }
/* El navegador salta el layout y el pintado de lo que está fuera de pantalla.
No se aplica a ![]()
(no tiene efecto ahí): va en las tarjetas y en las secciones largas. */
img{ image-rendering:auto; }
/* ---------- admin: selector de tallas por grupos ---------- */
.sizes-box{ flex-direction:column; flex-wrap:nowrap; gap:16px; padding:16px; }
.size-group[hidden]{ display:none; }
.size-group-title{ margin:0 0 8px; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-deep); font-weight:600; }
.size-tiles{ display:flex; flex-wrap:wrap; gap:8px; }
.size-input-row{
border:1px solid var(--rose-deep); background:var(--white); padding:6px 9px; min-width:104px;
justify-content:space-between; cursor:pointer; transition:border-color .15s ease, background .15s ease;
}
.size-input-row .size-name{ font-weight:600; font-size:.85rem; min-width:26px; }
.size-input-row:has(input[type="checkbox"]:checked){ border-color:var(--black); background:var(--rose-soft); }
/* ---------- admin: editor de descripción ---------- */
.rte{ border:1px solid var(--rose-deep); background:var(--white); border-radius:var(--radius); }
.rte-bar{ display:flex; align-items:center; gap:6px; padding:6px 8px; border-bottom:1px solid var(--rose); background:var(--rose-soft); }
.rte-btn{ width:30px; height:30px; background:var(--white); border:1px solid var(--rose-deep); color:var(--black); font-size:.9rem; }
.rte-btn:hover{ background:var(--black); color:var(--gold-soft); border-color:var(--black); }
.rte-tip{ margin-left:6px; font-size:.7rem; color:rgba(22,19,17,.55); }
.rte-editor{ min-height:110px; padding:10px 12px; font-size:.9rem; line-height:1.55; outline:none; }
.rte-editor:focus{ box-shadow:inset 0 0 0 2px var(--gold); }
.rte-editor:empty::before{ content:attr(data-placeholder); color:rgba(22,19,17,.4); pointer-events:none; }
.save-hint code{ background:var(--rose-soft); padding:1px 5px; font-size:.95em; }
/* ---------- tienda: tallas en la tarjeta y descripción con formato ---------- */
.size-row{ gap:4px; }
.card .size-chip{ min-width:28px; padding:3px 7px; font-size:.66rem; }
.modal-info .full-desc strong{ font-weight:700; color:var(--black); }
.modal-info .full-desc em{ font-style:italic; }
/* ---------- descripción corta en la tarjeta (máx. 2 líneas) ---------- */
.card-body .desc{
margin:0; font-size:.78rem; line-height:1.45; color:rgba(22,19,17,.62); cursor:pointer;
display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden;
}
.card-body .desc strong{ color:var(--black); font-weight:600; }
/* ---------- alineación de texto (editor del panel y descripción en la tienda) ---------- */
.rte-bar{ flex-wrap:wrap; }
.rte-btn{ display:inline-flex; align-items:center; justify-content:center; padding:0; cursor:pointer; }
.rte-btn.active{ background:var(--black); color:var(--gold-soft); border-color:var(--black); }
.rte-sep{ width:1px; height:20px; background:var(--rose-deep); margin:0 4px; }
.rte-editor div{ min-height:1.55em; }
/* Cada línea alineada llega como : el bloque ocupa todo el ancho
y respeta su alineación tanto en el modal de detalle como en la tarjeta del producto. */
.full-desc, .desc{ text-align:left; overflow-wrap:anywhere; }
.full-desc div, .desc div{ display:block; margin:0; padding:0; width:100%; min-height:1em; }
.full-desc div[style*="justify"], .desc div[style*="justify"]{ text-align:justify; text-justify:inter-word; hyphens:auto; }
.full-desc div[style*="center"], .desc div[style*="center"]{ text-align:center; }
.full-desc div[style*="right"], .desc div[style*="right"]{ text-align:right; }
.full-desc div[style*="left"], .desc div[style*="left"]{ text-align:left; }
/* ============================================================
PEDIDOS PENDIENTES · burbuja superior y panel de pedidos (admin)
============================================================ */
.admin-header-actions{ display:flex; align-items:center; gap:10px; }
.pending-pill{
display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 8px 0 12px;
background:var(--white); color:var(--black); border:1px solid var(--rose-deep); border-radius:999px;
font-size:.78rem; font-weight:600; transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.pending-pill:hover{ border-color:var(--black); }
.pending-badge{
min-width:24px; height:24px; padding:0 7px; display:inline-flex; align-items:center; justify-content:center;
border-radius:999px; background:var(--rose); color:var(--black); font-size:.78rem; font-weight:700; font-variant-numeric:tabular-nums;
}
.pending-pill.has-pending{ background:var(--black); color:var(--white); border-color:var(--black); animation:pillGlow 2.2s ease-in-out infinite; }
.pending-pill.has-pending .pending-badge{ background:var(--gold); color:var(--black); }
@keyframes pillGlow{ 0%,100%{ box-shadow:0 0 0 0 rgba(184,146,62,.55); } 50%{ box-shadow:0 0 0 7px rgba(184,146,62,0); } }
@media(max-width:560px){ .pending-label{ display:none; } .pending-pill{ padding:0 8px 0 10px; } .admin-header h1{ font-size:1rem; } }
.orders-panel{ scroll-margin-top:84px; border-color:var(--rose-deep); }
.orders-panel.flash{ animation:panelFlash 1.4s ease; }
@keyframes panelFlash{ 0%{ box-shadow:0 0 0 3px var(--gold); } 100%{ box-shadow:0 0 0 3px rgba(184,146,62,0); } }
.count-chip{ font-family:var(--sans); font-size:.68rem; font-weight:600; letter-spacing:.03em; padding:3px 10px; border-radius:999px; background:var(--rose-soft); color:rgba(22,19,17,.7); }
.count-chip.alert{ background:var(--gold); color:var(--black); }
.orders-list{ display:grid; gap:12px; }
.orders-empty{ margin:0; padding:22px; text-align:center; font-size:.85rem; color:rgba(22,19,17,.55); background:var(--rose-soft); border:1px dashed var(--rose-deep); }
.order-card{ border:1px solid var(--rose-deep); border-left:4px solid var(--gold); background:var(--white); padding:14px 16px; }
.order-card.busy{ opacity:.6; }
.order-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:10px; }
.order-code{ display:block; font-family:var(--serif); font-size:1rem; font-weight:500; }
.order-time{ display:block; font-size:.72rem; color:rgba(22,19,17,.55); margin-top:2px; }
.order-total{ font-family:var(--serif); font-size:1.15rem; font-weight:500; white-space:nowrap; }
.order-items{ list-style:none; margin:0 0 14px; padding:0; border-top:1px solid var(--rose-soft); }
.order-items li{ display:grid; grid-template-columns:1fr auto; gap:2px 12px; padding:9px 0; border-bottom:1px solid var(--rose-soft); font-size:.86rem; }
.oi-name small{ color:var(--gold-deep); margin-left:4px; font-size:.74rem; }
.oi-qty{ font-weight:600; font-variant-numeric:tabular-nums; }
.oi-stock{ grid-column:1 / -1; font-size:.72rem; }
.oi-stock.ok{ color:#3d7a4f; }
.oi-stock.low{ color:#a5453c; font-weight:600; }
.order-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.btn-confirm, .btn-cancel{ height:40px; padding:0 18px; border-radius:var(--radius); font-size:.82rem; font-weight:600; }
.btn-confirm{ flex:1 1 180px; background:var(--black); color:var(--white); border:1px solid var(--black); }
.btn-confirm:hover:not(:disabled){ background:var(--gold); border-color:var(--gold); color:var(--black); }
.btn-cancel{ background:var(--white); color:#a5453c; border:1px solid var(--rose-deep); }
.btn-cancel:hover:not(:disabled){ background:#fbe9e6; }
.btn-confirm:disabled, .btn-cancel:disabled{ cursor:not-allowed; opacity:.6; }
.orders-history{ margin-top:16px; border-top:1px solid var(--rose-soft); padding-top:12px; }
.orders-history summary{ cursor:pointer; font-size:.8rem; font-weight:600; color:rgba(22,19,17,.7); }
.history-row{ display:grid; grid-template-columns:auto 1fr auto; gap:2px 12px; align-items:center; padding:9px 0; border-bottom:1px solid var(--rose-soft); font-size:.78rem; }
.history-state{ font-size:.62rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:3px 8px; }
.history-state.completado{ background:#e3f1e7; color:#2f6a42; }
.history-state.cancelado{ background:#f3e3e0; color:#a5453c; }
.history-main{ min-width:0; overflow-wrap:anywhere; }
.history-total{ font-weight:600; white-space:nowrap; }
.history-date{ grid-column:2 / -1; font-size:.7rem; color:rgba(22,19,17,.5); }
.history-warn{ font-style:normal; color:#a5453c; }
/* ============================================================
PANEL ADMIN · pestañas y tarjetas
============================================================ */
.admin-body{ background:#faf6f4; }
.admin-tabs{ margin-top:10px; }
.admin-tabs-inner{ display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; }
.admin-tabs-inner::-webkit-scrollbar{ display:none; }
.tab-btn{
position:relative; flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; height:46px; padding:0 20px;
background:transparent; border:none; border-bottom:3px solid transparent; color:rgba(22,19,17,.6);
font-size:.86rem; font-weight:600; white-space:nowrap; transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.tab-btn:hover{ color:var(--black); background:rgba(255,255,255,.55); }
.tab-btn.active{ color:var(--black); border-bottom-color:var(--gold); background:var(--white); }
.tab-badge{ min-width:20px; height:20px; padding:0 6px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; background:var(--gold); color:var(--black); font-size:.7rem; font-weight:700; }
.tab-badge[hidden]{ display:none; }
.tab-panel[hidden]{ display:none; }
.tab-panel{ animation:tabIn .2s ease; }
@keyframes tabIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@media(max-width:640px){
.admin-tabs-inner{ gap:0; padding:0; }
.tab-btn{ flex:1 1 0; justify-content:center; padding:0 6px; font-size:.8rem; }
.tab-pre{ display:none; }
}
/* tarjetas */
.panel.card{
padding:24px 26px; margin-bottom:24px; border:1px solid var(--rose); border-radius:6px; background:var(--white);
box-shadow:0 1px 2px rgba(22,19,17,.04), 0 6px 20px -12px rgba(22,19,17,.12);
}
.panel.card h2{ font-size:1.15rem; margin-bottom:6px; }
.panel.card .panel-sub{ margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--rose-soft); line-height:1.5; }
@media(max-width:640px){
.admin-main{ padding-top:18px; }
.panel.card{ padding:18px 16px; margin-bottom:18px; }
.admin-main .wrap{ padding:0 12px; }
}
.panel.card .table-wrap{ margin:0 -4px; }
/* ============================================================
AVISO · ¡Última unidad disponible!
============================================================ */
.last-unit{
display:flex; align-items:center; gap:7px; margin:6px 0 2px; padding:0;
font-size:.74rem; font-weight:600; letter-spacing:.01em; color:var(--gold-deep);
}
.last-unit[hidden]{ display:none; }
.last-unit-dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); flex-shrink:0; animation:lastPulse 2.4s ease-in-out infinite; }
@keyframes lastPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(184,146,62,.5); } 50%{ box-shadow:0 0 0 5px rgba(184,146,62,0); } }
.modal-info .last-unit{ font-size:.82rem; margin:4px 0 12px; padding:7px 12px; background:var(--rose-soft); border-left:3px solid var(--gold); }
/* ---------- menú con más enlaces: se acomoda sin apretarse ---------- */
@media(min-width:900px) and (max-width:1139px){ .nav-whatsapp{ display:none; } }
section[id], main[id]{ scroll-margin-top:72px; }
/* ---------- Pruébate en casa ---------- */
.tryhome{ background:var(--black); color:var(--white); padding:68px 0; position:relative; overflow:hidden; }
.tryhome::before{
content:""; position:absolute; width:340px; height:340px; border:1px solid var(--gold);
border-radius:50%; top:-150px; right:-110px; opacity:.45; pointer-events:none;
}
.tryhome-grid{ display:grid; grid-template-columns:1fr; gap:38px; position:relative; z-index:1; }
@media(min-width:900px){ .tryhome-grid{ grid-template-columns:1.25fr .75fr; gap:64px; align-items:center; } }
.tryhome .eyebrow{ color:var(--gold); }
.tryhome h2{ font-family:var(--serif); font-weight:400; font-size:clamp(1.9rem,5.4vw,2.9rem); line-height:1.1; margin:4px 0 20px; color:var(--white); }
.tryhome h2 em{ font-style:italic; color:var(--gold); }
.tryhome-main p{ color:rgba(255,255,255,.76); font-size:.95rem; line-height:1.7; margin:0 0 14px; max-width:56ch; }
.tryhome-main .tryhome-lead{ font-family:var(--serif); font-size:1.2rem; line-height:1.45; color:var(--gold-soft); }
.tryhome-main .tryhome-free{ border-left:3px solid var(--gold); padding:4px 0 4px 16px; margin:20px 0 26px; color:var(--white); }
.tryhome .btn-hero-primary{ background:var(--gold); color:var(--black); }
.tryhome .btn-hero-primary:hover{ background:var(--white); }
.tryhome-main .fine-print{ margin:18px 0 0; font-size:.76rem; color:rgba(255,255,255,.5); }
.tryhome-points{ display:grid; gap:14px; }
.try-point{ display:flex; align-items:center; gap:16px; border:1px solid rgba(184,146,62,.55); padding:16px 18px; }
.try-mark{
flex:0 0 46px; height:46px; display:flex; align-items:center; justify-content:center;
border:1px solid var(--gold); color:var(--gold); font-family:var(--serif); font-size:1.5rem; border-radius:0 14px 0 14px;
}
.try-point p{ margin:0; font-size:.88rem; line-height:1.45; color:rgba(255,255,255,.82); }
/* ---------- Política de cambios ---------- */
.changes{ background:var(--rose-soft); padding:64px 0; }
.changes h2{ font-family:var(--serif); font-weight:400; font-size:clamp(1.7rem,4.8vw,2.5rem); line-height:1.15; margin:4px 0 14px; color:var(--black); max-width:20ch; }
.changes h2 em{ font-style:italic; color:var(--gold-deep); }
.changes-intro{ color:rgba(22,19,17,.7); font-size:.95rem; line-height:1.65; max-width:62ch; margin:0 0 30px; }
.rules{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; border-top:1px solid var(--rose-deep); }
@media(min-width:800px){ .rules{ grid-template-columns:1fr 1fr; column-gap:48px; } }
.rule{ display:flex; gap:16px; align-items:flex-start; padding:18px 0; border-bottom:1px solid var(--rose-deep); }
.rule-num{ flex:0 0 auto; font-family:var(--serif); font-size:1.9rem; line-height:1; color:transparent; -webkit-text-stroke:1px var(--gold-deep); min-width:48px; }
.rule p{ margin:0; font-size:.9rem; line-height:1.6; color:rgba(22,19,17,.72); }
.rule p strong{ color:var(--black); font-weight:600; }
.changes-note{ margin-top:30px; background:var(--white); border:1px solid var(--rose-deep); border-left:5px solid var(--gold); padding:24px 24px 26px; }
.changes-note p{ margin:0 0 12px; font-size:.92rem; line-height:1.65; color:rgba(22,19,17,.75); max-width:66ch; }
.changes-note p strong{ color:var(--black); }
.changes-note .btn-hero-primary{ margin-top:8px; }
/* secciones largas: el navegador solo las pinta cuando se acerca */
/* ---------- aviso "Talla única" (solo informativo) ---------- */
.single-size-note{
margin:2px 0 0; display:flex; align-items:center; gap:6px; font-size:.66rem; font-weight:700;
letter-spacing:.07em; text-transform:uppercase; color:var(--gold-deep);
}
.single-size-note::before{ content:"\2726"; font-size:.85em; }
.single-size-note[hidden]{ display:none; }
.modal-info .single-size-note{ font-size:.74rem; margin-top:8px; }
/* admin: casilla "Prenda de talla única" */
.field .single-size-check{
display:flex; gap:10px; align-items:flex-start; margin:0; padding:12px 14px; cursor:pointer;
font-size:.85rem; line-height:1.5; color:var(--black); border:1px solid var(--rose-deep); background:var(--white);
}
.single-size-check input{ margin-top:3px; accent-color:var(--black); flex-shrink:0; }
.field .single-size-check:has(input:checked){ border-color:var(--black); background:var(--rose-soft); }
/* ---------- esqueleto del catálogo: reserva el alto mientras carga Firebase (evita saltos de scroll) ---------- */
.sk-card{ display:flex; flex-direction:column; border-bottom:1px solid var(--rose); }
.sk-img{ aspect-ratio:1/1; background:var(--rose-soft); }
.sk-body{ height:150px; padding:14px 12px; display:flex; flex-direction:column; gap:10px; }
.sk-line{ height:10px; background:var(--rose-soft); }
.sk-line.w60{ width:60%; } .sk-line.w40{ width:40%; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* ---------- admin: casillas (checkbox) sin estirarse ----------
La regla ".field input" les daba width:100% y padding de campo de texto: por eso la casilla de
«talla única» ocupaba todo el recuadro y el texto quedaba cortado a la derecha. */
.field input[type="checkbox"], .field input[type="radio"]{
width:auto; padding:0; border:none; border-radius:0; background:none; flex-shrink:0;
}
.field .single-size-check{
display:flex; align-items:flex-start; gap:12px; margin:0; padding:14px 16px;
border:1px solid var(--rose-deep); border-left:4px solid var(--rose-deep); background:var(--white);
cursor:pointer; transition:background .15s ease, border-color .15s ease;
}
.field .single-size-check:hover{ background:var(--rose-soft); }
.field .single-size-check input[type="checkbox"]{
width:18px; height:18px; margin:2px 0 0; flex:0 0 18px; accent-color:var(--black); cursor:pointer;
}
.field .single-size-check:has(input:checked){ background:var(--rose-soft); border-color:var(--black); border-left-color:var(--gold); }
.single-size-check .ssc-text{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.single-size-check .ssc-text strong{ font-size:.9rem; font-weight:600; color:var(--black); }
.single-size-check .ssc-text small{ font-size:.78rem; line-height:1.55; color:rgba(22,19,17,.62); }
/* ---------- footer: iconos de redes sociales ---------- */
.footer-social{ display:flex; justify-content:center; align-items:center; gap:12px; padding-top:26px; }
.social-link{
width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
background:var(--white); color:var(--black); border:1px solid var(--rose-deep); border-radius:var(--radius);
transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.social-link svg{ width:20px; height:20px; fill:currentColor; display:block; }
.social-link:hover{ background:var(--black); color:var(--gold-soft); border-color:var(--black); transform:translateY(-2px); }
/* ---------- menú lateral para móvil / tablet ---------- */
.nav-toggle{
display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
width:40px; height:40px; margin-left:-8px; background:none; border:none; color:var(--black);
}
.nav-toggle svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.nav-toggle:hover{ color:var(--gold-deep); }
@media(min-width:900px){ .nav-toggle, .mobile-menu, .menu-overlay{ display:none; } }
.menu-overlay{ position:fixed; inset:0; background:rgba(22,19,17,.5); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:60; }
.menu-overlay.open{ opacity:1; pointer-events:auto; }
.mobile-menu{
position:fixed; top:0; left:0; bottom:0; width:min(84vw, 320px); background:var(--white);
border-right:1px solid var(--rose-deep); box-shadow:6px 0 24px rgba(22,19,17,.12);
transform:translateX(-100%); visibility:hidden; transition:transform .25s ease, visibility 0s linear .25s;
z-index:70; display:flex; flex-direction:column; overflow-y:auto;
padding-bottom:env(safe-area-inset-bottom, 0px);
}
.mobile-menu.open{ transform:translateX(0); visibility:visible; transition:transform .25s ease; }
.mm-head{ display:flex; align-items:center; justify-content:space-between; height:64px; padding:0 18px; border-bottom:1px solid var(--rose-deep); flex-shrink:0; }
.mm-close{ background:none; border:none; color:var(--black); font-size:1.7rem; line-height:1; width:40px; height:40px; margin-right:-8px; }
.mm-close:hover{ color:var(--gold-deep); }
.mm-links{ display:flex; flex-direction:column; padding:10px 0; }
.mm-links a{
padding:15px 22px; text-decoration:none; color:var(--black); font-family:var(--serif); font-size:1.12rem;
border-left:3px solid transparent; border-bottom:1px solid var(--rose-soft);
transition:background .15s ease, border-color .15s ease;
}
.mm-links a:hover, .mm-links a:active{ background:var(--rose-soft); border-left-color:var(--gold); }
.mm-foot{ margin-top:auto; padding:20px 22px 26px; display:flex; flex-direction:column; gap:14px; border-top:1px solid var(--rose-deep); background:var(--rose-soft); }
.mm-foot .btn-hero-primary{ text-align:center; justify-content:center; }
.mm-follow{ margin:4px 0 0; font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; color:var(--gold-deep); font-weight:600; }
.mm-social{ display:flex; gap:10px; }
body.menu-open{ overflow:hidden; }