/* =====================================================================
   Cruzial v7 · Capa «glass» (glassmorphism estilo Apple).
   Todo el efecto vive aquí: para quitarlo basta con quitar el <link> a este archivo.
   Ajustes rápidos en las variables de :root.
   ===================================================================== */
:root{
  --glass-blur:20px;                 /* radio de desenfoque */
  --glass-sat:180%;                  /* saturación del fondo visto a través */
  --glass-filter:saturate(var(--glass-sat)) blur(var(--glass-blur));
  --glass-light:rgba(255,255,255,.58);        /* vidrio claro */
  --glass-light-strong:rgba(255,255,255,.80); /* vidrio claro denso (paneles con texto) */
  --glass-dark:rgba(12,20,44,.42);            /* vidrio oscuro sobre fotos */
  --glass-dark-strong:rgba(10,16,32,.76);     /* cabecera */
  --glass-blue:rgba(26,77,148,.90);           /* botón principal */
  --glass-edge-light:rgba(255,255,255,.78);   /* borde 1px en vidrio claro */
  --glass-edge-dark:rgba(255,255,255,.18);    /* borde 1px en vidrio oscuro */
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.75);
  --glass-hi-dark:inset 0 1px 0 rgba(255,255,255,.16);
  --glass-sheen:linear-gradient(180deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,0) 46%);
  --glass-sheen-dark:linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 50%);
  --glass-shadow:0 1px 2px rgba(10,26,74,.05),0 18px 44px -24px rgba(10,26,74,.38);
  --glass-shadow-dark:0 24px 60px -30px rgba(0,0,0,.6);
  --glass-halo-a:rgba(91,155,255,.30);
  --glass-halo-b:rgba(26,77,148,.20);
  --glass-halo-c:rgba(0,105,209,.14);
  --glass-muted:#55555a;                      /* gris de texto pequeño sobre vidrio (AA) */
}
@media(max-width:640px){:root{--glass-blur:12px;--glass-sat:160%}}

/* ---------- Fondos con halos para que el vidrio se note (gradientes, sin filtros) ---------- */
.services,.shop-list,.co-page,.about7,.contact-section{
  background:
    radial-gradient(38% 46% at 8% 18%,var(--glass-halo-a),transparent 70%),
    radial-gradient(34% 40% at 92% 62%,var(--glass-halo-b),transparent 70%),
    radial-gradient(30% 34% at 46% 104%,var(--glass-halo-c),transparent 70%),
    #f4f6fb!important}
.shop-hero{background:radial-gradient(40% 70% at 96% 0%,var(--glass-halo-a),transparent 70%),#fff!important}
.editorial{background:radial-gradient(40% 50% at 90% 10%,var(--glass-halo-b),transparent 70%),radial-gradient(30% 40% at 5% 90%,var(--glass-halo-c),transparent 70%),#f5f5f7!important}

/* ---------- Cabecera (el vidrio va en ::before para que el menú móvil pueda tener su propio vidrio) ---------- */
.site-header{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-bottom:0!important;isolation:isolate}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--glass-sheen-dark),var(--glass-dark-strong);
  -webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);
  border-bottom:1px solid var(--glass-edge-dark);box-shadow:var(--glass-hi-dark)}
.site-header .nav-cta{background:rgba(255,255,255,.9)!important;border:1px solid rgba(255,255,255,.9)!important;box-shadow:var(--glass-hi),0 6px 18px -8px rgba(0,0,0,.45)}
.site-header .cart-btn:hover,.site-header .menu-toggle:hover{background:rgba(255,255,255,.12)}
.site-header .menu-toggle{border-color:var(--glass-edge-dark);background:rgba(255,255,255,.06);box-shadow:var(--glass-hi-dark)}
@media(max-width:900px){
  .site-header .nav{background:var(--glass-sheen-dark),rgba(10,16,34,.80)!important;
    -webkit-backdrop-filter:saturate(170%) blur(24px);backdrop-filter:saturate(170%) blur(24px);
    border-bottom:1px solid var(--glass-edge-dark)!important;box-shadow:var(--glass-hi-dark),0 30px 50px -20px rgba(0,0,0,.55)!important}
}
@media(max-width:640px){.site-header .nav{-webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px)}}

