:root{
    --ink:#29251c;
    --ritual-cream:#f7f3ec;
}

@font-face{font-family:"Helvetica LT Std";src:url("../../../../themes/ritualbienestar/assets/fonts/HelveticaLTStd-Roman.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;ascent-override:93.1%;descent-override:22.5%;line-gap-override:20%}
@font-face{font-family:"Helvetica LT Std";src:url("../../../../themes/ritualbienestar/assets/fonts/HelveticaLTStd-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap;ascent-override:93.1%;descent-override:22.5%;line-gap-override:20%}
@font-face{font-family:"Helvetica LT Std";src:url("../../../../themes/ritualbienestar/assets/fonts/HelveticaLTStd-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;ascent-override:93.1%;descent-override:22.5%;line-gap-override:20%}
@font-face{font-family:"Tindoghouse";src:url("../../../../themes/ritualbienestar/assets/fonts/Tindoghouse.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Material Icons";font-style:normal;font-weight:400;src:url("../../../../themes/hummingbird/assets/fonts/MaterialIcons-Regular-2d8017489da689caedc1.woff2") format("woff2"),url("../../../../themes/hummingbird/assets/fonts/MaterialIcons-Regular-08cefa1bc6566a650da7.woff") format("woff");font-display:swap}

/* --- Material Icons: copiado (no enlazado) de
   themes/hummingbird/src/scss/vendors/others/_mdi.scss — mismo icon font
   ya usado en el resto del sitio (p.ej. ps_searchbar), para reutilizar
   glifos ya probados en vez de SVG a mano. --- */
.material-icons{
    display:inline-block;
    width:1em;
    height:1em;
    font-family:"Material Icons",sans-serif;
    font-size:24px;
    font-style:normal;
    font-weight:400;
    font-feature-settings:"liga";
    line-height:1;
    text-transform:none;
    letter-spacing:normal;
    word-wrap:normal;
    white-space:nowrap;
    vertical-align:middle;
    direction:ltr;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizelegibility;
    -moz-osx-font-smoothing:grayscale;
}

.rb-booking-landing{
    font-family:"Helvetica LT Std",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    /* 400 y no Light: mismo peso por defecto que el body del resto del
       sitio (custom.css). Esta clase va en el propio <body> y ganaba a
       aquella regla. */
    font-weight:400;
    color:var(--ink);
    background:var(--ritual-cream);
    min-height:100vh;
    margin:0;
    display:flex;
    flex-direction:column;
}
/* --- Estándar tipográfico del sitio (ver "Homepage — type standard" y
   las "Extensiones del estándar" de custom.css). Esta landing no carga
   theme.css, así que sin tamaño propio los titulares caían a los del
   navegador.
   - h1 de página (servicio a reservar, cheque regalo): titular de página
     interior, 3.5rem / 2.25rem.
   - Título de una card (aviso, "Reserva tu cita", "Tus citas"): titular de
     sección, 2.5rem / 2rem.
   - Subtítulo dentro de una card ("Selecciona fecha y hora", "¿Todavía no
     tienes ningún código?"): titular de elemento, 1.625rem / 1.5rem. --- */
.rb-booking-landing h1,
.rb-booking-landing h2,
.rb-booking-landing h3{
    font-family:"Tindoghouse",cursive;
    font-weight:400;
    line-height:1.2;
    color:var(--ink);
}
.rb-booking-landing__container > h1,
.rb-booking-service__title{
    font-size:3.5rem;
}
.rb-notice__title,
.js-booking-existing-list > h2,
.js-booking-calendar > h1,
.js-booking-calendar > h2.js-booking-calendar-title{
    font-size:2.5rem;
}
.js-booking-calendar > h3,
.js-booking-calendar > h1 ~ h2,
.rb-explore-categories h2{
    font-size:1.625rem;
}
/* Cuerpo: textos corridos de la landing. */
.rb-booking-landing__container > p:not([class]),
.rb-notice__body,
.rb-explore-categories p{
    font-size:1.0625rem;
    font-weight:400;
    line-height:1.7;
}
@media (max-width:767px){
    .rb-booking-landing__container > h1,
    .rb-booking-service__title{
        font-size:2.25rem;
    }
    .rb-notice__title,
    .js-booking-existing-list > h2,
    .js-booking-calendar > h1,
    .js-booking-calendar > h2.js-booking-calendar-title{
        font-size:2rem;
    }
    .js-booking-calendar > h3,
    .js-booking-calendar > h1 ~ h2,
    .rb-explore-categories h2{
        font-size:1.5rem;
    }
    .rb-booking-landing__container > p:not([class]),
    .rb-notice__body,
    .rb-explore-categories p{
        font-size:1rem;
    }
}

.rb-code-banner{
    background:#fff;
    color:var(--ink);
    text-align:center;
    padding:.75rem 1rem;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:baseline;
    gap:.5rem;
}
/* Etiqueta en antetítulo; el código, un dato que el cliente lee y puede
   tener que teclear, en texto destacado con cifras tabulares (antes en
   Tindoghouse, una fuente de titular). */
.rb-code-banner__label{
    font-size:.72rem;
    font-weight:700;
    line-height:1.4;
    text-transform:uppercase;
    letter-spacing:.12em;
    opacity:.6;
}
.rb-code-banner__value{
    font-size:1.25rem;
    font-weight:400;
    line-height:1.5;
    font-variant-numeric:tabular-nums;
}

.rb-booking-landing__header{
    padding:1.5rem 1.5rem 0;
    text-align:center;
}
.rb-booking-landing__logo img{
    height:48px;
    width:auto;
}

.rb-booking-landing__container{
    flex:1 0 auto;
    max-width:980px;
    width:100%;
    margin:0 auto;
    padding:24px 24px 48px;
    box-sizing:border-box;
}

/* Pie: metadato; enlaces legales, metadato accionable. */
.rb-booking-landing__footer{
    border-top:1px solid rgba(41,37,28,.15);
    padding:1.5rem;
    text-align:center;
    font-size:.8125rem;
    line-height:1.4;
    color:rgba(41,37,28,.6);
}
.rb-booking-landing__footer-legal{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:.25rem 1rem;
    margin-bottom:.5rem;
    padding:0;
}
.rb-booking-landing__footer-legal a{
    color:inherit;
    text-decoration:underline;
    text-underline-offset:2px;
    transition:color var(--motion-hover) var(--motion-ease);
}
.rb-booking-landing__footer-legal a:hover,
.rb-booking-landing__footer-legal a:focus-visible{
    color:var(--brass);
}
.rb-booking-landing__footer-copy{
    margin:0;
}

.rb-notice{
    background:#fff;
    border:1px solid rgba(41,37,28,.12);
    border-radius:12px;
    padding:2.5rem 2rem;
    text-align:center;
    box-shadow:0 4px 20px rgba(41,37,28,.06);
}
.rb-notice__icon{
    color:var(--ink);
    margin-bottom:1rem;
}
.rb-notice__icon svg,
.rb-notice__icon .material-icons{
    width:40px;
    height:40px;
    font-size:40px;
}
.rb-notice__title{
    margin:0 0 .5rem;
}
.rb-notice__body{
    margin:0 0 1.5rem;
}
.rb-notice__actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:.75rem;
    margin-top:.5rem;
}
.rb-notice--error .rb-notice__icon{ color:var(--color-error); }
.rb-notice--info .rb-notice__icon{ color:var(--brass); }

.rb-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:.75rem 1.75rem;
    border-radius:999px;
    background:var(--ink);
    color:#fff;
    font-weight:700;
    font-size:.85rem;
    text-transform:uppercase;
    letter-spacing:.04em;
    text-decoration:none!important;
    border:1px solid var(--ink);
    cursor:pointer;
    box-shadow:0 4px 12px rgba(0,0,0,.15);
    /* Misma duración y easing que el botón píldora del resto del sitio
       (.btn-pill de custom.css): los tokens de movimiento ya resuelven
       aquí, ahora que la landing carga custom.css en todos sus estados.
       Antes iba a .25s con un easing propio — el único sitio del sitio con
       un hover más rápido que los 400ms del criterio. */
    transition:transform var(--motion-hover) var(--motion-ease), box-shadow var(--motion-hover) var(--motion-ease), background-color var(--motion-hover) var(--motion-ease), color var(--motion-hover) var(--motion-ease);
}
.rb-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 22px rgba(0,0,0,.2);
}
.rb-btn--ghost{
    background:transparent;
    color:var(--ink);
    box-shadow:none;
}
.rb-btn--ghost:hover{
    background:var(--ink);
    color:#fff;
}
.rb-btn--danger{
    background:transparent;
    color:#a33;
    border-color:#a33;
    box-shadow:none;
}
.rb-btn--danger:hover{
    background:#a33;
    color:#fff;
}
.rb-btn:disabled{
    opacity:.4;
    cursor:not-allowed;
}
.rb-btn:disabled:hover{
    transform:none;
    box-shadow:none;
}
@media (prefers-reduced-motion: reduce){
    .rb-btn{transition:none}
    .rb-btn:hover{transform:none}
}
.rb-btn__spinner{
    display:inline-block;
    width:14px;
    height:14px;
    margin-right:.5rem;
    vertical-align:middle;
    border:2px solid currentColor;
    border-top-color:transparent;
    border-radius:50%;
    animation:availability-calendar-spin .8s linear infinite;
}
@media (prefers-reduced-motion: reduce){
    .rb-btn__spinner{ animation:none; }
}

.rb-code-form{
    width:100%;
    max-width:360px;
    margin:0 auto;
    text-align:left;
}
/* Etiqueta de campo del estándar. */
.rb-code-form label{
    display:block;
    font-weight:700;
    font-size:.72rem;
    line-height:1.4;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--ink);
    margin-bottom:.4rem;
}
.rb-code-form__row{
    display:flex;
    gap:.5rem;
}
.rb-code-form input{
    flex:1;
    padding:.55rem .75rem;
    border:1px solid rgba(41,37,28,.25);
    border-radius:10px;
    background:#fff;
    font-family:inherit;
    font-size:1rem;
    box-sizing:border-box;
    transition:border-color .2s ease, box-shadow .2s ease;
}
.rb-code-form input:hover:not(:focus){
    border-color:rgba(41,37,28,.45);
}
.rb-code-form input:focus{
    outline:none;
    border-color:var(--brass, #af8a52);
    box-shadow:0 0 0 3px rgba(175,138,82,.15);
}
.rb-code-form button{
    border:none;
}
@media (max-width: 480px){
    .rb-code-form__row{
        flex-direction:column;
        align-items: center;
    }
}
.rb-booking-calendar--hidden { display: none; }
/* Frases de estado de error ("Ya no se puede modificar esta reserva…",
   "Este bono ya no tiene usos disponibles…"): mensaje de validación. */
.rb-booking-edit-closed{
    font-size:.8125rem;
    font-weight:400;
    line-height:1.4;
    color:var(--color-error);
}
/* "Quedan 2 de 5 usos": estado. */
.rb-booking-uses{
    font-size:.72rem;
    font-weight:700;
    line-height:1.4;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:var(--ink);
    font-variant-numeric:tabular-nums;
}

.js-booking-existing-list{
    margin-bottom:2rem;
}
.rb-appointment-card{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    background:#fff;
    border:1px solid rgba(41,37,28,.12);
    border-radius:12px;
    padding:1.25rem 1.5rem;
    box-shadow:0 4px 20px rgba(41,37,28,.06);
    margin-bottom:1rem;
}
.rb-appointment-card:last-child{
    margin-bottom:0;
}
.rb-appointment-card__when{
    display:flex;
    align-items:baseline;
    gap:.75rem;
}
/* Fecha de la cita: texto destacado (era Tindoghouse, una fuente de
   titular para un dato); hora: dato. Cifras tabulares en ambas. */
.rb-appointment-card__date{
    font-size:1.25rem;
    font-weight:400;
    line-height:1.5;
    font-variant-numeric:tabular-nums;
}
.rb-appointment-card__time{
    display:inline-flex;
    align-items:center;
    padding:.25rem .75rem;
    border-radius:999px;
    background:var(--ritual-cream);
    font-weight:400;
    font-size:.9375rem;
    line-height:1.4;
    font-variant-numeric:tabular-nums;
}
.rb-appointment-card__actions{
    display:flex;
    gap:.5rem;
    flex-wrap:wrap;
}

.rb-gift-banner {
    background: #f5efe6;
    border: 1px solid #d8c9a3;
    border-radius: 6px;
    padding: 16px 20px;
    margin-bottom: 24px;
    text-align: center;
    /* Texto destacado del estándar (antes negrita a tamaño de cuerpo). */
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.5;
}

.rb-form-errors {
    background: #fbeaea;
    border: 1px solid #d9534f;
    /* Mensaje de validación del estándar. */
    color: var(--color-error);
    font-size: .8125rem;
    font-weight: 400;
    line-height: 1.4;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.rb-persistent-code-bar{
    background:#fff;
    border-bottom:1px solid rgba(41,37,28,.12);
    padding:.75rem 1.5rem;
}
.rb-persistent-code-bar .rb-code-form{
    max-width:480px;
    margin:0 auto;
}

.rb-booking-service{
    background:#fff;
    border:1px solid rgba(41,37,28,.12);
    border-radius:12px;
    box-shadow:0 4px 20px rgba(41,37,28,.06);
    padding:2rem;
    margin-bottom:2rem;
}
.rb-booking-service__title{
    margin:0 0 .5rem;
}
.rb-booking-service .rb-booking__description{
    margin-bottom:0;
}

/* Descripción del servicio: cuerpo del estándar, con el ritmo de párrafo
   de la descripción de la ficha (1.5rem). */
.rb-booking__description{
    margin:0 0 3rem;
    font-size:1.0625rem;
    font-weight:400;
    line-height:1.7;
}
.rb-booking__description p{
    margin:0 0 1.5rem;
}
.rb-booking__description strong,
.rb-booking__description b{
    font-weight:700;
}
@media (max-width:767px){
    .rb-booking__description{
        font-size:1rem;
    }
}
.rb-booking__description p:last-child{
    margin-bottom:0;
}
.rb-booking__description img{
    max-width:100%;
    height:auto;
}
.rb-booking__description a{
    color:var(--ink);
    text-decoration:underline;
}

/* --- Fix de cascada: el atributo HTML "hidden" no gana a una regla de
   autor que ya da "display" al mismo elemento (origen "author" > UA
   normal, aunque la especificidad sea igual). Todo elemento que este
   fichero oculte/muestre dinámicamente por JS necesita esta regla. --- */
[hidden]{
    display:none!important;
}

/* --- Tarjeta del bloque de reserva (título+descripción+calendario),
   mismo lenguaje visual que .rb-notice. --- */
.js-booking-calendar{
    background:#fff;
    border:1px solid rgba(41,37,28,.12);
    border-radius:12px;
    padding:2rem;
    box-shadow:0 4px 20px rgba(41,37,28,.06);
}

/* --- Calendario de disponibilidad: ya no se copia aquí. Lo da el
   calendario compartido de custom.css (el mismo de la ficha y del
   checkout, que esta landing ya carga), con la tipografía de la ficha
   ("Calendario fuera de la ficha: tipografía"). Solo se conserva el hueco
   bajo la tarjeta del mes que tenía esta copia; custom.css lo deja a 0. --- */
.rb-booking-landing .availability-calendar{
    margin-bottom:1.5rem;
}

.js-booking-calendar__confirm-row{
    display:flex;
    flex-direction:row-reverse;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    margin-top:3rem;
}
.js-booking-calendar__confirm-actions{
    display:flex;
    align-items:center;
    gap:.75rem;
}
/* "Cita para el día … a las …": dato. */
.js-booking-calendar__selection-summary{
    margin:0;
    font-size:.9375rem;
    font-weight:400;
    line-height:1.4;
    font-variant-numeric:tabular-nums;
}

/* --- Modal de confirmación: propio, sin Bootstrap (esta landing no
   carga su bundle JS a propósito). --- */
.rb-modal{
    position:fixed;
    inset:0;
    z-index:1000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:1rem;
}
.rb-modal__backdrop{
    position:absolute;
    inset:0;
    background:rgba(41,37,28,.5);
}
.rb-modal__dialog{
    position:relative;
    background:#fff;
    border-radius:12px;
    padding:2rem;
    max-width:400px;
    width:100%;
    box-shadow:0 20px 40px rgba(0,0,0,.2);
    text-align:center;
}
/* Pregunta de confirmación: texto destacado. */
.rb-modal__summary{
    margin:0 0 1.5rem;
    font-size:1.25rem;
    font-weight:400;
    line-height:1.5;
}
.rb-modal__actions{
    display:flex;
    gap:.75rem;
    justify-content:flex-end;
}
.rb-modal__actions .js-booking-modal__cancel{
    order:1;
}
.rb-modal__actions .js-booking-modal__confirm{
    order:2;
}

.rb-explore-categories{
    margin-top:2rem;
    padding-top:2rem;
    border-top:1px solid rgba(41,37,28,.12);
    text-align:center;
}
.rb-explore-categories h2{
    margin:0 0 .75rem;
}
.rb-explore-categories p{
    margin:0 0 .75rem;
}
.rb-explore-categories__buttons{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:.75rem;
    margin-top:1.5rem;
}

/* Tarjetas del picker de tarjeta regalo: un poco de aire visual respecto al
   listado de catálogo normal (borde + fondo sutil), solo en esta página —
   el catálogo normal no carga este CSS. */
.rb-booking-landing .product-listing-item {
    padding: 1.5rem;
    border: 1px solid rgba(41, 37, 28, .12);
    border-radius: 12px;
    background: #fff;
}
/* La separación entre tarjetas la pone el gap de la rejilla .products
   (custom.css); un margin-bottom aquí se sumaría a él. */

/* Bloque colapsable "servicios por encima del importe" (Task 5) — separado
   y resaltado del grid de arriba, con hover más marcado que un simple
   cambio de cursor. */
.rb-giftcard-more {
    margin-top: 32px;
    padding: 16px;
    border: 1px solid rgba(41, 37, 28, .15);
    border-radius: 12px;
    background: var(--ritual-cream, #f7f3ec);
}
/* Frase de un enlace desplegable: cuerpo (antes 600). */
.rb-giftcard-more__toggle {
    cursor: pointer;
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.7;
    padding: 8px;
}
.rb-giftcard-more__toggle:hover {
    text-decoration: underline;
}
.rb-giftcard-more__toggle::-webkit-details-marker {
    color: inherit;
}
.rb-giftcard-more[open] .rb-giftcard-more__toggle {
    margin-bottom: 8px;
}

/* Link "volver al picker" desde el calendario de canjeo (giftcard-calendar.tpl) */
/* Enlace de texto del estándar (.8125rem, 400, .14em, mayúsculas, filete
   --brass que se completa al hover), el de .ritual-for-you__cta. */
.rb-booking-back {
    position: relative;
    display: inline-block;
    margin-bottom: 16px;
    padding-bottom: .6rem;
    color: var(--ink, #29251c);
    font-size: .8125rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
}
.rb-booking-back::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--brass);
    transform: scaleX(.3);
    transform-origin: left center;
    transition: transform var(--motion-hover) var(--motion-ease);
}
.rb-booking-back:hover::after,
.rb-booking-back:focus-visible::after {
    transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
    .rb-booking-back::after { transition: none; }
}

/* Campos de nombre/email dentro del modal de confirmación, solo presentes
   en el flujo de canjeo de tarjeta regalo (giftcard-calendar.tpl) */
.rb-modal__fields {
    display: flex;
    flex-direction: column;
    margin: 16px 0;
    text-align: left;
}
.rb-modal__field {
    margin-bottom: 30px;
}
.rb-modal__fields label {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink, #29251c);
}
.rb-modal__input {
    display: block;
    width: 100%;
    border: 1px solid rgba(41, 37, 28, .25);
    border-radius: 10px;
    background: #fff;
    padding: .55rem .75rem;
    font-family: "Helvetica LT Std", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 300;
    font-size: 1rem;
    color: var(--ink, #29251c);
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.rb-modal__input:hover:not(:focus) {
    border-color: rgba(41, 37, 28, .45);
}
.rb-modal__input:focus {
    outline: none;
    border-color: var(--brass, #af8a52);
    box-shadow: 0 0 0 3px rgba(175, 138, 82, .15);
}

/* ==========================================================================
   Móvil: objetivos de toque y aire de las tarjetas
   Mismo criterio que ya aplican custom.css (chips de hora y flechas de mes
   del calendario compartido) y cart-reservation.css (botones de reserva):
   44px de alto mínimo para todo lo que se pulsa con el dedo. El calendario
   en sí no necesita nada aquí — lo trae ya resuelto custom.css.
   ========================================================================== */
@media (max-width:767px){
    /* .rb-btn mide ~41px (padding .75rem + texto .85rem): se queda justo
       por debajo de la referencia. Crece solo de alto; ni tipografía ni
       padding lateral ni escritorio se tocan. */
    .rb-btn{
        min-height:44px;
    }
    /* Los dos campos de texto de la landing (el del código y los del modal
       de canjeo) rondan los 36px por la misma razón. */
    .rb-code-form input,
    .rb-modal__input{
        min-height:44px;
    }
    /* Las tarjetas blancas van a 2rem de padding por lado, que en un móvil
       estrecho se come el ancho justo donde más falta hace: las 7 columnas
       del calendario, que reparten lo que quede entre siete días. A 1.5rem
       cada día gana ~4px de lado sin que la tarjeta pierda su aire. */
    .js-booking-calendar,
    .rb-booking-service,
    .rb-modal__dialog{
        padding:1.5rem;
    }
    .rb-notice{
        padding:2rem 1.5rem;
    }
    /* La fila de confirmación es row-reverse + space-between: pensada para
       tener el resumen a un lado y los botones al otro. En una columna de
       móvil eso deja los dos trozos apilados a la derecha y un salto de
       3rem por encima. Aquí se apila a propósito —resumen arriba, botones
       abajo repartiéndose el ancho— y el salto baja un paso de la escala. */
    .js-booking-calendar__confirm-row{
        flex-direction:column-reverse;
        align-items:stretch;
        margin-top:2rem;
    }
    .js-booking-calendar__confirm-actions .rb-btn{
        flex:1;
    }
    .js-booking-calendar__selection-summary{
        text-align:center;
    }
}