/* ==========================================================================
   La Cumbre - components.css
   Piezas reutilizables. Todo componente interactivo declara sus estados:
   default, hover, focus-visible, active, disabled, loading, error, empty.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Iconos
   Una sola familia, trazo 1.5 estandarizado globalmente.
   -------------------------------------------------------------------------- */

.icon {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--sm {
  width: 1.125rem;
  height: 1.125rem;
}

.icon--lg {
  width: 2rem;
  height: 2rem;
}

/* --------------------------------------------------------------------------
   Marca
   -------------------------------------------------------------------------- */

.brandmark {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--bone);
}

.brandmark__glyph {
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  fill: none;
  stroke: var(--accent);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: miter;
  stroke-miterlimit: 10;
  transition: transform var(--dur-slow) var(--ease-out);
}

.brandmark__word {
  font-family: var(--font-display);
  font-size: 1.375rem;
  letter-spacing: 0.16em;
  line-height: 1;
  padding-top: 0.1em;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .brandmark:hover .brandmark__glyph {
    transform: scale(1.06);
  }
}

/* --------------------------------------------------------------------------
   Botones
   El texto del CTA nunca envuelve en desktop: white-space nowrap + labels cortos.
   -------------------------------------------------------------------------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background-color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out);
}

.btn--primary {
  background: var(--accent);
  color: var(--ink-950);
  font-weight: 700;
}

.btn--ghost {
  background: transparent;
  color: var(--bone);
  border-color: var(--control-border);
}

.btn--quiet {
  background: rgba(237, 234, 224, 0.06);
  color: var(--bone);
  border-color: var(--line-strong);
}

.btn--block {
  width: 100%;
}

.btn--lg {
  min-height: 3.5rem;
  padding-inline: 2rem;
  font-size: var(--fs-body);
}

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover {
    background: var(--accent-strong);
  }

  .btn--ghost:hover {
    border-color: var(--accent);
    color: var(--accent);
  }

  .btn--quiet:hover {
    background: rgba(237, 234, 224, 0.1);
    border-color: var(--control-border);
  }
}

.btn:active {
  transform: translateY(1px);
}

.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* Estado loading: barra indeterminada por transform, nunca spinner genérico. */
.btn[data-state='loading']::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40%;
  height: 2px;
  background: currentColor;
  opacity: 0.55;
  animation: btn-progress 1.1s var(--ease-out-soft) infinite;
}

@keyframes btn-progress {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(350%);
  }
}

/* Enlace de texto: tercer nivel de jerarquía, evita el binomio sólido+ghost. */
.textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 165, 82, 0.35);
  padding-bottom: 2px;
  transition:
    color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .textlink:hover {
    color: var(--accent-strong);
    border-color: var(--accent-strong);
  }
}

.textlink .icon {
  transition: transform var(--dur) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .textlink:hover .icon {
    transform: translateX(3px);
  }
}

/* --------------------------------------------------------------------------
   Navegación
   Píldora flotante despegada del borde. Una sola línea en desktop, 68px.
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  top: clamp(0.75rem, 2vw, 1.25rem);
  left: 50%;
  z-index: var(--z-nav);
  width: min(var(--wrap), calc(100% - 2 * clamp(0.75rem, 3vw, 1.5rem)));
  transform: translateX(-50%);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  height: 4.25rem;
  padding-inline: clamp(1rem, 2.5vw, 1.75rem);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  transition:
    background-color var(--dur-slow) var(--ease-out),
    border-color var(--dur-slow) var(--ease-out);
}

.nav.is-stuck .nav__inner {
  background: rgba(11, 16, 12, 0.82);
  border-color: var(--line);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-sm);
}

.nav__links {
  display: none;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.75rem);
}

.nav__link {
  position: relative;
  font-size: var(--fs-sm);
  color: var(--bone-dim);
  text-decoration: none;
  padding-block: 0.5rem;
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.1rem;
  height: 1px;
  background: var(--accent);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition:
    opacity var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .nav__link:hover {
    color: var(--bone);
  }

  .nav__link:hover::after {
    opacity: 0.5;
    transform: scaleX(1);
  }
}

/* Página actual: estilo diferenciado, no solo color. */
.nav__link[aria-current='true'] {
  color: var(--bone);
}

