/* ============================================================
   ASTROCOSMICO — Main Stylesheet
   Compatible con Elementor
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@700;800;900&display=swap');

/* ── CSS Variables ── */
:root {
    --astro-primary:          #CAFF33;
    --astro-primary-fg:       #000000;
    --astro-secondary:        #8B5CF6;
    --astro-secondary-fg:     #ffffff;
    --astro-accent:           #06B6D4;
    --astro-bg:               #0A0A0A;
    --astro-bg-card:          #111111;
    --astro-bg-muted:         #1A1A1A;
    --astro-fg:               #F5F5F5;
    --astro-fg-muted:         #9CA3AF;
    --astro-border:           rgba(255,255,255,0.10);
    --astro-font-display:     'Montserrat', sans-serif;
    --astro-font-body:        'Inter', sans-serif;
    --astro-radius:           12px;
    --astro-radius-lg:        20px;
    --astro-radius-xl:        28px;
    --astro-transition:       all 0.3s ease;
    --astro-shadow-glow:      0 0 30px rgba(202, 255, 51, 0.25);
}

/* ── Light Mode ── */
body.light-mode,
.astrocosmico-theme.light-mode {
    --astro-bg:       #FAFAFA;
    --astro-bg-card:  #FFFFFF;
    --astro-bg-muted: #F3F4F6;
    --astro-fg:       #0A0A0A;
    --astro-fg-muted: #6B7280;
    --astro-border:   rgba(0,0,0,0.10);
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family:      var(--astro-font-body);
    background-color: var(--astro-bg);
    color:            var(--astro-fg);
    line-height:      1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; transition: var(--astro-transition); }

