/* ================================================================
   La Finquita — Página de Reserva
   reserva.css v2.4.0
   ================================================================
   Paleta:
     Fondo dark hero:   #0d0e1c
     Fondo secciones:   #f8f7f4 (crema cálido) / #fff
     Acento primario:   #A450C9 (purple)
     Texto principal:   #1a1a2e
     Texto secundario:  #5a5a72
     Borde:             rgba(26,26,46,0.1)
   ================================================================ */

/* ─── Variables ─────────────────────────────────────────────── */
/* Variables en :root — disponibles globalmente, sin depender
   de que la clase body esté presente (mismo patrón que homepage.css) */
:root {
    --lf-r-purple:      #A450C9;
    --lf-r-purple-dark: #8a3aab;
    --lf-r-navy:        #0d0e1c;
    --lf-r-ink:         #1a1a2e;
    --lf-r-muted:       #5a5a72;
    --lf-r-subtle:      #9090a8;
    --lf-r-bg:          #f8f7f4;
    --lf-r-bg-alt:      #ffffff;
    --lf-r-border:      rgba(26, 26, 46, 0.1);
    --lf-r-radius:      12px;
    --lf-r-radius-sm:   8px;
    --lf-r-shadow:      0 2px 16px rgba(0,0,0,0.08);
    --lf-r-shadow-md:   0 8px 32px rgba(0,0,0,0.12);
    --lf-r-ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --lf-r-container:   1160px;
}

/* Base de página — tipografía y fondo */
.lf-reserva-page {
    font-family: 'Poppins', sans-serif;
    background: var(--lf-r-bg);
    color: var(--lf-r-ink);
}

/* ─── Container ─────────────────────────────────────────────── */
.lf-reserva-page .lf-container {
    width: 100%;
    max-width: var(--lf-r-container);
    margin-inline: auto;
    padding-inline: clamp(20px, 5vw, 60px);
}

/* ─── Eyebrow ────────────────────────────────────────────────── */
.lf-r-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--lf-r-purple);
    margin-bottom: 10px;
}

/* ================================================================
   HERO — Galería + Widget
   ================================================================ */

/*
 * Compensación de la nav flotante (position: fixed, top: 24px, ~46px de alto).
 * Sin esto el nav solapa los primeros ~70px del hero en escritorio.
 * El admin-bar de WordPress desplaza la nav otros 32px más en desktop.
 */
.admin-bar .lf-rh {
    padding-top: 126px; /* 32px admin-bar + 16px sep + 46px nav + 32px buffer */
}
@media screen and (max-width: 782px) {
    .admin-bar .lf-rh {
        padding-top: 116px; /* 46px admin-bar mobile + 12px sep + 46px nav + 12px buffer */
    }
}

.lf-rh {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 0;
    /* Sin height fijo: el widget dicta la altura del grid.
       La galería rellena esa misma altura con height:100%.
       Así nada se corta y la galería siempre iguala al widget. */
    min-height: 480px;
    background: var(--lf-r-navy);
    /* Compensar la nav flotante: top:24px + ~46px de inner + margen = 88px */
    padding-top: 88px;
}

/* ─── Galería ────────────────────────────────────────────────── */
.lf-rh__gallery {
    position: relative;
    overflow: hidden;
    height: 100%; /* se estira a la altura real del grid (= widget) */
    min-height: 480px; /* nunca más baja de 480px aunque el widget sea corto */
}

.lf-rh__slides {
    position: relative; /* contexto de apilamiento para los slides */
    height: 100%;
}

.lf-rh__slide {
    position: absolute;
    inset: 0;        /* todos los slides llenan el contenedor */
    opacity: 0;
    transition: opacity 0.6s var(--lf-r-ease);
}
.lf-rh__slide.is-active {
    opacity: 1;
    /* position: absolute siempre — la altura la define el contenedor */
}

.lf-rh__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* min-height eliminado — la altura la controla .lf-rh { height: 480px } */
}

/* Navegación galería */
.lf-rh__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    z-index: 10;
}
.lf-rh__nav:hover { background: rgba(255,255,255,0.28); }
.lf-rh__nav--prev { left: 16px; }
.lf-rh__nav--next { right: 16px; }

/* Dots */
.lf-rh__dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 10;
}
.lf-rh__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    padding: 0;
}
.lf-rh__dot.is-active,
.lf-rh__dot:hover {
    background: #fff;
    transform: scale(1.3);
}

/* ─── Contador de galería ────────────────────────────────────── */
.lf-rh__counter {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    padding: 4px 10px;
    border-radius: 100px;
    z-index: 10;
    letter-spacing: 0.03em;
}

/* ─── Widget de reserva ──────────────────────────────────────── */
.lf-rh__widget {
    background: #fff;
    border-left: 1px solid var(--lf-r-border);
    display: flex;
    flex-direction: column;
    align-self: stretch; /* widget estira hasta la altura de la galería */
}
.lf-rh__widget-inner {
    padding: 24px 22px;
    position: sticky;
    top: 80px;
}

/* Rating top — compacto y limpio */
.lf-rh__widget-top {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}
.lf-rh__widget-rating {
    display: flex;
    align-items: center;
    gap: 5px;
}
.lf-rh__widget-stars { color: #FBBC05; font-size: 11px; }
.lf-rh__widget-score {
    font-size: 12px;
    font-weight: 600;
    color: var(--lf-r-muted);
}

/* Precio ancla — patrón Airbnb */
.lf-rh__widget-price {
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--lf-r-border);
}
.lf-rh__price-anchor {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 2px;
}
.lf-rh__price-from {
    font-size: 13px;
    color: var(--lf-r-muted);
    font-weight: 400;
}
.lf-rh__price-amount {
    font-size: 28px;
    font-weight: 800;
    color: var(--lf-r-ink);
    letter-spacing: -0.02em;
    line-height: 1;
}
.lf-rh__price-period {
    font-size: 15px;
    font-weight: 500;
    color: var(--lf-r-muted);
}
.lf-rh__price-hint {
    display: block;
    font-size: 12px;
    color: var(--lf-r-subtle);
}

/* Fechas — diseño de rango tipo booking */
.lf-rh__dates-wrap {
    margin-bottom: 14px;
    /*
     * CLS fix: reserva espacio para el aviso de fecha bloqueada.
     * El aviso mide ~42px (padding 7+7 + línea de texto 11px + margen).
     * Sin esta reserva, al aparecer el aviso desplaza el stepper de personas,
     * el desglose de precio y los botones CTA → CLS positivo.
     * Con min-height el layout es estable independientemente de si hay aviso.
     */
    min-height: 90px;
}
.lf-rh__dates-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: 6px;
    margin-bottom: 8px;
}
.lf-rh__dates-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.lf-rh__dates-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lf-r-subtle);
    padding-bottom: 10px;
    flex-shrink: 0;
}

/* Badge "N días seleccionados" */
.lf-rh__nights-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--lf-r-purple);
    text-align: center;
    background: rgba(164,80,201,0.07);
    border-radius: 100px;
    padding: 4px 12px;
    display: inline-block;
}

.lf-rh__field { display: flex; flex-direction: column; gap: 5px; }
.lf-rh__label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--lf-r-muted);
}
.lf-rh__input {
    border: 1.5px solid var(--lf-r-border);
    border-radius: var(--lf-r-radius-sm);
    padding: 9px 10px;
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
    color: var(--lf-r-ink);
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    box-sizing: border-box;
    color-scheme: light; /* normaliza el date picker cross-browser */
}
.lf-rh__input:focus {
    outline: none;
    border-color: var(--lf-r-purple);
    box-shadow: 0 0 0 3px rgba(164,80,201,0.1);
}
/* Ocultar iconos nativos del date picker en webkit */
.lf-rh__input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0.4;
    cursor: pointer;
    filter: invert(40%) sepia(80%) saturate(500%) hue-rotate(260deg);
}

