:root {
    color-scheme: light;
    --ink: #10182b;
    --muted: #667085;
    --line: #e4e8f5;
    --soft: #f6f7fd;
    --bg: #fffdf9;
    --white: #ffffff;
    --brand: #3b64f0;
    --brand-dark: #2947bf;
    --brand-purple: #8b5cf6;
    --brand-gradient: linear-gradient(135deg, var(--brand), var(--brand-purple));
    --warm: #ff8a5b;
    --warm-dark: #e56a38;
    --danger: #d9463f;
    --ok: #2f9e6e;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--ink);
}

h1, h2, h3,
.brand,
.button,
button {
    font-family: "Quicksand", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a {
    color: inherit;
}

.shell {
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
    padding: 20px 0 48px;
}

.top {
    margin-bottom: 32px;
}

.brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.brand img {
    display: block;
    height: 34px;
    width: auto;
}

.intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.intro-copy {
    display: grid;
    gap: 12px;
    max-width: 900px;
}

.intro-copy p {
    margin: 0;
}

.visit-info {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 4px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand);
    border-radius: 10px;
    background: var(--white);
}

.visit-info div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.visit-info span {
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 750;
}

.visit-info strong {
    color: var(--ink);
    font-size: 0.96rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.visit-note {
    color: var(--muted);
}

h1,
h2 {
    margin: 0 0 10px;
    letter-spacing: 0;
}

p {
    color: var(--muted);
}

.booking-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
    gap: 24px;
    align-items: start;
}

/* Solo se muestra en el calendario publico de un Anfitrion en plan free
   (ver booking.php); desaparece en plan 'paid'. */
.booking-branding {
    text-align: center;
    margin-top: 24px;
    font-size: 0.85rem;
    color: var(--muted);
}

.booking-branding a {
    color: var(--brand-dark);
    font-weight: 700;
    text-decoration: none;
}

.booking-side {
    display: grid;
    gap: 16px;
    align-content: start;
}

.calendar,
.slots,
.panel {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 14px 40px rgba(59, 100, 240, 0.08);
}

.calendar-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-bottom: 18px;
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 650;
}

.calendar-legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.legend-swatch {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 5px;
    border: 2px solid transparent;
    flex: 0 0 auto;
}

.legend-swatch.available {
    background: #eaf3ff;
    border-color: var(--brand);
}

.legend-swatch.closed {
    background: #fdecec;
    border-color: #e57373;
}

.legend-swatch.full {
    background: #f3f4f6;
    border-color: #c9ced6;
}

.legend-swatch.selected {
    background: #ffffff;
    border-color: var(--brand-purple);
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}

.weekdays,
.days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}

.weekdays span {
    color: var(--muted);
    font-weight: 700;
    text-align: center;
}

.day,
.empty {
    min-height: 74px;
    border-radius: 10px;
}

.day {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
    border: 1px solid var(--line);
    background: #ffffff;
    text-decoration: none;
}

.day:not(.closed):not(.full) {
    background: #eaf3ff;
    border-color: var(--brand);
    color: #163a8f;
}

.day:not(.closed):not(.full) small {
    color: #163a8f;
}

.day:hover {
    border-color: var(--brand-purple);
    box-shadow: inset 0 0 0 1px var(--brand-purple), 0 8px 18px rgba(139, 92, 246, 0.16);
}

.day small {
    color: inherit;
    font-weight: 750;
}

.day strong {
    color: inherit;
    font-size: 1.12rem;
    font-weight: 800;
}

.day.closed {
    background: #fdecec;
    border-color: #e57373;
    color: #7a1f1f;
}

.day.closed small {
    color: #7a1f1f;
}

.day.full:not(.closed) {
    background: #f3f4f6;
    border-color: #c9ced6;
    color: #555555;
}

.day.selected {
    border-color: var(--brand-purple);
    border-width: 2px;
    box-shadow: inset 0 0 0 1px var(--brand-purple), 0 0 0 3px rgba(139, 92, 246, 0.18);
}

.slot-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.slot,
.button,
button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 44px;
    border-radius: 10px;
    border: 1px solid var(--brand);
    background: var(--brand);
    color: #ffffff;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    padding: 10px 16px;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.slot:hover,
.button:hover,
button:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(59, 100, 240, 0.22);
}

.slot.booked {
    border-color: var(--line);
    background: var(--soft);
    color: var(--muted);
    cursor: default;
    box-shadow: none;
    transform: none;
}