/* ---------- Aviso de prototipo ---------- */
.banner-demo{background:linear-gradient(90deg,#0b1a40,#10265c 50%,#0b1a40)!important;color:#d6e3fb!important;border-bottom:1px solid rgba(255,255,255,.12);box-shadow:inset 0 -1px 0 rgba(255,255,255,.04)}
.banner-demo .demo-dot{background:#9cc3ff!important;box-shadow:0 0 0 3px rgba(156,195,255,.2)}
.co-demo,.co-done-demo{background:rgba(255,244,224,.72)!important;border:1px solid rgba(224,138,0,.28);box-shadow:var(--glass-hi);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter)}
.shop-flags li{background:var(--glass-light)!important;border:1px solid var(--glass-edge-light);box-shadow:var(--glass-hi),0 4px 14px -10px rgba(10,26,74,.4);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter)}
.shop-flags .flag-warn{background:rgba(255,244,224,.8)!important;border-color:rgba(224,138,0,.3)}

/* ---------- Botones ---------- */
.btn:not(.nav-cta){position:relative;border-radius:999px;
  background:var(--glass-sheen),var(--glass-blue);border-color:rgba(255,255,255,.28);
  box-shadow:var(--glass-hi),0 10px 24px -12px rgba(26,77,148,.65);
  -webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);
  transition:background .35s var(--ease-apple),box-shadow .35s var(--ease-apple),transform .35s var(--ease-apple)}
