
:root{
  --em-black:#0A0A0A;--em-offwhite:#F5F5F5;--em-white:#FFFFFF;--em-gold:#D4AF37;
  --em-ink:#111827;--em-gray:#9CA3AF;--em-gray-dim:#6B7280;--em-line:#262626;
  --em-font-display:'Oswald',sans-serif;--em-font-body:'Inter',sans-serif;
  --em-radius:0px;--em-transition:.3s;
}

/* FASE 11 — FULL WIDTH REAL: SECTION = 100% viewport, CONTENT = 1280-1440px.
   Las secciones Elementor del home son boxed (fondo de borde a borde); solo se
   sube el container interior al ancho objetivo. NO se usa width:100vw. */
.elementor-section-boxed > .elementor-container{max-width:1440px}
.elementor-section-boxed > .elementor-container.elementor-column-gap-extended{max-width:1440px}

body{font-family:var(--em-font-body);background:var(--em-offwhite);color:var(--em-black)}
h1,h2,h3,h4,.elementor-widget-heading .elementor-heading-title{font-family:var(--em-font-display)!important;text-transform:uppercase;letter-spacing:-0.5px}
.empire-kicker{font-family:var(--em-font-display);letter-spacing:.3em;text-transform:uppercase;font-size:12px;color:var(--em-gold);font-weight:600}
.elementor-widget-button .elementor-button{font-family:var(--em-font-display);text-transform:uppercase;letter-spacing:2px;font-size:14px;border-radius:0!important}
.elementor-widget-button .elementor-button{padding:16px 34px}
/* Marquesina */
.empire-marquee{background:var(--em-black);color:#fff;overflow:hidden;white-space:nowrap;padding:11px 0;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.empire-marquee .mq-track{display:inline-flex;animation:mq 28s linear infinite}
.empire-marquee span{display:inline-flex;align-items:center;gap:8px;padding:0 28px;color:#fff}
.empire-marquee b{color:var(--em-gold);font-weight:600}
@keyframes mq{to{transform:translateX(-50%)}}
/* Header sticky píldora dorada */
.empire-header{position:sticky;top:0;z-index:999;background:var(--em-black);padding:0;transition:background .4s}
.empire-header .eh-inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 24px;transition:all .45s cubic-bezier(.16,1,.3,1);border-radius:0}
.empire-header .eh-logo{font-family:var(--em-font-display);font-size:22px;font-weight:700;letter-spacing:.12em;color:#fff;text-decoration:none;text-transform:uppercase}
.empire-header .eh-logo b{color:var(--em-gold);font-weight:700}
.empire-header .eh-nav{display:flex;gap:22px;align-items:center}
.empire-header .eh-nav a{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#fff;text-decoration:none;font-weight:600;transition:color .3s}
.empire-header .eh-nav a:hover{color:var(--em-gold)}
.empire-header .eh-icons{display:flex;gap:14px;align-items:center;color:#fff}
.empire-header .eh-icons a{color:#fff;display:flex;align-items:center;text-decoration:none;transition:color .3s}
.empire-header .eh-icons a:hover{color:var(--em-gold)}
.empire-header .eh-icons svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6}
.empire-header .eh-burger{display:none;background:none;border:0;cursor:pointer;color:#fff}
.empire-header.is-scrolled{background:transparent}
.empire-header.is-scrolled .eh-inner{background:rgba(212,175,55,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);max-width:1020px;margin-top:14px;padding:9px 30px;border-radius:999px;box-shadow:0 8px 30px rgba(0,0,0,.18)}
.empire-header.is-scrolled .eh-logo,.empire-header.is-scrolled .eh-nav a,.empire-header.is-scrolled .eh-icons,.empire-header.is-scrolled .eh-icons a,.empire-header.is-scrolled .eh-burger{color:var(--em-black)}
.empire-header.is-scrolled .eh-logo b{color:var(--em-black)}
.empire-header.is-scrolled .eh-nav a:hover{color:#fff}
@media(max-width:900px){
 .empire-header .eh-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--em-black);flex-direction:column;padding:18px 24px;gap:14px;border-top:1px solid #262626}
 .empire-header .eh-nav.open{display:flex}
 .empire-header.is-scrolled .eh-nav{background:rgba(212,175,55,.98);border-top:1px solid rgba(0,0,0,.08)}
 .empire-header .eh-burger{display:block}
}
/* Hero */
.empire-hero{min-height:88vh;display:flex;align-items:center}
.hero-collage{display:grid;grid-template-columns:3fr 2fr;gap:12px;height:100%;min-height:560px}
.hero-collage .hc-main{position:relative;overflow:hidden}
.hero-collage .hc-main img,.hero-collage .hc-side img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.hero-collage .hc-main:hover img,.hero-collage .hc-side a:hover img{transform:scale(1.05)}
.hero-collage .hc-side{display:grid;grid-template-rows:1fr 1fr;gap:12px}
.hero-collage a{display:block;position:relative;overflow:hidden}
.hero-collage .hc-tag{position:absolute;left:12px;bottom:12px;background:rgba(10,10,10,.75);color:var(--em-offwhite);font-family:var(--em-font-display);font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:6px 12px}
@media(max-width:900px){.hero-collage{grid-template-columns:1fr;min-height:0}.hero-collage .hc-side{grid-template-columns:1fr 1fr;grid-template-rows:none}.hero-collage .hc-side a{aspect-ratio:1/1}}
/* QuickAccess */
.empire-qa{background:var(--em-black)}
.qa-scroll{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:none}
.qa-scroll::-webkit-scrollbar{display:none}
.qa-card{min-width:210px;aspect-ratio:1;position:relative;overflow:hidden;scroll-snap-align:start;background:#111;text-decoration:none;display:block}
.qa-card img{width:100%;height:100%;object-fit:cover;mix-blend-mode:luminosity;opacity:.85;filter:grayscale(1);transition:all .6s}
.qa-card:hover img{opacity:1;filter:grayscale(0);transform:scale(1.06)}
.qa-card span{position:absolute;left:0;right:0;bottom:0;padding:14px;font-family:var(--em-font-display);text-transform:uppercase;letter-spacing:.14em;font-size:15px;color:#fff;background:linear-gradient(to top,rgba(0,0,0,.85),transparent);transition:color .3s}
.qa-card:hover span{color:var(--em-gold)}
@media(max-width:640px){.qa-card{min-width:150px}}
/* Brands */
.empire-brands{background:#FAFAFA;padding:64px 0}
.brands-row{display:flex;flex-wrap:wrap;justify-content:center;gap:28px 48px;align-items:center}
.brands-row span{font-family:var(--em-font-display);font-size:26px;font-weight:600;letter-spacing:.02em;color:var(--em-black);opacity:.55;transition:opacity .4s;text-transform:uppercase}
.brands-row span:hover{opacity:1}
/* Bento Elegidos */
.empire-bento{display:grid;grid-template-columns:2fr 1fr;gap:16px}
.bento-item{position:relative;overflow:hidden}
.bento-item img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.bento-item:hover img{transform:scale(1.06)}
.bento-main{aspect-ratio:4/4.6;position:relative}
.bento-side{display:grid;gap:16px}
.bento-side .bento-item{aspect-ratio:16/10}
.bento-item .bento-badge{position:absolute;top:16px;left:16px;background:#fff;color:var(--em-black);font-family:var(--em-font-display);font-size:10px;letter-spacing:.22em;text-transform:uppercase;padding:7px 14px;z-index:3}
.bento-item .bento-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.1) 55%,rgba(0,0,0,.25) 100%);z-index:2}
.bento-item .bento-meta{position:absolute;left:20px;right:20px;bottom:18px;z-index:4}
.bento-item .bento-meta h3{font-family:var(--em-font-display);text-transform:uppercase;color:#fff;font-size:24px;letter-spacing:.04em;margin:0 0 4px}
.bento-item .bento-meta h3 a{color:#fff;text-decoration:none}
.bento-item .bento-meta h3 a:hover{color:var(--em-gold)}
.bento-item .bento-meta p{margin:0;color:var(--em-gold);font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600}
@media(max-width:900px){.empire-bento{grid-template-columns:1fr}.bento-main{aspect-ratio:4/4.6}.bento-side{grid-template-columns:1fr 1fr}}
/* Productos WooCommerce — FASE 11: cards normalizadas */
.empire-products ul.products{display:grid!important;grid-template-columns:repeat(4,1fr);gap:2rem 1rem;margin:0;padding:0;list-style:none}
.empire-products ul.products::before,.empire-products ul.products::after{content:none!important;display:none!important}
.empire-products li.product{list-style:none;text-align:left;background:#fff;border:1px solid #EDEDED;padding:14px;transition:box-shadow .4s;display:flex;flex-direction:column;width:auto!important;float:none!important;margin:0!important}
.empire-products li.product:hover{box-shadow:0 12px 34px -18px rgba(0,0,0,.35)}
/* Media container: aspect 1:1 + contain (imágenes verticales no estiran la card) */
.empire-products .moto-card__media{position:relative;aspect-ratio:1/1;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#fff;margin:0 0 12px}
.empire-products .moto-card__media img{width:100%;height:100%;object-fit:contain!important;aspect-ratio:1/1;margin:0;border-radius:0}
.empire-products .moto-card__media .onsale,.empire-products .moto-card__media .moto-badge{position:absolute;top:10px;left:10px;z-index:3;margin:0}
.empire-products .moto-card__body{display:flex;flex-direction:column;flex:1}
.empire-products .moto-card__cat{font-family:var(--em-font-display);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--em-gold);font-weight:600;margin:0 0 5px;display:block}
.empire-products .woocommerce-loop-product__title{font-family:var(--em-font-display)!important;font-size:15px!important;letter-spacing:.04em;text-transform:uppercase;color:var(--em-black)!important;margin:0 0 6px;padding:0!important;line-height:1.35;min-height:2.7em;display:block;overflow:visible;-webkit-line-clamp:none;-webkit-box-orient:unset}
.empire-products .price{font-family:var(--em-font-body);font-weight:700;font-size:15px;color:var(--em-black)!important;margin:auto 0 10px}
.empire-products .price del{color:var(--em-gray);font-weight:400;margin-right:6px}
.empire-products .price ins{text-decoration:none}
.empire-products li.product .button{background:var(--em-black)!important;color:#fff!important;font-family:var(--em-font-display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:12px 14px;border-radius:0!important;transition:all .3s;display:block;margin-top:0;width:100%;text-align:center;white-space:nowrap;box-sizing:border-box}
.empire-products li.product .button:hover{background:var(--em-gold)!important;color:var(--em-black)!important}
.empire-products .star-rating{color:var(--em-gold)}
.empire-products .woocommerce-loop-product__link{text-decoration:none;display:flex;flex-direction:column;flex:1}
@media(max-width:1024px){.empire-products ul.products{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.empire-products ul.products{grid-template-columns:repeat(2,1fr);gap:1rem .75rem}}
/* Editorial */
.empire-editorial .elementor-background-overlay{background:linear-gradient(to bottom,rgba(0,0,0,.45),rgba(0,0,0,.65))}
.empire-editorial h2 .gold{color:var(--em-gold)}
/* Promo blend */
.empire-promo .elementor-widget-image img{filter:grayscale(1);mix-blend-mode:luminosity;opacity:.9}
/* Categorías */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cat-card{position:relative;aspect-ratio:3/4;overflow:hidden;display:block;text-decoration:none;background:#111}
.cat-card img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.cat-card:hover img{transform:scale(1.07)}
.cat-card .cat-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.05) 60%)}
.cat-card .cat-label{position:absolute;left:16px;right:16px;bottom:16px;z-index:2}
.cat-card .cat-label b{display:block;font-family:var(--em-font-display);font-size:20px;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.cat-card .cat-label span{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--em-gold);font-weight:600}
.cat-card:hover .cat-label b{color:var(--em-gold)}
@media(max-width:1024px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cat-grid{grid-template-columns:1fr 1fr;gap:10px}}
/* Instagram */
.ig-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.ig-grid a{position:relative;display:block;aspect-ratio:1;overflow:hidden}
.ig-grid img{width:100%;height:100%;object-fit:cover;transition:transform .6s,opacity .6s}
.ig-grid a:hover img{transform:scale(1.08);opacity:.75}
.ig-grid a::after{content:'📷';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:26px;opacity:0;transition:opacity .4s;background:rgba(10,10,10,.35)}
.ig-grid a:hover::after{opacity:1}
@media(max-width:1024px){.ig-grid{grid-template-columns:repeat(3,1fr)}}
/* Footer */
.empire-footer{background:var(--em-black);border-top:2px solid var(--em-gold);color:var(--em-gray)}
.empire-footer h4{font-family:var(--em-font-display);text-transform:uppercase;letter-spacing:.18em;font-size:13px;color:#fff;margin:0 0 16px}
.empire-footer a{color:var(--em-gray);text-decoration:none;font-size:13px;line-height:2;transition:color .3s}
.empire-footer a:hover{color:var(--em-gold)}
.empire-footer ul{list-style:none;margin:0;padding:0}
.empire-footer .ef-brand{font-family:var(--em-font-display);font-size:24px;letter-spacing:.12em;color:#fff;text-transform:uppercase}
.empire-footer .ef-brand b{color:var(--em-gold)}
.empire-footer .ef-tag{color:var(--em-gold);font-size:11px;letter-spacing:.24em;text-transform:uppercase;margin:6px 0 14px}
.empire-footer input[type=email]{width:100%;background:transparent;border:1px solid #333;color:#fff;padding:13px 14px;font-size:13px;margin-bottom:10px;border-radius:0}
.empire-footer input[type=email]::placeholder{color:var(--em-gray-dim)}
.empire-footer .ef-btn{display:inline-block;background:var(--em-gold);color:var(--em-black);font-family:var(--em-font-display);letter-spacing:.2em;text-transform:uppercase;font-size:12px;padding:13px 26px;border:0;cursor:pointer;transition:background .3s}
.empire-footer .ef-btn:hover{background:#fff}
.empire-footer .ef-bottom{border-top:1px solid #1F1F1F;padding-top:20px;margin-top:36px;font-size:12px;color:var(--em-gray-dim)}
.empire-footer .ef-social{display:flex;gap:14px;margin-top:14px}
.empire-footer .ef-social span{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--em-line);color:var(--em-gray);opacity:.6;transition:all .3s}
.empire-footer .ef-social span:hover{border-color:var(--em-gold);color:var(--em-gold);opacity:1}
.empire-footer .ef-social svg{width:16px;height:16px;fill:currentColor}
.empire-footer .ef-news input[type=email]{width:100%;background:transparent;border:1px solid var(--em-line);color:var(--em-white);padding:13px 14px;font-size:13px;margin-bottom:10px;border-radius:0}
.empire-footer .ef-news input[type=email]:disabled{opacity:.55}
.empire-footer .ef-news .ef-btn{opacity:.6;cursor:not-allowed}
@media(max-width:1024px){.empire-footer .ef-grid{grid-template-columns:1fr 1fr!important;gap:32px}}
@media(max-width:560px){.empire-footer .ef-grid{grid-template-columns:1fr!important}}

/* ===== RESPONSIVE: composición por breakpoint (spec §20-21) ===== */
/* Tablet 1024-769 */
@media(max-width:1024px){
 .empire-hero{min-height:0}
 .hero-collage{min-height:0}
 .empire-hero .elementor-heading-title{font-size:clamp(40px,7vw,60px)!important}
 .empire-editorial .elementor-heading-title{font-size:clamp(34px,6vw,48px)!important}
 .empire-promo .elementor-heading-title{font-size:clamp(34px,6vw,52px)!important}
 .bento-main .elementor-heading-title{font-size:26px!important}
 .cat-card .cat-label b{font-size:17px}
 .empire-footer .ef-grid{grid-template-columns:1fr 1fr!important;gap:32px}
 .ig-grid{grid-template-columns:repeat(3,1fr)}
}
/* Mobile 768-561 (tablet vertical grande) */
@media(max-width:768px){
 .empire-products ul.products{grid-template-columns:repeat(2,1fr);gap:1rem .75rem}
 .cat-grid{grid-template-columns:1fr 1fr;gap:10px}
 .cat-card{aspect-ratio:4/5}
 .empire-bento{grid-template-columns:1fr}
 .bento-main{aspect-ratio:4/4.2}
 .bento-side{grid-template-columns:1fr 1fr}
 .qa-card{min-width:150px}
 .hero-collage{grid-template-columns:1fr;min-height:0}
 .hero-collage .hc-side{grid-template-columns:1fr 1fr;grid-template-rows:none}
 .hero-collage .hc-side a{aspect-ratio:1/1}
}
/* Mobile 560-431 */
@media(max-width:560px){
 .empire-hero{padding-top:40px!important;padding-bottom:40px!important}
 .empire-hero .elementor-heading-title{font-size:38px!important;line-height:.95!important}
 .empire-hero .elementor-widget-button .elementor-button{padding:14px 24px;font-size:12px}
 .empire-products ul.products{grid-template-columns:repeat(2,1fr);gap:1rem .75rem}
 .empire-products li.product{padding:10px}
 .empire-products .woocommerce-loop-product__title{font-size:12px!important}
 .empire-products li.product .button{padding:10px 12px;font-size:10px;letter-spacing:.12em;width:100%;text-align:center}
 .cat-grid{grid-template-columns:1fr 1fr;gap:10px}
 .cat-card .cat-label b{font-size:15px;letter-spacing:.06em}
 .cat-card .cat-label span{font-size:9px;letter-spacing:.14em}
 .empire-editorial .elementor-heading-title{font-size:30px!important}
 .empire-promo .elementor-heading-title{font-size:32px!important}
 .ig-grid{grid-template-columns:repeat(3,1fr)}
 .empire-footer .ef-grid{grid-template-columns:1fr!important;gap:28px}
 .ef-grid>div{padding-bottom:10px}
 .empire-marquee{font-size:10px}
 .empire-kicker{font-size:10px;letter-spacing:.22em}
}
/* Mobile 430-376 (composición dedicada) */
@media(max-width:430px){
 .empire-hero .elementor-heading-title{font-size:34px!important}
 .empire-header .eh-logo{font-size:18px}
 .empire-header .eh-nav{width:100%}
 .empire-bento .bento-item .bento-meta h3{font-size:18px}
 .bento-item .bento-badge{top:10px;left:10px;padding:5px 10px;font-size:9px}
 .empire-footer{padding:0}
 .empire-footer h4{font-size:12px}
 .empire-footer a{font-size:12px}
 .cat-card .cat-label{left:10px;right:10px;bottom:10px}
 .elementor-widget-heading .elementor-heading-title{letter-spacing:-.3px}
}
/* Mobile 390-376 */
@media(max-width:390px){
 .empire-hero .elementor-heading-title{font-size:31px!important}
 .empire-products ul.products{grid-template-columns:1fr 1fr;gap:.75rem .5rem}
 .empire-products .price{font-size:13px}
 .qa-scroll{gap:10px}
 .empire-header .eh-inner{padding:12px 16px}
 .hero-collage .hc-side{grid-template-columns:1fr 1fr;gap:8px}
 .empire-footer .ef-grid{gap:24px}
}
/* Mobile 375 (mínimo soportado) */
@media(max-width:375px){
 .empire-hero .elementor-heading-title{font-size:29px!important}
 .empire-hero .elementor-widget-button{width:100%}
 .empire-hero .elementor-widget-button .elementor-button{width:100%;justify-content:center}
 .empire-products ul.products{gap:.6rem .4rem}
 .empire-products li.product{padding:8px}
 .cat-grid{gap:8px}
}
/* Prevenir overflow horizontal global */
html,body{overflow-x:hidden}
img{max-width:100%;height:auto}