.button.secondary {
    background: transparent;
    color: var(--brand-dark);
}

.button.block {
    width: 100%;
}

.button.danger {
    background: var(--danger);
    border-color: var(--danger);
}

.button.small {
    min-height: 36px;
    padding: 7px 13px;
    font-size: 0.92rem;
}

.button.warm {
    background: var(--warm);
    border-color: var(--warm);
    color: #ffffff;
}

.button.warm:hover {
    box-shadow: 0 8px 18px rgba(255, 138, 91, 0.35);
}

.panel {
    max-width: 680px;
    margin: 0 auto;
}

.panel.wide {
    max-width: none;
    margin-bottom: 22px;
}

.success {
    border-color: rgba(47, 158, 110, 0.25);
}

.summary {
    font-weight: 700;
    color: var(--ink);
}

.notice,
.muted {
    color: var(--muted);
}

.errors {
    border: 1px solid rgba(217, 70, 63, 0.25);
    background: #fff4f2;
    border-radius: 10px;
    padding: 10px 14px;
    margin: 16px 0;
}

.errors p {
    margin: 4px 0;
    color: var(--danger);
}

.form {
    display: grid;
    gap: 16px;
}

label {
    display: grid;
    gap: 7px;
    font-weight: 700;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px;
    font: inherit;
}

input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--brand-purple);
    outline-offset: 1px;
}

.actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.slot-date-form {
    display: grid;
    grid-template-columns: minmax(180px, 260px) auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 16px;
}

.slot-admin-list {
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
}

.slot-admin-row {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr) 150px;
    gap: 16px;
    align-items: center;
    min-height: 68px;
    padding: 14px 16px;
    background: #ffffff;
}

.slot-admin-row + .slot-admin-row {
    border-top: 1px solid var(--line);
}

.slot-admin-row.closed {
    background: #fbfcff;
}

.slot-admin-row.occupied {
    background: var(--soft);
}

.slot-admin-time {
    font-weight: 800;
    color: var(--ink);
    white-space: nowrap;
}

.slot-state {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    border-radius: 999px;
    padding: 4px 10px;
    border: 1px solid var(--line);
    color: var(--muted);
    font-weight: 750;
}

.slot-state.free {
    border-color: rgba(47, 158, 110, 0.24);
    color: var(--ok);
    background: rgba(47, 158, 110, 0.06);
}

.slot-state.closed {
    border-color: rgba(217, 70, 63, 0.22);
    color: var(--danger);
    background: rgba(217, 70, 63, 0.06);
}

.slot-admin-action {
    display: flex;
    justify-content: flex-end;
}

.cleanup-form {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(220px, 280px) minmax(220px, 1fr) auto;
    gap: 12px;
    align-items: end;
}

.admin-heading,
.visits-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.visits-panel {
    padding-top: 18px;
}

/* --- Gating de funciones por plan (panel de anfitrion) --- */

.feature-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 16px;
}

.feature-row-info strong {
    display: block;
    margin-bottom: 2px;
}

.feature-row-info p {
    margin: 0;
}

.feature-row-action {
    flex: 0 0 auto;
}

/* No usamos opacity aqui (a diferencia de .button.disabled): el enlace
   "Disponible en el plan de pago" tiene que seguir siendo legible y
   clicable, solo se distingue visualmente con el fondo atenuado de la fila. */
.feature-locked {
    background: var(--soft);
    border-style: dashed;
}

.reservation-groups {
    display: grid;
    gap: 24px;
}

.reservation-day h3 {
    margin: 0 0 10px;
    font-size: 1.1rem;
}

.reservation-list {
    border-left: 4px solid var(--brand-purple);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(59, 100, 240, 0.08);
}

.reservation-row {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 142px;
    gap: 22px;
    align-items: start;
    background: #ffffff;
    border: 1px solid var(--line);
    border-left: 0;
    padding: 18px 22px;
}

.reservation-time {
    font-weight: 800;
    color: var(--ink);
    white-space: nowrap;
}

