/* ============================================================================
   SPICA STUDIO · r29 · POPUP DE AGENDA (llamada de 15 minutos)

   Hoja nueva, cargada en las diez paginas que tienen formulario. No redefine
   ningun token y no pisa ninguna clase de sections.css, chrome.css ni
   responsive.css: todo lo de aqui cuelga del prefijo `.agenda`, salvo la clase
   de bloqueo de scroll `html.agenda-lock`.

   La composicion es la de welcome.css, y a proposito: es el otro dialogo del
   sitio y los dos tienen que sentirse el mismo objeto. Papel, filete de un
   pixel, radio grande, velo oscuro con desenfoque, entrada por opacidad y
   desplazamiento. Lo unico propio de esta hoja es el paso 2, que tiene un
   problema que welcome no tiene: el calendario de Google vive dentro de un
   iframe, no se le puede medir el contenido desde fuera y por lo tanto el alto
   se lo tenemos que dar nosotros.

   EL ALTO DEL CALENDARIO, QUE ES LA DECISION DE ESTA HOJA. La pagina de citas
   de Google necesita sitio para el mes, la lista de horas y el boton, y por
   debajo de unos 600 px se convierte en una columna con scroll interno que se
   siente rota dentro de un popup. Por eso:
   · En escritorio el hueco mide `clamp(620px, 100dvh - 20rem, 760px)`. El
     minimo del clamp es lo que garantiza los 620 px del contrato aunque la
     ventana sea baja; en ese caso quien se desplaza es el dialogo, que para eso
     tiene `overflow: auto`, y no el calendario dentro de su propio marco.
   · En celular el dialogo deja de ser tarjeta y pasa a ocupar la pantalla
     entera, y el hueco crece con `flex: 1` hasta comerse todo lo que sobra. En
     un iPhone de 844 px de alto le quedan unos 680 px al calendario, mas que en
     escritorio, que es exactamente lo que hace falta porque en tactil se elige
     el dia con el dedo.

   El paso 2 se reconoce por la clase `is-step2`, que pone y quita booking.js
   sobre la raiz. Es lo que permite que el dialogo cambie de ancho, que la
   bajada del paso 1 desaparezca cuando ya no dice nada y que en celular el
   popup pase de hoja inferior a pantalla completa.

   Nada de particulas, confeti ni polvo. Las dos flechas son SVG con
   `currentColor` y las escribe el componente.

   `prefers-reduced-motion` no necesita nada propio: base.css ya anula las
   transiciones de todo el sitio, y booking.js cierra igual con su temporizador
   de respaldo aunque `transitionend` no llegue nunca.

   Los bloques responsive van al final y en orden DESCENDENTE de ancho, como el
   resto del sitio: cada uno pisa al anterior en su tramo.
   ========================================================================== */

.agenda {
  position: fixed;
  inset: 0;
  /* por encima de welcome (que va en +20): los dos nunca coinciden, porque uno
     abre al llegar y el otro al enviar, pero si un dia coincidieran el que
     manda es este, que es el que el visitante acaba de provocar */
  z-index: calc(var(--z-overlay) + 30);
  display: grid;
  place-items: center;
  padding: 1rem;
}
.agenda[hidden] { display: none; }

.agenda__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 16, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--dur-panel) var(--ease);
}
.agenda.is-open .agenda__backdrop { opacity: 1; }

.agenda__dialog {
  position: relative;
  width: min(40rem, 100%);
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(17, 17, 16, 0.28);
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transition:
    opacity var(--dur-panel) var(--ease-out),
    transform var(--dur-panel) var(--ease-out),
    width var(--dur-panel) var(--ease-out);
  outline: none;
}
.agenda.is-open .agenda__dialog {
  opacity: 1;
  transform: none;
}
/* el calendario pide mas ancho que dos opciones de idioma, y el cambio va con
   transicion para que el paso 2 se sienta el mismo objeto abriendose */
.agenda.is-step2 .agenda__dialog { width: min(56rem, 100%); }