/* Fila personas + mascotas: 2 columnas iguales */
.lf-rh__fields-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}
.lf-rh__fields-row .lf-rh__field {
    margin-bottom: 0; /* el gap del grid gestiona el espaciado */
}

/* Stepper personas (y mascotas) */
.lf-rh__field { margin-bottom: 14px; }
.lf-rh__stepper {
    display: flex;
    align-items: center;
    border: 1px solid var(--lf-r-border);
    border-radius: var(--lf-r-radius-sm);
    overflow: hidden;
}
.lf-rh__step-btn {
    width: 40px;
    height: 42px;
    background: var(--lf-r-bg);
    border: none;
    font-size: 18px;
    font-weight: 600;
    color: var(--lf-r-ink);
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}
.lf-rh__step-btn:hover { background: rgba(164,80,201,0.08); color: var(--lf-r-purple); }
.lf-rh__step-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}
.lf-rh__step-input {
    flex: 1;
    text-align: center;
    border: none;
    border-left: 1px solid var(--lf-r-border);
    border-right: 1px solid var(--lf-r-border);
    padding: 0;
    font-size: 15px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    color: var(--lf-r-ink);
    background: #fff;
    height: 42px;
}
.lf-rh__step-input:focus { outline: none; }
/* Input editable — focus ring sutil que comunica interactividad */
.lf-rh__step-input:focus:not([readonly]) {
    box-shadow: inset 0 0 0 2px rgba(164, 80, 201, 0.35);
    background: #fdf8ff;
}
/* Cursor text cuando el input es editable */
.lf-rh__step-input:not([readonly]) { cursor: text; }

/* Ocultar spinner nativo del input número — tenemos custom +/- */
/* Aplica a todos los inputs numéricos de la página */
.lf-rh__step-input::-webkit-outer-spin-button,
.lf-rh__step-input::-webkit-inner-spin-button,
.lf-rcalc__input::-webkit-outer-spin-button,
.lf-rcalc__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.lf-rh__step-input,
.lf-rcalc__input { -moz-appearance: textfield; }

/* ─── Discomóvil Diamante — tarjeta toggle (widget sidebar) ──────────────── */
/*
 * Patrón CSS-only con sibling selector:
 *   input[type=checkbox]#lfDiscoToggle (visualmente oculto, en el DOM ANTES del label)
 *   label.lf-rh__addon-card (la tarjeta clicable, enlazada con for="lfDiscoToggle")
 *
 * :checked ~ .lf-rh__addon-card aplica los estilos activos sin JS.
 * El JS solo lee el estado para modificar el mensaje de WhatsApp.
 */
.lf-rh__disco-cb {
    /* Oculto visualmente pero accesible para teclado y AT */
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.lf-rh__addon-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1.5px solid var(--lf-r-border);
    border-radius: 10px;
    padding: 11px 14px;
    margin-bottom: 10px;
    cursor: pointer;
    background: #fff;
    transition: border-color 200ms var(--lf-r-ease),
                background   200ms var(--lf-r-ease),
                box-shadow   200ms var(--lf-r-ease);
    user-select: none;
}
.lf-rh__addon-card:hover {
    border-color: rgba(164, 80, 201, 0.4);
    background: #fdf8ff;
}
.lf-rh__disco-cb:checked ~ .lf-rh__addon-card {
    border-color: var(--lf-r-purple);
    background: rgba(164, 80, 201, 0.05);
    box-shadow: 0 0 0 3px rgba(164, 80, 201, 0.12);
}
.lf-rh__disco-cb:focus-visible ~ .lf-rh__addon-card {
    outline: 2px solid var(--lf-r-purple);
    outline-offset: 2px;
}

.lf-rh__addon-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.lf-rh__addon-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(164, 80, 201, 0.08);
    color: var(--lf-r-purple);
    flex-shrink: 0;
    transition: background 200ms;
}
.lf-rh__disco-cb:checked ~ .lf-rh__addon-card .lf-rh__addon-icon {
    background: rgba(164, 80, 201, 0.15);
}
.lf-rh__addon-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.lf-rh__addon-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--lf-r-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lf-rh__addon-desc {
    font-size: 11px;
    color: var(--lf-r-muted);
    white-space: nowrap;
}

/* Toggle switch visual */
.lf-rh__addon-toggle { flex-shrink: 0; }
.lf-rh__disco-track {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    border-radius: 11px;
    background: rgba(164, 80, 201, 0.18);
    transition: background 200ms var(--lf-r-ease);
}
.lf-rh__disco-cb:checked ~ .lf-rh__addon-card .lf-rh__disco-track {
    background: var(--lf-r-purple);
}
.lf-rh__disco-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 200ms var(--lf-r-ease);
}
.lf-rh__disco-cb:checked ~ .lf-rh__addon-card .lf-rh__disco-knob {
    transform: translateX(16px);
}

/* ─── Discomóvil — checkbox en formulario de contacto ─────────────────────── */
.lf-rform__field--addon {
    margin-bottom: 16px;
}
.lf-rform__addon-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.lf-rform__addon-cb {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    accent-color: var(--lf-r-purple);
    cursor: pointer;
    flex-shrink: 0;
}
.lf-rform__addon-label {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 13.5px;
    color: var(--lf-r-ink);
    cursor: pointer;
    line-height: 1.5;
}
.lf-rform__addon-hint {
    display: block;
    margin-top: 4px;
    margin-left: 26px;
    font-size: 12px;
    color: var(--lf-r-muted);
}

/* Desglose de precio */
.lf-rh__price-breakdown {
    background: var(--lf-r-bg);
    border-radius: var(--lf-r-radius-sm);
    padding: 14px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lf-rh__price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}
.lf-rh__price-row--muted .lf-rh__price-label,
.lf-rh__price-row--muted .lf-rh__price-value {
    color: var(--lf-r-subtle);
    font-size: 12px;
}
.lf-rh__price-row--total {
    padding-top: 8px;
    border-top: 1px solid var(--lf-r-border);
    margin-top: 4px;
}
.lf-rh__price-value--total {
    font-size: 18px;
    font-weight: 800;
    color: var(--lf-r-purple);
}

/* CTA principal — WhatsApp */
.lf-rh__cta-wa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: #25D366;
    color: #fff !important;
    text-align: center;
    padding: 14px;
    border-radius: var(--lf-r-radius-sm);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    margin-bottom: 10px;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.3);
}
.lf-rh__cta-wa:hover {
    background: #1ebe5a;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
}
.lf-rh__cta-wa svg { flex-shrink: 0; }

/* CTA secundario — formulario (ghost sobre fondo blanco del widget) */
.lf-rh__cta-btn {
    display: block;
    width: 100%;
    background: transparent;
    color: var(--lf-r-muted) !important;   /* oscuro: widget es blanco */
    text-align: center;
    padding: 10px 14px;
    border-radius: var(--lf-r-radius-sm);
    border: 1px solid var(--lf-r-border);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none !important;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    margin-bottom: 10px;
}
.lf-rh__cta-btn:hover {
    background: var(--lf-r-bg);
    color: var(--lf-r-ink) !important;
    border-color: rgba(26,26,46,0.25);
}
.lf-rh__cta-btn--ghost { /* alias explícito */ }

.lf-rh__widget-note {
    text-align: center;
    font-size: 11px;
    color: var(--lf-r-subtle);
    margin: 0 0 12px;
}

