/* booking.css — estilos del modal de contacto.
   Extraido de propuesta.html el 25-ago-2026 para compartirlo entre paginas. */
  /* ─── BOOKING MODAL ─── */
  .booking-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: bookingFadeIn 0.25s ease-out;
  }
  .booking-modal[hidden] { display: none; }
  @keyframes bookingFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  .booking-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10,21,40,0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  /* Compacto a propósito: todo el modal tiene que caber en una pantalla,
     sin scroll, para que se vean las tres vías de golpe. */
  .booking-panel {
    position: relative;
    background: var(--navy-soft);
    border: 1px solid rgba(255,255,255,0.12);
    width: 100%;
    max-width: 560px;
    margin: auto;
    padding: 1.9rem 2.1rem 1.7rem;
    z-index: 1;
  }
  .booking-close {
    position: absolute;
    top: 0.8rem;
    right: 1rem;
    background: transparent;
    border: 0;
    color: var(--tx-3);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.5rem 0.8rem;
    transition: color 0.2s;
    font-family: inherit;
  }
  .booking-close:hover { color: var(--white); }

  .booking-step[hidden] { display: none; }

  .booking-header {
    text-align: center;
    margin-bottom: 1.5rem;
  }
  .booking-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 0.5rem;
  }
  .booking-title {
    font-size: clamp(1.5rem, 3.4vw, 2rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 0.8rem;
  }
  .booking-sub {
    font-size: 0.95rem;
    font-weight: 300;
    color: var(--tx-2);
    line-height: 1.55;
    max-width: 460px;
    margin: 0 auto;
  }

  .booking-section-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tx-3);
    margin-bottom: 1rem;
  }

  /* Calendario */
  .booking-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.5rem;
  }
  .booking-day {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    color: var(--white);
    padding: 0.8rem 0.2rem;
    font-family: inherit;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
  }
  .booking-day:hover:not(:disabled) {
    background: rgba(92,224,208,0.08);
    border-color: rgba(92,224,208,0.4);
  }
  .booking-day:disabled {
    opacity: 0.22;
    cursor: not-allowed;
  }
  .booking-day.is-selected {
    background: var(--lime);
    color: var(--black);
    border-color: var(--lime);
  }
  .booking-day-weekday {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.6;
  }
  .booking-day-number {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
  }
  .booking-day-month {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.5;
  }
  .booking-day.is-selected .booking-day-weekday,
  .booking-day.is-selected .booking-day-month { opacity: 0.85; }

  /* Slots */
  .booking-slots { margin-top: 2rem; }
  .booking-slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 0.5rem;
  }
  .booking-slot {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--white);
    padding: 0.75rem 0.4rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s, border-color 0.15s;
  }
  .booking-slot:hover {
    background: rgba(122, 167, 224,0.1);
    border-color: rgba(122, 167, 224,0.5);
  }
  .booking-slot.is-selected {
    background: var(--blue);
    color: var(--white);
    border-color: var(--blue);
  }

  /* Acciones */
  .booking-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.4rem;
  }
  .booking-plan-b {
    background: transparent;
    border: 0;
    color: var(--tx-3);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    text-decoration: underline;
    cursor: pointer;
    padding: 0.5rem;
    flex-basis: 100%;
    text-align: center;
  }
  .booking-plan-b:hover { color: var(--white); }

  /* ─── Vías de contacto (paso de entrada del modal) ─── */
  .vias {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.9rem;
    margin-top: 0.5rem;
  }
  .via {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 80px;
    padding: 0.85rem 0.9rem;
    text-align: center;
    text-decoration: none;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    cursor: pointer;
    font-family: inherit;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  }
  .via:hover {
    background: rgba(255,255,255,0.09);
    border-color: rgba(92,224,208,0.55);
    transform: translateY(-2px);
  }
  .via:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
  .via[hidden] { display: none; }
  .via-icono { color: var(--amber); line-height: 0; }
  .via-nombre { font-size: 0.98rem; font-weight: 700; color: var(--white); }
  .via-dato {
    font-size: 0.8rem; font-weight: 300; color: var(--tx-4);
    word-break: break-word; line-height: 1.35;
  }
  .via.copiado { border-color: var(--amber); background: rgba(92,224,208,0.12); }

  /* Separador entre los accesos directos y el formulario (como en Geser) */
  .booking-o {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: 1.15rem 0 1rem;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tx-4);
  }
  .booking-o::before,
  .booking-o::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.15);
  }

  .booking-copiar {
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    color: var(--amber);
    cursor: pointer;
    border-bottom: 1px solid rgba(92,224,208,0.4);
  }
  .booking-copiar:hover { color: var(--white); border-bottom-color: var(--white); }
  .booking-copiar.copiado { color: var(--white); border-bottom-color: var(--white); }
  .booking-directo-sep { margin: 0 0.6rem; opacity: 0.5; }

  .booking-o-bien {
    margin-top: 2rem;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 300;
    color: var(--tx-4);
  }
  .booking-o-bien .booking-plan-b {
    display: inline;
    flex-basis: auto;
    margin: 0;
    padding: 0;
    font-size: inherit;
    color: var(--amber);
    text-decoration: underline;
  }
  .booking-o-bien .booking-plan-b:hover { color: var(--white); }

  /* En móvil las vías siguen en dos columnas: apiladas el modal deja de
     caber en una pantalla, y son las dos acciones que más se pulsan. */
  @media (max-width: 560px) {
    .vias { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
    .via { min-height: 74px; padding: 0.75rem 0.4rem; gap: 0.15rem; }
    .via-nombre { font-size: 0.9rem; }
    .via-dato { font-size: 0.7rem; }
    .booking-modal { padding: 0.25rem; }
    .booking-panel { padding: 1.4rem 1.1rem 1.2rem; }
    .booking-title { font-size: 1.45rem; }
    .booking-directo { font-size: 0.82rem; margin-top: 0.8rem; padding-top: 0.8rem; }
    .booking-o { margin: 0.9rem 0 0.8rem; }
    /* el eyebrow no puede meterse debajo del botón de cerrar */
    .booking-eyebrow { padding: 0 2.2rem; }
  }

  /* Vía directa: escribirme sin formulario */
  .booking-directo {
    margin-top: 2.2rem;
    padding-top: 1.6rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    text-align: center;
    font-size: 0.9rem;
    font-weight: 300;
    color: var(--tx-4);
  }
  .booking-directo a {
    color: var(--amber);
    text-decoration: none;
    border-bottom: 1px solid rgba(92,224,208,0.4);
    padding-bottom: 1px;
  }
  .booking-directo a:hover { border-bottom-color: var(--amber); }

  .booking-modal .btn-primary:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }

  /* Form */
  .booking-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem 1.5rem;
  }
  .booking-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }
  .booking-field > span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tx-2);
  }
  .booking-field input,
  .booking-field textarea,
  .booking-field select {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--white);
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    padding: 0.7rem 0.9rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    resize: vertical;
  }
  /* El desplegable nativo pinta las opciones con los colores del sistema:
     se les fuerza fondo claro para que no salgan blanco sobre blanco. */
  .booking-field select option { background: #ffffff; color: #152a4e; }
  .booking-field input::placeholder,
  .booking-field textarea::placeholder { color: var(--tx-4); }
  .booking-field input:focus,
  .booking-field textarea:focus,
  .booking-field select:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(122, 167, 224,0.15);
    background: rgba(255,255,255,0.06);
  }
  .booking-field-full { grid-column: 1 / -1; }

  /* Volver más visible dentro del modal */
  .booking-modal .btn-secondary {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.18);
    color: var(--tx-1);
    transition: background 0.2s, color 0.2s, border-color 0.2s;
  }
  .booking-modal .btn-secondary:hover {
    background: rgba(255,255,255,0.16);
    border-color: rgba(255,255,255,0.45);
    color: var(--white);
  }

  /* Form minimal — solo email */
  .booking-form-minimal {
    max-width: 460px;
    margin: 0 auto;
  }
  .booking-form-minimal .booking-field input {
    font-size: 17px;
    padding: 1.1rem 1.2rem;
    text-align: center;
  }
  .booking-form-minimal .booking-field > span {
    text-align: center;
    font-size: 12px;
    margin-bottom: 0.2rem;
  }
  .booking-tiny {
    font-size: 12px;
    color: var(--tx-3);
    text-align: center;
    margin-top: 0.4rem;
    font-weight: 300;
    letter-spacing: 0.02em;
  }

  /* Éxito */
  .booking-success-mark {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--lime);
    color: var(--black);
    font-size: 2rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
  }

  /* Loading overlay */
  .booking-loading {
    position: absolute;
    inset: 0;
    background: rgba(10,10,10,0.92);
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    color: var(--tx-2);
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    z-index: 2;
  }
  .booking-loading[hidden] { display: none; }
  .booking-spinner {
    width: 40px;
    height: 40px;
    border: 2px solid rgba(92,224,208,0.2);
    border-top-color: var(--lime);
    border-radius: 50%;
    animation: bookingSpin 0.9s linear infinite;
  }
  @keyframes bookingSpin {
    to { transform: rotate(360deg); }
  }

  /* Lock body scroll cuando el modal está abierto */
  body.booking-open { overflow: hidden; }

  @media (max-width: 640px) {
    /* En móvil ya no ocupa la pantalla entera: es una tarjeta centrada que
       cabe de una vez, sin scroll. */
    .booking-panel {
      padding: 1.5rem 1.2rem 1.3rem;
      margin: auto;
    }
    .booking-form { grid-template-columns: 1fr; }
    .booking-days { grid-template-columns: repeat(4, 1fr); }
    /* Antes los botones iban pegados al fondo con una banda oscura, porque
       el modal era largo y había que hacer scroll a ciegas. Ahora cabe entero
       en una pantalla, así que la banda sobra (y era del negro viejo). */
    .booking-actions {
      flex-direction: column;
      gap: 0.7rem;
      margin-top: 1rem;
    }
    .booking-actions > .btn-primary,
    .booking-actions > .btn-secondary { width: 100%; }
  }
  @media (max-width: 380px) {
    .booking-days { grid-template-columns: repeat(3, 1fr); }
  }

  /* Ocultar cursor/breathing en touch y reducir movimiento */
  @media (prefers-reduced-motion: reduce) {
    .booking-modal { animation: none; }
    .booking-spinner { animation: bookingSpin 2s linear infinite; }
  }

