/* =====================================================================
   ing.cmae — visita.css · Panel «Solicitud de visita» (js/visita.js)
   ---------------------------------------------------------------------
   · Panel lateral que entra de DERECHA A IZQUIERDA con el cotizador
     rápido (#quick-quote), sobre una lámina navy con cuadrícula de plano.
   · Pestaña dorada en el borde derecho (.visita-tab): asoma solo cuando
     el visitante ya bajó del hero (la clase .show la pone visita.js). En
     < 900 px es un botón de ícono apilado sobre el del chat.
   · Botón «Solicitar visita» y enlace «Ver obras ejecutadas» del hero.
   · Teléfono y tableta (< 900 px): los botones flotantes de WhatsApp y del
     chat se ocultan mientras se ven los botones del hero
     (body.hero-cta-visible, la pone visita.js).
   Sin JS el panel y la pestaña siguen [hidden] y el botón del hero lleva
   a contacto.html. Mobile-first; @media (min-width: 900px) para escritorio.

   ÍNDICE
     1. Hero: botón «Solicitar visita», enlace a obras y chat flotante
     2. Contenedor y fondo oscurecido
     3. Panel (la lámina) y cajetín
     4. Cotizador dentro del panel
     5. Botón cerrar
     6. Pestaña flotante
     7. Página bloqueada mientras el panel está abierto
     8. Movimiento reducido e impresión
   ===================================================================== */

/* ---------------- 1. Hero: botón «Solicitar visita», enlace a obras y chat flotante ---------------- */
/* Contorno blanco como .btn-line, con un velo navy para leerse sobre el video */
.hero-actions .btn-visita { background: rgba(10, 26, 43, .38); border-color: rgba(255, 255, 255, .9); }
.hero-actions .btn-visita:hover { background: rgba(10, 26, 43, .6); border-color: var(--gold); }
.btn-visita svg { color: var(--gold); }
/* Móvil (≤ 599 px): los dos botones van en una fila a partes iguales, más bajos y con rótulo corto
   («Cotizar» · «Solicitar visita»); la regla está en styles.css («Botones del hero en una columna»).
   Antes, bajo 560 px, iban uno bajo el otro a todo el ancho. */
/* Objetivo táctil de 44 px sin sumar altura a la columna (antes: margen .9rem + 29 px) */
.hero-link { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; margin-top: 0; padding: 0; font-family: var(--mono); font-size: .76rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #cfe2f3; text-decoration: none; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.hero-link span { color: var(--gold); transition: transform .2s; }
.hero-link:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--gold); }
.hero-link:hover span { transform: translateX(4px); }
/* Móvil: centrado bajo la fila de botones, con el área justa del texto (no llega bajo el botón de WhatsApp) */
@media (max-width: 599px) {
  .hero-link { display: flex; width: fit-content; margin-left: auto; margin-right: auto; }
}
/* Teléfono y tableta (< 900 px): los botones flotantes de WhatsApp y del chat no quedan encima de
   los botones del hero. Mientras «Cotizar por WhatsApp», «Solicitar visita» o «Ver obras ejecutadas»
   se ven (body.hero-cta-visible, la pone visita.js) se ocultan con visibility (no se enfocan ni se
   pulsan) y vuelven al bajar. Nunca se ocultan con el foco puesto ni con el chat abierto (main.js
   le devuelve el foco al cerrarlo). Escritorio: sin cambios. */
@media (max-width: 899px) {
  .wa-float { transition: transform .2s, opacity .25s; }
  .chat-launcher { transition: opacity .25s; }
  .hero-cta-visible .wa-float:not(:focus),
  .hero-cta-visible .chat-launcher:not(:focus):not([aria-expanded="true"]) {
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .25s, visibility 0s linear .25s;
  }
}

/* ---------------- 2. Contenedor y fondo oscurecido ---------------- */
.visita { position: fixed; inset: 0; z-index: 90; }
.visita[hidden] { display: none; }
.visita:not(.open) { pointer-events: none; }        /* mientras sale, la página ya responde */
/* touch-action: sin desplazamiento de la página de fondo, pero con zoom de dos dedos */
.visita-backdrop { position: absolute; inset: 0; background: rgba(5, 12, 20, .55); opacity: 0; transition: opacity .35s ease; touch-action: pinch-zoom; }
.visita.open .visita-backdrop { opacity: 1; }

