/* =============================================================
   CHECKOUT "EDICIÓN CLÍNICA" (F10) — FIDELIDAD TOTAL 3c/3d
   Fuente vinculante: design_handoff_esther_gaya/Propuestas
   Landing.dc.html ACTUALIZADO (frames id=3c / id=3d + plantilla
   checkoutVals() de la cola) + README del handoff.

   SOLO PRESENTACIÓN + ORDEN VISUAL. Este fichero viste pagos.php:
   - Se carga DESPUÉS de assets/css/pagos.css y lo sobrescribe.
   - NO cambia ningún name/id/hidden/endpoint/hook JS del flujo
     MONEI: la mecánica (upsell, factura, IVA, cupón, métodos de
     pago, regalo, modales, barra fija) sigue gobernada por el JS
     existente, que alterna estilos INLINE (display) y clases
     (.selected, .active). Los display INLINE iniciales del markup
     (couponField, serviceSelectionList…) son parte del contrato.

   UN SOLO DOM para ambos breakpoints:
   - ≤1024px (3c): el form pasa a flex-column; los wrappers
     .col-main-content / .col-sticky-sidebar / .ec-p-side /
     (.ec-p-datos en desktop) se anulan con display:contents y las
     5 piezas se ordenan con order → Tu asesoría · Tus datos ·
     Sobre tu piel · Método de pago · Total+legal+CTA.
   - ≥1025px (3d): grid 1.15fr/0.85fr; izquierda 3 tarjetas
     (01 Tus datos / 02 Ubicación y factura / 03 Sobre tu piel),
     derecha UNA tarjeta blanca sticky (Resumen + pago + total +
     CTA + confianza).

   Confort 45+ (F8): inputs 16px, targets ≥44px (--ec-tap-min),
   texto informativo ≥12px, colores AA de los tokens. Los tamaños
   10-11.5px del prototipo se elevan a esos suelos. Los wordmarks
   de marca (VISA/bizum/PayPal…) usan sus colores de marca
   (exención de logotipos WCAG 1.4.3); el texto informativo va en
   --ec-muted (AA).
   Tokens: assets/css/edicion-clinica.css (--ec-*).
   ============================================================= */

/* ---------- Página ---------- */
.payment-page.ec-checkout {
    background: var(--ec-bg) !important;
    padding: 12px 0 90px;
    font-family: var(--ec-font-body);
    color: var(--ec-ink);
}

.ec-checkout .container-fluid {
    max-width: 1100px;
    padding: 0 20px;
    margin-left: auto;
    margin-right: auto;
}

/* h1 del prototipo 3c: "Completa tu reserva" en serif */
.ec-checkout .ec-p-title {
    font-family: var(--ec-font-display) !important;
    font-weight: 400;
    font-size: 24px;
    letter-spacing: normal !important;
    margin: 12px 0 14px;
    color: var(--ec-ink);
}

/* ---------- Eyebrows (sistema EC: mono uppercase malva) ---------- */
.ec-checkout .section-title {
    display: block;
    font-family: var(--ec-font-mono) !important;
    font-size: 12px; /* F8: el 10/10.5px del prototipo sube al suelo 12px */
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ec-mauve);
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 12px;
}

.ec-checkout .section-title i {
    display: none;
}

.ec-checkout .ec-p-opt {
    color: var(--ec-muted);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

/* Numerales 01·/02·/03· solo en desktop (3d); el 3c no los numera */
.ec-checkout .ec-p-num {
    display: none;
}

/* Etiqueta del resumen: "Tu asesoría" (3c) / "Resumen" (3d) */
.ec-checkout .ec-p-lbl-d {
    display: none;
}

/* ---------- Formularios ---------- */
.ec-checkout .form-group {
    margin-bottom: 0;
}

.ec-checkout .form-row.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 3c: 2 columnas también en móvil */
    gap: 8px;
    margin-bottom: 8px;
}

.ec-checkout .form-row.two-col.align-end {
    grid-template-columns: 1fr auto; /* país + píldora factura (3c) */
    align-items: end;
    margin-bottom: 0;
}

.ec-checkout .form-group label {
    display: block;
    font-size: 13px; /* F8 */
    font-weight: 600;
    color: var(--ec-text-2);
    margin-bottom: 4px;
}