/* Detalles de pago — nota contextual discreta debajo del CTA */
.lf-rh__widget-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 10px;
    border-top: 1px solid var(--lf-r-border);
    font-size: 11px;
    color: var(--lf-r-subtle);
    text-align: center;
}
.lf-rh__widget-meta strong {
    color: var(--lf-r-muted);
    font-weight: 600;
}

/* ================================================================
   IDENTIDAD — Stats bar
   ================================================================ */
.lf-ri {
    padding-block: clamp(40px, 5vw, 64px);
    border-bottom: 1px solid var(--lf-r-border);
    /* Sombra superior sutil que ata la sección con el hero oscuro */
    box-shadow: inset 0 4px 24px rgba(13,14,28,0.04);
}
.lf-ri__header { margin-bottom: 28px; }
.lf-ri__title {
    font-size: clamp(22px, 3vw, 34px);
    font-weight: 800;
    color: var(--lf-r-ink);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}
.lf-ri__location {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--lf-r-muted);
}
.lf-ri__location svg { color: var(--lf-r-purple); flex-shrink: 0; }

.lf-ri__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
}
.lf-ri__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    min-width: 100px;
}
.lf-ri__stat svg { color: var(--lf-r-purple); margin-bottom: 4px; }
.lf-ri__stat strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--lf-r-ink);
}
.lf-ri__stat span {
    font-size: 12px;
    color: var(--lf-r-muted);
}

/* ================================================================
   DESCRIPCIÓN
   ================================================================ */
.lf-rdesc {
    padding-block: clamp(40px, 5vw, 64px);
    border-bottom: 1px solid var(--lf-r-border);
}
.lf-rdesc__inner { max-width: 760px; }
.lf-rdesc__inner h2 {
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 800;
    color: var(--lf-r-ink);
    letter-spacing: -0.02em;
    margin-bottom: 20px;
}
.lf-rdesc__content p {
    font-size: 15px;
    line-height: 1.75;
    color: var(--lf-r-muted);
    margin-bottom: 16px;
}
.lf-rdesc__content p:last-child { margin-bottom: 0; }

/* ================================================================
   ZONAS
   ================================================================ */
.lf-rzones {
    background: var(--lf-r-navy);
    padding-block: clamp(56px, 7vw, 96px);
}
.lf-rzones__header {
    text-align: center;
    margin-bottom: clamp(36px, 5vw, 56px);
}
/* Elementor Kit inyecta color oscuro a todos los headings.
   En secciones con fondo oscuro, necesitamos !important para ganar. */
.lf-rzones__header .lf-r-eyebrow { color: rgba(164,80,201,0.9) !important; }
.lf-rzones__header h2 {
    font-size: clamp(24px, 3vw, 38px);
    font-weight: 800;
    color: #fff !important;   /* Kit override: Elementor aplica navy oscuro a h2 */
    letter-spacing: -0.02em;
    margin: 0;
}

.lf-rzones__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.lf-rzone-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--lf-r-radius);
    overflow: hidden;
    transition: transform 0.35s var(--lf-r-ease),
                border-color 0.35s,
                box-shadow 0.35s;
}
.lf-rzone-card:hover {
    transform: translateY(-6px);
    border-color: rgba(164,80,201,0.4);
    box-shadow: 0 16px 48px rgba(0,0,0,0.4), 0 0 0 1px rgba(164,80,201,0.2);
}

/* Imagen con gradiente inferior de transición al cuerpo */
.lf-rzone-card__img {
    height: 220px;
    overflow: hidden;
    position: relative;
}
.lf-rzone-card__img::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, transparent, rgba(10,10,26,0.75));
    pointer-events: none;
    z-index: 1;
}
.lf-rzone-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--lf-r-ease);
    display: block;
}
.lf-rzone-card:hover .lf-rzone-card__img img { transform: scale(1.08); }

.lf-rzone-card__body {
    padding: 20px;
}
.lf-rzone-card__icon {
    width: 36px;
    height: 36px;
    background: rgba(164,80,201,0.18);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lf-r-purple);
    margin-bottom: 12px;
    transition: background 0.3s;
}
.lf-rzone-card:hover .lf-rzone-card__icon {
    background: rgba(164,80,201,0.3);
}
.lf-rzone-card__name {
    font-size: 17px;
    font-weight: 700;
    color: #fff !important;   /* Kit override: Elementor aplica navy oscuro a h3 */
    margin-bottom: 4px;
}
.lf-rzone-card__cap {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: var(--lf-r-purple) !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
}
.lf-rzone-card__desc {
    font-size: 13px;
    line-height: 1.65;
    color: rgba(255,255,255,0.6) !important;  /* Kit override en p */
    margin: 0;
}

/* ================================================================
   INSTALACIONES
   ================================================================ */
.lf-rfeatures {
    background: var(--lf-r-bg-alt);
    padding-block: clamp(56px, 7vw, 96px);
    border-bottom: 1px solid var(--lf-r-border);
}
.lf-rfeatures__header {
    margin-bottom: clamp(36px, 5vw, 56px);
}
.lf-rfeatures__header h2 {
    font-size: clamp(22px, 2.8vw, 34px);
    font-weight: 800;
    color: var(--lf-r-ink);
    letter-spacing: -0.02em;
    margin: 0;
}

.lf-rfeatures__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.lf-rfeature-cat {
    background: var(--lf-r-bg);
    border-radius: var(--lf-r-radius);
    padding: 24px;
}
.lf-rfeature-cat__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--lf-r-border);
}
.lf-rfeature-cat__icon {
    width: 34px;
    height: 34px;
    background: rgba(164,80,201,0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lf-r-purple);
    flex-shrink: 0;
}
.lf-rfeature-cat__name {
    font-size: 15px;
    font-weight: 700;
    color: var(--lf-r-ink);
    margin: 0;
}

.lf-rfeature-cat__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lf-rfeature-cat__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--lf-r-muted);
}
.lf-rfeature-cat__check {
    color: var(--lf-r-purple);
    flex-shrink: 0;
}

/* ================================================================
   PRECIOS — Calculadora
   Dark section: crea ritmo visual entre la sección de instalaciones
   (clara) y el calendario (claro), rompiendo el "valle plano" central.
   Patrón: claro → OSCURO → claro → oscuro (reviews) — ritmo premium.
   ================================================================ */
.lf-rpricing {
    background: var(--lf-r-navy);
    padding-block: clamp(56px, 7vw, 96px);
}
.lf-rpricing__header {
    max-width: 600px;
    margin-bottom: clamp(36px, 5vw, 56px);
}
.lf-rpricing__header .lf-r-eyebrow {
    color: rgba(164,80,201,0.9) !important;
}
.lf-rpricing__header h2 {
    font-size: clamp(22px, 2.8vw, 34px);
    font-weight: 800;
    color: #fff !important;   /* Kit override en sección oscura */
    letter-spacing: -0.02em;
    margin-bottom: 10px;
}
.lf-rpricing__subtitle {
    font-size: 15px;
    color: rgba(255,255,255,0.55);
    margin: 0;
}

.lf-rpricing__layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 40px;
    align-items: start;
}