/* ---- cierre ---------------------------------------------------------------- */

.agenda__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper-raised);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color var(--dur-state) var(--ease);
}
.agenda__close svg { width: 1.1rem; height: 1.1rem; }
.agenda__close:hover { border-color: var(--ink); }

/* ---- cabecera ---------------------------------------------------------------
   El titular es un <p> con clase propia, no un <h2>: la razon esta escrita en
   el componente (el arnes de la casa trata como titular cualquier clase con
   `title` y no admite un punto dentro de un titular espanol). Como no hereda de
   .h2, la tipografia de display se pone aqui entera. */

.agenda__head {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.8rem;
  margin-bottom: clamp(1.2rem, 2.6vw, 1.8rem);
}
.agenda__flower {
  height: 2.1rem;
  width: auto;
  color: var(--violet);
}
.agenda__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem);
  line-height: 1.08;
  letter-spacing: var(--ls-heading);
  max-width: 24ch;
}
.agenda__lead { max-width: 44ch; }

/* en el paso 2 la bajada ya no dice nada: el idioma esta elegido y lo que
   importa es el calendario. El nodo sigue en el DOM porque el dialogo lo
   nombra con aria-describedby. */
.agenda.is-step2 .agenda__lead { display: none; }
.agenda.is-step2 .agenda__head { margin-bottom: 1rem; }
.agenda.is-step2 .agenda__heading { font-size: clamp(1.2rem, 1rem + 0.7vw, 1.5rem); }

/* ---- pasos ------------------------------------------------------------------
   booking.js los enciende y apaga con [hidden], que ademas los saca del ciclo
   de foco sin listas aparte. La regla de [hidden] va DESPUES de las de display
   para que gane por especificidad sin necesidad de !important. */

.agenda__step--lang {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}
/* 🔴 `min-height: auto` y NO `0` (r29b, integracion). El `0` venia de cuando el
   hueco del calendario era `flex: 1 1 auto` y hacia falta dejarlo encoger; r29
   lo paso a `flex: 0 0 auto` (ver la nota de `.agenda__frame`) y desde entonces
   el `0` solo servia para dejar que el paso 2 se comprimiera por debajo de su
   contenido. Con r29b eso dejo de ser inocuo: el control "ningun horario me
   sirve" cuelga debajo del hueco, y como el hueco no encoge, el control se
   salia del paso 2 y se pintaba ENCIMA del pie del dialogo. Medido a 1440x950
   antes de este cambio: el paso 2 terminaba en 847,4 px, el control ocupaba de
   867,6 a 894,9 y el pie de 871,4 a 891,4, o sea solapados; Chromium daba el
   clic al pie y el control era IMPOSIBLE de pulsar con el raton. Con
   `min-height: auto` el paso 2 no baja de su contenido, el calendario conserva
   sus 620 px y el que se desplaza es el dialogo, que es lo que ya decidio r29. */
.agenda__step--cal {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: auto;
}
.agenda__step[hidden] { display: none; }

/* ---- paso 1 · el idioma de la llamada --------------------------------------
   Escalonado de entrada por reloj, 80 ms entre las dos opciones, como las
   tarjetas de welcome.css. El realce del cursor NO usa transform: la entrada ya
   ocupa esa propiedad con su retardo, y mezclarlas dejaria el realce esperando
   al escalonado. Se realza con filete, sombra y flecha, que sobra. */