.ec-checkout .form-group input,
.ec-checkout .form-group select,
.ec-checkout .form-group textarea {
    width: 100%;
    background: var(--ec-card-bg);
    border: 1px solid var(--ec-border-16);
    border-radius: var(--ec-radius-input);
    color: var(--ec-ink);
    font-family: var(--ec-font-body);
    font-size: 16px; /* F8: mata el zoom automático de iOS */
    padding: 12px; /* F8: altura efectiva ~45px (tap-target) */
    box-shadow: none;
}

.ec-checkout .form-group input::placeholder,
.ec-checkout .form-group textarea::placeholder {
    color: var(--ec-placeholder);
}

.ec-checkout .form-group input:focus,
.ec-checkout .form-group select:focus,
.ec-checkout .form-group textarea:focus {
    border-color: var(--ec-rose);
    box-shadow: 0 0 0 3px rgba(184, 114, 142, 0.15);
    outline: none;
}

/* Validación visual existente (is-valid/is-invalid), re-tematizada */
.ec-checkout .form-group input.is-valid,
.ec-checkout .form-group input:not(:placeholder-shown):valid {
    border-color: rgba(139, 95, 131, 0.5);
    background-image: none;
}

.ec-checkout .form-group input.is-invalid {
    border-color: rgba(184, 60, 60, 0.6);
}

/* Nota estática de IVA (contrato: visible SIEMPRE; el cálculo es del JS) */
.ec-checkout .ec-p-vat-note {
    font-size: 13px; /* F8 */
    color: var(--ec-muted);
    line-height: 1.5;
    margin: 8px 0 0;
}

/* Campos de factura (JS los muestra/oculta) */
.ec-checkout #invoiceFields .form-group {
    margin-bottom: 8px;
}

.ec-checkout #invoiceFields {
    margin-top: 8px;
}

/* ---------- Píldora "¿Necesitas factura?" ---------- */
.ec-checkout .invoice-toggle-group .checkbox-container {
    background: none;
    border: none;
    padding: 0;
    display: inline-block;
}

.ec-checkout .invoice-toggle-group input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.ec-checkout .invoice-toggle-group .checkbox-label-content {
    display: inline-flex;
    align-items: center;
    min-height: var(--ec-tap-min); /* F8 */
    border: 1.5px solid rgba(139, 95, 131, 0.4);
    color: var(--ec-mauve);
    border-radius: var(--ec-radius-pill);
    padding: 8px 16px;
    cursor: pointer;
    transition: background var(--ec-transition), color var(--ec-transition),
        border-color var(--ec-transition);
}

.ec-checkout .invoice-toggle-group .checkbox-label-content .main-label {
    font-size: 13px; /* F8 */
    font-weight: 600;
    color: inherit;
    white-space: nowrap;
}

.ec-checkout .invoice-toggle-group input[type="checkbox"]:checked~.checkbox-label-content {
    background: var(--ec-mauve);
    border-color: var(--ec-mauve);
    color: #fff;
}

/* ---------- Upsell (+30€): dashed rosa dentro de "Tu asesoría" ---------- */
.ec-checkout .upsell-banner {
    background: #FDF8FA;
    border: 1px dashed rgba(184, 114, 142, 0.55);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: none;
    cursor: pointer;
    margin-top: 12px;
    gap: 0;
}

.ec-checkout .upsell-banner:hover {
    background: #FBF1F5;
    box-shadow: none;
    transform: none;
}

.ec-checkout .upsell-icon {
    display: none;
}

.ec-checkout .btn-upsell,
.ec-checkout .btn-upsell-medium,
.ec-checkout .btn-upsell-premium {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    font-family: var(--ec-font-body);
    font-size: 13px; /* F8: 12.5px del prototipo → suelo 13px */
    font-weight: 700;
    color: var(--ec-mauve);
    text-align: left;
    cursor: pointer;
}

.ec-checkout .btn-upsell-wrapper {
    margin-bottom: 3px !important;
}

.ec-checkout .upsell-text {
    font-size: 14px; /* F8: párrafo persuasivo */
    color: var(--ec-muted);
    line-height: 1.5;
    margin: 0;
}