.btn:not(.nav-cta):hover{background:var(--glass-sheen),rgba(0,36,136,.92);box-shadow:var(--glass-hi),0 14px 30px -12px rgba(26,77,148,.75)}
.cesta .btn,.shop-page .btn,.cesta-empty .btn{background:var(--glass-sheen),var(--glass-blue)!important;border-color:rgba(255,255,255,.28)!important}
.cesta .btn:hover,.shop-page .btn:hover{background:var(--glass-sheen),rgba(0,36,136,.94)!important}
.shop-add.is-added{background:var(--glass-sheen),#1d7a3a!important}
/* blancos sobre foto / fondos oscuros */
.v6-hero .btn,.home-hero .btn,.digital-hero .btn{background:var(--glass-sheen),rgba(255,255,255,.86)!important;border-color:rgba(255,255,255,.95)!important;color:#0a1a4a!important;box-shadow:var(--glass-hi),0 12px 30px -14px rgba(0,0,0,.55)}
.v6-hero .btn:hover,.home-hero .btn:hover,.digital-hero .btn:hover{background:var(--glass-sheen),rgba(255,255,255,.96)!important}
.btn.light{background:var(--glass-sheen),rgba(255,255,255,.88)!important;border-color:rgba(255,255,255,.95)!important;color:var(--azul)!important;box-shadow:var(--glass-hi),0 12px 30px -14px rgba(0,0,0,.45)}
.btn.light:hover{background:var(--glass-sheen),#fff!important}
/* secundarios */
.btn.secondary,.btn.ghost{background:var(--glass-sheen),var(--glass-light)!important;border-color:rgba(26,77,148,.35)!important;color:var(--azul)!important;box-shadow:var(--glass-hi),0 8px 20px -14px rgba(10,26,74,.4)}
.btn.secondary:hover,.btn.ghost:hover{background:var(--glass-sheen),rgba(255,255,255,.85)!important}
.bridge .btn:not(.secondary){background:var(--glass-sheen),rgba(91,155,255,.92)!important;color:var(--tinta)!important}
.bridge .btn.secondary{background:var(--glass-sheen-dark),rgba(255,255,255,.10)!important;border-color:rgba(255,255,255,.4)!important;color:#fff!important;box-shadow:var(--glass-hi-dark)}
.ed-shop{background:var(--glass-sheen),var(--glass-blue)!important;border:1px solid rgba(255,255,255,.28);box-shadow:var(--glass-hi),0 10px 24px -12px rgba(26,77,148,.65)}
.ed-book .ed-buy,.ed-nav button{background:var(--glass-sheen),var(--glass-light)!important;border:1px solid var(--glass-edge-light);box-shadow:var(--glass-hi),0 6px 16px -10px rgba(10,26,74,.45);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter)}
.ed-book .ed-buy{border-color:rgba(26,77,148,.3)}
.ed-book .ed-buy:hover,.ed-nav button:hover:not(:disabled){background:var(--glass-sheen),rgba(255,255,255,.9)!important}

/* ---------- Tarjetas de servicios y chips ---------- */
.v4-cards .card,.v4-cards .card:hover,.v4-cards .card.is-open{
  background:var(--glass-sheen),var(--glass-light)!important;border:1px solid var(--glass-edge-light)!important;
  box-shadow:var(--glass-hi),var(--glass-shadow);
  -webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter)}
.v4-cards .card:hover,.v4-cards .card.is-open{background:var(--glass-sheen),rgba(255,255,255,.76)!important;box-shadow:var(--glass-hi),0 30px 60px -30px rgba(10,26,74,.45)}
.chips li,.about7-values li{background:rgba(255,255,255,.55);border:1px solid rgba(26,77,148,.28)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.about7-values li{-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter)}
.process7-steps li{padding:22px;border-radius:20px;background:var(--glass-sheen),var(--glass-light);border:1px solid var(--glass-edge-light);box-shadow:var(--glass-hi),var(--glass-shadow);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter)}
.cta-band .prototype-card{border-radius:22px;background:var(--glass-sheen-dark),rgba(0,22,78,.26)!important;border:1px solid rgba(255,255,255,.26)!important;box-shadow:var(--glass-hi-dark),var(--glass-shadow-dark);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter)}
.cta-band{background:radial-gradient(40% 60% at 85% 20%,rgba(91,155,255,.45),transparent 70%),radial-gradient(40% 60% at 10% 100%,rgba(0,36,136,.6),transparent 70%),var(--azul)!important}

/* ---------- Portada: titular en panel de vidrio y control de pausa ---------- */
.v7-hero .hero-content{position:relative;padding:clamp(26px,3vw,44px) clamp(24px,3vw,44px) clamp(26px,3vw,40px);border-radius:30px;max-width:620px;
  background:var(--glass-sheen-dark),var(--glass-dark);border:1px solid var(--glass-edge-dark);
  box-shadow:var(--glass-hi-dark),var(--glass-shadow-dark);
  -webkit-backdrop-filter:saturate(150%) blur(18px);backdrop-filter:saturate(150%) blur(18px)}