.reservation-main {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.reservation-main strong {
    color: var(--brand-dark);
}

.reservation-main span,
.reservation-main p {
    margin: 0;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.reservation-main p {
    font-style: italic;
}

.reservation-side {
    display: grid;
    justify-items: end;
    gap: 10px;
}

.table-wrap {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    border-bottom: 1px solid var(--line);
    padding: 10px;
    text-align: left;
    vertical-align: top;
}

th {
    color: var(--muted);
    font-size: 0.9rem;
}

@media (max-width: 820px) {
    .booking-layout {
        grid-template-columns: 1fr;
    }

    .shell {
        width: min(100% - 20px, 1120px);
        padding-top: 16px;
    }

    .calendar,
    .slots,
    .panel {
        padding: 16px;
    }

    .visit-info {
        grid-template-columns: 1fr;
    }

    .day {
        min-height: 62px;
        padding: 8px;
    }

    .day small {
        font-size: 0.72rem;
    }
}

@media (max-width: 520px) {
    .weekdays,
    .days {
        gap: 5px;
    }

    .day {
        min-height: 54px;
    }

    .slot-grid {
        grid-template-columns: 1fr;
    }

    .reservation-row {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 16px;
    }

    .reservation-side {
        justify-items: start;
    }

    .slot-date-form,
    .slot-admin-row,
    .cleanup-form {
        grid-template-columns: 1fr;
    }

    .slot-admin-action {
        justify-content: flex-start;
    }
}

/* --- Cabecera / navegacion --- */

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nav-links {
    display: flex;
    gap: 18px;
    align-items: center;
}

.nav-links a {
    text-decoration: none;
    font-weight: 700;
    color: var(--brand-dark);
}

.nav-links a.button {
    color: #ffffff;
}

.hint {
    display: block;
    color: var(--muted);
    font-weight: 500;
    font-size: 0.85rem;
    margin-top: 2px;
}

.notices {
    border: 1px solid rgba(47, 158, 110, 0.25);
    background: #eefaf2;
    border-radius: 10px;
    padding: 10px 14px;
    margin: 16px 0;
}

.notices p {
    margin: 4px 0;
    color: var(--ok);
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.availability-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}

.availability-day {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px;
    display: grid;
    gap: 8px;
}

.availability-day legend {
    font-weight: 800;
    padding: 0 4px;
}

.time-range {
    display: flex;
    align-items: center;
    gap: 8px;
}

.time-range input {
    min-width: 0;
}

.time-range span {
    color: var(--muted);
    font-weight: 700;
}

.calendar-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.button.disabled,
.button.secondary.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.day span.day {
    cursor: default;
}

@media (max-width: 820px) {
    .nav {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ======================================================================= *
 * Landing de marketing (pagina publica en /)
 * ======================================================================= */

.landing-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 1.05fr);
    gap: 40px;
    /* stretch (no center): la columna de la foto no tiene altura propia (todo
       su contenido es position:absolute), asi que se estira exactamente a la
       altura de fila que marca el bloque de texto de la izquierda. Es un
       ajuste automatico: si el texto cambia de longitud, la foto se adapta
       sola sin tocar numeros fijos aqui. */
    align-items: stretch;
    padding: 28px 0 56px;
}

.landing-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--soft);
    color: var(--brand-dark);
    font-weight: 750;
    font-size: 0.85rem;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 16px;
}

.landing-hero h1 {
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1.15;
    margin-bottom: 16px;
    color: var(--ink);
}

.landing-hero h1 .accent {
    color: var(--brand);
}

.landing-hero p.lead {
    font-size: 1.1rem;
    max-width: 46ch;
    margin-bottom: 26px;
}

.landing-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.landing-hero-actions .button {
    min-height: 50px;
    padding: 12px 24px;
    font-size: 1.02rem;
}

.landing-hero-actions .button.warm {
    background: var(--warm);
    border-color: var(--warm);
}

.landing-trust {
    margin-top: 22px;
    color: var(--muted);
    font-size: 0.9rem;
}

/* --- Columna de foto del hero + tarjeta de reserva simulada --- */

.hero-photo-col {
    position: relative;
    /* Sin altura propia a proposito: todo el contenido de aqui dentro es
       position:absolute (no empuja altura), asi que con .landing-hero en
       align-items:stretch esta columna toma automaticamente la misma altura
       que el bloque de texto de la izquierda (desde el badge hasta el texto
       de confianza), ni un pixel mas. Esto evita que la foto se vea
       "estirada" verticalmente por una columna mas alta de lo necesario. */
    border-radius: 20px;
    overflow: hidden;
    background-color: var(--soft);
    background-size: cover;
    /* Con la columna ahora mucho mas baja, su proporcion ancho:alto queda
       cerca de la de la foto original, asi que apenas hay que recortar;
       este valor solo ajusta el pequeño margen sobrante para mantener cara
       y movil bien encuadrados. */
    background-position: 30% 38%;
    box-shadow: 0 24px 60px rgba(59, 100, 240, 0.18);
}

