/* ============================================================
   AUKAN CLUB — HOJA DE ESTILOS PRINCIPAL
   OPTIMIZADO PARA SEO, RENDIMIENTO Y RESPONSIVE
   INCLUYE PARCHE SAFARI IPHONE + SKELETON LOADER
   =========================================================== */

/* ============================================================
   ROOT & VARIABLES
============================================================ */
:root{
    --black:      #080808;
    --black-2:    #0F0F0F;
    --white:      #FFFFFF;
    --red:        #8B1E1E;
    --offwhite:   #F2F2F2;
    --gray:       #AAA6A6;
    --line:       rgba(255,255,255,0.08);
    --line-soft:  rgba(255,255,255,0.05);
    --font-display: 'Good Times', 'Anton', 'Archivo Black', sans-serif;
    --font-body:    'Space Grotesk', sans-serif;
    --container:  1400px;
    --header-h:   76px;
    --ease: cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   RESET & BASE
============================================================ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
    margin:0; background:var(--black); color:var(--white);
    font-family:var(--font-body); -webkit-font-smoothing:antialiased; 
    overflow-x:hidden; line-height:1.5;
}
body.lock{ overflow:hidden; }
body.cart-open{ overflow:hidden; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; }
h1,h2,h3,h4,p{ margin:0; }
img{ max-width:100%; height:auto; display:block; }

.container{ max-width:var(--container); margin:0 auto; padding:0 40px; }

/* ============================================================
   UTILIDADES
============================================================ */
.btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:15px 34px; font-size:.78rem; font-weight:700; letter-spacing:.12em;
    text-transform:uppercase; border-radius:2px; border:1px solid transparent;
    transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn-solid{ background:var(--white); color:var(--black); }
.btn-solid:hover{ background:var(--offwhite); }
.btn-outline{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.35); }
.btn-outline:hover{ border-color:var(--white); background:rgba(255,255,255,.06); }
.btn-block{ display:flex; width:100%; }

/* ============================================================
   HEADER
============================================================ */
.site-header{
    position:fixed; top:0; left:0; right:0; height:var(--header-h); z-index:150;
    background:rgba(8,8,8,.88); backdrop-filter:blur(10px); 
    border-bottom:1px solid var(--line);
}
.site-header .container{
    height:100%; display:flex; align-items:center; 
    justify-content:space-between; gap:10px; position:relative;
}

.logo-mark{ 
    width: clamp(30px, 4vw, 40px); height:auto; flex:none; display:block; 
}
.logo-mark img{ width:100%; height:100%; object-fit:contain; }
.mobile-logo{ display:none; }

.header-left{ 
    display:flex; align-items:center; gap:clamp(8px, 1.5vw, 18px); 
    flex:1; min-width:0; 
}
.coords{ 
    font-size:clamp(0.5rem, 1.2vw, 0.68rem); letter-spacing:.1em; 
    color:var(--gray); white-space:nowrap; 
}

.brand-title{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    font-family:var(--font-display); font-weight:700; 
    font-size:clamp(0.7rem, 1.5vw, 1.15rem); letter-spacing:.32em; 
    text-transform:uppercase; white-space:nowrap;
}

.header-right{ 
    display:flex; align-items:center; gap:clamp(8px, 1.5vw, 22px); 
    flex:1; justify-content:flex-end; 
}
.main-nav{ display:flex; gap:clamp(12px, 2vw, 28px); }
.main-nav a{ 
    font-size:clamp(0.5rem, 1.2vw, 0.74rem); font-weight:700; 
    letter-spacing:.12em; text-transform:uppercase; color:var(--offwhite); 
    position:relative; padding:4px 0; 
}
.main-nav a::after{ 
    content:''; position:absolute; left:0; bottom:0; width:0; height:1px; 
    background:var(--red); transition:width .25s var(--ease); 
}
.main-nav a:hover::after{ width:100%; }