/* Tarjetas de tramos — adaptadas a fondo navy */
.lf-rpricing__tiers {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.lf-rtier {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--lf-r-radius);
    padding: 20px 24px;
    position: relative;
    transition: background 0.2s, border-color 0.2s;
}
.lf-rtier:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.14);
}
.lf-rtier--featured {
    border-color: rgba(164,80,201,0.6);
    box-shadow: 0 0 0 1px rgba(164,80,201,0.3), 0 8px 32px rgba(0,0,0,0.3);
    background: rgba(164,80,201,0.08);
}
.lf-rtier--featured:hover {
    background: rgba(164,80,201,0.12);
    border-color: var(--lf-r-purple);
}
.lf-rtier__badge {
    position: absolute;
    top: -11px;
    left: 20px;
    background: var(--lf-r-purple);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 10px;
    border-radius: 100px;
}
.lf-rtier__range {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.45) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}
.lf-rtier__price {
    display: block;
    font-size: 28px;
    font-weight: 800;
    color: #fff !important;   /* Kit override */
    letter-spacing: -0.02em;
    margin-bottom: 8px;
    line-height: 1;
}
.lf-rtier__price span {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255,255,255,0.45);
}
.lf-rtier--featured .lf-rtier__price { color: var(--lf-r-purple) !important; }
.lf-rtier__desc {
    font-size: 13px;
    color: rgba(255,255,255,0.5) !important;
    line-height: 1.6;
    margin: 0;
}

/* Calculadora — diferenciada del fondo navy con borde purple y bg ligeramente más claro */
.lf-rcalc {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(164,80,201,0.25);
    border-radius: var(--lf-r-radius);
    padding: 28px;
    position: sticky;
    top: 100px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
}
.lf-rcalc__title {
    font-size: 17px;
    font-weight: 700;
    color: #fff !important;          /* Kit override: aplica navy oscuro a h3 */
    text-transform: none !important; /* Kit override: aplica uppercase a headings */
    letter-spacing: -0.01em;
    margin-bottom: 20px;
}
.lf-rcalc__field { margin-bottom: 16px; }
.lf-rcalc__label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase !important;  /* queremos uppercase aquí, restauramos */
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.5) !important; /* Kit override: aplica navy a labels */
    margin-bottom: 8px;
}
.lf-rcalc__stepper {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--lf-r-radius-sm);
    overflow: hidden;
}
.lf-rcalc__btn {
    width: 44px;
    height: 46px;
    background: transparent !important; /* Kit override: reset pill background */
    border: none !important;
    border-radius: 0 !important;        /* Kit override: reset 100px pill */
    padding: 0 !important;
    min-height: unset !important;
    color: rgba(255,255,255,0.7) !important; /* Kit override: fuerza texto claro */
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.lf-rcalc__btn:hover {
    background: rgba(164,80,201,0.2) !important;
    color: var(--lf-r-purple) !important;
}
.lf-rcalc__input {
    flex: 1;
    text-align: center;
    background: transparent;
    border: none;
    border-left: 1px solid rgba(255,255,255,0.12);
    border-right: 1px solid rgba(255,255,255,0.12);
    color: #fff !important; /* Kit override: fuerza texto claro sobre fondo oscuro */
    font-size: 18px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    height: 46px;
}
.lf-rcalc__input:focus { outline: none; }
.lf-rcalc__input:focus:not([readonly]) {
    box-shadow: inset 0 0 0 2px rgba(164, 80, 201, 0.5);
}
.lf-rcalc__input:not([readonly]) { cursor: text; }
.lf-rcalc__input::placeholder { color: rgba(255,255,255,0.3); }

.lf-rcalc__result {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--lf-r-radius-sm);
    padding: 16px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lf-rcalc__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: rgba(255,255,255,0.6);
}
.lf-rcalc__row strong { color: #fff !important; font-weight: 700; }
.lf-rcalc__row--total {
    font-size: 15px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 4px;
    color: rgba(255,255,255,0.85);
}
.lf-rcalc__row--total strong {
    font-size: 22px;
    color: var(--lf-r-purple) !important;  /* Kit override */
    letter-spacing: -0.01em;
}
.lf-rcalc__row--muted { font-size: 12px; color: rgba(255,255,255,0.35); }
.lf-rcalc__row--muted strong { color: rgba(255,255,255,0.5); font-size: 12px; }

.lf-rcalc__note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    line-height: 1.5;
    margin-bottom: 16px;
}
.lf-rcalc__note svg { margin-top: 1px; flex-shrink: 0; }

.lf-rcalc__cta {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: #25D366 !important;          /* WhatsApp verde, Kit override */
    color: #fff !important;
    text-align: center;
    padding: 14px !important;
    border-radius: var(--lf-r-radius-sm) !important; /* Kit override: anula 100px pill */
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 16px rgba(37,211,102,0.25);
    min-height: unset !important;            /* Kit override */
}
.lf-rcalc__cta:hover {
    background: #1ebe5a !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(37,211,102,0.35);
}
.lf-rcalc__cta svg { flex-shrink: 0; }

/* ================================================================
   CALENDARIO
   ================================================================ */
.lf-rcal {
    background: var(--lf-r-bg-alt);
    padding-block: clamp(56px, 7vw, 96px);
    border-bottom: 1px solid var(--lf-r-border);
}
.lf-rcal__header {
    margin-bottom: 32px;
}
.lf-rcal__header h2 {
    font-size: clamp(22px, 2.8vw, 34px);
    font-weight: 800;
    color: var(--lf-r-ink);
    letter-spacing: -0.02em;
    margin: 0;
}

.lf-rcal__controls {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
}
.lf-rcal__nav {
    background: var(--lf-r-bg);
    border: 1px solid var(--lf-r-border);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--lf-r-ink);
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
    margin-top: 8px;
}
.lf-rcal__nav:hover {
    background: rgba(164,80,201,0.08);
    color: var(--lf-r-purple);
    border-color: var(--lf-r-purple);
}

.lf-rcal__months {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Tabla de mes */
.lf-rcal-month {}
.lf-rcal-month__name {
    font-size: 14px;
    font-weight: 700;
    color: var(--lf-r-ink);
    text-align: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--lf-r-border);
}
.lf-rcal-month__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.lf-rcal-month__day-header {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--lf-r-subtle);
    text-align: center;
    padding: 4px 0 8px;
    letter-spacing: 0.04em;
}
.lf-rcal-month__day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--lf-r-ink);
    border-radius: 6px;
    cursor: default;
    transition: background 0.15s;
}
.lf-rcal-month__day--empty { }
.lf-rcal-month__day--past {
    color: var(--lf-r-subtle);
    opacity: 0.4;
}
.lf-rcal-month__day--available:hover {
    background: rgba(164,80,201,0.08);
    color: var(--lf-r-purple);
}
.lf-rcal-month__day--blocked {
    text-decoration: line-through;
    color: var(--lf-r-subtle);
    background: rgba(0,0,0,0.04);
    cursor: not-allowed;
}
.lf-rcal-month__day--today {
    background: rgba(164,80,201,0.12);
    color: var(--lf-r-purple);
    font-weight: 700;
}

.lf-rcal__legend {
    display: flex;
    gap: 24px;
    margin-bottom: 16px;
}
.lf-rcal__legend-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    color: var(--lf-r-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
.lf-rcal__legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.lf-rcal__legend-dot--available { background: var(--lf-r-ink); }
.lf-rcal__legend-dot--blocked {
    background: transparent;
    border: 1.5px solid var(--lf-r-subtle);
}

.lf-rcal__note {
    font-size: 13px;
    color: var(--lf-r-muted);
    margin: 0;
}
.lf-rcal__note a {
    color: var(--lf-r-purple);
    font-weight: 600;
    text-decoration: none;
}
.lf-rcal__note a:hover { text-decoration: underline; }

/* ================================================================
   MAPA
   ================================================================ */
.lf-rmap {
    background: var(--lf-r-bg);
    padding-block: clamp(56px, 7vw, 96px);
    border-bottom: 1px solid var(--lf-r-border);
}
.lf-rmap__header {
    margin-bottom: 32px;
}
.lf-rmap__header h2 {
    font-size: clamp(22px, 2.8vw, 34px);
    font-weight: 800;
    color: var(--lf-r-ink);
    letter-spacing: -0.02em;
    margin: 0;
}
.lf-rmap__layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
    align-items: start;
}
.lf-rmap__info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.lf-rmap__info-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.lf-rmap__info-item svg {
    color: var(--lf-r-purple);
    flex-shrink: 0;
    margin-top: 2px;
}
.lf-rmap__info-item div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.lf-rmap__info-item strong {
    font-size: 13px;
    font-weight: 700;
    color: var(--lf-r-ink);
}
.lf-rmap__info-item span {
    font-size: 13px;
    color: var(--lf-r-muted);
}
.lf-rmap__directions-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--lf-r-purple);
    color: #fff;
    padding: 12px 18px;
    border-radius: var(--lf-r-radius-sm);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s;
    margin-top: 4px;
    width: fit-content;
}
.lf-rmap__directions-btn:hover { background: var(--lf-r-purple-dark); }

