/* Enlaces legales del pie y aviso de almacenamiento — se carga en todas las páginas */
.pie-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem 1.1rem;margin:.9rem auto 0;padding:0 1rem;font-family:'Montserrat',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;text-align:center}
.pie-legal a{color:#f0f4f8;text-decoration:underline;text-underline-offset:3px}
.pie-legal a:hover{color:#FFD700}
.pie-responsable{margin:.6rem auto 0;padding:0 1rem;text-align:center;font-size:.78rem;line-height:1.5;color:rgba(240,244,248,.82)}
.pie-responsable a{color:#f0f4f8}
.nota-legal{font-size:.82rem;line-height:1.65;color:rgba(240,244,248,.85)}
.nota-legal a{color:#7fe3e1;text-underline-offset:3px}

/* Casillas de autorización: tarjeta de vidrio, puntas redondas y aire */
.casilla-legal{display:flex;align-items:flex-start;gap:.85rem;margin:1rem 0;padding:1rem 1.15rem;font-size:.84rem;line-height:1.65;color:rgba(240,244,248,.92);text-align:left;cursor:pointer;
  background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.13);border-radius:16px;
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  transition:border-color .18s,background .18s}
.casilla-legal:hover{border-color:rgba(255,94,0,.5)}
.casilla-legal input[type=checkbox]{flex:none;width:20px;height:20px;margin-top:2px;accent-color:#FF5E00;border-radius:6px;cursor:pointer}
.casilla-legal a{color:#7fe3e1;text-underline-offset:3px}

/* Aviso de almacenamiento: píldora de vidrio flotante */
#aviso-almacenamiento{position:fixed;left:50%;bottom:1.25rem;transform:translateX(-50%);z-index:99999;width:min(640px,calc(100vw - 2rem));
  display:flex;align-items:center;gap:1rem 1.25rem;flex-wrap:wrap;padding:1.05rem 1.3rem;
  background:linear-gradient(145deg,rgba(10,30,50,.82),rgba(6,32,64,.72));color:#f0f4f8;
  border:1px solid rgba(255,255,255,.16);border-radius:22px;
  -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 22px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.16);
  font-family:'Lora',Georgia,serif;font-size:.88rem;line-height:1.6}
#aviso-almacenamiento .aviso-texto{flex:1 1 300px;min-width:0}
#aviso-almacenamiento a{color:#7fe3e1;text-underline-offset:3px}
#aviso-almacenamiento button{flex:none;font-family:'Montserrat',sans-serif;font-weight:800;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  background:#FF5E00;color:#fff;border:0;border-radius:999px;padding:.75rem 1.5rem;cursor:pointer;transition:transform .15s,box-shadow .2s}
#aviso-almacenamiento button:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(255,94,0,.4)}

/* ══════════════════════════════════════════════════════════════════
   PULIDO: puntas redondas y vidrio donde todavía quedaban cajas cuadradas.
   Todo va dentro de :where() para que pese CERO: si una página ya define
   su propio border-radius, gana la página. Aquí solo se rellena lo que
   nadie había redondeado; no se pisa ningún diseño existente.
   ══════════════════════════════════════════════════════════════════ */
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=hidden]),select,textarea){border-radius:12px}
:where(.form-section,.aviso-datos,.cap-panel,.modulo-card,.alert-sesion,.canje-detalle,.pago-exito-ref-box,.wompi-product-preview,.causa-item,.prod-detail-mockup-col,.prod-mockup,.cr-tile,.role-note,.foto-upload-wrap,.puntos-ganados,.quiz-user-bar,.cv-diag,.filter-bar,.bl-cab,.filtros,.check-item,.max-w-4xl){border-radius:18px}
:where(.card){border-radius:24px;overflow:hidden}
:where(.btn-checkout,.btn-primary-modal,.btn-secondary-modal,.cart-btn,.prod-add-btn,.prod-detail-add-btn,.causa-cta,.btn-submit,.btn-enviar,.btn-wompi-pay,.admin-tab,.bg-gradient-to-r){border-radius:14px}
:where(.badge-tag,.chip,.quiz-user-chip,.wompi-method-badge,.filtro-btn,.btn-volver){border-radius:999px}
:where(a,span)[style*="border:"]:where(:not([style*="border-radius"])){border-radius:12px}
:where(.prod-mockup,.prod-detail-mockup-col){overflow:hidden}
:where(.ibz-deck-bar,.pz-viewer-bar,.img-modal-header){border-radius:18px 18px 0 0}
:where(.ibz-deck-bar ~ iframe,.pz-viewer-bar ~ iframe){border-radius:0 0 18px 18px}
/* Vidrio en los paneles de formulario */
:where(.form-section,.cap-panel,.aviso-datos){-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);box-shadow:0 18px 50px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08)}