.bag-btn{
    background:transparent; border:1px solid rgba(255,255,255,.28); color:var(--white); 
    padding:clamp(4px, 1vw, 8px) clamp(10px, 2vw, 16px);
    font-size:clamp(0.5rem, 1.2vw, 0.68rem); font-weight:700; letter-spacing:.1em; 
    text-transform:uppercase; border-radius:2px;
    transition:border-color .2s var(--ease), background .2s var(--ease);
}
.bag-btn:hover{ border-color:var(--white); background:rgba(255,255,255,.06); }

/* BOTÓN HAMBURGUESA */
.nav-toggle{ 
    display:none; flex-direction:column; gap:5px; 
    background:none; padding:6px; 
}
.nav-toggle span{ 
    width:22px; height:2px; background:var(--white); 
    transition:transform .25s var(--ease), opacity .25s var(--ease); 
}
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* PANEL MÓVIL */
.mobile-panel{
    position:fixed; inset:var(--header-h) 0 0 0; background:var(--black); z-index:140;
    display:flex; flex-direction:column; padding:40px; gap:28px;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.mobile-panel.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
.mobile-panel a{ 
    font-family:var(--font-display); font-size:2.1rem; text-transform:uppercase; 
    letter-spacing:.02em; color:var(--white); border-bottom:1px solid var(--line); 
    padding-bottom:18px; 
}
.mobile-panel .coords{ margin-top:auto; }

/* ============================================================
   SECCIÓN HERO
============================================================ */
.hero{
    min-height:100vh; display:flex; flex-direction:column; 
    justify-content:center; align-items:center; text-align:center;
    padding-top:var(--header-h); position:relative; overflow:hidden;
}
.hero-bg{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    font-family:var(--font-display); font-weight:700; font-size:32vw; line-height:0.8;
    color:#121212; z-index:0; letter-spacing:-0.05em; user-select:none; pointer-events:none;
}
.hero-side-text{
    position:absolute; left:clamp(15px,3vw,40px); bottom:clamp(20px,5vh,40px); 
    display:flex; flex-direction:column; align-items:center;
    font-family:var(--font-display); color:var(--white); z-index:2; text-align:center;
}
.hero-side-text .side-label{ 
    font-size:0.6rem; color:var(--red); letter-spacing:0.25em; 
    text-transform:uppercase; margin-bottom:2px; 
}
.hero-side-text .side-number{ 
    font-weight:700; font-size:clamp(2rem,4vw,3rem); 
    line-height:0.8; letter-spacing:-0.02em; 
}

.hero-coords-right{
    position:absolute; right:clamp(15px,3vw,40px); bottom:clamp(20px,5vh,40px);
    font-size:clamp(0.5rem,0.9vw,0.65rem); color:var(--white); 
    letter-spacing:0.15em; text-align:right; line-height:1.6;
    z-index:2; text-transform:uppercase; font-weight:300;
}

.hero-content{ 
    position:relative; z-index:1; display:flex; flex-direction:column; 
    align-items:center; width:100%; padding:0 20px; 
}
.hero-title{ 
    font-family:var(--font-display); font-weight:700; 
    font-size:clamp(4rem,13vw,8rem); line-height:0.85; 
    letter-spacing:-0.03em; margin-bottom:-0.1em; text-transform:uppercase; 
}
.hero-subtitle{ 
    font-family:var(--font-display); font-size:clamp(3rem,10vw,6rem); 
    color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.15); 
    letter-spacing:-0.02em; margin-top:-0.25em; text-transform:uppercase; 
}
.hero-eyebrow{ 
    margin-top:clamp(1.5rem,3vh,2rem); color:var(--red); letter-spacing:.25em; 
    font-weight:700; font-size:clamp(0.7rem,1.2vw,0.9rem); 
}
.hero-location{ 
    margin-top:0.5rem; color:var(--gray); letter-spacing:.2em; 
    font-size:clamp(0.6rem,1vw,0.75rem); text-transform:uppercase; 
}
.hero-buttons{ 
    margin-top:clamp(2rem,5vh,3.5rem); display:flex; gap:1.5rem; 
    flex-wrap:wrap; justify-content:center; 
}