/* ---------------- 3. Panel (la lámina) y cajetín ---------------- */
.visita-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  width: min(440px, 100%); height: 100vh; height: 100dvh;
  padding: 1rem max(1.4rem, env(safe-area-inset-right)) max(1.4rem, env(safe-area-inset-bottom)) 1.4rem;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  scroll-padding-top: 52px;                          /* el foco que desplaza el panel queda bajo la × fija */
  color: #dce9f5;
  background-color: var(--navy);
  /* Cuadrícula de plano tenue: módulo de 120 px y subdivisión de 24 px */
  background-image:
    linear-gradient(rgba(255, 255, 255, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .075) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  border-left: 3px solid var(--gold);
  box-shadow: -28px 0 60px -8px rgba(0, 0, 0, .55), -1px 0 0 rgba(0, 0, 0, .35);
  transform: translateX(100%);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
  touch-action: pan-y pinch-zoom;                    /* el deslizamiento horizontal lo lee visita.js */
  will-change: transform;
}
.visita.open .visita-panel { transform: translateX(0); }
.visita.dragging .visita-panel, .visita.dragging .visita-backdrop { transition: none; }
.visita-panel:focus { outline: none; }               /* el contenedor solo recibe foco de respaldo */
/* Cajetín de la lámina, pegado bajo el cotizador: celda con rayado dorado (sello) y dos renglones
   con los datos genéricos del despacho. Decorativo: texto alternativo vacío donde se admite */
.visita-panel::after {
  content: "ING.CMAE · QUITO\A VISITA TÉCNICA";
  content: "ING.CMAE · QUITO\A VISITA TÉCNICA" / "";
  flex: none; height: 56px; margin: 0 0 auto;
  padding-left: calc(28% + .8rem);
  white-space: pre; overflow: hidden;
  font: 600 .62rem/27px var(--mono); letter-spacing: .14em; color: #9fb4c8;
  border: 1px solid rgba(159, 211, 247, .32);
  background:
    repeating-linear-gradient(135deg, rgba(217, 164, 65, .75) 0 1px, transparent 1px 7px) left / 28% 100% no-repeat,
    linear-gradient(rgba(159, 211, 247, .32), rgba(159, 211, 247, .32)) 28% 0 / 1px 100% no-repeat,
    linear-gradient(rgba(159, 211, 247, .32), rgba(159, 211, 247, .32)) right 50% / 72% 1px no-repeat;
  pointer-events: none;
}

/* ---------------- 4. Cotizador dentro del panel ---------------- */
/* El panel ya es la lámina: el cotizador pierde su cuadro propio (fondo, desenfoque, borde).
   Cotizador + cajetín quedan centrados en el alto del panel (márgenes automáticos: si el
   contenido no cabe, se anulan y no se recorta nada arriba) */
