/* --- GOOGLE FONTS --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Orbitron:wght@700;800&display=swap');

/* --- VARIABLES & BASE --- */
:root {
    --home-bg-dark: #0B0C10;
    --home-bg-mid: #151720;
    --home-text: #E9ECF1;
    --home-soft: #A8AFBF;
    --home-ion: #57B9FF;
    --home-violet: #8B5CF6;
    --home-air1: #EDEEF3;

    --font-orbitron: 'Orbitron', sans-serif;
    --font-inter: 'Inter', sans-serif;

    --spacing-xs: 4px;
    --spacing-s: 8px;
    --spacing-m: 16px;
    --spacing-l: 24px;
    --spacing-xl: 48px;
    --spacing-xxl: 96px;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.home-body {
    background-color: var(--home-bg-dark);
    color: var(--home-text);
    font-family: var(--font-inter);
    line-height: 1.8; /* Aumentado de 1.6 a 1.8 */
    font-size: 19.2px; /* Aumentado de 16px a 19.2px (16 * 1.2) */
}

/* --- LAYOUT & CONTAINERS --- */
.home-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 calc(var(--spacing-l) * 1.2);
}

.home-section {
    padding: calc(var(--spacing-xxl) * 1.2) 0;
}

/* --- TYPOGRAPHY & BASE CLASSES --- */
.home-title {
    font-family: var(--font-orbitron);
    font-size: clamp(3rem, 5vw, 4.8rem); /* Aumentado de 2.5-4rem a 3-4.8rem */
    font-weight: 800;
    line-height: 1.2; /* Aumentado de 1.1 a 1.2 */
    color: var(--home-text);
    margin-bottom: calc(var(--spacing-m) * 1.3);
}

.home-subtitle {
    font-size: clamp(1.2rem, 2vw, 1.5rem); /* Aumentado de 1-1.25rem a 1.2-1.5rem */
    color: var(--home-soft);
    max-width: 60ch;
    margin: 0 auto;
    line-height: 1.8;
}

.home-section-title {
    font-family: var(--font-orbitron);
    font-size: clamp(2.4rem, 4vw, 3.36rem); /* Aumentado de 2-2.8rem a 2.4-3.36rem */
    font-weight: 700;
    text-align: center;
    margin-bottom: calc(var(--spacing-m) * 1.3);
}

.home-section-subtitle {
    font-size: 1.32rem; /* Aumentado de 1.1rem a 1.32rem */
    color: var(--home-soft);
    text-align: center;
    max-width: 60ch;
    margin: 0 auto calc(var(--spacing-xl) * 1.2);
    line-height: 1.8;
}

.home-text {
    color: var(--home-soft);
    line-height: 1.9; /* Aumentado de 1.7 a 1.9 */
    max-width: 65ch;
}

.home-text-small {
    font-size: 1.08rem; /* Aumentado de 0.9rem a 1.08rem */
    color: var(--home-soft);
}

.home-tag {
    display: inline-block;
    background-color: var(--home-bg-mid);
    color: var(--home-soft);
    padding: calc(var(--spacing-s) * 1.2) calc(var(--spacing-m) * 1.2);
    border-radius: 6px;
    font-size: 1.08rem; /* Aumentado de 0.9rem a 1.08rem */
    border: 1px solid #2a2f42;
}

/* --- BUTTONS --- */
.home-btn {
    display: inline-block;
    padding: 14.4px 33.6px; /* Aumentado de 12px 28px a 14.4px 33.6px */
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-family: var(--font-inter);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 2px solid transparent;
    font-size: 1.02rem; /* Agregado tamaño de fuente aumentado */
}

.home-btn--primary {
    background-image: linear-gradient(to right, var(--home-ion) 0%, var(--home-violet) 100%);
    color: white;
}
.home-btn--primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(139, 92, 246, 0.2);
}

.home-btn--ghost {
    background-color: transparent;
    color: var(--home-text);
    border-color: var(--home-soft);
}
.home-btn--ghost:hover {
    background-color: var(--home-soft);
    color: var(--home-bg-dark);
    border-color: var(--home-soft);
}

/* --- HERO SECTION --- */
.home-hero {
    position: relative;
    text-align: center;
    padding: var(--spacing-xxl) 0;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('../images/Home/01_hero_banner.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.home-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Dark overlay */
    z-index: 0;
}

.home-hero > .home-container {
    position: relative;
    z-index: 1;
}

.home-logo-type {
    font-family: var(--font-orbitron);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--home-ion);
    letter-spacing: 2px;
    margin-bottom: var(--spacing-m);
}

.home-hero-cta-group {
    margin-top: var(--spacing-xl);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-m);
    justify-content: center;
}

.home-hero .home-text {
    margin-left: auto;
    margin-right: auto;
}

/* --- ADN SECTION --- */
.home-adn-list {
    list-style: none;
    font-size: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-m);
}
.home-ion-bullet {
    color: var(--home-ion);
    margin-right: var(--spacing-s);
}

/* --- DISCIPLINAS & CARDS --- */
.home-disciplinas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-l);
}

.disciplina-item {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.disciplina-item .home-btn {
  margin-top: var(--spacing-l);
}

.home-card {
    background-color: var(--home-bg-mid);
    padding: var(--spacing-xl);
    border-radius: 12px;
    border: 1px solid transparent;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
    border-color: #2a2f42;
    flex-grow: 1; /* This will make all cards the same height */
}

.home-card-img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: var(--spacing-l);
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.home-card-title {
    font-family: var(--font-orbitron);
    font-size: 1.5rem;
    margin-bottom: var(--spacing-m);
    color: var(--home-text);
}

/* --- TECNOLOGÍA SECTION --- */
.home-tech-bg {
    position: relative;
    background-image: url('../images/Home/Background%20Disciplinas.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.home-tech-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Dark overlay */
    z-index: 0;
}

.home-tech-bg > .home-container {
    position: relative;
    z-index: 1;
}

.home-tech-bg .home-section-title {
    color: var(--home-text);
}

.home-tech-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-l);
}