.nav__link[aria-current='true']::after {
  opacity: 1;
  transform: scaleX(1);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav__cta {
  display: none;
}

.nav__burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background: transparent;
  border: 1px solid var(--control-border);
  border-radius: var(--r-pill);
  cursor: pointer;
  color: var(--bone);
  transition: border-color var(--dur) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .nav__burger:hover {
    border-color: var(--accent);
  }
}

@media (min-width: 1024px) {
  .nav__links,
  .nav__cta {
    display: flex;
  }

  .nav__burger {
    display: none;
  }
}

/* Menú móvil a pantalla completa */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  padding: 1.25rem var(--gutter) 2.5rem;
  background: var(--ink-950);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -12px, 0);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out),
    visibility 0s linear var(--dur-slow);
}

.menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.25rem;
}

.menu__list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: var(--sp-6);
  flex: 1;
}

.menu__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.875rem;
  letter-spacing: -0.01em;
  color: var(--bone);
  text-decoration: none;
}

.menu__foot {
  display: grid;
  gap: 0.75rem;
  margin-top: var(--sp-6);
}

@media (min-width: 1024px) {
  .menu {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Medios
   Toda imagen reserva dimensiones con aspect-ratio para no generar CLS.
   -------------------------------------------------------------------------- */

.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--ink-850);
}

.media img,
.media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media--4x3 {
  aspect-ratio: 4 / 3;
}

.media--3x2 {
  aspect-ratio: 3 / 2;
}

.media--16x9 {
  aspect-ratio: 16 / 9;
}

.media--portrait {
  aspect-ratio: 4 / 5;
}

.media--square {
  aspect-ratio: 1;
}

/* --------------------------------------------------------------------------
   Formulario
   Label SIEMPRE arriba. Ayuda en el markup. Error debajo. Nunca placeholder
   como label.
   -------------------------------------------------------------------------- */

.form {
  display: grid;
  gap: var(--sp-5);
}

/* display de clase gana sobre el [hidden] de la hoja del navegador, así que
   hay que devolvérselo a mano. Sin esto, form.hidden = true no oculta nada. */
.form[hidden],
.done[hidden] {
  display: none;
}

.field {
  display: grid;
  gap: 0.5rem;
}

.field__label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--bone);
}

.field__req {
  color: var(--accent);
  margin-left: 0.15em;
}

.field__help {
  font-size: var(--fs-xs);
  color: var(--bone-mute);
}

.field__error {
  display: none;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-xs);
  color: var(--danger);
}

.field.is-invalid .field__error {
  display: flex;
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  background: var(--ink-800);
  color: var(--bone);
  border: 1px solid var(--control-border);
  border-radius: var(--r-sm);
  font-size: var(--fs-body);
  transition:
    border-color var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out);
}

.textarea {
  min-height: 7rem;
  resize: vertical;
  line-height: 1.55;
}

.select {
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b9beb0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 1.15rem;
  cursor: pointer;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--bone-mute);
  opacity: 1;
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--ink-850);
}

.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.field.is-invalid .input,
.field.is-invalid .select,
.field.is-invalid .textarea {
  border-color: var(--danger);
}

.input[disabled],
.select[disabled],
.textarea[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.field-row {
  display: grid;
  gap: var(--sp-5);
}

@media (min-width: 640px) {
  .field-row--2 {
    grid-template-columns: 1fr 1fr;
  }
}

/* Resultado del envío: nunca window.alert, siempre inline. */
.form__status {
  display: none;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 1rem 1.125rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  border: 1px solid;
}

.form__status.is-visible {
  display: flex;
}

.form__status[data-tone='ok'] {
  border-color: rgba(200, 165, 82, 0.45);
  background: var(--accent-soft);
  color: var(--bone);
}

.form__status[data-tone='error'] {
  border-color: rgba(232, 131, 106, 0.45);
  background: rgba(232, 131, 106, 0.1);
  color: var(--bone);
}

.form__status p {
  margin: 0;
  max-width: none;
}

/* --------------------------------------------------------------------------
   Calendario
   Selector de fecha propio, navegable por teclado (flechas, Inicio/Fin,
   RePág/AvPág), en español, sin fechas pasadas.
   -------------------------------------------------------------------------- */

.calendar {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--ink-900);
  padding: 0.75rem;
}

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