/* ---------- Selección de servicio (Tu asesoría / Resumen) ---------- */
.ec-checkout .service-option {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    box-shadow: none;
}

.ec-checkout .service-info h3 {
    font-family: var(--ec-font-body) !important;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: normal !important;
    color: var(--ec-ink);
    margin: 0;
}

.ec-checkout .service-price {
    font-family: var(--ec-font-display);
    font-size: 22px;
    font-weight: 400;
    color: var(--ec-ink);
}

/* Sub del servicio (3d, solo Rutina 95€ — selector vivo por data-price) */
.ec-checkout .ec-p-svc-sub {
    display: none;
    font-size: 12px;
    color: var(--ec-muted);
    margin-top: 2px;
}

/* Lista desplegada al quitar la selección (mecánica existente) */
.ec-checkout #serviceSelectionList .service-option {
    border: 1px solid var(--ec-border-16);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 8px;
    cursor: pointer;
}

.ec-checkout #serviceSelectionList .service-option.selected {
    border-color: var(--ec-rose);
    background: #FDF8FA;
}

/* ---------- Cupón: enlace discreto centrado (3c/3d) ---------- */
.ec-checkout .coupon-section {
    margin: 12px 0 0 !important;
}

.ec-checkout #couponLink {
    font-size: 13px !important; /* F8 */
    color: var(--ec-muted) !important;
    text-decoration: underline;
    opacity: 1 !important;
    display: inline-block;
    padding: 12px 0; /* F8: zona táctil >=44px */
}

.ec-checkout #couponField input {
    background: var(--ec-card-bg);
    border: 1px dashed rgba(46, 36, 41, 0.35);
    border-radius: var(--ec-radius-input);
    color: var(--ec-ink);
    font-family: var(--ec-font-mono);
    font-size: 16px !important; /* F8: zoom iOS */
}

.ec-checkout #couponField button {
    background: var(--ec-dark) !important;
    border-radius: var(--ec-radius-pill) !important;
    font-family: var(--ec-font-body);
    font-weight: 600;
    min-height: var(--ec-tap-min); /* F8 */
}

/* ---------- Métodos de pago: 4 tiles con chip de marca (3c/3d NUEVO) ---------- */
.ec-checkout .payment-method-selector {
    margin-top: 0 !important;
}

.ec-checkout .payment-method-selector .section-title {
    margin-bottom: 10px !important;
}

.ec-checkout .payment-methods-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 0;
}

.ec-checkout .payment-method-card {
    background: var(--ec-card-bg);
    border: 1.5px solid var(--ec-border-16);
    border-radius: 12px;
    padding: 11px 13px;
    text-align: left;
    box-shadow: none;
    transition: all 150ms ease;
    min-height: var(--ec-tap-min);
}

.ec-checkout .payment-method-card:hover {
    border-color: rgba(46, 36, 41, 0.35);
    transform: none;
    box-shadow: none;
}

/* Tile seleccionado = bloque espresso (plantilla tile() del prototipo) */
.ec-checkout .payment-method-card.selected,
.ec-checkout .payment-method-card.selected.pm-bizum,
.ec-checkout .payment-method-card.selected.pm-paypal {
    background: var(--ec-dark);
    border-color: var(--ec-dark);
    color: var(--ec-dark-text);
    box-shadow: none;
}

/* Los iconos FontAwesome/checks del markup heredado no se dibujan */
.ec-checkout .pm-icon,
.ec-checkout .pm-check {
    display: none !important;
}

.ec-checkout .pm-label {
    font-size: 13px;
    font-weight: 700;
    color: inherit;
    margin: 0;
}

.ec-checkout .pm-sublabel {
    font-size: 12px; /* F8 */
    color: inherit;
    opacity: 0.75;
    margin-top: 2px;
}

.ec-checkout .pm-sublabel.pm-paypal-promo {
    background: none;
    color: inherit;
    padding: 0;
}

/* Chip de marca dentro del tile (3c nuevo): pastilla blanca con wordmarks */
.ec-checkout .ec-pm-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: #fff;
    border: 1px solid var(--ec-border-12);
    border-radius: 6px;
    height: 21px;
    padding: 0 8px;
    margin-bottom: 7px;
}