/* ── Typography helpers ── */
.font-display      { font-family: var(--astro-font-display); }
.text-primary      { color: var(--astro-primary) !important; }
.text-secondary    { color: var(--astro-secondary) !important; }
.text-accent       { color: var(--astro-accent) !important; }
.text-muted        { color: var(--astro-fg-muted) !important; }
.text-gradient     {
    background: linear-gradient(135deg, var(--astro-secondary), var(--astro-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================================
   ASTRO NAV WIDGET
   ============================================================ */
.astro-nav {
    position:         fixed;
    top:              0;
    left:             0;
    right:            0;
    z-index:          1000;
    background:       rgba(10,10,10,0.92);
    backdrop-filter:  blur(12px);
    border-bottom:    1px solid var(--astro-border);
    padding:          14px 0;
    transition:       var(--astro-transition);
}

body.light-mode .astro-nav {
    background: rgba(250,250,250,0.92);
}

.astro-nav__inner {
    max-width:      1200px;
    margin:         0 auto;
    padding:        0 24px;
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    gap:            24px;
}

.astro-nav__logo {
    font-family:    var(--astro-font-display);
    font-weight:    900;
    font-size:      22px;
    letter-spacing: -0.5px;
    white-space:    nowrap;
}

.astro-nav__logo span { color: var(--astro-primary); }

.astro-nav__links {
    display:     flex;
    align-items: center;
    gap:         8px;
    list-style:  none;
}

.astro-nav__links a {
    padding:       8px 14px;
    border-radius: var(--astro-radius);
    font-weight:   600;
    font-size:     14px;
    color:         var(--astro-fg);
    transition:    var(--astro-transition);
}

.astro-nav__links a:hover {
    color:      var(--astro-primary);
    background: rgba(202,255,51,0.08);
}

.astro-nav__cta {
    background:    var(--astro-primary);
    color:         var(--astro-primary-fg) !important;
    padding:       8px 20px;
    border-radius: 100px;
    font-weight:   700;
    font-size:     14px;
}

.astro-nav__cta:hover {
    background:    rgba(202,255,51,0.85) !important;
    color:         #000 !important;
    transform:     translateY(-1px);
    box-shadow:    var(--astro-shadow-glow);
}

.astro-nav__actions {
    display:     flex;
    align-items: center;
    gap:         8px;
}

.astro-nav__btn {
    background:    none;
    border:        none;
    cursor:        pointer;
    color:         var(--astro-fg);
    padding:       8px;
    border-radius: 50%;
    width:         38px;
    height:        38px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    var(--astro-transition);
    position:      relative;
    font-size:     16px;
}

.astro-nav__btn:hover {
    background: rgba(202,255,51,0.10);
    color:      var(--astro-primary);
}

.astro-nav__cart-count {
    position:         absolute;
    top:              2px;
    right:            2px;
    background:       var(--astro-primary);
    color:            #000;
    font-size:        9px;
    font-weight:      900;
    width:            16px;
    height:           16px;
    border-radius:    50%;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    line-height:      1;
}

.astro-nav__hamburger {
    display: none;
}

.astro-nav__mobile-menu {
    display:          none;
    position:         fixed;
    inset:            0;
    background:       var(--astro-bg);
    z-index:          999;
    flex-direction:   column;
    align-items:      center;
    justify-content:  center;
    gap:              28px;
}

.astro-nav__mobile-menu.is-open {
    display: flex;
}

.astro-nav__mobile-menu a {
    font-family:    var(--astro-font-display);
    font-weight:    900;
    font-size:      28px;
    color:          var(--astro-fg);
    transition:     var(--astro-transition);
}

.astro-nav__mobile-menu a:hover {
    color: var(--astro-primary);
}

@media (max-width: 768px) {
    .astro-nav__links { display: none; }
    .astro-nav__hamburger { display: flex; }
}

/* ============================================================
   ASTRO HERO WIDGET
   ============================================================ */
.astro-hero {
    min-height:        100vh;
    display:           flex;
    align-items:       center;
    justify-content:   center;
    position:          relative;
    overflow:          hidden;
    padding:           120px 24px 80px;
    background-color: transparent
}

.astro-hero__bg {
    position:   absolute;
    object-fit: cover;
    width:      100%;
    height:     100%;
    opacity:    0.35;
}

.astro-hero__overlay {
    position:   absolute;
    background: transparent;
}

.astro-hero__content {
    position:   relative;
    z-index:    2;
    text-align: center;
    max-width:  900px;
    margin:     0 auto;
}

.astro-hero__tag {
    display:          inline-block;
    font-size:        11px;
    font-weight:      700;
    letter-spacing:   3px;
    text-transform:   uppercase;
    color:            var(--astro-primary);
    background:       rgba(202,255,51,0.12);
    padding:          6px 16px;
    border-radius:    100px;
    margin-bottom:    24px;
    border:           1px solid rgba(202,255,51,0.25);
}

.astro-hero__title {
    font-family:    var(--astro-font-display);
    font-weight:    900;
    font-size:      clamp(48px, 8vw, 96px);
    line-height:    0.95;
    letter-spacing: -2px;
    margin-bottom:  24px;
    text-transform: uppercase;
}

.astro-hero__title .line-1 { color: var(--astro-fg); }
.astro-hero__title .line-2 { color: var(--astro-secondary); }
.astro-hero__title .line-3 {
    background: linear-gradient(90deg, var(--astro-secondary), var(--astro-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.astro-hero__subtitle {
    font-size:     18px;
    color:         var(--astro-fg-muted);
    max-width:     600px;
    margin:        0 auto 40px;
    line-height:   1.7;
}

.astro-hero__actions {
    display:     flex;
    gap:         16px;
    justify-content: center;
    flex-wrap:   wrap;
}

/* ── Buttons ── */
.astro-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    padding:         14px 32px;
    border-radius:   100px;
    font-weight:     700;
    font-size:       15px;
    cursor:          pointer;
    border:          2px solid transparent;
    transition:      var(--astro-transition);
    text-decoration: none;
    white-space:     nowrap;
}

.astro-btn--primary {
    background: var(--astro-primary);
    color:      var(--astro-primary-fg);
}

.astro-btn--primary:hover {
    transform:   translateY(-2px);
    box-shadow:  var(--astro-shadow-glow);
}

.astro-btn--outline {
    background:    transparent;
    color:         var(--astro-fg);
    border-color:  var(--astro-fg);
}

.astro-btn--outline:hover {
    background:    var(--astro-fg);
    color:         var(--astro-bg);
    transform:     translateY(-2px);
}

.astro-btn--secondary {
    background: var(--astro-secondary);
    color:      #fff;
}

.astro-btn--secondary:hover {
    background:   rgba(139,92,246,0.85);
    transform:    translateY(-2px);
}

/* ── Section Base ── */
.astro-section {
    padding:    80px 24px;
    position:   relative;
    overflow:   hidden;
}

.astro-section__inner {
    max-width: 1200px;
    margin:    0 auto;
}

.astro-section__header {
    text-align:    center;
    margin-bottom: 64px;
}

.astro-section__tag {
    display:       inline-block;
    font-size:     11px;
    font-weight:   700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color:         var(--astro-primary);
    background:    rgba(202,255,51,0.10);
    padding:       6px 16px;
    border-radius: 100px;
    margin-bottom: 16px;
    border:        1px solid rgba(202,255,51,0.20);
}

.astro-section__title {
    font-family:    var(--astro-font-display);
    font-weight:    900;
    font-size:      clamp(32px, 5vw, 56px);
    line-height:    1.05;
    letter-spacing: -1px;
    margin-bottom:  16px;
}

.astro-section__subtitle {
    font-size:  17px;
    color:      var(--astro-fg-muted);
    max-width:  600px;
    margin:     0 auto;
    line-height: 1.7;
}

/* ============================================================
   SERVICES WIDGET
   ============================================================ */
.astro-services__grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap:                   24px;
}

.astro-service-card {
    background:    var(--astro-bg-card);
    border:        1px solid var(--astro-border);
    border-radius: var(--astro-radius-lg);
    padding:       32px;
    transition:    var(--astro-transition);
    position:      relative;
    overflow:      hidden;
}

.astro-service-card::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(135deg, var(--astro-primary) 0%, transparent 100%);
    opacity:    0;
    transition: var(--astro-transition);
    border-radius: inherit;
}

.astro-service-card:hover {
    border-color: var(--astro-primary);
    transform:    translateY(-4px);
    box-shadow:   0 20px 60px rgba(0,0,0,0.3);
}

.astro-service-card:hover::before {
    opacity: 0.04;
}

.astro-service-card__icon {
    width:         52px;
    height:        52px;
    background:    rgba(202,255,51,0.12);
    border-radius: var(--astro-radius);
    display:       flex;
    align-items:   center;
    justify-content: center;
    margin-bottom: 20px;
    font-size:     22px;
    transition:    var(--astro-transition);
}

.astro-service-card:hover .astro-service-card__icon {
    background:  rgba(202,255,51,0.25);
    transform:   scale(1.1);
}

.astro-service-card__tag {
    font-size:     10px;
    font-weight:   700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color:         var(--astro-fg-muted);
    margin-bottom: 8px;
}

.astro-service-card__title {
    font-family:   var(--astro-font-display);
    font-weight:   700;
    font-size:     20px;
    margin-bottom: 12px;
    color:         var(--astro-fg);
    line-height:   1.2;
}

.astro-service-card__desc {
    font-size:  14px;
    color:      var(--astro-fg-muted);
    line-height: 1.7;
}

/* ============================================================
   PROJECTS WIDGET
   ============================================================ */
.astro-projects__filters {
    display:         flex;
    gap:             8px;
    flex-wrap:       wrap;
    justify-content: center;
    margin-bottom:   40px;
}

.astro-filter-btn {
    background:    var(--astro-bg-card);
    color:         var(--astro-fg-muted);
    border:        1px solid var(--astro-border);
    border-radius: 100px;
    padding:       8px 20px;
    font-size:     13px;
    font-weight:   600;
    cursor:        pointer;
    transition:    var(--astro-transition);
}

.astro-filter-btn:hover,
.astro-filter-btn.active {
    background:    var(--astro-fg);
    color:         var(--astro-bg);
    border-color:  var(--astro-fg);
}

.astro-projects__grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap:                   20px;
}

.astro-project-card {
    border-radius:   var(--astro-radius-lg);
    overflow:        hidden;
    border:          1px solid var(--astro-border);
    background:      var(--astro-bg-card);
    transition:      var(--astro-transition);
    cursor:          pointer;
}

.astro-project-card:hover {
    transform:   translateY(-6px);
    box-shadow:  0 24px 60px rgba(0,0,0,0.4);
    border-color: rgba(202,255,51,0.3);
}

.astro-project-card__img {
    aspect-ratio: 1;
    overflow:     hidden;
    position:     relative;
}

.astro-project-card__img img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.astro-project-card:hover .astro-project-card__img img {
    transform: scale(1.08);
}

.astro-project-card__overlay {
    position:      absolute;
    inset:         0;
    background:    linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.1), transparent);
    opacity:       0;
    transition:    var(--astro-transition);
    display:       flex;
    flex-direction: column;
    justify-content: flex-end;
    padding:       20px;
}