.agenda__pick {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  text-align: left;
  padding: 1.15rem 3.4rem 1.15rem 1.15rem;
  background: var(--paper-raised);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.55s var(--ease-out),
    transform 0.55s var(--ease-out),
    border-color var(--dur-state) var(--ease),
    box-shadow var(--dur-state) var(--ease);
  /* el retardo va POR PROPIEDAD. Un valor unico se aplica a toda la lista del
     shorthand, asi que el escalonado de entrada retrasaba tambien el filete y
     la sombra del cursor: 140 ms de nada al pasar por encima de "English" y 220
     por "Español", y lo mismo al salir. El popup se sentia pegajoso justo en el
     unico gesto del paso 1, que es lo contrario de lo que dice el comentario de
     arriba. Entrada escalonada si, realce inmediato. */
  transition-delay: 0.14s, 0.14s, 0s, 0s;
}
.agenda__step--lang .agenda__pick:nth-of-type(2) { transition-delay: 0.22s, 0.22s, 0s, 0s; }
.agenda.is-open .agenda__pick {
  opacity: 1;
  transform: none;
}
.agenda__pick:hover {
  border-color: var(--violet);
  box-shadow: var(--shadow-lift);
}
.agenda__pick:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
}

.agenda__pick-text {
  display: grid;
  gap: 0.3rem;
}
.agenda__pick-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.05;
  letter-spacing: -0.012em;
}
.agenda__pick-line {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.agenda__arrow {
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--lavender);
  color: var(--violet);
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  transition:
    background var(--dur-state) var(--ease),
    color var(--dur-state) var(--ease),
    transform var(--dur-state) var(--ease);
}
.agenda__arrow svg { width: 1rem; height: 1rem; }
.agenda__pick:hover .agenda__arrow {
  background: var(--violet);
  color: var(--paper);
  transform: translateY(-50%) translateX(3px);
}

/* ---- paso 2 · la barra ------------------------------------------------------ */

.agenda__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
  margin-bottom: 0.9rem;
}

/* calcado de .welcome__other, con la flecha mirando a la izquierda porque esto
   vuelve, no avanza */
.agenda__back {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 520;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: none;
  border: 0;
  padding: 0.4rem 0;
  cursor: pointer;
}
.agenda__back em {
  font-style: normal;
  display: inline-flex;
  width: 1em;
  height: 1em;
  transition: transform var(--dur-state) var(--ease);
}
.agenda__back em svg { width: 100%; height: 100%; }
.agenda__back:hover em { transform: translateX(-4px); }
.agenda__back:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
}

.agenda__step-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---- paso 2 · el calendario -------------------------------------------------
   El hueco nace vacio en el marcado y booking.js le mete el <iframe> al llegar
   aqui. El filete y el radio son del hueco, no del iframe, con `overflow:
   hidden`: asi el calendario de Google queda recortado por la esquina
   redondeada aunque su fondo sea blanco puro. */

.agenda__frame {
  position: relative;
  /* `flex: 0 0 auto` y NO `1 1 auto`: dentro de un `.agenda__step--cal` en
     columna, el reparto de flex se comia el `height` de abajo antes de que el
     dialogo llegara a desplazarse. Medido con la URL real puesta y el paso 2
     abierto: a 1440x900 el hueco quedaba en 579 px, a 1366x768 en 447 y a
     1280x720 en 399, con el <iframe> conservando sus 620 de min-height y el
     hueco en `overflow: hidden`, o sea recortando por abajo entre 41 y 221 px
     de la pagina de reservas de Google, que es justo donde vive el boton de
     confirmar. Y el dialogo NO compensaba: scrollHeight === clientHeight en los
     cinco tamanos. Sin encogimiento, el alto util se respeta y quien se
     desplaza pasa a ser el dialogo, que para eso tiene `overflow: auto` y
     `max-height: calc(100dvh - 2rem)`, que es lo que dice la cabecera de esta
     hoja. El reparto por flex solo se quiere en celular, y alli se vuelve a
     poner. */
  flex: 0 0 auto;
  height: clamp(620px, calc(100dvh - 20rem), 760px);
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--paper-raised);
}
.agenda__frame[hidden] { display: none; }

.agenda__iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 620px;
  border: 0;
}

/* ---- paso 2 · el respaldo ---------------------------------------------------
   Lo que se ve mientras las dos agendas de Google no existan. Es una tarjeta de
   contacto, no un mensaje de error: el correo, el telefono de EE. UU. y el
   WhatsApp son los mismos tres de la seccion de contacto de la pagina. */