.calendar__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.01em;
  text-transform: capitalize;
}

.calendar__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--bone);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .calendar__nav:hover:not([disabled]) {
    border-color: var(--accent);
  }
}

.calendar__nav[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

.calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.calendar__dow {
  padding-block: 0.4rem;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--bone-mute);
}

.calendar__day {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  aspect-ratio: 1;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--bone-dim);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .calendar__day:hover:not([disabled]) {
    background: rgba(237, 234, 224, 0.08);
    color: var(--bone);
  }
}

.calendar__day[disabled] {
  color: rgba(141, 148, 138, 0.45);
  cursor: not-allowed;
}

.calendar__day[aria-selected='true'] {
  background: var(--accent);
  color: var(--ink-950);
  font-weight: 700;
}

.calendar__day[data-today='true']:not([aria-selected='true']) {
  border-color: var(--control-border);
}

.calendar__empty {
  padding: 0.75rem 0.25rem 0.25rem;
  font-size: var(--fs-xs);
  color: var(--bone-mute);
}

/* Siete columnas no caben a 44 px en un teléfono de 360 px de ancho: se
   recorta el acolchado alrededor para dejarle a cada día el mayor área
   táctil posible, conservando los 44 px de alto. */
@media (max-width: 479px) {
  .calendar {
    padding: 0.5rem;
  }

  .contact__form {
    padding: 1.25rem;
  }

  .calendar__day {
    aspect-ratio: auto;
  }
}

/* --------------------------------------------------------------------------
   Lightbox de galería
   -------------------------------------------------------------------------- */

.lightbox {
  width: min(96vw, 1200px);
  max-width: none;
  max-height: 92vh;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bone);
  overflow: visible;
}

.lightbox::backdrop {
  background: rgba(6, 10, 7, 0.94);
}

/* El contenedor ancla al botón de cierre. El <dialog> no sirve de referencia
   porque el navegador le impone su propio posicionamiento en la capa superior. */
.lightbox__box {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--ink-900);
}

/* pan-y deja el desplazamiento vertical al navegador y reserva el horizontal
   para el gesto de cambiar de foto (ver assets/js/gallery.js). La transición
   es la que devuelve la imagen a su sitio al soltar: rápida, porque aquí el
   sistema responde, no decide. */
.lightbox__frame {
  position: relative;
  touch-action: pan-y;
  transition:
    transform var(--dur) var(--ease-out),
    opacity var(--dur) var(--ease-out);
}

.lightbox__frame img,
.lightbox__frame video {
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  background: var(--ink-950);
}

/* Sin esto, arrastrar la foto inicia el arrastre nativo del navegador y el
   gesto se pierde a mitad de camino. */
.lightbox__frame img {
  user-select: none;
  -webkit-user-drag: none;
}

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--line);
}

.lightbox__caption {
  font-size: var(--fs-sm);
  color: var(--bone-dim);
  margin: 0;
  max-width: none;
}

.lightbox__controls {
  display: flex;
  gap: 0.5rem;
  flex: none;
}

.lightbox__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--bone);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .lightbox__btn:hover {
    border-color: var(--accent);
  }
}

.lightbox__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: var(--z-raised);
  background: rgba(11, 16, 12, 0.78);
  border-color: var(--control-border);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.lightbox[open] {
  animation: lightbox-in var(--dur-slow) var(--ease-out);
}

@keyframes lightbox-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* --------------------------------------------------------------------------
   Aviso de cookies
   No modal: no bloquea la lectura de la página ni roba el foco. El hueco
   fijo es transparente a clics; solo el panel interior los recibe.
   -------------------------------------------------------------------------- */