.astro-project-card:hover .astro-project-card__overlay {
    opacity: 1;
}

.astro-project-card__body {
    padding: 16px;
}

.astro-project-card__cat {
    display:        inline-block;
    font-size:      11px;
    font-weight:    700;
    padding:        4px 12px;
    border-radius:  100px;
    margin-bottom:  8px;
    background:     rgba(202,255,51,0.15);
    color:          var(--astro-primary);
}

.astro-project-card__title {
    font-family:  var(--astro-font-display);
    font-weight:  700;
    font-size:    14px;
    color:        var(--astro-fg);
    line-height:  1.3;
}

.astro-project-card__client {
    font-size:  12px;
    color:      var(--astro-fg-muted);
    margin-top: 4px;
}

/* ============================================================
   STORE WIDGET
   ============================================================ */
.astro-store__filters {
    display:         flex;
    gap:             8px;
    flex-wrap:       wrap;
    justify-content: center;
    margin-bottom:   40px;
}

.astro-store__grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap:                   24px;
}

.astro-product-card {
    background:    var(--astro-bg-card);
    border:        1px solid var(--astro-border);
    border-radius: var(--astro-radius-xl);
    overflow:      hidden;
    display:       flex;
    flex-direction: column;
    transition:    var(--astro-transition);
}

.astro-product-card:hover {
    border-color: rgba(202,255,51,0.3);
    transform:    translateY(-4px);
    box-shadow:   0 20px 50px rgba(0,0,0,0.3);
}