.home-tech-card {
    background: var(--home-bg-dark);
    padding: var(--spacing-l);
    border-radius: 8px;
    text-align: center;
    border: 1px solid #2a2f42;
}
.home-tech-card h4 {
    font-family: var(--font-orbitron);
    font-size: 1.1rem;
    color: var(--home-ion);
    margin-bottom: var(--spacing-s);
}
.home-tech-card p {
    color: var(--home-soft);
    font-size: 0.9rem;
}

/* --- PERFORMANCE LAB --- */
.home-air-zone {
    background-color: var(--home-air1);
    color: var(--home-bg-dark);
}
.home-air-zone > .home-container > .home-section-title,
.home-air-zone > .home-container > .home-text {
    color: var(--home-bg-dark);
}
.home-air-zone .home-text {
    margin: 0 auto;
    text-align: center;
}
.home-metrics-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-m);
    margin-top: var(--spacing-xl);
}
.home-air-zone .home-tag {
    background-color: white;
    border-color: #d1d5db;
}

/* --- COLECCIONES --- */
.home-collections-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-l);
    overflow-x: auto;
    padding-bottom: var(--spacing-l);
}

.home-product-card {
    background-color: var(--home-bg-mid);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #2a2f42;
    min-width: 280px;
}
.home-product-card .home-card-title {
    font-size: 1.2rem;
}
.home-product-card > * {
    padding: 0 var(--spacing-l);
}
.home-product-card .home-ph {
    padding: 0;
}
.home-product-card .home-btn {
    margin: var(--spacing-l) 0;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    text-align: center;
}
.home-product-card > *:not(.home-ph) {
    padding: var(--spacing-s) var(--spacing-l);
}
.home-product-card > h3 {
    padding-top: var(--spacing-l);
}
.home-product-card > a {
    padding-bottom: var(--spacing-l);
}


.home-ph {
    aspect-ratio: 1 / 1.2;
    width: 100%;
    background: linear-gradient(45deg, var(--home-bg-dark), #2c3142);
}

/* --- FOOTER --- */
.home-footer {
    position: relative;
    padding: var(--spacing-xl) 0;
    text-align: center;
    background-image: url('../images/Home/Footer.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

.home-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7); /* Dark overlay */
    z-index: -1;
}
.home-cierre {
    font-family: var(--font-orbitron);
    font-size: 1.5rem;
    color: var(--home-text);
    margin-bottom: var(--spacing-xl);
}
.home-footer-nav {
    margin-bottom: var(--spacing-l);
    display: flex;
    justify-content: center;
    gap: var(--spacing-l);
    flex-wrap: wrap;
}
.home-footer-nav a {
    color: var(--home-soft);
    text-decoration: none;
}
.home-footer-nav a:hover {
    color: var(--home-ion);
}
.home-copyright {
    font-size: 0.8rem;
    color: #6b7280;
}

/* --- ANIMATIONS --- */
@keyframes fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}
@keyframes soft-glow {
    from { box-shadow: 0 0 0 rgba(0,0,0,0); }
    to { box-shadow: 0 0 40px rgba(139, 92, 246, .15); }
}

.home-reveal {
    opacity: 0;
    animation: fade-up .8s ease-out both;
}
.home-reveal-slow {
    animation-delay: .2s;
}

/* Scroll-Driven Animations */
@supports (animation-timeline: view()) {
    .home-reveal {
        animation-timeline: view();
        animation-range: entry 0% cover 40%;
        animation-fill-mode: both;
    }
    .home-card:hover {
        transform: translateY(-6px);
        border-color: var(--home-ion);
        box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 20px -5px var(--home-ion);
    }
}

/* Fallback for no scroll-timeline support */
@supports not (animation-timeline: view()) {
    .home-reveal {
        opacity: 1;
        transform: none;
    }
    .home-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 8px 24px rgba(0,0,0,.45);
    }
}

/* Reduced Motion */
@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;
        animation: none !important;
        transition: none !important;
    }
}

/* --- RESPONSIVE BREAKPOINTS --- */
@media (min-width: 768px) {
    .home-adn {
        text-align: left;
    }
    .home-container--split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-xl);
        align-items: center;
    }
    .home-collections-grid {
        grid-template-columns: repeat(2, 1fr);
        overflow-x: hidden;
    }
}

@media (min-width: 1024px) {
    .home-tech-grid {
        grid-template-columns: repeat(3, 1fr);
    }
  .home-disciplinas-grid {
    grid-template-columns: 1fr;
  }
    .home-collections-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}


