:root { --nrc-pink: #ecb2d2; --nrc-pink-soft: #fdf5f9; --nrc-pink-deep: #b56f98; --nrc-ink: #1e1e1c; --nrc-muted: #6f6b72; --nrc-line: rgba(30, 30, 28, 0.16); --nrc-white: #fff; color-scheme: light; } /* * Este checkout es compartido por toda la web (ver * templates/checkout.php), y --nrc-pink* es el rosa de Ruta4A: correcto * para la formación y los talleres, pero no para Nosotras y Nosotros, que * en sus propias páginas usan el lila de marca (--ns-lila-*, ver * assets/css/rutas.css del tema) y reservan el rosa para la formación. * * nrc_body_classes() añade 'nrc-tema-ruta' al cuando el pedido es * de una sola ruta. Como el resto de la hoja está escrito sobre * var(--nrc-pink*) y nunca sobre el valor literal, basta con redefinir * estas tres variables aquí arriba: fondo, cabecera, avisos y botón de * pago heredan el lila sin tocar una regla de color más. * * Los tonos elegidos igualan el contraste de sus equivalentes en rosa * (ink sobre --nrc-pink: 9.4:1 / lila-300: 7.4:1 — de sobra para AA; * --nrc-pink-deep decorativo sobre el fondo suave: 3.4:1 / lila-400: 3.6:1), * así que se comportan igual, solo que en el otro acento de marca. */ .nrc-tema-ruta { --nrc-pink: #bda3d4; /* --ns-lila-300 */ --nrc-pink-soft: #f6f2fa; /* --ns-lila-50 */ --nrc-pink-deep: #9373b1; /* --ns-lila-400, el morado de marca */ } .nrc-plans { margin-top: clamp(3rem, 7vw, 5.5rem); padding-top: clamp(2.5rem, 6vw, 4.5rem); border-top: 1px solid var(--nrc-line); } .nrc-plans__heading { max-width: 52rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); } .nrc-plans__eyebrow { margin: 0 0 0.75rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .nrc-plans__heading h3 { margin: 0; font-family: "TT Ramillas", Georgia, serif; font-size: clamp(2.35rem, 5vw, 4.8rem); font-weight: 900; line-height: 0.96; letter-spacing: -0.045em; } .nrc-plans__heading > p:last-child { max-width: 44rem; margin: 1rem 0 0; font-size: clamp(1rem, 1.8vw, 1.2rem); line-height: 1.55; } .nrc-plans__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--nrc-ink); border-radius: 1.75rem; overflow: hidden; } .nrc-plan { display: flex; min-width: 0; min-height: 29rem; flex-direction: column; padding: clamp(1.5rem, 3vw, 2.3rem); background: var(--nrc-white); } .nrc-plan + .nrc-plan { border-left: 1px solid var(--nrc-ink); } .nrc-plan--featured { background: var(--nrc-ink); color: var(--nrc-white); } .nrc-plan__topline { display: flex; min-height: 1.7rem; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; } .nrc-plan__topline strong { padding: 0.35rem 0.55rem; border-radius: 999px; background: var(--nrc-pink); color: var(--nrc-ink); font-size: 0.65rem; } .nrc-plan h4 { margin: 2rem 0 0; color: inherit; font-size: clamp(1.25rem, 2.5vw, 1.65rem); font-weight: 500; } .nrc-plan__price { margin: 0.8rem 0 0; font-family: "TT Ramillas", Georgia, serif; font-size: clamp(2.55rem, 4.3vw, 4.35rem); font-weight: 900; line-height: 0.98; letter-spacing: -0.05em; white-space: nowrap; } .nrc-plan__price small { display: inline-flex; align-items: baseline; gap: 0.05em; margin-left: 0.14em; font-family: "TT Ramillas", Georgia, serif; font-weight: 900; line-height: 1; vertical-align: 0; } .nrc-plan__plus { font-size: 0.5em; letter-spacing: -0.02em; } .nrc-plan__iva { font-size: 0.3em; letter-spacing: -0.01em; } .nrc-plan__description { margin: 1rem 0 0; font-size: 0.98rem; line-height: 1.5; } .nrc-plan__schedule { display: grid; gap: 0.55rem; margin: 1.4rem 0 0; padding: 0; list-style: none; } .nrc-plan__schedule li { display: flex; align-items: center; gap: 0.65rem; font-size: 0.84rem; } .nrc-plan__schedule span { display: grid; width: 1.55rem; height: 1.55rem; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 0.68rem; } .nrc-plan form, .nrc-plan > .nrc-plan__button { margin-top: auto; padding-top: 2rem; } .nrc-plan form { display: block; } .nrc-plan__button { width: 100%; min-height: 3.5rem; padding: 0.9rem 1.15rem; border: 1px solid var(--nrc-ink); border-radius: 999px; background: var(--nrc-pink); color: var(--nrc-ink); font: inherit; font-size: 0.93rem; font-weight: 700; cursor: pointer; transition: background-color 160ms ease, color 160ms ease, transform 160ms ease; } .nrc-plan__button:hover:not(:disabled), .nrc-plan__button:focus-visible:not(:disabled) { background: var(--nrc-white); transform: translateY(-2px); } .nrc-plan:not(.nrc-plan--featured) .nrc-plan__button:hover:not(:disabled), .nrc-plan:not(.nrc-plan--featured) .nrc-plan__button:focus-visible:not(:disabled) { background: var(--nrc-ink); color: var(--nrc-white); } .nrc-plan__button:disabled { border-color: var(--nrc-line); background: #ece8eb; color: #716c71; cursor: not-allowed; } .nrc-security { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.9rem; margin-top: 1.35rem; padding: 1rem 1.2rem; border: 1px solid var(--nrc-line); border-radius: 1rem; } .nrc-security__lock { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; background: var(--nrc-ink); color: var(--nrc-white); } .nrc-security p { margin: 0; font-size: 0.82rem; } .nrc-security__brands { display: flex; align-items: center; gap: 0.55rem; } .nrc-security__brands span { font-size: 0.66rem; font-weight: 800; letter-spacing: -0.02em; } .nrc-checkout-active { background: var(--nrc-pink); color: var(--nrc-ink); } .nrc-checkout-active .ns-cabecera { background: var(--nrc-pink); } .nrc-checkout-page { min-height: 100vh; background: var(--nrc-pink); color: var(--nrc-ink); } .nrc-checkout-hero { position: relative; overflow: hidden; padding: clamp(3rem, 7vw, 6.5rem) 0 clamp(2.5rem, 5vw, 4rem); } .nrc-checkout-hero__inner { position: relative; z-index: 1; } .nrc-checkout-hero__back { display: inline-flex; margin-bottom: clamp(2rem, 5vw, 4rem); color: inherit; font-size: 0.82rem; font-weight: 700; text-decoration: none; } .nrc-checkout-hero__edition { margin: 0; font-family: "TT Ramillas", Georgia, serif; font-size: clamp(2rem, 5vw, 4.2rem); font-weight: 900; line-height: 1; letter-spacing: -0.05em; } .nrc-checkout-hero__edition span { color: var(--nrc-white); } .nrc-checkout-hero h1 { max-width: 58rem; margin: 0.75rem 0 0; font-size: clamp(3.1rem, 8vw, 7.8rem); font-weight: 700; line-height: 0.92; letter-spacing: -0.055em; } .nrc-checkout-hero__inner > p:last-child { max-width: 41rem; margin: 1.25rem 0 0; font-size: clamp(1rem, 2vw, 1.2rem); line-height: 1.5; } .nrc-checkout-main { padding: 0 0 clamp(5rem, 10vw, 9rem); } .nrc-checkout-main__inner { max-width: 92rem; } .nrc-checkout-card { padding: clamp(1.3rem, 4vw, 4.5rem); border-radius: clamp(1.5rem, 4vw, 3.5rem); background: var(--nrc-white); box-shadow: 0 1.5rem 5rem rgba(71, 36, 57, 0.12); } .nrc-checkout-card .woocommerce { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .nrc-checkout-card .woocommerce-notices-wrapper > * { margin: 0 0 1.5rem; } .nrc-checkout-card .woocommerce-info, .nrc-checkout-card .woocommerce-message, .nrc-checkout-card .woocommerce-error { padding: 1rem 1.1rem 1rem 3rem; border-top: 0; border-radius: 0.9rem; background: var(--nrc-pink-soft); color: var(--nrc-ink); font-size: 0.9rem; } .nrc-checkout-card .woocommerce-info::before, .nrc-checkout-card .woocommerce-message::before, .nrc-checkout-card .woocommerce-error::before { top: 1rem; color: var(--nrc-pink-deep); } .nrc-checkout-card .woocommerce-info a, .nrc-checkout-card .woocommerce-message a, .nrc-checkout-card .woocommerce-error a { color: var(--nrc-ink); font-weight: 700; } /* * Las áreas se nombran explícitamente en vez de dejar que el reparto * automático coloque los hijos de form.checkout: con auto-placement, en * cuanto una fila comparte el formulario de facturación (muy alto) con el * resumen del pedido (también alto, con la tarjeta de pago dentro), esa fila * se estira para igualar a la más alta y arrastra con ella a lo demás —el * pedido puede acabar pantallas por debajo de su título—. Nombrándolas, * formulario y pedido comparten siempre la misma fila («customer» ocupa las * dos de «heading»+«review») y arrancan alineados arriba pase lo que pase. * * Aquí hubo además filas «express» y «separator» para los botones de pago * exprés de Stripe (Apple Pay / Google Pay), que se inyectaban antes de * #customer_details. Stripe ya no está y se han quitado: sin nada que * colocar en ellas eran dos filas vacías que en móvil solo sumaban row-gap. * Si otra pasarela vuelve a inyectar botones ahí arriba, el patrón a repetir * es ese: un área propia a todo el ancho, detectada con :has(). */ .nrc-checkout-card form.checkout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(24rem, 0.9fr); grid-template-areas: "customer heading" "customer review"; align-items: start; column-gap: clamp(2rem, 5vw, 5rem); row-gap: 1.5rem; } .nrc-checkout-card #customer_details { grid-area: customer; } .nrc-checkout-card #order_review_heading { grid-area: heading; } .nrc-checkout-card #order_review { grid-area: review; } .nrc-checkout-card #customer_details, .nrc-checkout-card #order_review { width: auto; float: none; } .nrc-checkout-card #customer_details .col-1, .nrc-checkout-card #customer_details .col-2 { width: 100%; float: none; } .nrc-checkout-card #customer_details .col-2 { display: none; } .nrc-checkout-card h3, .nrc-checkout-card #order_review_heading { margin: 0 0 1.5rem; font-family: "TT Ramillas", Georgia, serif; font-size: clamp(1.8rem, 3vw, 2.7rem); font-weight: 900; line-height: 1; letter-spacing: -0.035em; } .nrc-checkout-card .form-row { margin: 0 0 1.25rem; padding: 0; } .nrc-checkout-card .woocommerce-billing-fields__field-wrapper { display: flex; flex-wrap: wrap; column-gap: 5%; } .nrc-checkout-card .woocommerce-billing-fields__field-wrapper .form-row { width: 100%; float: none; } .nrc-checkout-card #billing_first_name_field { order: 10; width: 47.5%; } .nrc-checkout-card #billing_last_name_field { order: 20; width: 47.5%; } .nrc-checkout-card #billing_email_field { order: 30; } .nrc-checkout-card #billing_phone_field { order: 40; } .nrc-checkout-card #billing_nrc_customer_type_field { order: 45; } .nrc-checkout-card #billing_nrc_tax_id_field { order: 50; } .nrc-checkout-card #billing_company_field { order: 55; } .nrc-checkout-card #billing_country_field { order: 60; } .nrc-checkout-card #billing_address_1_field { order: 70; } .nrc-checkout-card #billing_postcode_field { order: 90; width: 47.5%; } .nrc-checkout-card #billing_city_field { order: 100; width: 47.5%; } .nrc-checkout-card #billing_state_field { order: 110; } .nrc-checkout-card .form-row label { margin-bottom: 0.45rem; font-size: 0.86rem; font-weight: 700; } .nrc-checkout-card .required { color: #bd2346; } .nrc-checkout-card input.input-text, .nrc-checkout-card textarea, .nrc-checkout-card select, .nrc-checkout-card .select2-container .select2-selection--single { min-height: 3.45rem; padding: 0.75rem 0.95rem; border: 1px solid #d9dce2; border-radius: 0.7rem; background: var(--nrc-white); color: var(--nrc-ink); font: inherit; box-shadow: none; } .nrc-checkout-card input.input-text:focus, .nrc-checkout-card textarea:focus, .nrc-checkout-card select:focus { border-color: var(--nrc-ink); outline: 3px solid rgba(236, 178, 210, 0.4); outline-offset: 1px; } .nrc-checkout-card .select2-selection__rendered { line-height: 1.8rem; } .nrc-checkout-card .select2-selection__arrow { top: 0.7rem; } .nrc-checkout-card #order_review { position: sticky; top: calc(var(--ns-cabecera-alto, 76px) + 2rem); align-self: start; padding: 1.5rem; border: 1px solid var(--nrc-line); border-radius: 1.25rem; background: var(--nrc-pink-soft); } .nrc-checkout-card table.shop_table { margin: 0 0 1.5rem; border: 0; border-collapse: collapse; font-size: 0.9rem; } .nrc-checkout-card table.shop_table th, .nrc-checkout-card table.shop_table td { padding: 0.9rem 0; border-top: 1px solid var(--nrc-line); } .nrc-checkout-card table.shop_table thead th { border-top: 0; } .nrc-checkout-card table.shop_table td:last-child, .nrc-checkout-card table.shop_table th:last-child { text-align: right; } .nrc-checkout-card table.shop_table tr.recurring-totals, .nrc-checkout-card table.shop_table tr.recurring-total { display: none; } /* * «×» para quitar una línea del pedido desde el propio checkout * (nrc_checkout_item_remove_link()). El checkout clásico no trae este * control: normalmente solo hay una línea, así que al pulsarla el checkout * pasa a enseñar el aviso de carrito vacío. */ .nrc-checkout-card .nrc-remove-item { display: inline-flex; width: 1.35rem; height: 1.35rem; align-items: center; justify-content: center; margin-left: 0.45rem; border-radius: 50%; background: var(--nrc-pink-soft); color: var(--nrc-pink-deep); font-weight: 700; line-height: 1; text-decoration: none; vertical-align: middle; } .nrc-checkout-card .nrc-remove-item:hover, .nrc-checkout-card .nrc-remove-item:focus-visible { background: var(--nrc-ink); color: var(--nrc-white); } .nrc-checkout-card .nrc-installment-calendar th, .nrc-checkout-card .nrc-installment-calendar td { padding-top: 1rem; vertical-align: top; } .nrc-checkout-card .nrc-installment-calendar th { width: 38%; } .nrc-checkout-card .nrc-installment-calendar ol { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; } .nrc-checkout-card .nrc-installment-calendar li { display: flex; justify-content: space-between; gap: 0.75rem; } .nrc-checkout-card .nrc-installment-calendar li span, .nrc-checkout-card .nrc-installment-calendar small { color: rgba(30, 30, 28, 0.68); } .nrc-checkout-card .nrc-installment-calendar small { display: block; margin-top: 0.75rem; line-height: 1.45; } .nrc-checkout-card #payment { border-radius: 1rem; background: var(--nrc-white); } .nrc-checkout-card #payment ul.payment_methods { padding: 1rem; border-bottom: 1px solid var(--nrc-line); } .nrc-checkout-card #payment div.payment_box { background: var(--nrc-pink-soft); color: var(--nrc-ink); } .nrc-checkout-card #payment div.payment_box::before { border-bottom-color: var(--nrc-pink-soft); } .nrc-checkout-card #payment .form-row.place-order { padding: 1rem; margin: 0; } .nrc-checkout-card .woocommerce-privacy-policy-text, .nrc-checkout-card .woocommerce-terms-and-conditions-checkbox-text { margin-bottom: 15px; } /* * Algunas pasarelas envuelven sus campos en

, y el navegador les * pone un borde "groove" por defecto si nadie lo resetea: en Chrome se ve * como una línea marcadamente oscura, no el gris pálido que sugeriría el * color por defecto. */ .nrc-checkout-card #payment fieldset { margin: 0; padding: 0; border: 0; } .nrc-checkout-card #place_order, .nrc-checkout-card .button.alt { width: 100%; min-height: 3.7rem; padding: 0.95rem 1.2rem; border: 1px solid var(--nrc-ink); border-radius: 999px; background: var(--nrc-pink); color: var(--nrc-ink); font-size: 0.95rem; font-weight: 700; box-shadow: none; } .nrc-checkout-card #place_order:hover, .nrc-checkout-card #place_order:focus-visible, .nrc-checkout-card .button.alt:hover, .nrc-checkout-card .button.alt:focus-visible { background: var(--nrc-ink); color: var(--nrc-white); } .nrc-checkout-card .woocommerce-privacy-policy-text, .nrc-checkout-card .woocommerce-terms-and-conditions-checkbox-text { font-size: 0.76rem; line-height: 1.45; } .nrc-checkout-card .nrc-installment-consent { margin: 1rem 0; padding: 1rem; border: 1px solid rgba(43, 33, 41, 0.22); border-radius: 1rem; background: var(--nrc-cream); } .nrc-checkout-card .nrc-installment-consent label { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; font-size: 0.82rem; line-height: 1.5; } .nrc-checkout-card .nrc-installment-consent input { margin-top: 0.25rem; } .nrc-checkout-trust { display: flex; max-width: 43rem; align-items: center; gap: 0.8rem; margin: 1rem auto 0; color: rgba(30, 30, 28, 0.78); } .nrc-checkout-trust > span { display: grid; width: 2rem; height: 2rem; flex: 0 0 auto; place-items: center; border: 1px solid currentColor; border-radius: 50%; } .nrc-checkout-trust p { margin: 0; font-size: 0.8rem; line-height: 1.4; } @media (max-width: 62rem) { .nrc-plans__grid { grid-template-columns: 1fr; } .nrc-plan { min-height: 0; } .nrc-plan + .nrc-plan { border-top: 1px solid var(--nrc-ink); border-left: 0; } .nrc-plan form, .nrc-plan > .nrc-plan__button { margin-top: 2rem; padding-top: 0; } .nrc-checkout-card form.checkout { grid-template-columns: 1fr; grid-template-areas: "customer" "heading" "review"; } .nrc-checkout-card #order_review { position: static; } } @media (max-width: 42rem) { .nrc-security { grid-template-columns: auto 1fr; } .nrc-security__brands { grid-column: 2; flex-wrap: wrap; } .nrc-checkout-card { padding: 1.1rem; border-radius: 1.5rem; } .nrc-checkout-card .form-row-first, .nrc-checkout-card .form-row-last, .nrc-checkout-card #billing_first_name_field, .nrc-checkout-card #billing_last_name_field, .nrc-checkout-card #billing_postcode_field, .nrc-checkout-card #billing_city_field { width: 100%; float: none; } .nrc-checkout-card #order_review { padding: 1rem; } } @media (prefers-reduced-motion: reduce) { .nrc-plan__button { transition: none; } }