/* Identidad Jema Boutique 2026: producto protagonista y dorado solo como acento. */
@font-face { font-family:"Outfit"; src:url("/assets/fonts/outfit-variable.ttf") format("truetype"); font-style:normal; font-weight:100 900; font-display:swap; }
@font-face { font-family:"Manrope"; src:url("/assets/fonts/manrope-variable.ttf") format("truetype"); font-style:normal; font-weight:200 800; font-display:swap; }
:root {
  --color-carbon:#2E2E2E;
  --color-ivory:#F8F4ED;
  --color-gold:#B08F5B;
  --font-display:"Outfit","Avenir Next","Segoe UI",sans-serif;
  --font-body:"Manrope","Inter","Segoe UI",sans-serif;
  --motion:cubic-bezier(.22,.61,.36,1);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--color-ivory); color:var(--color-carbon); font-family:var(--font-body); font-weight:400; line-height:1.5; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
a { color:inherit; }
:focus-visible { outline:3px solid var(--color-gold); outline-offset:4px; }
[hidden] { display:none !important; }
.skip-link { position:absolute; top:-100px; left:1rem; z-index:10; padding:.8rem 1rem; background:var(--color-ivory); color:var(--color-carbon); }
.skip-link:focus { top:.5rem; }
.site-header { background:var(--color-carbon); color:var(--color-ivory); }
.header-inner { max-width:1320px; margin:auto; min-height:100px; padding:0 clamp(1.25rem,5vw,4rem); display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand-link { display:inline-flex; align-items:center; flex:none; }
.brand-link img { display:block; width:124px; height:auto; max-height:74px; object-fit:contain; }
.header-action { display:inline-flex; gap:1rem; align-items:center; text-decoration:none; font-size:.81rem; font-weight:600; letter-spacing:.03em; padding:.65rem 0; border-bottom:1px solid var(--color-gold); transition:color .3s var(--motion); }
.header-action:hover { color:var(--color-gold); }
.header-action span { font-size:1.2rem; color:var(--color-gold); font-weight:400; }
.eyebrow { text-transform:uppercase; letter-spacing:.19em; color:var(--color-carbon); font-size:.7rem; font-weight:600; margin:0 0 1.1rem; }
h3,p { overflow-wrap:anywhere; }
h1,h2,h3 { font-family:var(--font-display); line-height:1.08; }
.hero { display:grid; grid-template-columns:1fr; align-items:center; gap:2rem; max-width:1320px; margin:auto; padding:2.5rem clamp(1.25rem,5vw,4rem) 4rem; }
.hero-copy { position:relative; z-index:1; padding:1rem 0; }
.rule { display:block; width:48px; height:3px; background:var(--color-gold); margin-bottom:1.6rem; }
.hero h1 { font-size:clamp(2.8rem,12vw,4.5rem); letter-spacing:-.075em; color:var(--color-carbon); margin:0 0 1.6rem; font-weight:800; line-height:.99; }
.title-period { color:var(--color-gold); }
.hero-copy > p:not(.eyebrow) { max-width:34ch; font-size:clamp(1rem,1.4vw,1.14rem); margin:0 0 2rem; line-height:1.65; }
.button { display:inline-flex; align-items:center; justify-content:space-between; min-height:52px; gap:1.5rem; padding:.55rem .55rem .55rem 1.4rem; border:1px solid transparent; border-radius:99px; font-weight:600; font-size:.9rem; text-decoration:none; transition:transform .35s var(--motion),background .35s var(--motion); }
.button:hover:not(:disabled) { transform:translateY(-2px); }
.button:active:not(:disabled) { transform:scale(.98); }
.button:disabled { opacity:.55; cursor:not-allowed; }
.button-primary { background:var(--color-carbon); color:var(--color-ivory); }
.button-primary:hover:not(:disabled) { background:color-mix(in srgb,var(--color-carbon) 88%,black); }
.button-outline { border-color:var(--color-carbon); color:var(--color-carbon); background:transparent; padding-inline:1.25rem; }
.button-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.17); font-size:1.15rem; font-weight:400; transition:transform .35s var(--motion); }
.button:hover .button-icon { transform:translate(2px,-2px); }
.hero-stage { min-width:0; order:-1; }
.hero-visual { margin:0; }
.hero-photo { display:flex; align-items:center; justify-content:center; width:100%; height:min(105vw,450px); padding:1rem; background:color-mix(in srgb,var(--color-carbon) 4%,var(--color-ivory)); border-radius:clamp(1.25rem,3vw,2.5rem); box-shadow:0 18px 70px rgba(46,46,46,.08); overflow:hidden; }
.hero-photo img { display:block; width:auto; height:auto; max-width:100%; object-fit:contain; max-height:100%; }
.hero-visual figcaption { color:var(--color-carbon); font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:1rem .25rem 0; }
.hero-fallback { display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; height:240px; border-radius:clamp(1.25rem,3vw,2.5rem); background:var(--color-carbon); color:var(--color-ivory); padding:clamp(2rem,5vw,4rem); font-family:var(--font-display); font-weight:800; font-size:clamp(2.4rem,5vw,5rem); letter-spacing:-.06em; line-height:1.05; }
.fallback-line { display:block; width:60px; height:3px; background:var(--color-gold); }
.fallback-dot { width:18px; height:18px; border-radius:50%; background:var(--color-gold); align-self:flex-end; }
.catalog-section { max-width:1320px; margin:auto; padding:clamp(3.5rem,6vw,6rem) clamp(1.25rem,5vw,4rem) 8rem; border-top:1px solid rgba(46,46,46,.14); }
.section-heading { display:flex; flex-direction:column; justify-content:space-between; align-items:start; gap:.7rem; margin-bottom:2.3rem; }
.section-heading h1,.section-heading h2 { font-size:clamp(2.75rem,5vw,5rem); letter-spacing:-.065em; margin:0; color:var(--color-carbon); font-weight:800; }
.section-heading > p { font-size:.9rem; margin:0 0 .4rem; max-width:none; }
.filters { display:flex; overflow-x:auto; gap:.65rem; padding:.3rem 0 1.25rem; margin-bottom:1.7rem; scrollbar-width:thin; }
.filter { white-space:nowrap; background:transparent; color:var(--color-carbon); border:1px solid color-mix(in srgb,var(--color-carbon) 28%,var(--color-ivory)); border-radius:99px; padding:.6rem 1.25rem; min-height:44px; font-size:.88rem; font-weight:600; transition:background .3s var(--motion),color .3s var(--motion),transform .3s var(--motion); }
.filter.active,.filter:hover { background:var(--color-carbon); color:var(--color-ivory); border-color:var(--color-carbon); }
.filter:active { transform:scale(.97); }
.state-message { padding:1.25rem 0; color:var(--color-carbon); }
.product-grid { display:grid; grid-template-columns:1fr; gap:2.5rem clamp(1rem,2vw,2rem); }
.product-card { min-width:0; }
.product-card button { display:block; width:100%; padding:0; border:0; background:transparent; text-align:left; color:inherit; }
.product-photo { display:grid; place-items:center; width:100%; aspect-ratio:4/4.35; padding:clamp(.7rem,2vw,1.5rem); background:color-mix(in srgb,var(--color-carbon) 4%,var(--color-ivory)); overflow:hidden; color:var(--color-carbon); border-radius:1.1rem; }
.product-photo img { display:block; width:100%; height:100%; object-fit:contain; transition:transform .5s var(--motion); }
.product-photo:not(:has(img))::after { content:'Imagen pendiente'; font-size:.8rem; }
.product-card button:hover img { transform:scale(1.035); }
.product-card .category-tag { display:block; color:var(--color-carbon); font-size:.69rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; margin-top:1.2rem; }
.product-card h3 { font-size:clamp(1.12rem,1.6vw,1.45rem); margin:.45rem 0 .4rem; letter-spacing:-.025em; }
.product-card p { margin:.15rem 0; font-size:.9rem; }
.product-card .price { font-weight:600; margin-top:.7rem; color:var(--color-carbon); }
.text-button { background:transparent; border:0; color:var(--color-carbon); padding:.7rem 0; text-decoration:underline; text-decoration-color:var(--color-gold); text-underline-offset:4px; font-weight:600; cursor:pointer; }
.detail { margin-top:1rem; }
.detail-inner { display:grid; grid-template-columns:1fr; gap:1.5rem; align-items:center; margin-top:2rem; }
.detail-inner .product-photo { max-width:620px; }
.detail-inner h2 { font-size:clamp(2.5rem,4.5vw,5rem); letter-spacing:-.06em; color:var(--color-carbon); margin:.4rem 0 1.5rem; }
.detail-inner .reference { color:var(--color-carbon); font-weight:600; }
.detail-inner .price { font-size:1.25rem; font-weight:600; }
.detail-inner .button { margin-top:1.5rem; padding-right:1.4rem; }
.detail-gallery { display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.5rem; }
.detail-gallery img { display:block; width:110px; height:110px; object-fit:contain; background:color-mix(in srgb,var(--color-carbon) 4%,var(--color-ivory)); border-radius:.8rem; padding:.4rem; }
.site-footer { background:var(--color-carbon); color:var(--color-ivory); }
.footer-inner { max-width:1320px; margin:auto; padding:3rem clamp(1.25rem,5vw,4rem); display:flex; flex-direction:column; align-items:start; justify-content:space-between; gap:1.5rem; }
.site-footer img { display:block; width:min(216px,60vw); height:auto; max-height:150px; object-fit:contain; }
/* Panel: los mismos controles, jerarquía compacta y blancos cálidos. */
.admin-main { max-width:1320px; margin:auto; padding:clamp(2rem,5vw,5rem) clamp(1.25rem,5vw,4rem) 6rem; }
.admin-label { color:var(--color-ivory); font-size:.72rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; border:1px solid var(--color-gold); border-radius:99px; padding:.55rem .8rem; }
.admin-main > .section-heading { margin-bottom:3rem; }
.admin-layout { display:grid; grid-template-columns:1fr; align-items:start; gap:clamp(1rem,3vw,2.5rem); }
.admin-list,.editor,.auth-box { min-width:0; background:color-mix(in srgb,var(--color-ivory) 96%,white); padding:1.25rem; border:1px solid rgba(46,46,46,.11); border-radius:1.5rem; box-shadow:0 14px 46px rgba(46,46,46,.045); }
.auth-box { margin-bottom:1.5rem; }
.auth-box h2 { font-size:1.3rem; margin-top:0; color:var(--color-carbon); }
.list-heading { display:flex; align-items:start; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-bottom:1.3rem; }
.list-heading h2,.editor h2 { font-size:1.55rem; letter-spacing:-.035em; margin:0 0 1.4rem; color:var(--color-carbon); }
.list-heading h2 { margin:0; }
.list-heading .button { min-height:44px; padding:.6rem 1rem; white-space:nowrap; font-size:.82rem; }
.admin-item { border-top:1px solid rgba(46,46,46,.15); padding:1rem 0; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.admin-item > div { min-width:0; }
.admin-item strong,.admin-item small { display:block; overflow-wrap:anywhere; }
.admin-item small { color:color-mix(in srgb,var(--color-carbon) 72%,var(--color-ivory)); font-size:.77rem; margin-top:.25rem; }
.admin-item button { flex:none; }
.editor label,.auth-box label { display:block; font-weight:600; font-size:.85rem; margin:1.3rem 0 .5rem; color:var(--color-carbon); }
.editor input:not([type=hidden]):not([type=file]),.editor select,.editor textarea,.auth-box input { display:block; width:100%; min-height:48px; border:1px solid color-mix(in srgb,var(--color-carbon) 32%,var(--color-ivory)); border-radius:.7rem; padding:.7rem .85rem; background:var(--color-ivory); color:var(--color-carbon); transition:border-color .3s var(--motion); }
.editor textarea { resize:vertical; }
.editor input[type=file] { display:block; width:100%; padding:.7rem; border:1px dashed color-mix(in srgb,var(--color-carbon) 32%,var(--color-ivory)); border-radius:.7rem; background:var(--color-ivory); font-size:.85rem; }
.field-row { display:grid; grid-template-columns:1fr; gap:0; }
.field-row > div { min-width:0; }
.field-hint { font-size:.8rem; margin:.5rem 0; color:color-mix(in srgb,var(--color-carbon) 72%,var(--color-ivory)); }
.photo-preview { display:block; width:min(260px,100%); max-height:280px; object-fit:contain; background:var(--color-ivory); padding:.7rem; border-radius:.7rem; margin-top:.7rem; }
.checkbox-row { display:flex; align-items:center; gap:.6rem; margin:1.3rem 0 .5rem; }
.checkbox-row input { width:auto; min-height:0; }
.checkbox-row label { margin:0; }
.gallery-list { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:.7rem; }
.gallery-item { display:flex; flex-direction:column; align-items:center; gap:.4rem; width:110px; padding:.5rem; background:var(--color-ivory); border-radius:.7rem; }
.gallery-item img { display:block; width:100%; height:100px; object-fit:contain; }
.admin-item .featured-tag { color:var(--color-gold); font-weight:600; }
.editor-actions,.inline-form { display:flex; gap:.7rem; align-items:center; flex-wrap:wrap; margin-top:1.7rem; }
.editor-actions { align-items:stretch; flex-direction:column; }
.editor-actions .button { width:100%; }
.inline-form input { flex:1; min-width:180px; }
.editor-actions .button,.inline-form .button { padding-inline:1.4rem; }
@media (min-width:541px) { .hero-photo { height:min(105vw,570px); } .hero-fallback { height:280px; } .hero h1 { font-size:clamp(3.5rem,10vw,6rem); } .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .product-photo { aspect-ratio:4/5; } .field-row { grid-template-columns:1fr 1fr; gap:1rem; } .editor-actions { flex-direction:row; align-items:center; } .editor-actions .button { width:auto; } .section-heading { flex-direction:row; align-items:end; gap:2rem; } .section-heading > p { max-width:22ch; } .footer-inner { flex-direction:row; align-items:center; } }
@media (min-width:1000px) { .hero { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem,5vw,5.5rem); padding:clamp(3.5rem,7vw,7rem) clamp(1.25rem,5vw,4rem) clamp(4rem,7vw,7.5rem); } .hero-stage { order:0; } .hero-photo { height:clamp(480px,53vw,690px); padding:clamp(1rem,3vw,2.5rem); } .hero-fallback { height:clamp(380px,45vw,590px); } .hero h1 { font-size:clamp(3.25rem,5vw,4.25rem); } .product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .detail-inner { grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(2rem,6vw,6rem); } .admin-layout { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); } .admin-list,.editor,.auth-box { padding:clamp(1.3rem,3vw,2.5rem); } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; } }