.v7-hero .v6-shade{opacity:.75}
.v7-dots{padding:9px 12px;border-radius:999px;background:var(--glass-sheen-dark),var(--glass-dark);border:1px solid var(--glass-edge-dark);box-shadow:var(--glass-hi-dark);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter)}
.v7-play{width:40px!important;height:40px!important;background:var(--glass-sheen-dark),var(--glass-dark)!important;border:1px solid rgba(255,255,255,.28)!important;box-shadow:var(--glass-hi-dark),0 8px 20px -10px rgba(0,0,0,.5);-webkit-backdrop-filter:var(--glass-filter)!important;backdrop-filter:var(--glass-filter)!important}
.v7-play:hover{background:var(--glass-sheen-dark),rgba(12,20,44,.6)!important}
@media(max-width:640px){.v7-hero .hero-content{border-radius:24px;padding:22px 20px 24px}}
@media(max-aspect-ratio:1/1){.v7-hero .hero-content{background:var(--glass-sheen-dark),rgba(10,18,40,.6)}}
.v7-hero .hero-content .eyebrow{color:#d6e5ff}

/* ---------- Cesta ---------- */
.cesta{background:var(--glass-sheen),var(--glass-light-strong)!important;border-left:1px solid var(--glass-edge-light);
  box-shadow:var(--glass-hi),-30px 0 70px -30px rgba(10,16,32,.55)!important;
  -webkit-backdrop-filter:saturate(180%) blur(30px);backdrop-filter:saturate(180%) blur(30px)}
.cesta-foot{background:rgba(255,255,255,.45)!important;border-top-color:rgba(10,26,74,.10)!important}
.cesta-line{border-bottom-color:rgba(10,26,74,.10)!important}
.cesta-line img{background:rgba(255,255,255,.7)!important}
.cesta-close{background:rgba(255,255,255,.6)!important;border:1px solid var(--glass-edge-light);box-shadow:var(--glass-hi),0 4px 12px -8px rgba(10,26,74,.5)}
.cesta-demo,.cl-p,.cesta-note,.cesta-tot dt span{color:var(--glass-muted)!important}
.qty{background:rgba(255,255,255,.65)!important;border-color:rgba(10,26,74,.16)!important;box-shadow:var(--glass-hi)}
@media(max-width:640px){.cesta{-webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px)}}
.shop-toast{background:var(--glass-sheen-dark),rgba(20,24,36,.82)!important;border:1px solid var(--glass-edge-dark);box-shadow:var(--glass-hi-dark),var(--glass-shadow-dark)}

/* ---------- Tienda: tarjetas de libros ---------- */
.shop-item{padding:12px 12px 16px;background:var(--glass-sheen),var(--glass-light);border:1px solid var(--glass-edge-light);border-radius:26px;
  box-shadow:var(--glass-hi),var(--glass-shadow);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);
  transition:box-shadow .5s var(--ease-apple),background .5s var(--ease-apple)}