.agenda__fallback {
  display: grid;
  gap: 1rem;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
}
.agenda__fallback[hidden] { display: none; }

.agenda__fallback-text { max-width: 54ch; }
.agenda__fallback-text a {
  color: var(--violet);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.agenda__contacts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.agenda__contacts li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.8rem;
}
.agenda__contact-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  min-width: 9rem;
}
.agenda__contacts a {
  font-weight: 560;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.agenda__contacts a:hover { color: var(--violet); }

/* ---- paso 2 · la salida "ningun horario me sirve" (r29b) ---------------------
   js/booking.js construye este bloque con nodos y lo cuelga justo debajo del
   hueco del calendario. Trae dos clases prestadas que ya funcionan (`.field`
   para el panel y `.btn .btn--ghost` para el boton de enviar), y estas reglas
   son el ajuste fino que el archivo de r29b dejo anotado para el integrador.

   LOS TRES `[hidden]` DE ABAJO son un cinturon, no un arreglo, y conviene que
   quede escrito para que nadie los quite creyendo que sobran ni los ponga
   creyendo que arreglan algo. El panel lleva ademas la clase `.field`, que es
   `display: grid` en sections.css, asi que la duda es legitima: ¿le gana el
   `hidden`? Medido en Chromium y en WebKit sobre este mismo dist, creando el
   nodo con las dos clases y el atributo y borrando luego la regla de aqui: en
   los dos casos `display` sale `none` con regla y sin regla, porque la hoja del
   navegador declara hoy ese `display: none` con `!important`. O sea que el
   panel nunca nacio abierto. Se dejan puestas igual, por tres motivos: es la
   misma forma que ya tiene `.agenda__fallback[hidden]` veinte lineas mas
   arriba, cuestan cero, y sostienen el dia en que alguna de estas tres cajas
   reciba un `display` con `!important`. */

.agenda__noslot {
  display: grid;
  gap: 0.7rem;
  justify-items: start;
  margin-top: clamp(0.9rem, 2vw, 1.2rem);
}
.agenda__noslot[hidden] { display: none; }

/* El control de apertura se lee como un enlace y no como una pastilla: es la
   salida discreta que el contrato pide, y compite justo debajo del boton de
   confirmar de Google, que es el que tiene que ganar. */
.agenda__noslot-open {
  display: inline-block;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  padding: 0.15rem 0;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 540;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  cursor: pointer;
  transition: color var(--dur-micro) var(--ease);
}
.agenda__noslot-open[hidden] { display: none; }
.agenda__noslot-open:hover { color: var(--violet); }
.agenda__noslot-open:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
  border-radius: 4px;
}

/* El panel hereda de `.field` la rejilla, el rotulo en mono y la caja del
   <textarea>. Aqui solo se le da su ancho y se separa del control de arriba. */
.agenda__noslot-panel {
  width: 100%;
  max-width: 44rem;
  gap: 0.4rem;
}
.agenda__noslot-panel[hidden] { display: none; }

.agenda__noslot-text { min-height: 4.6rem; }

/* `.field` es una rejilla de una columna, asi que sin esto el boton se estira
   de borde a borde del panel y deja de parecer un boton. */
.agenda__noslot-send {
  justify-self: start;
  margin-top: 0.25rem;
}

/* El aviso vive siempre en el arbol y vacio (role="status"), asi que reserva su
   alto para que el dialogo no de un salto cuando aparece el texto. */
.agenda__noslot-status {
  font-size: 0.88rem;
  font-weight: 540;
  color: var(--ink);
  max-width: 54ch;
  min-height: 1.3em;
}
.agenda__noslot-status:empty { min-height: 0; }

/* ---- pie --------------------------------------------------------------------- */

