:root{
    --bg:#f5f7fb;
    --bg-alt:#eaf1fb;
    --card:#ffffff;
    --accent:#0b1220;
    --accent2:#1a8f5c;
    --accent3:#1967d2;
    --accent3-bg:#4285f4;
    --accent4:#a83227;
    --warm:#f0b429;
    --warm-dark:#a06908;
    --text:#111827;
    --text-muted:#444c58;
    --border:#e1e6ef;
    --radius:14px;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;overflow-x:hidden;}
  @media(prefers-reduced-motion: reduce){
    *,*::before,*::after{
      animation-duration:0.001ms !important;animation-iteration-count:1 !important;
      transition-duration:0.001ms !important;scroll-behavior:auto !important;
    }
  }
  body{
    font-family:'Work Sans',system-ui,-apple-system,Roboto,Arial,sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.6;
    width:100%;
  }
  h1,h2{
    font-family:'Montserrat',sans-serif;
    font-weight:700;
  }
  h3,.logo{
    font-family:'Work Sans',sans-serif;
    font-weight:700;
  }
  a{color:inherit;}
  img{max-width:100%;display:block;}
  .container{max-width:1080px;margin:0 auto;padding:0 24px;}

  /* FONDO DE SECCIÓN — trama de puntos geométrica y sutil, coherente con el resto del sitio
     (nada de manchas orgánicas difuminadas: aquí todo es recto y técnico, como el resto de la web).
     Se aplica automáticamente a toda sección con fondo --bg-alt. */
  section[style*="background:var(--bg-alt)"]{position:relative;overflow:hidden;background-color:var(--bg-alt);}
  section[style*="background:var(--bg-alt)"]::after{
    content:"";position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg, var(--accent3-bg), var(--accent));
    opacity:0.55;pointer-events:none;z-index:0;
  }
  section[style*="background:var(--bg-alt)"]>.container{position:relative;z-index:1;}

  /* PROMO BANNER */
  .promo-banner{
    background:linear-gradient(90deg, var(--accent), var(--accent3));
    color:#ffffff;padding:9px 24px;font-size:0.86rem;
  }
  .promo-banner-inner{
    display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
    max-width:1200px;margin:0 auto;
  }
  .promo-banner-status{display:flex;align-items:center;gap:10px;flex-wrap:wrap;row-gap:4px;}
  .promo-item{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;color:rgba(255,255,255,0.92);}
  .promo-item i{opacity:0.8;font-size:0.85em;}
  .promo-item strong{font-weight:700;color:#ffffff;}
  .promo-divider{opacity:0.35;}
  .promo-banner-cta{
    display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
    background:rgba(255,255,255,0.16);color:#ffffff;font-weight:700;
    padding:5px 14px;border-radius:999px;white-space:nowrap;text-decoration:none;
    transition:background 0.15s;
  }
  .promo-banner-cta:hover{background:rgba(255,255,255,0.28);}
  .promo-banner-cta i{font-size:0.8em;}
  @media(max-width:800px){
    .promo-banner-inner{justify-content:center;text-align:center;}
  }

  /* BARRA SUPERIOR FIJA — el promo-banner y el header viven dentro de este wrapper
     sticky para que el banner de stock/envíos acompañe todo el rato al hacer scroll,
     en vez de desaparecer nada más bajar (así lo hace la competencia, p.ej. Opinas). */
  .site-topbar{position:sticky;top:0;z-index:50;}

  /* NAV */
  header{
    position:relative;
    background:rgba(250,248,244,0.85);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--border);
    transition:box-shadow .3s ease, background-color .3s ease;
  }
  header.scrolled{
    background:rgba(250,248,244,0.96);
    box-shadow:0 8px 24px -16px rgba(17,24,39,0.35);
  }
  nav{
    display:grid;grid-template-columns:auto 1fr auto;align-items:center;
    padding:16px 24px;max-width:1220px;margin:0 auto;
    gap:14px;
  }
  .logo{
    font-weight:600;font-size:1.4rem;letter-spacing:-0.01em;
    display:flex;align-items:center;gap:8px;
    flex-shrink:0;text-decoration:none;color:var(--text);
  }
  .navlinks{display:flex;justify-content:center;align-items:center;gap:15px;list-style:none;flex-wrap:nowrap;min-width:0;}
  .navlinks a{text-decoration:none;color:var(--text-muted);font-size:0.97rem;position:relative;transition:color .2s;white-space:nowrap;}
  .navlinks a:hover{color:var(--text);}
  .navlinks a::after{
    content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;
    background:var(--accent3);border-radius:0;
    transform:scaleX(0);transform-origin:left;
    transition:transform .3s cubic-bezier(.16,1,.3,1);
  }
  .navlinks a:hover::after{transform:scaleX(1);}
  .nav-cta{
    background:var(--accent);color:#ffffff;padding:10px 22px;border-radius:999px;
    text-decoration:none;font-weight:700;font-size:1.06rem;white-space:nowrap;
    transition:transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease;
    display:inline-block;
  }
  .nav-cta:hover{transform:translateY(-2px);box-shadow:0 10px 20px -8px rgba(11,18,32,0.5);}
  .burger{display:none;background:none;border:none;color:var(--text);font-size:1.5rem;cursor:pointer;}

  /* NAV MEGA-DROPDOWN — "Productos" y "Gestionar reseñas" (icono + título + descripción
     por ítem), inspirado en el menú de la competencia (Opinas). Se abre al pasar el ratón. */
  .nav-dropdown-parent{position:relative;}
  .nav-drop-caret{font-size:0.62rem;margin-left:4px;transition:transform .2s ease;color:var(--text-muted);}
  .nav-dropdown-parent:hover .nav-drop-caret{transform:rotate(180deg);}
  /* .nav-mega-dropdown es una zona "puente" invisible que arranca pegada al enlace
     (top:100%, sin hueco) y usa padding-top para el aire visual — así el ratón nunca
     sale del área hoverable al bajar del enlace al panel, y el desplegable no se cierra
     a medio camino. El panel visible (fondo, borde, sombra, flecha) vive en .nav-mega-panel. */
  .nav-mega-dropdown{
    display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);
    padding-top:16px;min-width:320px;z-index:120;
  }
  .nav-dropdown-parent:hover .nav-mega-dropdown,
  .nav-dropdown-parent:focus-within .nav-mega-dropdown{display:block;}
  .nav-mega-panel{
    position:relative;background:var(--card);border:1px solid var(--border);border-radius:16px;
    box-shadow:0 26px 52px -20px rgba(17,24,39,0.3);
    padding:14px;
  }
  .nav-mega-panel::before{
    content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%) rotate(45deg);
    width:12px;height:12px;background:var(--card);
    border-left:1px solid var(--border);border-top:1px solid var(--border);
  }
  .nav-mega-panel-title{
    font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;
    color:var(--text-muted);padding:2px 12px 10px;
  }
  .nav-mega-item{
    display:flex;align-items:center;gap:14px;padding:12px;border-radius:12px;
    text-decoration:none;color:var(--text);transition:background .15s ease;
  }
  .nav-mega-item:hover{background:var(--bg-alt);}
  .nav-mega-item + .nav-mega-item{margin-top:2px;}
  .nav-mega-item strong{display:block;font-size:0.97rem;color:var(--text);margin-bottom:2px;font-weight:700;}
  .nav-mega-item small{display:block;font-size:0.83rem;color:var(--text-muted);font-weight:400;line-height:1.3;}
  .nav-mega-icon{
    width:44px;height:44px;border-radius:50%;flex-shrink:0;
    background:linear-gradient(135deg, var(--accent3-bg), var(--accent3));
    color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.05rem;
    box-shadow:0 10px 20px -8px rgba(66,133,244,0.55);
    transition:transform .25s cubic-bezier(.16,1,.3,1);
  }
  .nav-mega-item:hover .nav-mega-icon{transform:scale(1.08) rotate(-4deg);}
  @media(max-width:800px){
    .nav-mega-dropdown{
      display:block;position:static;transform:none;padding-top:0;min-width:0;
    }
    .nav-mega-panel{
      background:transparent;border:none;box-shadow:none;padding:0 0 4px 10px;
    }
    .nav-mega-panel::before{display:none;}
    .nav-mega-panel-title{display:none;}
    .nav-mega-item{padding:9px 0;}
    .nav-mega-item:hover{background:none;}
    .nav-mega-icon{width:36px;height:36px;font-size:0.9rem;}
    .nav-drop-caret{display:none;}
    .nav-dropdown-parent > a{border-bottom:none !important;padding-bottom:4px !important;}
  }

  /* HERO */
  .hero{
    padding:110px 0 130px;
    text-align:center;
    position:relative;
    color:#fff;
    background:
      linear-gradient(180deg, rgba(9,14,26,0.82), rgba(9,14,26,0.52) 45%, rgba(9,14,26,0.85) 100%),
      url('hero-photo.jpg') center/cover no-repeat;
  }
  .img-placeholder-box{
    width:100%;height:100%;min-height:80px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
    background:linear-gradient(160deg, rgba(25,103,210,0.07), rgba(25,103,210,0.03));
    border:1px dashed rgba(25,103,210,0.35);
    color:var(--accent3);font-size:1.02rem;font-weight:600;text-align:center;
    padding:16px;box-sizing:border-box;line-height:1.35;
  }
  .img-placeholder-box i{font-size:1.4rem;color:var(--accent3);opacity:0.7;}
  .img-placeholder-box span{max-width:20ch;}
  @keyframes heroFadeUp{
    from{opacity:0;transform:translateY(22px);}
    to{opacity:1;transform:translateY(0);}
  }
  .hero .badge,.hero h1,.hero .sub,.hero-ctas,.hero-card-float{
    animation:heroFadeUp .8s cubic-bezier(.16,1,.3,1) both;
  }
  .hero .badge{animation-delay:0s;}
  .hero h1{animation-delay:.08s;}
  .hero .sub{animation-delay:.16s;}
  .hero-ctas{animation-delay:.24s;}
  .hero-card-float{animation-delay:.32s;}
  .badge{
    display:inline-flex;align-items:center;gap:7px;background:var(--accent3-bg);border:1px solid var(--accent3-bg);
    padding:7px 18px;border-radius:999px;font-size:0.93rem;font-weight:700;color:#fff;
    margin-bottom:24px;box-shadow:0 8px 20px -8px rgba(66,133,244,0.55);
  }
  .badge::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;flex-shrink:0;}
  h1{
    font-size:clamp(2.1rem,5vw,3.4rem);
    font-weight:700;letter-spacing:-0.005em;
    max-width:780px;margin:0 auto 20px;
  }
  .hero h1{color:#fff;}
  .hl{color:var(--accent3-bg);}
  .hero p.sub{
    font-size:1.15rem;color:rgba(255,255,255,0.85);max-width:560px;margin:0 auto 36px;
  }
  .hero-ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:56px;}

  /* HERO DE PÁGINAS DE SECTOR — gradiente de marca + trama de puntos + icono del sector,
     en vez de reutilizar la foto genérica del hero de home (quedaba fuera de contexto:
     la misma cafetería aparecía en la página de clínicas, peluquerías y tiendas). */
  .hero.hero-sector{
    background:linear-gradient(155deg, #0b1220 0%, #14264a 55%, #1967d2 150%);
    overflow:hidden;
  }
  .hero.hero-sector::before{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
    background-image:radial-gradient(rgba(255,255,255,0.14) 1.3px, transparent 1.3px);
    background-size:26px 26px;
    -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 25%, #000 30%, transparent 90%);
    mask-image:radial-gradient(ellipse 70% 70% at 50% 25%, #000 30%, transparent 90%);
  }
  .hero-sector-icon{
    position:absolute;top:50%;right:2%;transform:translateY(-50%);
    font-size:min(30vw, 400px);color:rgba(255,255,255,0.05);pointer-events:none;z-index:0;line-height:1;
  }
  .hero.hero-sector > .container{position:relative;z-index:1;}
  @media(max-width:900px){ .hero-sector-icon{display:none;} }

  /* HERO DE RESPUESTAS IA — misma estructura que hero-sector pero en el morado
     que ya identifica la demo de IA en home (#demo-ia), en vez de la foto de
     cafetería genérica del hero de home, que quedaba fuera de contexto en una
     página de software. Así el morado pasa a ser la firma visual de "IA" allá
     donde aparezca, en vez de un tratamiento puntual sin relación con el resto. */
  .hero.hero-ai{
    background:linear-gradient(155deg, #150f2e 0%, #3a2270 55%, #7C3AED 150%);
    overflow:hidden;
  }
  .hero.hero-ai::before{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
    background-image:radial-gradient(rgba(255,255,255,0.14) 1.3px, transparent 1.3px);
    background-size:26px 26px;
    -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 25%, #000 30%, transparent 90%);
    mask-image:radial-gradient(ellipse 70% 70% at 50% 25%, #000 30%, transparent 90%);
  }
  .hero.hero-ai > .container{position:relative;z-index:1;}
  .hero.hero-ai .badge{background:#7C3AED;border-color:#7C3AED;box-shadow:0 8px 20px -8px rgba(124,58,237,0.55);}
  .btn{
    padding:14px 28px;border-radius:999px;font-weight:600;text-decoration:none;
    display:inline-flex;align-items:center;gap:8px;font-size:1rem;border:none;cursor:pointer;
    transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s cubic-bezier(.16,1,.3,1);
  }
  .btn:hover{transform:translateY(-2px);}
  .btn:active{transform:translateY(0) scale(0.98);}
  .btn-primary{background:var(--accent3-bg);color:#ffffff;box-shadow:0 8px 24px rgba(66,133,244,0.35);}
  .btn-secondary{background:var(--card);color:var(--text);border:1px solid var(--border);}

  /* MOCK CARD VISUAL */
  .mock-wrap{display:flex;justify-content:center;}
  .mock-card{
    width:320px;max-width:80vw;aspect-ratio:1.6/1;
    background:linear-gradient(135deg,#1c212b,#252b38);
    border-radius:0;border:1px solid var(--border);
    box-shadow:0 30px 60px -20px rgba(0,0,0,0.6);
    padding:26px;display:flex;flex-direction:column;justify-content:space-between;
    position:relative;overflow:hidden;
  }
  .mock-card::after{
    content:"";position:absolute;top:-40%;right:-30%;width:220px;height:220px;
    background:radial-gradient(circle,rgba(66,133,244,0.25),transparent 70%);
  }
  .mock-card .g-logo{font-weight:800;font-size:1.1rem;}
  .mock-card .g-logo span:nth-child(1){color:#4285F4;}
  .mock-card .g-logo span:nth-child(2){color:#EA4335;}
  .mock-card .g-logo span:nth-child(3){color:#FBBC05;}
  .mock-card .g-logo span:nth-child(4){color:#4285F4;}
  .mock-card .g-logo span:nth-child(5){color:#34A853;}
  .mock-card .g-logo span:nth-child(6){color:#EA4335;}
  .mock-stars{color:#FBBC05;font-size:1.4rem;letter-spacing:2px;}
  .mock-foot{font-size:0.93rem;color:var(--text-muted);display:flex;justify-content:space-between;align-items:center;}
  .nfc-icon{width:40px;height:40px;border-radius:0;background:rgba(66,133,244,0.15);display:flex;align-items:center;justify-content:center;font-size:1.15rem;}
  .mock-card-img{
    width:560px;max-width:92vw;border-radius:0;
    box-shadow:0 24px 48px -18px rgba(26,29,39,0.22);
    border:1px solid var(--border);
  }

  /* HERO FLOATING WIDGET (like a stat card over the photo) */
  .hero-card-float{
    width:300px;max-width:82vw;margin:0 auto;text-align:left;
    background:#fff;border-radius:0;overflow:hidden;
    box-shadow:0 30px 60px -20px rgba(0,0,0,0.5);
  }
  .hero-card-top{height:5px;background:var(--accent3);}
  .hero-card-body{padding:20px 22px 22px;}
  .hero-card-header{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
  .hero-card-logo{
    width:40px;height:40px;border-radius:0;flex-shrink:0;
    background:rgba(25,103,210,0.12);color:var(--accent3);
    display:flex;align-items:center;justify-content:center;font-weight:700;
  }
  .hero-card-name{font-weight:700;font-size:1rem;color:var(--text);}
  .hero-card-stars{color:#FBBC05;font-size:1.06rem;letter-spacing:1px;}
  .hero-card-tagline{font-size:0.93rem;color:var(--text-muted);}

  /* SECTIONS GENERIC */
  section{padding:80px 0;}
  .section-head{text-align:center;max-width:640px;margin:0 auto 56px;}
  .eyebrow{color:var(--accent3);font-weight:700;font-size:0.93rem;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:12px;}
  .product-tag{
    display:inline-flex;align-items:center;gap:8px;
    background:rgba(66,133,244,0.1);border-radius:999px;
    padding:8px 18px;font-size:1rem;letter-spacing:0.02em;margin-bottom:16px;
  }
  .product-tag i{font-size:0.85em;}
  h2{font-size:clamp(1.8rem,3.5vw,2.5rem);font-weight:700;letter-spacing:0;margin-bottom:14px;}
  .section-head p{color:var(--text-muted);font-size:1.05rem;}

  /* POR QUÉ IMPORTAN LAS RESEÑAS (home, antes de producto) */
  .explainer-wrap{margin-top:8px;overflow-x:auto;}
  .explainer-wrap svg{min-width:760px;width:100%;height:auto;display:block;margin:0 auto;}

  /* HOW IT WORKS */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
  .step{
    position:relative;
    background:var(--card);border:1px solid var(--border);border-radius:0;
    padding:32px 26px;
    box-shadow:0 8px 24px -10px rgba(120,90,35,0.18);
  }
  .step:not(:last-child)::after{
    content:"\2192";
    position:absolute;top:38px;right:-27px;
    font-size:1.3rem;font-weight:700;color:var(--border);
    z-index:1;
  }
  .step-num-row{display:flex;align-items:center;gap:10px;margin-bottom:18px;}
  #como-funciona .step-num{
    width:40px;height:40px;border-radius:0;background:rgba(25,103,210,0.12);color:var(--accent3);
    display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;margin:0;
  }
  .step-index{
    font-size:1.02rem;font-weight:700;color:var(--text-muted);letter-spacing:0.05em;
  }
  .step h3{font-size:1.15rem;margin-bottom:10px;}
  .step p{color:var(--text-muted);font-size:1.03rem;}
  @media(max-width:800px){
    .step:not(:last-child)::after{display:none;}
  }

  /* POR QUÉ REVIEWTAP — misma trama clara/alt que el resto del sitio (ritmo
     blanco / azul clarito consistente), con las tarjetas reforzadas: número
     de paso + icono con degradado y elevación al pasar el ratón. */
  #por-que .step{
    background:#ffffff;border:none;border-radius:16px;
    box-shadow:0 16px 34px -18px rgba(17,24,39,0.22);
    transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1);
  }
  #por-que .step:hover{transform:translateY(-6px);box-shadow:0 22px 40px -16px rgba(17,24,39,0.28);}
  #por-que .step-num-row{justify-content:space-between;margin-bottom:20px;}
  #por-que .step-num{
    width:48px;height:48px;border-radius:50%;
    background:linear-gradient(135deg, var(--accent3-bg), var(--accent3));
    box-shadow:0 10px 22px -8px rgba(66,133,244,0.5);
  }
  #por-que .step-index{
    font-family:'Montserrat',sans-serif;font-size:1.5rem;font-weight:800;
    color:var(--border);letter-spacing:0;
  }

  /* PRICING — la foto de interior de cafetería no tenía relación con "elegir
     un pack de precios", así que se sustituye por el mismo degradado de marca
     (azul oscuro) + trama de puntos que ya usan las páginas de sector, en vez
     de una foto genérica sin conexión con el contenido. */
  #precios{
    position:relative;padding:110px 0 100px;
    overflow:hidden;
    background:linear-gradient(155deg, #0b1220 0%, #14264a 55%, #1967d2 150%);
  }
  #precios::before{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
    background-image:radial-gradient(rgba(255,255,255,0.14) 1.3px, transparent 1.3px);
    background-size:26px 26px;
    -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 18%, #000 25%, transparent 88%);
    mask-image:radial-gradient(ellipse 70% 60% at 50% 18%, #000 25%, transparent 88%);
  }
  #precios > .container{position:relative;z-index:1;}
  #precios .eyebrow{color:#8fb3ff;}
  #precios .section-head h2{color:#ffffff;}
  #precios .section-head p{color:rgba(255,255,255,0.85);}
  #precios .pricing-note{color:rgba(255,255,255,0.75);}
  .producto-tabs{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:32px;}
  .producto-tab{
    padding:10px 20px;border-radius:999px;border:1px solid var(--border);background:transparent;
    color:var(--text-muted);font-weight:600;font-size:1rem;cursor:pointer;transition:all .2s;
  }
  #precios .producto-tab{border-color:rgba(255,255,255,0.25);color:rgba(255,255,255,0.75);}
  .producto-tab.selected{border-color:var(--accent3);background:rgba(25,103,210,0.14);color:var(--text);}
  #precios .producto-tab.selected{background:rgba(255,255,255,0.14);color:#ffffff;border-color:#ffffff;}
  .pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start;}
  .price-card{
    background:var(--card);border:1px solid var(--border);border-radius:0;
    padding:38px 30px 32px;display:flex;flex-direction:column;gap:16px;position:relative;
    box-shadow:0 8px 24px -10px rgba(17,24,39,0.14);
    transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1);
  }
  .price-card::before{
    content:"";position:absolute;top:0;left:0;right:0;height:4px;
    background:var(--border);border-radius:0;
  }
  .price-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px -18px rgba(17,24,39,0.28);}
  .price-card.featured{
    border-color:var(--accent3-bg);
    box-shadow:0 0 0 1px var(--accent3-bg), 0 24px 56px -20px rgba(66,133,244,0.45);
    transform:scale(1.03);
  }
  .price-card.featured:hover{transform:scale(1.03) translateY(-6px);}
  .price-card.featured::before{background:var(--accent3-bg);}
  .featured-tag{
    position:absolute;top:-14px;left:50%;transform:translateX(-50%);
    background:var(--accent3-bg);color:#ffffff;font-size:0.98rem;font-weight:700;
    padding:5px 14px;border-radius:999px;white-space:nowrap;
    box-shadow:0 6px 16px -6px rgba(66,133,244,0.6);
  }
  .price-icon{
    width:52px;height:52px;border-radius:0;flex-shrink:0;
    background:rgba(25,103,210,0.12);color:var(--accent3);
    display:flex;align-items:center;justify-content:center;font-size:1.3rem;
  }
  .price-card.featured .price-icon{background:var(--accent3-bg);color:#ffffff;}
  .price-card-photo{
    width:100%;margin:0 0 4px;aspect-ratio:4/3;overflow:hidden;
    border-radius:0;background:var(--bg-alt);
  }
  .price-card-photo img{width:100%;height:100%;object-fit:cover;display:block;}
  .price-name{font-weight:700;font-size:1.1rem;}
  .price-value{font-family:'Work Sans',sans-serif;font-size:2.6rem;font-weight:700;letter-spacing:-0.02em;line-height:1;}
  .price-value sup{font-size:1rem;font-weight:600;color:var(--text-muted);}
  .price-currency{font-size:1.15rem;font-weight:600;color:var(--text-muted);margin-left:3px;}
  .price-unit{color:var(--text-muted);font-size:1.06rem;margin-top:-8px;}
  .price-save{
    display:inline-flex;align-items:center;gap:5px;
    background:rgba(26,143,92,0.12);color:var(--accent2);font-size:1.04rem;font-weight:700;
    padding:4px 10px;border-radius:999px;width:fit-content;
  }
  .price-list{list-style:none;display:flex;flex-direction:column;gap:12px;color:var(--text-muted);font-size:1rem;margin-top:4px;}
  .price-list li{display:flex;gap:10px;align-items:flex-start;line-height:1.4;}
  .price-list li::before{
    content:"✓";color:#fff;background:var(--accent2);font-weight:700;font-size:1.04rem;
    width:21px;height:21px;border-radius:50%;flex-shrink:0;margin-top:1px;
    display:flex;align-items:center;justify-content:center;
  }
  .price-cta{
    margin-top:auto;text-align:center;padding:14px;border-radius:999px;
    background:var(--accent3-bg);color:#ffffff;text-decoration:none;font-weight:700;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .price-cta:hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(66,133,244,0.45);}
  .price-card:not(.featured) .price-cta{background:transparent;border:1px solid var(--border);color:var(--text);}
  .price-card:not(.featured) .price-cta:hover{border-color:var(--accent3);color:var(--accent3);box-shadow:none;}
  .price-card.featured .price-cta{background:var(--accent3-bg);color:#ffffff;}
  .price-card.featured .price-cta:hover{box-shadow:0 10px 24px -8px rgba(66,133,244,0.55);}
  .pricing-note{text-align:center;color:var(--text-muted);font-size:1.06rem;margin-top:40px;}

  /* SLOGAN STRIP */
  .slogan-strip{background:var(--accent);padding:14px 0;text-align:center;}
  .slogan-strip p{margin:0;color:#ffffff;font-family:'Work Sans',sans-serif;font-size:1.15rem;font-weight:600;letter-spacing:0.01em;}
  .slogan-strip .slogan-highlight{color:var(--accent3-bg);}
  @media(max-width:640px){.slogan-strip p{font-size:1rem;}}

  /* TRUST BAR */
  .trustbar{
    border-top:1px solid var(--border);border-bottom:1px solid var(--border);
    background:var(--card);
    padding:20px 0;
  }
  .trust-row{
    display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
    gap:10px 30px;
  }
  .trust-item{
    display:inline-flex;align-items:center;gap:8px;
    color:var(--text-muted);font-size:0.93rem;font-weight:600;white-space:nowrap;
  }
  .trust-glyph{font-size:1.15rem;line-height:1;flex-shrink:0;}
  .trust-pay{gap:18px;}
  .trust-pay .trust-glyph{font-size:1.4rem;}
  .trust-pay .payment-badge{display:inline-flex;}
  .trust-pay .payment-badge i{font-size:1.85rem;line-height:1;}
  @media(max-width:640px){
    .trust-pay{gap:14px;}
    .trust-pay .payment-badge i{font-size:1.5rem;}
  }

  /* PRODUCTO — mismo tratamiento de fondo (degradado + trama de puntos) que
     #precios y #demo-ia, para que estas dos secciones de producto no queden
     planas frente a los bloques que ya tienen ese tono. El cartel usa la
     variante azul (igual que #precios) y la mini tarjeta la variante morada
     (igual que #demo-ia), para dar variedad entre los dos bloques seguidos. */
  #producto{
    position:relative;overflow:hidden;
    background:linear-gradient(155deg, #0b1220 0%, #14264a 55%, #1967d2 150%);
  }
  #producto::before{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
    background-image:radial-gradient(rgba(255,255,255,0.14) 1.3px, transparent 1.3px);
    background-size:26px 26px;
    -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 18%, #000 25%, transparent 88%);
    mask-image:radial-gradient(ellipse 70% 60% at 50% 18%, #000 25%, transparent 88%);
  }
  #producto > .container{position:relative;z-index:1;}
  #producto .eyebrow{color:#8fb3ff;}
  #producto .section-head h2{color:#ffffff;}
  #producto .section-head p{color:rgba(255,255,255,0.85);}
  #producto .pdp-gallery-caption{color:rgba(255,255,255,0.7);}
  #producto .pdp-gallery-disclaimer{color:rgba(255,255,255,0.55);}
  #producto .producto-roi p{color:#ffffff;}
  #producto .price-list{color:rgba(255,255,255,0.88);}
  #producto .feature-price-hint{color:rgba(255,255,255,0.85);}
  #producto .img-placeholder-box{
    background:rgba(255,255,255,0.08);
    border:1px dashed rgba(255,255,255,0.35);
    color:rgba(255,255,255,0.85);
  }
  #producto .img-placeholder-box i{color:rgba(255,255,255,0.85);}

  #producto-mini{
    position:relative;overflow:hidden;
    background:linear-gradient(155deg, #150f2e 0%, #3a2270 55%, #7C3AED 150%);
  }
  #producto-mini::before{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
    background-image:radial-gradient(rgba(255,255,255,0.14) 1.3px, transparent 1.3px);
    background-size:26px 26px;
    -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 18%, #000 25%, transparent 88%);
    mask-image:radial-gradient(ellipse 70% 60% at 50% 18%, #000 25%, transparent 88%);
  }
  #producto-mini > .container{position:relative;z-index:1;}
  #producto-mini .eyebrow{color:#b794f6;}
  #producto-mini .section-head h2{color:#ffffff;}
  #producto-mini .section-head p{color:rgba(255,255,255,0.85);}
  #producto-mini .pdp-gallery-caption{color:rgba(255,255,255,0.7);}
  #producto-mini .pdp-gallery-disclaimer{color:rgba(255,255,255,0.55);}
  #producto-mini .producto-roi p{color:#ffffff;}
  #producto-mini .feature-price-hint{color:rgba(255,255,255,0.85);}
  #producto-mini .img-placeholder-box{
    background:rgba(255,255,255,0.08);
    border:1px dashed rgba(255,255,255,0.35);
    color:rgba(255,255,255,0.85);
  }
  #producto-mini .img-placeholder-box i{color:rgba(255,255,255,0.85);}

  /* PRODUCTOS (showcase compacto) — versión corta con imagen + banner de
     acceso a la ficha, como alternativa a los bloques narrativos largos de
     abajo (#producto/#producto-mini, que se dejan en el CSS por si se
     quiere volver a ellos). */
  #productos{
    position:relative;overflow:hidden;
    background:linear-gradient(155deg, #0b1220 0%, #14264a 55%, #1967d2 150%);
  }
  #productos::before{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
    background-image:radial-gradient(rgba(255,255,255,0.14) 1.3px, transparent 1.3px);
    background-size:26px 26px;
    -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 18%, #000 25%, transparent 88%);
    mask-image:radial-gradient(ellipse 70% 60% at 50% 18%, #000 25%, transparent 88%);
  }
  #productos > .container{position:relative;z-index:1;}
  #productos .eyebrow{color:#8fb3ff;}
  #productos .section-head h2{color:#ffffff;}
  #productos .section-head p{color:rgba(255,255,255,0.85);}

  .productos-showcase-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:40px;
    margin-top:20px;
  }
  .producto-showcase-card{display:flex;flex-direction:column;}
  .producto-showcase-card .pdp-gallery-frame{aspect-ratio:4/3;border-radius:14px 14px 0 0;cursor:default;}
  .producto-showcase-card .img-placeholder-box{border-radius:14px 14px 0 0;}
  .producto-banner{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    background:rgba(255,255,255,0.97);
    padding:20px 22px;border-radius:0 0 14px 14px;
    text-decoration:none;
    box-shadow:0 20px 40px -22px rgba(9,6,20,0.5);
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .producto-banner:hover{transform:translateY(-3px);box-shadow:0 24px 46px -20px rgba(9,6,20,0.6);}
  .producto-banner-text{display:flex;flex-direction:column;gap:4px;}
  .producto-banner-text strong{color:var(--text);font-size:1.12rem;}
  .producto-banner-text span{color:var(--text-muted);font-size:0.92rem;font-weight:600;}
  .producto-banner-cta{
    display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
    background:var(--accent3-bg);color:#ffffff;font-weight:700;font-size:0.95rem;
    padding:10px 18px;border-radius:999px;
  }
  @media(max-width:760px){
    .productos-showcase-grid{grid-template-columns:1fr;}
    .producto-banner{flex-direction:column;align-items:flex-start;}
  }

  /* PRODUCTO */
  .producto-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
  .producto-image{
    background:var(--card);border:1px solid var(--border);border-radius:0;
    padding:44px 40px;box-shadow:0 8px 24px -10px rgba(120,90,35,0.18);
    display:flex;align-items:center;justify-content:center;
  }
  .producto-copy p{color:var(--text-muted);margin:16px 0 22px;font-size:1.02rem;}
  .producto-copy .price-list{color:var(--text-muted);}
  .stat-card-group{display:flex;flex-direction:column;gap:30px;width:100%;}
  .stat-item{display:flex;gap:18px;align-items:flex-start;}
  .stat-icon{
    width:52px;height:52px;border-radius:0;flex-shrink:0;
    background:rgba(25,103,210,0.12);color:var(--accent3);
    display:flex;align-items:center;justify-content:center;font-size:1.4rem;
  }
  .stat-text strong{display:block;font-size:1.08rem;margin-bottom:4px;color:var(--text);}
  .stat-text span{font-size:1rem;color:var(--text-muted);line-height:1.5;}

  /* RESTORED ORIGINAL VISUALS IN "EL PRODUCTO" */
  .producto-visual-group{display:flex;flex-direction:column;align-items:center;gap:24px;width:100%;}
  .producto-visual-group .mock-card{width:100%;max-width:320px;}
  .maps-illustration{width:100%;max-width:320px;height:auto;}

  /* PRODUCTO SHOWCASE: foto real + dimensiones + specs */
  .producto-showcase{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;margin-bottom:52px;}
  .producto-photo{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:0;}
  .producto-photo img{
    width:100%;height:100%;object-fit:cover;border-radius:0;display:block;
    box-shadow:0 24px 50px -20px rgba(17,24,39,0.35);
  }
  .producto-photo .img-placeholder-box{width:100%;height:100%;box-shadow:0 24px 50px -20px rgba(17,24,39,0.35);}
  .dimension-chip{
    position:absolute;bottom:18px;left:18px;
    background:rgba(11,18,32,0.85);color:#ffffff;backdrop-filter:blur(4px);
    padding:8px 14px;border-radius:999px;font-size:0.93rem;font-weight:700;
    display:flex;align-items:center;gap:8px;
  }
  .producto-specs .specs-list{list-style:none;display:flex;flex-direction:column;gap:18px;margin:20px 0 28px;}
  .producto-specs .specs-list li{display:flex;gap:14px;align-items:flex-start;color:var(--text-muted);font-size:1.06rem;line-height:1.5;}
  .producto-specs .specs-list li strong{color:var(--text);}
  .producto-specs .specs-list li i{
    display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;
    width:30px;height:30px;border-radius:50%;background:rgba(66,133,244,0.12);color:var(--accent3-bg);font-size:0.92rem;
  }
  .producto-roi{border-top:1px solid var(--border);padding-top:36px;}
  .producto-roi p{color:var(--text);font-size:1.02rem;margin-bottom:16px;max-width:760px;}

  /* Bloques narrativos de producto en la home (sin buy-box): imagen + copy + CTA
     a la ficha completa, donde vive la compra de verdad. */
  .feature-cta-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:8px;}
  .feature-price-hint{color:var(--text-muted);font-size:0.95rem;font-weight:600;}

  /* CONFIRMACIÓN DE RESERVA (sustituye al alert() nativo del navegador) */
  .reservation-success{
    max-width:460px;margin:60px auto;text-align:center;padding:0 20px;
    animation:reservationFadeIn .35s ease both;
  }
  @keyframes reservationFadeIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
  .reservation-success-icon{font-size:3.4rem;color:var(--accent2);margin-bottom:18px;}
  .reservation-success h3{font-size:1.5rem;margin-bottom:12px;}
  .reservation-success p{color:var(--text-muted);font-size:1rem;line-height:1.6;margin-bottom:26px;}
  .reservation-success .btn{min-width:200px;}

  /* AVISO: recomendar ordenador para personalizar (el editor libre de
     arrastrar/redimensionar es más preciso en pantalla grande) */
  .personalizer-notice{
    display:flex;align-items:flex-start;gap:12px;
    background:var(--bg-alt);border-left:3px solid var(--accent3-bg);
    padding:14px 18px;margin-bottom:28px;
  }
  .personalizer-notice i{color:var(--accent3-bg);font-size:1.1rem;margin-top:3px;flex-shrink:0;}
  .personalizer-notice p{font-size:0.95rem;color:var(--text);line-height:1.5;margin:0;}
  .personalizer-notice strong{font-weight:700;}

  /* CUSTOMIZER */
  .customizer{display:grid;grid-template-columns:0.9fr 1.1fr;gap:48px;align-items:start;}
  .customizer-preview,.customizer-form{min-width:0;}
  .customizer-preview{
    position:sticky;top:96px;display:flex;flex-direction:column;align-items:center;gap:0;
    padding:40px 20px 30px;border-radius:0;perspective:1000px;
    background:linear-gradient(180deg, rgba(25,103,210,0.06), rgba(11,18,32,0.04) 85%);
    overflow-x:hidden;touch-action:pan-y;
  }
  .flip-wrap{
    --preview-accent:#1967d2;
    --preview-logo-bg:#e8f0fc;
    --preview-bg:#ffffff;
    --preview-text:#1a1d27;
    --preview-text-muted:#6b6255;
    position:relative;width:100%;max-width:400px;aspect-ratio:8/12;
    transform:rotateX(7deg);transform-origin:bottom center;
    transition:transform .3s ease;cursor:pointer;
  }
  @media (hover:hover){
    .flip-wrap:hover{transform:rotateX(5deg) scale(1.015);}
  }
  .preview-card.flip-face{
    position:absolute;inset:0;
    transition:opacity .3s ease, transform .3s ease;
  }
  .flip-face.preview-back{opacity:0;pointer-events:none;transform:scale(0.97);}
  .flip-wrap.flipped .flip-face:not(.preview-back){opacity:0;pointer-events:none;transform:scale(0.97);}
  .flip-wrap.flipped .flip-face.preview-back{opacity:1;pointer-events:auto;transform:scale(1);}
  .preview-card{
    width:100%;height:100%;border-radius:0;padding:36px 32px 24px;
    background:var(--preview-bg);color:var(--preview-text);position:relative;overflow:hidden;
    border:1px solid var(--border);
    box-shadow:0 36px 44px -22px rgba(26,29,39,0.4), 0 2px 3px rgba(26,29,39,0.08);
    transition:background .25s, color .25s;
  }
  .preview-card::before{
    content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--preview-accent);z-index:1;
  }
  /* Fondo metalizado: cuando se elige uno de los 5 tonos metalizados como
     fondo de tarjeta (en vez del color plano de siempre), --preview-bg-gradient
     lleva el degradado de 3 paradas ya usado en el swatch, y aquí sustituye
     al color plano como background real de la tarjeta. */
  .preview-card.metallic-bg{
    background:var(--preview-bg-gradient, var(--preview-bg));
  }
  /* Acabado metalizado: barra superior con brillo degradado sutil en vez de color plano */
  .preview-card.metallic::before{
    background:linear-gradient(100deg,
      var(--preview-accent) 0%, var(--preview-accent-2, #fff) 22%, var(--preview-accent) 45%,
      var(--preview-accent-2, #fff) 68%, var(--preview-accent) 100%);
    background-size:220% 100%;
    animation:metallic-shimmer 5s ease-in-out infinite;
  }
  @keyframes metallic-shimmer{
    0%{background-position:0% 0;}
    50%{background-position:100% 0;}
    100%{background-position:0% 0;}
  }
  @media (prefers-reduced-motion: reduce){
    .preview-card.metallic::before{animation:none;}
  }
  .preview-back{
    display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;
  }

  /* EDITOR LIBRE: cada elemento del cartel es arrastrable y redimensionable.
     El transform:scale() se aplica al propio .preview-element (no al
     .pe-inner) para que el asa de resize, anclada a su esquina, se mueva
     junto con el contenido en vez de quedarse en el tamaño sin escalar.
     El borde punteado y el asa se ven siempre, aunque tenues, para que se
     note a simple vista (sin necesidad de pasar el ratón) que cada bloque
     se puede mover y redimensionar; al hover/arrastrar se intensifican. */
  .preview-element{
    position:absolute;cursor:grab;touch-action:none;user-select:none;
    border:1.5px dashed color-mix(in srgb, var(--preview-accent) 38%, transparent);
    border-radius:4px;transition:border-color .15s;
    transform-origin:top left;
  }
  .preview-element:hover,
  .preview-element.pe-active{border-color:var(--preview-accent);}
  .preview-element.pe-active{cursor:grabbing;z-index:5;}
  .pe-resize-handle{
    /* Contra-escala respecto al elemento padre para que el asa mantenga
       siempre el mismo tamaño visual, aunque el bloque esté ampliado o
       reducido — si no, a escala 2x el asa saldría enorme y a 0.5x diminuta. */
    position:absolute;right:-11px;bottom:-11px;width:22px;height:22px;border-radius:50%;
    background:var(--preview-accent);color:#fff;display:flex;align-items:center;justify-content:center;
    font-size:0.62rem;cursor:nwse-resize;opacity:0.6;
    transform:scale(calc(0.85 / var(--el-scale, 1)));transform-origin:center;
    transition:opacity .15s;box-shadow:0 2px 6px rgba(0,0,0,0.25);
  }
  .preview-element:hover .pe-resize-handle,
  .preview-element.pe-active .pe-resize-handle{opacity:1;transform:scale(calc(1 / var(--el-scale, 1)));}
  @media (hover:none){
    .pe-resize-handle{opacity:1;transform:scale(calc(0.85 / var(--el-scale, 1)));}
  }
  .preview-edit-hint{
    display:flex;align-items:center;gap:8px;justify-content:center;
    background:rgba(25,103,210,0.08);border:1px solid rgba(25,103,210,0.22);border-radius:0;
    font-size:0.88rem;font-weight:500;color:var(--accent3);text-align:center;
    margin:0 0 18px;padding:9px 14px;max-width:360px;
  }
  .preview-edit-hint i{color:var(--accent3);flex-shrink:0;}

  /* Paso 5 (Resumen/Pago): vista previa "limpia" del cartel, sin los
     bordes punteados, asas de redimensionar ni el aviso de arrastrar, para
     que el cliente vea de un vistazo el resultado final antes de pagar. */
  .customizer.clean-preview .preview-edit-hint{display:none;}
  .customizer.clean-preview .preview-element{
    border-color:transparent;cursor:default;pointer-events:none;
  }
  .customizer.clean-preview .pe-resize-handle{display:none;}
  .customizer.clean-preview .reset-layout-btn,
  .customizer.clean-preview #resetLayoutBtn{display:none;}
  .clean-preview-badge{
    display:none;align-items:center;gap:8px;justify-content:center;
    background:rgba(26,143,92,0.08);border:1px solid rgba(26,143,92,0.25);border-radius:0;
    font-size:0.88rem;font-weight:600;color:var(--accent2);text-align:center;
    margin:0 0 18px;padding:9px 14px;max-width:360px;
  }
  .clean-preview-badge i{color:var(--accent2);flex-shrink:0;}
  .customizer.clean-preview .clean-preview-badge{display:flex;}

  /* Aviso de contraste bajo: aparece cuando el color de nombre elegido
     (acento o metalizado) apenas se distingue del fondo elegido. Solo
     tiene sentido mientras se edita, así que se oculta en la vista previa
     limpia del último paso igual que el resto de ayudas de edición. */
  .contrast-warning-badge{
    display:none;align-items:center;gap:8px;justify-content:center;
    background:rgba(217,119,6,0.10);border:1px solid rgba(217,119,6,0.32);border-radius:0;
    font-size:0.88rem;font-weight:600;color:#9a5b06;text-align:center;
    margin:0 0 18px;padding:9px 14px;max-width:360px;
  }
  .contrast-warning-badge.show{display:flex;}
  .contrast-warning-badge i{color:#b8720a;flex-shrink:0;}
  .customizer.clean-preview .contrast-warning-badge{display:none !important;}

  /* Aviso de borrador recuperado (localStorage): solo se ve al abrir el
     personalizador si había un diseño sin terminar guardado. */
  .draft-banner{
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    background:rgba(25,103,210,0.08);border:1px solid rgba(25,103,210,0.22);border-radius:0;
    font-size:0.9rem;font-weight:500;color:var(--text);
    margin:0 0 18px;padding:10px 14px;
  }
  .draft-banner i{color:var(--accent3);flex-shrink:0;}
  .draft-banner span{flex:1;min-width:160px;}
  .draft-banner button{
    background:none;border:1px solid var(--border);border-radius:0;padding:5px 11px;
    font-size:0.82rem;font-weight:600;color:var(--text-muted);cursor:pointer;flex-shrink:0;
  }
  .draft-banner button:hover{border-color:var(--accent3);color:var(--accent3);}

  /* Botón "probar este enlace" junto al campo de Google */
  .test-qr-btn{
    display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
    background:none;border:none;padding:2px 0;margin:-4px 0 4px;
    font-size:0.86rem;font-weight:600;color:var(--accent3);cursor:pointer;
  }
  .test-qr-btn:hover{text-decoration:underline;}
  .preview-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
  .preview-back-label{font-weight:700;font-size:1.15rem;color:var(--preview-text);}
  .preview-back-text{font-size:1rem;color:var(--preview-text-muted);max-width:280px;}
  .preview-surface-shadow{
    width:55%;max-width:190px;height:12px;margin:-2px auto 0;border-radius:50%;
    background:rgba(17,24,39,0.16);
    filter:blur(5px);
  }
  .preview-header{display:flex;align-items:center;gap:16px;}
  .preview-logo-wrap{
    width:82px;height:82px;border-radius:0;
    background:#eef2fb;
    background:var(--preview-logo-bg, #eef2fb);
    color:var(--preview-accent);
    display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.95rem;
    overflow:hidden;flex-shrink:0;
  }
  .preview-logo-wrap img{width:100%;height:100%;object-fit:cover;}
  .preview-name{font-family:'Work Sans',sans-serif;font-size:1.72rem;font-weight:700;line-height:1.25;
    overflow:hidden;color:var(--preview-name-color, var(--preview-text));flex:1;min-width:0;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word;}
  /* Nombre del negocio en degradado metalizado (opción "Metalizado" del
     color de nombre): mismo truco de background-clip:text que las estrellas,
     pero usando el acento activo (y su tono claro) para que el brillo
     combine con cualquier color que el cliente haya elegido. */
  .preview-name.name-metallic{
    background:linear-gradient(100deg,
      var(--preview-accent) 0%, var(--preview-accent-2, #fff) 35%, var(--preview-accent) 60%,
      var(--preview-accent-2, #fff) 85%, var(--preview-accent) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  }
  .preview-stars{display:flex;gap:7px;font-size:1.48rem;color:#F2A900;}
  .preview-stars i{filter:drop-shadow(0 1px 1px rgba(0,0,0,0.12));}
  /* Estrellas con degradado dorado real cuando el estilo es metalizado */
  .preview-card.metallic .preview-stars{
    background:linear-gradient(100deg, #a97418 0%, #f7dc8a 35%, #d8a324 60%, #f7dc8a 85%, #a97418 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .preview-google-block{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;}
  .preview-tap-row{display:flex;align-items:center;gap:6px;font-size:0.95rem;font-weight:600;color:var(--preview-text-muted);}
  .preview-tap-row i{font-size:0.85rem;}
  .preview-google-g{width:66px;height:66px;flex-shrink:0;}
  .preview-google-cta{font-family:'Work Sans',sans-serif;font-size:1.46rem;font-weight:700;color:var(--preview-text);}
  .preview-qr-block{display:flex;flex-direction:column;align-items:center;gap:10px;margin:0 auto;}
  .preview-qr-frame{position:relative;padding:14px;}
  .preview-qr{width:168px;height:168px;display:flex;align-items:center;justify-content:center;}
  .preview-qr img,.preview-qr canvas,.preview-qr table{width:100%!important;height:100%!important;}
  .qr-corner{position:absolute;width:26px;height:26px;}
  .qr-corner.tl{top:0;left:0;border-top:3px solid var(--preview-accent);border-left:3px solid var(--preview-accent);}
  .qr-corner.tr{top:0;right:0;border-top:3px solid var(--preview-accent);border-right:3px solid var(--preview-accent);}
  .qr-corner.bl{bottom:0;left:0;border-bottom:3px solid var(--preview-accent);border-left:3px solid var(--preview-accent);}
  .qr-corner.br{bottom:0;right:0;border-bottom:3px solid var(--preview-accent);border-right:3px solid var(--preview-accent);}
  .preview-qr-caption{font-size:1.02rem;color:var(--preview-text-muted);}
  .preview-scan-hint{display:flex;align-items:stretch;justify-content:center;gap:18px;margin-top:4px;}
  .preview-scan-hint-item{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:0.74rem;font-weight:600;color:var(--preview-text-muted);line-height:1.15;white-space:nowrap;}
  .preview-scan-hint-item i{font-size:1.14rem;color:var(--preview-accent);}
  .preview-scan-hint-divider{width:1px;background:var(--preview-text-muted);opacity:0.3;}
  .preview-footer-area{
    /* Único bloque no arrastrable: se ancla siempre al pie del cartel para
       no interferir con los elementos absolutos de arriba. */
    position:absolute;left:32px;right:32px;bottom:14px;text-align:center;
  }
  .preview-contact-line{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:3px 12px;margin-bottom:5px;}
  .preview-contact-item{display:inline-flex;align-items:center;gap:4px;font-size:0.66rem;font-weight:600;color:var(--preview-text-muted);white-space:nowrap;}
  .preview-contact-item i{font-size:0.72rem;color:var(--preview-accent);}
  .preview-brand-footer{
    display:flex;align-items:center;justify-content:center;gap:5px;
    font-family:'Work Sans',sans-serif;font-weight:700;font-size:0.74rem;letter-spacing:-0.01em;
    color:var(--preview-accent);opacity:1;
  }
  .preview-format-tag{font-size:1.06rem;color:var(--text-muted);margin-top:18px;}

  /* FORMATO MINI TARJETA: layout horizontal compacto, sin pata trasera, sin editor libre */
  .flip-wrap.format-mini{aspect-ratio:1.586/1;max-width:380px;}
  .flip-wrap.format-mini .preview-card{
    display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:22px 26px;gap:16px;
  }
  .flip-wrap.format-mini .preview-element{
    position:static !important;border:none !important;cursor:default;transform:none !important;
  }
  .flip-wrap.format-mini .pe-resize-handle{display:none;}
  .flip-wrap.format-mini .preview-element[data-el="tagline"],
  .flip-wrap.format-mini .preview-element[data-el="stars"],
  .flip-wrap.format-mini .preview-google-block,
  .flip-wrap.format-mini .preview-qr-caption,
  .flip-wrap.format-mini .preview-scan-hint,
  .flip-wrap.format-mini .preview-footer-area{display:none;}
  .flip-wrap.format-mini .preview-logo-wrap{width:44px;height:44px;border-radius:0;font-size:1.15rem;}
  .flip-wrap.format-mini .preview-name{font-size:1.15rem;max-width:150px;
    -webkit-line-clamp:1;white-space:nowrap;text-overflow:ellipsis;}
  .flip-wrap.format-mini .preview-qr-block{margin:0;gap:0;flex-shrink:0;}
  .flip-wrap.format-mini .preview-qr-frame{padding:8px;}
  .flip-wrap.format-mini .preview-qr{width:74px;height:74px;}
  .flip-wrap.format-mini .qr-corner{width:15px;height:15px;}

  .customizer-form{
    display:flex;flex-direction:column;gap:20px;background:var(--card);
    border:1px solid var(--border);border-radius:0;padding:34px;
    box-shadow:0 8px 24px -10px rgba(120,90,35,0.18);
  }
  .customizer-form label{display:flex;flex-direction:column;gap:7px;font-size:1.04rem;font-weight:600;color:var(--text);}
  .customizer-form input[type=text],.customizer-form input[type=url],
  .customizer-form input[type=email],.customizer-form select{
    font-family:inherit;font-size:16px;font-weight:400;padding:11px 14px;
    border-radius:0;border:1px solid var(--border);background:var(--bg);color:var(--text);
  }
  .customizer-form input[type=file]{font-size:1.06rem;font-weight:400;color:var(--text-muted);}
  .color-swatches{display:flex;gap:10px;flex-wrap:wrap;}
  .swatch{width:32px;height:32px;border-radius:0;border:2px solid transparent;cursor:pointer;padding:0;}
  .swatch.selected{box-shadow:0 0 0 2px var(--card), 0 0 0 4px var(--text);}
  .swatch-group-label{
    font-size:.82rem;font-weight:600;color:var(--text-muted);
    margin:12px 0 8px;text-transform:uppercase;letter-spacing:.04em;
  }
  .metallic-swatch{position:relative;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);}
  .metallic-swatch.selected{box-shadow:inset 0 0 0 1px rgba(0,0,0,.12), 0 0 0 2px var(--card), 0 0 0 4px var(--text);}

  /* "No tengo logo, pedidme uno gratis": checkbox destacado justo debajo del
     campo de subida de logo, para los clientes que aún no tienen uno. */
  .logo-free-row{
    display:flex;align-items:flex-start;gap:10px;cursor:pointer;
    background:rgba(25,103,210,0.06);border:1px solid rgba(25,103,210,0.2);border-radius:0;
    padding:11px 14px;margin:10px 0 0;font-weight:400;
  }
  .logo-free-row input[type="checkbox"]{width:18px;height:18px;flex-shrink:0;margin-top:2px;accent-color:var(--accent3);cursor:pointer;}
  .logo-free-row span{font-size:0.95rem;line-height:1.45;color:var(--text);}
  .logo-free-row i{color:var(--accent3);margin-right:2px;}
  .logo-free-row strong{color:var(--accent3);}
  .form-note{font-size:1.02rem;color:var(--text-muted);line-height:1.5;}
  #submitBtn{width:100%;justify-content:center;}
  #submitBtn:disabled{opacity:0.7;cursor:default;transform:none;}

  .custom-color-row{display:flex;align-items:center;gap:10px;margin-top:4px;}
  .custom-color-row input[type=color]{
    width:32px;height:32px;border-radius:0;border:2px solid var(--border);
    padding:0;cursor:pointer;background:none;
  }
  .custom-color-row span{font-size:1.02rem;color:var(--text-muted);font-weight:400;}

  .font-options{display:flex;gap:8px;flex-wrap:wrap;}
  .font-opt{
    padding:8px 14px;border-radius:999px;border:1px solid var(--border);background:var(--bg);
    cursor:pointer;font-size:0.93rem;color:var(--text);
  }
  .font-opt.selected{border-color:var(--accent3);background:rgba(25,103,210,0.12);font-weight:700;}

  .toggle-row{display:flex;align-items:center;gap:10px;font-size:1.04rem;font-weight:600;color:var(--text);}
  .toggle-switch{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0;cursor:pointer;}
  .toggle-switch input{opacity:0;width:0;height:0;}
  .toggle-slider{
    position:absolute;inset:0;background:var(--border);border-radius:999px;transition:background .2s;
  }
  .toggle-slider::before{
    content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;border-radius:50%;
    background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,0.3);
  }
  .toggle-switch input:checked + .toggle-slider{background:var(--accent3);}
  .toggle-switch input:checked + .toggle-slider::before{transform:translateX(18px);}

  .char-count{font-size:0.94rem;color:var(--text-muted);font-weight:400;text-align:right;}

  .form-step-title{
    display:flex;align-items:center;gap:10px;font-weight:700;font-size:1rem;color:var(--text);
    padding-top:0;margin-top:0;border-top:none;
  }
  .form-step-badge{
    width:24px;height:24px;border-radius:0;background:var(--accent);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:0.98rem;flex-shrink:0;
  }

  .flip-btn{
    margin-top:16px;background:none;border:1px solid var(--border);color:var(--text);
    padding:8px 16px;border-radius:999px;font-size:1.06rem;font-weight:600;cursor:pointer;
    display:inline-flex;align-items:center;gap:6px;
  }
  .flip-btn:hover{border-color:var(--accent3);}

  /* ============ ASISTENTE PASO A PASO DEL PERSONALIZADOR ============ */
  .wizard-progress{
    display:flex;align-items:flex-start;justify-content:space-between;gap:2px;
    margin-bottom:8px;padding:0;background:none;border:none;
  }
  .wizard-progress-step{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;
    background:none;border:none;cursor:default;padding:2px 0;position:relative;
  }
  .wizard-progress-step::before{
    content:"";position:absolute;top:14px;left:-50%;width:100%;height:2px;background:var(--border);z-index:0;
  }
  .wizard-progress-step:first-child::before{display:none;}
  .wizard-progress-step.done::before{background:var(--accent3-bg);}
  .wizard-dot-num{
    width:28px;height:28px;border-radius:50%;background:var(--bg);border:2px solid var(--border);
    display:flex;align-items:center;justify-content:center;font-size:0.84rem;font-weight:700;color:var(--text-muted);
    position:relative;z-index:1;transition:background .2s,border-color .2s,color .2s;
  }
  .wizard-progress-step.active .wizard-dot-num{border-color:var(--accent3-bg);color:var(--accent3-bg);background:var(--card);}
  .wizard-progress-step.done .wizard-dot-num{background:var(--accent3-bg);border-color:var(--accent3-bg);color:#fff;}
  .wizard-progress-step label{
    font-size:0.72rem;font-weight:600;color:var(--text-muted);cursor:inherit;text-align:center;
  }
  .wizard-progress-step.active label{color:var(--text);}
  .wizard-progress-step[disabled],
  .wizard-progress-step:not(.done):not(.active){cursor:default;}

  .wizard-step{display:none;flex-direction:column;gap:20px;}
  .wizard-step.active{display:flex;}
  .wizard-step-hint{
    font-size:0.94rem;color:var(--text-muted);line-height:1.5;margin:-8px 0 0;
  }
  .wizard-nav{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    margin-top:6px;padding-top:20px;border-top:1px solid var(--border);
  }
  .wizard-nav-summary{justify-content:flex-start;}
  .wizard-nav .btn{padding:11px 22px;font-size:0.96rem;}
  .wizard-nav .btn-primary{margin-left:auto;}

  /* ESTILOS RÁPIDOS: tarjetas visuales con mini muestra de color/tipografía */
  .style-presets{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
  .preset-btn{
    display:flex;flex-direction:column;align-items:flex-start;gap:8px;
    padding:14px 16px;border-radius:0;border:1.5px solid var(--border);background:var(--card);
    cursor:pointer;text-align:left;position:relative;overflow:hidden;
    transition:transform .15s,box-shadow .15s,border-color .15s;
  }
  .preset-btn:hover{border-color:var(--accent3);transform:translateY(-2px);box-shadow:0 8px 20px -12px rgba(17,24,39,0.25);}
  .preset-btn.selected{border-color:var(--accent3-bg);box-shadow:0 0 0 3px rgba(66,133,244,0.15);}
  .preset-swatch-row{display:flex;gap:6px;}
  .preset-chip{width:20px;height:20px;border-radius:50%;border:1px solid rgba(0,0,0,0.12);flex-shrink:0;}
  .preset-vertical-icon{font-size:0.85rem;color:var(--text-muted);}
  .preset-name{font-weight:700;font-size:0.96rem;color:var(--text);line-height:1.25;}
  .preset-vertical{font-size:0.72rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.03em;}
  .preset-badge-reco{
    display:none;position:absolute;top:10px;right:10px;background:var(--accent2);color:#fff;
    font-size:0.62rem;font-weight:700;letter-spacing:0.02em;padding:3px 8px;border-radius:999px;
  }
  .preset-btn.is-recommended .preset-badge-reco{display:inline-block;}
  .preset-btn.is-recommended{border-color:var(--accent2);}
  @media(max-width:520px){ .style-presets{grid-template-columns:1fr;} }

  /* OPCIONES SEGMENTADAS (estilo QR, patrón, esquinas) */
  .segmented{display:flex;gap:8px;flex-wrap:wrap;}
  .seg-opt{
    padding:8px 14px;border-radius:999px;border:1px solid var(--border);background:var(--bg);
    cursor:pointer;font-size:0.93rem;color:var(--text);
  }
  .seg-opt.selected{border-color:var(--accent3);background:rgba(25,103,210,0.12);font-weight:700;}

  /* VARIANTES DE MARCO DEL QR */
  .preview-qr-frame.qr-style-dashed{border:2px dashed var(--preview-accent);border-radius:0;}
  .preview-qr-frame.qr-style-dashed .qr-corner{display:none;}
  .preview-qr-frame.qr-style-none .qr-corner{display:none;}

  /* PATRONES DE FONDO SUTILES */
  .preview-card[data-pattern="dots"]::after{
    content:"";position:absolute;inset:0;pointer-events:none;opacity:0.16;
    background-image:radial-gradient(var(--preview-text) 1px, transparent 1.4px);
    background-size:16px 16px;
  }
  .preview-card[data-pattern="lines"]::after{
    content:"";position:absolute;inset:0;pointer-events:none;opacity:0.1;
    background-image:repeating-linear-gradient(135deg, var(--preview-text) 0 2px, transparent 2px 14px);
  }
  /* Textura de madera: vetas verticales sutiles en tonos cálidos, pensada
     para el fondo de estilos de restaurante/cafetería. Colores fijos (no
     ligados a --preview-text) porque la madera tiene su propio tono, igual
     que ocurriría con un tablón real bajo cualquier color de acento. */
  .preview-card[data-pattern="wood"]::after{
    content:"";position:absolute;inset:0;pointer-events:none;opacity:0.55;
    background-image:
      repeating-linear-gradient(97deg, rgba(94,58,25,0.14) 0px, rgba(94,58,25,0.14) 2px, transparent 2px, transparent 10px),
      repeating-linear-gradient(97deg, rgba(255,241,214,0.16) 0px, transparent 3px, transparent 26px),
      linear-gradient(100deg, rgba(120,74,32,0.07), rgba(60,36,16,0.11) 50%, rgba(120,74,32,0.07));
  }
  /* Textura de mármol: vetas diagonales finas y difusas sobre un tono claro,
     pensada para el fondo de estilos de clínica/estética. */
  .preview-card[data-pattern="marble"]::after{
    content:"";position:absolute;inset:0;pointer-events:none;opacity:0.7;
    background-image:
      linear-gradient(122deg, transparent 29%, rgba(110,114,124,0.14) 32%, transparent 35%),
      linear-gradient(64deg, transparent 44%, rgba(110,114,124,0.10) 47%, transparent 50%),
      linear-gradient(150deg, transparent 59%, rgba(140,144,154,0.09) 62%, transparent 66%),
      radial-gradient(ellipse at 28% 18%, rgba(255,255,255,0.5), transparent 55%);
  }

  /* ESQUINAS RECTAS (opcional) */
  .preview-card.sharp-corners{border-radius:0;}

  /* BRILLO 3D QUE SIGUE AL CURSOR */
  .preview-sheen{
    position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(circle at var(--mx,50%) var(--my,30%), rgba(255,255,255,0.35), transparent 55%);
    opacity:0;transition:opacity .25s ease;mix-blend-mode:overlay;
  }
  .customizer-preview.tilting .preview-sheen{opacity:1;}

  /* RESUMEN DEL PEDIDO */
  .order-summary{
    display:flex;flex-direction:column;gap:10px;background:var(--bg);
    border:1px solid var(--border);border-radius:0;padding:18px 20px;
  }
  .summary-row{display:flex;align-items:center;justify-content:space-between;font-size:1.04rem;color:var(--text-muted);gap:12px;}
  .summary-row strong{color:var(--text);font-weight:700;display:flex;align-items:center;gap:6px;text-align:right;}
  .summary-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0;border:1px solid rgba(0,0,0,0.15);}

  .summary-product{display:flex;align-items:center;gap:14px;}
  .summary-thumb{
    width:52px;height:52px;border-radius:0;flex-shrink:0;color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:1.3rem;
    box-shadow:0 6px 14px -6px rgba(0,0,0,0.35);
  }
  .summary-product-info{display:flex;flex-direction:column;gap:3px;min-width:0;}
  .summary-product-info strong{font-size:1.03rem;color:var(--text);}
  .summary-product-info span{font-size:0.93rem;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .summary-divider{height:1px;background:var(--border);margin:2px 0;}
  .summary-free{color:var(--accent2)!important;}
  .summary-total{padding-top:2px;}
  .summary-total span{font-weight:700;color:var(--text);font-size:1.06rem;}
  .summary-total strong{font-size:1.15rem;color:var(--text);}
  .summary-trust{
    display:flex;align-items:center;justify-content:center;gap:8px;
    font-size:1.06rem;color:var(--text-muted);margin-top:12px;padding:10px;
    background:var(--bg);border:1px solid var(--border);border-radius:0;
  }
  .summary-trust i{color:var(--accent2);}

  /* FAQ */
  .faq-item{border-bottom:1px solid var(--border);padding:22px 0;}
  .faq-item h3{font-size:1.05rem;margin-bottom:8px;}
  .faq-item p{color:var(--text-muted);font-size:1.03rem;}

  /* CONTACT */
  .contact-box{
    background:var(--card);border:1px solid var(--border);border-radius:0;
    padding:48px;text-align:center;
    box-shadow:0 8px 24px -10px rgba(120,90,35,0.18);
  }
  .contact-box h2{margin-bottom:12px;}
  .contact-box p{color:var(--text-muted);margin-bottom:28px;}
  .contact-methods{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}

  footer{
    border-top:1px solid var(--border);padding:36px 0;text-align:center;
    color:var(--text-muted);font-size:1.06rem;
    background:var(--bg-alt);
  }

  /* NOSOTROS */
  .nosotros-box{
    display:flex;align-items:center;gap:28px;background:var(--card);
    border:1px solid var(--border);border-radius:0;
    padding:36px 40px;box-shadow:0 8px 24px -10px rgba(17,24,39,0.12);
  }
  .nosotros-avatar{
    width:72px;height:72px;border-radius:0;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
  }
  .nosotros-avatar svg{width:100%;height:100%;}
  .nosotros-box p{color:var(--text-muted);font-size:1rem;margin-top:6px;}
  .nosotros-box strong{color:var(--text);}

  @media(max-width:800px){
    .navlinks{
      display:flex;flex-direction:column;justify-content:flex-start;gap:0;
      position:absolute;top:100%;left:0;right:0;
      background:var(--card);border-bottom:1px solid var(--border);
      max-height:0;opacity:0;overflow:hidden;padding:0 32px;
      box-shadow:0 16px 28px -14px rgba(26,29,39,0.2);
      transition:max-height .35s cubic-bezier(.16,1,.3,1), opacity .25s ease, padding .3s ease;
    }
    .burger{display:flex;}
    .nav-cta{display:none;}
    .navlinks.mobile-open{max-height:420px;opacity:1;padding:4px 32px 12px;}
    .navlinks a{padding:13px 0;border-bottom:1px solid var(--border);}
    .navlinks li:last-child a{border-bottom:none;}
    .steps,.pricing-grid,.producto-grid,.producto-showcase,.customizer{grid-template-columns:1fr;}
    .steps>*,.pricing-grid>*,.producto-grid>*,.producto-showcase>*,.customizer>*{min-width:0;}
    .nosotros-box{flex-direction:column;text-align:center;padding:32px 24px;}
    .customizer-preview{position:static;}
    .producto-grid{gap:32px;}
    .producto-image{order:-1;}
    body{padding-bottom:76px;}
    .container{padding:0 32px;}
  }

  /* MOBILE NAV DROPDOWN */
  .burger{
    align-items:center;justify-content:center;
    width:38px;height:38px;background:none;border:1px solid var(--border);
    border-radius:50%;color:var(--text);font-size:1.05rem;cursor:pointer;
    transition:transform .25s cubic-bezier(.16,1,.3,1), border-color .2s ease;
  }
  .burger[aria-expanded="true"]{transform:rotate(90deg);border-color:var(--accent3);}

  /* PERSONALIZER AS INDEPENDENT FULL-SCREEN VIEW */
  .modal-topbar{
    position:relative;background:var(--bg);
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 24px;border-bottom:1px solid var(--border);
  }
  .modal-topbar .logo{font-size:1.15rem;}
  .modal-close{
    position:fixed;top:16px;right:20px;z-index:50;
    width:38px;height:38px;border-radius:50%;border:1px solid var(--border);
    background:var(--card);color:var(--text);font-size:1rem;cursor:pointer;
    box-shadow:0 6px 16px -6px rgba(17,24,39,0.25);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .modal-close:hover{border-color:var(--accent3);}
  #personaliza.personaliza-modal{
    display:none;position:fixed;inset:0;z-index:200;
    background:var(--bg);overflow-y:auto;overflow-x:hidden;
  }
  #personaliza.personaliza-modal.open{display:block;}
  #personaliza.personaliza-modal .container{padding-top:36px;}
  body.modal-open{overflow:hidden;}

  /* SCROLL REVEAL */
  .reveal{
    opacity:0;transform:translateY(16px) scale(0.99);
    transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
    transition-delay:var(--reveal-delay, 0ms);
  }
  .reveal.is-visible{opacity:1;transform:translateY(0) scale(1);}

  /* MOBILE STICKY CTA */
  .mobile-cta-bar{
    display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;
    padding:12px 16px;background:var(--card);border-top:1px solid var(--border);
    box-shadow:0 -8px 24px -12px rgba(26,29,39,0.25);
    transform:translateY(100%);transition:transform .35s cubic-bezier(.16,1,.3,1);
  }
  .mobile-cta-bar.show{transform:translateY(0);}
  .mobile-cta-bar a{
    display:block;text-align:center;background:var(--accent3-bg);color:#ffffff;
    padding:13px;border-radius:999px;font-weight:700;text-decoration:none;
  }
  @media(max-width:800px){
    .mobile-cta-bar{display:block;}
  }

  /* LEGAL FOOTER */
  .legal-links{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:14px;}
  .legal-links + .legal-links{margin-top:8px;}
  .legal-links summary{cursor:pointer;color:var(--text-muted);font-size:0.93rem;list-style:none;}
  .legal-links summary::-webkit-details-marker{display:none;}
  .legal-links summary:hover{color:var(--text);}
  .legal-links a{color:var(--text-muted);font-size:0.93rem;text-decoration:none;}
  .legal-links a:hover{color:var(--text);}
  .footer-bottom{
    display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;
    gap:14px;margin-top:24px;padding-top:20px;border-top:1px solid var(--border);
  }
  .footer-copyright{font-size:1.06rem;color:var(--text-muted);}
  .footer-payment-icons{display:flex;gap:12px;align-items:center;font-size:1.6rem;color:var(--text-muted);}
  .legal-box{
    max-width:640px;margin:16px auto 0;text-align:left;background:var(--bg-alt);
    border:1px solid var(--border);border-radius:0;padding:20px 24px;
    font-size:0.93rem;color:var(--text-muted);line-height:1.6;
  }
  .legal-box h4{color:var(--text);font-size:1.06rem;margin-bottom:6px;}
  .legal-box p{margin-bottom:10px;}

  /* ACCOUNT / LOGIN */
  .nav-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;}

  /* SELECTOR DE IDIOMA — pastilla con bandera + desplegable (banderas reales vía
     flagcdn.com en vez de emoji, que no siempre se renderiza como bandera en Windows).
     Solo lista los idiomas que existen de verdad (ES/EN); nada de opciones muertas. */
  .lang-switch-wrap{position:relative;flex-shrink:0;}
  .lang-switch-btn{
    display:flex;align-items:center;gap:7px;
    background:transparent;border:1px solid var(--border);color:var(--text);
    padding:6px 11px;border-radius:999px;cursor:pointer;font-family:inherit;
  }
  .lang-switch-btn:hover{background:var(--bg-alt);}
  .lang-switch-wrap.open .lang-switch-btn{background:var(--bg-alt);}
  .lang-switch-caret{font-size:0.62rem;color:var(--text-muted);transition:transform .15s;}
  .lang-switch-wrap.open .lang-switch-caret{transform:rotate(180deg);}
  .lang-flag{display:block;width:20px;height:15px;object-fit:cover;border-radius:3px;box-shadow:0 0 0 1px rgba(17,24,39,0.1);}
  .lang-switch-dropdown{
    display:none;position:absolute;top:calc(100% + 10px);right:0;z-index:130;
    background:var(--card);border:1px solid var(--border);border-radius:14px;
    box-shadow:0 20px 40px -16px rgba(17,24,39,0.28);padding:8px;min-width:168px;
  }
  .lang-switch-wrap.open .lang-switch-dropdown{display:block;}
  .lang-switch-item{
    display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;
    font-size:0.93rem;font-weight:600;color:var(--text);text-decoration:none;
  }
  a.lang-switch-item:hover{background:var(--bg-alt);}
  .lang-switch-item.is-current{color:var(--text-muted);cursor:default;}
  @media(max-width:800px){ .lang-switch-btn{padding:8px 10px;} }

  .nav-divider{width:1px;height:20px;background:var(--border);flex-shrink:0;}
  .nav-account-wrap{position:relative;}
  .nav-account-btn{
    display:flex;align-items:center;gap:6px;
    background:transparent;border:1px solid transparent;color:var(--text);
    padding:7px 10px;border-radius:999px;font-size:0.95rem;font-weight:700;
    cursor:pointer;white-space:nowrap;font-family:inherit;
  }
  .nav-account-btn:hover{border-color:var(--border);}
  .nav-account-btn .fa-user{font-size:0.85rem;color:var(--text-muted);}
  .nav-account-text{display:flex;flex-direction:column;line-height:1.25;text-align:left;}
  .nav-account-greeting{display:none;}
  .nav-account-label{font-size:0.95rem;font-weight:700;color:var(--text);}
  .nav-account-caret{font-size:0.7rem;color:var(--text-muted);margin-left:2px;transition:transform .15s;}
  .nav-account-wrap.open .nav-account-caret{transform:rotate(180deg);}
  .nav-account-wrap.open .nav-account-btn{border-color:var(--border);background:var(--bg);}

  .nav-account-dropdown{
    display:none;position:absolute;top:calc(100% + 10px);right:0;z-index:120;
    background:var(--card);border:1px solid var(--border);border-radius:0;
    box-shadow:0 20px 40px -16px rgba(17,24,39,0.25);
    padding:18px;width:250px;
  }
  .nav-account-dropdown::before{
    content:"";position:absolute;top:-6px;right:22px;width:12px;height:12px;
    background:var(--card);border-left:1px solid var(--border);border-top:1px solid var(--border);
    transform:rotate(45deg);
  }
  .nav-account-wrap.open .nav-account-dropdown{display:block;}
  .nav-dropdown-cta{width:100%;justify-content:center;padding:10px;font-size:1.06rem;}
  .nav-dropdown-new{text-align:center;font-size:1.04rem;color:var(--text-muted);margin-top:10px;}
  .nav-dropdown-new a{color:var(--accent3);font-weight:700;text-decoration:none;}
  .nav-dropdown-new a:hover{text-decoration:underline;}
  .nav-dropdown-divider{height:1px;background:var(--border);margin:14px 0;}
  .nav-dropdown-links{display:flex;flex-direction:column;gap:9px;}
  .nav-dropdown-links a{font-size:0.93rem;color:var(--text);text-decoration:none;}
  .nav-dropdown-links a:hover{color:var(--accent3);}

  @media(max-width:1180px){
    .nav-account-greeting{display:none;}
  }
  /* El nav ganó dos desplegables (Productos, Gestionar reseñas) y necesita más
     sitio: a partir de 1400px de ancho de ventana ya escondemos el texto de la
     cuenta (queda solo el icono) para que no se solape con los enlaces. */
  @media(max-width:1400px){
    .nav-account-text{display:none;}
    .nav-account-caret{display:none;}
    .nav-account-btn{padding:9px 10px;}
  }
  @media(max-width:800px){
    .nav-account-text{display:none;}
    .nav-account-caret{display:none;}
    .nav-account-btn .fa-user{display:inline;}
    .nav-account-btn{padding:9px 10px;}
    .nav-account-dropdown{right:-40px;width:230px;}
  }

  /* CARRITO */
  .nav-cart-btn{
    position:relative;flex-shrink:0;background:transparent;border:1px solid transparent;
    color:var(--text);width:40px;height:38px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;font-size:1.05rem;font-family:inherit;
  }
  .nav-cart-btn:hover{border-color:var(--border);background:var(--bg);}
  .cart-badge{
    position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 4px;
    background:var(--accent3-bg);color:#ffffff;font-size:0.9rem;font-weight:700;
    border-radius:999px;align-items:center;justify-content:center;line-height:1;
  }
  .blank-add-btn{flex-shrink:0;white-space:nowrap;}
  .blank-option{
    display:flex;align-items:center;gap:18px;margin-top:20px;
    background:var(--card);border:1px dashed var(--border);border-radius:0;
    padding:20px 24px;
  }
  #precios .blank-option{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.25);}
  .blank-option-photo{
    width:120px;height:120px;border-radius:0;flex-shrink:0;overflow:hidden;background:var(--bg-alt);
  }
  .blank-option-photo img{width:100%;height:100%;object-fit:cover;display:block;}
  @media(max-width:700px){
    .blank-option-photo{width:88px;height:88px;}
  }
  .blank-option-info{flex:1;min-width:0;}
  .blank-option-name{font-weight:700;font-size:1.06rem;}
  #precios .blank-option-name{color:#ffffff;}
  .blank-option-desc{font-size:0.93rem;color:var(--text-muted);margin-top:4px;line-height:1.5;}
  #precios .blank-option-desc{color:rgba(255,255,255,0.75);}
  .blank-option-price{
    font-family:'Work Sans',sans-serif;font-weight:700;font-size:1.5rem;flex-shrink:0;
  }
  #precios .blank-option-price{color:#ffffff;}
  .blank-option-price .price-currency{font-size:1.03rem;font-weight:600;color:var(--text-muted);margin-left:2px;}
  .blank-option-price-unit{font-size:1.04rem;font-weight:600;color:var(--text-muted);margin-left:2px;}
  #precios .blank-option-price-unit{color:rgba(255,255,255,0.65);}
  @media(max-width:700px){
    .blank-option{flex-wrap:wrap;}
    .blank-option-price{order:3;}
    .blank-option-info{order:1;flex-basis:100%;}
    .blank-option-icon{order:0;}
    .blank-add-btn{order:4;flex-basis:100%;}
  }

  .cart-drawer-overlay{
    display:none;position:fixed;inset:0;z-index:310;
    background:rgba(11,18,32,0.45);
  }
  .cart-drawer-overlay.open{display:block;}
  body.cart-open{overflow:hidden;}
  .cart-drawer{
    position:fixed;top:0;right:0;bottom:0;width:100%;max-width:420px;
    background:var(--card);box-shadow:-20px 0 50px -20px rgba(17,24,39,0.35);
    display:flex;flex-direction:column;
    transform:translateX(100%);transition:transform .25s ease;
  }
  .cart-drawer-overlay.open .cart-drawer{transform:translateX(0);}
  .cart-drawer-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:20px 22px;border-bottom:1px solid var(--border);flex-shrink:0;
  }
  .cart-drawer-head h3{font-size:1.1rem;display:flex;align-items:center;gap:9px;}
  .cart-drawer-body{flex:1;overflow-y:auto;padding:18px 22px;}
  .cart-items{display:flex;flex-direction:column;gap:14px;}
  .cart-item{
    display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:12px;
    border:1px solid var(--border);border-radius:0;padding:12px 14px;
  }
  .cart-item-name{font-weight:700;font-size:1.06rem;}
  .cart-item-price{font-size:1.02rem;color:var(--text-muted);margin-top:2px;}
  .cart-item-qty{display:flex;align-items:center;gap:8px;}
  .cart-qty-btn{
    width:24px;height:24px;border-radius:50%;border:1px solid var(--border);background:transparent;
    color:var(--text);cursor:pointer;font-size:1.03rem;line-height:1;font-family:inherit;
    display:flex;align-items:center;justify-content:center;
  }
  .cart-qty-btn:hover{border-color:var(--accent3);color:var(--accent3);}
  .cart-item-subtotal{font-weight:700;font-size:1.06rem;white-space:nowrap;}
  .cart-item-remove{
    background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:1.06rem;padding:4px;
  }
  .cart-item-remove:hover{color:#c0392b;}
  .cart-drawer-footer{
    border-top:1px solid var(--border);padding:18px 22px 22px;flex-shrink:0;
  }
  .cart-total-row{
    display:flex;justify-content:space-between;align-items:center;
    font-weight:700;font-size:1.15rem;margin-bottom:14px;
  }
  .cart-checkout-btn{width:100%;justify-content:center;padding:13px;font-size:1.03rem;}
  .cart-footer-note{
    text-align:center;font-size:1.02rem;color:var(--text-muted);margin-top:12px;
  }
  .account-modal-overlay{
    display:none;position:fixed;inset:0;z-index:300;overflow-y:auto;
    background:var(--bg-alt);
    flex-direction:column;align-items:center;padding:48px 20px 40px;
  }
  .account-modal-overlay.open{display:flex;}
  .account-page-close{position:fixed;top:16px;right:20px;}
  .account-page-logo{
    display:flex;align-items:center;gap:10px;margin-bottom:28px;
    font-size:1.3rem;font-weight:800;letter-spacing:-0.01em;color:var(--text);
  }
  .account-page-logo svg{flex-shrink:0;}
  .account-modal{
    background:var(--card);border:1px solid var(--border);border-radius:0;max-width:400px;width:100%;
    padding:28px 26px;box-shadow:0 2px 8px rgba(17,24,39,0.06);position:relative;
  }
  #accountLoggedOut{text-align:left;}
  .account-modal h3{font-size:1.3rem;margin-bottom:18px;letter-spacing:-0.01em;font-weight:700;}
  #accountLoggedOut label{display:block;font-size:0.93rem;font-weight:700;color:var(--text);margin-bottom:6px;}
  .account-modal input[type=email]{
    width:100%;padding:11px 14px;border:1px solid #888c94;border-radius:0;
    font-size:16px;margin-bottom:16px;font-family:inherit;transition:border-color .15s, box-shadow .15s;
  }
  .account-modal input[type=email]:focus{outline:none;border-color:var(--accent3);box-shadow:0 0 0 3px rgba(25,103,210,0.15);}
  .account-modal .btn-primary{width:100%;justify-content:center;padding:12px;font-size:1.03rem;}
  .account-terms{font-size:1.02rem;color:var(--text-muted);line-height:1.5;margin-top:14px;}
  .account-terms a{color:var(--accent3);text-decoration:none;}
  .account-terms a:hover{text-decoration:underline;}
  .account-help{margin-top:14px;}
  .account-help a{font-size:1.06rem;color:var(--accent3);text-decoration:none;font-weight:600;}
  .account-help a:hover{text-decoration:underline;}
  .account-page-divider{height:1px;background:var(--border);margin:22px 0;}
  .account-business-note{font-size:0.93rem;color:var(--text);line-height:1.5;}
  .account-business-note strong{font-weight:700;}
  .account-business-note a{color:var(--accent3);text-decoration:none;font-size:0.93rem;}
  .account-business-note a:hover{text-decoration:underline;}
  .account-msg{font-size:1.04rem;margin-top:14px;padding:10px 12px;border-radius:0;display:none;}
  .account-msg.show{display:block;}
  .account-msg.success{background:rgba(52,168,83,0.12);color:var(--accent2);}
  .account-msg.error{background:rgba(234,67,53,0.12);color:#c0392b;}
  .order-list{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:8px;}
  .order-item{
    border:1px solid var(--border);border-radius:0;padding:14px 16px;
    display:flex;justify-content:space-between;align-items:center;gap:12px;
  }
  .order-item-name{font-weight:700;font-size:1.03rem;}
  .order-item-meta{font-size:1.06rem;color:var(--text-muted);}
  .order-status-pill{
    font-size:0.98rem;font-weight:700;padding:4px 10px;border-radius:999px;
    background:rgba(25,103,210,0.12);color:var(--accent3);white-space:nowrap;
  }
  .order-reorder-btn{
    font-size:1.04rem;font-weight:700;color:var(--accent3);background:none;border:none;cursor:pointer;
    text-decoration:underline;padding:0;font-family:inherit;
  }
  .account-signed-in-email{font-size:0.93rem;color:var(--text-muted);}
  .account-logout{
    font-size:0.93rem;color:var(--text-muted);background:none;border:none;cursor:pointer;
    padding:0;font-family:inherit;display:inline-flex;align-items:center;gap:7px;font-weight:600;
    transition:color .15s;
  }
  .account-logout:hover{color:#c0392b;}

  /* MI CUENTA: cabecera con avatar */
  .account-header{display:flex;align-items:center;gap:14px;margin-bottom:24px;}
  .account-header h3{margin-bottom:4px;}
  .account-avatar{
    width:46px;height:46px;border-radius:50%;flex-shrink:0;
    background:linear-gradient(135deg, var(--accent3), #6e4fd6);color:#fff;
    display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.15rem;
  }
  .account-section-label{
    font-size:1.02rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;
    color:var(--text-muted);margin-bottom:10px;
  }
  .account-loading{
    display:flex;align-items:center;gap:9px;font-size:1.06rem;color:var(--text-muted);padding:6px 0;
  }
  .spinner-dot{
    width:8px;height:8px;border-radius:50%;background:var(--accent3);flex-shrink:0;
    animation:spinnerPulse 1s ease-in-out infinite;
  }
  @keyframes spinnerPulse{0%,100%{opacity:0.3;transform:scale(0.8);}50%{opacity:1;transform:scale(1.1);}}

  .empty-state{
    text-align:center;padding:28px 16px;border:1px dashed var(--border);border-radius:0;
    color:var(--text-muted);
  }
  .empty-state i{font-size:1.5rem;color:var(--border);margin-bottom:10px;display:block;}
  .empty-state p{font-size:1.04rem;line-height:1.5;margin:0;}
  .empty-state.small{padding:16px;}
  .empty-state.small i{font-size:1.2rem;color:var(--accent2);margin-bottom:6px;}

  .account-footer{margin-top:24px;border-top:1px solid var(--border);padding-top:16px;}

  /* RESPUESTAS IA (dentro del modal de cuenta) */
  .ai-reply-box{
    margin-top:26px;border:1px solid var(--border);border-radius:0;padding:18px;
    background:var(--bg-alt);
  }
  .ai-reply-desc{font-size:0.98rem;color:var(--text-muted);line-height:1.5;margin-bottom:14px;}
  .ai-reply-status{
    display:flex;align-items:center;gap:8px;font-size:0.98rem;font-weight:600;color:var(--text);
    margin-bottom:8px;
  }
  .ai-reply-status i{color:var(--accent2);flex-shrink:0;}
  .ai-reply-status.warn i{color:#c0792b;}
  .ai-reply-box .btn{width:100%;justify-content:center;}
  .ai-reply-price{font-weight:700;color:var(--text);}

  /* PANEL DE ADMINISTRADOR (visible solo para la cuenta admin) */
  .admin-panel{
    margin-top:26px;border:1px solid rgba(124,58,237,0.25);border-radius:0;
    padding:18px;background:linear-gradient(180deg, rgba(124,58,237,0.06), rgba(124,58,237,0.02));
  }
  .admin-panel-head{
    display:flex;align-items:center;flex-wrap:wrap;gap:8px 9px;font-weight:700;font-size:1rem;color:var(--text);
    margin-bottom:16px;
  }
  .admin-panel-head i{color:#7C3AED;flex-shrink:0;}
  .admin-panel-head span:not(.admin-badge){white-space:nowrap;}
  .admin-badge{
    margin-left:auto;font-size:0.9rem;font-weight:700;color:#7C3AED;background:rgba(124,58,237,0.12);
    padding:3px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:0.03em;white-space:nowrap;
  }
  .admin-error{font-size:1.04rem;color:#c0392b;}
  .admin-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;}
  .stat-tile{
    background:var(--card);border:1px solid var(--border);border-radius:0;
    padding:12px 14px;text-align:center;
  }
  .stat-value{font-size:1.5rem;font-weight:700;color:var(--text);line-height:1.2;}
  .stat-label{font-size:0.96rem;color:var(--text-muted);margin-top:2px;}
  .progress-block{margin-bottom:16px;}
  .progress-row{
    display:flex;justify-content:space-between;font-size:0.93rem;color:var(--text);
    margin-bottom:7px;
  }
  .progress-bar{width:100%;height:8px;border-radius:999px;background:var(--border);overflow:hidden;}
  .progress-fill{height:100%;background:#7C3AED;border-radius:999px;transition:width .3s ease;}
  .progress-note{display:inline-block;font-size:1.04rem;color:var(--text-muted);margin-top:8px;}
  .progress-note.ready{color:var(--accent2);font-weight:700;}
  .progress-note.ready i{margin-right:4px;}
  .admin-order-list{list-style:none;display:flex;flex-direction:column;gap:8px;}
  .admin-order-item{
    display:flex;justify-content:space-between;gap:10px;font-size:0.93rem;
    background:var(--card);border:1px solid var(--border);border-radius:0;padding:9px 12px;
  }
  .admin-order-name{font-weight:600;color:var(--text);}
  .admin-order-meta{color:var(--text-muted);white-space:nowrap;}

  /* Blog */
  .breadcrumb{font-size:1.06rem;color:var(--text-muted);margin-bottom:18px;}
  .breadcrumb a{color:var(--text-muted);}
  .breadcrumb a:hover{color:var(--accent3);}
  .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
  @media(max-width:900px){.blog-grid{grid-template-columns:1fr;}}
  .blog-card{
    background:var(--card);border:1px solid var(--border);border-radius:0;
    padding:26px;display:flex;flex-direction:column;box-shadow:0 8px 30px rgba(17,24,39,0.06);
    text-decoration:none;color:inherit;transition:transform 0.15s ease, box-shadow 0.15s ease;
  }
  .blog-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(17,24,39,0.1);}
  .blog-card .blog-eyebrow{color:var(--accent3);font-weight:700;font-size:1.02rem;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:10px;}
  .blog-card h3{font-size:1.2rem;margin-bottom:10px;line-height:1.3;}
  .blog-card p{color:var(--text-muted);font-size:1.03rem;line-height:1.55;flex-grow:1;}
  .blog-card .blog-readmore{margin-top:16px;font-weight:700;color:var(--accent3);font-size:1.06rem;}
  .article-meta{color:var(--text-muted);font-size:1.06rem;margin-bottom:8px;}
  .article-body{max-width:720px;margin:0 auto;font-size:1.08rem;line-height:1.75;color:var(--text);}
  .article-body h2{font-size:1.5rem;margin:40px 0 16px;font-family:'Montserrat',sans-serif;}
  .article-body h3{font-size:1.2rem;margin:28px 0 12px;font-family:'Montserrat',sans-serif;}
  .article-body p{margin-bottom:18px;}
  .article-body ul,.article-body ol{margin:0 0 18px 22px;}
  .article-body li{margin-bottom:8px;}
  .article-body a{color:var(--accent3);font-weight:600;}
  .article-body blockquote{
    border-left:4px solid var(--accent3);padding:4px 20px;margin:24px 0;
    color:var(--text-muted);font-style:italic;
  }
  .article-cta{
    max-width:720px;margin:40px auto 0;background:var(--bg-alt);border-radius:0;
    padding:28px;text-align:center;
  }
  .article-cta h3{font-size:1.25rem;margin-bottom:10px;}

  /* ---- Product Detail Page (PDP / "tienda") ---- */
  .pdp-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:52px;align-items:start;padding:12px 0 60px;}
  .pdp-gallery{position:relative;position:sticky;top:96px;align-self:start;}
  .pdp-gallery-frame{position:relative;overflow:hidden;border-radius:0;box-shadow:0 24px 54px -26px rgba(17,24,39,0.3);cursor:zoom-in;aspect-ratio:4/3;}
  .pdp-gallery-frame img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0;transition:transform .45s cubic-bezier(.2,.7,.2,1);will-change:transform;}
  .pdp-gallery-frame:hover img{transform:scale(1.55);}
  .pdp-gallery-frame .img-placeholder-box{width:100%;height:100%;}
  .pdp-gallery-frame .dimension-chip{position:absolute;bottom:16px;left:16px;z-index:2;pointer-events:none;}
  .pdp-gallery-caption{color:var(--text-muted);font-size:1.02rem;text-align:center;margin-top:10px;}
  @media (hover:none){
    .pdp-gallery-frame{cursor:default;}
    .pdp-gallery-frame:hover img{transform:none;}
  }
  .pdp-info{padding-top:4px;}
  .pdp-eyebrow{color:var(--accent3);font-weight:700;font-size:1.06rem;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:10px;}
  .pdp-rating{display:flex;align-items:center;gap:8px;color:var(--accent2);font-size:0.93rem;margin-bottom:14px;}
  .pdp-rating .rating-count{color:var(--text-muted);font-size:0.93rem;}
  .pdp-title{font-size:1.9rem;margin-bottom:12px;line-height:1.2;}
  .pdp-pitch{color:var(--text);font-size:1.03rem;margin-bottom:26px;line-height:1.6;}

  .buy-box{position:relative;background:var(--card);border:1px solid var(--border);border-radius:0;padding:26px;box-shadow:0 14px 38px -18px rgba(17,24,39,0.18);overflow:hidden;}
  .buy-box::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--accent3-bg);}
  .buy-box>.segmented{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1.5px solid var(--border);border-radius:999px;overflow:hidden;flex-wrap:nowrap;}
  .buy-box>.segmented .seg-opt{border:none;border-radius:0;text-align:center;padding:11px 10px;font-size:0.96rem;}
  .buy-box>.segmented .seg-opt:first-child{border-right:1.5px solid var(--border);}
  .buy-box>.segmented .seg-opt.selected{background:var(--accent3-bg);color:#fff;font-weight:700;}
  .buy-box-price{display:flex;align-items:baseline;gap:10px;margin-bottom:2px;flex-wrap:wrap;}
  .buy-box-price .amount{font-family:'Work Sans',sans-serif;font-size:2.3rem;font-weight:700;letter-spacing:-0.02em;}
  .buy-box-price .per-unit{color:var(--text-muted);font-size:1.04rem;}
  .buy-box-price .compare-price{color:var(--text-muted);font-size:1.3rem;font-weight:600;text-decoration:line-through;text-decoration-color:currentColor;opacity:0.75;}
  .buy-box-price .discount-badge{background:rgba(11,18,32,0.07);color:var(--text);font-size:0.86rem;font-weight:700;padding:3px 9px;border-radius:20px;line-height:1.4;}
  .buy-box-save{color:var(--accent3-bg);font-size:1.06rem;font-weight:700;margin-bottom:18px;display:block;}
  .buy-box-shipping{
    display:flex;align-items:center;gap:10px;
    background:rgba(11,18,32,0.04);border:1px solid rgba(11,18,32,0.13);border-radius:0;
    color:var(--text);font-size:0.92rem;line-height:1.4;padding:11px 14px;margin:2px 0 16px;
  }
  .buy-box-shipping i{font-size:0.98rem;flex-shrink:0;color:var(--accent3-bg);}
  .buy-box-shipping strong{font-weight:700;color:var(--accent3-bg);}
  .buy-box-shipping span.muted{opacity:0.65;font-weight:500;}

  /* RESPUESTAS CON IA — mismo fondo morado degradado + trama de puntos que usa
     ya /respuestas-ia (hero y sección demo), en vez del degradado claro propio
     que tenía antes, para que la demo de la home y la página dedicada compartan
     la misma firma visual de "esto es IA" en vez de dos tratamientos distintos. */
  #demo-ia{
    position:relative;overflow:hidden;
    background:linear-gradient(155deg, #150f2e 0%, #3a2270 55%, #7C3AED 150%);
  }
  #demo-ia::before{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
    background-image:radial-gradient(rgba(255,255,255,0.14) 1.3px, transparent 1.3px);
    background-size:26px 26px;
    -webkit-mask-image:radial-gradient(ellipse 65% 55% at 50% 15%, #000 25%, transparent 88%);
    mask-image:radial-gradient(ellipse 65% 55% at 50% 15%, #000 25%, transparent 88%);
  }
  #demo-ia > .container{position:relative;z-index:1;}
  #demo-ia .eyebrow{color:#b794f6;}
  #demo-ia .section-head h2{color:#ffffff;}
  #demo-ia .section-head p{color:rgba(255,255,255,0.82);}

  .ia-demo-card{
    max-width:980px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;
    background:#ffffff;border-radius:20px;overflow:hidden;
    box-shadow:0 30px 60px -20px rgba(9,6,20,0.55);
  }
  @media(max-width:760px){ .ia-demo-card{grid-template-columns:1fr;} }
  .ia-demo-card .customizer-form{
    margin:0;padding:32px;gap:16px;
    background:linear-gradient(165deg,#f8f6ff,#eef2fb);
    border-right:1px solid var(--border);
  }
  @media(max-width:760px){ .ia-demo-card .customizer-form{border-right:none;border-bottom:1px solid var(--border);} }
  .ia-demo-two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  @media(max-width:560px){ .ia-demo-two-col{grid-template-columns:1fr;} }
  .ia-demo-card .customizer-form textarea{
    font-family:inherit;font-size:16px;font-weight:400;padding:11px 14px;
    border-radius:10px;border:1px solid var(--border);background:#ffffff;color:var(--text);resize:vertical;
  }
  .ia-demo-card .customizer-form input[type=text],.ia-demo-card .customizer-form select{border-radius:10px;}
  .ia-demo-card .btn-primary{
    background:linear-gradient(135deg,#7C3AED,var(--accent3-bg));
    box-shadow:0 10px 24px -8px rgba(124,58,237,0.45);
  }
  .ia-demo-result{
    background:#ffffff;border:none;border-radius:0;padding:32px;
    min-height:220px;display:flex;flex-direction:column;
  }
  .ia-demo-result-label{
    display:flex;align-items:center;gap:9px;
    font-size:0.78rem;text-transform:uppercase;letter-spacing:0.04em;color:var(--text-muted);font-weight:700;margin-bottom:14px;
  }
  .ia-demo-result-avatar{
    width:26px;height:26px;border-radius:50%;flex-shrink:0;
    background:linear-gradient(135deg,#7C3AED,var(--accent3-bg));
    display:flex;align-items:center;justify-content:center;color:#ffffff;font-size:0.72rem;
  }
  .ia-demo-result-body{font-size:1.02rem;line-height:1.6;color:var(--text);white-space:pre-wrap;flex:1;}
  .ia-demo-result-placeholder{color:var(--text-muted);font-style:italic;}
  .ia-demo-result-error{color:#c0392b;}
  .ia-demo-disclaimer{font-size:0.85rem;color:var(--text-muted);margin-top:16px;}

  .ia-typing{display:inline-flex;gap:4px;align-items:center;vertical-align:middle;margin-left:2px;}
  .ia-typing span{width:6px;height:6px;border-radius:50%;background:#7C3AED;opacity:0.35;animation:iaTypingBounce 1.1s infinite ease-in-out;}
  .ia-typing span:nth-child(2){animation-delay:0.15s;}
  .ia-typing span:nth-child(3){animation-delay:0.3s;}
  @keyframes iaTypingBounce{
    0%,60%,100%{opacity:0.35;transform:translateY(0);}
    30%{opacity:1;transform:translateY(-3px);}
  }

  .buy-box-packs{display:flex;flex-direction:column;gap:10px;margin:6px 0 20px;}
  .pack-opt{
    position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;
    border:1.5px solid var(--border);border-radius:var(--radius);padding:13px 16px;cursor:pointer;
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  .pack-opt:hover{border-color:var(--accent3);}
  .pack-opt input{position:absolute;opacity:0;width:1px;height:1px;}
  .pack-opt.selected{border-color:var(--accent3);box-shadow:0 0 0 3px rgba(25,103,210,0.12);}
  .pack-opt-label{display:flex;flex-direction:column;gap:2px;}
  .pack-opt-name{font-weight:700;font-size:1.04rem;}
  .pack-opt-sub{color:var(--text-muted);font-size:1.02rem;}
  .pack-opt-right{display:flex;flex-direction:column;align-items:flex-end;gap:2px;}
  .pack-opt-price{font-weight:700;font-size:1.05rem;}
  .pack-opt-save{color:var(--accent2);font-size:0.96rem;font-weight:700;}

  /* SELECTOR RÁPIDO: cantidad (-/+) + toggle Personalizado/Vacío, estilo ShopNFC */
  .pdp-quickbuy-row{display:flex;align-items:center;justify-content:space-between;gap:14px;}
  .pdp-quickbuy-label{font-weight:700;font-size:1.02rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.03em;}
  .qty-stepper{display:flex;align-items:center;border:1.5px solid var(--border);border-radius:999px;overflow:hidden;flex-shrink:0;align-self:flex-start;width:max-content;}
  .qty-btn{
    width:36px;height:36px;border:none;background:var(--bg);color:var(--text);cursor:pointer;
    font-size:1.05rem;line-height:1;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:inherit;
  }
  .qty-btn:hover{background:rgba(66,133,244,0.12);color:var(--accent3-bg);}
  .qty-input{
    width:50px;height:36px;border:none;border-left:1px solid var(--border);border-right:1px solid var(--border);
    text-align:center;font-weight:700;font-size:1.02rem;font-family:inherit;color:var(--text);background:var(--card);
  }
  .qty-input::-webkit-outer-spin-button,.qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
  .volume-discount-note{
    margin-top:12px;font-size:1.02rem;color:var(--text);background:rgba(11,18,32,0.04);border-radius:0;
    border-left:3px solid var(--accent3-bg);padding:10px 12px;display:flex;align-items:center;gap:11px;
  }
  .volume-discount-note i{
    display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
    width:26px;height:26px;border-radius:50%;background:var(--accent3-bg);color:#fff;font-size:0.82rem;
  }

  .volume-table{margin-top:12px;border:1px solid var(--border);border-radius:0;overflow:hidden;}
  .volume-table table{width:100%;border-collapse:collapse;font-size:0.91rem;}
  .volume-table caption{
    text-align:left;font-size:0.94rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;
    color:#fff;background:var(--accent3-bg);padding:9px 12px;
  }
  .volume-table th,.volume-table td{padding:10px 12px;text-align:left;}
  .volume-table thead th{background:rgba(11,18,32,0.04);font-weight:700;color:var(--text);font-size:0.91rem;text-transform:uppercase;letter-spacing:0.04em;}
  .volume-table tbody tr+tr{border-top:1px solid var(--border);}
  .volume-table tbody td:last-child{font-weight:700;color:var(--text);}
  .volume-table tbody tr:last-child{background:rgba(66,133,244,0.08);}
  .volume-table tbody tr:last-child td{font-weight:700;}
  .volume-table tbody tr:last-child td:last-child{color:var(--accent3-bg);}
  .volume-table .discount-pill{
    display:inline-block;background:rgba(11,18,32,0.08);color:var(--text);font-weight:700;
    border-radius:999px;padding:2px 9px;font-size:0.91rem;
  }

  .pdp-ref{color:var(--text-muted);font-size:1.04rem;margin:-4px 0 14px;}
  .pdp-ref strong{color:var(--text);font-weight:600;}

  .pdp-gallery-disclaimer{color:var(--text-muted);font-size:0.94rem;text-align:center;margin-top:4px;opacity:0.8;}

  .buy-box-cta{width:100%;justify-content:center;}
  .buy-box-note{color:var(--text-muted);font-size:1.06rem;margin-top:12px;text-align:center;}
  .buy-box-trust{list-style:none;display:flex;flex-direction:column;gap:11px;}
  .buy-box-trust li{display:flex;gap:10px;align-items:center;font-size:1.02rem;color:var(--text-muted);}
  .buy-box-trust i{color:var(--accent2);width:18px;font-size:1.05rem;text-align:center;flex-shrink:0;}

  .pdp-checks{list-style:none;display:flex;flex-direction:column;gap:9px;margin:0 0 24px;}
  .pdp-checks li{display:flex;gap:10px;align-items:center;font-size:1rem;color:var(--text);font-weight:500;}
  .pdp-checks i{color:var(--accent2);flex-shrink:0;font-size:1.03rem;}

  /* Bloque secundario de la buy-box (envío, garantía, IA, pago): agrupado y
     colapsado por defecto para que lo esencial (precio/cantidad/CTA) se lea
     de un vistazo, sin tener que scrollear información secundaria. */
  .buy-box-more{margin-top:20px;padding-top:16px;border-top:1px solid var(--border);}
  .buy-box-more summary{
    cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;
    font-size:0.93rem;font-weight:700;color:var(--text);
  }
  .buy-box-more summary::-webkit-details-marker{display:none;}
  .buy-box-more summary::marker{content:"";}
  .buy-box-more summary i{color:var(--text-muted);font-size:0.98rem;transition:transform .2s;}
  .buy-box-more[open] summary i{transform:rotate(180deg);}
  .buy-box-more-body{margin-top:16px;display:flex;flex-direction:column;gap:14px;}

  .buy-box-payments{display:flex;gap:14px;align-items:center;justify-content:center;font-size:1.4rem;color:var(--text-muted);}

  /* Insignias de métodos de pago (estilo oficial, siempre visibles bajo el CTA) */
  .payment-badges{display:flex;flex-wrap:wrap;gap:7px;align-items:center;justify-content:center;margin:12px 0;}
  .payment-badges .payment-badge{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:29px;background:#ffffff;border:1px solid var(--border);
    border-radius:5px;font-size:1.1rem;box-shadow:0 1px 2px rgba(17,24,39,0.07);flex-shrink:0;
  }

  .buy-box-guarantee{display:flex;gap:10px;align-items:flex-start;background:rgba(26,143,92,0.08);border:1px solid rgba(26,143,92,0.22);border-radius:0;padding:12px 14px;font-size:0.91rem;color:#0f6b41;line-height:1.45;}
  .buy-box-guarantee i{margin-top:2px;flex-shrink:0;}

  .buy-box-upsell{display:flex;gap:10px;align-items:flex-start;background:rgba(66,133,244,0.08);border:1px solid rgba(66,133,244,0.3);border-radius:0;padding:12px 14px;font-size:0.91rem;color:var(--accent3-bg);line-height:1.45;}
  .buy-box-upsell i{margin-top:2px;flex-shrink:0;}
  .buy-box-upsell strong{font-weight:700;}

  .pdp-desc-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}
  .pdp-desc-grid p{color:var(--text);margin-bottom:16px;line-height:1.7;}
  .pdp-desc-grid .specs-list{list-style:none;display:flex;flex-direction:column;gap:16px;}
  .pdp-desc-grid .specs-list li{display:flex;gap:12px;align-items:flex-start;color:var(--text-muted);font-size:1.03rem;line-height:1.5;}
  .pdp-desc-grid .specs-list li strong{color:var(--text);}
  .pdp-desc-grid .specs-list li i{
    display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;
    width:28px;height:28px;border-radius:50%;background:rgba(66,133,244,0.12);color:var(--accent3-bg);font-size:0.88rem;
  }

  .shipping-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px;}
  .shipping-card{background:var(--card);border:1px solid var(--border);border-radius:0;padding:26px 22px;text-align:center;}
  .shipping-card i{font-size:1.4rem;color:var(--accent3);margin-bottom:14px;}
  .shipping-card h3{font-size:1rem;margin-bottom:8px;}
  .shipping-card p{color:var(--text-muted);font-size:1.04rem;line-height:1.5;}

  .step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px;}
  .step-card{text-align:center;padding:8px;}
  .step-num{width:38px;height:38px;border-radius:50%;background:var(--accent3-bg);color:#ffffff;font-weight:700;font-size:1rem;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;}
  .step-card h3{font-size:1.02rem;margin-bottom:8px;}
  .step-card p{color:var(--text-muted);font-size:1.04rem;line-height:1.5;}

  .stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:8px;}
  .stat-card{background:var(--card);border:1px solid var(--border);border-radius:0;padding:28px 24px;text-align:center;}
  .stat-card .stat-num{font-family:'Work Sans',sans-serif;font-size:2.4rem;font-weight:700;color:var(--accent3);line-height:1;margin-bottom:10px;display:block;}
  .stat-card p{color:var(--text-muted);font-size:1.04rem;line-height:1.5;margin:0;}
  .stat-source{color:var(--text-muted);font-size:0.91rem;text-align:center;margin-top:16px;}
  .stat-source a{color:var(--text-muted);}

  .cross-sell{display:flex;gap:24px;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:0;padding:22px;box-shadow:0 10px 34px -22px rgba(17,24,39,0.15);}
  .cross-sell img{width:110px;height:110px;object-fit:cover;border-radius:0;flex-shrink:0;}
  .cross-sell .img-placeholder-box{width:110px;height:110px;flex-shrink:0;font-size:0.9rem;padding:8px;gap:5px;}
  .cross-sell .img-placeholder-box i{font-size:1.1rem;}
  .cross-sell-info{flex:1;}
  .cross-sell-eyebrow{color:var(--accent3);font-weight:700;font-size:0.91rem;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:6px;}
  .cross-sell-info h3{font-size:1.1rem;margin-bottom:6px;}
  .cross-sell-info p{color:var(--text-muted);font-size:1.04rem;margin-bottom:14px;}
  .cross-sell-price{font-weight:700;margin-right:16px;white-space:nowrap;}
  .cross-sell-actions{display:flex;align-items:center;flex-wrap:wrap;gap:6px;}

  @media(max-width:800px){
    .pdp-hero,.pdp-desc-grid{grid-template-columns:1fr;}
    .pdp-gallery{position:static;}
    .shipping-grid{grid-template-columns:1fr;}
    .step-grid{grid-template-columns:1fr;}
    .stat-grid{grid-template-columns:1fr;}
    .cross-sell{flex-direction:column;text-align:center;}
    .cross-sell-actions{justify-content:center;}
  }
  .article-cta p{color:var(--text-muted);margin-bottom:16px;}