/* ─────────────────────────────────────────────────────────────────────────
   Botones dentro del modal (26-ago-2026)
   .btn-primary y .btn-secondary solo estaban definidos en seo-local.html y
   en propuesta.html. En la portada el modal los usaba sin estilo y el botón
   de enviar salía como el gris por defecto del navegador. Se definen aquí,
   acotados al modal, para que no pisen los de cada página.
   ───────────────────────────────────────────────────────────────────────── */
.booking-modal .btn-primary {
  display: inline-block;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--amber);
  padding: 1.2rem 3.5rem;
  text-decoration: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.booking-modal .btn-primary:hover:not(:disabled) { opacity: 0.9; }
.booking-modal .btn-primary:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }

.booking-modal .btn-secondary {
  display: inline-block;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  background: none;
  border: 1px solid rgba(255,255,255,0.3);
  padding: 0.9rem 2rem;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.booking-modal .btn-secondary:hover { border-color: var(--white); }

/* ═══════════════════════════════════════════════════════════════════════
   LA RESERVA (28-ago-2026) — el CTA principal del modal

   Decisión de Víctor: el calendario manda, pero WhatsApp, llamar y escribir
   "se ven bien". Así que NO es cuatro opciones al mismo nivel: la reserva va
   primero y con peso, y las demás siguen debajo enteras. Quitar WhatsApp no
   convierte a nadie en reserva — convierte al que quería escribir en alguien
   que se marcha.
   ═══════════════════════════════════════════════════════════════════════ */

.booking-modal .reservar-bloque {
  margin-bottom: 0.25rem;
}
.booking-modal .reservar-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.4rem;
  font-size: 14px;
  text-align: center;
}
.booking-modal .reservar-nota {
  margin: 0.6rem 0 0;
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.45;
  color: var(--tx-4);
  text-align: center;
}

