/* ============================================================ TIZIANA · Embudo de compra — checkout + pricing de membresía. H-98 (C-01 + C-02) · decisión F2: "mínimo digno". ------------------------------------------------------------ ALCANCE DELIBERADAMENTE CORTO. Solo CSS sobre el markup que Tutor ya emite: paleta del kit, botón consistente entre las dos páginas, y aire/jerarquía en móvil. CERO overrides de plantilla, CERO JS, CERO reordenación del DOM. 🔴 REGLA DE ORO DE ESTE FICHERO — no romperla al editar: TODA regla va anidada bajo uno de los dos namespaces de raíz: .tutor-checkout-page (checkout) .tutor-membership-pricing-page (pricing de membresía) El resto del markup de Tutor son CLASES DE UTILIDAD COMPARTIDAS (.tutor-btn, .tutor-mt-20, .tutor-col-md-6…) que se usan también en lección, escritorio y recorrido. Una regla sobre `.tutor-btn` a secas repinta botones en media web. Medido 2026-07-22. FUERA DE ALCANCE (sub-tanda aparte, pendiente de propuesta visual): la TARJETA del pricing (.tutor-membership-pricing-item-inner) hoy es fondo transparente / border-width 0 / radius 0. Darle superficie, borde y radio es diseño nuevo, no recolorear → no se toca aquí. Colores y fuentes: TODOS de `estable/kit-de-marca.md` vía tokens. Ni un literal de color nuevo en este fichero. ============================================================ */ /* ============================================================ §0 · CAPA COMPARTIDA — la que hace el trabajo de verdad ============================================================ */ /* Tutor pinta su azul de marca (#3E64DE) desde una custom property que emite inline el handle 'tutor-frontend-inline-css', alimentada por los ajustes de Tutor. NO se toca ahí: (a) sería el botón Guardar de los ajustes de Tutor, que es línea roja del proyecto, y (b) eso repintaría el sitio entero, no solo el embudo. Redefinirla DENTRO del namespace la corrige solo aquí, y de paso arrastra todo lo que cuelga de ella: fondo del botón, radio del método de pago, tinte de la caja seleccionada y anillos de foco. Un selector de clase gana al :root inline para los descendientes. */ .tutor-checkout-page, .tutor-membership-pricing-page { --tutor-color-primary: var(--btn-primary); /* #372549 berenjena */ --tutor-color-primary-rgb: 55, 37, 73; /* = #372549 en rgb */ --tutor-color-primary-hover: var(--btn-primary-hover); /* #2b1d3a */ --tutor-color-primary-hover-rgb: 43, 29, 58; /* = #2b1d3a en rgb */ /* Tutor pinta TODOS sus filetes con esta variable (cantos de tarjeta, separadores entre campos, bordes de la caja de pago). Redefinirla aquí recolorea el embudo entero de una vez, en vez de perseguir cada borde con una regla propia. Su valor de fábrica es un gris frío (#E3E5EB) que canta sobre la crema. */ --tutor-border-color: var(--border-subtle); /* #E2D9C9 */ } /* --- El botón de acción, idéntico en las dos páginas --------- Kit §3 regla 1: el primario es BERENJENA, no burdeos (el burdeos es --btn-critical, para UNA acción excepcional por pantalla). Kit §3 regla 2: el color de texto se define EN el botón, nunca se hereda. El botón del pricing era el caso de manual: heredaba el burdeos del color de enlace y quedaba texto burdeos sobre borde azul de Tutor. Medido 2026-07-22. Se ataca `.tutor-btn-primary` y `.tutor-btn-outline-primary` SOLO dentro del namespace; nunca `.tutor-btn` a secas. */ .tutor-checkout-page .tutor-btn-primary, .tutor-checkout-page .tutor-btn-outline-primary, .tutor-membership-pricing-page .tutor-btn-primary, .tutor-membership-pricing-page .tutor-btn-outline-primary { background-color: var(--btn-primary); border: var(--border-hair) solid var(--btn-primary); color: var(--parch-50); /* crema casi blanco, definido AQUÍ */ font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--weight-medium); line-height: var(--leading-snug); border-radius: var(--radius-md); padding: var(--space-3) var(--space-6); min-height: 48px; /* diana táctil holgada (audiencia 45–54, móvil) */ transition: background-color .18s ease-out, border-color .18s ease-out; } .tutor-checkout-page .tutor-btn-primary:hover, .tutor-checkout-page .tutor-btn-outline-primary:hover, .tutor-membership-pricing-page .tutor-btn-primary:hover, .tutor-membership-pricing-page .tutor-btn-outline-primary:hover { background-color: var(--btn-primary-hover); border-color: var(--btn-primary-hover); color: var(--parch-50); } /* La variante OUTLINE va en esta lista a propósito: en pricing.php, Tutor solo da `.tutor-btn-primary` al plan `is_featured`; TODOS los demás salen `.tutor-btn-outline-primary`. Con 3 planes, lo normal es que 2 de 3 usen la outline — dejarla fuera de :active devolvía el destello de pulsación al azul de fábrica en la mayoría de los botones. (Auditoría adversarial 2026-07-22, verificado en pricing.php:120.) */ .tutor-checkout-page .tutor-btn-primary:active, .tutor-checkout-page .tutor-btn-outline-primary:active, .tutor-membership-pricing-page .tutor-btn-primary:active, .tutor-membership-pricing-page .tutor-btn-outline-primary:active { background-color: var(--btn-primary-active); border-color: var(--btn-primary-active); } /* Foco visible: accesibilidad, y encima con la audiencia de este sitio. */ .tutor-checkout-page .tutor-btn-primary:focus-visible, .tutor-checkout-page .tutor-btn-outline-primary:focus-visible, .tutor-membership-pricing-page .tutor-btn-primary:focus-visible, .tutor-membership-pricing-page .tutor-btn-outline-primary:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* Deshabilitado: Tutor lo usa mientras no hay método de pago elegido. Que se note que NO es pulsable, sin desaparecer. */ .tutor-checkout-page .tutor-btn-primary:disabled, .tutor-checkout-page .tutor-btn-primary[disabled], .tutor-checkout-page .tutor-btn-outline-primary:disabled, .tutor-checkout-page .tutor-btn-outline-primary[disabled], .tutor-membership-pricing-page .tutor-btn-primary:disabled, .tutor-membership-pricing-page .tutor-btn-primary[disabled], .tutor-membership-pricing-page .tutor-btn-outline-primary:disabled, .tutor-membership-pricing-page .tutor-btn-outline-primary[disabled] { background-color: var(--btn-primary); border-color: var(--btn-primary); opacity: .45; cursor: not-allowed; } /* ===================================================================== EXCEPCIÓN DECLARADA A LA REGLA DE ORO — el modal de login. Esta es la ÚNICA regla del fichero que no cuelga de los dos namespaces, y va documentada aquí en vez de quedar como sangrado silencioso. POR QUÉ NO PUEDE COLGAR: Tutor cierra el wrapper de la página y CARGA EL MODAL DESPUÉS, como hermano en el DOM — no como descendiente: checkout.php → `` … luego `if ( ! is_user_logged_in() ) { tutor_load_template_from_custom_path( … login.php ) }` pricing.php → idéntico patrón Por eso ni la redefinición de --tutor-color-primary de §0 ni las reglas de botón de arriba lo alcanzan: el modal quedaba con el "Sign In" AZUL de fábrica, justo en el embudo recién vestido. Lo ve toda visitante SIN sesión — y en pricing.php:120 CUALQUIER botón de plan recibe `tutor-open-login-modal` si no hay sesión, así que es el primer botón que pulsa una desconocida. (Auditoría adversarial 2026-07-22, verificado en las plantillas.) POR QUÉ ES SEGURO pese a no llevar namespace: esta hoja SOLO se encola en las dos páginas del embudo (guarda por opción en functions.php), así que una regla sobre `.tutor-login-modal` no puede aplicar en ninguna otra pantalla del sitio aunque Tutor pinte ese modal en más sitios. ===================================================================== */ .tutor-login-modal .tutor-btn-primary { background-color: var(--btn-primary); border: var(--border-hair) solid var(--btn-primary); color: var(--parch-50); border-radius: var(--radius-md); min-height: 48px; } .tutor-login-modal .tutor-btn-primary:hover { background-color: var(--btn-primary-hover); border-color: var(--btn-primary-hover); color: var(--parch-50); } /* ============================================================ §1 · CHECKOUT · .tutor-checkout-page Estructura medida en render (2026-07-22): .tutor-checkout-page > .tutor-container > .tutor-checkout-container > .tutor-row.tutor-g-5 > .tutor-col-md-6 [tutor-checkout-details] (resumen) > .tutor-col-md-6 > .tutor-checkout-billing > …-inner > .tutor-billing-fields > .tutor-payment-method-wrapper > .tutor-checkout-payment-options > .tutor-checkout-payment-item > #tutor-checkout-pay-now-button ============================================================ */ /* Aire alrededor del embudo. En móvil el checkout venía pegado a los cantos; mobile-first, se ensancha en pantallas grandes. */ .tutor-checkout-page { background-color: var(--surface-page); padding-block: var(--space-5); color: var(--text-body); font-family: var(--font-sans); } /* El resumen del pedido SÍ es una tarjeta: flota sobre la crema. (Aquí sí se toca superficie porque ya venía con fondo propio; lo que queda fuera de alcance es la tarjeta del PRICING, que hoy no existe.) */ .tutor-checkout-page .tutor-checkout-summary { background-color: var(--surface-card); border: var(--border-hair) solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-5); } /* Títulos del embudo en berenjena y serif — kit §3 regla 1. */ .tutor-checkout-page h1, .tutor-checkout-page h2, .tutor-checkout-page h3 { font-family: var(--font-serif); color: var(--text-strong); line-height: var(--leading-snug); } /* El total: es el dato que la clienta busca antes de pagar. Que pese. */ .tutor-checkout-page .tutor-checkout-summary .tutor-fs-5 { font-family: var(--font-serif); color: var(--text-strong); } /* --- Campos de facturación ----------------------------------- 🔴 OJO AL EDITAR: Tutor monta estos campos como UN BLOQUE FUSIONADO, no como cajas sueltas. Su CSS hace, a propósito: .tutor-billing-fields .tutor-form-control { border-radius: 0 } .tutor-col-12:not(:last-of-type) .tutor-form-control { border-bottom: none !important } .tutor-col-12:first-of-type .tutor-form-control { border-top-left-radius: 6px } es decir, los campos van pegados formando una sola caja con las esquinas redondeadas solo en los extremos. El primer intento aquí usaba `border: 1px solid …`, que RESUCITABA los lados que Tutor quita — y como su `border-bottom:none` lleva !important, el resultado era un input con CUATRO colores de borde distintos (medido 2026-07-22: #E3E5EB arriba/derecha, #534763 abajo/izquierda). Lección: aquí NO se re-declara el borde, solo se RECOLOREA — y el color ya llega solo por --tutor-border-color (§0). El selector real es `.tutor-form-control`, no `input` a secas. */ .tutor-checkout-page .tutor-billing-fields .tutor-form-control { background-color: var(--surface-card); color: var(--text-body); font-family: var(--font-sans); font-size: var(--text-md); /* 16px: por debajo, iOS hace zoom al enfocar */ min-height: 48px; /* Tutor fija height:40px; 48 es diana táctil */ } .tutor-checkout-page .tutor-billing-fields .tutor-form-control:focus-visible { outline: none; box-shadow: var(--focus-ring); position: relative; /* que el anillo no lo tape el campo vecino */ z-index: 1; } /* --- Botones que NO son el de pago --------------------------- 🔴 CAZADO EN MÓVIL FÍSICO, EN MODO INVITADA (Silvana, 2026-07-23). No lo vi en ninguna medición de escritorio ni en la emulación. (a) EL ENLACE DEL CUPÓN ERA INVISIBLE. "¿Tienes un cupón? → Haz clic aquí" (`.tutor-btn.tutor-btn-link`) salía en CREMA #F2EFE9 SOBRE CREMA #FFFDF9 = **1.13:1**. No es "poco contraste": es texto que no se ve. Y es la palanca de descuento de la preventa. Origen: NO es de este fichero (0 referencias a .tutor-btn-link) ni de Tutor ni del Personalizador — es el color de botón genérico de Neve, que este botón-enlace hereda como si fuera un botón sólido. Es la regla 2 del kit al revés: "el color de texto de un botón se define EN el botón, nunca se hereda". Aquí se define. Va en burdeos --text-link porque ES un enlace, no una acción primaria (kit §3 regla 1: el burdeos manda pero aparece poco). (b) EL BOTÓN "ACCEDER" DE INVITADA (`.tutor-btn-secondary`, checkout.php :82) salía casi ilegible por lo mismo. Solo lo ve quien NO tiene sesión, que es justo la compradora nueva. Se le dan los tokens de secundario del kit, que existen para esto. */ .tutor-checkout-page .tutor-btn-link, .tutor-membership-pricing-page .tutor-btn-link { color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; min-height: 44px; } .tutor-checkout-page .tutor-btn-link:hover, .tutor-membership-pricing-page .tutor-btn-link:hover { color: var(--accent-hover); } .tutor-checkout-page .tutor-btn-secondary, .tutor-membership-pricing-page .tutor-btn-secondary { background-color: transparent; border: var(--border-hair) solid var(--btn-secondary-border); color: var(--btn-secondary-text); border-radius: var(--radius-md); min-height: 44px; } .tutor-checkout-page .tutor-btn-secondary:hover, .tutor-membership-pricing-page .tutor-btn-secondary:hover { background-color: var(--btn-secondary-hover); color: var(--btn-secondary-text); } /* --- Método de pago ------------------------------------------ El estado seleccionado NO sale de --tutor-color-primary: Tutor lo pinta con hex clavados en su hoja — .tutor-checkout-payment-item.active { background-color:#e9edfb; box-shadow:0 0 0 1px #7391f0 } — así que la redefinición de la variable en §0 no lo alcanza y hace falta esta regla explícita. Medido 2026-07-22. */ .tutor-checkout-page .tutor-checkout-payment-item { padding: var(--space-3); min-height: 48px; } .tutor-checkout-page .tutor-checkout-payment-options .tutor-checkout-payment-item.active { /* --plum-50, no --accent-soft: este último es --wine-50 (tinte burdeos) y el botón de al lado es berenjena. Kit §3 regla 4: un componente no mezcla acentos. La rampa plum es la familia del propio botón. */ background-color: var(--plum-50); box-shadow: 0 0 0 1px var(--btn-primary); } /* Texto "atenuado" de Tutor dentro del embudo. Su `.tutor-color-hints` es #767C8E y sobre la superficie de la tarjeta da 3.99:1 — por debajo de AA (4.5:1). Aparece en el "/Mes" del resumen del pedido, es decir en la periodicidad del cobro: justo el dato que una compradora necesita leer sin esfuerzo antes de pagar. Medido 2026-07-23. Se ataca la utilidad SOLO dentro del namespace (fuera de él sigue siendo la de Tutor). */ .tutor-checkout-page .tutor-color-hints { color: var(--text-body); } /* Aire entre bloques en móvil, que es donde se apelotonaban. */ .tutor-checkout-page .tutor-payment-method-wrapper { margin-top: var(--space-5); } /* --- Solape del resumen en pantallas muy estrechas ------------ Tutor monta la línea del producto como .tutor-checkout-course-content { display:flex; gap:24px; justify-content:space-between; flex-wrap:nowrap } Con `nowrap` y 24px de hueco fijo, el nombre del plan y el precio se PISAN cuando el viewport se estrecha: medido 2026-07-22 con emulación de Pixel 9, a 295px de ancho se solapan 4px ("Membresía Acceso continuado (mensual)" contra "11.90€"). 295px queda por debajo del móvil real más estrecho en uso (320px), así que hoy no muerde a nadie — pero el margen es de 25px y el nombre del plan lo escribe Silvana: un plan con nombre más largo baja ese umbral y entra en anchos reales. `wrap` no cambia nada mientras quepan (solo actúa cuando no caben), así que es red sin coste. */ .tutor-checkout-page .tutor-checkout-course-content { flex-wrap: wrap; gap: var(--space-2); } /* --- Móvil (mobile-first: esto es el DEFAULT, arriba) ------- A partir de tablet, recuperamos respiro lateral. Tutor ya apila sus .tutor-col-md-6 por debajo de su breakpoint md; no se toca la rejilla (sería reordenar el DOM visualmente y está fuera de F2). */ @media (min-width: 768px) { .tutor-checkout-page { padding-block: var(--space-7); } .tutor-checkout-page .tutor-checkout-summary { padding: var(--space-6); } } /* ============================================================ §2 · PRICING DE MEMBRESÍA · .tutor-membership-pricing-page ALCANCE RECORTADO A PROPÓSITO: botón (heredado de §0), título y precio. La TARJETA queda fuera (ver cabecera del fichero). Estructura medida en render (2026-07-22): .tutor-membership-pricing-page > .tutor-container > .tutor-row.tutor-g-3 > .tutor-col-md-4 > .tutor-membership-pricing-item > …-inner > .tutor-membership-pricing-title > .tutor-pricing-price > .tutor-pricing-price-amount > .tutor-pricing-price-duration > .tutor-short-description > .tutor-pricing-features > .tutor-action > .tutor-btn ============================================================ */ .tutor-membership-pricing-page { background-color: var(--surface-page); padding-block: var(--space-5); font-family: var(--font-sans); color: var(--text-body); } /* El título del plan venía en #41454f — el gris de fábrica de Tutor (--tutor-color-secondary), que no existe en el kit. A berenjena. */ .tutor-membership-pricing-page .tutor-membership-pricing-title { font-family: var(--font-serif); color: var(--text-strong); font-size: var(--text-xl); line-height: var(--leading-snug); margin-bottom: var(--space-2); } /* 🔴 MISMA TRAMPA DE ESPECIFICIDAD QUE LA DURACIÓN — no simplificar. Tutor-Pro pinta el precio con .tutor-membership-pricing-item .tutor-pricing-price .tutor-pricing-price-amount { color: var(--tutor-body-color); font-size:40px; font-weight:700 } = 0,3,0. El primer intento aquí era 0,2,0 y NO ganaba: medido en render, el precio —el número más grande de la página— seguía saliendo en el casi-negro de Tutor (#212327) en vez de berenjena. Se respeta su tamaño (40px) y su peso: solo se cambia color y familia. ⚠️ CABO CONOCIDO (decisión pendiente, NO hacer sin OK): se podría redefinir `--tutor-body-color` en el namespace, como se hace con --tutor-color-primary y --tutor-border-color en §0, y así TODO el texto de Tutor en el embudo pasaría al gris de marca de una vez. No se hizo porque esa variable la usa Tutor en muchos sitios y el alcance del cambio no está medido. */ .tutor-membership-pricing-page .tutor-membership-pricing-item .tutor-pricing-price .tutor-pricing-price-amount { font-family: var(--font-serif); color: var(--text-strong); line-height: var(--leading-tight); } /* 🔴 NO devolver esto a --text-muted. Ese token es --ink-500 (#8f8898) y, sobre el fondo real de la página (--surface-page #F2EFE9), da 2.98:1 — falla AA para texto normal (4.5:1) e incluso el umbral de 3:1 de texto grande. La tarjeta del plan está sin relleno a propósito (ver cabecera), así que este texto cae directamente sobre la crema, no sobre una superficie más clara. --text-body (#534763) da ~7:1. (Auditoría adversarial 2026-07-22; ratio recalculado a mano.) */ /* 🔴 OJO A LA ESPECIFICIDAD — no simplificar este selector. Tutor-Pro pinta esto con .tutor-membership-pricing-item .tutor-pricing-price .tutor-pricing-price-duration { color:#6b7280; font-size:12px } (subscription/assets/css/frontend.css) = 0,3,0. Un selector de 0,2,0 NO gana: el primer intento aquí era `.tutor-membership-pricing-page .tutor-pricing-price-duration` y quedó sin efecto — medido en render, seguía saliendo #6b7280 a 4.21:1. Se sube a 0,4,0 en vez de usar !important. Además de color, se recupera el TAMAÑO: sus 12px son pequeños para la audiencia real de este sitio (45–54, móvil). */ .tutor-membership-pricing-page .tutor-membership-pricing-item .tutor-pricing-price .tutor-pricing-price-duration { color: var(--text-body); font-size: var(--text-sm); line-height: var(--leading-normal); } .tutor-membership-pricing-page .tutor-short-description, .tutor-membership-pricing-page .tutor-pricing-features { color: var(--text-body); font-size: var(--text-md); line-height: var(--leading-normal); } /* Aire entre el contenido del plan y su llamada a la acción. */ .tutor-membership-pricing-page .tutor-action { margin-top: var(--space-5); } @media (min-width: 768px) { .tutor-membership-pricing-page { padding-block: var(--space-7); } }