.agenda__foot {
  margin-top: clamp(1rem, 2.2vw, 1.5rem);
  text-align: center;
}
.agenda.is-step2 .agenda__foot { text-align: left; }
.agenda__note {
  font-size: 0.78rem;
  color: var(--ink-faint);
  max-width: 46ch;
  margin-inline: auto;
}
.agenda.is-step2 .agenda__note { margin-inline: 0; }

html.agenda-lock { overflow: hidden; }

/* ============================================================================
   RESPONSIVE · orden descendente
   ========================================================================== */

/* --- iPad y ventanas medianas (<=1080) --------------------------------------
   En un iPad en vertical (1024 de alto) el clamp de escritorio pediria 620 px
   con 1024 - 320 = 704 disponibles: entra. En apaisado (768 de alto) no entra y
   el dialogo se desplaza, que es el comportamiento que queremos, porque el
   calendario nunca debe quedarse por debajo de su minimo util. */
@media (max-width: 1080px) {
  .agenda.is-step2 .agenda__dialog { width: min(48rem, 100%); }
  .agenda__frame { height: clamp(620px, calc(100dvh - 17rem), 720px); }
}

/* --- telefono grande (<=767) -------------------------------------------------
   El dialogo deja de ser una tarjeta centrada y se convierte en una hoja pegada
   al borde inferior, el gesto que ya espera el pulgar en tactil y el mismo que
   usa welcome.css. En el paso 2 la hoja crece hasta la pantalla entera: el
   calendario es el contenido, no un adorno dentro de otra cosa, y aqui el alto
   se reparte con flex en vez de pedirse en pixeles. */
@media (max-width: 767px) {
  .agenda {
    place-items: end center;
    padding: 0.5rem 0 0;
  }
  .agenda__dialog {
    width: 100%;
    max-height: calc(100dvh - 0.5rem);
    padding: 1.4rem 1.1rem 1.2rem;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .agenda.is-step2 { padding: 0; }
  .agenda.is-step2 .agenda__dialog {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    padding: 0.9rem 0.8rem 0.9rem;
  }
  /* la flor es lo primero que sobra cuando el alto es del calendario */
  .agenda.is-step2 .agenda__flower { display: none; }
  /* al subir la cabecera para dejarle el alto al calendario, el titular queda a
     la altura del boton de cierre. Medido a 390 px: el boton ocupa de 332 a 373,
     asi que la cabecera se aparta 2,9rem por cada lado y sigue centrada. */
  .agenda.is-step2 .agenda__head {
    margin-bottom: 0.7rem;
    padding-inline: 2.9rem;
  }
  .agenda.is-step2 .agenda__heading { font-size: 1.05rem; }
  .agenda.is-step2 .agenda__foot { margin-top: 0.7rem; }

  .agenda__step--lang { grid-template-columns: 1fr; }
  .agenda__step--lang .agenda__pick:nth-of-type(2) { transition-delay: 0.2s, 0.2s, 0s, 0s; }

  .agenda__frame {
    /* aqui SI se quiere el reparto por flex: el dialogo ocupa la pantalla
       entera y el hueco crece con lo que sobra. El alto sale del reparto, no de
       un numero: en 844 px de pantalla le quedan unos 680 al calendario, y en
       667 unos 500, que sigue siendo mas de lo que Google necesita para el mes
       y la lista de horas. */
    flex: 1 1 auto;
    height: auto;
    min-height: 20rem;
  }
  .agenda__iframe { min-height: 0; }

  .agenda__contact-label { min-width: 8rem; }
}

/* --- iPhone (<=430) ----------------------------------------------------------- */
@media (max-width: 430px) {
  .agenda__dialog { padding: 1.3rem 1rem 1.1rem; }
  .agenda__heading { font-size: 1.35rem; }
  .agenda__pick { padding: 1rem 3rem 1rem 1rem; }
  .agenda__pick-name { font-size: 1.15rem; }
  /* a 390 px el rotulo mono y el numero no caben en la misma linea: el rotulo
     pasa a ocupar la fila entera y el enlace cae debajo */
  .agenda__contact-label { min-width: 100%; }
}