.hero-photo-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(200deg, rgba(16, 24, 43, 0.05) 30%, rgba(16, 24, 43, 0.32) 75%, rgba(16, 24, 43, 0.48));
}

.booking-mock-card {
    position: absolute;
    top: 50%;
    left: 24px;
    transform: translateY(-50%);
    /* Estrecha a proposito (35-40% de la columna, mas alta que ancha): deja
       ver a la persona con claridad, incluido el movil en la mano. Muy
       compacta por dentro porque ahora la columna es mucho mas baja (ver
       .hero-photo-col): prioriza que quepa todo sin recortarse sobre
       mantener los tamaños de fuente de antes. */
    width: min(220px, 38%);
    /* Red de seguridad: si en algun navegador el bloque de texto de la
       izquierda saliera aun mas bajo de lo previsto, esto recorta la
       tarjeta en vez de desbordar por fuera de la foto (mejor perder un
       pixel de margen interno que romper el recuadro). */
    max-height: calc(100% - 20px);
    overflow: hidden;
    display: grid;
    align-content: start;
    gap: 7px;
    background: var(--white);
    border-radius: 14px;
    padding: 11px 12px;
    box-shadow: 0 20px 45px rgba(16, 24, 43, 0.28);
}

.booking-mock-header h3 {
    margin: 0;
    font-size: 0.95rem;
}

.booking-mock-header p {
    margin: 1px 0 0;
    color: var(--muted);
    font-size: 0.72rem;
}

.booking-mock-field {
    display: grid;
    gap: 3px;
}

.booking-mock-label {
    font-weight: 750;
    font-size: 0.64rem;
    color: var(--ink);
}

.booking-mock-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 5px 8px;
    font-weight: 650;
    font-size: 0.7rem;
    color: var(--ink);
}

.booking-mock-select svg {
    width: 12px;
    height: 12px;
    color: var(--muted);
    flex: 0 0 auto;
}

.booking-mock-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
    font-size: 0.66rem;
}

.booking-mock-cal-head strong {
    color: var(--ink);
}

.booking-mock-cal-head span {
    color: var(--muted);
    font-weight: 700;
}

.booking-mock-weekdays,
.booking-mock-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
}

.booking-mock-weekdays {
    margin-bottom: 2px;
}

.booking-mock-weekdays span {
    text-align: center;
    font-size: 0.5rem;
    font-weight: 700;
    color: var(--muted);
}

.booking-mock-day {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Alto fijo (no aspect-ratio:1): asi la altura del calendario no depende
       del ancho, tan reducido, de la tarjeta. Se ven como pildoras
       redondeadas en vez de circulos perfectos, y ocupan bastante menos que
       un grid de circulos a este ancho. */
    height: 15px;
    border-radius: 5px;
    font-size: 0.56rem;
    color: var(--ink);
}

.booking-mock-day.muted {
    color: #ccd1e2;
}

.booking-mock-day.selected {
    background: var(--brand);
    color: #ffffff;
    font-weight: 750;
}

.booking-mock-slots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
}

.booking-mock-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 4px 3px;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--ink);
}

.booking-mock-slot.selected {
    background: var(--brand);
    border-color: var(--brand);
    color: #ffffff;
}

/* Boton "Reservar cita": reutiliza el estilo de .button (mismo indigo,
   mismas esquinas redondeadas) pero mas pequeño, sin tocar la clase .button
   global (que usan los botones reales del sitio). */
.booking-mock-card .button {
    min-height: 32px;
    padding: 7px 10px;
    font-size: 0.72rem;
}

.hero-toast {
    position: absolute;
    /* Mas separado del borde/esquina redondeada que antes: right/bottom
       daban la sensacion de quedar a caballo del limite del contenedor. */
    right: 32px;
    bottom: 40px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 210px;
    background: var(--white);
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 16px 34px rgba(16, 24, 43, 0.28);
}

.hero-toast-icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(47, 158, 110, 0.14);
    color: var(--ok);
    display: grid;
    place-items: center;
}

.hero-toast-icon svg {
    width: 15px;
    height: 15px;
}

.hero-toast strong {
    display: block;
    font-size: 0.9rem;
    color: var(--ink);
}

.hero-toast span {
    display: block;
    margin-top: 2px;
    font-size: 0.78rem;
    color: var(--muted);
}