.ec-checkout .ec-pm-chip .ec-bm-dot {
    opacity: 0.3;
}

/* ---------- Wordmarks de marca (colores de marca: exención logotipos) ---------- */
.ec-checkout .ec-bm-visa {
    font-style: italic;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: -0.02em;
    color: #1A1F71;
    line-height: 1;
}

.ec-checkout .ec-bm-mc {
    width: 22px;
    height: 13px;
    display: block;
}

.ec-checkout .ec-bm-bizum {
    font-weight: 800;
    font-size: 11.5px;
    letter-spacing: -0.01em;
    color: #00C2C7;
    line-height: 1;
}

.ec-checkout .ec-bm-apple {
    font-weight: 600;
    font-size: 11px;
    color: #111;
    white-space: nowrap;
    line-height: 1;
}

.ec-checkout .ec-bm-gpay {
    font-size: 11px;
    white-space: nowrap;
    line-height: 1;
}

.ec-checkout .ec-bm-gpay .gp-a {
    font-weight: 700;
    color: #4285F4;
}

.ec-checkout .ec-bm-gpay .gp-b {
    font-weight: 600;
    color: #5F6368;
}

.ec-checkout .ec-bm-paypal {
    font-style: italic;
    font-weight: 800;
    font-size: 11px;
    line-height: 1;
}

.ec-checkout .ec-bm-paypal .pp-a {
    color: #003087;
}

.ec-checkout .ec-bm-paypal .pp-b {
    color: #009CDE;
}

/* Tamaños compactos de los wordmarks dentro del chip del tile */
.ec-checkout .ec-pm-chip .ec-bm-visa,
.ec-checkout .ec-pm-chip .ec-bm-apple,
.ec-checkout .ec-pm-chip .ec-bm-gpay,
.ec-checkout .ec-pm-chip .ec-bm-paypal {
    font-size: 9.5px;
}

.ec-checkout .ec-pm-chip .ec-bm-bizum {
    font-size: 10.5px;
}

.ec-checkout .ec-pm-chip .ec-bm-mc {
    width: 17px;
    height: 11px;
}

/* ---------- Tira de confianza (3c/3d NUEVO): badges + línea SSL ---------- */
.ec-checkout .ec-p-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.ec-checkout .ec-p-trust-m .ec-p-badges {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(46, 36, 41, 0.08);
}

.ec-checkout .ec-p-trust-d .ec-p-badges {
    margin-top: 12px;
}

.ec-checkout .ec-badge {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border: 1px solid rgba(46, 36, 41, 0.14);
    border-radius: 6px;
    padding: 3px 9px;
    height: 22px;
}

.ec-checkout .ec-p-ssl {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 12px; /* F8: el 10px del prototipo sube al suelo 12px */
    color: var(--ec-muted);
    text-align: center;
    line-height: 1.4;
}

.ec-checkout .ec-p-ssl svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}

/* La copia desktop se oculta en móvil (y viceversa, ver media) */
.ec-checkout .ec-p-trust-d {
    display: none;
}

/* ---------- Total (serif) + legal + CTA ---------- */
.ec-checkout .divider {
    display: none; /* 3c: el bloque final no lleva línea */
    border: none;
    border-top: 1px solid var(--ec-border);
    margin: 0 0 14px;
}

.ec-checkout .summary-row.total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 14px;
    font-weight: 600;
    color: var(--ec-ink);
    margin-bottom: 0;
}

.ec-checkout #summaryPrice {
    font-family: var(--ec-font-display);
    font-size: 26px;
    font-weight: 400;
    color: var(--ec-ink);
}

.ec-checkout #summaryPrice small,
.ec-checkout #summaryPrice span {
    font-family: var(--ec-font-body);
}

/* La nota "(Inc. impuestos)" que escribe el JS baja a su propia línea (3c/3d) */
.ec-checkout #summaryPrice > span {
    display: block;
    margin-top: 2px;
}

.ec-checkout .checkbox-container span {
    font-size: 13px; /* F8: texto legal */
    color: var(--ec-muted);
    line-height: 1.6;
}

.ec-checkout .ec-p-final .checkbox-container {
    margin-top: 12px;
}