.astro-product-card__img {
    aspect-ratio: 1;
    overflow:     hidden;
    position:     relative;
}

.astro-product-card__img img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.astro-product-card:hover .astro-product-card__img img {
    transform: scale(1.05);
}

.astro-product-card__badge {
    position:      absolute;
    top:           12px;
    left:          12px;
    font-size:     10px;
    font-weight:   700;
    padding:       4px 10px;
    border-radius: 100px;
}

.astro-product-card__badge--new {
    background: var(--astro-primary);
    color:      var(--astro-primary-fg);
}

.astro-product-card__badge--hot {
    background: var(--astro-secondary);
    color:      #fff;
}

.astro-product-card__body {
    padding:        20px;
    display:        flex;
    flex-direction: column;
    flex:           1;
    gap:            8px;
}

.astro-product-card__stars {
    display:    flex;
    align-items: center;
    gap:         4px;
    font-size:  12px;
    color:      #FBBF24;
}

.astro-product-card__name {
    font-family:  var(--astro-font-display);
    font-weight:  700;
    font-size:    15px;
    line-height:  1.3;
    color:        var(--astro-fg);
    flex:         1;
}

.astro-product-card__price {
    font-family:  var(--astro-font-display);
    font-weight:  900;
    font-size:    20px;
    color:        var(--astro-primary);
}

.astro-product-card__price span {
    font-size:   12px;
    font-weight: 400;
    color:       var(--astro-fg-muted);
}

.astro-add-to-cart {
    width:         100%;
    padding:       10px 16px;
    border-radius: 100px;
    border:        none;
    font-weight:   700;
    font-size:     13px;
    cursor:        pointer;
    transition:    var(--astro-transition);
    display:       flex;
    align-items:   center;
    justify-content: center;
    gap:           8px;
    background:    var(--astro-fg);
    color:         var(--astro-bg);
    margin-top:    auto;
}

.astro-add-to-cart:hover,
.astro-add-to-cart.added {
    background:  var(--astro-primary);
    color:       var(--astro-primary-fg);
    box-shadow:  var(--astro-shadow-glow);
}

/* ============================================================
   ABOUT / STATS WIDGET
   ============================================================ */
.astro-stats__grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap:                   24px;
    margin-bottom:         64px;
}

.astro-stat {
    background:    var(--astro-bg-card);
    border:        1px solid var(--astro-border);
    border-radius: var(--astro-radius-lg);
    padding:       32px 24px;
    text-align:    center;
    transition:    var(--astro-transition);
}

.astro-stat:hover {
    border-color: rgba(202,255,51,0.3);
    transform:    translateY(-4px);
}

.astro-stat__icon {
    font-size:     28px;
    margin-bottom: 12px;
}

.astro-stat__value {
    font-family:    var(--astro-font-display);
    font-weight:    900;
    font-size:      48px;
    line-height:    1;
    margin-bottom:  8px;
}

.astro-stat__label {
    font-size:  14px;
    color:      var(--astro-fg-muted);
}

.astro-skills__title {
    font-family:   var(--astro-font-display);
    font-weight:   900;
    font-size:     28px;
    margin-bottom: 32px;
    text-align:    center;
}

.astro-skill {
    margin-bottom: 20px;
}

.astro-skill__header {
    display:         flex;
    justify-content: space-between;
    margin-bottom:   8px;
    font-size:       14px;
    font-weight:     600;
}

.astro-skill__bar {
    height:        8px;
    background:    var(--astro-bg-muted);
    border-radius: 100px;
    overflow:      hidden;
}

.astro-skill__fill {
    height:           100%;
    border-radius:    100px;
    background:       linear-gradient(90deg, var(--astro-secondary), var(--astro-primary));
    width:            0;
    transition:       width 1.2s ease;
}

.astro-values__grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap:                   24px;
    margin-top:            48px;
}

.astro-value-card {
    background:    linear-gradient(135deg, rgba(202,255,51,0.06), rgba(139,92,246,0.06));
    border:        1px solid rgba(202,255,51,0.15);
    border-radius: var(--astro-radius-lg);
    padding:       28px;
}

.astro-value-card__title {
    font-family:   var(--astro-font-display);
    font-weight:   700;
    font-size:     18px;
    margin-bottom: 12px;
    color:         var(--astro-fg);
}

.astro-value-card__desc {
    font-size:   14px;
    color:       var(--astro-fg-muted);
    line-height: 1.7;
}

/* ============================================================
   MOCKUP GENERATOR WIDGET
   ============================================================ */
.astro-mockup {
    background: var(--astro-bg);
    min-height: 100vh;
    padding:    120px 24px 80px;
}

.astro-mockup__inner {
    max-width: 1200px;
    margin:    0 auto;
}

.astro-mockup__header {
    text-align:    center;
    margin-bottom: 60px;
}