/* --- Animacion de flujo (CSS puro, sin video/carrusel) --- */

.flow-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 30px 24px 26px;
    box-shadow: 0 24px 60px rgba(59, 100, 240, 0.12);
}

.flow-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding-top: 10px;
}

.flow-track::before {
    content: "";
    position: absolute;
    top: 34px;
    left: 12%;
    right: 12%;
    height: 2px;
    background: repeating-linear-gradient(
        90deg,
        var(--line) 0 8px,
        transparent 8px 14px
    );
}

.flow-pulse {
    position: absolute;
    top: 28px;
    left: 12%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--warm);
    box-shadow: 0 0 0 5px rgba(255, 138, 91, 0.22);
    animation: flow-move 4.5s ease-in-out infinite;
}

.flow-node {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.flow-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--soft);
    border: 2px solid var(--line);
    display: grid;
    place-items: center;
    color: var(--brand);
    animation: flow-glow 4.5s ease-in-out infinite;
}

.flow-node:nth-child(2) .flow-icon {
    animation-delay: 1.5s;
}

.flow-node:nth-child(3) .flow-icon {
    animation-delay: 3s;
}

.flow-icon svg {
    width: 30px;
    height: 30px;
}

.flow-node span {
    font-size: 0.85rem;
    font-weight: 650;
    color: var(--muted);
    max-width: 15ch;
}

@keyframes flow-move {
    0% {
        left: 12%;
    }
    28% {
        left: 12%;
    }
    38% {
        left: 50%;
        transform: translateX(-50%);
    }
    62% {
        left: 50%;
        transform: translateX(-50%);
    }
    72% {
        left: 88%;
        transform: translateX(-100%);
    }
    97% {
        left: 88%;
        transform: translateX(-100%);
    }
    100% {
        left: 12%;
        transform: translateX(0);
    }
}

@keyframes flow-glow {
    0%, 22% {
        border-color: var(--line);
        color: var(--brand);
        box-shadow: none;
        transform: scale(1);
    }
    30%, 38% {
        border-color: var(--warm);
        color: var(--warm-dark);
        box-shadow: 0 0 0 6px rgba(255, 138, 91, 0.16);
        transform: scale(1.08);
    }
    50%, 100% {
        border-color: var(--line);
        color: var(--brand);
        box-shadow: none;
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .flow-pulse,
    .flow-icon {
        animation: none;
    }
}

/* --- Secciones genericas de la landing --- */

.landing-section {
    padding: 48px 0;
    border-top: 1px solid var(--line);
}

.landing-section-head {
    max-width: 640px;
    margin: 0 auto 32px;
    text-align: center;
}

.landing-section-head h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

/* --- Precios --- */

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    max-width: 1080px;
    margin: 0 auto;
}

/* Variante de 2 tarjetas (ver /panel/mejorar-plan: solo Multi y Premium,
   Basic no aparece porque no pasa por Stripe Checkout). */
.pricing-grid.pricing-grid-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 720px;
}

.price-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 28px 26px;
    display: grid;
    gap: 16px;
    align-content: start;
}

.price-card.featured {
    border-color: var(--brand-purple);
    box-shadow: 0 20px 50px rgba(139, 92, 246, 0.16);
    position: relative;
}

.price-card-badge {
    position: absolute;
    top: -13px;
    right: 24px;
    background: var(--brand-gradient);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 750;
    padding: 5px 12px;
    border-radius: 999px;
}

.price-card h3 {
    margin: 0;
    font-size: 1.15rem;
}

.price-amount {
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--ink);
}

.price-amount span {
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--muted);
}

.price-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
    color: var(--muted);
    font-size: 0.95rem;
}

.price-list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.price-list li svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    color: var(--ok);
}

/* --- Footer de la landing --- */

.landing-footer {
    border-top: 1px solid var(--line);
    padding-top: 28px;
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 0.9rem;
}

.landing-footer a {
    color: var(--brand-dark);
    font-weight: 700;
    text-decoration: none;
}