.lf-rmap__map-container {
    height: 380px;
    border-radius: var(--lf-r-radius);
    overflow: hidden;
    border: 1px solid var(--lf-r-border);
}

/* ================================================================
   RESEÑAS
   ================================================================ */
.lf-rreviews {
    background: var(--lf-r-navy);
    padding-block: clamp(56px, 7vw, 96px);
}
.lf-rreviews__header {
    margin-bottom: clamp(32px, 4vw, 48px);
}
.lf-rreviews__header .lf-r-eyebrow { color: rgba(164,80,201,0.9) !important; }
.lf-rreviews__header h2 {
    font-size: clamp(22px, 2.8vw, 34px);
    font-weight: 800;
    color: #fff !important;   /* Kit override: Elementor aplica navy oscuro a h2 */
    letter-spacing: -0.02em;
    margin: 0;
}
.lf-rreviews__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.lf-rreview-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--lf-r-radius);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.lf-rreview-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.lf-rreview-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
}
.lf-rreview-card__meta svg {
    background: #fff;
    border-radius: 50%;
    padding: 2px;
    flex-shrink: 0;
}
.lf-rreview-card__meta strong {
    font-size: 13px;
    font-weight: 700;
    color: #fff !important;   /* Kit override */
}
.lf-rreview-card__stars { font-size: 12px; color: #FBBC05; }
.lf-rreview-card__title {
    font-size: 16px;
    font-weight: 700;
    color: #fff !important;   /* Kit override: Elementor aplica navy oscuro a headings */
    margin: 0;
    line-height: 1.3;
}
.lf-rreview-card__text {
    font-size: 13px;
    color: rgba(255,255,255,0.55);
    line-height: 1.65;
    margin: 0;
    flex: 1;
}

/* ================================================================
   FORMULARIO DE CONSULTA
   ================================================================ */
.lf-rform {
    background: var(--lf-r-bg-alt);
    padding-block: clamp(56px, 7vw, 96px);
}
.lf-rform__header {
    max-width: 600px;
    margin-bottom: clamp(36px, 5vw, 52px);
}
.lf-rform__header h2 {
    font-size: clamp(24px, 3vw, 40px);
    font-weight: 800;
    color: var(--lf-r-ink);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 12px;
}
.lf-rform__subtitle {
    font-size: 15px;
    color: var(--lf-r-muted);
    line-height: 1.65;
    margin: 0;
}

.lf-rform__form {
    max-width: 760px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.lf-rform__row {
    display: grid;
    gap: 20px;
}
.lf-rform__row--2 { grid-template-columns: 1fr 1fr; }
.lf-rform__row--3 { grid-template-columns: 1fr 1fr 1fr; }

.lf-rform__field { display: flex; flex-direction: column; gap: 6px; }
.lf-rform__label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lf-r-muted);
}
.lf-rform__label span { color: var(--lf-r-purple); }
/* Hint "(opcional)" en labels del formulario */
.lf-rform__label-hint {
    font-weight: 400;
    font-size: 10px;
    color: var(--lf-r-muted);
    text-transform: none;
    letter-spacing: 0;
    margin-left: 4px;
}
.lf-rform__input,
.lf-rform__select,
.lf-rform__textarea {
    border: 1.5px solid var(--lf-r-border);
    border-radius: var(--lf-r-radius-sm);
    padding: 12px 16px;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    color: var(--lf-r-ink);
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    box-sizing: border-box;
}
.lf-rform__input:focus,
.lf-rform__select:focus,
.lf-rform__textarea:focus {
    outline: none;
    border-color: var(--lf-r-purple);
    box-shadow: 0 0 0 3px rgba(164,80,201,0.12);
}
.lf-rform__input::placeholder,
.lf-rform__textarea::placeholder { color: var(--lf-r-subtle); }
.lf-rform__textarea { resize: vertical; min-height: 120px; }

.lf-rform__footer {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.lf-rform__submit {
    background: var(--lf-r-purple);
    color: #fff;
    border: none;
    border-radius: var(--lf-r-radius-sm);
    padding: 14px 32px;
    font-size: 15px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}
.lf-rform__submit:hover {
    background: var(--lf-r-purple-dark);
    transform: translateY(-1px);
}
.lf-rform__submit:disabled { opacity: 0.6; cursor: not-allowed; }
.lf-rform__privacy {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--lf-r-subtle);
    margin: 0;
}
.lf-rform__privacy svg { flex-shrink: 0; }

/* Mensajes de estado */
.lf-rform__success,
.lf-rform__error {
    padding: 16px 20px;
    border-radius: var(--lf-r-radius-sm);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 600;
}
.lf-rform__success {
    background: rgba(52, 168, 83, 0.1);
    border: 1px solid rgba(52, 168, 83, 0.3);
    color: #1e7e34;
}
.lf-rform__success svg { color: #34A853; flex-shrink: 0; }
.lf-rform__success p { margin: 0; }
.lf-rform__error {
    background: rgba(234, 67, 53, 0.08);
    border: 1px solid rgba(234, 67, 53, 0.25);
    color: #c0392b;
}
.lf-rform__error p { margin: 0; }

/* WhatsApp alt */
.lf-rform__alt {
    max-width: 760px;
    margin-top: 28px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding-top: 24px;
    border-top: 1px solid var(--lf-r-border);
}
.lf-rform__alt-label {
    font-size: 14px;
    color: var(--lf-r-muted);
}
.lf-rform__whatsapp {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #25D366;
    color: #fff;
    padding: 10px 20px;
    border-radius: var(--lf-r-radius-sm);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s;
}
.lf-rform__whatsapp:hover { background: #1ebe5a; }

/* ================================================================
   BOTÓN FLOTANTE WhatsApp — ocultar en esta página
   El widget ya tiene el CTA de WhatsApp integrado y dinámico.
   Duplicar el botón flotante crea ruido visual y compite con el CTA.
   reserva.css solo carga en esta página, así que es seguro ocultar.
   ================================================================ */

/* Elementor Floating Buttons (Pro 3.19+) */
.e-contact-buttons,
.e-contact-buttons__container { display: none !important; }

/* Buttonizer plugin */
.buttonizer-container,
.buttonizer { display: none !important; }

/*
 * NOTA: eliminados los selectores genéricos
 *   .elementor-widget-button.elementor-sticky
 *   .elementor-button-wrapper a[href*="wa.me"]
 * Eran demasiado amplios y ocultaban el botón "Haz tu reserva"
 * del header sticky. Los botones flotantes de WA quedan
 * cubiertos por .e-contact-buttons y .buttonizer arriba.
 */

/* ================================================================
   ELEMENTOR KIT OVERRIDE
   ─────────────────────────────────────────────────────────────────
   El Kit global aplica a TODO <button>:
     background-color: #A450C9 | padding: 20px 30px | border-radius: 100px
   Como reserva.css se carga solo en esta página, los selectores
   simples (.clase) con !important bastan para ganar al Kit.
   El CSS de Elementor no usa !important, así que el nuestro gana.
   ================================================================ */

/* Galería — botones de navegación */
.lf-rh__nav {
    background: rgba(255,255,255,0.15) !important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.2) !important;
    color: #fff !important;
    border-radius: 50% !important;
    padding: 0 !important;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    min-height: unset !important;
    box-shadow: none !important;
}
.lf-rh__nav:hover {
    background: rgba(255,255,255,0.28) !important;
}
.lf-rh__nav--prev { left: 16px; }
.lf-rh__nav--next { right: 16px; }

/* Galería — dots de paginación */
.lf-rh__dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.4) !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    min-height: unset !important;
    box-shadow: none !important;
}
.lf-rh__dot.is-active,
.lf-rh__dot:hover {
    background: #fff !important;
    transform: scale(1.3);
}