:root{
    --primary:#6a1bb1;      /* Morado profundo */
    --blue:#1f6dff;         /* Azul eléctrico */
    --green:#1fbf72;        /* Verde esmeralda */
    --gray:#0a0b0e;
    --panel:#0c0f15;
    --border:#232633;
    --muted:#9aa3ba;
    --accent:#6a79ff;
  }
  *{
    box-sizing:border-box
  }
  body{
    margin:0;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,Arial,sans-serif;
    background:var(--gray);
    color:#eef1f8;
    font-size: 19.2px; /* Aumentado de base implícito a 19.2px */
    line-height: 1.8; /* Mejorado espaciado entre líneas */
  }
  a{
    color:inherit;
    text-decoration:none
  }
  .container{
    max-width:1140px;
    margin:auto;
    padding:28.8px /* Aumentado de 24px a 28.8px */
  }

  /* Header */
  .header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:24px 28.8px; /* Aumentado de 20px 24px a 24px 28.8px */
    border-bottom:1px solid #1b1e26;
    position:sticky;
    top:0;
    background:#0a0b0ee6;
    backdrop-filter:blur(8px);
    z-index:40
  }
  .brand{
    display:flex;
    align-items:center;
    gap:14.4px /* Aumentado de 12px a 14.4px */
  }
  .brand img {
    max-height: 60px; /* Set max height for the logo */
    width: auto; /* Maintain aspect ratio */
  }  .logo{
    width:40px;
    height:40px;
    border-radius:10px;
    background:linear-gradient(145deg,var(--primary),#8b52ff);
    display:grid;
    place-items:center;
    box-shadow:0 10px 24px #6a1bb133
  }
  .logo:before{
    content:"";
    width:20px;
    height:20px;
    border:2px solid #fff;
    border-radius:6px
  }
  .nav{
    display:flex;
    gap:21.6px /* Aumentado de 18px a 21.6px */
  }
  .nav a{
    color:#ced3e3;
    font-weight:500;
    font-size: 1.02rem; /* Agregado tamaño aumentado */
  }

  /* Hamburger button (hidden on desktop) */
  .hamburger{
    display:none;
    background:transparent;
    border:0;
    color:inherit;
    font-size:20px;
    padding:8px;
    border-radius:8px;
    cursor:pointer;
  }

  /* Small screens: hide inline nav, show hamburger and transform nav into dropdown */
  @media (max-width:920px){
    .nav{ display:none; }
    .hamburger{ display:inline-flex; align-items:center; justify-content:center }
  .nav.open{ display:block; position:absolute; top:64px; right:12px; background:var(--panel); border:1px solid var(--border); padding:12px; border-radius:8px; width:220px; box-shadow:0 10px 30px rgba(0,0,0,0.6); z-index:55 }
    .nav.open a{ display:block; padding:8px 6px }
  }

  /* Hero */
  h1,h2,h3,.banner-title{
    font-family:Orbitron,sans-serif;
    line-height: 1.3; /* Agregado mejor espaciado */
    margin-bottom: 14.4px; /* Agregado espaciado */
  }
  .hero{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:33.6px; /* Aumentado de 28px a 33.6px */
    align-items:center
  }
  .hero h1{
    font-size:45.6px; /* Aumentado de 38px a 45.6px */
    line-height:1.2;
    margin:0 0 14.4px /* Aumentado de 12px a 14.4px */
  }
  .hero .hero-card img {
    max-height: 80vh;
    object-fit: cover;
    width: 100%;
  }
  .btn{
    border:0;
    border-radius:12px;
    padding:16.8px 21.6px; /* Aumentado de 14px 18px a 16.8px 21.6px */
    font-weight:700;
    cursor:pointer;
    font-size: 1.02rem; /* Agregado tamaño aumentado */
  }
  .btn-primary{
    background:linear-gradient(135deg,var(--primary),#8b52ff);
    color:#fff;
    box-shadow:0 10px 28px #6a1bb140
  }
  .btn-ghost{
    background:#151823;
    color:#e6e9f2;
    border:1px solid #262a36
  }
  .muted{
    color:var(--muted);
    font-size:14.4px; /* Aumentado de 12px a 14.4px */
    line-height: 1.6; /* Agregado mejor espaciado */
  }

  /* Banners */
  .banners{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16.8px; /* Aumentado de 14px a 16.8px */
    margin-top:31.2px /* Aumentado de 26px a 31.2px */
  }
  .banner-card{
    position:relative;
    border:1px solid var(--border);
    border-radius:16px;
    overflow:hidden;
    background:linear-gradient(180deg,#141823,#0b0d12);
    min-height:140px;
    padding:21.6px; /* Aumentado de 18px a 21.6px */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  }
  .banner-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(139, 92, 246, 0.3), 0 0 20px rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.5);
  }
  .banner-title{
    font-size:21.6px; /* Aumentado de 18px a 21.6px */
    margin:0 0 7.2px /* Aumentado de 6px a 7.2px */
  }
  .banner-text{
    color:#c9cede;
    font-size:16.8px; /* Aumentado de 14px a 16.8px */
    margin:0;
    line-height: 1.6; /* Agregado mejor espaciado */
  }

  /* Tech icons: 2 filas x 4 columnas */
  .icons{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14.4px; /* Aumentado de 12px a 14.4px */
    margin-top:33.6px /* Aumentado de 28px a 33.6px */
  }
  .ico{
    border:1px solid var(--border);
    border-radius:14px;
    padding:16.8px; /* Aumentado de 14px a 16.8px */
    text-align:center;
    background:#0c0f15;
    box-shadow: inset 0 0 15px rgba(106, 27, 177, 0.5); /* Light purple inset shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  }
  .ico:hover{
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(139, 92, 246, 0.3), 0 0 20px rgba(139, 92, 246, 0.2), inset 0 0 20px rgba(106, 27, 177, 0.6);
    border-color: rgba(139, 92, 246, 0.5);
  }  .ico img{
    width:32px;
    height:32px;
    display:block;
    margin:0 auto
  }
  .ico small{
    color:#c7cbdb;
    display:block;
    margin-top:7.2px; /* Aumentado de 6px a 7.2px */
    font-size:14.4px; /* Aumentado de 12px a 14.4px */
    line-height: 1.4; /* Agregado mejor espaciado */
  }

  /* Packs */
  .packs{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:19.2px; /* Aumentado de 16px a 19.2px */
    margin-top:31.2px /* Aumentado de 26px a 31.2px */
  }
  .card{
    border:1px solid var(--border);
    border-radius:16px;
    padding:21.6px; /* Aumentado de 18px a 21.6px */
    background:linear-gradient(180deg,#121521,#0b0d12);
    position:relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  }
  .card:hover{
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(139, 92, 246, 0.3), 0 0 20px rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.5);
  }
  .card h3{
    margin:0 0 7.2px; /* Aumentado de 6px a 7.2px */
    font-size: 1.32rem; /* Agregado tamaño aumentado */
  }
  .price{
    font-size:26.4px; /* Aumentado de 22px a 26.4px */
    font-weight:800;
    margin:7.2px 0 2.4px /* Aumentado de 6px 0 2px a 7.2px 0 2.4px */
  }
  .compare{
    color:#aab1c5;
    font-size:14.4px; /* Aumentado de 12px a 14.4px */
    text-decoration:line-through
  }
  .save-badge{
    display:inline-block;
    margin-top:9.6px; /* Aumentado de 8px a 9.6px */
    padding:7.2px 12px; /* Aumentado de 6px 10px a 7.2px 12px */
    border-radius:999px;
    background:#11162a;
    border:1px solid #2a3350;
    font-weight:700;
    font-size:14.4px; /* Aumentado de 12px a 14.4px */
    color:#cfe1ff
  }
  .best-badge{
    position:absolute;
    right:12px;
    top:12px;
    background:#063a2b;
    border:1px solid #0d6a52;
    padding:7.2px 12px; /* Aumentado de 6px 10px a 7.2px 12px */
    border-radius:999px;
    font-size:14.4px; /* Aumentado de 12px a 14.4px */
    color:#b8ffe4
  }

  /* Detail */
  .detail{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:19.2px; /* Aumentado de 16px a 19.2px */
    margin-top:33.6px /* Aumentado de 28px a 33.6px */
  }
  .detail .panel{
    border:1px solid var(--border);
    border-radius:16px;
    padding:21.6px; /* Aumentado de 18px a 21.6px */
    background:var(--panel);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  }
  .detail .panel:hover{
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(139, 92, 246, 0.3), 0 0 20px rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.5);
  }
  .detail .panel h3{
    font-size: 1.32rem; /* Agregado tamaño aumentado */
    margin-bottom: 12px; /* Agregado espaciado */
  }
  .detail .panel p{
    line-height: 1.7; /* Agregado mejor espaciado */
    margin-bottom: 16px; /* Agregado espaciado */
  }
  .detail img{
    width:100%;
    max-height: 200px;
    object-fit: cover;
    border-radius:12px;
    border:1px solid var(--border)
  }

  /* Testimonials */
  .testimonials{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:19.2px; /* Aumentado de 16px a 19.2px */
    margin-top:33.6px /* Aumentado de 28px a 33.6px */
  }
  .tcard{
    border:1px solid var(--border);
    border-radius:16px;
    padding:19.2px; /* Aumentado de 16px a 19.2px */
    background:#0d1017;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  }
  .tcard:hover{
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(139, 92, 246, 0.3), 0 0 20px rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.5);
  }
  .tcard p{
    line-height: 1.7; /* Agregado mejor espaciado */
    margin: 12px 0; /* Agregado espaciado */
  }
  .stars{
    color:#ffd65a;
    margin:4.8px 0 12px; /* Aumentado de 4px 0 10px a 4.8px 0 12px */
    font-size: 1.2rem; /* Agregado tamaño aumentado */
  }

  /* FAQ */
  .faq{
    display:grid;
    grid-template-columns:repeat(3, 1fr); /* 3 columnas en desktop */
    gap:12px; /* Reducido de 16.8px a 12px */
    margin-top:31.2px /* Aumentado de 26px a 31.2px */
  }
  .faq .q{
    border:1px solid var(--border);
    border-radius:10px;
    padding:12px; /* Reducido de 16.8px a 12px */
    background:#0c0f15;
    line-height: 1.6; /* Reducido de 1.7 a 1.6 */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  }
  .faq .q:hover{
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(139, 92, 246, 0.25), 0 0 15px rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.4);
  }
  .faq .q b{
    font-size: 0.95rem; /* Reducido de 1.08rem a 0.95rem */
    display: block;
    margin-bottom: 6px; /* Reducido de 8px a 6px */
  }
  .faq .q .muted{
    font-size: 0.85rem; /* Agregado tamaño más pequeño para respuestas */
  }

  /* Sticky CTA móvil */
  .sticky{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    display:flex; /* Changed to flex to be visible on desktop */
    gap:10px;
    padding:10px;
    border-top:1px solid var(--border);
    background:#0a0b0ee6;
    backdrop-filter:blur(8px);
    z-index:50
  }  .sticky .btn{
    flex:1
  }

  /* Modal */
  .modal{
    position:fixed;
    inset:0;
    background:#0009;
    display:none;
    align-items:center;
    justify-content:center;
    z-index:60;
    padding:20px
  }
  .modal.open{
    display:flex
  }
  .sheet{
    width:100%;
    max-width:920px;
    background:#0c0f15;
    border:1px solid var(--border);
    border-radius:18px;
    overflow:hidden;
    max-height:92vh;
    display:flex;
    flex-direction:column
  }
  .sheet header{
    flex:0 0 auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 16px;
    border-bottom:1px solid var(--border)
  }
  .sheet .body{
    flex:1 1 auto;
    display:grid;
    grid-template-columns:1fr 1fr; /* 2 columnas: productos + formulario */
    gap:20px;
    padding:16px;
    overflow:auto;
    -webkit-overflow-scrolling:touch
  }

  /* Columna izquierda: Pack, productos, carrusel, resumen */
  .modal-left-col{
    display:flex;
    flex-direction:column;
    gap:14px;
    align-items:center;
  }

  /* Columna derecha: Formulario */
  .modal-right-col{
    display:flex;
    flex-direction:column;
  }

  /* Títulos numerados del modal (consistentes) */
  .modal-left-col > p,
  .modal-right-col > p{
    font-size:16px;
    margin:0 0 12px 0;
    color:#e6eaf5;
  }

  /* Contenedor del carrusel */
  .modal-carousel-wrapper{
    position:relative;
    width:100%;
    max-width:450px;
    margin:0 auto;
    overflow:hidden;
  }

  .modal-carousel-wrapper .carousel{
    position:relative;
    width:100%;
  }

  .modal-carousel-wrapper .carousel-container{
    display:grid;
    grid-template-columns:repeat(2, 1fr); /* Siempre 2 columnas */
    gap:10px;
    padding:10px;
    transition:transform 0.4s ease;
  }

  .modal-carousel-wrapper .carousel-container img{
    width:100%;
    height:250px;
    object-fit:cover;
    border-radius:10px;
    border:1px solid var(--border);
  }

  .modal-carousel-wrapper .carousel-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:rgba(0,0,0,0.7);
    color:#fff;
    border:none;
    width:36px;
    height:36px;
    border-radius:50%;
    cursor:pointer;
    font-size:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10;
    transition:background 0.2s ease;
  }

  .modal-carousel-wrapper .carousel-btn:hover{
    background:rgba(139,92,246,0.9);
  }

  .modal-carousel-wrapper .carousel-btn.prev{
    left:10px;
  }

  .modal-carousel-wrapper .carousel-btn.next{
    right:10px;
  }

  /* Slots de productos generados dinámicamente */
  .products-slots{
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  .pack-controls-wrapper{
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:center;
    justify-content:center;
  }

  .product-control-block{
    background:rgba(139,92,246,0.08);
    border:1px solid rgba(139,92,246,0.2);
    border-radius:10px;
    padding:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    flex-wrap:nowrap;
  }

  .product-control-block h4{
    margin:0;
    font-size:13px;
    min-width:80px;
    flex-shrink:0;
  }

  .product-control-block .swatches{
    display:flex;
    gap:8px;
    flex-shrink:0;
  }

  .size-select-wrap{
    display:flex;
    align-items:center;
    gap:8px;
    flex-shrink:0;
  }

  .size-select-wrap label{
    font-size:11px;
    color:#adb4c8;
    margin:0;
    white-space:nowrap;
  }

  .size-chips{
    display:flex;
    gap:6px;
    flex-wrap:nowrap;
  }

  .size-chip{
    padding:6px 12px;
    border:1px solid #2a2e3a;
    border-radius:8px;
    background:#0e1118;
    color:#e6eaf5;
    cursor:pointer;
    font-size:12px;
    transition:all 0.2s ease;
    white-space:nowrap;
  }

  .size-chip:hover{
    transform:scale(1.05);
    border-color:var(--accent);
  }

  .size-chip[aria-checked="true"]{
    background:rgba(139,92,246,0.2);
    border-color:var(--accent);
    color:#fff;
  }

  /* Chips Pack: resaltado + zoom 1.1 */
  .chip{
    padding:10px 12px;
    border:1px solid #2a2e3a;
    border-radius:10px;
    cursor:pointer;
    background:#0e1118;
    color:#e6eaf5;
    transition:transform .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
  }
  .chip:hover{
    transform:scale(1.03)
  }
  .chip[aria-checked="true"]{
    background:#181f33;
    border-color:var(--accent);
    box-shadow:0 8px 20px rgba(106,121,255,.25);
    transform:scale(1.1); 
    color:#fff;
  }

  /* Swatch color: resaltado + zoom 1.1 */
  .swatches{
    display:flex;
    gap:10px;
    flex-wrap:wrap
  }
  .swatch{
    width:20px;
    height:20px;
    border-radius:6px;
    border:1px solid rgba(255,255,255,0.06);
    cursor:pointer;
    transition:transform .12s ease, outline-color .12s ease;
    padding:0; box-sizing:border-box;
  }
  .swatch:hover{
    transform:scale(1.08)
  }
  .swatch[aria-checked="true"]{
    outline:2px solid #ffffffcc;
    outline-offset:2px;
    transform:scale(1.08)
  }
  .swatch.blue{background:var(--blue)} 
  .swatch.purple{background:var(--primary)} 
  .swatch.green{background:var(--green)} 
  .swatch.black{background:#000}

  /* Select talla: resaltado al focus/cambio */
  .select{
    transition:transform .12s ease
  }
  .select select{
    width:100%;
    padding:10px;
    border-radius:10px;
    border:1px solid #2a2f3b;
    background:#0e1118;
    color:#eef1f8;
    transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
  }
  .select select:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(106,121,255,.2);
    transform:scale(1.03);
    outline:none
  }
  .select.active{
    transform:scale(1.05)
  }
  .select.active select{
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(106,121,255,.25)
  }

  /* COLORS (izq) + TALLAS (der) */
  .options-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    align-items:start;
    margin-top:14px
  }
  .options-grid > div > div{
    margin-bottom:10px
  }

  /* Form modal */
  .form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    align-items:start;
    justify-items:stretch
  }
  .form .full{
    grid-column:1 / -1
  }
  .form label{
    display:block;
    margin:0 0 6px;
    color:#cfd3df;
    font-size:12px
  }
  .form input, .form select{
    width:100%;
    padding:10px;
    border-radius:10px;
    border:1px solid #2a2f3b;
    background:#0e1118;
    color:#eef1f8
  }
  .form input::placeholder{
    color:#8f96ab
  }

  /* Info banner reutilizable */
  .banner-info{
    margin-top:8px;
    background:#121622;
    border:1px solid #2a2f3b;
    border-radius:10px;
    padding:8px 10px;
    color:#cfe6ff;
    font-size:13px
  }

  footer.footer{
    margin-top:40px;
    border-top:1px solid var(--border);
    color:#adb4c8;
    padding:24px;
    text-align:center
  }

  /* Responsive */
  @media (max-width:980px){
    .hero{
      grid-template-columns:1fr
    }
    .home-disciplinas-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    .detail{
      grid-template-columns:1fr
    }
    .icons{
      grid-template-columns:repeat(4,1fr)
    }
    .faq{
      grid-template-columns:repeat(3, 1fr); /* 3 columnas en tablet */
    }
    /* Mantener 2 columnas en el modal para tablet */
    .sheet .body{
      grid-template-columns:1fr 1fr;
      gap:16px;
    }
  }
  @media (max-width:768px){
    /* Modal móvil: una sola columna vertical */
    .sheet .body{
      grid-template-columns:1fr;
      gap:14px;
      padding:12px;
    }
    /* Columna izquierda mantiene su estructura */
    .modal-left-col{
      gap:12px;
    }
    /* Carrusel más pequeño */
    .modal-carousel-wrapper{
      max-width:100%;
    }
    .modal-carousel-wrapper .carousel-container{
      gap:8px;
      padding:8px;
    }
    .modal-carousel-wrapper .carousel-container img{
      height:180px;
    }
    .modal-carousel-wrapper .carousel-btn{
      width:30px;
      height:30px;
      font-size:16px;
    }
    /* Formulario debajo de todo */
    .modal-right-col{
      order:2;
    }
    /* Ajustar opciones de color/talla en móvil */
    .options-grid{
      grid-template-columns:1fr;
      gap:8px;
    }
    /* Tarjetas de producto más compactas */
    .chip{
      padding:7px 9px;
      font-size:0.8rem;
    }
    /* Textos más pequeños en móvil */
    .modal-left-col p{
      font-size:0.9rem;
      margin-bottom:8px;
    }
    .modal-right-col p{
      font-size:0.9rem;
      margin-bottom:10px;
    }
    .banner-info{
      font-size:0.75rem;
      padding:6px 8px;
    }
    /* Tarjetas de producto en una sola fila compacta */
    .product-control-block{
      flex-wrap:wrap;
      gap:8px;
      padding:10px;
    }
    .product-control-block h4{
      font-size:12px;
      min-width:70px;
    }
    .size-chip{
      padding:5px 10px;
      font-size:11px;
    }
  }
  @media (max-width:720px){
    .home-disciplinas-grid {
        grid-template-columns: 1fr;
    }
    .home-card-title {
        font-size: 1.3rem;
    }
    .home-text {
        font-size: 0.9rem;
    }
    .packs{
      grid-template-columns:1fr
    }
    .testimonials{
      grid-template-columns:1fr
    }
    .banners{
      grid-template-columns:1fr
    }
    .sticky{
      display:flex
    }
    .icons{
      grid-template-columns:repeat(2,1fr)
    }
    .faq{
      grid-template-columns:repeat(2, 1fr); /* 2 columnas en móvil */
    }
    /* Modal móvil pequeño: ajustes adicionales */
    .modal-carousel-wrapper .carousel-container{
      gap:6px;
      padding:6px;
    }
    .modal-carousel-wrapper .carousel-container img{
      height:150px;
    }
    .modal-carousel-wrapper .carousel-btn{
      width:28px;
      height:28px;
      font-size:14px;
    }
    .chip{
      padding:6px 8px;
      font-size:0.72rem;
    }
    .modal-left-col p{
      font-size:0.82rem;
      margin-bottom:6px;
    }
    .modal-right-col p{
      font-size:0.82rem;
      margin-bottom:8px;
    }
    .banner-info{
      font-size:0.68rem;
      padding:5px 7px;
      margin-top:6px;
    }
    .options-grid > div > div{
      margin-bottom:8px;
    }
    .form{
      grid-template-columns:1fr;
      gap:8px;
    }
    /* Tarjetas de producto más compactas en móvil pequeño */
    .product-control-block{
      gap:6px;
      padding:8px;
    }
    .product-control-block h4{
      font-size:11px;
      min-width:65px;
    }
    .size-chip{
      padding:4px 8px;
      font-size:10px;
    }
    .swatch{
      width:18px;
      height:18px;
    }
  }
  @media (max-width:360px){
    .options-.grid{
      grid-template-columns:1fr
    }
  }