/* ─── El paso del calendario ─── */
/* El alto lo pone el propio iframe de TidyCal; aquí solo se reserva un
   mínimo para que el panel no pegue un salto entre "Cargando…" y el
   calendario ya pintado. */
.booking-modal .booking-calendario {
  min-height: 420px;
  margin-top: 0.4rem;
}
.booking-modal .booking-calendario iframe {
  width: 100%;
  border: 0;
  display: block;
}
/* 🚩 TidyCal NO vacia el contenedor: mete su <iframe> AL LADO del aviso de
   carga, asi que el "Cargando el calendario..." se queda debajo del
   calendario ya pintado. Se esconde en cuanto aparece el iframe. */
.booking-modal .booking-calendario:has(iframe) .booking-cal-cargando { display: none; }

.booking-modal .booking-cal-cargando,
.booking-modal .booking-cal-fallo {
  margin: 0;
  padding: 2.5rem 0;
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--tx-4);
  text-align: center;
}
.booking-modal .booking-cal-fallo a {
  color: var(--teal);
  border-bottom: 1px solid rgba(92,224,208,0.4);
  text-decoration: none;
}
.booking-modal .booking-cal-fallo a:hover { color: var(--white); border-bottom-color: var(--white); }

/* El botón de volver, alineado a la izquierda del encabezado del paso. */
.booking-modal .booking-volver {
  display: inline-block;
  margin-bottom: 0.7rem;
  padding: 0;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--tx-4);
  cursor: pointer;
  transition: color 0.2s ease;
}
.booking-modal .booking-volver:hover { color: var(--white); }