.ec-checkout .ec-p-final .checkbox-container input[type="checkbox"] {
    accent-color: var(--ec-mauve);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.ec-checkout .btn-pay {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background: var(--ec-rose-cta); /* F8: 5.16:1 con blanco */
    border: none;
    border-radius: var(--ec-radius-pill);
    padding: 14px 24px;
    margin-top: 14px;
    font-family: var(--ec-font-body);
    font-size: 15px; /* F8 */
    font-weight: 600;
    color: #fff;
    box-shadow: none;
    min-height: var(--ec-tap-min);
    transition: background var(--ec-transition);
}

.ec-checkout .btn-pay:hover {
    background: var(--ec-rose-cta-hover); /* F8 */
    transform: none;
    box-shadow: none;
}

/* ---------- Regalo ---------- */
.ec-checkout .btn-gift-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: transparent;
    border: 1px solid rgba(46, 36, 41, 0.14);
    border-radius: 12px;
    padding: 12px 14px;
    margin-top: 10px;
    box-shadow: none;
    min-height: var(--ec-tap-min);
    cursor: pointer;
}

.ec-checkout .btn-gift-feature:hover {
    border-color: rgba(184, 114, 142, 0.5);
    background: var(--ec-card-bg);
    transform: none;
    box-shadow: none;
}

.ec-checkout .gift-icon-container {
    background: none;
    color: var(--ec-rose);
    width: auto;
    height: auto;
    font-size: 14px;
}

.ec-checkout .gift-text-container {
    flex: 1;
    text-align: left;
}

.ec-checkout .gift-title {
    display: block;
    font-size: 13px; /* F8 */
    font-weight: 600;
    color: var(--ec-ink);
}

.ec-checkout .gift-subtitle {
    display: block;
    font-size: 12px; /* F8 */
    color: var(--ec-muted);
}

.ec-checkout .gift-arrow {
    color: var(--ec-rose);
}

/* Resumen del regalo guardado (re-tematizado sobre sus estilos inline) */
.ec-checkout #giftSummary {
    background: var(--ec-bg-promo) !important;
    border-color: var(--ec-notice-border) !important;
    border-radius: 12px !important;
    color: var(--ec-ink) !important;
    font-size: 13px !important;
}

.ec-checkout #giftSummary button {
    color: var(--ec-mauve) !important;
    font-size: 12px !important;
}

/* ---------- Barra inferior fija (móvil, 3c) ---------- */
.ec-checkout~.mobile-sticky-checkout-bar,
.ec-checkout .mobile-sticky-checkout-bar {
    background: rgba(247, 243, 241, 0.94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--ec-border-12);
    box-shadow: none;
    padding: 11px 18px;
}

.ec-checkout .sticky-bar-content {
    align-items: center;
    gap: 12px;
}

.ec-checkout .sticky-amount {
    font-family: var(--ec-font-display);
    font-size: 19px;
    font-weight: 400;
    color: var(--ec-ink);
}

.ec-checkout .sticky-amount small,
.ec-checkout .sticky-amount span {
    font-family: var(--ec-font-body);
    color: var(--ec-muted);
    font-size: 12px !important; /* F8: gana al inline del sync JS */
    opacity: 1 !important;
}