/* Stepper */
.astro-stepper {
    display:         flex;
    align-items:     flex-start;
    justify-content: center;
    gap:             0;
    margin-bottom:   48px;
    position:        relative;
    max-width:       600px;
    margin-left:     auto;
    margin-right:    auto;
}

.astro-stepper__line {
    position:   absolute;
    top:        24px;
    left:       calc(50% / 3 + 24px);
    right:      calc(50% / 3 + 24px);
    height:     2px;
    background: var(--astro-bg-muted);
    z-index:    0;
}

.astro-stepper__line-fill {
    height:     100%;
    background: var(--astro-primary);
    width:      0%;
    transition: width 0.5s ease;
}

.astro-stepper__step {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            10px;
    flex:           1;
    position:       relative;
    z-index:        1;
}

.astro-stepper__circle {
    width:            48px;
    height:           48px;
    border-radius:    50%;
    background:       var(--astro-bg-muted);
    color:            var(--astro-fg-muted);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    font-weight:      700;
    font-size:        18px;
    border:           3px solid var(--astro-bg);
    transition:       var(--astro-transition);
}

.astro-stepper__step.active .astro-stepper__circle {
    background: var(--astro-primary);
    color:      var(--astro-primary-fg);
    box-shadow: 0 0 20px rgba(202,255,51,0.5);
}

.astro-stepper__step.done .astro-stepper__circle {
    background: var(--astro-primary);
    color:      var(--astro-primary-fg);
}

.astro-stepper__label {
    font-size:   11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color:       var(--astro-fg-muted);
}

.astro-stepper__step.active .astro-stepper__label,
.astro-stepper__step.done .astro-stepper__label {
    color: var(--astro-fg);
}

/* Product picker */
.astro-picker__filters {
    display:         flex;
    gap:             8px;
    justify-content: center;
    flex-wrap:       wrap;
    margin-bottom:   32px;
}

.astro-picker__grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap:                   16px;
}

.astro-picker-card {
    background:    var(--astro-bg-card);
    border:        2px solid var(--astro-border);
    border-radius: var(--astro-radius-lg);
    overflow:      hidden;
    cursor:        pointer;
    transition:    var(--astro-transition);
}

.astro-picker-card:hover {
    border-color: rgba(202,255,51,0.5);
    transform:    translateY(-3px);
    box-shadow:   0 12px 40px rgba(0,0,0,0.3);
}

.astro-picker-card.selected {
    border-color: var(--astro-primary);
    box-shadow:   0 0 20px rgba(202,255,51,0.25);
}

.astro-picker-card__img {
    aspect-ratio: 1;
    overflow:     hidden;
    position:     relative;
}

.astro-picker-card__img img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.astro-picker-card:hover .astro-picker-card__img img {
    transform: scale(1.07);
}

.astro-picker-card__views {
    position:      absolute;
    bottom:        8px;
    right:         8px;
    background:    rgba(0,0,0,0.75);
    color:         #fff;
    font-size:     10px;
    font-weight:   700;
    padding:       3px 8px;
    border-radius: 100px;
    backdrop-filter: blur(4px);
}

.astro-picker-card__body {
    padding:    12px;
    text-align: center;
}

.astro-picker-card__type {
    font-size:     9px;
    font-weight:   700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color:         var(--astro-fg-muted);
    margin-bottom: 4px;
}

.astro-picker-card__name {
    font-weight:  700;
    font-size:    13px;
    color:        var(--astro-fg);
    line-height:  1.2;
    margin-bottom: 4px;
}

.astro-picker-card__price {
    font-family:  var(--astro-font-display);
    font-weight:  900;
    font-size:    15px;
    color:        var(--astro-primary);
}

/* Design step */
.astro-design-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap:     32px;
    align-items: start;
}

@media (max-width: 1024px) {
    .astro-design-grid { grid-template-columns: 1fr; }
}

.astro-preview-area {
    background:    var(--astro-bg-muted);
    border-radius: var(--astro-radius-xl);
    padding:       24px;
    border:        1px solid var(--astro-border);
}

.astro-preview-box {
    aspect-ratio:   1;
    background:     var(--astro-bg-card);
    border-radius:  var(--astro-radius-lg);
    overflow:       hidden;
    position:       relative;
    box-shadow:     0 20px 60px rgba(0,0,0,0.4);
}

.astro-preview-box__bg { width: 100%; height: 100%; object-fit: cover; }

.astro-preview-box__design {
    position: absolute;
    inset:    0;
    pointer-events: none;
}

.astro-preview-box__design img {
    position:   absolute;
    max-width:  none;
    origin:     center;
}

.astro-view-tabs {
    display:    flex;
    gap:        8px;
    flex-wrap:  wrap;
    margin-top: 16px;
}