.landing-footer-links {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

@media (max-width: 860px) {
    .landing-hero {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    /* La foto pasa a ser un banner reducido encima del texto, en vez de una
       columna lateral a pantalla completa (el texto sigue antes en el HTML
       por orden de lectura/SEO; "order" solo cambia el orden visual). Aqui
       ya no hay una columna de texto al lado marcando la altura por
       stretch (grid-template-columns pasa a 1fr, cada item en su propia
       fila), asi que hace falta un alto fijo; la tarjeta es muy compacta
       ahora, así que le basta con bastante menos que antes. */
    .hero-photo-col {
        order: -1;
        height: 380px;
        border-radius: 16px;
    }

    .hero-toast {
        right: 16px;
        bottom: 16px;
        max-width: 200px;
        padding: 12px 14px;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
    }
}

@media (max-width: 520px) {
    /* En pantallas muy pequenas no cabe la tarjeta simulada con buen
       contraste: se deja solo la foto como banner limpio. */
    .hero-photo-col {
        height: 220px;
    }

    .booking-mock-card,
    .hero-toast {
        display: none;
    }
}

/* --- Paginas legales (aviso legal, privacidad, cookies) --- */

.legal-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 8px 0 40px;
}

.legal-page h1 {
    font-size: clamp(1.7rem, 3.4vw, 2.2rem);
    margin: 0 0 4px;
    color: var(--ink);
}

.legal-updated {
    color: var(--muted);
    font-size: 0.85rem;
    margin: 0 0 28px;
}

.legal-page h2 {
    font-size: 1.15rem;
    margin: 32px 0 12px;
    color: var(--ink);
}

.legal-page h3 {
    font-size: 1rem;
    margin: 22px 0 8px;
    color: var(--brand-dark);
}

.legal-page p,
.legal-page li {
    color: var(--ink);
    line-height: 1.6;
}

.legal-page ul {
    padding-left: 20px;
    margin: 0 0 16px;
}

.legal-page li {
    margin-bottom: 6px;
}

.legal-page a {
    color: var(--brand-dark);
    font-weight: 700;
}

.legal-cookie-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0 24px;
    font-size: 0.88rem;
}

.legal-cookie-table th,
.legal-cookie-table td {
    text-align: left;
    padding: 10px 12px;
    border: 1px solid var(--line);
    vertical-align: top;
}

.legal-cookie-table th {
    background: var(--soft);
    color: var(--ink);
    font-weight: 750;
}

.legal-cookie-table code {
    background: var(--soft);
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 0.85em;
}

@media (max-width: 640px) {
    .legal-cookie-table {
        font-size: 0.8rem;
    }

    .legal-cookie-table th,
    .legal-cookie-table td {
        padding: 8px;
    }
}

/* --- Enlaces legales en el footer --- */

.landing-footer-legal {
    width: 100%;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.82rem;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.landing-footer-legal a {
    color: var(--muted);
    font-weight: 600;
    text-decoration: none;
}

.landing-footer-legal a:hover {
    color: var(--brand-dark);
}

/* --- Banner de consentimiento de cookies --- */

.cookie-banner {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 1000;
    max-width: 720px;
    margin: 0 auto;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 20px 45px rgba(16, 24, 43, 0.22);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.cookie-banner[hidden] {
    display: none;
}

.cookie-banner-text {
    flex: 1 1 320px;
    margin: 0;
    font-size: 0.88rem;
    color: var(--ink);
    line-height: 1.5;
}

.cookie-banner-text a {
    color: var(--brand-dark);
    font-weight: 700;
}

.cookie-banner-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex: 0 0 auto;
}

.cookie-banner-actions .button {
    min-height: 38px;
    padding: 9px 16px;
    font-size: 0.85rem;
}

@media (max-width: 640px) {
    .cookie-banner {
        left: 10px;
        right: 10px;
        bottom: 10px;
        padding: 16px;
    }

    .cookie-banner-actions {
        width: 100%;
        justify-content: stretch;
    }

    .cookie-banner-actions .button {
        flex: 1 1 auto;
        text-align: center;
    }
}

/* --- Calendarios (multi-calendario por host) --- */

.calendar-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.calendar-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--white);
}

.calendar-list-row-link {
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease;
}

.calendar-list-row-link:hover {
    border-color: var(--brand);
}

.calendar-list-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.calendar-list-info strong {
    color: var(--ink);
}

.calendar-list-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.calendar-inactive {
    opacity: 0.6;
}

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--soft);
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    width: fit-content;
}

/* --- Logo del negocio --- */

.logo-preview {
    max-width: 160px;
    max-height: 90px;
    object-fit: contain;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 8px;
    background: var(--white);
}

.booking-logo {
    max-width: 220px;
    max-height: 110px;
    object-fit: contain;
    margin-bottom: 16px;
}

.inline-form {
    display: inline-block;
    margin: 8px 0 0;
}