.carousel {
    width: 450px;
    margin-top: 15px;
    position: relative;
}
.carousel-container {
    display: flex;
    width: 100%;
}
.carousel-container img {
    width: 33.33%;
    padding: 5px;
    border-radius: 8px;
}
#prevBtn, #nextBtn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0,0,0,0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 50%;
    z-index: 10;
}
#prevBtn { left: 10px; }
#nextBtn { right: 10px; }

.product-carousel-section {
  margin-top: 28px;
}

.product-carousel-wrapper {
  position: relative;
  overflow: hidden;
  margin: 20px 0;
}

.product-carousel-container {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.product-carousel-container img {
  flex: 0 0 25%; /* 4 columns */
  width: 25%;
  padding: 5px;
  border-radius: 8px;
  box-sizing: border-box;
}

.product-carousel-prev,
.product-carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  border-radius: 50%;
  z-index: 10;
}

.product-carousel-prev {
  left: 10px;
}

.product-carousel-next {
  right: 10px;
}

/* ===== TEJIDOS AVANZADOS ===== */
.fabrics-section {
  position: relative;
  padding: clamp(80px, 9vw, 140px) 0;
  overflow: hidden;
  isolation: isolate;
}
.fabrics-bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  filter: brightness(.45) contrast(1.05) saturate(1.1);
  z-index: -2;
}
/* velo violeta/azul sutil */
.fabrics-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 20% 20%, rgba(139,92,246,.18), transparent 60%),
              radial-gradient(70% 70% at 85% 80%, rgba(87,185,255,.14), transparent 60%);
  z-index: -1;
  pointer-events: none;
}

