/* ==========================================================
   NŌK GUIDE — CSS GLOBAL
   Copiado 1:1 desde /nok-global.css (fuente oficial aprobada).
   NO editar las reglas de esta primera parte a mano: si el diseño
   cambia, reemplaza este bloque completo por la nueva fuente oficial.
   ========================================================== */

:root{
  --noche:#0A1524;
  --noche-2:#132338;
  --noche-3:#1B3149;
  --papel:#F1F4F8;
  --superficie:#E1E7EF;
  --tinta:#0F1720;
  --ambar:#E9B23C;
  --ambar-hover:#F5C356;
  --ambar-txt:#7A5406;
  --f-disp:"Anton",sans-serif;
  --f-body:"Newsreader",Georgia,serif;
  --f-mono:"IBM Plex Mono",monospace;
  --nok-max:1120px;
}

/* --- Base. Solo afecta a lo que esté dentro de .nok --- */
.nok,.nok *{box-sizing:border-box;margin:0;padding:0}
.nok{
  background:#F1F4F8;
  color:#0F1720;
  font-family:var(--f-body);
  font-size:20px;
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.nok .wrap{max-width:var(--nok-max);margin:0 auto;padding:0 22px}
.nok h1,.nok h2,.nok h3{
  font-family:var(--f-disp);font-weight:400;letter-spacing:.005em;
  line-height:1;text-transform:uppercase;
}
.nok .mono{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.nok a{color:inherit;text-decoration:none}
.nok img{display:block;width:100%;height:auto}

/* Marcadores de imagen pendiente. Bórralos al poner las fotos reales. */
.nok .ph{display:flex;width:100%;align-items:center;justify-content:center;text-align:center;padding:24px;
  min-height:200px;background:var(--superficie);border:1px dashed rgba(15,23,32,.3)}
.nok .ph span{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  opacity:.65;max-width:30ch;line-height:1.7;font-weight:400}
.nok .ph.oscuro{background:var(--noche-2);border-color:rgba(241,244,248,.28)}
.nok .ph.oscuro span{color:var(--papel);opacity:.75}
.nok .ph img{width:100%;height:100%;object-fit:cover;display:block}

/* --- Secciones --- */
.nok section{padding:62px 0;background:var(--papel);color:var(--tinta);border-top:1px solid rgba(15,23,32,.14)}
.nok section.oscura{background:var(--noche);color:var(--papel);border-top:none}
.nok .km{color:var(--ambar-txt);display:block;margin-bottom:16px}
.nok .km-osc{color:var(--ambar);display:block;margin-bottom:16px}
.nok h2{font-size:clamp(30px,6vw,50px);max-width:18ch;margin-bottom:20px}
.nok .sub{max-width:55ch;font-size:19px;opacity:.95}
.nok .nota{margin-top:16px;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;opacity:.6;font-weight:400}

/* --- Cabecera de marca --- */
.nok .top{background:var(--noche);color:var(--papel)}
.nok .top .wrap{display:flex;align-items:center;justify-content:space-between;height:56px}
.nok .marca{font-family:var(--f-disp);font-size:17px;letter-spacing:.2em;text-transform:uppercase}
.nok .top .mono{opacity:.75;font-size:11px}
.nok .top .mini-progreso{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nok .top .mini-progreso .mono{opacity:.45}
.nok .top .mini-progreso .mono.on{opacity:1;color:var(--ambar)}
.nok .top .mini-progreso .mono.sep{opacity:.3}
.nok .cart-cta{text-align:center;margin-top:18px}

/* --- Hero --- */
.nok .hero{background:var(--noche);color:var(--papel);padding:52px 0 0}
.nok .hero .eyebrow{color:var(--ambar);display:block;margin-bottom:20px}
.nok .hero h1{font-size:clamp(40px,10vw,88px);max-width:14ch}
.nok .hero h1 em{font-style:normal;color:var(--ambar)}
.nok .hero .lede{font-size:clamp(19px,2.5vw,22px);max-width:47ch;margin-top:22px;opacity:.92}
.nok .hero-grid{display:grid;gap:32px;padding-bottom:40px}
.nok .hero .ph{min-height:300px}
.nok .hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px;padding-bottom:50px}

/* --- Riel de kilómetros --- */
.nok .riel{background:var(--noche);color:var(--papel);padding:18px 0;
  border-top:1px solid rgba(241,244,248,.22);border-bottom:1px solid rgba(241,244,248,.22)}
.nok .riel-inner{display:flex;overflow-x:auto;scrollbar-width:none}
.nok .riel-inner::-webkit-scrollbar{display:none}
.nok .hito{flex:0 0 auto;padding-right:34px}
.nok .hito:before{content:"";display:block;width:1px;height:14px;background:rgba(241,244,248,.4);margin-bottom:8px}
.nok .hito.mayor:before{height:26px;background:var(--ambar);width:2px}
.nok .hito b{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;font-weight:500}
.nok .hito small{font-family:var(--f-disp);font-size:12px;letter-spacing:.04em;text-transform:uppercase;opacity:.65}
.nok .hito.mayor small{opacity:1;color:var(--ambar)}

/* --- Banda de datos (home) --- */
.nok .banda{background:var(--noche-2);color:var(--papel);
  border-top:1px solid rgba(241,244,248,.16);border-bottom:1px solid rgba(241,244,248,.16)}
.nok .banda .wrap{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(241,244,248,.16);padding:0}
.nok .dato{background:var(--noche-2);padding:24px 20px}
.nok .dato b{display:block;font-family:var(--f-disp);font-size:30px;color:var(--ambar);line-height:1}
.nok .dato span{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  opacity:.7;display:block;margin-top:8px}

/* --- Botones --- */
.nok .btn{background:var(--ambar);color:#221704;border:none;font-family:var(--f-disp);text-transform:uppercase;
  letter-spacing:.05em;font-size:19px;padding:21px 34px;cursor:pointer;display:inline-block;text-align:center;transition:.2s}
.nok .btn:hover{background:var(--ambar-hover)}
.nok .btn:focus-visible{outline:3px solid var(--papel);outline-offset:3px}
.nok .btn-linea{background:transparent;color:var(--papel);border:1px solid rgba(241,244,248,.45)}
.nok .btn-linea:hover{background:rgba(241,244,248,.1)}

/* --- Barra de compra fija --- */
.nok-comprar{position:fixed;left:0;right:0;bottom:0;z-index:80;background:#F1F4F8;
  border-top:1px solid rgba(15,23,32,.2);padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:14px;box-shadow:0 -8px 28px rgba(10,21,36,.18)}
.nok-comprar .precio{font-family:var(--f-disp);font-size:26px;color:#0F1720}
.nok-comprar .precio small{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;
  font-weight:400;text-transform:uppercase;opacity:.7}
.nok-comprar .btn{flex:1;font-size:16px;padding:17px 18px;background:var(--ambar);color:#221704;
  font-family:var(--f-disp);text-transform:uppercase;letter-spacing:.05em;text-align:center;text-decoration:none;border:none;cursor:pointer}
body.nok-sticky{padding-bottom:96px}

/* --- Galería de páginas --- */
.nok .paginas{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:30px}
.nok .paginas .ph{min-height:180px}

/* --- Bloque origen / autor --- */
.nok .origen{display:grid;gap:26px}
.nok .origen .ph{min-height:280px}
.nok .origen blockquote{font-size:clamp(21px,3.4vw,27px);line-height:1.42;font-style:italic;
  border-left:3px solid var(--ambar-txt);padding-left:22px;margin:22px 0}
.nok .oscura .origen blockquote{border-left-color:var(--ambar)}

/* --- Tramos --- */
.nok .tramos{margin-top:32px;border-top:1px solid rgba(241,244,248,.22)}
.nok .tramo{display:grid;grid-template-columns:80px 1fr;gap:16px;padding:20px 0;
  border-bottom:1px solid rgba(241,244,248,.22)}
.nok .tramo .dist{font-family:var(--f-mono);font-size:12px;color:var(--ambar);padding-top:5px;font-weight:500}
.nok .tramo h3{font-size:20px;margin-bottom:7px}
.nok .tramo p{font-size:17px;opacity:.85;line-height:1.6}

/* --- Cuenta de errores --- */
.nok .cuenta{margin-top:34px;border-top:1px solid rgba(241,244,248,.25)}
.nok .error{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:19px 0;
  border-bottom:1px solid rgba(241,244,248,.25)}
.nok .error div{max-width:38ch}
.nok .error h3{font-size:19px;margin-bottom:5px}
.nok .error p{font-size:16px;opacity:.8;line-height:1.5}
.nok .error .monto{font-family:var(--f-disp);font-size:clamp(24px,5.5vw,32px);color:var(--ambar);
  white-space:nowrap;line-height:1}
.nok .remate{margin-top:34px;background:var(--ambar);color:#221704;padding:30px 24px}
.nok .remate h3{font-size:clamp(24px,5vw,34px);margin-bottom:12px;line-height:1.05}
.nok .remate p{font-size:18px;line-height:1.55}
.nok .remate strong{font-weight:600}

/* --- Bonus --- */
.nok .bonus{display:grid;gap:1px;background:rgba(15,23,32,.16);border:1px solid rgba(15,23,32,.16);margin-top:32px}
.nok .bonus-item{background:var(--papel);padding:26px 22px}
.nok .bonus-item .n{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--ambar-txt);
  display:block;margin-bottom:11px;font-weight:500}
.nok .bonus-item h3{font-size:20px;margin-bottom:8px}
.nok .bonus-item p{font-size:17px;opacity:.9;line-height:1.6}
.nok .bonus-item.inv{background:var(--noche);color:var(--papel)}
.nok .bonus-item.inv .n{color:var(--ambar)}

/* --- Método (home) --- */
.nok .metodo{display:grid;gap:1px;background:rgba(15,23,32,.16);border:1px solid rgba(15,23,32,.16);margin-top:34px}
.nok .met{background:var(--papel);padding:28px 24px}
.nok .met .n{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--ambar-txt);
  display:block;margin-bottom:12px;font-weight:500}
.nok .met h3{font-size:21px;margin-bottom:9px}
.nok .met p{font-size:17px;opacity:.9}

/* --- Catálogo (home) --- */
.nok .destacada{display:grid;border:1px solid rgba(15,23,32,.18);margin-top:34px;background:#fff}
.nok .destacada .ph{min-height:300px;border:none;border-bottom:1px dashed rgba(15,23,32,.3)}
.nok .dest-txt{padding:32px 26px}
.nok .codigo{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;color:var(--ambar-txt);
  display:block;margin-bottom:12px;font-weight:500}
.nok .dest-txt h3{font-size:clamp(26px,5vw,38px);margin-bottom:14px;line-height:1.02}
.nok .dest-txt p{font-size:18px;margin-bottom:20px}
.nok .specs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.nok .spec{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid rgba(15,23,32,.25);padding:7px 11px}
.nok .precio-fila{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.nok .precio{font-family:var(--f-disp);font-size:34px}
.nok .precio small{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;opacity:.65}
.nok .proximas{display:grid;gap:14px;margin-top:34px}
.nok .prox{border:1px solid rgba(241,244,248,.22);padding:26px 22px}
.nok .prox .codigo{color:var(--ambar)}
.nok .prox h3{font-size:23px;margin-bottom:10px}
.nok .prox p{font-size:17px;opacity:.8}
.nok .estado{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid rgba(241,244,248,.35);padding:5px 9px;display:inline-block;margin-top:16px;opacity:.75}

/* --- Testimonios --- */
.nok .tests{display:grid;gap:14px;margin-top:30px}
.nok .test{border:1px solid rgba(15,23,32,.18);background:#fff;padding:26px 22px}
.nok .test .mono{color:var(--ambar-txt);display:block;margin-bottom:12px}
.nok .test p{font-size:18px}
.nok .test .quien{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  opacity:.7;display:block;margin-top:14px}

/* --- Formularios --- */
.nok .caja{background:#fff;border:1px solid rgba(15,23,32,.18);padding:28px 22px;color:var(--tinta)}
.nok .caja + .caja{margin-top:18px}
.nok .caja .mono{color:var(--ambar-txt);display:block;margin-bottom:14px}
.nok .caja h2{font-size:26px;margin-bottom:8px}
.nok .caja .nota{font-size:17px;opacity:.85;margin-bottom:24px;font-family:var(--f-body);
  text-transform:none;letter-spacing:0}
.nok label{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:8px;opacity:.8}
.nok input,.nok select,.nok textarea{width:100%;font-family:var(--f-body);font-size:19px;padding:16px 15px;
  border:1px solid rgba(15,23,32,.35);background:#fff;color:var(--tinta);margin-bottom:20px;resize:vertical}
.nok textarea{min-height:150px;line-height:1.6}
.nok input:focus,.nok select:focus,.nok textarea:focus{outline:3px solid var(--ambar);
  outline-offset:-1px;border-color:var(--noche)}
.nok .canal{background:#fff;border:1px solid rgba(15,23,32,.18);padding:24px 22px}
.nok .canal + .canal{margin-top:16px}
.nok .canal .mono{color:var(--ambar-txt);display:block;margin-bottom:10px}
.nok .canal b{display:block;font-family:var(--f-disp);font-weight:400;font-size:23px;
  text-transform:uppercase;margin-bottom:7px}
.nok .canal p{font-size:17px;opacity:.88}
.nok .destacado{background:var(--noche);color:var(--papel);padding:28px 22px;margin-top:16px}
.nok .destacado .mono{color:var(--ambar);display:block;margin-bottom:12px}
.nok .destacado h2{font-size:24px;margin-bottom:10px}
.nok .destacado p{font-size:17px;opacity:.88}
.nok .columnas{display:grid;gap:20px}

/* --- Correo / captura --- */
.nok .correo{background:var(--noche-3);color:var(--papel);padding:40px 26px}
.nok .correo h3{font-size:clamp(24px,4.6vw,34px);margin-bottom:14px;max-width:20ch}
.nok .correo p{font-size:18px;opacity:.9;max-width:48ch;margin-bottom:24px}
.nok .campo{display:flex;flex-wrap:wrap;gap:10px}
.nok .campo input{flex:1;min-width:220px;background:transparent;color:var(--papel);
  border-color:rgba(241,244,248,.45);margin-bottom:0}
.nok .campo input::placeholder{color:rgba(241,244,248,.55)}
.nok .legal{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;opacity:.6;
  margin-top:14px;text-transform:none}

/* --- FAQ --- */
.nok details{border-bottom:1px solid rgba(15,23,32,.16);padding:22px 0}
.nok details summary{font-family:var(--f-body);font-weight:600;font-size:20px;color:var(--tinta);
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;
  align-items:center;min-height:44px}
.nok details summary::-webkit-details-marker{display:none}
.nok details summary:after{content:"+";font-family:var(--f-mono);color:var(--ambar-txt);font-size:26px;flex:none}
.nok details[open] summary{color:var(--ambar-txt)}
.nok details[open] summary:after{content:"\2013"}
.nok details p{margin-top:12px;font-size:18px;color:var(--tinta);opacity:.95;max-width:58ch}
.nok details summary:focus-visible{outline:2px solid var(--ambar-txt);outline-offset:4px}

/* --- Cierre --- */
.nok .cierre{background:var(--noche);color:var(--papel);text-align:center;padding:70px 0 88px;border:none}
.nok .cierre h2{margin:0 auto 18px;max-width:16ch}
.nok .cierre .sub{margin:0 auto 28px}

/* ==========================================================
   MODO OSCURO — IMPRESCINDIBLE
   Sin esto, los navegadores en modo oscuro invierten los fondos
   y el texto queda ilegible. No borrar.
   ========================================================== */
@media (prefers-color-scheme: dark){
  .nok,.nok section,.nok .pie{background:#F1F4F8 !important;color:#0F1720 !important}
  .nok .caja,.nok .canal,.nok .bonus-item,.nok .met,.nok .test,.nok .destacada,.nok .paginas .ph{
    background:#FFFFFF !important;color:#0F1720 !important}
  .nok section h2,.nok .sub,.nok .bonus-item h3,.nok .bonus-item p,.nok .met h3,.nok .met p,
  .nok details summary,.nok details p,.nok .test p,.nok .caja h2,.nok .caja p,.nok label,
  .nok .canal b,.nok .canal p,.nok .dest-txt h3,.nok .dest-txt p{color:#0F1720 !important}
  .nok .top,.nok .hero,.nok .riel,.nok .oscura,.nok .cierre,.nok .banda,.nok .dato,
  .nok .bonus-item.inv,.nok .destacado,.nok .correo{background:#0A1524 !important;color:#F1F4F8 !important}
  .nok .hero h1,.nok .hero .lede,.nok .oscura h2,.nok .oscura .sub,.nok .tramo h3,.nok .tramo p,
  .nok .cierre h2,.nok .cierre .sub,.nok .error h3,.nok .error p,.nok .prox h3,.nok .prox p,
  .nok .destacado h2,.nok .destacado p,.nok .correo h3,.nok .correo p,
  .nok .bonus-item.inv h3,.nok .bonus-item.inv p{color:#F1F4F8 !important}
  .nok .hero h1 em,.nok .km-osc,.nok .hito.mayor small,.nok .tramo .dist,.nok .error .monto,
  .nok .bonus-item.inv .n,.nok .prox .codigo{color:#E9B23C !important}
  .nok .btn,.nok-comprar .btn,.nok .remate{background:#E9B23C !important;color:#221704 !important}
  .nok .remate h3,.nok .remate p{color:#221704 !important}
  .nok input,.nok select,.nok textarea{background:#FFFFFF !important;color:#0F1720 !important}
  .nok .campo input{background:transparent !important;color:#F1F4F8 !important}
  .nok-comprar{background:#F1F4F8 !important}
  .nok-comprar .precio{color:#0F1720 !important}
}

/* --- Escritorio --- */
@media(min-width:860px){
  .nok section{padding:88px 0}
  .nok .hero{padding-top:74px}
  .nok .hero-grid{grid-template-columns:1.05fr .95fr;align-items:end;gap:44px;padding-bottom:54px}
  .nok .origen{grid-template-columns:.78fr 1.22fr;align-items:center;gap:44px}
  .nok .paginas{grid-template-columns:repeat(3,1fr)}
  .nok .bonus,.nok .metodo{grid-template-columns:repeat(2,1fr)}
  .nok .tests,.nok .proximas{grid-template-columns:repeat(3,1fr)}
  .nok .tramo{grid-template-columns:112px 1fr;gap:26px}
  .nok .banda .wrap{grid-template-columns:repeat(4,1fr)}
  .nok .destacada{grid-template-columns:1fr 1fr}
  .nok .destacada .ph{border-bottom:none;border-right:1px dashed rgba(15,23,32,.3);min-height:100%}
  .nok .dest-txt{padding:44px 38px;align-self:center}
  .nok .columnas{grid-template-columns:1.3fr .7fr;gap:32px;align-items:start}
  .nok .caja{padding:38px 34px}
  .nok .fila-doble{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .nok .lateral{position:sticky;top:24px}
  .nok .correo{padding:56px 48px}
  .nok-comprar{justify-content:center;gap:26px}
  .nok-comprar .btn{flex:none;padding:17px 46px}
}

/* ==========================================================
   CHECKOUT DE WOOCOMMERCE
   Estas reglas visten el checkout nativo de Woo con la
   identidad NŌK. No requieren pegar HTML en el checkout.
   ========================================================== */
.woocommerce-checkout{background:#F1F4F8;color:#0F1720;font-family:var(--f-body);font-size:19px}
.woocommerce-checkout h3,.woocommerce-checkout h2{font-family:var(--f-disp);font-weight:400;
  text-transform:uppercase;letter-spacing:.005em;overflow-wrap:break-word;word-break:break-word}
.woocommerce-checkout .form-row.place-order,
.woocommerce-checkout #payment .form-row.place-order,
.woocommerce-checkout #order_review .form-row.place-order{
  text-align:center !important;padding-top:0;margin-top:2px;
  float:none !important;clear:both !important;width:100% !important;display:block !important;
}
.woocommerce-checkout .form-row.place-order #place_order,
.woocommerce-checkout #payment #place_order,
.woocommerce-checkout #order_review #place_order,
.woocommerce-checkout button#place_order{
  float:none !important;display:block !important;margin:0 auto !important;width:auto !important;
}
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout #order_review{background:#fff;border:1px solid rgba(15,23,32,.18);padding:26px 22px}
/* "Tus datos" (billing) uses the full width — the shipping column is
   always empty on this digital-only store, so it shouldn't reserve half
   the row. */
.woocommerce-checkout #customer_details.col2-set,
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2{width:100%;float:none}
.woocommerce-checkout #customer_details .col-2{display:none}
.woocommerce-checkout #customer_details{margin-bottom:20px}
.woocommerce-checkout #order_review_heading{margin-top:4px}
.woocommerce-checkout .pasos-compacto{margin-top:28px;padding:22px 20px}
.woocommerce-checkout .pasos-compacto h2{font-size:19px;margin-bottom:12px}
.woocommerce-checkout .pasos-compacto .paso{grid-template-columns:30px 1fr;gap:10px;padding:10px 0}
.woocommerce-checkout .pasos-compacto .paso b{font-size:18px}
.woocommerce-checkout .pasos-compacto .paso h3{font-size:16px;margin-bottom:2px}
.woocommerce-checkout .pasos-compacto .paso p{font-size:15px;line-height:1.45}
.woocommerce-checkout label{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;opacity:.8}
.woocommerce-checkout input[type=text],
.woocommerce-checkout input[type=email],
.woocommerce-checkout input[type=tel]{font-family:var(--f-body);font-size:19px;padding:16px 15px;
  border:1px solid rgba(15,23,32,.35);border-radius:0;background:#fff;color:#0F1720}
.woocommerce-checkout input:focus{outline:3px solid var(--ambar);outline-offset:-1px}
.woocommerce-checkout #place_order,
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button{
  background:var(--ambar) !important;color:#221704 !important;font-family:var(--f-disp);
  text-transform:uppercase;letter-spacing:.05em;font-size:19px;padding:21px 34px;border-radius:0;border:none}
.woocommerce a.button:hover,.woocommerce button.button:hover{background:var(--ambar-hover) !important}
.woocommerce-checkout .order-total .amount{font-family:var(--f-disp);font-size:30px}

/**
 * Pull the "Pagar" button tight against the Total row instead of sitting in
 * its own separated grey box: neutralize WooCommerce core's default
 * #payment background/border/padding (which otherwise visually splits it
 * from the totals table above), and compact the payment-methods area
 * (including the "no payment methods" notice — kept visible, just tighter,
 * so a missing gateway doesn't break the layout).
 */
.woocommerce-checkout table.shop_table{margin-bottom:0;border:none}
.woocommerce-checkout #payment{background:transparent;padding:14px 0 0;margin:6px 0 0;border-top:1px solid rgba(15,23,32,.14)}
.woocommerce-checkout #payment ul.payment_methods{margin:0 0 10px;padding:0;border:none;list-style:none}
.woocommerce-checkout #payment .woocommerce-info{margin:0 0 12px;padding:12px 14px;font-size:15px;background:#fff;border:1px solid rgba(15,23,32,.18)}
.woocommerce-checkout #payment .form-row.place-order{margin:0;padding:0}

/**
 * Flow gateway: no big logo next to the method label (only the label
 * text/radio shows there); any image inside the description area (where a
 * plugin-provided Webpay badge would live, if one exists) stays capped to a
 * small, proportioned size — never stretched, never invented if it doesn't
 * exist. Also compacts the method row + description box so there's no
 * excess vertical space between the payment method and the button below.
 */
.woocommerce-checkout ul.payment_methods li > label img{display:none}
.woocommerce-checkout ul.payment_methods li{margin:0 0 8px;padding:0}
.woocommerce-checkout ul.payment_methods label{display:flex;align-items:center;gap:8px}
.woocommerce-checkout .payment_box{background:transparent;border:none;margin:6px 0 0;padding:0;font-size:15px;opacity:.85}
.woocommerce-checkout .payment_box:before{display:none}
.woocommerce-checkout .payment_box p{margin:0}
.woocommerce-checkout .payment_box img{max-width:64px !important;width:auto !important;height:auto !important;
  display:inline-block;vertical-align:middle;margin-right:6px}
.woocommerce-checkout .checkout-trust-caption{text-align:center;font-family:var(--f-mono);font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;opacity:.65;margin:12px 0 0}
.woocommerce-checkout #place_order{box-shadow:0 4px 14px rgba(233,178,60,.35);min-width:260px;padding-left:48px !important;padding-right:48px !important}

/* ==========================================================
   AÑADIDO PARA EL TEMA WORDPRESS (no viene del CSS oficial)
   Cubre piezas que la fuente deja a cargo "del tema": nav,
   pie de página simple, y las pantallas de carrito/checkout/
   gracias que WooCommerce genera dinámicamente. Mismo lenguaje
   visual (colores, tipografías, ritmo) que el resto del sitio.
   ========================================================== */

/* Nav sticky — solo se usa en el Home, ver header.php */
.nok .nav{position:sticky;top:0;z-index:70;background:var(--noche);color:var(--papel);border-bottom:1px solid rgba(241,244,248,.14)}
.nok .nav .wrap{display:flex;align-items:center;justify-content:space-between;height:60px;gap:20px}
.nok .nav-links{display:none;gap:28px}
.nok .nav-links a{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.nok .nav-links a:hover{opacity:1;color:var(--ambar)}
.nok .nok-cart-link{display:inline-flex;align-items:center;gap:6px;margin-left:14px}
.nok .precio-oferta{display:flex !important;flex-direction:column !important;align-items:flex-start !important;gap:10px}
.nok .oferta-badge{display:block;color:var(--ambar-txt)}
.nok .precio-bloque{display:flex !important;flex-direction:column !important;align-items:flex-start !important;width:100%}
.nok .precio-bloque .antes{display:block;font-family:var(--f-mono);font-size:14px;letter-spacing:.04em;text-decoration:line-through;opacity:.55;margin-bottom:2px}
.nok .precio-bloque .precio{display:block;font-family:var(--f-disp);font-size:34px;line-height:1.1}
.nok .precio-bloque .pago-unico{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.65;margin-top:4px}
.nok .precio-hero{margin-top:28px}
.nok .precio-hero .oferta-badge{color:var(--ambar)}
.nok .remate-antes{display:block;text-decoration:line-through;opacity:.7;margin-bottom:8px}
.nok .remate-oferta{display:block;opacity:.75;margin:-4px 0 14px}
.nok .nok-cart-count{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;
  background:var(--ambar);color:var(--noche);border-radius:50%;font-size:10px;line-height:1}
.nok .nav .cta{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--ambar);color:var(--ambar);padding:9px 14px;white-space:nowrap}
.nok .nav .cta:hover{background:var(--ambar);color:var(--noche)}
@media(min-width:860px){ .nok .nav-links{display:flex} }

/* Pie simple (todas las páginas) */
.nok .pie{padding:28px 0 46px;text-align:center;background:var(--papel);color:var(--tinta)}
.nok .pie .mono{opacity:.5}

/* Contacto: layout de dos columnas */
.nok .fila-doble{display:grid;gap:18px}
@media(min-width:860px){ .nok .fila-doble{grid-template-columns:1fr 1fr} }
.nok .lateral{display:grid;gap:16px}

/* Carrito / resumen de pedido */
.nok .encabezado{margin-bottom:30px}
.nok .encabezado .mono{color:var(--ambar-txt);display:block;margin-bottom:14px}
.nok .encabezado h1{font-size:clamp(32px,7vw,50px);margin-bottom:16px}
.nok .encabezado p{font-size:19px;opacity:.92;max-width:46ch}
.nok .item{background:#fff;border:1px solid rgba(15,23,32,.18);padding:22px;display:grid;grid-template-columns:80px 1fr;gap:18px;align-items:start}
.nok .item .mini{width:80px;height:104px;background:var(--superficie);border:1px dashed rgba(15,23,32,.3);display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;text-align:center;opacity:.6;padding:6px;line-height:1.5}
.nok .item h3{font-size:20px;margin-bottom:6px;line-height:1.1}
.nok .item .meta{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.7;display:block;margin-bottom:10px}
.nok .item .val{font-family:var(--f-disp);font-size:24px}
.nok .totales{background:#fff;border:1px solid rgba(15,23,32,.18);border-top:none;padding:20px 22px}
.nok .fila{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;font-size:18px}
.nok .fila.total{border-top:1px solid rgba(15,23,32,.18);margin-top:10px;padding-top:16px}
.nok .fila.total span:last-child{font-family:var(--f-disp);font-size:30px}
.nok .fila small{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.65;display:block}
.nok .btn-sec{background:transparent;color:var(--tinta);border:1px solid rgba(15,23,32,.3);font-size:16px;padding:16px 20px;margin-top:10px}

/* Confianza / pago seguro */
.nok .pagos,.nok .confianza{margin-top:26px;border:1px solid rgba(15,23,32,.18);background:#fff;padding:20px 22px}
.nok .pagos .mono,.nok .confianza .mono{color:var(--ambar-txt);display:block;margin-bottom:14px}
.nok .logos{display:flex;flex-wrap:wrap;gap:9px}
.nok .logo-p{border:1px solid rgba(15,23,32,.22);padding:10px 14px;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.nok .pagos p,.nok .confianza p{font-size:16px;opacity:.85;margin-top:14px}

/* Qué pasa después de pagar */
.nok .pasos{margin-top:30px;background:var(--noche);color:var(--papel);padding:30px 24px}
.nok .pasos h2{font-size:24px;margin-bottom:20px}
.nok .paso{display:grid;grid-template-columns:38px 1fr;gap:14px;padding:14px 0;border-top:1px solid rgba(241,244,248,.18)}
.nok .paso:first-of-type{border-top:none;padding-top:0}
.nok .paso b{font-family:var(--f-disp);font-size:22px;color:var(--ambar);line-height:1}
.nok .paso h3{font-size:19px;margin-bottom:4px}
.nok .paso p{font-size:17px;opacity:.85;line-height:1.55}

.nok .aviso{margin-top:24px;border-left:3px solid var(--ambar-txt);padding:4px 0 4px 18px;font-size:17px;color:var(--tinta);opacity:.92}

/* Barra de progreso del checkout (decorativa, vía hook) */
.nok .progreso{background:var(--noche-2);color:var(--papel);border-bottom:1px solid rgba(241,244,248,.18)}
.nok .progreso .wrap{display:flex;padding:0}
.nok .etapa{flex:1;padding:14px 8px;text-align:center;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.45;border-bottom:3px solid transparent}
.nok .etapa.on{opacity:1;color:var(--ambar);border-bottom-color:var(--ambar)}

/* Página de gracias */
.nok .marca-ok{width:64px;height:64px;background:var(--ambar-txt);border:none;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-disp);font-size:34px;color:#FFFFFF;margin-bottom:24px}
.nok .descarga{background:var(--noche);color:var(--papel);padding:30px 24px;margin-top:8px}
.nok .descarga h2{font-size:26px;margin-bottom:12px}
.nok .descarga p{font-size:18px;opacity:.9;margin-bottom:20px}
.nok .descarga .btn{margin-top:0}
.nok .descarga table, .nok .descarga a{color:var(--papel)}
.nok .tarjeta{border:1px solid rgba(15,23,32,.18);background:#fff;padding:24px 22px;margin-top:16px;color:var(--tinta)}
.nok .tarjeta h3{font-size:21px;margin-bottom:9px}
.nok .tarjeta p{font-size:17px;opacity:.9}
.nok .tarjeta .mono{color:var(--ambar-txt);display:block;margin-bottom:11px}

@media(min-width:860px){
  .nok .pasos{padding:40px 34px}
}