/* Widget — stepper +/- */
.lf-rh__step-btn {
    width: 40px;
    height: 42px;
    background: var(--lf-r-bg) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    font-size: 18px;
    font-weight: 600;
    color: var(--lf-r-ink) !important;
    cursor: pointer;
    flex-shrink: 0;
    min-height: unset !important;
    box-shadow: none !important;
}
.lf-rh__step-btn:hover {
    background: rgba(164,80,201,0.08) !important;
    color: var(--lf-r-purple) !important;
}

/* Calculadora standalone — stepper +/- */
.lf-rcalc__btn {
    width: 44px;
    height: 46px;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    color: rgba(255,255,255,0.7) !important;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    min-height: unset !important;
    transition: background 0.15s, color 0.15s;
    box-shadow: none !important;
}
.lf-rcalc__btn:hover {
    background: rgba(164,80,201,0.2) !important;
    color: var(--lf-r-purple) !important;
}

/* Calendario — navegación anterior/siguiente mes */
.lf-rcal__nav {
    background: var(--lf-r-bg) !important;
    border: 1px solid var(--lf-r-border) !important;
    border-radius: 50% !important;
    padding: 0 !important;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--lf-r-ink) !important;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
    margin-top: 8px;
    min-height: unset !important;
    box-shadow: none !important;
}
.lf-rcal__nav:hover {
    background: rgba(164,80,201,0.08) !important;
    color: var(--lf-r-purple) !important;
    border-color: var(--lf-r-purple) !important;
}

/* Formulario — botón submit */
.lf-rform__submit {
    background: var(--lf-r-purple) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--lf-r-radius-sm) !important;
    padding: 14px 32px !important;
    font-size: 15px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    min-height: unset !important;
    box-shadow: none !important;
}
.lf-rform__submit:hover {
    background: var(--lf-r-purple-dark) !important;
    transform: translateY(-1px);
}
.lf-rform__submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */

/* ── Tablet (≤1024px) — layout apilado, galería más compacta ── */
@media (max-width: 1024px) {
    .lf-rh {
        grid-template-columns: 1fr;
        min-height: unset;
        /* En tablet/móvil el nav flota SOBRE la galería (overlay).
           Sin padding-top desaparece el recuadro oscuro entre nav y foto. */
        padding-top: 0;
    }
    /* Admin bar en tablet tampoco necesita padding-top por el mismo motivo */
    .admin-bar .lf-rh {
        padding-top: 0;
    }
    .lf-rh__gallery {
        height: 360px;          /* galería compacta en tablet */
        min-height: unset;
    }
    .lf-rh__widget {
        border-left: none;
        border-top: 1px solid var(--lf-r-border);
        align-self: auto;
    }
    .lf-rh__widget-inner { position: static; }

    .lf-rpricing__layout {
        grid-template-columns: 1fr;
    }
    .lf-rcalc { position: static; }

    .lf-rmap__layout {
        grid-template-columns: 1fr;
    }
    .lf-rmap__map-container { height: 300px; }
}

/* ── Mobile (≤768px) — galería muy compacta, widget visible sin scroll ── */
@media (max-width: 768px) {
    /* Hero: galería corta para que el widget sea visible sin scrollear */
    .lf-rh__gallery {
        height: 260px;
    }

    /* Widget: acento superior + sombra para separar del contenido */
    .lf-rh__widget {
        border-top: 3px solid var(--lf-r-purple);
        box-shadow: 0 -2px 16px rgba(0,0,0,0.06);
    }

    /* Widget: padding compacto en mobile */
    .lf-rh__widget-inner {
        padding: 14px 16px;
    }
    .lf-rh__widget-top {
        margin-bottom: 6px;
    }

    /* Precio ancla: más pequeño y compacto */
    .lf-rh__widget-price {
        margin-bottom: 10px;
        padding-bottom: 10px;
    }
    .lf-rh__price-amount {
        font-size: 22px;
    }
    .lf-rh__price-hint {
        font-size: 11px;
    }

    /* Labels: forzar estilos compactos sobre override del Kit */
    .lf-rh__label {
        font-size: 9px !important;
        font-weight: 700 !important;
        letter-spacing: 0.08em !important;
        color: var(--lf-r-muted) !important;
        text-transform: uppercase !important;
        margin-bottom: 3px;
    }

    /* Inputs: más compactos en altura */
    .lf-rh__input {
        padding: 7px 8px;
        font-size: 13px;
    }

    /* Stepper personas: altura coherente con inputs de fecha */
    .lf-rh__stepper {
        height: 36px;
    }
    .lf-rh__step-btn {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
    .lf-rh__step-input {
        height: 36px;
        font-size: 14px;
    }

    /* Fechas: 2 columnas sin la flecha */
    .lf-rh__dates-row {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .lf-rh__dates-arrow {
        display: none;
    }

    /* Secciones generales */
    .lf-rzones__grid {
        grid-template-columns: 1fr 1fr;
    }
    .lf-rfeatures__grid {
        grid-template-columns: 1fr;
    }
    .lf-rreviews__grid {
        grid-template-columns: 1fr;
    }
    .lf-rcal__months {
        grid-template-columns: 1fr;
    }
    .lf-rform__row--2,
    .lf-rform__row--3 {
        grid-template-columns: 1fr;
    }
    /* Stats: grid 2 col en móvil con huérfano centrado automáticamente */
    .lf-ri__stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 16px;
    }
    /* Cuando hay número impar de stats, el último queda centrado */
    .lf-ri__stat:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        max-width: 160px;
        margin: 0 auto;
    }
}

/* ── Móvil pequeño (≤480px) ── */
@media (max-width: 480px) {
    .lf-rh__gallery {
        height: 220px;          /* aún más compacta en móviles pequeños */
    }
    /* Fechas: mantener 2 col incluso en móvil pequeño — ahorramos ~50px de scroll */
    .lf-rh__dates-row {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    .lf-rzones__grid {
        grid-template-columns: 1fr;
    }
    .lf-rform__footer {
        flex-direction: column;
        align-items: flex-start;
    }
    .lf-rform__submit { width: 100%; }
}

/* ================================================================
   HEADER — Overrides para la página de reserva
   ================================================================
   El header usa fondo transparente en todo el site.
   En home queda premium porque el hero es navy oscuro.
   En reservas el fondo blanco lo deja plano: corregimos
   añadiendo un fondo blanco sólido con sombra sutil y un
   acento inferior que ancla la marca sin ser intrusivo.
   ================================================================ */
#site-header {
    background: #ffffff !important;
    border-bottom: 2px solid transparent;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
    /* Acento de color en el borde inferior — refuerzo de marca */
    border-image: linear-gradient(
        90deg,
        var(--lf-r-purple) 0%,
        rgba(164, 80, 201, 0.3) 60%,
        transparent 100%
    ) 1;
    transition: box-shadow 0.2s;
}