.astro-view-tab {
    padding:       7px 16px;
    border:        1px solid var(--astro-border);
    border-radius: var(--astro-radius);
    font-size:     12px;
    font-weight:   600;
    cursor:        pointer;
    color:         var(--astro-fg-muted);
    background:    transparent;
    transition:    var(--astro-transition);
}

.astro-view-tab:hover { border-color: var(--astro-primary); color: var(--astro-fg); }

.astro-view-tab.active {
    background:  var(--astro-primary);
    color:       var(--astro-primary-fg);
    border-color: var(--astro-primary);
    box-shadow:  0 0 12px rgba(202,255,51,0.3);
}

/* Controls panel */
.astro-controls {
    background:    var(--astro-bg-card);
    border:        1px solid var(--astro-border);
    border-radius: var(--astro-radius-xl);
    padding:       24px;
    position:      sticky;
    top:           100px;
}

.astro-upload-zone {
    border:        2px dashed var(--astro-border);
    border-radius: var(--astro-radius-lg);
    padding:       40px 24px;
    text-align:    center;
    cursor:        pointer;
    transition:    var(--astro-transition);
}

.astro-upload-zone:hover {
    border-color: var(--astro-primary);
    background:   rgba(202,255,51,0.03);
}

.astro-upload-zone input[type="file"] {
    display: none;
}

.astro-upload-zone__icon {
    width:         64px;
    height:        64px;
    background:    rgba(202,255,51,0.10);
    border-radius: var(--astro-radius-lg);
    display:       flex;
    align-items:   center;
    justify-content: center;
    margin:        0 auto 16px;
    font-size:     26px;
    transition:    var(--astro-transition);
}

.astro-upload-zone:hover .astro-upload-zone__icon {
    transform:  scale(1.1);
    background: rgba(202,255,51,0.2);
}

.astro-upload-zone__title {
    font-weight:   700;
    font-size:     16px;
    margin-bottom: 8px;
}

.astro-upload-zone__sub {
    font-size:  13px;
    color:      var(--astro-fg-muted);
}

.astro-control-group {
    margin-bottom: 20px;
}

.astro-control-group label {
    display:         flex;
    justify-content: space-between;
    font-size:       13px;
    font-weight:     600;
    margin-bottom:   8px;
    color:           var(--astro-fg);
}

.astro-control-group label span {
    color:       var(--astro-fg-muted);
    font-family: monospace;
    font-weight: 400;
}

.astro-range {
    -webkit-appearance: none;
    width:        100%;
    height:       4px;
    background:   var(--astro-bg-muted);
    border-radius: 100px;
    outline:      none;
}

.astro-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width:             18px;
    height:            18px;
    border-radius:     50%;
    background:        var(--astro-primary);
    cursor:            pointer;
    border:            3px solid var(--astro-bg);
    box-shadow:        0 0 8px rgba(202,255,51,0.5);
}

.astro-select {
    width:         100%;
    background:    var(--astro-bg-muted);
    color:         var(--astro-fg);
    border:        1px solid var(--astro-border);
    border-radius: var(--astro-radius);
    padding:       8px 12px;
    font-size:     13px;
    outline:       none;
    cursor:        pointer;
}

.astro-flip-row {
    display: flex;
    gap:     8px;
}

.astro-flip-btn {
    flex:          1;
    padding:       8px;
    background:    var(--astro-bg-muted);
    border:        1px solid var(--astro-border);
    border-radius: var(--astro-radius);
    color:         var(--astro-fg-muted);
    font-size:     12px;
    font-weight:   600;
    cursor:        pointer;
    transition:    var(--astro-transition);
    display:       flex;
    align-items:   center;
    justify-content: center;
    gap:           4px;
}

.astro-flip-btn.active,
.astro-flip-btn:hover {
    background:  var(--astro-primary);
    color:       var(--astro-primary-fg);
    border-color: var(--astro-primary);
}

/* Result step */
.astro-result {
    max-width:     700px;
    margin:        0 auto;
    background:    var(--astro-bg-card);
    border:        1px solid var(--astro-border);
    border-radius: var(--astro-radius-xl);
    padding:       48px;
    text-align:    center;
}

.astro-result__img {
    aspect-ratio:  1;
    max-width:     400px;
    margin:        0 auto 32px;
    border-radius: var(--astro-radius-lg);
    overflow:      hidden;
    box-shadow:    0 20px 60px rgba(0,0,0,0.5);
    border:        1px solid var(--astro-border);
}

.astro-result__img img { width: 100%; height: 100%; object-fit: cover; }

.astro-result__title {
    font-family:   var(--astro-font-display);
    font-weight:   900;
    font-size:     28px;
    margin-bottom: 8px;
}

.astro-result__sub {
    color:         var(--astro-fg-muted);
    margin-bottom: 32px;
}

.astro-result__actions {
    display:         flex;
    gap:             12px;
    justify-content: center;
    flex-wrap:       wrap;
}