/* Foco visible con teclado: style.css lo apagaba con outline:none */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible,[role="button"]:focus-visible{outline:3px solid #FFD700 !important;outline-offset:2px !important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}

/* ══════════════════════════════════════════════════════════════════
   MENÚ ÚNICO: el de Inicio, igual en todas las páginas.
   ══════════════════════════════════════════════════════════════════ */
.navbar .nav-links a.btn-login{border-radius:.65rem}
.saldo-barra{display:flex;justify-content:flex-end;max-width:1180px;margin:0 auto;padding:5.4rem 1.5rem 0}
.saldo-barra .header-saldo{background:rgba(2,12,30,.68);border:1px solid rgba(255,255,255,.15);border-radius:999px;padding:.45rem .9rem;
  -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 6px 28px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.09)}
.saldo-barra .header-saldo:empty{display:none}

/* ══════════════════════════════════════════════════════════════════
   EL CUADRO DE INICIO, en todos los cuadros.
   Es la tarjeta de las cifras y de "Cómo nació" en la portada: vidrio
   azul noche, borde fino claro, puntas de 1.1rem y sombra suave.
   Se aplica a las tarjetas que tenían otra forma. Las barras de color
   de arriba (la que distingue cada materia o presentación) se conservan.
   ══════════════════════════════════════════════════════════════════ */
:root{--cuadro-radio:1.1rem;--cuadro-fondo:rgba(2,12,30,.68);--cuadro-borde:rgba(255,255,255,.15);
  --cuadro-sombra:0 6px 28px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.09);--cuadro-vidrio:blur(18px) saturate(1.3)}
body :is(.hh-card,.hh-item,.hh-destacado,.hz-fact,.hz-lockup,.lg-vidrio,.lg-caja,.lg-scroll,.casilla-legal,
  .form-section,.aviso-datos,.cap-panel,.modulo-card,.cr-tile,.canje-detalle,.wompi-product-preview,.pago-exito-ref-box,.causa-item,.role-note){
  border-radius:var(--cuadro-radio);background-color:var(--cuadro-fondo);background-image:none;
  border:1px solid var(--cuadro-borde);box-shadow:var(--cuadro-sombra);
  -webkit-backdrop-filter:var(--cuadro-vidrio);backdrop-filter:var(--cuadro-vidrio)}
body :is(.pv-card,.hu-card){border-radius:var(--cuadro-radio);background-color:var(--cuadro-fondo);
  border-left:1px solid var(--cuadro-borde);border-right:1px solid var(--cuadro-borde);border-bottom:1px solid var(--cuadro-borde);
  box-shadow:var(--cuadro-sombra);-webkit-backdrop-filter:var(--cuadro-vidrio);backdrop-filter:var(--cuadro-vidrio)}