/* Asegurar que el logo sea siempre visible sobre fondo claro */
#site-header .site-branding,
#site-header .site-logo {
    opacity: 1 !important;
}

/* Hamburger / nav links: color consistente con la marca */
#site-header .elementor-nav-menu a,
#site-header .e-n-menu a {
    color: var(--lf-r-ink) !important;
}
#site-header .elementor-nav-menu a:hover,
#site-header .e-n-menu a:hover {
    color: var(--lf-r-purple) !important;
}

/* ================================================================
   FLATPICKR — Tema La Finquita
   ─────────────────────────────────────────────────────────────────
   El popup se adjunta a document.body vía appendTo:body en el JS,
   escapando cualquier overflow:hidden de contenedores Elementor.
   Por ello los selectores usan la clase custom .lf-fp-cal (añadida
   con la opción className de flatpickr) en lugar de .lf-reserva-page.

   Variables CSS de marca usadas como valores literales porque el
   popup está fuera del scope donde se declaran las custom properties.
   ================================================================ */

/* ── Contenedor del calendario ── */
.lf-fp-cal {
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px;
    border: 1px solid rgba(26, 26, 46, 0.12) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    background: #fff !important;
    padding: 8px !important;
    /* z-index alto para superar cualquier elemento de Elementor */
    z-index: 99999 !important;
}

/* Flecha del popover */
.lf-fp-cal.arrowTop::before,
.lf-fp-cal.arrowTop::after {
    border-bottom-color: rgba(26, 26, 46, 0.12) !important;
}
.lf-fp-cal.arrowBottom::before,
.lf-fp-cal.arrowBottom::after {
    border-top-color: rgba(26, 26, 46, 0.12) !important;
}

/* ── Cabecera: mes + año + flechas ── */
.lf-fp-cal .flatpickr-months {
    padding: 0 0 8px;
    border-bottom: 1px solid rgba(26, 26, 46, 0.1);
    margin-bottom: 4px;
    align-items: center;
}
.lf-fp-cal .flatpickr-months .flatpickr-month {
    height: 32px;
    color: #1a1a2e;
    background: transparent !important;
}
.lf-fp-cal .flatpickr-current-month {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a2e;
    letter-spacing: -0.01em;
    padding: 0;
    line-height: 1;
}
.lf-fp-cal .flatpickr-current-month .flatpickr-monthDropdown-months {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #1a1a2e;
    background: transparent;
    border: none;
    padding: 0;
    appearance: none;
    cursor: pointer;
}
.lf-fp-cal .flatpickr-current-month .flatpickr-monthDropdown-months:hover {
    color: #A450C9;
}
.lf-fp-cal .flatpickr-current-month input.cur-year {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #1a1a2e;
    background: transparent;
}

/* Botones prev/next de mes */
.lf-fp-cal .flatpickr-months .flatpickr-prev-month,
.lf-fp-cal .flatpickr-months .flatpickr-next-month {
    color: #5a5a72;
    fill: #5a5a72;
    padding: 6px;
    border-radius: 6px;
    transition: background 0.18s, color 0.18s, fill 0.18s;
    height: 32px;
    top: auto;
    position: relative;
}
.lf-fp-cal .flatpickr-months .flatpickr-prev-month:hover,
.lf-fp-cal .flatpickr-months .flatpickr-next-month:hover {
    color: #A450C9 !important;
    fill: #A450C9 !important;
    background: rgba(164, 80, 201, 0.08) !important;
}
.lf-fp-cal .flatpickr-months .flatpickr-prev-month svg,
.lf-fp-cal .flatpickr-months .flatpickr-next-month svg {
    width: 14px;
    height: 14px;
}

/* ── Días de la semana (cabecera del grid) ── */
.lf-fp-cal .flatpickr-weekdays {
    background: transparent !important;
    margin-bottom: 2px;
}
.lf-fp-cal span.flatpickr-weekday {
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9090a8;
    background: transparent !important;
}

/* ── Días del mes — estado base ──
 * NO sobreescribir width/max-width: flatpickr los calcula como
 * calc(100%/7) en función del contenedor. Interferir causa el
 * bug de 9 celdas por fila.
 */
.lf-fp-cal .flatpickr-day {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #1a1a2e;
    border-radius: 6px;
    border: none !important;
    height: 34px;
    line-height: 34px;
    transition: background 0.15s, color 0.15s;
}

/* Hover en días disponibles */
.lf-fp-cal .flatpickr-day:hover:not(.flatpickr-disabled):not(.selected):not(.startRange):not(.endRange) {
    background: rgba(164, 80, 201, 0.1) !important;
    color: #A450C9;
    border: none !important;
}

/* Hoy */
.lf-fp-cal .flatpickr-day.today {
    background: rgba(164, 80, 201, 0.1) !important;
    color: #A450C9 !important;
    font-weight: 700;
    border: 1.5px solid rgba(164, 80, 201, 0.3) !important;
}
.lf-fp-cal .flatpickr-day.today:hover {
    background: rgba(164, 80, 201, 0.18) !important;
    border-color: #A450C9 !important;
}

/* Día seleccionado (único o inicio/fin de rango) */
.lf-fp-cal .flatpickr-day.selected,
.lf-fp-cal .flatpickr-day.startRange,
.lf-fp-cal .flatpickr-day.endRange {
    background: #A450C9 !important;
    color: #fff !important;
    font-weight: 700;
    border: none !important;
    box-shadow: 0 2px 8px rgba(164, 80, 201, 0.4);
}
.lf-fp-cal .flatpickr-day.selected:hover,
.lf-fp-cal .flatpickr-day.startRange:hover,
.lf-fp-cal .flatpickr-day.endRange:hover {
    background: #8a3aab !important;
    color: #fff !important;
}