.fabrics-inner {
  text-align: center;
  max-width: 900px;
}

/* Title grande tipo maqueta */
.fabrics-title {
  font-family: var(--font-orbitron);
  font-weight: 800;
  letter-spacing: .06em;
  font-size: clamp(28px, 5vw, 48px);
  color: #fff;
  margin-bottom: 18px;
}

/* Párrafo centrado con énfasis */
.fabrics-copy {
  color: #E9ECF1;
  opacity: .92;
  line-height: 1.75;
  font-size: clamp(14px, 1.7vw, 18px);
  margin-inline: auto;
  max-width: 72ch;
}
.fabrics-copy strong { color: #fff; }
.fabrics-copy em { color: var(--home-soft); font-style: italic; }

/* Grilla de features (8) */
.fabrics-feats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
  margin-top: clamp(28px, 5vw, 40px);
}
.feat {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 16px 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(12, 14, 20, .45);
  border-radius: 14px;
  backdrop-filter: blur(6px);
  color: #E9ECF1;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.feat:hover {
  transform: translateY(-4px);
  border-color: rgba(139,92,246,.45);
  box-shadow: 0 8px 26px rgba(0,0,0,.45), 0 0 22px -6px rgba(139,92,246,.35);
}
.feat svg {
  width: 34px;
  height: 34px;
  color: #C5D9FF;
  filter: drop-shadow(0 0 10px rgba(87,185,255,.18));
}
.feat span {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  opacity: .95;
  text-transform: uppercase;
}