/* 🚩 En el paso del calendario el panel se ensancha: el widget de TidyCal
   necesita sitio o el mes sale apretado. En el resto de pasos se queda en
   los 560px de siempre. */
.booking-modal .booking-step[data-step="reservar"]:not([hidden]) {
  min-height: 1px;
}
.booking-panel:has(.booking-step[data-step="reservar"]:not([hidden])) {
  max-width: 760px;
}

@media (max-width: 560px) {
  .booking-modal .reservar-cta { min-height: 3.1rem; font-size: 13px; }
  .booking-modal .reservar-nota { font-size: 0.78rem; }
  .booking-modal .booking-calendario { min-height: 380px; }
}

/* ─── AJUSTE DE PESOS (28-ago, con Víctor mirándolo) ───────────────────────
   El CTA de reservar tiene que pesar MÁS que las vías secundarias, y las
   vías ocupar MENOS. Van al final del fichero: misma especificidad que las
   reglas de arriba, así que aquí mandan por orden. */

/* El botón principal, más alto. */
.booking-modal .reservar-cta { min-height: 4.1rem; }

/* 🚩 Las vías pasan de columna (icono arriba, centrado) a FILA: el icono a
   la izquierda y, a su derecha, el nombre sobre el número.
   Se hace con grid y NO tocando el markup: los tres hijos siguen siendo
   hermanos planos (.via-icono, .via-nombre, .via-dato), y aquí se les
   asigna celda. El icono ocupa las dos filas para quedar centrado. */
.booking-modal .via {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  align-content: center;
  column-gap: 0.7rem;
  row-gap: 0;
  min-height: 62px;
  padding: 0.7rem 0.9rem;
  text-align: left;
}
.booking-modal .via-icono  { grid-column: 1; grid-row: 1 / 3; }
.booking-modal .via-nombre { grid-column: 2; grid-row: 1; line-height: 1.25; }
.booking-modal .via-dato   { grid-column: 2; grid-row: 2; line-height: 1.25; }

@media (max-width: 560px) {
  .booking-modal .reservar-cta { min-height: 3.7rem; }
  /* En móvil las dos vías van en columnas estrechas: con el icono al lado
     el número no cabe, así que ahí se estrecha el hueco y baja el cuerpo. */
  .booking-modal .via { min-height: 58px; padding: 0.6rem 0.6rem; column-gap: 0.5rem; }
  .booking-modal .via-dato { font-size: 0.68rem; }
}

/* ─── TRES VÍAS, Y EL FORMULARIO FUERA DE LA ENTRADA (28-ago) ──────────────
   El formulario ocupaba media pantalla del modal siendo la vía con MÁS
   fricción de las tres. Pasa a su propio paso y en su hueco entra un tercer
   botón, "Escribir". Con el espacio liberado, el CTA principal crece. */

.booking-modal .reservar-cta { min-height: 4.8rem; font-size: 15px; }
.booking-modal .reservar-nota { margin-top: 0.75rem; }

/* Tres columnas fijas: con `auto-fit` y minmax(200px) el tercero se caía a
   una segunda fila dentro de los 560px del panel. */
.booking-modal .vias { grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }

/* El tercero es un <button> y los otros dos son <a>: hay que resetear lo que
   el navegador le mete de serie o no cuadra con sus hermanos. */
.booking-modal button.via {
  font-family: inherit;
  color: inherit;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
}

/* 🚩 En móvil NO caben tres cajas con el icono al lado del texto: a 375px
   cada una se queda en ~104px. Ahí vuelven a la vertical —icono arriba,
   centrado—, que es como estaban antes de hoy. */
@media (max-width: 560px) {
  .booking-modal .reservar-cta { min-height: 4.2rem; font-size: 14px; }
  .booking-modal .vias { gap: 0.45rem; }
  .booking-modal .via {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
    min-height: 82px;
    padding: 0.7rem 0.3rem;
    text-align: center;
  }
  .booking-modal .via-nombre { font-size: 0.8rem; }
  .booking-modal .via-dato   { font-size: 0.62rem; line-height: 1.3; }
}

/* "Agendar llamada" paso a ser el <h2> del modal (28-ago), asi que el rotulo
   suelto que habia aqui sobra. El bloque del boton se pega al encabezado. */
.booking-modal .reservar-bloque { margin-top: 1.1rem; }