/* Extraído de salud-01-checkout.html (lo que añade sobre base.css). NO EDITAR: se regenera. */

/* Página interior: mismas tres diferencias con el home que en PDP, PLP, carrito y cuenta. */
.s01-siteheader.is-inner{ margin-bottom:0; }
.s01-stage{ background:var(--paper); min-height:100vh; }
.s01-siteheader.is-inner:not(.paint) .s01-links > a,
.s01-siteheader.is-inner:not(.paint) .s01-navitem > a,
.s01-siteheader.is-inner:not(.paint) .s01-login,
.s01-siteheader.is-inner:not(.paint) .s01-icon{ color:var(--ink); }
.s01-siteheader.is-inner:not(.paint) .s01-logo-img{ filter:brightness(0); }
.s01-siteheader.is-inner:not(.paint) .s01-cta{ background:var(--azul-fuerte); color:#fff; }
.s01-siteheader.is-inner:not(.paint) .s01-cta:hover{ background:var(--azul-navy); }

/* ——— Primitivos de formulario ———
   Vivían sueltos en el generador de contacto y el cotizador los usaba sin tenerlos: sus campos
   salían con el estilo nativo del navegador. Un primitivo compartido va en el armazón. */
.s01-campo{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.s01-campo > span{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:9.6px; line-height:11.52px; letter-spacing:.64px; text-transform:uppercase; color:var(--gris-medio); }
.s01-campo > span i{ font-style:normal; text-transform:none; letter-spacing:0; }
.s01-campo input,.s01-campo textarea{ width:100%; min-width:0; font-family:var(--font-ui); font-size:16px; letter-spacing:-.01em; color:var(--ink);
  background:#fff; border:1px solid var(--gris-claro); border-radius:2.4px; padding:12px 14px; transition:border-color .15s ease, box-shadow .15s ease; }
.s01-campo textarea{ resize:vertical; line-height:23px; }
.s01-campo input::placeholder,.s01-campo textarea::placeholder{ color:var(--gris-medio); }
.s01-campo input:focus,.s01-campo textarea:focus{ outline:none; border-color:var(--azul-fuerte); box-shadow:0 0 0 3px rgba(53,57,142,.10); }
.s01-campo input:user-invalid{ border-color:#C0392B; }

/* Desplegable propio. El <select> nativo pinta el control del sistema operativo y rompe el
   lenguaje del sitio; este es el mismo patrón del orden del catálogo, en versión campo. */
.s01-sel{ position:relative; }
.s01-sel-btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; text-align:left;
  font-family:var(--font-ui); font-size:16px; letter-spacing:-.01em; color:var(--ink);
  background:#fff; border:1px solid var(--gris-claro); border-radius:2.4px; padding:12px 14px; transition:border-color .15s ease, box-shadow .15s ease; }
.s01-sel-btn:hover{ border-color:var(--azul-medio); }
.s01-sel-btn[aria-expanded="true"]{ border-color:var(--azul-fuerte); box-shadow:0 0 0 3px rgba(53,57,142,.10); }
.s01-sel-btn:focus-visible{ outline:2px solid var(--azul-fuerte); outline-offset:1px; }
.s01-sel-chev{ flex:none; width:7px; height:7px; margin-top:-3px; border-right:1.5px solid var(--gris-medio); border-bottom:1.5px solid var(--gris-medio); transform:rotate(45deg); transition:transform .2s cubic-bezier(.16,1,.3,1); }
.s01-sel-btn[aria-expanded="true"] .s01-sel-chev{ margin-top:3px; transform:rotate(225deg); }
.s01-sel-list{ position:absolute; z-index:40; top:calc(100% + 6px); left:0; right:0; margin:0; padding:6px; list-style:none;
  background:#fff; border:1px solid var(--gris-claro); border-radius:9.6px; box-shadow:0 18px 44px rgba(15,22,32,.14); max-height:280px; overflow-y:auto; }
.s01-sel-o{ padding:10px 12px; border-radius:2.4px; cursor:pointer; font-family:var(--font-ui); font-size:15px; letter-spacing:-.01em; color:#41485A; }
.s01-sel-o:hover{ background:#EEF1F9; color:var(--ink); }
.s01-sel-o.is-on{ background:#EEF1F9; color:var(--azul-navy); font-weight:600; }

/* Cabecera común a las páginas de contenido: mismas medidas que la de catálogo. */
.s01-pg-head{ padding:56px var(--edge) 0; }
.s01-pg-h1{ font-family:"Neue Montreal","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:400; font-size:56px; line-height:1.02; letter-spacing:-.02em; color:var(--ink); margin:18px 0 0; }
.s01-pg-sub{ font-family:var(--font-ui); font-size:17px; line-height:26px; letter-spacing:-.01em; color:#5A6472; max-width:60ch; margin:16px 0 0; }
.s01-pg{ padding:70px var(--edge) 96px; }
@media (max-width:1024px){ .s01-pg-h1{ font-size:42px; } .s01-pg{ padding-top:40px; } }
@media (max-width:767px){ .s01-pg-head{ padding-top:36px; } .s01-pg-h1{ font-size:32px; } .s01-pg-sub{ font-size:15px; line-height:23px; } }

/* ═══════════ Finalizar compra + Pedido recibido · piezas comunes ═══════════
   Lo leen los DOS generadores (build-checkout.js y build-pedido-recibido.js). No es un sistema
   nuevo: cada bloque es el clon, con prefijo s01-cko, de una pieza ya aprobada que vive en OTRO
   generador y por eso no llega a estas páginas (comprobado con grep sobre el HTML generado):

     .s01-cko-caja / -ayuda / -bh / -todo   ← .s01-wz-caja · .s01-wz-ayuda · .s01-cot-bh · .s01-cot-todo (cotizador)
     .s01-cko-res-card / -f / -sub / -nota  ← .s01-ped-res-card · .s01-ped-f · .s01-ped-sub · .s01-ped-nota (carrito)
     .s01-cko-tabla / -l-h / -l             ← .s01-cot-tabla · .s01-cot-pl-h · .s01-cot-pl (paso 3 del cotizador), sin stepper
     .s01-cko-datos                         ← .s01-cnt-datos (Mi cuenta · facturación), en blanco dentro de la caja
     .s01-cko-est                           ← .s01-cnt-est (estados de pedido de Mi cuenta)

   Mismas medidas, mismos radios (2.4 controles · 7 visuales · 9.6 contenedores), misma regla.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── retícula de dos columnas: la del carrito (8 + 4 de 12) ── */
.s01-cko-grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:12.8px; align-items:start; }
.s01-cko-col{ grid-column:1 / 9; min-width:0; display:flex; flex-direction:column; gap:12.8px; }
.s01-cko-res{ grid-column:9 / 13; min-width:0; position:sticky; top:calc(var(--header-h) + 16px); display:flex; flex-direction:column; gap:12.8px; }

/* ── caja de paso ── */
.s01-cko-caja{ background:#F1F4FB; border-radius:9.6px; padding:32px 34px; display:flex; flex-direction:column; gap:18px; min-width:0; }
.s01-cko-caja > *{ min-width:0; }
.s01-cko-caja h2{ margin:0; font-family:"Neue Montreal","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:400; font-size:26px; line-height:1.06; letter-spacing:-.02em; color:var(--ink); }
.s01-cko-caja h2 span{ color:var(--azul-fuerte); }
.s01-cko-ayuda{ margin:-8px 0 0; font-family:var(--font-ui); font-size:15px; line-height:23px; letter-spacing:-.01em; color:#5A6472; max-width:62ch; }
.s01-cko-bh{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.s01-cko-bh h2{ margin:0; }
.s01-cko-todo{ flex:none; background:none; border:0; padding:0; cursor:pointer; font-family:var(--font-ui); font-size:14px; font-weight:500; letter-spacing:-.01em; color:var(--azul-fuerte); text-decoration:none; }
.s01-cko-todo:hover{ text-decoration:underline; }
.s01-cko-eyebrow{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:9.6px; line-height:11.52px; letter-spacing:.64px; text-transform:uppercase; color:var(--gris-medio); }

/* ── resumen lateral · clon del carrito ── */
.s01-cko-res-card{ background:#F1F4FB; border-radius:9.6px; padding:26px 24px; display:flex; flex-direction:column; gap:12px; }
.s01-cko-res-t{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:4px;
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:9.6px; line-height:11.52px; letter-spacing:.64px; text-transform:uppercase; color:var(--azul-medio); }
.s01-cko-res-t a{ font-family:var(--font-ui); font-size:13px; font-weight:500; letter-spacing:-.01em; text-transform:none; color:var(--azul-fuerte); text-decoration:none; }
.s01-cko-res-t a:hover{ text-decoration:underline; }
.s01-cko-f{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; font-family:var(--font-ui); font-size:15px; letter-spacing:-.01em; color:#5A6472; }
.s01-cko-f b{ font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; text-align:right; }
/* "Por confirmar" no es una cifra: se escribe como estado, en gris, no como un importe. */
.s01-cko-f b.is-pend{ font-weight:500; color:var(--gris-medio); }
.s01-cko-f.is-regla{ padding-top:14px; margin-top:4px; border-top:1px solid var(--gris-claro); }
.s01-cko-sub{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding-top:14px; margin-top:4px; border-top:1px solid var(--gris-claro);
  font-family:var(--font-ui); font-size:15px; letter-spacing:-.01em; color:#5A6472; }
.s01-cko-sub b{ font-family:"Neue Montreal","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:400; font-size:26px; line-height:1; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.s01-cko-sub b i{ font-style:normal; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:9.6px; letter-spacing:.64px; color:var(--gris-medio); margin-left:3px; }
.s01-cko-nota{ margin:0; font-family:var(--font-ui); font-size:13px; line-height:19px; letter-spacing:-.01em; color:var(--gris-medio); }
.s01-cko-nota b{ color:var(--ink); font-weight:600; }

/* ── líneas de solo lectura · el lenguaje de la tabla del paso 3 del cotizador ──
   Mismas pistas menos el stepper: aquí la cantidad se lee, no se edita (se edita en el carrito). */
.s01-cko-tabla{ background:#fff; border-radius:9.6px; overflow:hidden; }
.s01-cko-l-h,
.s01-cko-l{ display:grid; grid-template-columns:52px minmax(0,1fr) 96px 64px 112px; align-items:center; gap:18px; padding:14px 18px; }
.s01-cko-l-h{ padding-top:13px; padding-bottom:13px; border-bottom:1px solid rgba(26,34,48,.10);
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:9.6px; letter-spacing:.64px; text-transform:uppercase; color:var(--gris-medio); }
.s01-cko-l-h span{ min-width:0; }
.s01-cko-l-h span:nth-child(n+3){ text-align:right; }
.s01-cko-l + .s01-cko-l{ border-top:1px solid rgba(26,34,48,.10); }
.s01-cko-l-img{ width:52px; height:48px; border-radius:4px; overflow:hidden; }
.s01-cko-l-img img{ width:100%; height:100%; object-fit:contain; display:block; }
.s01-cko-l-img.is-sin{ display:flex; align-items:center; justify-content:center; border:1px dashed var(--gris-claro); border-radius:4px;
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:9.6px; letter-spacing:.64px; text-transform:uppercase; color:var(--gris-medio); }
.s01-cko-l-t{ min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
.s01-cko-l-n{ font-family:var(--font-ui); font-size:15px; letter-spacing:-.01em; color:var(--ink); }
.s01-cko-l-m{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:9.6px; letter-spacing:.64px; text-transform:uppercase; color:var(--gris-medio); }
.s01-cko-l-u,.s01-cko-l-q{ min-width:0; text-align:right; font-family:var(--font-ui); font-size:14px; letter-spacing:-.01em; color:#5A6472; font-variant-numeric:tabular-nums; white-space:nowrap; }
.s01-cko-l-p{ min-width:0; text-align:right; font-family:var(--font-ui); font-size:15px; font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ── ficha de datos · clon de Mi cuenta → Facturación, en blanco porque vive dentro de la caja ── */
.s01-cko-datos{ background:#fff; border-radius:9.6px; padding:4px 22px; }
.s01-cko-datos > div{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; padding:14px 0; }
.s01-cko-datos > div + div{ border-top:1px dotted var(--gris-claro); }
.s01-cko-datos span{ flex:none; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:9.6px; letter-spacing:.64px; text-transform:uppercase; color:var(--gris-medio); }
.s01-cko-datos b{ min-width:0; font-family:var(--font-ui); font-size:15px; font-weight:500; letter-spacing:-.01em; color:var(--ink); text-align:right; overflow-wrap:anywhere; }
.s01-cko-datos b small{ display:block; margin-top:2px; font-size:13px; font-weight:400; color:var(--gris-medio); }

/* ── estado · clon de .s01-cnt-est. El verde es puntuación: solo marca lo ya resuelto. ── */
.s01-cko-est{ display:inline-flex; align-items:center; gap:6px; padding:4px 9px; border-radius:2.4px; white-space:nowrap;
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:9.6px; line-height:11.52px; letter-spacing:.64px; text-transform:uppercase; }
.s01-cko-est i{ width:5px; height:5px; border-radius:50%; background:currentColor; }
.s01-cko-est.is-ok{ color:#4C8B23; background:rgba(112,182,44,.14); }
.s01-cko-est.is-curso{ color:var(--azul-fuerte); background:rgba(53,57,142,.10); }
.s01-cko-est.is-pend{ color:var(--gris-medio); background:rgba(26,34,48,.07); }

.s01-pg [hidden]{ display:none !important; }

@media (max-width:1024px){
  .s01-cko-grid{ grid-template-columns:1fr; }
  .s01-cko-col,.s01-cko-res{ grid-column:auto; }
  .s01-cko-res{ position:static; }
  .s01-cko-caja{ padding:26px 22px; }
}
@media (max-width:767px){
  .s01-cko-bh{ flex-direction:column; align-items:flex-start; gap:8px; }
  .s01-cko-datos{ padding:4px 16px; }
  .s01-cko-datos > div{ flex-direction:column; align-items:flex-start; gap:6px; }
  .s01-cko-datos b{ text-align:left; }
  /* A 390 las cinco pistas no caben: miniatura + nombre arriba, cajas e importe abajo.
     Mismo reparto que el cotizador en móvil. */
  .s01-cko-l-h{ display:none; }
  .s01-cko-l{ grid-template-columns:52px minmax(0,1fr) auto; gap:8px 14px; align-items:start; padding:14px 16px; }
  .s01-cko-l-t{ grid-column:2 / -1; }
  .s01-cko-l-u{ display:none; }
  .s01-cko-l-q{ grid-column:2 / 3; text-align:left; }
  .s01-cko-l-p{ grid-column:3 / -1; }
}

/* ═══════════ Finalizar compra · lo propio de esta página ═══════════
   Cada bloque dice de qué pieza aprobada es clon. Las clases originales (.s01-wz-*, .s01-cot-*,
   .s01-cnt-*, .s01-flt-box) viven en OTROS generadores y no llegan aquí: usarlas habría pintado
   controles nativos. Se redefinen con prefijo s01-cko y los mismos valores.
   ═════════════════════════════════════════════════════════════════ */

/* Cabecera centrada, como el cotizador: la página es un paso a paso. */
.s01-pg-head{ text-align:center; }
.s01-pg-head .s01-pg-sub{ margin-left:auto; margin-right:auto; }

/* ── pastillas de paso · clon de .s01-wz-pasos ── */
.s01-cko-pasos{ display:flex; align-items:center; justify-content:center; gap:12px; margin:0 0 36px; padding:0; list-style:none; flex-wrap:wrap; }
.s01-cko-paso{ display:flex; align-items:center; gap:10px; padding:10px 16px 10px 10px; border-radius:9.6px; background:#F1F4FB; opacity:.5; transition:opacity .2s ease, background .2s ease; }
.s01-cko-paso span{ display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:#fff; color:var(--gris-medio);
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; }
.s01-cko-paso b{ font-family:var(--font-ui); font-size:15px; font-weight:500; letter-spacing:-.01em; color:#5A6472; white-space:nowrap; }
.s01-cko-paso.is-on{ opacity:1; background:#EEF1F9; }
.s01-cko-paso.is-on span{ background:var(--azul-fuerte); color:#fff; }
.s01-cko-paso.is-on b{ color:var(--azul-navy); font-weight:600; }
.s01-cko-paso.is-hecho{ opacity:1; }
.s01-cko-paso.is-hecho span{ background:rgba(112,182,44,.18); color:#4C8B23; }

/* Composición por paso. La cabecera y las pastillas son de la PÁGINA (centradas); el paso 1 es
   la puerta del cotizador tal cual, una columna centrada, con el pedido en una franja compacta
   debajo. Con la puerta a 559 al lado de un resumen de 445 la página se leía partida en dos
   (titular centrado, caja descolgada a la izquierda). Los pasos 2 y 3 son tarea con dinero y
   ahí sí va la retícula del carrito: 8 columnas de asistente + 4 de resumen pegajoso. */
.s01-cko[data-paso="1"] .s01-cko-res{ display:none; }
.s01-cko[data-paso="1"] .s01-cko-col{ grid-column:1 / -1; }
.s01-cko-mini{ display:flex; align-items:baseline; justify-content:space-between; gap:8px 16px; flex-wrap:wrap; padding:16px 20px; border-radius:9.6px; background:#fff; border:1px solid var(--gris-claro); }
.s01-cko-mini > span{ font-family:var(--font-ui); font-size:14px; letter-spacing:-.01em; color:#5A6472; }
.s01-cko-mini > span b{ color:var(--ink); font-weight:600; }
.s01-cko-mini > b{ font-family:"Neue Montreal","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:400; font-size:22px; line-height:1; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.s01-cko-mini > b i{ font-style:normal; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:9.6px; letter-spacing:.64px; color:var(--gris-medio); margin-left:3px; }

/* Cada paso apila sus cajas con el gap de la retícula, no con márgenes sueltos. */
.s01-cko-p{ display:flex; flex-direction:column; gap:12.8px; min-width:0; }

/* ── paso 1 · la puerta ──
   Anchos heredados del cotizador, no re-decididos: 559.2 (5 col) el login, 788 (7 col) el alta.
   Centrada en la página, como en el cotizador. */
.s01-cko-p[data-p="1"] .s01-cko-caja,
.s01-cko-p[data-p="1"] .s01-cko-mini,
.s01-cko-p[data-p="1"] .s01-cko-acc{ width:100%; max-width:559.2px; margin-left:auto; margin-right:auto; }
.s01-cko-p[data-p="1"] .s01-cko-caja{ padding:32px 40px; }
.s01-cko-auth[data-tab="registrar"] .s01-cko-caja{ max-width:788px; }
.s01-cko-tabs{ display:flex; gap:28px; border-bottom:1px solid rgba(26,34,48,.14); margin-bottom:4px; }
.s01-cko-tab{ position:relative; background:none; border:0; padding:0 0 14px; cursor:pointer;
  font-family:var(--font-ui); font-size:16px; font-weight:600; letter-spacing:-.01em; color:var(--gris-medio); transition:color .16s ease; }
.s01-cko-tab:hover,.s01-cko-tab.is-on{ color:var(--ink); }
.s01-cko-tab.is-on::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--azul-fuerte); }
.s01-cko-form{ display:flex; flex-direction:column; gap:18px; }
.s01-cko-form > *{ min-width:0; }
.s01-cko-form .s01-pcard-btn{ flex:none; align-self:flex-start; padding-left:32px; padding-right:32px; }
.s01-cko-olvide{ align-self:flex-start; margin-top:-8px; font-family:var(--font-ui); font-size:14px; letter-spacing:-.01em; color:var(--azul-fuerte); text-decoration:none; }
.s01-cko-olvide:hover{ text-decoration:underline; }
.s01-cko-fila{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; }
.s01-cko-salir{ align-self:flex-start; background:none; border:0; padding:0; cursor:pointer; font-family:var(--font-ui); font-size:14px; letter-spacing:-.01em; color:var(--gris-medio); }
.s01-cko-salir:hover{ color:#C0392B; text-decoration:underline; }
.s01-cko-ayuda b{ color:var(--ink); font-weight:600; }

/* ── checkbox dibujado · clon de .s01-wz-acepto + .s01-flt-box ── */
.s01-cko-acepto{ position:relative; display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-family:var(--font-ui); font-size:14px; line-height:20px; letter-spacing:-.01em; color:#5A6472; }
.s01-cko-acepto input{ position:absolute; opacity:0; width:0; height:0; }
.s01-cko-box{ margin-top:1px; flex:none; width:17px; height:17px; border:1.5px solid var(--gris-claro); border-radius:2.4px; background:#fff; position:relative; transition:background .12s ease, border-color .12s ease; }
.s01-cko-box::after{ content:""; position:absolute; left:5px; top:1.5px; width:4px; height:8.5px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(45deg) scale(.6); opacity:0; transition:opacity .12s ease, transform .12s ease; }
.s01-cko-acepto input:checked ~ .s01-cko-box{ background:var(--azul-fuerte); border-color:var(--azul-fuerte); }
.s01-cko-acepto input:checked ~ .s01-cko-box::after{ opacity:1; transform:rotate(45deg) scale(1); }
.s01-cko-acepto input:focus-visible ~ .s01-cko-box{ outline:2px solid var(--azul-fuerte); outline-offset:2px; }
.s01-cko-acepto a{ color:var(--azul-fuerte); }
/* Variante del interruptor de factura: la opción es una decisión, no letra pequeña. */
.s01-cko-acepto.is-fuerte{ font-size:15px; line-height:21px; }
.s01-cko-acepto.is-fuerte b{ display:block; font-weight:600; color:var(--ink); }
/* Términos sin aceptar al intentar confirmar: el borde lo señala, el aviso lo dice. */
.s01-cko-acepto.is-falta .s01-cko-box{ border-color:#C0392B; }

/* ── barra de acciones · clon de .s01-wz-acc ── */
.s01-cko-acc{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:10px; }
.s01-cko-acc .s01-pcard-btn{ flex:none; padding-left:32px; padding-right:32px; }
.s01-cko-acc .s01-pcard-btn:disabled{ opacity:.42; pointer-events:none; }
.s01-cko-acc-r{ display:flex; align-items:center; gap:10px; }
.s01-cko-atras{ background:none; border:0; padding:0; cursor:pointer; font-family:var(--font-ui); font-size:15px; font-weight:500; letter-spacing:-.01em; color:var(--gris-medio); text-decoration:none; }
.s01-cko-atras:hover{ color:var(--ink); }
.s01-cko-aviso{ margin:0; text-align:right; font-family:var(--font-ui); font-size:14px; line-height:20px; letter-spacing:-.01em; color:#C0392B; }

/* ── tarjeta seleccionable · clon de .s01-cnt-t (contenido) sobre .s01-cot-modo (estado) ──
   Dentro de la caja gris la tarjeta va en blanco, igual que los modos del cotizador. */
.s01-cko-dirs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12.8px; }
.s01-cko-dir,
.s01-cko-met{ position:relative; background:#fff; border:1px solid var(--gris-claro); border-radius:9.6px; transition:border-color .15s ease, box-shadow .15s ease; min-width:0; }
.s01-cko-dir:hover,.s01-cko-met:hover{ border-color:var(--azul-medio); }
.s01-cko-dir:has(input:checked),
.s01-cko-met:has(input:checked){ border-color:var(--azul-fuerte); box-shadow:0 0 0 3px rgba(53,57,142,.10); }
.s01-cko-dir:has(input:focus-visible),
.s01-cko-met:has(input:focus-visible){ outline:2px solid var(--azul-fuerte); outline-offset:2px; }
.s01-cko-dir input,.s01-cko-met input{ position:absolute; opacity:0; width:0; height:0; }
.s01-cko-dir{ display:flex; flex-direction:column; }
.s01-cko-dir-sel{ display:flex; flex-direction:column; gap:10px; padding:22px 24px 0; cursor:pointer; min-width:0; }
.s01-cko-dir-h{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; }
.s01-cko-dir-h b{ font-family:var(--font-ui); font-size:17px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.s01-cko-pred{ padding:3px 8px; border-radius:2.4px; background:rgba(53,57,142,.10); color:var(--azul-fuerte);
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:9.6px; line-height:11.52px; letter-spacing:.64px; text-transform:uppercase; }
.s01-cko-dir-p{ font-family:var(--font-ui); font-size:15px; line-height:23px; letter-spacing:-.01em; color:#41485A; }
.s01-cko-dir-m{ font-family:var(--font-ui); font-size:13px; line-height:19px; letter-spacing:-.01em; color:var(--gris-medio); }
.s01-cko-dir-acc{ display:flex; gap:14px; padding:12px 24px 20px; }
.s01-cko-dir-acc button{ background:none; border:0; padding:0; cursor:pointer; font-family:var(--font-ui); font-size:13px; font-weight:500; letter-spacing:-.01em; color:var(--azul-fuerte); }
.s01-cko-dir-acc button:hover{ text-decoration:underline; }

/* Radio dibujado: la familia del checkbox (1.5px gris claro → azul fuerte), en círculo. */
.s01-cko-radio{ flex:none; width:17px; height:17px; border-radius:50%; border:1.5px solid var(--gris-claro); background:#fff; position:relative; transition:border-color .12s ease; }
.s01-cko-radio::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--azul-fuerte); transform:scale(.4); opacity:0; transition:opacity .12s ease, transform .12s ease; }
.s01-cko-dir:has(input:checked) .s01-cko-radio,
.s01-cko-met:has(input:checked) .s01-cko-radio{ border-color:var(--azul-fuerte); }
.s01-cko-dir:has(input:checked) .s01-cko-radio::after,
.s01-cko-met:has(input:checked) .s01-cko-radio::after{ opacity:1; transform:scale(1); }

/* ── formulario en sitio · clon de .s01-cnt-form ── */
.s01-cko-fform{ background:#fff; border-radius:9.6px; padding:24px; display:flex; flex-direction:column; gap:20px; min-width:0; }
.s01-cko-fform-t{ font-family:var(--font-ui); font-size:15px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.s01-cko-fform-g{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 12.8px; }
.s01-cko-fform-g > .is-ancho{ grid-column:1 / -1; }
.s01-cko-fform-acc{ display:flex; align-items:center; flex-wrap:wrap; gap:12px 24px; }
.s01-cko-fform-acc .s01-pcard-btn{ flex:none; padding-left:26px; padding-right:26px; }
.s01-cko-cancel{ background:none; border:0; padding:0; cursor:pointer; font-family:var(--font-ui); font-size:14px; letter-spacing:-.01em; color:var(--gris-medio); }
.s01-cko-cancel:hover{ color:var(--ink); }
/* Dentro de una caja blanca el campo blanco se perdería: toma el gris de la caja. */
.s01-cko-fform .s01-campo input,
.s01-cko-fform .s01-sel-btn{ background:#F7F9FC; }

/* ── envío ── */
.s01-cko-envio{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; background:#fff; border-radius:9.6px; }
.s01-cko-envio-t{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.s01-cko-envio-t b{ font-family:var(--font-ui); font-size:16px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.s01-cko-envio-t span{ font-family:var(--font-ui); font-size:14px; letter-spacing:-.01em; color:#5A6472; }

.s01-cko-oc{ padding-top:4px; }

/* ── métodos de pago · clon de .s01-cot-modos / .s01-cot-modo ── */
.s01-cko-mets{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12.8px; }
.s01-cko-met{ cursor:pointer; padding:20px 22px; display:flex; flex-direction:column; gap:6px; }
.s01-cko-met-h{ display:flex; align-items:center; gap:10px; }
.s01-cko-met-h b{ font-family:var(--font-ui); font-size:17px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.s01-cko-met-d{ padding-left:27px; font-family:var(--font-ui); font-size:14px; line-height:20px; letter-spacing:-.01em; color:#5A6472; }
.s01-cko-met-n{ padding-left:27px; margin-top:4px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:9.6px; line-height:11.52px; letter-spacing:.64px; text-transform:uppercase; color:#4C8B23; }
.s01-cko-met-aviso{ margin:0; padding:14px 18px; border-radius:2.4px; background:#EEF1F9; font-family:var(--font-ui); font-size:14px; line-height:20px; letter-spacing:-.01em; color:var(--azul-navy); }
.s01-cko-mets.is-falta .s01-cko-met{ border-color:#E3B1AB; }

/* Campos seguros de la pasarela: el campo común del armazón, con candado en la cabecera. */
.s01-cko-tarjeta{ background:#fff; border-radius:9.6px; padding:22px 24px 24px; display:flex; flex-direction:column; gap:16px; }
.s01-cko-seg-h{ display:flex; align-items:center; gap:8px; color:#4C8B23; }
.s01-cko-seg-h span{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:9.6px; line-height:11.52px; letter-spacing:.64px; text-transform:uppercase; }
.s01-cko-seg input{ background:#F7F9FC; font-variant-numeric:tabular-nums; }
.s01-cko-tarjeta.is-falta .s01-cko-seg input:placeholder-shown{ border-color:#C0392B; }

.s01-cko-cambiar{ align-self:flex-start; margin-top:-6px; }

/* ── carrito vacío · clon de .s01-ped-vacio ── */
.s01-cko-vacio{ max-width:788px; margin:0 auto; background:#F1F4FB; border-radius:9.6px; text-align:center; padding:80px 24px; }
.s01-cko-vacio-t{ font-family:"Neue Montreal","Helvetica Neue",Helvetica,Arial,sans-serif; font-size:26px; letter-spacing:-.02em; color:var(--ink); }
.s01-cko-vacio p{ margin:10px auto 20px; max-width:44ch; font-family:var(--font-ui); font-size:15px; line-height:24px; color:#5A6472; }
.s01-cko-vacio-acc{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.s01-cko-vacio .s01-pcard-btn{ flex:none; padding-left:28px; padding-right:28px; }

@media (max-width:1024px){
  .s01-cko-p[data-p="1"] .s01-cko-caja{ padding:26px 22px; }
}
@media (max-width:767px){
  .s01-cko-pasos{ gap:8px; margin-bottom:28px; }
  .s01-cko-paso{ padding:8px 12px 8px 8px; }
  .s01-cko-paso b{ font-size:13px; }
  .s01-cko-fila,.s01-cko-dirs,.s01-cko-mets,.s01-cko-fform-g{ grid-template-columns:minmax(0,1fr); }
  .s01-cko-fform{ padding:20px 16px; }
  .s01-cko-tarjeta{ padding:20px 16px; }
  /* En 390 los dos botones no caben a lo ancho con su padding: el principal va entero arriba
     y "Atrás" debajo, que es el orden en que se pulsan. */
  .s01-cko-acc{ flex-direction:column-reverse; align-items:stretch; gap:14px; }
  .s01-cko-acc .s01-pcard-btn,.s01-cko-acc-r{ width:100%; }
  .s01-cko-acc-r .s01-pcard-btn{ flex:1 1 auto; }
  .s01-cko-atras{ align-self:center; }
  .s01-cko-aviso{ text-align:center; }
  .s01-cko-envio{ padding:16px; }
  .s01-cko-dir-sel{ padding:18px 18px 0; }
  .s01-cko-dir-acc{ padding:10px 18px 16px; }
  .s01-cko-met{ padding:18px; }
}