/* Responsive */
@media (max-width: 900px) {
  .fabrics-feats { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px) {
  .fabrics-feats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .feat { padding: 12px 8px; }
  .feat svg { width: 28px; height: 28px; }
  .feat span { font-size: 11px; }
}

  :root{
    --plab-bg:#0b0f1a;
    --violet:#8B5CF6;
    --cyan:#57B9FF;
  }
  .plab{padding:64px 0;background:
    radial-gradient(1200px 600px at 50% -10%, rgba(139,92,246,.12), transparent 60%),
    radial-gradient(1000px 500px at 100% 110%, rgba(87,185,255,.10), transparent 60%),
    var(--plab-bg);}
  .plab__header{max-width:920px;margin:0 auto 28px;text-align:center;color:#dbe7ff;}
  .plab__header h2{font-family:Orbitron,system-ui,sans-serif;font-size:42px;letter-spacing:.5px;margin:0 0 10px}
  .plab__header p{opacity:.8}

  .plab__carousel{position:relative;height:550px;margin:0 auto;padding:18px 0; /* No side padding */}
  .plab__track{display:flex;align-items:center;justify-content:center;perspective:1500px;perspective-origin:center;height:100%;}
  .plab__card{
    position:absolute; /* Absolute positioning for overlap */
    width:clamp(300px, 40vw, 500px); /* Responsive width */
    aspect-ratio:4 / 4.5;
    border-radius:22px;overflow:hidden;
    background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.08);box-shadow:0 10px 30px rgba(0,0,0,.35);
    transform-origin:center center;transition:transform .5s ease, filter .5s ease, opacity .5s ease, z-index .5s step-end;
    cursor:pointer;isolation:isolate;
  }
  .plab__card img{width:100%;height:100%;object-fit:cover;filter:saturate(.2) contrast(.9) brightness(.85)}
  .plab__card::after{ /* halo tech */
    content:"";position:absolute;inset:0;pointer-events:none;
    background:
      radial-gradient(120% 60% at 20% 10%, rgba(139,92,246,.20), transparent 60%),
      radial-gradient(120% 60% at 90% 90%, rgba(87,185,255,.18), transparent 60%);
    mix-blend-mode:screen;opacity:.75;
  }
  .plab__overlay{
    position:absolute;inset:auto 0 0 0;padding:18px 18px 20px;
    background:linear-gradient(180deg,transparent 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.75) 100%);
    color:#eaf2ff;transition:opacity .5s ease;
  }
  .plab__overlay h3{margin:0 0 4px;font:600 22px/1 Orbitron,system-ui,sans-serif}
  .plab__overlay p{margin:0 0 12px;opacity:.85}
  .plab__cta{
    display:none; /* visible solo en activa */
    padding:10px 14px;border-radius:12px;text-decoration:none;font-weight:600;
    background:linear-gradient(90deg,var(--cyan),var(--violet));
    color:#0b0f1a;box-shadow:0 6px 18px rgba(87,185,255,.25);
  }

  /* --- Card Positioning --- */
  .plab__card[data-pos="0"]{transform:scale(1.1);filter:none;z-index:5;}
  .plab__card[data-pos="0"] img {
    filter: none;
  }
  .plab__card[data-pos="1"]{transform:translateX(35%) rotateY(-20deg) scale(.9);z-index:4;}
  .plab__card[data-pos="-1"]{transform:translateX(-35%) rotateY(20deg) scale(.9);z-index:4;}
  .plab__card[data-pos="2"]{transform:translateX(65%) rotateY(-30deg) scale(.7);z-index:3;filter:brightness(.7);}
  .plab__card[data-pos="-2"]{transform:translateX(-65%) rotateY(30deg) scale(.7);z-index:3;filter:brightness(.7);}

  .plab__card:not([data-active="true"]) .plab__overlay{opacity:0;}
  .plab__card[data-active="true"] .plab__cta{display:inline-block}

  .plab__nav{
    position:absolute;top:50%;translate:0 -50%;
    width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.06);color:#dbe7ff;font-size:26px;line-height:1;
    display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(4px);z-index:10;
  }
  .plab__nav--prev{left:8px} .plab__nav--next{right:8px}
  .plab__nav:hover{background:linear-gradient(90deg,rgba(87,185,255,.18),rgba(139,92,246,.18))}

  @media (max-width: 580px){
    .plab__nav{display:none}
  }