/* MARQUEE */
.hero-marquee{ 
    width:100%; background:var(--red); padding:12px 0; 
    overflow:hidden; white-space:nowrap; position:relative; z-index:2; 
}
.marquee-track{ display:inline-block; animation:scrollMarquee 20s linear infinite; }
.marquee-track span{ 
    display:inline-block; font-size:.75rem; font-weight:700; 
    letter-spacing:.15em; text-transform:uppercase; 
    color:var(--white); margin:0 10px; 
}
@keyframes scrollMarquee{ 
    0%{ transform:translateX(0); } 
    100%{ transform:translateX(-50%); } 
}

/* ============================================================
   MANIFIESTO
============================================================ */
.manifesto{ padding:100px 0; border-top:1px solid var(--line); }
.manifesto-grid{ 
    display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; 
}
.manifesto-title{ 
    font-family:var(--font-display); font-weight:700; 
    font-size:clamp(3rem,5.5vw,5.5rem); line-height:0.95; 
    letter-spacing:-0.02em; text-transform:uppercase; 
}
.manifesto-text{ 
    display:flex; flex-direction:column; gap:25px; 
    color:var(--gray); font-size:.95rem; line-height:1.6; 
}
.manifesto-text strong{ color:var(--white); font-weight:600; }
.manifesto-box{ 
    display:inline-block; border:1px solid var(--red); padding:10px 20px; 
    color:var(--white); font-size:.85rem; line-height:1.4; 
    letter-spacing:0.05em; margin-top:10px; align-self:flex-start; 
}

/* ============================================================
   SECCIÓN TIENDA
============================================================ */
.shop-section{ 
    padding-bottom:100px; border-top:1px solid var(--line); 
    padding-top:50px; position:relative; 
}
.shop-header{ 
    display:flex; justify-content:space-between; align-items:flex-end; 
    margin-bottom:40px; flex-wrap:wrap; gap:10px; 
}
.shop-title{ 
    font-family:var(--font-display); font-weight:700; 
    font-size:clamp(2.5rem,5vw,5rem); letter-spacing:-0.02em; text-transform:uppercase; 
}
.shop-subtitle{ 
    color:var(--gray); font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; 
}

/* FILTROS */
.filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:50px; }
.filter-btn{ 
    background:transparent; color:var(--gray); padding:8px 20px; 
    font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; 
    transition:color .2s var(--ease), background .2s var(--ease); 
    border-radius:2px;
}
.filter-btn:hover{ color:var(--white); }
.filter-btn.active{ background:var(--white); color:var(--black); }

/* ============================================================
   GRID DE PRODUCTOS
============================================================ */
.products-grid{ 
    display:grid; gap:20px; 
    grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr)); 
}

.product-card{ 
    background:var(--black-2); border:1px solid #222; 
    display:flex; flex-direction:column; position:relative; 
    transition:transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); 
    will-change:transform; transform:translateZ(0);
    animation: cardFadeIn 0.5s ease backwards;
}
.product-card:hover{ 
    transform:translateY(-4px); 
    border-color:#444; 
    box-shadow:0 10px 30px rgba(0,0,0,0.5); 
}
.product-card.hidden{ display:none; }

@keyframes cardFadeIn{
    from{ opacity:0; transform:translateY(20px); }
    to{ opacity:1; transform:translateY(0); }
}

