/*
 * ALPHA FITNESS — PRODUCT DETAIL PAGE (Obsidian Luxe theme)
 * Extraído del HTML monolítico.
 * Refactor: 2026-06-02
 */

    /* ══════════════════════════════════════════════════════════
       OBSIDIAN LUXE — Alpha Fitness Product Page
       Palette: Deep indigo darks + Electric violet accents
                Cyan highlights + Green CTA only
       ══════════════════════════════════════════════════════════ */

    /* Un único fondo que cubre toda la pantalla (sin caja detrás del producto).
       HERO DINÁMICO: el fondo/acentos se tiñen con la paleta extraída de la imagen
       del producto, vía variables --hero-* seteadas INLINE sobre #product-page (NO
       en :root) → cascadean solo al hero, sin contaminar el resto del sitio. Cada
       variable trae fallback al tema por defecto (verde/oscuro) → sin FOUC. */
    #product-page{
      color:#E4E4ED; padding-bottom:90px !important;
      position:relative;
      background:var(--hero-bg, radial-gradient(120% 80% at 50% 26%, #12121C 0%, #0B0B12 48%, #08080D 100%));
      transition:background .55s ease;
    }

    /* Contenedor del hero: el banner editable se ancla a éste (inset:0) y así
       cubre SIEMPRE exactamente el hero, sin medir alturas (robusto desktop/mobile). */
    .ap-herowrap{ position:relative; }
    /* Banner de fondo EDITABLE del hero (full-bleed, oscurecido para legibilidad).
       Se inyecta solo si el producto tiene bannerHero. Abajo sigue el fondo normal. */
    .ap-herobg{
      position:absolute; inset:0; z-index:0;
      background-size:cover; background-position:center; background-repeat:no-repeat;
      pointer-events:none;
      animation:apSplashIn .8s ease both;
    }
    /* El contenido del hero va POR ENCIMA del banner */
    .ap-breadcrumb, .ap-back, .ap-hero{ position:relative; z-index:1; }

    /* ── Breadcrumb ── */
    .ap-breadcrumb{
      max-width:1200px; margin:0 auto; padding:18px 20px 0;
      color:#6B6B80; font-size:13px; letter-spacing:0.5px;
    }
    .ap-breadcrumb a{ color:#6B6B80; text-decoration:none; cursor:pointer; transition:color .2s; }
    .ap-breadcrumb a:hover{ color:#A5B4FC; }
    .ap-breadcrumb .sep{ margin:0 8px; color:#333340; }
    .ap-breadcrumb .current{ color:#C7D2FE; font-weight:600; }

    /* ── Back Button ── */
    .ap-back{
      display:inline-flex; align-items:center; gap:8px;
      background:rgba(99,102,241,0.06); color:#A5B4FC; border:1px solid rgba(99,102,241,0.2);
      padding:9px 18px; border-radius:8px; cursor:pointer;
      font-family:'Raleway',sans-serif; font-weight:600; letter-spacing:1px;
      text-transform:uppercase; font-size:11px;
      margin:10px 0 0 20px; transition:all .25s ease;
    }
    .ap-back:hover{
      background:rgba(99,102,241,0.15); border-color:rgba(99,102,241,0.5);
      color:#C7D2FE; transform:translateX(-3px);
    }

    /* ══════════════════════════════════════════════════════════
       HERO — 3 zonas: beneficios · imagen+splash · panel de compra
       ══════════════════════════════════════════════════════════ */
    .ap-hero{
      max-width:1240px; margin:22px auto 0; padding:0 20px;
      display:grid; grid-template-columns:235px 1fr 380px; gap:34px; align-items:start;
    }

    /* ── IZQUIERDA: beneficios ── */
    .ap-benefits{ padding-top:16px; }
    .ap-benefits-title{
      font-family:'Cormorant Garamond',serif; font-size:27px; line-height:1.12;
      color:#F0F0F8; margin-bottom:26px; letter-spacing:0.3px;
    }
    /* Items de beneficios de la columna izquierda: solo ícono + texto sobre el
       fondo único (SIN caja). Clase propia .ap-bf para no chocar con .ap-benefit
       de la grilla de beneficios inferior (que sí son tarjetas). */
    .ap-bf{ display:flex; gap:13px; align-items:flex-start; margin-bottom:24px; background:none; border:none; padding:0; }
    .ap-bf-ic{
      width:48px; height:48px; min-width:48px; border-radius:50%;
      background:radial-gradient(circle at 50% 35%, #15151F, #0B0B12);
      border:1px solid rgba(var(--hero-accent-rgb, 57,255,20), 0.22);
      display:flex; align-items:center; justify-content:center;
      color:var(--hero-accent, #39ff14); font-size:18px;
      box-shadow:0 0 18px rgba(var(--hero-accent-rgb, 57,255,20), 0.07);
      transition:color .45s ease, border-color .45s ease;
    }
    .ap-bf-txt{ display:flex; flex-direction:column; gap:3px; padding-top:2px; }
    .ap-bf-txt strong{ color:#E8E8F0; font-size:14px; font-weight:700; letter-spacing:0.2px; }
    .ap-bf-txt span{ color:#84849A; font-size:12.5px; line-height:1.45; }

    /* ── CENTRO: stage con imagen + splash ── */
    /* Sin caja/plataforma detrás del producto: el producto flota sobre el
       único fondo de la página (#product-page). Solo es un contenedor de
       posicionamiento para el splash + badges + imagen. */
    .ap-stage{
      position:relative; min-height:520px; overflow:visible;
      background:transparent; border:none; border-radius:0; box-shadow:none;
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      padding:30px 16px;
    }
    .ap-fav{
      position:absolute; top:16px; right:16px; z-index:4;
      width:44px; height:44px; min-width:44px; min-height:44px; border-radius:50%;
      background:rgba(8,8,13,0.72); border:1px solid #20202E; color:#6B6B80;
      cursor:pointer; font-size:17px; display:flex; align-items:center; justify-content:center;
      transition:all .25s; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    }
    .ap-fav:hover{ color:#39ff14; border-color:rgba(57,255,20,0.45); }
    .ap-fav .fas.fa-heart{ color:#39ff14; }
    .ap-stage .ap-badge-stock{
      position:absolute; top:16px; left:16px; z-index:4;
      background:rgba(57,255,20,0.08); border:1px solid rgba(57,255,20,0.3); color:#39ff14;
      padding:6px 14px; border-radius:20px; font-size:10px; font-weight:700;
      letter-spacing:1.5px; text-transform:uppercase;
      backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    }
    /* Glow dinámico detrás del producto — color = paleta extraída de la imagen
       (--hero-glow-rgb, fallback verde). Es la señal de color más visible. */
    .ap-glow{
      position:absolute; left:50%; top:46%; transform:translate(-50%,-50%);
      width:82%; height:76%; z-index:0; pointer-events:none;
      background:radial-gradient(ellipse at center,
        rgba(var(--hero-glow-rgb, 57,255,20), 0.30) 0%,
        rgba(var(--hero-glow-rgb, 57,255,20), 0.12) 38%,
        rgba(var(--hero-glow-rgb, 57,255,20), 0) 70%);
      filter:blur(6px);
      transition:background .55s ease;
      animation:apSplashIn 1.1s cubic-bezier(.2,.8,.2,1) both;
    }
    /* Splash de leche/proteína detrás del producto (gráfico propio, blanco) */
    .ap-splash{
      position:absolute; inset:0; z-index:1; pointer-events:none;
      display:flex; align-items:center; justify-content:center;
      animation:apSplashIn 1.1s cubic-bezier(.2,.8,.2,1) both;
    }
    .ap-splash-svg{ width:118%; height:118%; }
    @keyframes apSplashIn{ from{ opacity:0; transform:scale(.86); } to{ opacity:1; transform:scale(1); } }
    .ap-stage-img{ position:relative; z-index:2; display:flex; align-items:center; justify-content:center; }
    .ap-stage-img img{
      max-width:330px; width:100%; height:auto;
      filter:drop-shadow(0 22px 55px rgba(0,0,0,0.65));
      transition:transform .5s cubic-bezier(.23,1,.32,1);
    }
    .ap-stage:hover .ap-stage-img img{ transform:translateY(-6px) scale(1.04); }
    .ap-stage-meta{ position:relative; z-index:2; text-align:center; margin-top:20px; }
    .ap-stage-meta .ap-rating{ justify-content:center; }
    .ap-freeship{ color:#9898AE; font-size:13px; margin-top:7px; }
    .ap-freeship i{ color:#39ff14; margin-right:6px; }
    .ap-freeship a{ color:#22D3EE; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }

    /* ── DERECHA: panel de compra (vidrio translúcido sobre el fondo tintado) ── */
    .ap-buy-panel{
      background:rgba(14,14,20,0.55);
      backdrop-filter:blur(16px) saturate(1.15);
      -webkit-backdrop-filter:blur(16px) saturate(1.15);
      border:1px solid rgba(255,255,255,0.08); border-radius:18px; padding:26px 24px;
      position:sticky; top:20px;
      box-shadow:0 18px 50px rgba(0,0,0,0.45);
    }
    .ap-product-name{
      font-family:'Cormorant Garamond',serif; font-size:31px; line-height:1.08;
      color:#F2F2FA; margin:10px 0 6px; letter-spacing:0.3px;
    }
    .ap-rating--panel{ margin:4px 0 14px; font-size:13px; }
    .ap-nutri-link{
      display:inline-flex; align-items:center; gap:8px; color:#22D3EE; font-size:12.5px;
      cursor:pointer; text-decoration:none; border-bottom:1px solid rgba(34,211,238,0.3);
      padding-bottom:1px; margin-bottom:14px;
    }
    .ap-nutri-link:hover{ color:#67e8f9; border-color:#67e8f9; }
    .ap-buy-panel .ap-desc-short{ font-size:13.5px; margin-bottom:18px; }
    .ap-price-zone{
      margin:4px 0 18px; padding:16px 0;
      border-top:1px solid #18181F; border-bottom:1px solid #18181F;
    }
    .ap-stock-line{ margin-top:14px; font-size:13px; font-weight:700; }
    .ap-stock-line .ok{ color:#39ff14; }
    .ap-stock-line .low{ color:#F97316; }
    .ap-stock-line i{ margin-right:6px; }
    .ap-buy-trust{
      display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:16px;
      padding-top:16px; border-top:1px solid #18181F;
    }
    .ap-buy-trust span{ color:#7A7A8E; font-size:11px; display:inline-flex; align-items:center; gap:5px; }
    .ap-buy-trust i{ color:#39ff14; }

    .ap-thumbs{ display:flex; gap:10px; margin-top:18px; position:relative; z-index:2; }
    .ap-thumb{
      flex:1; aspect-ratio:1; background:#0D0D16; border:2px solid #1A1A28;
      border-radius:10px; cursor:pointer; display:flex; align-items:center;
      justify-content:center; padding:8px; overflow:hidden;
      transition:all .25s ease;
    }
    .ap-thumb img{ max-width:100%; max-height:100%; }
    .ap-thumb.active{
      border-color:#6366F1;
      box-shadow:0 0 12px rgba(99,102,241,0.25), inset 0 0 0 1px rgba(99,102,241,0.1);
    }
    .ap-thumb:hover{ border-color:#6366F1; }

    /* ── Product Info ── */
    .ap-info h1{
      font-family:'Cormorant Garamond',serif;
      font-size:38px; line-height:1.12; margin-bottom:10px; color:#F0F0F8;
      letter-spacing:0.3px;
    }
    .ap-brand-tag{
      display:inline-block;
      background:linear-gradient(135deg, rgba(99,102,241,0.08), rgba(34,211,238,0.06));
      color:#A5B4FC;
      border:1px solid rgba(99,102,241,0.25); padding:5px 14px; border-radius:20px;
      font-size:10px; letter-spacing:2.5px; text-transform:uppercase; font-weight:700;
      margin-bottom:14px;
    }

    .ap-rating{ color:#FBBF24; font-size:14px; margin:6px 0 12px; letter-spacing:2px; }
    .ap-rating span{ color:#6B6B80; margin-left:8px; letter-spacing:0; }
    .ap-rating .verified{
      color:#22D3EE; margin-left:10px; font-size:12px; letter-spacing:0;
    }
    .ap-desc-short{ color:#9898AE; line-height:1.75; margin-bottom:18px; font-size:14.5px; }

    /* ── Stock ── */
    .ap-stock-row{
      display:flex; align-items:center; gap:10px; margin:12px 0;
      color:#22D3EE; font-size:13px; font-weight:600;
    }
    .ap-stock-row .dot{
      width:9px; height:9px; background:#22D3EE; border-radius:50%;
      box-shadow:0 0 10px rgba(34,211,238,0.5); animation:ap-pulse 2s ease-in-out infinite;
    }
    @keyframes ap-pulse{ 0%,100%{opacity:1; transform:scale(1);} 50%{opacity:0.5; transform:scale(0.85);} }
    .ap-stock-row .low{ color:#F97316; }
    .ap-stock-row .low .dot{ background:#F97316; box-shadow:0 0 10px rgba(249,115,22,0.5); }

    /* ── Flavors ── */
    .ap-flavor-block{ margin-top:20px; }
    .ap-block-label{
      font-size:11px; color:#6B6B80; text-transform:uppercase; letter-spacing:2.5px;
      font-weight:700; margin-bottom:10px;
    }
    .ap-block-label strong{ color:#E4E4ED; }
    .ap-flavors{ display:flex; gap:10px; flex-wrap:wrap; }
    .ap-flavor{
      padding:10px 20px; background:#0D0D16; border:1.5px solid #1E1E30;
      border-radius:10px; color:#9898AE; cursor:pointer; font-size:13px;
      font-weight:600; letter-spacing:0.8px; transition:all .25s ease;
    }
    .ap-flavor:hover{ border-color:#6366F1; color:#C7D2FE; background:rgba(99,102,241,0.04); }
    .ap-flavor.active{
      background:rgba(99,102,241,0.1); border-color:#6366F1; color:#A5B4FC;
      box-shadow:0 0 16px rgba(99,102,241,0.15);
    }

    /* ── Quantity ── */
    .ap-qty-block{ margin-top:20px; }
    .ap-qty{
      display:inline-flex; align-items:center; border:1.5px solid #1E1E30;
      border-radius:10px; background:#0D0D16; overflow:hidden;
    }
    .ap-qty button{
      width:44px; height:44px; background:transparent; border:none;
      color:#A5B4FC; font-size:18px; font-weight:bold; cursor:pointer;
      transition:all .2s;
    }
    .ap-qty button:hover{ background:rgba(99,102,241,0.1); color:#C7D2FE; }
    .ap-qty input{
      width:52px; height:44px; background:transparent; border:none;
      color:#F0F0F8; text-align:center; font-size:15px; font-weight:700;
    }
    .ap-qty input:focus{ outline:none; }

    /* ── Price Box (gradient border) ── */
    .ap-price-box{
      position:relative; border-radius:14px; padding:24px; margin-top:24px;
      background:#0D0D16;
      border:1px solid transparent;
      background-clip:padding-box;
      box-shadow:0 0 0 1px rgba(99,102,241,0.15), 0 8px 32px rgba(0,0,0,0.4);
    }
    .ap-price-tag{
      display:inline-block;
      background:linear-gradient(135deg, rgba(99,102,241,0.15), rgba(34,211,238,0.1));
      color:#A5B4FC; padding:4px 12px; border-radius:6px;
      font-size:10px; font-weight:700; letter-spacing:1.5px; margin-bottom:10px;
      border:1px solid rgba(99,102,241,0.15);
    }
    /* Precio SIEMPRE verde (no se tiñe con la paleta del producto) */
    .ap-price-big{
      font-size:36px; font-weight:800;
      color:#39ff14;
      text-shadow:0 0 20px rgba(57,255,20, 0.3);
    }
    .ap-price-big small{ color:#7A7A8E; font-size:13px; font-weight:500; margin-left:8px; }
    .ap-price-card{ color:#9898AE; font-size:14px; margin-top:8px; }
    .ap-price-card strong{ color:#E4E4ED; }

    /* ── Buy Button ── */
    /* Botón Comprar SIEMPRE verde (CTA fijo, no se tiñe con la paleta) */
    .ap-buy-btn{
      display:flex; align-items:center; justify-content:center; gap:10px;
      width:100%; margin-top:18px;
      background:linear-gradient(135deg,#39ff14,#2ecc00);
      color:#000;
      border:none; padding:17px; font-size:15px; font-weight:800;
      letter-spacing:2.5px; border-radius:10px; cursor:pointer;
      text-transform:uppercase;
      transition:transform .3s cubic-bezier(.23,1,.32,1), box-shadow .3s, filter .3s;
      box-shadow:0 4px 22px rgba(57,255,20, 0.28);
    }
    .ap-buy-btn:hover{
      transform:translateY(-2px);
      box-shadow:0 8px 32px rgba(57,255,20, 0.42);
      filter:brightness(1.08);
    }
    .ap-secondary-btn{
      display:flex; align-items:center; justify-content:center; gap:8px;
      width:100%; margin-top:10px;
      background:transparent; color:#9898AE; border:1px solid #1E1E30;
      padding:15px; font-size:13px; font-weight:600;
      letter-spacing:1px; border-radius:10px; cursor:pointer;
      text-transform:uppercase; transition:all .25s ease;
    }
    .ap-secondary-btn:hover{
      border-color:#6366F1; color:#A5B4FC;
      background:rgba(99,102,241,0.04);
    }

    /* ── Shipping Calculator ── */
    .ap-ship-calc{
      margin-top:20px; padding:20px; background:#0D0D16;
      border:1px solid #1A1A28; border-radius:12px;
    }
    .ap-ship-calc h4{
      font-size:12px; color:#E4E4ED; margin-bottom:12px; letter-spacing:1.5px;
      text-transform:uppercase; font-family:'Raleway',sans-serif;
    }
    .ap-ship-calc h4 i{ color:#6366F1; margin-right:8px; }
    .ap-ship-form{ display:flex; gap:8px; }
    .ap-ship-form input{
      flex:1; padding:11px 14px; background:#08080D; border:1px solid #1E1E30;
      border-radius:8px; color:#E4E4ED; font-size:13px; transition:border-color .2s;
    }
    .ap-ship-form input:focus{ outline:none; border-color:#6366F1; box-shadow:0 0 0 3px rgba(99,102,241,0.1); }
    .ap-ship-form button{
      background:#6366F1; color:#fff; border:none; padding:11px 18px;
      border-radius:8px; font-weight:700; cursor:pointer; font-size:12px;
      letter-spacing:1px; transition:all .2s;
    }
    .ap-ship-form button:hover{ background:#7C7FF7; transform:translateY(-1px); }
    .ap-ship-result{ margin-top:12px; font-size:13px; color:#9898AE; display:none; }
    .ap-ship-result.show{ display:block; }
    .ap-ship-result strong{ color:#22D3EE; }

    /* ── Trust Row ── */
    .ap-trust-row{
      max-width:1200px; margin:50px auto; padding:0 20px;
      display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
    }
    .ap-trust{
      background:rgba(99,102,241,0.03); border:1px solid #1A1A28; border-radius:12px;
      padding:22px 18px; display:flex; align-items:center; gap:14px;
      transition:all .3s ease;
      backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    }
    .ap-trust:hover{
      border-color:rgba(99,102,241,0.25);
      background:rgba(99,102,241,0.06);
      transform:translateY(-2px);
    }
    .ap-trust i{
      font-size:22px; width:44px; height:44px; display:flex; align-items:center; justify-content:center;
      border-radius:10px;
      background:linear-gradient(135deg, rgba(99,102,241,0.12), rgba(34,211,238,0.08));
      color:#A5B4FC;
    }
    .ap-trust .t-title{ color:#E4E4ED; font-weight:700; font-size:13px; }
    .ap-trust .t-sub{ color:#6B6B80; font-size:12px; margin-top:3px; }

    /* ── Bottom Tab Bar ── */
    .ap-tabs{
      position:fixed; bottom:0; left:0; right:0; z-index:9990;
      background:rgba(8,8,13,0.92);
      backdrop-filter:blur(20px) saturate(1.5); -webkit-backdrop-filter:blur(20px) saturate(1.5);
      border-top:1px solid #1A1A28;
      display:flex; align-items:center; justify-content:space-between;
      padding:12px 32px;
    }
    .ap-tabs-left{ display:flex; gap:26px; flex-wrap:wrap; }
    .ap-tabs-left a{
      color:#6B6B80; font-size:13px; font-weight:600; cursor:pointer;
      display:flex; align-items:center; gap:6px;
      text-decoration:none; transition:color .2s;
    }
    .ap-tabs-left a:hover{ color:#C7D2FE; }
    .ap-tabs-left a i{ color:#6366F1; font-size:12px; }
    .ap-tabs-right{ display:flex; align-items:center; gap:18px; }
    .ap-tabs-right .price{ color:#39ff14; font-size:18px; font-weight:800; }
    .ap-tabs-right .price small{ color:#6B6B80; font-weight:500; font-size:12px; }
    .ap-tabs-right button{
      background:linear-gradient(135deg,#39ff14,#2ecc00); color:#000;
      border:none; padding:12px 30px; font-weight:800; letter-spacing:1.5px;
      border-radius:10px; cursor:pointer; text-transform:uppercase;
      box-shadow:0 4px 18px rgba(57,255,20,0.25);
      transition:all .25s ease;
    }
    .ap-tabs-right button:hover{
      transform:translateY(-1px);
      box-shadow:0 6px 22px rgba(57,255,20,0.35);
    }

    /* ── Sections ── */
    .ap-section{ max-width:1200px; margin:70px auto; padding:0 20px; }
    .ap-section h2{
      font-family:'Cormorant Garamond',serif;
      text-align:center; font-size:34px; color:#F0F0F8;
      margin-bottom:32px; letter-spacing:1px; position:relative;
    }
    .ap-section h2 span{
      background:linear-gradient(135deg, #6366F1, #22D3EE);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent;
      background-clip:text;
    }
    .ap-section h2::after{
      content:''; display:block; width:50px; height:2px; margin:14px auto 0;
      background:linear-gradient(90deg, #6366F1, #22D3EE);
      border-radius:2px;
    }

    /* ── Benefits ── */
    .ap-benefits-grid{
      display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
      max-width:920px; margin:0 auto;
    }
    .ap-benefit{
      background:#0D0D16; border:1px solid #1A1A28; border-radius:12px;
      padding:22px; display:flex; align-items:flex-start; gap:14px;
      transition:all .3s ease;
    }
    .ap-benefit:hover{
      transform:translateY(-3px); border-color:rgba(99,102,241,0.3);
      box-shadow:0 8px 25px rgba(0,0,0,0.3);
    }
    .ap-benefit i{
      color:#6366F1; font-size:20px; margin-top:2px;
      filter:drop-shadow(0 0 6px rgba(99,102,241,0.3));
    }
    .ap-benefit-text{ color:#9898AE; font-size:14px; line-height:1.6; }

    /* ── Info Banner ── */
    .ap-banner{
      display:grid; grid-template-columns:1fr 1fr; gap:0;
      border-radius:16px; overflow:hidden;
      border:1px solid #1A1A28;
    }
    .ap-banner .ap-banner-img{
      background:linear-gradient(135deg, #0D0D16, #101020);
      padding:40px; display:flex; align-items:center; justify-content:center;
    }
    .ap-banner .ap-banner-img img{ max-width:300px; width:100%; }
    .ap-banner .ap-banner-text{
      background:linear-gradient(135deg, #12122A 0%, #1A1A3A 100%);
      padding:50px 40px; display:flex; flex-direction:column; justify-content:center;
    }
    .ap-banner h3{
      font-family:'Cormorant Garamond',serif;
      font-size:28px; color:#F0F0F8; margin-bottom:16px; line-height:1.25;
    }
    .ap-banner p{ color:#9898AE; font-size:15px; margin-bottom:12px; line-height:1.7; }

    /* ── Promo Section ── */
    .ap-promo{
      display:grid; grid-template-columns:1fr 1fr; gap:0;
      border-radius:16px; overflow:hidden; border:1px solid #1A1A28;
      background:linear-gradient(135deg,#08080D 0%, #101018 100%);
    }
    .ap-promo .ap-promo-text{
      padding:50px 40px; display:flex; flex-direction:column; justify-content:center;
    }
    .ap-promo h3{
      font-family:'Cormorant Garamond',serif;
      font-size:32px; margin-bottom:18px; line-height:1.2;
      background:linear-gradient(135deg, #A5B4FC, #22D3EE);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent;
      background-clip:text;
    }
    .ap-promo p{ color:#9898AE; font-size:15px; margin-bottom:14px; line-height:1.7; }
    .ap-promo .ap-promo-img{
      background:#0A0A14; padding:40px; display:flex; align-items:center; justify-content:center;
      background-image:radial-gradient(circle at center, rgba(99,102,241,0.06) 0%, transparent 65%);
    }
    .ap-promo .ap-promo-img img{ max-width:340px; width:100%; }

    /* ── Solo Imagen (banner a todo el ancho) ── */
    .ap-imgfull{
      border-radius:16px; overflow:hidden; border:1px solid #1A1A28;
      background:linear-gradient(135deg,#0D0D16,#101020);
      display:block; line-height:0;
    }
    .ap-imgfull img{ width:100%; height:auto; display:block; }

    /* ════════════════════════════════════════════════════════════════
       SECCIONES INFORMATIVAS FULL-BLEED (estilo Growth)
       Banners a todo el ancho, pegados uno contra otro (sin separación).
       El reparto imagen/texto es editable por arrastre (--imgr = ancho img).
       ════════════════════════════════════════════════════════════════ */
    .aps-fb{ width:100%; margin:0; position:relative; }
    .aps-fb + .aps-fb{ margin-top:0; }   /* flush: sin distancia entre banners */

    .aps-split{
      display:grid;
      grid-template-columns: var(--imgr,50%) 1fr;   /* imagen | texto */
      min-height:clamp(340px, 40vw, 560px);
      position:relative;
      background:#0B0B12;
    }
    .aps-split--right{ grid-template-columns: 1fr var(--imgr,50%); } /* texto | imagen */

    .aps-split-img{ position:relative; overflow:hidden; background:#0A0A12; min-width:0; }
    .aps-split--right .aps-split-img{ order:2; }
    .aps-split--right .aps-split-text{ order:1; }
    .aps-split-img img{ width:100%; height:100%; object-fit:cover; display:block; }
    .aps-img-ph{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
    .aps-img-ph img{ max-width:55%; height:auto; }

    .aps-split-text{
      display:flex; flex-direction:column; justify-content:center;
      padding:clamp(28px, 4.5vw, 70px);
      background:linear-gradient(135deg,#13131E 0%, #0C0C14 100%);
      min-width:0;
    }
    .aps-h3{
      font-family:'Cormorant Garamond',serif;
      font-size:clamp(26px, 3vw, 42px); line-height:1.12; color:#F0F0F8;
      margin:0 0 18px; font-weight:700;
    }
    .aps-p{
      color:#9A9AB0; font-size:clamp(14px, 1.05vw, 16px); line-height:1.78; margin:0 0 14px;
    }
    .aps-p:last-child{ margin-bottom:0; }

    /* Solo imagen full-bleed */
    .aps-imgfull-fb{ width:100%; line-height:0; background:#0A0A12; }
    .aps-imgfull-fb img{ width:100%; height:auto; display:block; }
    .aps-imgfull-fb .aps-img-ph{ min-height:clamp(220px,28vw,420px); }

    /* Solo texto full-bleed */
    .aps-text-fb{
      background:linear-gradient(135deg,#13131E 0%, #0C0C14 100%);
      padding:clamp(40px,6vw,84px) clamp(20px,8vw,150px); text-align:center;
    }
    .aps-text-fb .aps-h3{ text-align:center; }
    .aps-text-fb .aps-p{ max-width:820px; margin-left:auto; margin-right:auto; }

    /* Divisor de arrastre (solo admin) */
    .aps-divider{
      position:absolute; top:0; bottom:0; width:24px;
      left:var(--imgr,50%); transform:translateX(-50%);
      cursor:ew-resize; z-index:7; touch-action:none;
      display:flex; align-items:center; justify-content:center;
    }
    .aps-split--right .aps-divider{ left:auto; right:var(--imgr,50%); transform:translateX(50%); }
    .aps-divider::before{
      content:''; position:absolute; top:0; bottom:0; width:2px;
      background:rgba(57,255,20,0); transition:background .15s;
    }
    .aps-divider:hover::before, .aps-divider.dragging::before{ background:rgba(57,255,20,0.75); }
    .aps-divider-grip{
      width:26px; height:48px; border-radius:8px;
      background:rgba(8,8,12,0.82); border:1px solid rgba(57,255,20,0.55);
      display:flex; align-items:center; justify-content:center;
      color:#39ff14; font-size:12px; opacity:0; transition:opacity .15s;
      -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
    }
    .aps-fb:hover .aps-divider-grip, .aps-divider.dragging .aps-divider-grip{ opacity:1; }

    /* Botón "Agregar sección" (admin) */
    .aps-add-wrap{ text-align:center; padding:34px 20px; }

    @media (max-width:820px){
      /* En mobile los banners apilan imagen arriba / texto abajo (sin arrastre) */
      .aps-split, .aps-split--right{ grid-template-columns:1fr !important; min-height:0; }
      .aps-split-img{ min-height:230px; }
      .aps-split--right .aps-split-img{ order:0; }
      .aps-split--right .aps-split-text{ order:0; }
      .aps-divider{ display:none; }
      .aps-text-fb{ padding:36px 22px; }
    }

    /* ── Bundle / Combo ── */
    .ap-bundle{
      background:#0D0D16; border:1px solid #1A1A28; border-radius:16px;
      padding:36px;
    }
    .ap-bundle-row{
      display:flex; align-items:center; justify-content:center; gap:24px;
      flex-wrap:wrap; margin-bottom:28px;
    }
    .ap-bundle-item{
      flex:1; min-width:200px; max-width:240px; text-align:center;
      background:#08080D; border:1px solid #1A1A28; border-radius:14px; padding:22px;
      transition:border-color .2s;
    }
    .ap-bundle-item:hover{ border-color:#2A2A44; }
    .ap-bundle-item img{ max-width:140px; width:100%; height:auto; }
    .ap-bundle-item .b-name{ color:#E4E4ED; font-size:14px; font-weight:600; margin-top:10px; }
    .ap-bundle-item .b-price{ color:#A5B4FC; font-size:16px; font-weight:700; margin-top:4px; }
    .ap-bundle-plus{
      color:#6366F1; font-size:36px; font-weight:bold;
      text-shadow:0 0 20px rgba(99,102,241,0.3);
    }
    /* Selector para cambiar el 2º producto del combo */
    .ap-bundle-picker{ margin:20px 0 4px; padding-top:18px; border-top:1px solid #1A1A28; }
    .ap-bundle-picker-label{ color:#888; font-size:12px; font-weight:700; letter-spacing:0.5px; margin-bottom:12px; text-align:center; }
    .ap-bundle-picker-label i{ color:#39ff14; margin-right:6px; }
    .ap-bundle-picker-row{ display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin; }
    .ap-bundle-chip{
      flex:0 0 auto; width:120px; background:#0d0d16; border:1.5px solid #1c1c2c; border-radius:12px;
      padding:12px 10px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:6px;
      transition:all .18s; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
    }
    .ap-bundle-chip:hover{ border-color:#39ff14; transform:translateY(-2px); }
    .ap-bundle-chip.active{ border-color:#39ff14; background:rgba(57,255,20,0.08); box-shadow:0 0 0 1px #39ff14; }
    .ap-bundle-chip .chip-ic{ height:46px; display:flex; align-items:center; justify-content:center; }
    .ap-bundle-chip .chip-ic img{ max-height:46px; max-width:60px; object-fit:contain; }
    .ap-bundle-chip .chip-ic i{ font-size:24px; color:#6366F1; }
    .ap-bundle-chip .chip-name{ color:#cfcfe0; font-size:11px; font-weight:600; line-height:1.25; text-align:center; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
    .ap-bundle-chip .chip-price{ color:#39ff14; font-size:12px; font-weight:800; }
    .ap-bundle-total{
      text-align:center; padding-top:22px;
      border-top:1px solid #1A1A28;
    }
    .ap-bundle-total .old{ color:#555560; text-decoration:line-through; font-size:14px; }
    .ap-bundle-total .new{
      color:#39ff14; font-size:30px; font-weight:800; margin:8px 0;
      text-shadow:0 0 15px rgba(57,255,20,0.25);
    }
    .ap-bundle-total button{
      background:linear-gradient(135deg,#39ff14,#2ecc00); color:#000; border:none;
      padding:14px 36px; border-radius:10px; cursor:pointer; font-weight:800;
      letter-spacing:1.5px; text-transform:uppercase; margin-top:10px;
      box-shadow:0 4px 18px rgba(57,255,20,0.2);
      transition:all .25s ease;
    }
    .ap-bundle-total button:hover{ transform:translateY(-2px); box-shadow:0 6px 24px rgba(57,255,20,0.35); }

    /* ── Nutritional Table ── */
    .ap-nutricional{
      display:grid; grid-template-columns:1fr 1fr; gap:40px;
      background:#0D0D16; border:1px solid #1A1A28; border-radius:16px;
      padding:40px;
    }
    .ap-table{
      background:#FAFAFA; color:#111; border-radius:10px; padding:24px;
      font-family:'Raleway','Arial',sans-serif;
    }
    .ap-table h4{
      text-align:center; font-size:16px; font-weight:800;
      padding-bottom:12px; border-bottom:2px solid #111; margin-bottom:10px;
      letter-spacing:1px; text-transform:uppercase;
    }
    .ap-table table{ width:100%; border-collapse:collapse; margin-top:10px; font-size:13.5px; }
    .ap-table th, .ap-table td{
      border-bottom:1px solid #DDD; padding:9px 8px; text-align:left;
    }
    .ap-table th{ font-weight:700; color:#333; }
    .ap-table th:nth-child(2), .ap-table th:nth-child(3),
    .ap-table td:nth-child(2), .ap-table td:nth-child(3){ text-align:center; }
    .ap-table .note{ font-size:11px; margin-top:12px; line-height:1.5; color:#666; }
    .ap-details p{ color:#9898AE; font-size:14px; line-height:1.8; margin-bottom:14px; }
    .ap-details strong{ color:#C7D2FE; }

    /* ── Reviews ── */
    .ap-reviews-wrap{ display:grid; grid-template-columns:1fr 2fr; gap:28px; }
    .ap-reviews{
      background:#0D0D16; border:1px solid #1A1A28; border-radius:16px;
      padding:36px; text-align:center;
    }
    .ap-reviews .score{ font-size:60px; font-weight:800; color:#F0F0F8; line-height:1; }
    .ap-reviews .score small{ color:#6B6B80; font-size:22px; font-weight:500; }
    .ap-reviews .stars{ color:#FBBF24; font-size:22px; margin:10px 0; letter-spacing:3px; }
    .ap-reviews .total{ color:#6B6B80; font-size:14px; margin-bottom:25px; }
    .ap-bars{ margin:0 auto; }
    .ap-bar-row{ display:flex; align-items:center; gap:10px; margin:6px 0; }
    .ap-bar-row .lbl{ color:#6B6B80; font-size:13px; width:30px; text-align:right; }
    .ap-bar-row .track{ flex:1; height:7px; background:#1A1A28; border-radius:4px; overflow:hidden; }
    .ap-bar-row .fill{
      height:100%; border-radius:4px;
      background:linear-gradient(90deg, #6366F1, #818CF8);
    }

    .ap-testimonials{ display:flex; flex-direction:column; gap:14px; }
    .ap-testimonial{
      background:#0D0D16; border:1px solid #1A1A28; border-radius:12px;
      padding:20px; transition:border-color .2s;
    }
    .ap-testimonial:hover{ border-color:#2A2A44; }
    .ap-testimonial-head{
      display:flex; align-items:center; gap:12px; margin-bottom:10px;
    }
    .ap-avatar{
      width:42px; height:42px; border-radius:50%;
      background:linear-gradient(135deg, #6366F1, #22D3EE);
      color:#fff; display:flex; align-items:center; justify-content:center;
      font-weight:800; font-size:15px;
    }
    .ap-testimonial-name{ color:#E4E4ED; font-weight:700; font-size:14px; }
    .ap-testimonial-meta{ color:#6B6B80; font-size:12px; }
    .ap-testimonial-stars{ color:#FBBF24; font-size:13px; letter-spacing:2px; margin-top:2px; }
    .ap-testimonial-text{ color:#9898AE; font-size:14px; line-height:1.65; }

    /* ── FAQ ── */
    .ap-faq-item{
      background:#0D0D16; border:1px solid #1A1A28; border-radius:12px;
      margin-bottom:10px; overflow:hidden; transition:border-color .2s;
    }
    .ap-faq-item:hover{ border-color:#2A2A44; }
    .ap-faq-q{
      padding:18px 24px; cursor:pointer; display:flex;
      justify-content:space-between; align-items:center;
      color:#E4E4ED; font-weight:600; font-size:15px;
    }
    .ap-faq-q i{ color:#6366F1; transition:transform .3s ease; font-size:14px; }
    .ap-faq-item.open .ap-faq-q i{ transform:rotate(45deg); }
    .ap-faq-item.open{ border-color:rgba(99,102,241,0.25); }
    .ap-faq-a{
      max-height:0; overflow:hidden; transition:max-height .35s ease;
      color:#9898AE; font-size:14px; line-height:1.7;
    }
    .ap-faq-item.open .ap-faq-a{ max-height:300px; }
    .ap-faq-a > div{ padding:0 24px 20px; }

    /* ── Related Products ── */
    .ap-related-grid{
      display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
    }
    .ap-related-card{
      background:#0D0D16; border:1px solid #1A1A28; border-radius:14px;
      padding:18px; cursor:pointer; display:flex; flex-direction:column;
      transition:all .3s cubic-bezier(.23,1,.32,1);
    }
    .ap-related-card:hover{
      transform:translateY(-6px); border-color:rgba(99,102,241,0.35);
      box-shadow:0 12px 35px rgba(0,0,0,0.4);
    }
    .ap-related-img{
      background:#08080D; border-radius:10px; padding:16px; min-height:160px;
      display:flex; align-items:center; justify-content:center; margin-bottom:12px;
    }
    .ap-related-img img{ max-width:130px; max-height:140px; width:100%; height:auto; }
    .ap-related-card h4{
      color:#E4E4ED; font-size:14px; font-family:'Raleway',sans-serif;
      font-weight:700; margin-bottom:6px;
    }
    .ap-related-card .price{ color:#39ff14; font-size:18px; font-weight:800; }
    .ap-related-card .btn-mini{
      margin-top:auto; padding-top:12px;
      color:#A5B4FC; font-size:12px; font-weight:700; letter-spacing:1px;
      text-transform:uppercase; transition:color .2s;
    }
    .ap-related-card:hover .btn-mini{ color:#C7D2FE; }

    /* ── Q&A ── */
    .ap-qa{
      background:#0D0D16; border:1px solid #1A1A28; border-radius:16px;
      padding:40px; text-align:center;
    }
    .ap-qa p{ color:#9898AE; margin-bottom:18px; }
    .ap-qa textarea{
      width:100%; min-height:110px; background:#08080D; border:1px solid #1E1E30;
      border-radius:10px; padding:16px; color:#E4E4ED; font-family:inherit;
      font-size:14px; resize:vertical; transition:border-color .2s;
    }
    .ap-qa textarea:focus{ outline:none; border-color:#6366F1; box-shadow:0 0 0 3px rgba(99,102,241,0.1); }
    .ap-qa button{
      margin-top:14px; background:#1A1A28; color:#6B6B80; border:1px solid #2A2A36;
      padding:13px 30px; border-radius:10px; cursor:pointer; font-weight:700;
      letter-spacing:1px; text-transform:uppercase; transition:all .2s;
    }
    .ap-qa button:hover{ border-color:#6366F1; color:#A5B4FC; }
    .ap-qa button.active{
      background:linear-gradient(135deg,#39ff14,#2ecc00); color:#000; border:none;
    }

    /* ── Newsletter ── */
    .ap-newsletter{
      background:linear-gradient(135deg, #0A0A14 0%, #12122A 100%);
      border-top:1px solid #1A1A28; padding:55px 20px; text-align:center;
      margin-top:40px; position:relative; overflow:hidden;
    }
    .ap-newsletter::before{
      content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
      width:300px; height:1px;
      background:linear-gradient(90deg, transparent, rgba(99,102,241,0.4), transparent);
    }
    .ap-newsletter h3{
      font-family:'Cormorant Garamond',serif;
      font-size:24px; color:#F0F0F8; margin-bottom:22px; letter-spacing:1px;
    }
    .ap-newsletter h3 span{
      background:linear-gradient(135deg, #6366F1, #22D3EE);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent;
      background-clip:text;
    }
    .ap-newsletter-form{
      max-width:560px; margin:0 auto; display:flex; gap:10px; flex-wrap:wrap;
    }
    .ap-newsletter-form input{
      flex:1; min-width:220px; padding:14px 18px; border-radius:10px;
      border:1px solid #1E1E30; background:#08080D; color:#E4E4ED; font-size:14px;
      transition:border-color .2s;
    }
    .ap-newsletter-form input:focus{ outline:none; border-color:#6366F1; }
    .ap-newsletter-form button{
      background:linear-gradient(135deg,#6366F1,#818CF8); color:#fff; border:none;
      padding:14px 34px; border-radius:10px; cursor:pointer; font-weight:800;
      letter-spacing:1.5px; text-transform:uppercase;
      transition:all .25s ease;
    }
    .ap-newsletter-form button:hover{ transform:translateY(-1px); box-shadow:0 6px 20px rgba(99,102,241,0.35); }

    /* ── Responsive ── */
    @media (max-width: 980px){
      .ap-related-grid{ grid-template-columns:repeat(2,1fr); }
      .ap-trust-row{ grid-template-columns:repeat(2,1fr); }
      .ap-reviews-wrap{ grid-template-columns:1fr; }
    }
    @media (max-width: 820px){
      .ap-hero, .ap-banner, .ap-promo, .ap-nutricional{ grid-template-columns:1fr; }
      .ap-benefits-grid{ grid-template-columns:1fr; }
      .ap-tabs{ padding:10px 14px; }
      .ap-tabs-left{ display:none; }
      .ap-tabs-right{ width:100%; justify-content:space-between; }
      .ap-section h2{ font-size:26px; }
      .ap-info h1{ font-size:26px; }
      .ap-gallery{ min-height:300px; padding:25px; }
      .ap-bundle-plus{ transform:rotate(90deg); }
      .ap-trust-row{ grid-template-columns:1fr 1fr; }
    }