body .hh-card{overflow:hidden}
body .hz-fact{border-left-width:3px}
body .hz-fact:nth-child(1){border-left-color:#47dbd9}
body .hz-fact:nth-child(2){border-left-color:#FF5E00}
body .hz-fact:nth-child(3){border-left-color:#FFD700}
body .hh-mini div{border-radius:.9rem}
body :is(.hh-btn,.hz-btn,.pv-all){border-radius:.65rem}
body #aviso-almacenamiento{border-radius:var(--cuadro-radio);background:var(--cuadro-fondo);border:1px solid var(--cuadro-borde);
  box-shadow:0 18px 50px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.09);-webkit-backdrop-filter:var(--cuadro-vidrio);backdrop-filter:var(--cuadro-vidrio)}
body #aviso-almacenamiento button{border-radius:.65rem}

/* ══════════════════════════════════════════════════════════════════
   PASTILLA DE SESIÓN y botón "Inicia sesión": una sola forma y un solo
   tamaño (36 px de alto) en todas las páginas.
   ══════════════════════════════════════════════════════════════════ */
.navbar .nav-links a.btn-login,.navbar .nav-links a.chip-sesion{
  display:inline-flex !important;align-items:center;justify-content:center;gap:7px;box-sizing:border-box;
  height:36px !important;min-height:0 !important;line-height:1 !important;border-radius:999px !important;
  font-family:'Montserrat',sans-serif !important;font-size:.72rem !important;font-weight:800 !important;letter-spacing:.03em !important;
  text-transform:none !important;text-decoration:none !important;white-space:nowrap;transform:none}
.navbar .nav-links a.btn-login:not(.chip-sesion){padding:0 18px !important;box-shadow:none !important}
.navbar .nav-links a.chip-sesion{padding:3px 14px 3px 3px !important;background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.14) !important;color:#fafafa !important;box-shadow:none !important}
.navbar .nav-links a.chip-sesion::after{display:none !important}
.navbar .nav-links a.chip-sesion:hover{background:rgba(255,255,255,.11) !important;border-color:rgba(255,94,0,.6) !important}
@media (max-width:768px){
  .navbar .nav-links a.btn-login,.navbar .nav-links a.chip-sesion{height:44px !important;width:100%;font-size:.8rem !important}
}

/* ══════════════════════════════════════════════════════════════════
   EL LOGO, igual en todas partes: 36 px, sin aro ni fondo naranja, y el
   nombre PROGRAMA-PRI siempre en la misma letra.
   ══════════════════════════════════════════════════════════════════ */
body :is(.header-icon,.pz-logo,.navbar .logo-img,.header-brand > img,.sondeo-header .header-brand img,.pri-marca > img){
  width:36px !important;height:36px !important;flex:none;border:0 !important;background:none !important;box-shadow:none !important;border-radius:50% !important;overflow:hidden}
body :is(.header-icon,.pz-logo) img{width:100% !important;height:100% !important;object-fit:cover;border-radius:50%}
body :is(.header-brand-text h1,.header-brand h2,.navbar .logo-container h2,.pz-cab .pz-marca b,.pri-marca h2){
  font-family:'Montserrat',sans-serif !important;font-size:.76rem !important;font-weight:900 !important;letter-spacing:2px !important;line-height:1.2 !important;text-transform:uppercase}
body .brand-icon{background:none !important;border:0 !important;box-shadow:none !important}
/* Dentro de un título, las palabras resaltadas conservan la letra del título */
body :is(h1,h2,h3,.brand-title) span:not([class*="katex"]):not(.katex *){font-family:inherit}

/* Botones de volver: sin la flecha "←"; un cheurón fino, igual en todo el sitio */
.ico-volver{display:inline-block;width:.5em;height:.5em;margin:0 .55em .12em .1em;border-left:2px solid currentColor;border-bottom:2px solid currentColor;
  border-radius:1px;transform:rotate(45deg);vertical-align:middle;opacity:.9}

/* Interruptor de idioma ES / EN en el menú */
.navbar .nav-links li.idioma-pri{display:flex;align-items:center}
.idioma-interruptor{display:inline-flex;align-items:center;height:36px;padding:3px;gap:2px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.idioma-interruptor button{height:28px;min-width:34px;padding:0 9px;border:0;border-radius:999px;background:transparent;color:rgba(240,244,248,.7);
  font-family:'Montserrat',sans-serif;font-size:.68rem;font-weight:800;letter-spacing:.06em;cursor:pointer;transition:background .18s,color .18s}
.idioma-interruptor button[aria-pressed="true"]{background:#FF5E00;color:#fff}
.idioma-interruptor button:hover{color:#fff}

/* Con sesión iniciada, el botón naranja no se muestra mientras llega la pastilla */
html.pri-con-sesion .navbar .nav-links a.btn-login:not(.chip-sesion){visibility:hidden}

/* Casilla de autorización: dibujada a mano para que SIEMPRE se vea marcada.
   Varias páginas dan estilo a todos los <input> (ancho, relleno, sin
   apariencia) y la casilla quedaba en blanco aunque estuviera aceptada. */
.casilla-legal input[type=checkbox]{-webkit-appearance:none !important;appearance:none !important;flex:none !important;
  width:22px !important;height:22px !important;min-width:22px !important;padding:0 !important;margin:2px 0 0 !important;
  border:2px solid rgba(255,255,255,.6) !important;border-radius:7px !important;background:rgba(255,255,255,.06) !important;
  display:inline-grid !important;place-content:center;cursor:pointer;box-shadow:none !important;transition:background .15s,border-color .15s}
.casilla-legal input[type=checkbox]::after{content:'';width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg) scale(0);transform-origin:center;margin-top:-2px;transition:transform .12s}
.casilla-legal input[type=checkbox]:checked{background:#FF5E00 !important;border-color:#FF5E00 !important}
.casilla-legal input[type=checkbox]:checked::after{transform:rotate(45deg) scale(1)}
.casilla-legal:has(input:checked){border-color:rgba(255,94,0,.7);background:linear-gradient(145deg,rgba(255,94,0,.12),rgba(255,255,255,.03))}

/* Cuadros que seguían con esquinas rectas (revisión de la lista de tareas). */
:where(.alerta-pri, .notif-pri, .pregunta-builder, .upload-section, .modal-edit-section,
       .prod-card-libretas, .prod-card, .modal-box) { border-radius: var(--cuadro-radio, 1.1rem); }
:where(.pb-remove, .qty-btn, .foto-preview-small, .estado-pendiente, .estado-entregado) { border-radius: 999px; }
:where(.cart-drawer) { border-radius: 1.1rem 0 0 1.1rem; }

/* La marca completa (logo + PROGRAMA-PRI + lema) igual en todas las páginas,
   también en las que no usan el menú del sitio: login, tienda, espacio IBM Z. */
.pri-marca{display:inline-flex;align-items:center;gap:1rem;text-decoration:none;margin-bottom:1.6rem;text-align:left}
.pri-marca h2{color:#fafafa;margin:0}
body :is(.navbar .logo-link p,.header-brand-text p,.pz-cab .pz-marca div > span,.pri-marca p){
  font-family:'Montserrat',sans-serif !important;font-size:.55rem !important;font-weight:700 !important;letter-spacing:3px !important;
  text-transform:uppercase;color:#38bdf8 !important;margin:0;line-height:1.5}
@media (max-width:480px){ .pri-marca p{letter-spacing:1.5px !important} }