.ec-checkout .btn-sticky-pay {
    background: var(--ec-rose-cta); /* F8 */
    border: none;
    border-radius: var(--ec-radius-pill);
    min-height: var(--ec-tap-min); /* F8 */
    padding: 13px 24px;
    font-size: 14px; /* F8 */
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

/* =============================================================
   MÓVIL / TABLET (≤1024px) — pantalla 3c
   Un DOM, orden visual del prototipo: 1 Tu asesoría · 2 Tus datos
   · 3 Sobre tu piel · 4 Método de pago · 5 Total+legal+CTA.
   ============================================================= */
@media (max-width: 1024px) {

    .ec-checkout .payment-grid-2-col {
        display: flex;
        flex-direction: column;
        gap: 12px; /* 3c: separación entre tarjetas */
    }

    /* Los wrappers de columna no pintan caja: sus hijos son los items */
    .ec-checkout .col-main-content,
    .ec-checkout .col-sticky-sidebar,
    .ec-checkout .ec-p-side {
        display: contents;
    }

    /* Orden del 3c */
    .ec-checkout .ec-p-o1 { order: 1; }
    .ec-checkout .ec-p-o2 { order: 2; }
    .ec-checkout .ec-p-o3 { order: 3; }
    .ec-checkout .ec-p-o4 { order: 4; }
    .ec-checkout .ec-p-o5 { order: 5; }

    /* Tarjetas del 3c (blancas, radio 16, borde suave) */
    .ec-checkout .ec-p-svc,
    .ec-checkout .ec-p-datos,
    .ec-checkout .ec-p-piel,
    .ec-checkout .ec-p-pago {
        background: var(--ec-card-bg) !important;
        border: 1px solid var(--ec-border-12);
        border-radius: var(--ec-radius-card);
        padding: 16px;
        /* [fix desencaje 01/02/03] el contenedor flex-column tiene align-items
           heredado que NO estira: forzamos ancho completo para que TODAS las
           tarjetas ocupen la columna (antes: svc 210 / piel 359 / pago 360 mientras
           datos ocupaba 565 => desencajado). box-sizing por el padding 16px. */
        width: 100%;
        box-sizing: border-box;
    }

    /* Bloque final sin tarjeta (3c: total+legal sobre el fondo) */
    .ec-checkout .ec-p-final {
        padding: 2px 4px 0;
        width: 100%;
        box-sizing: border-box;
    }

    /* Red de seguridad: cualquier item del flex-column a ancho completo */
    .ec-checkout .payment-grid-2-col {
        align-items: stretch;
    }

    /* 3c funde "Tus datos" y "Ubicación": sin eyebrow 02 en móvil */
    .ec-checkout .ec-p-s02 {
        margin-top: 8px;
    }

    .ec-checkout .ec-p-s02 > .section-title {
        display: none;
    }
}

/* =============================================================
   DESKTOP (≥1025px) — pantalla 3d
   Grid 1.15fr/0.85fr gap 24; izquierda tarjetas 01/02/03;
   derecha UNA tarjeta blanca sticky con todo el resumen.
   ============================================================= */
@media (min-width: 1025px) {

    .payment-page.ec-checkout {
        padding-top: 24px;
    }

    .ec-checkout .ec-p-title {
        font-size: 28px;
    }

    .ec-checkout .payment-grid-2-col {
        grid-template-columns: 1.15fr 0.85fr; /* 3d */
        gap: 24px;
        align-items: start;
    }

    .ec-checkout .col-main-content {
        gap: 14px; /* 3d: separación entre tarjetas de la izquierda */
    }

    /* El wrapper de datos se disuelve: 01 y 02 son tarjetas propias */
    .ec-checkout .ec-p-datos {
        display: contents;
    }

    .ec-checkout .ec-p-s01,
    .ec-checkout .ec-p-s02,
    .ec-checkout .ec-p-piel {
        background: var(--ec-card-bg) !important;
        border: 1px solid var(--ec-border-12);
        border-radius: var(--ec-radius-card-lg);
        /* !important: 01/02 son <section> y el neutralizador global de <section>
           (edicion-clinica.css, padding !important para matar el 6rem de textures.css)
           les forzaba padding:0 -> contenido pegado al borde ("desencajado"), mientras
           03 (<div>) sí recibía el 22px. Con !important el checkout gana. */
        padding: 22px !important;
    }

    /* Tarjeta única sticky de la derecha (3d) */
    .ec-checkout .col-sticky-sidebar {
        position: sticky;
        top: calc(var(--header-height, 80px) + 16px);
    }

    .ec-checkout .ec-p-side {
        background: var(--ec-card-bg) !important;
        border: 1px solid rgba(46, 36, 41, 0.14);
        border-radius: var(--ec-radius-card-lg);
        padding: 22px;
        box-shadow: 0 18px 44px -28px rgba(46, 36, 41, 0.4);
    }

    /* Numerales y etiquetas de desktop */
    .ec-checkout .ec-p-num {
        display: inline;
    }

    .ec-checkout .ec-p-lbl-m {
        display: none;
    }

    .ec-checkout .ec-p-lbl-d {
        display: inline;
    }

    .ec-checkout .section-title {
        margin-bottom: 14px;
    }

    .ec-checkout .form-row.two-col {
        gap: 10px; /* 3d */
        margin-bottom: 10px;
    }

    /* --- 02 · Ubicación y factura: país + nota IVA en 2 columnas,
           píldora de factura en la cabecera de la tarjeta (3d) --- */
    .ec-checkout .ec-p-s02 {
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .ec-checkout .ec-p-s02 > .section-title {
        grid-column: 1 / -1;
        margin-bottom: 4px;
    }

    .ec-checkout .ec-p-s02 > .form-row.two-col.align-end {
        display: block;
        grid-column: 1;
        margin: 0;
    }

    .ec-checkout .ec-p-s02 .invoice-toggle-group {
        position: absolute;
        top: 14px;
        right: 22px;
        margin: 0;
    }

    .ec-checkout .ec-p-s02 > .ec-p-vat-note {
        grid-column: 2;
        align-self: center;
        margin: 0;
    }

    .ec-checkout .ec-p-s02 > #invoiceFields {
        grid-column: 1 / -1;
        margin-top: 0;
    }

    /* --- 03 · Sobre tu piel: notas full + fila fecha|regalo (3d) --- */
    .ec-checkout .ec-p-piel {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .ec-checkout .ec-p-piel > .section-title {
        grid-column: 1 / -1;
        margin-bottom: 4px;
    }

    .ec-checkout .ec-p-piel > .form-group {
        grid-column: 1 / -1;
    }

    .ec-checkout .ec-p-piel > .form-group + .form-group {
        grid-column: 1;
    }

    .ec-checkout .ec-p-piel > .btn-gift-feature {
        grid-column: 2;
        align-self: end;
        margin-top: 0;
    }

    .ec-checkout .ec-p-piel > #giftSummary {
        grid-column: 1 / -1;
    }

    .ec-checkout .gift-subtitle {
        display: none; /* 3d: solo "🎁 ¿Es para regalar?" + flecha */
    }

    /* --- Tarjeta derecha: secciones del 3d --- */
    .ec-checkout .ec-p-svc {
        padding-bottom: 12px;
        border-bottom: 1px solid var(--ec-border);
    }

    .ec-checkout .service-price {
        font-size: 24px; /* 3d */
    }

    /* Sub del servicio SOLO cuando la selección viva es la Rutina 95€ */
    .ec-checkout #currentServiceView .service-option[data-price="95"] + .ec-p-svc-sub {
        display: block;
    }

    .ec-checkout .ec-p-pago {
        margin-top: 14px;
    }

    .ec-checkout .payment-method-selector .section-title {
        margin-bottom: 10px !important;
    }

    /* Chips de marca: tamaños compactos del 3d */
    .ec-checkout .ec-pm-chip {
        height: 20px;
        padding: 0 7px;
        margin-bottom: 6px;
    }

    .ec-checkout .ec-pm-chip .ec-bm-visa,
    .ec-checkout .ec-pm-chip .ec-bm-apple,
    .ec-checkout .ec-pm-chip .ec-bm-gpay,
    .ec-checkout .ec-pm-chip .ec-bm-paypal {
        font-size: 9px;
    }

    .ec-checkout .ec-pm-chip .ec-bm-bizum {
        font-size: 10px;
    }

    .ec-checkout .ec-pm-chip .ec-bm-mc {
        width: 16px;
        height: 10px;
    }

    /* Total con separador (3d) */
    .ec-checkout .divider {
        display: block;
        margin: 14px 0;
    }

    .ec-checkout #summaryPrice {
        font-size: 28px; /* 3d */
    }

    /* Confianza: en desktop va bajo el CTA (3d), no dentro del pago */
    .ec-checkout .ec-p-trust-m {
        display: none;
    }

    .ec-checkout .ec-p-trust-d {
        display: block;
    }

    .ec-checkout .ec-badge {
        padding: 3px 8px;
        height: 21px;
    }

    .ec-checkout .ec-p-badges .ec-bm-mc {
        width: 20px;
        height: 12px;
    }

    .ec-checkout .ec-p-ssl {
        margin-top: 9px;
    }
}