.visita-panel .quick-quote { align-self: stretch; display: grid; gap: .3rem; margin: auto 0 1.6rem; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; }
.visita-panel .qq-head { flex-wrap: wrap; gap: .2rem .8rem; margin: 0 50px .4rem 0; padding: .7rem 0 .65rem; font-size: .74rem; letter-spacing: .1em; color: #d6e3ef; border-bottom: 1px dashed rgba(255, 255, 255, .28); }
.visita-panel .qq-title { margin: 1rem 0 .3rem; font-size: clamp(1.3rem, 5vw, 1.6rem); font-weight: 800; line-height: 1.2; letter-spacing: -.015em; color: #fff; text-wrap: balance; }
/* Línea de cota bajo la pregunta (decorativa) */
.visita-panel .qq-title::after {
  content: ""; display: block; height: 9px; margin-top: .85rem;
  background:
    linear-gradient(var(--gold), var(--gold)) 0 50% / 38% 1px no-repeat,
    linear-gradient(var(--blue-l), var(--blue-l)) 0 50% / 100% 1px no-repeat,
    linear-gradient(var(--blue-l), var(--blue-l)) 0 0 / 1px 100% no-repeat,
    linear-gradient(var(--blue-l), var(--blue-l)) 100% 0 / 1px 100% no-repeat;
  opacity: .7;
}
.visita-panel .quick-quote label { margin-top: .8rem; font-size: .8rem; font-weight: 600; letter-spacing: .01em; color: #eef4fa; }
.visita-panel .quick-quote select,
.visita-panel .quick-quote input { width: 100%; min-height: 46px; padding: .6rem .8rem; font-size: 1rem; background: #fff; color: var(--ink); border: 1px solid #fff; border-radius: var(--r); }
.visita-panel .quick-quote select:focus-visible,
.visita-panel .quick-quote input:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; box-shadow: none; }
.visita-panel .quick-quote .btn { margin-top: 1.3rem; min-height: 52px; }
.visita-panel .quick-quote .btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: none; }
.visita-panel .qq-foot { margin-top: .75rem; font-size: .7rem; letter-spacing: .03em; color: #d6e3ef; text-wrap: balance; }
@media (min-width: 900px) {
  .visita-panel { padding-left: 2rem; padding-right: max(2rem, env(safe-area-inset-right)); }
  .visita-panel .qq-title { margin-top: 1.4rem; }
  .visita-panel .qq-head { letter-spacing: .12em; }
  .visita-panel .qq-foot { font-size: .75rem; letter-spacing: .06em; }
}

/* ---------------- 5. Botón cerrar ---------------- */
/* Pegajoso: si el panel se desplaza (pantallas bajas) sigue a la vista */
.visita-close { position: sticky; top: 0; z-index: 2; flex: none; align-self: flex-end; display: grid; place-items: center; width: 44px; height: 44px; margin: 0 -.5rem -44px 0; padding: 0; background: var(--navy); color: #fff; border: 1px solid rgba(255, 255, 255, .4); border-radius: var(--r); font-size: 1.7rem; line-height: 1; cursor: pointer; transition: border-color .15s, color .15s; }
.visita-close:hover { border-color: var(--gold); color: var(--gold); }
.visita-close:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; box-shadow: none; }
/* Ventanas bajas (móvil apaisado): la × se desplaza con el contenido y no tapa el selector.
   El panel se sigue cerrando con Escape, con el fondo y deslizando a la derecha */
@media (max-height: 560px) {
  .visita-close { position: absolute; top: .6rem; right: .6rem; margin: 0; }
}

/* ---------------- 6. Pestaña flotante ---------------- */
/* Sobresale 8 px por la derecha (fuera de pantalla): el «asomo» al pasar el cursor no deja hueco.
   Oculta = fuera de pantalla + visibility:hidden (no se enfoca ni se pulsa). */
.visita-tab {
  position: fixed; top: 50%; right: -8px; z-index: 75;
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  width: 52px; padding: 1rem 8px 1rem 0;
  background: var(--gold); color: var(--navy);
  border: 0; border-radius: 6px 0 0 6px;
  font-family: var(--mono); font-size: .74rem; font-weight: 600; line-height: 1; letter-spacing: .14em; text-transform: uppercase;
  box-shadow: -8px 10px 26px -6px rgba(0, 0, 0, .45);
  cursor: pointer;
  transform: translate(100%, -50%);
  visibility: hidden;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .4s, background-color .15s;
}
.visita-tab.show { transform: translate(0, -50%); visibility: visible; transition: transform .4s cubic-bezier(.2, .8, .2, 1), visibility 0s, background-color .15s; }
@media (hover: hover) {
  .visita-tab.show:hover { transform: translate(-6px, -50%); background: var(--gold-l); }
}
.visita-tab svg { flex: none; width: 18px; height: 18px; }
.visita-tab span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }   /* se lee de abajo hacia arriba */
.visita-tab:focus-visible { outline: 3px solid var(--navy); outline-offset: -6px; box-shadow: 0 0 0 3px #fff, -8px 10px 26px -6px rgba(0, 0, 0, .45); }
/* Ventanas bajas (móvil apaisado): la pestaña se apoya sobre el botón del chat (bottom 88 + 50 px)
   en lugar de centrarse, para no cruzarse con él ni con WhatsApp */
@media (max-height: 560px) {
  .visita-tab { top: auto; bottom: 152px; gap: .45rem; padding-top: .7rem; padding-bottom: .7rem; font-size: .64rem; letter-spacing: .1em; transform: translate(100%, 0); }
  .visita-tab.show { transform: none; }
}
@media (max-height: 560px) and (hover: hover) {
  .visita-tab.show:hover { transform: translateX(-6px); }
}
/* Muy bajas: solo el ícono (el texto queda para lectores de pantalla) */
@media (max-height: 400px) {
  .visita-tab { padding-top: 13px; padding-bottom: 13px; }
  .visita-tab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Teléfono y tableta (< 900 px): la columna de texto llega a 20 px del borde y la pestaña centrada
   tapaba finales de renglón, montos del registro y controles (el «›» de los esquemas abría el
   panel). Aquí es un botón de 44 × 44 px solo con el ícono, apilado sobre el del chat (bottom 88 +
   50 px + aire), junto a los otros botones flotantes y fuera del centro de la pantalla; sin área
   táctil extra invisible. El texto «Solicitar visita» queda para lectores de pantalla. visita.js
   además la esconde sobre los formularios de #contacto y de #unete. Escritorio: sin cambios.
   Va después de las reglas de ventanas bajas: en < 900 px manda este tamaño (44 px). */
@media (max-width: 899px) {
  .visita-tab { top: auto; bottom: 152px; width: 52px; gap: 0; padding: 13px 8px 13px 0; transform: translate(100%, 0); }
  .visita-tab.show { transform: none; }
  .visita-tab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 899px) and (hover: hover) {
  .visita-tab.show:hover { transform: translateX(-6px); }
}

/* ---------------- 7. Página bloqueada mientras el panel está abierto ---------------- */
/* visita.js pone .visita-lock y --visita-sb (ancho de la barra de desplazamiento que desaparece) */
html.visita-lock body { overflow: hidden; padding-right: var(--visita-sb, 0px); }
html.visita-lock .wa-float,
html.visita-lock .chat-launcher,
html.visita-lock .chat-panel { margin-right: var(--visita-sb, 0px); }

/* ---------------- 8. Movimiento reducido e impresión ---------------- */
@media (prefers-reduced-motion: reduce) {
  .visita-panel { transform: none; opacity: 0; transition: opacity .15s linear; }
  .visita.open .visita-panel { opacity: 1; }
  .visita-tab, .visita-tab.show { transition: none; }
  .hero-link span { transition: none; }
}
@media print {
  .visita, .visita-tab { display: none !important; }
  html.visita-lock body { overflow: visible; padding-right: 0; }
}