.cookiebar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-overlay);
  padding: clamp(1rem, 3vw, 1.5rem);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.cookiebar.is-visible {
  opacity: 1;
  transform: none;
}

.cookiebar__inner {
  pointer-events: auto;
  max-width: 780px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: rgba(16, 22, 15, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-lg);
}

.cookiebar p {
  flex: 1 1 300px;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--bone-dim);
  max-width: 60ch;
}

.cookiebar p a {
  color: var(--accent);
}

.cookiebar__actions {
  display: flex;
  gap: 0.6rem;
  flex: none;
  flex-wrap: wrap;
}

/* Más suave, no cero: se conserva el fundido de opacidad y se retira el
   desplazamiento, igual que el resto de las entradas de la página. */
@media (prefers-reduced-motion: reduce) {
  .cookiebar {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Muelle de acción móvil
   Debajo de 1024px la navegación esconde su CTA, así que a medio scroll la
   acción queda lejos. Este muelle la devuelve con las dos mismas intenciones
   del hero (escribir ahora / agendar), nunca dos versiones del mismo botón.
   Se retira solo al llegar al formulario, donde estorbaría, y no aparece
   mientras el aviso de cookies sigue en pie: dos barras abajo, nunca.
   -------------------------------------------------------------------------- */

.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  display: none;
  gap: 0.6rem;
  padding: 0.7rem var(--gutter);
  padding-bottom: max(0.7rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-strong);
  background: rgba(16, 22, 15, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transform: translate3d(0, 105%, 0);
  transition: transform var(--dur-slow) var(--ease-out);
}

.dock.is-visible {
  transform: none;
}

/* Reparto parejo: ninguna de las dos intenciones domina por ancho. */
.dock .btn {
  flex: 1 1 0;
  min-width: 0;
  padding-inline: 1rem;
}

@media (max-width: 1023.98px) {
  .dock {
    display: flex;
  }
}

/* Los dos botones juntos exigen 352px, así que en un teléfono de 320px el
   texto se recortaría (.btn lleva nowrap y overflow oculto). Ahí se sacrifica
   el icono, que es decorativo y va con aria-hidden, para conservar la
   etiqueta, que es la que dice qué hace el botón. Mismo criterio que en el
   calendario: primero se entiende, después se adorna. */
@media (max-width: 379.98px) {
  .dock .btn {
    padding-inline: 0.6rem;
  }

  .dock .btn .icon {
    display: none;
  }
}

/* Más suave, no cero: se conserva la aparición, se retira el deslizamiento. */
@media (prefers-reduced-motion: reduce) {
  .dock {
    transform: none;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--dur) var(--ease-out),
      visibility 0s linear var(--dur);
  }

  .dock.is-visible {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
}

/* --------------------------------------------------------------------------
   Burbuja de WhatsApp
   Fija en pantalla en todo momento, en cualquier ancho: a diferencia del
   muelle, no espera a que el hero salga ni se retira en el formulario. Sube
   de posición con selectores de hermano siguiente cuando el muelle o el
   aviso de cookies están visibles, para no montarse sobre ninguno de los dos.
   -------------------------------------------------------------------------- */

.wa-float {
  position: fixed;
  right: clamp(1rem, 4vw, 1.75rem);
  bottom: clamp(1rem, 4vw, 1.75rem);
  z-index: var(--z-nav);
  width: 3.25rem;
  height: 3.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--ink-950);
  box-shadow: var(--shadow-md);
  opacity: 1;
  transition:
    background-color var(--dur) var(--ease-out),
    opacity var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out),
    bottom var(--dur-slow) var(--ease-out);
}

.wa-float .icon {
  width: 1.4rem;
  height: 1.4rem;
}

@media (hover: hover) and (pointer: fine) {
  .wa-float:hover {
    background: var(--accent-strong);
    transform: translateY(-2px);
  }
}

/* Encima del muelle mientras está en pantalla (solo existe bajo 1024px). */
@media (max-width: 1023.98px) {
  #dock.is-visible ~ .wa-float {
    bottom: calc(5.25rem + env(safe-area-inset-bottom));
  }
}