/* PRODUCTOS DESTACADOS */
.product-carousel-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
}

.product-carousel {
  display: flex;
  width: 100%;
  transition: transform 0.5s ease-in-out;
}

.product-card {
  flex: 0 0 calc(100% / 4); /* Show 4 cards at once */
  max-width: calc(100% / 4);
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
}

.product-card-img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 15px;
}

.product-card-title {
  font-family: var(--font-orbitron);
  font-size: 1.2rem;
  margin-bottom: 15px;
  color: var(--home-text);
}

/* Control buttons positioned within each section */
.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #8B5CF6 0%, #6a1bb1 100%);
  border: 2px solid rgba(139, 92, 246, 0.5);
  color: #ffffff;
  font-size: 24px;
  padding: 0;
  box-shadow: 0 10px 25px rgba(139, 92, 246, 0.4), 0 0 15px rgba(139, 92, 246, 0.3);
  transition: all .2s ease;
  z-index: 50;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.carousel-control:hover{
  transform: translateY(-50%) scale(1.12);
  background: linear-gradient(135deg, #a78bfa 0%, #8B5CF6 100%);
  box-shadow: 0 15px 35px rgba(139, 92, 246, 0.6), 0 0 25px rgba(139, 92, 246, 0.5);
  border-color: rgba(167, 139, 250, 0.8);
}

.carousel-control.prev {
  left: 10px;
}

.carousel-control.next {
  right: 10px;
}

/* Make sure section containers allow absolute positioning */
.home-section {
  position: relative;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .product-card {
    flex: 0 0 calc(100% / 3); /* Show 3 cards */
    max-width: calc(100% / 3);
  }
}

@media (max-width: 920px) {
  .product-card {
    flex: 0 0 calc(100% / 2); /* Show 2 cards */
    max-width: calc(100% / 2);
  }
  
  .carousel-control {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
}

@media (max-width: 600px) {
  .product-card {
    flex: 0 0 100%; /* Show 1 card */
    max-width: 100%;
  }
  
  .carousel-control {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
  
  .carousel-control.prev {
    left: 5px;
  }
  
  .carousel-control.next {
    right: 5px;
  }
}

.product-card {
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(12, 14, 20, .45);
  border-radius: 12px;
  overflow: hidden;
}
.product-card:hover {
  transform: translateY(-4px);
  border-color: rgba(139,92,246,.45);
  box-shadow: 0 8px 26px rgba(0,0,0,.45), 0 0 22px -6px rgba(139,92,246,.35);
}

.product-card-content {
  flex-grow: 1;
}

.plab__divider {
  width: 80%;
  margin: 2rem auto;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.2);
}

/* Product slots inside configurator modal */
.products-slots{
  display:flex;
  gap:18px;
  align-items:flex-start;
  margin-top:10px;
}
.pack-image-col{ flex: 0 0 auto; }
.pack-image-col{ flex: 0 0 200px; }
.pack-image-col img{ display:block; border-radius:10px; border:1px solid var(--border); width:200px; height:auto; object-fit:cover }
.pack-controls-col{ flex: 1 1 auto; display:flex; flex-direction:column; gap:10px; }
.product-control-block{ 
  background: rgba(139, 92, 246, 0.08); 
  padding: 10px 12px; 
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 12px;
  margin-bottom: 8px;
}
.product-control-block h4{ 
  margin:0 0 8px; 
  font-size:11px; 
  line-height:1.2; 
  font-weight:700;
  letter-spacing: 0.3px;
}
.product-control-block .swatches{ margin-top:6px }
.product-controls{ display:flex; flex-direction:column; gap:6px; }
.size-select-wrap{ display:flex; flex-direction:column; gap:5px; max-width:260px }
.size-select-wrap label{ 
  margin:0 0 4px; 
  font-size:11px; 
  line-height:1.2; 
  font-weight:700;
  letter-spacing: 0.3px;
}
.product-image img{ max-width:100%; height:auto }

/* Size chips (pill buttons) */
.size-chips{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px }
.size-chip{
  padding:5px 10px;
  border-radius:999px;
  background:transparent;
  color:#cfe1ff;
  border:1px solid rgba(255,255,255,0.04);
  cursor:pointer;
  font-weight:700;
  font-size:11px;
}
.size-chip[aria-checked="true"]{
  background:linear-gradient(90deg,var(--cyan),var(--violet));
  color:#08101a;
  transform:none;
  box-shadow:0 6px 14px rgba(106,121,255,.12);
}
.size-chip:focus{ outline:none; box-shadow:0 0 0 4px rgba(106,121,255,.06) }
.swatches{ display:flex; flex-wrap:wrap; gap:6px; }

@media (max-width:720px){
  .products-slots{ flex-direction:column }
  .product-image img{ width:100%; height:auto }
  .product-control-block{
    padding: 10px;
  }
  .product-control-block h4{
    font-size: 10px;
  }
}

/* Responsive: stack image above controls and make product blocks compact on small screens */
@media (max-width:480px){
  .sheet .body{ grid-template-columns:1fr; padding:12px }
  .products-slots{ 
    display:flex; 
    flex-direction:row; 
    gap:10px; 
    margin-top:8px;
    align-items: flex-start;
  }
  .pack-image-col{ 
    order:0; 
    display:block; 
    flex: 0 0 35%; 
    max-width: 35%;
  }
  .pack-image-col img{ 
    width:100%; 
    height:auto; 
    border-radius:10px;
  }
  .pack-controls-col{ 
    order:1; 
    display:flex; 
    flex-direction:column;
    flex: 1;
    gap:8px;
  }
  .product-control-block{ 
    display:flex; 
    flex-direction:column; 
    align-items:flex-start; 
    gap:6px; 
    padding:8px; 
    border-radius: 8px;
    margin-bottom: 6px;
  }
  .product-control-block h4{ 
    margin:0; 
    font-size:9px; 
    min-width:auto; 
    margin-bottom: 4px; 
  }
  .product-control-block .swatches{ order:1; width: 100%; }
  .size-chips{ order:2; width: 100%; }
  .swatch{ width:14px; height:14px }
  .size-chip{ padding:4px 6px; font-size:9px }
  /* ensure no inner scrollbars */
  .product-control-block, .pack-controls-col{ max-height:none; overflow:visible }
}