.product-card:nth-child(1){ animation-delay:0.05s; }
.product-card:nth-child(2){ animation-delay:0.10s; }
.product-card:nth-child(3){ animation-delay:0.15s; }
.product-card:nth-child(4){ animation-delay:0.20s; }
.product-card:nth-child(5){ animation-delay:0.25s; }
.product-card:nth-child(6){ animation-delay:0.30s; }
.product-card:nth-child(7){ animation-delay:0.35s; }
.product-card:nth-child(8){ animation-delay:0.40s; }
.product-card:nth-child(9){ animation-delay:0.05s; }
.product-card:nth-child(10){ animation-delay:0.10s; }
.product-card:nth-child(11){ animation-delay:0.15s; }
.product-card:nth-child(12){ animation-delay:0.20s; }
.product-card:nth-child(13){ animation-delay:0.25s; }
.product-card:nth-child(14){ animation-delay:0.30s; }
.product-card:nth-child(15){ animation-delay:0.35s; }
.product-card:nth-child(16){ animation-delay:0.40s; }

.product-badge{ 
    position:absolute; top:12px; left:12px; background:var(--red); 
    color:var(--white); padding:3px 8px; font-size:0.55rem; font-weight:700; 
    letter-spacing:.05em; text-transform:uppercase; border-radius:2px; z-index:5; 
}