/* El aviso de cookies no tiene alto fijo (el texto se envuelve distinto
   según el ancho), así que no hay un "bottom" que la esquive siempre. Se
   oculta mientras nadie ha elegido, mismo criterio que ya usa el muelle:
   dos elementos flotantes abajo, nunca. */
#cookiebar.is-visible ~ .wa-float {
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.5rem);
}

@media (prefers-reduced-motion: reduce) {
  .wa-float {
    transition:
      background-color var(--dur) var(--ease-out),
      opacity var(--dur) var(--ease-out);
  }
}

/* --------------------------------------------------------------------------
   Preguntas frecuentes
   <details> nativo: el teclado, los lectores de pantalla y el buscador ya lo
   entienden sin una línea de JavaScript. El atributo name los vuelve
   excluyentes donde el navegador lo soporta, y donde no, simplemente se
   pueden abrir varios.
   Solo se anima la opacidad del contenido y el giro del signo: la altura
   nunca se anima.
   -------------------------------------------------------------------------- */

.qa {
  border-top: 1px solid var(--line);
}

.qa__item {
  border-bottom: 1px solid var(--line);
}

.qa__q {
  display: grid;
  grid-template-columns: 1fr 1.125rem;
  align-items: center;
  gap: 1.25rem;
  padding-block: 1.2rem;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  color: var(--bone);
  transition: color var(--dur) var(--ease-out);
}

/* Safari todavía pinta su propio triángulo sin esta línea. */
.qa__q::-webkit-details-marker {
  display: none;
}

.qa__q .icon {
  color: var(--accent);
  transition: transform var(--dur) var(--ease-out);
}

.qa__item[open] .qa__q .icon {
  transform: rotate(90deg);
}

@media (hover: hover) and (pointer: fine) {
  .qa__q:hover {
    color: var(--accent);
  }
}

.qa__a {
  padding-bottom: 1.35rem;
}

.qa__a p {
  font-size: var(--fs-sm);
  color: var(--bone-dim);
}

.qa__a p + p {
  margin-top: var(--sp-4);
}

.qa__a b {
  color: var(--bone);
  font-weight: 500;
}

@supports selector(::details-content) {
  .qa__item::details-content {
    opacity: 0;
    transition: opacity var(--dur) var(--ease-out);
  }

  .qa__item[open]::details-content {
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   Compuerta del mapa
   El iframe de Google carga scripts de terceros en cuanto existe en el DOM.
   Aquí no existe hasta que la persona lo pide, lo que es coherente con el
   aviso de cookies y le ahorra la petición a quien solo venía a leer.
   No es un mapa dibujado con divs: es una compuerta con la coordenada real.
   -------------------------------------------------------------------------- */

.mapgate {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.9rem;
  padding: clamp(1.25rem, 4vw, 2rem);
  text-align: center;
  background: var(--ink-850);
}

.mapgate__ico {
  color: var(--accent);
}

.mapgate p {
  margin: 0;
  max-width: 32ch;
  font-size: var(--fs-sm);
  color: var(--bone-dim);
}

.mapgate__coords {
  font-size: var(--fs-xs);
  color: var(--bone-mute);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Confirmación de envío
   El acuse deja de depender de que WhatsApp se haya abierto: aquí queda,
   dentro del sitio, el resumen exacto de lo que se envió.
   -------------------------------------------------------------------------- */

.done {
  display: grid;
  gap: var(--sp-5);
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.done.is-visible {
  opacity: 1;
  transform: none;
}

.done:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
}

.done__head {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  align-items: center;
  gap: 1rem;
}

.done__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
}

.done__list {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}

.done__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--fs-sm);
}

.done__row dt {
  color: var(--bone-mute);
  flex: none;
}

.done__row dd {
  margin: 0;
  color: var(--bone);
  text-align: right;
}

.done__actions {
  display: grid;
  gap: 0.6rem;
}

@media (min-width: 480px) {
  .done__actions {
    grid-template-columns: 1fr 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .done {
    transform: none;
  }
}