/* ── Camino de compra de una organización (carro, pago, orden) ─────────────
   Pone al carro y al pago el mismo marco que la portada premium de la organización (org-premium.css):
   claro, azul, Georgia en los títulos. No reescribe el marcado —es el camino del pago, probado—: sólo
   repinta el vocabulario del catálogo (`.ct`) cuando la página lleva `.ct--op`. Mismo criterio que
   la «piel» del catálogo oscuro: una piel, no una copia. Se carga junto a org-premium.css. */
body.op-tienda{margin:0;background:#fcfcfd}
body.op-tienda .tabbar{display:none}
.ct.ct--op{
  --bg:#fcfcfd;--surface:#fff;--accent:#075cff;--text:#15243b;--muted:#657185;--line:#e5eaf2;
  --serif:Georgia,'Times New Roman',serif;--sans:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --text-primary:#15243b;--text-secondary:#657185;--text-tertiary:#8794a8;
  --surface-raised:#f5f7fb;--surface-sunken:#eef2f8;--surface-page:#fcfcfd;
  --border:#e5eaf2;--border-strong:#cbd5e4;--accent-hover:#0449cc;--accent-soft:#edf2ff;--accent-contrast:#fff;
  --success:#0e7a4f;--success-soft:#e8f5ee;--warning:#a65a00;--warning-soft:#fdf3e6;--danger:#c0281f;--danger-soft:#fcedec;
  color-scheme:light;
  width:min(1240px,calc(100% - 64px));max-width:none;margin:0 auto;padding:38px 0 96px;
  font:15px/1.6 var(--sans);letter-spacing:-.01em;
}
.ct--op h1,.ct--op h2,.ct--op h3{font-family:var(--serif);font-weight:400;letter-spacing:-.04em;line-height:1.15}
.ct--op h1{font-size:clamp(30px,4vw,42px);margin-bottom:26px}
.ct--op h2{font-size:26px}
.ct--op h3{font-size:20px}
.ct--op ::selection{background:#dbe6ff;color:#15243b}
/* superficies */
.ct--op .tarjeta,.ct--op .marco,.ct--op .estado{background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 10px 30px -18px rgba(21,36,59,.22);color:var(--text)}
.ct--op .estado{padding:36px 28px;display:flex;flex-direction:column;gap:12px}
.ct--op .estado .t-label{color:var(--accent);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.ct--op .estado__acciones{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.ct--op .nota{background:#f3f7ff;border:1px solid #dbe6ff;border-radius:10px;color:var(--text);font-size:13px}
/* líneas del carro: una tarjeta cada una */
.ct--op .carro-item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:12px;
  box-shadow:0 8px 24px -20px rgba(21,36,59,.25)}
.ct--op .carro-item--hijo{background:#f8faff;margin-left:20px}
.ct--op .carro-item__media{background:#edf2ff;border-radius:10px;color:#1e4a9e;align-self:flex-start;height:72px}
.ct--op .carro-item__inicial{font:600 14px var(--sans);color:#1e4a9e}
.ct--op .carro-item__tipo{color:var(--accent);font:700 10px var(--sans);letter-spacing:.12em}
.ct--op .carro-item__cuerpo a{color:var(--text)}
.ct--op .carro-item .t-sm{color:var(--muted)}
.ct--op .precio{color:var(--text);font-family:var(--sans);font-weight:700;font-variant-numeric:tabular-nums}
.ct--op .precio--lg{font-size:26px}
.ct--op .precio-antes{color:var(--muted)}
/* resumen */
.ct--op .resumen__fila,.ct--op .resumen__total{color:var(--text)}
.ct--op .resumen__fila span:first-child{color:var(--muted)}
.ct--op .resumen__total{border-top:1px solid var(--line)}
.ct--op .divisor,.ct--op hr{background:var(--line);border:0;height:1px}
.ct--op .cuota{color:var(--muted);font-size:13px}
/* campos */
.ct--op .etq,.ct--op .campo>label{color:var(--muted);font-size:12px;letter-spacing:.04em;text-transform:none;font-weight:600}
.ct--op .ayuda{color:var(--muted);font-size:12px}
.ct--op .input,.ct--op .select,.ct--op input[type="text"],.ct--op input[type="email"],.ct--op input[type="tel"],
.ct--op input[type="number"],.ct--op select,.ct--op textarea{background:#fff;border:1px solid var(--border-strong);color:var(--text);
  border-radius:8px;color-scheme:light}
.ct--op .input:focus-visible,.ct--op .select:focus-visible{border-color:var(--accent);outline:3px solid #cfe0ff;outline-offset:0}
.ct--op .input::placeholder{color:#8794a8}
.ct--op .stepper{border:1px solid var(--border-strong);background:#fff;border-radius:8px}
.ct--op .stepper button{color:var(--text);background:none}
/* botones: los de la portada */
.ct--op a.btn,.ct--op button.btn{border-radius:7px;border:1px solid var(--accent);background:#fff;color:var(--accent);
  font-weight:600;font-size:14px}
.ct--op a.btn--primario,.ct--op button.btn--primario{background:var(--accent);color:#fff;border-color:var(--accent)}
.ct--op a.btn--primario:hover,.ct--op button.btn--primario:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.ct--op a.btn--secundario,.ct--op button.btn--secundario{background:#fff;color:var(--accent);border-color:var(--accent)}
.ct--op a.btn--terciario,.ct--op button.btn--terciario{border:0;background:none;color:var(--muted);text-decoration:underline;
  text-underline-offset:4px;padding-inline:0}
.ct--op a.btn--terciario:hover,.ct--op button.btn--terciario:hover{color:var(--text)}
.ct--op .error,.ct--op .campo--malo .input{border-color:var(--danger)}
.ct--op .error{color:var(--danger)}
.ct--op .sec,.ct--op .ter,.ct--op .ct-tenue{color:var(--muted)}
.ct--op a:focus-visible,.ct--op button:focus-visible,.ct--op input:focus-visible,.ct--op select:focus-visible,
.ct--op summary:focus-visible{outline:3px solid #075cff;outline-offset:3px}
/* nombre en tres partes (checkout): etiquetas y alturas como el resto de los campos */
.ct--op .nombre-persona{align-items:end}
.ct--op .nombre-persona label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:var(--muted)}
.ct--op .nombre-persona .opcional{font-weight:400}
.ct--op .nombre-persona .input{height:44px;min-height:44px;font-weight:400;color:var(--text)}
/* cabecera y pie: una sola línea de aire con el contenido */
body.op-tienda .op header .wrap nav a:not(.btn){font-size:13px}
@media(max-width:700px){
  .ct.ct--op{width:calc(100% - 36px);padding:26px 0 72px}
  body.op-tienda .op header .wrap nav a:not(.btn){display:none}
}

/* ── El catálogo y la ficha del producto, con el marco de la organización ─────────────────────────
   Mismas dos piezas del catálogo oscuro (`catalogo.css`) repintadas bajo `.ct--op`: fondo claro, azul, Georgia
   en los títulos, tarjetas redondeadas con borde fino. Una piel, no una copia: el marcado y los nombres que
   mira `tienda.js` (`label.talla`, `[data-foto]`, `#form-compra`…) no cambian. */
.ct--op .ct-migas{color:var(--muted);padding-top:0;margin-bottom:22px;font-size:13px}
.ct--op .ct-migas a{color:var(--muted)}
.ct--op .ct-migas a:hover{color:var(--accent)}
.ct--op .ct-rot{color:var(--accent);font:700 11px var(--sans);letter-spacing:.14em;text-transform:uppercase}
.ct--op .ct-intro h1{font-weight:400}
.ct--op .ct-tenue,.ct--op .ct-barra p{color:var(--muted)}
/* botones y enlaces */
.ct.ct--op a.ct-cta,.ct.ct--op button.ct-cta{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:var(--accent);
  color:#fff;border:1px solid var(--accent);border-radius:8px;padding:15px 24px;font:600 15px var(--sans);letter-spacing:0;transition:background .2s}
.ct.ct--op a.ct-cta:hover,.ct.ct--op button.ct-cta:hover{background:var(--accent-hover);border-color:var(--accent-hover);gap:12px;transform:none}
.ct.ct--op button.ct-cta[disabled]{background:#cfd6e3;border-color:#cfd6e3;color:#fff;opacity:1}
.ct--op .ct-ir{color:var(--accent);border-bottom:1px solid currentColor;gap:10px;font-size:14px}
.ct--op .ct-ir:hover{gap:14px}
.ct--op .ct-limpiar{color:var(--muted)}
/* buscador, categorías y filtros */
.ct--op .ct-buscar input{background:#fff;border:1px solid var(--border-strong);border-radius:8px;color:var(--text);padding:12px 14px}
.ct--op .ct-panel,.ct--op .ct-filtro{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px -22px rgba(21,36,59,.22)}
.ct--op .ct-cat{background:#fff;border:1px solid var(--line);border-radius:999px;color:var(--text)}
.ct--op .ct-cat:hover{border-color:var(--accent);color:var(--accent)}
.ct--op .ct-cat.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.ct--op .ct-cat.on small{color:var(--accent)}
.ct--op .ct-op,.ct--op .ct-chip{border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--text)}
.ct--op .ct-orden select{color-scheme:light;color:var(--text);border-bottom-color:var(--border-strong)}
.ct--op .ct-vacio{border-block:1px solid var(--line);color:var(--muted)}
/* la rejilla: cada producto es una tarjeta */
.ct--op .ct-rejilla{gap:20px}
.ct--op .ficha{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;transition:box-shadow .2s}
.ct--op .ficha:hover{box-shadow:0 14px 32px -22px rgba(21,36,59,.35)}
.ct--op .ficha__media{border-radius:10px;background:#f4f6fa}
.ct--op .ficha:hover .ficha__media img{transform:none}
.ct--op .ficha__marca{margin-top:14px;color:var(--muted)}
.ct--op .ficha__nombre{font:600 15px/1.35 var(--sans);color:var(--text)!important}
.ct--op .ficha .precio{font:700 19px var(--sans);color:var(--text)}
.ct--op .ficha__badge{background:#fff;color:var(--accent);border:1px solid var(--line);border-radius:999px}
.ct--op .ficha .badge--ok{background:var(--success-soft);color:var(--success);border-radius:999px}
.ct--op .ct-puerta__f{border-radius:14px;border:1px solid var(--line)}
/* la ficha del producto */
.ct--op .pdp{gap:48px;padding-top:8px}
.ct--op .pdp-foto,.ct--op .pdp-tira{border-radius:14px;border:1px solid var(--line);background:#fff}
.ct--op .pdp-tira{border-radius:10px}
.ct--op .pdp-tira.on{outline:2px solid var(--accent);outline-offset:2px}
.ct--op .pdp-cab h1{font-weight:400;font-size:clamp(1.9rem,3vw,2.6rem);line-height:1.12;margin-bottom:0}
.ct--op .pdp-badge,.ct--op .pdp-dcto{background:var(--accent-soft);color:var(--accent);border-radius:999px;font-weight:600}
.ct--op .pdp-precio .precio{font:700 clamp(1.8rem,2.6vw,2.3rem) var(--sans);color:var(--text)}
.ct--op .destacados{border-block:1px solid var(--line)}
.ct--op .destacados__valor{font:600 17px/1.3 var(--sans);color:var(--text)}
.ct--op label.talla{border:1px solid var(--border-strong);border-radius:8px;background:#fff;color:var(--text)}
.ct--op label.talla:hover{border-color:var(--accent)}
.ct--op label.talla:has(input:checked){background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}
.ct--op .pdp-caja,.ct--op .pdp-entrega{background:#fff;border:1px solid var(--line);border-radius:12px}
.ct--op .pdp-aviso input{background:#fff;border:1px solid var(--border-strong);border-radius:8px;color:var(--text)}
.ct--op .pdp-comparar{border:1px solid var(--border-strong);border-radius:8px;color:var(--text);background:#fff}
.ct--op .pdp-comparar:hover{border-color:var(--accent);color:var(--accent)}
.ct--op .pdp-pest button[aria-selected="true"]{border-bottom-color:var(--accent);color:var(--accent)}
.ct--op .pdp-nosirve{background:#fff8ee;border-left:3px solid #e0912f;border-radius:0 8px 8px 0}
.ct--op .pdp-barra__p{background:var(--line);border-radius:3px}
.ct--op .pdp-barra__p i{background:var(--accent);border-radius:3px}
.ct--op .pdp-mini__f{border:1px solid var(--line);border-radius:10px}
.ct--op .pdp-mini__c .precio{font:700 15px var(--sans)}
@media (max-width:900px){
  body.op-tienda .pdp-fija{background:#fff!important;border-top:1px solid #e5eaf2!important}
  body.op-tienda .pdp-fija .precio{color:#15243b!important;font:700 1.2rem system-ui,-apple-system,sans-serif!important}
  body.op-tienda .pdp-fija > div span:last-child{color:#657185!important}
  .ct--op .pdp{gap:28px}
}