.shop-item:hover{background:var(--glass-sheen),rgba(255,255,255,.74);box-shadow:var(--glass-hi),0 30px 60px -30px rgba(10,26,74,.45)}
.shop-stage{background:linear-gradient(160deg,rgba(255,255,255,.7),rgba(232,238,250,.6))!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.shop-info{padding:16px 6px 0}
.shop-ed{color:var(--glass-muted)}
.shop-bar{border-top-color:rgba(10,26,74,.10)!important}
.shop-how{background:radial-gradient(40% 60% at 90% 30%,var(--glass-halo-b),transparent 70%),#f3f5fa!important}

/* ---------- Pedido ---------- */
.co-form{padding:clamp(22px,3vw,36px);border-radius:26px;background:var(--glass-sheen),var(--glass-light-strong);border:1px solid var(--glass-edge-light);box-shadow:var(--glass-hi),var(--glass-shadow);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter)}
.co-aside,.co-done-sum{background:var(--glass-sheen),var(--glass-light)!important;border:1px solid var(--glass-edge-light);box-shadow:var(--glass-hi),var(--glass-shadow);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter)}
.field input{background:rgba(255,255,255,.72)!important;border-color:#a9adb8!important;box-shadow:inset 0 1px 2px rgba(10,26,74,.06)}
.field input:focus{background:#fff!important;border-color:var(--azul)!important;box-shadow:0 0 0 3px rgba(26,77,148,.22)!important}
.field input[aria-invalid=true]{border-color:#c4271b!important}
.opt{background:rgba(255,255,255,.5);border-color:rgba(10,26,74,.16)!important;box-shadow:var(--glass-hi)}
.opt:has(input:checked){background:rgba(237,243,252,.85)!important;border-color:var(--azul)!important}
.co-pay{background:rgba(255,255,255,.55)!important;border:1px solid var(--glass-edge-light)}
.co-req,.co-small,.opt small,.sl-t small{color:var(--glass-muted)!important}
.sum-lines li{border-bottom-color:rgba(10,26,74,.10)!important}

/* ---------- Marketing digital ---------- */
.digital-hero .digital-visual{background:var(--glass-sheen-dark),rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.3)!important;border-radius:22px;overflow:hidden;box-shadow:var(--glass-hi-dark),var(--glass-shadow-dark)!important;-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter)}


/* ---------- Tienda Roly: pestañas, filtros, ficha y presupuesto ---------- */
.shop-tabs{border-bottom-color:rgba(10,26,74,.12)!important}
.shop-tab{background:transparent}
.roly-note{background:rgba(255,244,224,.84)!important;border:1px solid rgba(224,138,0,.28);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter)}
.roly-search input,.field textarea{background:rgba(255,255,255,.72)!important;border-color:#a9adb8!important;box-shadow:inset 0 1px 2px rgba(10,26,74,.06)}
.roly-search input:focus,.field textarea:focus{background:#fff!important;border-color:var(--azul)!important;box-shadow:0 0 0 3px rgba(26,77,148,.22)!important}
.roly-chip{background:var(--glass-sheen),var(--glass-light)!important;border-color:var(--glass-edge-light)!important;box-shadow:var(--glass-hi);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter)}
.roly-chip[aria-pressed=true]{background:var(--glass-sheen),var(--glass-blue)!important;border-color:rgba(255,255,255,.28)!important;color:#fff!important}
.roly-stage{background:linear-gradient(160deg,rgba(255,255,255,.7),rgba(232,238,250,.6))!important}
.roly-modal{background:var(--glass-sheen),var(--glass-light-strong)!important;border:1px solid var(--glass-edge-light);box-shadow:var(--glass-hi),0 30px 80px -30px rgba(10,16,32,.55);-webkit-backdrop-filter:saturate(180%) blur(28px);backdrop-filter:saturate(180%) blur(28px)}
.roly-modal-close{background:rgba(255,255,255,.65)!important;border:1px solid var(--glass-edge-light);box-shadow:var(--glass-hi)}
.roly-photo{background:linear-gradient(160deg,rgba(255,255,255,.7),rgba(232,238,250,.55))!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.pq-logo{background:rgba(255,255,255,.55)!important;border-color:rgba(10,26,74,.22)!important;-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter)}
.cesta-sec{color:var(--glass-muted)!important}

/* =====================================================================
   Fallbacks y preferencias de accesibilidad
   ===================================================================== */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--glass-light:rgba(255,255,255,.92);--glass-light-strong:rgba(255,255,255,.97);--glass-dark:rgba(12,20,44,.82);--glass-dark-strong:rgba(10,16,32,.96)}
}
@media(prefers-reduced-transparency:reduce){
  :root{--glass-light:#fff;--glass-light-strong:#fff;--glass-dark:#0c142c;--glass-dark-strong:#0a1020;--glass-blue:#1a4d94;--glass-filter:none;--glass-sheen:linear-gradient(transparent,transparent);--glass-sheen-dark:linear-gradient(transparent,transparent)}
  .site-header .nav{background:#0a1022!important}
  .site-header .nav,.v7-hero .hero-content,.cesta,.roly-modal{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .cesta,.roly-modal{background:#fff!important}
  .v6-hero .btn,.home-hero .btn,.digital-hero .btn{background:#fff!important}
}
@media(prefers-contrast:more){
  :root{--glass-light:rgba(255,255,255,.96);--glass-light-strong:#fff;--glass-dark:rgba(6,10,24,.9);--glass-dark-strong:#05080f;--glass-edge-light:#6e6e73;--glass-edge-dark:rgba(255,255,255,.6);--glass-muted:#3a3a3c;--glass-blue:#14407e}
  .cesta,.roly-modal{background:#fff!important}
  .site-header .nav{background:#05080f!important}
  .btn.secondary,.btn.ghost{border-color:var(--azul)!important}
}