/* ============================================================
   GALERÍA DE IMÁGENES (CON SKELETON LOADER)
============================================================ */
.product-gallery{ 
    position:relative; width:100%; aspect-ratio:1/1; 
    background:#1a1a1a; overflow:hidden; 
}
.product-gallery::before{
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(90deg, #1a1a1a 0%, #222222 40%, #1a1a1a 80%);
    background-size:200% 100%;
    animation:shimmer 1.5s infinite;
    z-index:1; pointer-events:none;
    transition:opacity 0.3s ease;
}
.product-gallery.loaded::before{ opacity:0; }

.product-gallery img{ 
    width:100%; height:100%; object-fit:cover; flex-shrink:0; 
    display:none; background:#1a1a1a; 
    transition:opacity 0.2s ease;
    position:relative; z-index:2;
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
}
.product-gallery img.active{ display:block; animation:fadeIn 0.2s ease; }

@keyframes shimmer{
    0%{ background-position:-200% 0; }
    100%{ background-position:200% 0; }
}

@keyframes fadeIn{
    from{ opacity:0; }
    to{ opacity:1; }
}

.gallery-controls{
    position:absolute; bottom:15px; left:50%; transform:translateX(-50%);
    background:rgba(0,0,0,0.8); padding:6px 12px; border-radius:20px;
    display:flex; align-items:center; gap:15px; font-size:0.75rem;
    border:1px solid rgba(255,255,255,0.1); z-index:10;
}
.gallery-nav{ 
    cursor:pointer; color:var(--gray); font-weight:bold; 
    user-select:none; transition:color 0.2s; 
}
.gallery-nav:hover{ color:var(--white); }
.gallery-indicator{ color:var(--white); font-size:0.6rem; letter-spacing:0.1em; }

/* ============================================================
   INFO DEL PRODUCTO
============================================================ */
.product-info{ 
    padding:16px 20px 20px 20px; display:flex; 
    flex-direction:column; gap:4px; flex-grow:1; 
}
.product-cat{ 
    font-size:0.55rem; font-weight:700; letter-spacing:0.1em; 
    color:var(--gray); border:1px solid #333; padding:3px 8px; 
    width:max-content; margin-bottom:10px; text-transform:uppercase; 
}
.product-name{ 
    font-family:var(--font-display); font-weight:700; 
    font-size:clamp(1rem,2vw,1.3rem); line-height:1.1; 
    letter-spacing:0.02em; margin-bottom:5px; text-transform:uppercase; 
}
.product-desc{ 
    font-size:0.65rem; color:var(--gray); line-height:1.4; 
    margin-bottom:15px; min-height:35px; 
}

.product-bottom{ 
    margin-top:auto; display:flex; justify-content:space-between; 
    align-items:center; border-top:1px solid #222; padding-top:15px; 
}
.product-price{ font-size:0.85rem; font-weight:700; letter-spacing:0.05em; }
.btn-add-catalog{ 
    background:transparent; border:1px solid #444; color:var(--white); 
    padding:6px 16px; font-size:0.6rem; font-weight:700; 
    letter-spacing:0.1em; text-transform:uppercase; 
    transition:all 0.2s var(--ease); border-radius:2px;
}
.btn-add-catalog:hover{ 
    background:var(--white); color:var(--black); border-color:var(--white); 
}
.btn-add-catalog:disabled{ opacity:0.4; cursor:not-allowed; }
.btn-add-catalog:disabled:hover{ background:transparent; color:var(--white); border-color:#444; }
.btn-add-catalog:active{ transform:scale(0.96); }

/* ============================================================
   VISTA DETALLE
============================================================ */
.btn-back-catalog{ 
    background:transparent; border:1px solid var(--gray); color:var(--gray); 
    padding:12px 24px; font-size:0.8rem; font-weight:700; 
    letter-spacing:0.1em; cursor:pointer; margin-bottom:40px; 
    display:inline-flex; align-items:center; transition:all 0.2s var(--ease); 
    border-radius:2px;
}
.btn-back-catalog:hover{ 
    background:var(--white); color:var(--black); border-color:var(--white); 
}

.detail-grid{ 
    display:grid; grid-template-columns:1fr 1fr; 
    gap:clamp(30px,5vw,60px); align-items:start; 
}
.detail-gallery{ display:flex; flex-direction:column; gap:15px; }
.detail-main-img{ 
    width:100%; aspect-ratio:1/1; background:var(--black-2); 
    border:1px solid #222; overflow:hidden; 
    position:relative;
}
.detail-main-img::before{
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(90deg, #1a1a1a 0%, #222222 40%, #1a1a1a 80%);
    background-size:200% 100%;
    animation:shimmer 1.5s infinite;
    z-index:1; pointer-events:none;
    transition:opacity 0.3s ease;
}
.detail-main-img.loaded::before{ opacity:0; }

.detail-main-img img{ 
    width:100%; height:100%; object-fit:cover; 
    animation:fadeIn 0.2s ease;
    position:relative; z-index:2;
    transition:opacity 0.3s ease;
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
}

.detail-thumbs{ display:flex; gap:10px; flex-wrap:wrap; }
.detail-thumbs img{ 
    width:clamp(60px,10vw,80px); height:clamp(60px,10vw,80px); 
    object-fit:cover; border:1px solid #333; cursor:pointer; 
    transition:border-color 0.2s var(--ease); background:#1a1a1a;
}
.detail-thumbs img:hover,
.detail-thumbs img.active-thumb{ border-color:var(--white); }

.detail-info{ display:flex; flex-direction:column; }
.detail-title{ 
    font-family:var(--font-display); font-weight:700; 
    font-size:clamp(2.5rem,4vw,3.5rem); letter-spacing:-0.02em; 
    text-transform:uppercase; margin-top:10px; margin-bottom:20px; 
}
.detail-desc{ color:var(--gray); font-size:1rem; line-height:1.6; margin-bottom:30px; }
.detail-price{ 
    font-size:clamp(1.5rem,2.5vw,2rem); font-weight:700; margin-bottom:40px; 
}

/* SELECTOR DE TALLES */
.detail-size-container{ margin-bottom:20px; }
.size-label{ 
    color:var(--gray); font-size:0.8rem; text-transform:uppercase; 
    letter-spacing:0.1em; margin-bottom:15px; 
}
.size-options{ display:flex; gap:10px; flex-wrap:wrap; }
.size-btn{ 
    min-width:50px; height:50px; background:transparent; 
    border:1px solid #333; color:var(--white); font-weight:700; 
    font-size:0.9rem; border-radius:2px; 
    transition:all 0.2s var(--ease); 
}
.size-btn:hover:not(.disabled){ 
    border-color:var(--white); background:rgba(255,255,255,0.05); 
}
.size-btn.active{ 
    border-color:var(--white); background:var(--white); color:var(--black); 
}
.size-btn.disabled{ 
    border-color:#222; color:#444; cursor:not-allowed; text-decoration:line-through; 
}
.size-btn.disabled:hover{ background:transparent; border-color:#222; }
.size-btn:active{ transform:scale(0.96); }

.btn-add-detail{ width:100%; padding:18px; font-size:1rem; letter-spacing:0.2em; }
.btn-add-detail:active{ transform:scale(0.98); }

/* BOTÓN WHATSAPP (PRODUCTOS AGOTADOS) */
.btn-whatsapp-consult{ 
    background:#25D366 !important; border-color:#25D366 !important; 
    color:white !important; 
}
.btn-whatsapp-consult:hover{ 
    background:#1ea952 !important; border-color:#1ea952 !important; 
}

/* ============================================================
   CARRITO DE COMPRAS
============================================================ */
.cart-overlay{ 
    position:fixed; inset:0; background:rgba(0,0,0,0.8); 
    opacity:0; visibility:hidden; transition:all 0.3s var(--ease); 
    z-index:190; 
}
.cart-overlay.open{ opacity:1; visibility:visible; }

.cart-panel{ 
    position:fixed; top:0; right:0; bottom:0; width:100%; 
    max-width:420px; background:var(--black); 
    border-left:1px solid var(--line); z-index:200; 
    transform:translateX(100%); transition:transform 0.4s var(--ease); 
    display:flex; flex-direction:column; 
}
.cart-panel.open{ transform:translateX(0); }

.cart-header{ 
    display:flex; justify-content:space-between; align-items:center; 
    padding:24px 30px; border-bottom:1px solid var(--line); flex-shrink:0; 
}
.cart-header h2{ 
    font-family:var(--font-display); font-weight:700; font-size:2.5rem; 
    letter-spacing:-0.02em; text-transform:uppercase; 
}
.cart-close{ 
    background:none; color:var(--white); font-size:2rem; 
    font-weight:300; transition:opacity 0.2s; 
}
.cart-close:hover{ opacity:0.7; }

.cart-items{ flex-grow:1; overflow-y:auto; padding:30px; }
.cart-empty{ 
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); 
    color:var(--gray); font-size:0.75rem; letter-spacing:0.2em; 
    text-transform:uppercase; 
}

.cart-item{ 
    display:flex; justify-content:space-between; align-items:flex-start; 
    padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid var(--line); 
}
.cart-item-info{ display:flex; flex-direction:column; gap:4px; max-width:70%; }
.cart-item-name{ font-weight:600; font-size:1rem; text-transform:uppercase; }
.cart-item-size{ font-size:0.75rem; color:var(--gray); }
.cart-item-price{ font-weight:700; font-size:1rem; }
.cart-item-remove{ 
    background:none; color:var(--gray); font-size:1.2rem; 
    transition:color 0.2s; 
}
.cart-item-remove:hover{ color:var(--red); }

.cart-footer{ 
    border-top:1px solid var(--line); padding:25px 30px; 
    flex-shrink:0; background:var(--black); 
}
.cart-total{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:25px; }
.cart-total span:first-child{ 
    font-size:0.75rem; color:var(--gray); letter-spacing:0.2em; text-transform:uppercase; 
}
.cart-total span:last-child{ font-size:2.5rem; font-weight:700; }

/* ============================================================
   FOOTER
============================================================ */
.site-footer{ 
    padding:80px 0 40px; border-top:1px solid var(--line); 
    background:var(--black); 
}
.footer-features{ 
    display:grid; grid-template-columns:repeat(3,1fr); 
    gap:40px; margin-bottom:60px; 
}
.feature-col{ 
    padding:20px 0; border-top:1px solid var(--line-soft); padding-top:30px; 
}
.feature-number{ 
    font-family:var(--font-display); font-weight:700; font-size:3rem; 
    color:#222; display:block; margin-bottom:15px; 
}
.feature-title{ 
    font-family:var(--font-display); font-weight:700; font-size:1.2rem; 
    letter-spacing:0.05em; text-transform:uppercase; margin-bottom:12px; 
}
.feature-desc{ color:var(--gray); font-size:0.9rem; line-height:1.6; max-width:90%; }

.footer-divider{ height:1px; background:var(--line); margin-bottom:60px; }
.footer-nav{ display:grid; grid-template-columns:1.5fr 2fr; gap:60px; }
.footer-brand .footer-logo{ 
    font-family:var(--font-display); font-weight:700; font-size:3rem; 
    line-height:0.9; letter-spacing:-0.02em; margin-bottom:10px; 
}
.footer-brand .footer-tagline{ 
    color:var(--red); font-size:0.75rem; font-weight:700; 
    letter-spacing:0.2em; text-transform:uppercase; 
    margin-bottom:20px; display:block; 
}
.footer-address{ color:var(--gray); font-size:0.8rem; line-height:1.6; max-width:250px; }

.footer-links{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.link-group h4{ 
    font-size:0.7rem; font-weight:700; letter-spacing:0.2em; 
    text-transform:uppercase; color:var(--gray); margin-bottom:20px; 
}
.link-group a, .link-group span{ 
    display:block; font-size:0.85rem; color:var(--offwhite); 
    margin-bottom:12px; transition:color 0.2s var(--ease); 
}
.link-group a:hover{ color:var(--white); }
.link-group .footer-coords{ font-size:0.75rem; color:var(--gray); margin-top:15px; }

/* ============================================================
   SCROLLBAR PERSONALIZADA
============================================================ */
::-webkit-scrollbar{ width:6px; }
::-webkit-scrollbar-track{ background:var(--black); }
::-webkit-scrollbar-thumb{ background:#333; border-radius:3px; }
::-webkit-scrollbar-thumb:hover{ background:#555; }

/* ============================================================
   OPTIMIZACIONES DE RENDIMIENTO
============================================================ */
img:not([src]), img[src=""], img[src="#"]{ opacity:0; }
img[src]:not([src=""]):not([src="#"]){ opacity:1; }

@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:0.01ms !important;
        scroll-behavior:auto !important;
    }
}

/* ============================================================
   MEDIA QUERIES
============================================================ */
@media (max-width: 1024px){
    .manifesto-grid{ grid-template-columns:1fr; gap:30px; }
    .footer-features{ grid-template-columns:1fr 1fr; }
    .footer-nav{ grid-template-columns:1fr; gap:40px; }
    .detail-grid{ grid-template-columns:1fr; }
}

@media (max-width: 768px){
    .container{ padding:0 15px; }
    .main-nav, .header-left .coords{ display:none; }
    .nav-toggle{ display:flex; }
    .header-right .logo-mark{ display:none; }
    .brand-title{ font-size:0.7rem; }
    .bag-btn{ padding:4px 8px; font-size:0.5rem; }
    
    .hero-side-text{ left:15px; bottom:15px; }
    .hero-coords-right{ right:15px; bottom:15px; }
    .hero-buttons{ 
        flex-direction:column; align-items:center; 
        width:100%; max-width:280px; 
    }
    .hero-buttons .btn{ width:100%; }
    
    .footer-features{ grid-template-columns:1fr; }
    .footer-links{ grid-template-columns:1fr 1fr; gap:30px; }
    .cart-panel{ max-width:100%; }

    .detail-grid{ gap:20px; }
    .detail-thumbs img{ width:50px; height:50px; }
    .size-btn{ min-width:40px; height:40px; font-size:0.8rem; }
    
    .shop-header{ flex-direction:column; align-items:flex-start; }
    .filters{ gap:6px; }
    .filter-btn{ padding:6px 12px; font-size:0.65rem; }
}