.astro-result__view-tabs {
    display:         flex;
    gap:             8px;
    justify-content: center;
    flex-wrap:       wrap;
    margin-bottom:   24px;
}

/* ============================================================
   FOOTER WIDGET
   ============================================================ */
.astro-footer {
    background:    var(--astro-bg-card);
    border-top:    1px solid var(--astro-border);
    padding:       64px 24px 32px;
}

.astro-footer__inner {
    max-width: 1200px;
    margin:    0 auto;
}

.astro-footer__top {
    display:               grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap:                   48px;
    margin-bottom:         48px;
}

.astro-footer__logo {
    font-family:    var(--astro-font-display);
    font-weight:    900;
    font-size:      24px;
    margin-bottom:  16px;
}

.astro-footer__logo span { color: var(--astro-primary); }

.astro-footer__desc {
    font-size:   14px;
    color:       var(--astro-fg-muted);
    line-height: 1.7;
    margin-bottom: 20px;
}

.astro-footer__social {
    display: flex;
    gap:     12px;
}

.astro-footer__social a {
    width:         36px;
    height:        36px;
    background:    var(--astro-bg-muted);
    border-radius: var(--astro-radius);
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     16px;
    transition:    var(--astro-transition);
}

.astro-footer__social a:hover {
    background: var(--astro-primary);
    color:      var(--astro-primary-fg);
}

.astro-footer__col-title {
    font-family:   var(--astro-font-display);
    font-weight:   700;
    font-size:     14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    color:         var(--astro-fg);
}

.astro-footer__col ul {
    list-style: none;
    display:    flex;
    flex-direction: column;
    gap:        10px;
}

.astro-footer__col ul li a {
    font-size:   14px;
    color:       var(--astro-fg-muted);
    transition:  var(--astro-transition);
}

.astro-footer__col ul li a:hover { color: var(--astro-primary); }

.astro-footer__bottom {
    border-top:    1px solid var(--astro-border);
    padding-top:   24px;
    display:       flex;
    justify-content: space-between;
    align-items:   center;
    flex-wrap:     wrap;
    gap:           12px;
}

.astro-footer__copy {
    font-size:  13px;
    color:      var(--astro-fg-muted);
}

/* ── Cart Sidebar ── */
.astro-cart-sidebar {
    position:   fixed;
    top:        0;
    right:      -420px;
    width:      420px;
    height:     100vh;
    background: var(--astro-bg-card);
    border-left: 1px solid var(--astro-border);
    z-index:    2000;
    transition: right 0.4s cubic-bezier(0.4,0,0.2,1);
    display:    flex;
    flex-direction: column;
    padding:    0;
    box-shadow: -20px 0 60px rgba(0,0,0,0.4);
}

.astro-cart-sidebar.open { right: 0; }

.astro-cart-backdrop {
    display:    none;
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,0.6);
    z-index:    1999;
    backdrop-filter: blur(4px);
}

.astro-cart-backdrop.open { display: block; }

.astro-cart-sidebar__header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         24px;
    border-bottom:   1px solid var(--astro-border);
}

.astro-cart-sidebar__title {
    font-family: var(--astro-font-display);
    font-weight: 900;
    font-size:   20px;
}

.astro-cart-sidebar__close {
    background: none;
    border:     none;
    color:      var(--astro-fg);
    cursor:     pointer;
    font-size:  22px;
    padding:    4px;
    transition: var(--astro-transition);
}

.astro-cart-sidebar__close:hover { color: var(--astro-primary); }

.astro-cart-sidebar__items {
    flex:       1;
    overflow-y: auto;
    padding:    16px 24px;
    display:    flex;
    flex-direction: column;
    gap:        12px;
}

.astro-cart-item {
    display:       flex;
    gap:           12px;
    align-items:   center;
    background:    var(--astro-bg-muted);
    border-radius: var(--astro-radius);
    padding:       12px;
}

.astro-cart-item__img {
    width:         60px;
    height:        60px;
    border-radius: var(--astro-radius);
    overflow:      hidden;
    flex-shrink:   0;
}

.astro-cart-item__img img { width: 100%; height: 100%; object-fit: cover; }

.astro-cart-item__info { flex: 1; }

.astro-cart-item__name {
    font-weight:  600;
    font-size:    13px;
    margin-bottom: 4px;
}

.astro-cart-item__price {
    font-weight:  900;
    font-size:    15px;
    color:        var(--astro-primary);
}

.astro-cart-item__remove {
    background: none;
    border:     none;
    color:      var(--astro-fg-muted);
    cursor:     pointer;
    font-size:  16px;
    transition: var(--astro-transition);
}