/* Rango entre inicio y fin */
.lf-fp-cal .flatpickr-day.inRange {
    background: rgba(164, 80, 201, 0.12) !important;
    color: #A450C9 !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* ── FECHAS BLOQUEADAS ── */
.lf-fp-cal .flatpickr-day.flatpickr-disabled,
.lf-fp-cal .flatpickr-day.flatpickr-disabled:hover {
    color: rgba(144, 144, 168, 0.6) !important;
    background: rgba(0, 0, 0, 0.03) !important;
    text-decoration: line-through;
    text-decoration-color: rgba(144, 144, 168, 0.5);
    text-decoration-thickness: 1px;
    cursor: not-allowed !important;
    border: none !important;
    opacity: 1 !important;
}

/* Días de mes anterior/siguiente (relleno de grid) */
.lf-fp-cal .flatpickr-day.prevMonthDay,
.lf-fp-cal .flatpickr-day.nextMonthDay {
    color: rgba(144, 144, 168, 0.35);
}

/* ── Input de fecha cuando flatpickr está activo ── */
.lf-reserva-page .flatpickr-input.active,
.lf-reserva-page .flatpickr-input:focus {
    border-color: #A450C9;
    box-shadow: 0 0 0 3px rgba(164, 80, 201, 0.1);
    outline: none;
}
.lf-reserva-page .flatpickr-input[type="text"]::-webkit-calendar-picker-indicator {
    display: none;
}

/* ── Aviso de fecha bloqueada — alerta inline en el widget ── */
.lf-date-blocked-warning {
    display: none; /* JS lo muestra/oculta vía .is-visible */
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #b45309;
    background: #fef9c3;
    border: 1px solid #fde047;
    border-radius: 8px;
    padding: 7px 10px;
    margin-top: -6px;
    margin-bottom: 8px;
    line-height: 1.45;
}
.lf-date-blocked-warning.is-visible {
    display: flex;
    animation: lf-fadein 0.2s ease;
}
.lf-date-blocked-warning svg {
    flex-shrink: 0;
    color: #ca8a04;
}

@keyframes lf-fadein {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive: flatpickr en móvil ── */
@media (max-width: 480px) {
    .lf-fp-cal {
        font-size: 12px;
    }
    .lf-fp-cal .flatpickr-day {
        height: 30px;
        line-height: 30px;
        font-size: 11px;
    }
}

/* ================================================================
   FAQ — Preguntas Frecuentes
   ================================================================
   Accordion accesible: botones nativos + aria-expanded.
   Animación de apertura con max-height + grid rows interpolation.
   Sin JS inline — toggle gestionado por reserva.js.
   ================================================================ */

.lf-rfaq {
    padding: 80px 0;
    background: #f8f7f4;
}

.lf-rfaq__header {
    text-align: center;
    margin-bottom: 48px;
}

.lf-rfaq__header h2 {
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    color: var(--lf-r-navy);
    margin-top: 10px;
    font-weight: 700;
}

/* ── Lista de items ── */
.lf-rfaq__list {
    max-width: 780px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Item contenedor ── */
.lf-rfaq__item {
    background: #fff;
    border: 1px solid rgba(26,26,46,0.1);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.lf-rfaq__item:has(.lf-rfaq__question[aria-expanded="true"]),
.lf-rfaq__item.is-open {
    border-color: rgba(164,80,201,0.3);
    box-shadow: 0 4px 20px rgba(164,80,201,0.08);
}

/* ── Botón pregunta ──
   Reset completo del Elementor Kit, que aplica background:#A450C9 +
   border-radius:100px + padding:20px 30px + white-space:nowrap a TODOS
   los <button>. Misma solución que .lf-faq-item__trigger en homepage.css.
   Especificidad (0,2,1) + !important supera el Kit (0,1,1). */
body.lf-reserva-page .lf-rfaq__question,
.lf-rfaq__question {
    width:            100% !important;
    display:          flex !important;
    align-items:      center !important;
    justify-content:  space-between !important;
    gap:              16px !important;
    padding:          20px 24px !important;
    background:       transparent !important;
    background-color: transparent !important;
    border:           none !important;
    border-radius:    0 !important;
    box-shadow:       none !important;
    cursor:           pointer !important;
    text-align:       left !important;
    font-family:      inherit !important;
    font-size:        1rem !important;
    font-weight:      600 !important;
    color:            var(--lf-r-navy) !important;
    line-height:      1.4 !important;
    white-space:      normal !important;
    overflow-wrap:    break-word !important;
    word-break:       break-word !important;
    text-transform:   none !important;
    letter-spacing:   normal !important;
    min-height:       unset !important;
    min-width:        0 !important;
    max-width:        100% !important;
    box-sizing:       border-box !important;
    transition:       background 0.15s ease !important;
}

.lf-rfaq__question:hover {
    background: rgba(164,80,201,0.04);
}

.lf-rfaq__question:focus-visible {
    outline: 2px solid var(--lf-r-purple);
    outline-offset: -2px;
    border-radius: 11px;
}

.lf-rfaq__question-text {
    flex: 1;
}

/* ── Icono chevron ── */
.lf-rfaq__icon {
    flex-shrink: 0;
    color: var(--lf-r-purple);
    transition: transform 0.25s ease;
    display: flex;
    align-items: center;
}

.lf-rfaq__question[aria-expanded="true"] .lf-rfaq__icon {
    transform: rotate(180deg);
}

/* ── Panel de respuesta ── */
.lf-rfaq__answer {
    /* Usamos grid rows para transición fluida — más eficiente que max-height */
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}

.lf-rfaq__answer:not([hidden]) {
    grid-template-rows: 1fr;
}

/* [hidden] nativo: el navegador no lo renderiza.
   Necesitamos mantener display:grid para que la transición funcione
   al abrir, así que sobreescribimos [hidden] con visibility:hidden. */
.lf-rfaq__answer[hidden] {
    display: grid;
    visibility: hidden;
}

.lf-rfaq__answer:not([hidden]) {
    visibility: visible;
}

.lf-rfaq__answer-inner {
    overflow: hidden;
    padding: 0 24px 20px;
}

.lf-rfaq__answer-inner p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--lf-r-text-muted);
}

.lf-rfaq__answer-inner strong {
    color: var(--lf-r-navy);
    font-weight: 600;
}

/* ── CTA al pie del FAQ ── */
.lf-rfaq__cta-note {
    text-align: center;
    margin-top: 36px;
    font-size: 0.9rem;
    color: var(--lf-r-text-muted);
}

.lf-rfaq__cta-link {
    color: var(--lf-r-purple);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease;
}

.lf-rfaq__cta-link:hover {
    border-color: var(--lf-r-purple);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .lf-rfaq {
        padding: 56px 0;
    }
    .lf-rfaq__question {
        padding: 16px 18px;
        font-size: 0.95rem;
    }
    .lf-rfaq__answer-inner {
        padding: 0 18px 16px;
    }
}

@media (max-width: 480px) {
    .lf-rfaq__question {
        padding: 14px 16px;
        font-size: 0.9rem;
    }
    .lf-rfaq__answer-inner {
        padding: 0 16px 14px;
    }
    .lf-rfaq__answer-inner p {
        font-size: 0.9rem;
    }
}

/* ================================================================
   FORMULARIO — mejoras v2.4.0
   · Honeypot visually-hidden
   · Campo requerido: asterisco de marca
   · Error state por campo (inline error message)
   · Consent GDPR checkbox
   · Submit: icono + spinner SVG animado
   ================================================================ */

/* ── Honeypot: fuera del viewport, invisible para usuarios reales ── */
.lf-rform__honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* ── Asterisco de campo requerido ── */
.lf-rform__required {
    color: var(--lf-r-purple);
    margin-left: 2px;
    font-weight: 700;
}

/* ── Error state por campo ── */
.lf-rform__field--error .lf-rform__input,
.lf-rform__field--error .lf-rform__textarea,
.lf-rform__field--error .lf-rform__select {
    border-color: #ef4444;
    background: #fef2f2;
    box-shadow: 0 0 0 3px rgba(239,68,68,0.12);
}

.lf-rform__field--error .lf-rform__input:focus,
.lf-rform__field--error .lf-rform__textarea:focus {
    border-color: #ef4444;
    outline: 2px solid rgba(239,68,68,0.35);
    outline-offset: 1px;
}

/* Mensaje inline de error bajo el campo */
.lf-rform__inline-error {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    font-weight: 500;
    color: #dc2626;
    line-height: 1.4;
}

/* ── Consent checkbox GDPR ── */
.lf-rform__field--consent {
    margin-top: 4px;
}

.lf-rform__consent-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    line-height: 1.5;
}

.lf-rform__consent-cb {
    flex-shrink: 0;
    margin-top: 3px;
    width: 18px;
    height: 18px;
    accent-color: var(--lf-r-purple);
    cursor: pointer;
}

.lf-rform__consent-text {
    font-size: 13px;
    color: var(--lf-r-text-muted);
}

.lf-rform__consent-link {
    color: var(--lf-r-purple);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s;
}
.lf-rform__consent-link:hover {
    border-color: var(--lf-r-purple);
}

/* Error state en el consent */
.lf-rform__field--error .lf-rform__consent-label {
    color: #dc2626;
}

/* ── Submit button: icono + spinner ── */
.lf-rform__submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.lf-rform__submit-icon {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.lf-rform__submit:hover:not(:disabled) .lf-rform__submit-icon {
    transform: translateX(2px) translateY(-2px);
}

/* Spinner SVG rotatorio */
.lf-rform__spinner {
    animation: lf-spin 0.8s linear infinite;
}
@keyframes lf-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}