.astro-cart-item__remove:hover { color: #EF4444; }

.astro-cart-empty {
    text-align:  center;
    padding:     60px 20px;
    color:       var(--astro-fg-muted);
    font-size:   15px;
}

.astro-cart-empty__icon { font-size: 48px; margin-bottom: 16px; }

.astro-cart-sidebar__footer {
    padding:    20px 24px;
    border-top: 1px solid var(--astro-border);
}

.astro-cart-total {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-bottom:   16px;
    font-size:       16px;
    font-weight:     600;
}

.astro-cart-total__amount {
    font-family:  var(--astro-font-display);
    font-weight:  900;
    font-size:    24px;
    color:        var(--astro-primary);
}

/* ── Animations ── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.astro-fade-in {
    opacity:   0;
    transform: translateY(20px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.astro-fade-in.visible {
    opacity:   1;
    transform: none;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .astro-section { padding: 60px 16px; }
    .astro-footer__top { grid-template-columns: 1fr 1fr; }
    .astro-cart-sidebar { width: 100%; right: -100%; }
    .astro-result { padding: 32px 20px; }
}

@media (max-width: 480px) {
    .astro-footer__top { grid-template-columns: 1fr; }
    .astro-hero__title { font-size: 42px; }
}

/* ============================================================
   HEADER / FOOTER NATIVOS (sin Elementor)
   ============================================================ */

/* Skip link accesibilidad */
.astro-skip-link {
    position:   absolute;
    top:        -100%;
    left:       16px;
    background: var(--astro-primary);
    color:      var(--astro-primary-fg);
    font-weight: 700;
    padding:    8px 16px;
    border-radius: var(--astro-radius);
    z-index:    9999;
    transition: top 0.2s;
}
.astro-skip-link:focus { top: 8px; }

/* Nav desktop wrapper */
.astro-nav__desktop { display: flex; align-items: center; }

/* WordPress nav menu overrides */
.astro-nav__links.menu,
.astro-nav__links {
    display:     flex;
    align-items: center;
    gap:         4px;
    list-style:  none;
    margin:      0;
    padding:     0;
}
.astro-nav__links .menu-item a,
.astro-nav__links li a {
    padding:       8px 14px;
    border-radius: var(--astro-radius);
    font-weight:   600;
    font-size:     14px;
    color:         var(--astro-fg);
    transition:    var(--astro-transition);
    display:       block;
}
.astro-nav__links .menu-item a:hover,
.astro-nav__links li a:hover {
    color:      var(--astro-primary);
    background: rgba(202,255,51,0.08);
}
/* Sub-menus */
.astro-nav__links .sub-menu {
    display:       none;
    position:      absolute;
    top:           100%;
    left:          0;
    min-width:     180px;
    background:    var(--astro-bg-card);
    border:        1px solid var(--astro-border);
    border-radius: var(--astro-radius);
    padding:       8px;
    flex-direction: column;
    gap:           2px;
}
.astro-nav__links .menu-item:hover > .sub-menu { display: flex; }

/* Mobile links */
.astro-mobile-links {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            8px;
    width:          100%;
    padding:        80px 24px 40px;
}
.astro-mobile-links a,
.astro-nav__mobile-menu .menu-item a {
    font-family:    var(--astro-font-display);
    font-weight:    900;
    font-size:      26px;
    color:          var(--astro-fg);
    padding:        12px 24px;
    border-radius:  var(--astro-radius);
    width:          100%;
    text-align:     center;
    transition:     var(--astro-transition);
}
.astro-mobile-links a:hover,
.astro-nav__mobile-menu .menu-item a:hover { color: var(--astro-primary); }
.astro-nav__mobile-menu .menu { list-style: none; padding: 0; margin: 0; }

/* Footer brand section */
.astro-footer__brand { display: flex; flex-direction: column; }
.astro-footer__made {
    font-size:  13px;
    color:      var(--astro-fg-muted);
}
.astro-footer__made span {
    color:       var(--astro-primary);
    font-weight: 700;
}
.astro-footer__nav { list-style: none; padding: 0; margin-top: 8px; }
.astro-footer__nav li a {
    font-size:  13px;
    color:      var(--astro-fg-muted);
    transition: var(--astro-transition);
}
.astro-footer__nav li a:hover { color: var(--astro-primary); }

/* Page template: Full width (sin sidebar) */
.full-width-template .entry-content { max-width: 100%; }

/* #main-content padding for fixed nav */
#main-content { padding-top: 72px; }
.elementor-page #main-content { padding-top: 0; }

/* Elementor full-page removes top padding */
.elementor-full-page #main-content { padding-top: 0 !important; }

/* Scrolled nav */
.astro-nav.scrolled {
    background: rgba(10,10,10,0.97) !important;
    box-shadow: 0 4px 30px rgba(0,0,0,0.4);
}
body.light-mode .astro-nav.scrolled {
    background: rgba(250,250,250,0.97) !important;
}

@media (max-width: 768px) {
    .astro-nav__desktop { display: none; }
    .astro-footer__top  { grid-template-columns: 1fr; gap: 32px; }
    #main-content { padding-top: 70px; }
}