/* Vista rapida de contacto — diseño entregado, integrado como modal.
   Se abre desde los CTA "Solicitar demo" sin salir de la pagina; /contacto/
   sigue siendo el destino real de esos enlaces si el JS no corre.

   Todo cuelga de .qf-overlay y las clases van prefijadas `qf-` porque el
   diseño original usaba selectores de elemento (label, input, select,
   textarea) y nombres que ya existen en el sitio: `.contact-shell` es la
   seccion de contacto/index.html y `#contact-main :is(input,select,textarea)`
   de contact-page.css pisaria los campos. Los valores del diseño no cambian.

   Las variables viven en el componente, no en :root, por la misma razon. */

.qf-overlay{
  --st-orange:#FB923C;
  --st-orange-2:#FB923C;
  --st-orange-soft:#FB923C;
  --qf-black:#0B0B0C;
  --qf-gray:#77777B;
  --qf-field:#F7F7F7;
  --qf-white:#FFFFFF;

  position:fixed;
  inset:0;
  z-index:200;

  /* Flex + `margin:auto` en la hoja en vez de `place-items:center`: un modal
     centrado con grid recorta la parte de arriba cuando su contenido es mas
     alto que el viewport, y al ser `position:fixed` no hay forma de llegar a
     el. Asi se centra igual cuando cabe y se puede desplazar cuando no. */
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow-y:auto;
  overscroll-behavior:contain;

  /* El telon es translucido a proposito: el panel izquierdo tiene que dejar
     ver la pagina real desde la que se abrio el formulario, no un fondo
     inventado. Con #111 solido no habria nada que desenfocar detras. */
  background:
    radial-gradient(circle at 18% 20%,rgba(251,146,60,.16),transparent 30%),
    radial-gradient(circle at 82% 80%,rgba(251,146,60,.12),transparent 28%),
    rgba(17,17,18,.34);

  /* Hereda la Inter variable del sitio: los pesos 780/750/700 del diseño
     solo existen de verdad con la fuente variable cargada. */
  font-family:var(--font-sans);

  opacity:0;
  visibility:hidden;
  transition:opacity .28s cubic-bezier(.16,1,.3,1),visibility 0s .28s;
}

.qf-overlay[data-open]{
  opacity:1;
  visibility:visible;
  transition:opacity .28s cubic-bezier(.16,1,.3,1),visibility 0s;
}

/* SALIDA SINCRONIZADA — esto es lo que hacía que la salida "se trabara".

   El telón sólo empezaba a desvanecerse cuando `close()` quitaba `data-open`,
   y eso ocurre DESPUÉS de que termine la animación del panel. La secuencia
   real era: el panel se va (300 ms) → el fondo oscuro se queda quieto y opaco
   → recién entonces se desvanece (280 ms). Ese fondo parado en medio, con el
   panel ya invisible, es el tirón que se veía; casi 600 ms para cerrar algo
   que debería tardar 300.

   Regla del mismo peso que `[data-open]`, así que va DESPUÉS a propósito:
   empatan en especificidad y gana la última. Al arrancar en el mismo cuadro
   que el panel, panel y fondo se van juntos y el cierre dura lo que dice
   durar. */
.qf-overlay[data-closing]{
  opacity:0;
  transition:opacity .3s cubic-bezier(.4,0,.9,1),visibility 0s .3s;
}

/* La pagina real desenfocada es el fondo del panel izquierdo.
   Se desenfoca la pagina, no el panel: `backdrop-filter` no llega a verla
   porque el telon es un contenedor con scroll propio, y dentro de el lo unico
   que hay detras del panel es la propia hoja del modal. Con `filter` sobre el
   contenido de la pagina el efecto es el mismo y funciona en todos lados. */
/* Retirado junto con el panel izquierdo: ese desenfoque existia UNICAMENTE
   para verse a traves de el (era su fondo). Sin panel no hay nada que dejar
   ver, que es el mismo razonamiento con el que la version movil ya lo
   apagaba. Ademas era la pieza mas cara del telon: `filter:blur()` sobre todo
   el contenido de la pagina obliga a rasterizarla entera. */
html[data-qf-open] body > *:not(.qf-overlay){
  filter:none;
}

/* El desenfoque NO se transiciona. Animar `filter:blur()` obliga al navegador
   a rasterizar la pagina entera en cada cuadro, y con el hero a pantalla
   completa eso es justo lo que hacia saltar la entrada. Se aplica de golpe,
   tapado por el fundido del telon, y cuesta un rasterizado en vez de treinta. */

/* La capa de ruido es un fijo a opacidad .012: desenfocarla no se nota y
   ahorra una pasada de blur. */
html[data-qf-open] .page-noise{
  display:none;
}

/* Los elementos "cristal" del sitio (.nav-shell, los menus desplegables, los
   paneles de producto) llevan `backdrop-filter`. Un ancestro con `filter` crea
   un backdrop root, y entonces esos elementos ya no tienen que muestrear: el
   navegador los pinta como un bloque plano de bordes duros. Eso era el
   recuadro que se veia alrededor del logo.

   Con la pagina ya desenfocada ese cristal no aporta nada, asi que se apaga
   mientras el modal esta abierto. Conservan su fondo translucido. */
html[data-qf-open] body > *:not(.qf-overlay),
html[data-qf-open] body > *:not(.qf-overlay) *{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.qf-overlay *{box-sizing:border-box}
.qf-overlay button,
.qf-overlay input,
.qf-overlay textarea,
.qf-overlay select{font:inherit}


/* =========================
   CONTENEDOR PRINCIPAL
   ========================= */

.qf-shell{
  /* Se retira el panel visual difuminado de la izquierda: la hoja queda de
     UNA sola columna, como ya estaba en movil. El ancho no es un numero
     nuevo, es exactamente el que ocupaba el formulario antes (48% de los
     1508px de la hoja de dos columnas), asi que el panel blanco conserva su
     medida y sus proporciones; lo unico que desaparece es la mitad de al
     lado. */
  width:min(724px,calc(100vw - 24px));
  min-height:min(860px,calc(100vh - 24px));

  /* El cuadro se queda DONDE YA ESTABA: pegado a la derecha, que es donde
     caia el formulario cuando la hoja tenia dos columnas. No se centra.

     El margen derecho reproduce exactamente el borde de antes: la hoja de
     1508px iba centrada, asi que su canto derecho quedaba a (100vw-1508)/2
     del borde de la pantalla, y nunca a menos de los 12px de aire minimo.
     `margin-left:auto` es lo que lo empuja a la derecha por encima del
     `justify-content:center` del telon; los `auto` de arriba y abajo siguen
     centrandolo en vertical igual que antes. */
  margin:auto max(12px,calc((100vw - 1508px) / 2)) auto auto;
  flex:0 0 auto;

  /* Sin fondo: el blanco lo pone .qf-panel. */
  background:transparent;

  /* El diseño trae `overflow:hidden` y anula el radio en movil, asi que el
     radio de escritorio venia implicito; se toma el de la captura. */
  border-radius:28px;
  overflow:hidden;

  position:relative;

  display:grid;
  grid-template-columns:1fr;

  box-shadow:0 28px 90px rgba(0,0,0,.28);
}

/* El retraso de 60ms deja pasar el cuadro en el que se rasteriza el
   desenfoque de la pagina, para que la hoja arranque en limpio. */
.qf-overlay[data-open] .qf-shell{
  animation:qfShellIn .62s .06s cubic-bezier(.16,1,.3,1) both;
  will-change:transform,opacity;
}

/* Entrada de derecha a izquierda. */
@keyframes qfShellIn{
  from{
    opacity:0;
    transform:translate3d(48px,0,0) scale(.985);
  }
  to{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
  }
}

.qf-overlay[data-closing] .qf-shell{
  animation:qfShellOut .3s cubic-bezier(.4,0,.9,1) forwards;
}

/* Salida de IZQUIERDA A DERECHA: el panel se retira por el mismo borde por el
   que entró.

   Antes recorría 28px, frente a los 48px de la entrada. A esa distancia el
   movimiento no se lee como que el panel se marcha, sino como un tirón seco
   antes de desaparecer: la mitad del "se traba". Ahora sale 96px, más que la
   entrada, porque la salida dura la mitad de tiempo (.3s contra .62s) y hace
   falta más recorrido para que se lea como desplazamiento y no como parpadeo.

   El `from` explícito importa: sin él, el fotograma inicial se toma del estilo
   calculado en ese instante, que depende de si la animación de entrada llegó a
   terminar. Cerrar el modal a media entrada daba un salto. Con `from` fijo,
   la salida arranca siempre desde el mismo sitio.

   Sin `filter`: era el segundo filtro animado por cuadro. */
@keyframes qfShellOut{
  from{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
  }
  to{
    opacity:0;
    transform:translate3d(96px,0,0) scale(.985);
  }
}


/* =========================
   ENTRADA ESCALONADA
   =========================
   El contenido del panel entra detras de la hoja, por filas. Solo `transform`
   y `opacity`, que el compositor resuelve sin repintar. */

@keyframes qfRise{
  from{opacity:0;transform:translate3d(0,14px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}

.qf-overlay[data-open] .qf-headline,
.qf-overlay[data-open] .qf-grid > .qf-field,
.qf-overlay[data-open] .qf-footer,
.qf-overlay[data-open] .qf-close{
  animation:qfRise .52s cubic-bezier(.16,1,.3,1) both;
}

.qf-overlay[data-open] .qf-headline{animation-delay:.16s}
.qf-overlay[data-open] .qf-grid > .qf-field:nth-child(1){animation-delay:.24s}
.qf-overlay[data-open] .qf-grid > .qf-field:nth-child(2){animation-delay:.29s}
.qf-overlay[data-open] .qf-grid > .qf-field:nth-child(3){animation-delay:.34s}
.qf-overlay[data-open] .qf-grid > .qf-field:nth-child(4){animation-delay:.39s}
.qf-overlay[data-open] .qf-grid > .qf-field:nth-child(5){animation-delay:.44s}
.qf-overlay[data-open] .qf-footer{animation-delay:.50s}
.qf-overlay[data-open] .qf-close{animation-delay:.34s}


/* =========================
   PANEL IZQUIERDO
   ========================= */

/* El degradado crema del diseño se conserva, pero con alfa: es un tinte sobre
   la pagina desenfocada en vez de una superficie opaca. */
.qf-visual{
  position:relative;
  min-height:860px;
  overflow:hidden;
  background:linear-gradient(135deg,
    rgba(247,243,239,.42) 0%,
    rgba(238,233,230,.30) 40%,
    rgba(242,237,233,.42) 100%);
}


/* =========================
   BLOBS / LUCES
   ========================= */

/* Antes eran el motivo del panel; ahora el motivo es la pagina real, asi que
   bajan a ser un velo de luz calida sobre el cristal.

   El desenfoque es un degradado radial, no `filter:blur(55px)`. Cuatro discos
   con blur real, flotando en bucle, son cuatro rasterizados por cuadro; el
   degradado se ve igual y el compositor solo mueve una textura. */
.qf-orb{
  position:absolute;
  border-radius:999px;
  opacity:.38;
  pointer-events:none;
}

/* Higiene de capas (la misma regla que styles.css y trust-story.css): el
   telon pasa la mayor parte de la sesion cerrado, asi que anunciar aqui
   `will-change` dejaba cuatro texturas de hasta 540x540 reservadas en memoria
   de video durante toda la vida de la pagina para algo que nadie esta viendo.
   La pista se activa solo con el panel abierto, que es cuando los orbes se
   mueven de verdad. */
.qf-overlay[data-open] .qf-orb{will-change:transform}

.qf-orb.one{
  width:540px;height:540px;
  left:-150px;top:-125px;
  background:radial-gradient(circle closest-side,rgba(251,146,60,.55),rgba(251,146,60,0));
  animation:qfFloatA 12s ease-in-out infinite alternate;
}

.qf-orb.two{
  width:470px;height:470px;
  right:-150px;top:30%;
  background:radial-gradient(circle closest-side,rgba(251,146,60,.75),rgba(251,146,60,0));
  animation:qfFloatB 15s ease-in-out infinite alternate;
}

.qf-orb.three{
  width:400px;height:400px;
  left:18%;bottom:-125px;
  background:radial-gradient(circle closest-side,rgba(251,146,60,.95),rgba(251,146,60,0));
  animation:qfFloatC 13s ease-in-out infinite alternate;
}

.qf-orb.four{
  width:280px;height:280px;
  right:10%;bottom:9%;
  background:radial-gradient(circle closest-side,rgba(251,146,60,.38),rgba(251,146,60,0));
  animation:qfFloatA 10s ease-in-out infinite alternate-reverse;
}

@keyframes qfFloatA{to{transform:translate(60px,45px) scale(1.08)}}
@keyframes qfFloatB{to{transform:translate(-50px,-34px) scale(.92)}}
@keyframes qfFloatC{to{transform:translate(35px,-55px) scale(1.12)}}


.qf-mark{
  position:absolute;
  z-index:4;
  left:54px;
  bottom:50px;
  color:rgba(17,17,18,.28);
  font-size:13px;
  font-weight:700;
  letter-spacing:.02em;
}


/* =========================
   PANEL DERECHO
   ========================= */

.qf-panel{
  background:var(--qf-white);
  padding:46px 42px 34px 38px;
  display:flex;
  flex-direction:column;
  min-width:0;
  position:relative;
}


/* =========================
   CERRAR
   ========================= */

.qf-close{
  position:absolute;
  right:28px;
  top:22px;
  width:56px;
  height:56px;
  border:0;
  border-radius:50%;
  background:#F7F7F7;
  display:grid;
  place-items:center;
  color:#111;
  cursor:pointer;
  transition:transform .22s ease,background .22s ease;
}

.qf-close:hover{
  transform:rotate(8deg) scale(1.04);
  background:#f1f1f1;
}

.qf-close svg{width:19px;height:19px}


/* =========================
   TITULO
   ========================= */

.qf-headline{
  margin:0;
  max-width:560px;
  font-size:clamp(48px,4.25vw,70px);
  line-height:.93;
  letter-spacing:-.055em;
  font-weight:780;
  color:var(--qf-black);
}

.qf-accent{
  position:relative;
  display:inline-block;
}

.qf-accent::after{
  content:"";
  position:absolute;
  height:6px;
  border-radius:10px;
  left:2px;
  right:4px;
  bottom:-7px;
  background:var(--st-orange);
  transform:scaleX(.35);
  transform-origin:left;
}

.qf-overlay[data-open] .qf-accent::after{
  animation:qfAccentIn .7s .52s cubic-bezier(.16,1,.3,1) forwards;
}

@keyframes qfAccentIn{to{transform:scaleX(1)}}


/* =========================
   FORMULARIO
   ========================= */

.qf-form{
  margin-top:48px;
  display:flex;
  flex-direction:column;
  flex:1;
}

.qf-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px 40px;
}

.qf-field{min-width:0}
.qf-field.full{grid-column:1 / -1}

.qf-field label{
  display:block;
  color:#111;
  font-weight:700;
  font-size:17px;
  letter-spacing:-.02em;
  margin:0 0 13px;
}

.qf-field input,
.qf-field select,
.qf-field textarea{
  width:100%;
  border:1px solid transparent;
  outline:none;
  border-radius:7px;
  background:var(--qf-field);
  color:#111;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}

.qf-field input,
.qf-field select{
  height:62px;
  padding:0 19px;
  font-size:16px;
}

.qf-field select{
  appearance:none;
  background-image:
    linear-gradient(45deg,transparent 50%,#777 50%),
    linear-gradient(135deg,#777 50%,transparent 50%);
  background-position:
    calc(100% - 22px) 27px,
    calc(100% - 16px) 27px;
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
  padding-right:50px;
}

/* TELÉFONO CON PREFIJO DE PAÍS.
   Dos controles dentro de la misma celda de la rejilla. No cambia el alto ni
   el estilo del campo: son los mismos 62px, el mismo fondo y el mismo radio
   que el resto; sólo se reparte el ancho.

   El prefijo va fijo en 108px, que es lo que ocupa el caso más largo
   ("DO +1809") con su flecha, y el número se queda con el resto. `min-width:0`
   en el input es obligatorio: sin él un hijo de rejilla se niega a encoger por
   debajo de su contenido y desborda la celda en pantallas estrechas. */
.qf-tel{
  display:grid;
  grid-template-columns:108px minmax(0,1fr);
  gap:8px;
}

.qf-tel input{min-width:0}

/* La flecha del <select> se dibuja con dos gradientes posicionados desde la
   derecha. En un select estrecho hay que acercarla al borde y recortar el
   relleno, o se come el texto del prefijo. */
.qf-tel select{
  padding:0 12px;
  padding-right:28px;
  background-position:
    calc(100% - 15px) 27px,
    calc(100% - 9px) 27px;
  font-variant-numeric:tabular-nums;
}

.qf-field textarea{
  min-height:245px;
  resize:vertical;
  padding:18px 19px;
  font-size:16px;
  line-height:1.55;
}

.qf-field input:focus,
.qf-field select:focus,
.qf-field textarea:focus{
  background:#fff;
  border-color:rgba(251,146,60,.72);
  box-shadow:0 0 0 4px rgba(251,146,60,.11);
}

.qf-field input::placeholder,
.qf-field textarea::placeholder{color:#7e7e82}

/* Trampa antispam: fuera de pantalla, nunca visible ni enfocable. */
.qf-hp{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}


/* =========================
   ABAJO DEL FORMULARIO
   ========================= */

.qf-footer{
  margin-top:auto;
  padding-top:30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.qf-mail{
  font-size:15px;
  color:#C8C8CA;
  font-weight:600;
  white-space:nowrap;
}

.qf-mail a{
  color:#B9B9BC;
  text-decoration:underline;
  text-underline-offset:3px;
}


/* =========================
   BOTON ENVIAR
   ========================= */

.qf-submit{
  border:0;
  background:#1E1E1F;
  color:#fff;
  height:56px;
  min-width:230px;
  padding:0 28px;
  border-radius:999px;
  font-weight:750;
  font-size:15px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  cursor:pointer;
  overflow:hidden;
  position:relative;
  transition:transform .2s ease,background .2s ease;
}

.qf-submit::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--st-orange);
  transform:translateX(-102%);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}

.qf-submit:hover::before{transform:translateX(0)}
.qf-submit:hover{transform:translateY(-2px)}

.qf-submit span,
.qf-submit svg{
  position:relative;
  z-index:1;
}

.qf-submit svg{
  width:18px;
  height:18px;
  transition:transform .22s ease;
}

.qf-submit:hover svg{transform:translateX(5px)}

.qf-submit[disabled]{
  cursor:progress;
  opacity:.72;
}
.qf-submit[disabled]:hover{transform:none}
.qf-submit[disabled]:hover::before{transform:translateX(-102%)}


/* =========================
   AVISO DE ESTADO
   ========================= */

.qf-toast{
  position:fixed;
  left:50%;
  bottom:26px;
  transform:translate(-50%,20px);
  background:#111;
  color:#fff;
  border-radius:999px;
  padding:14px 20px;
  font-size:14px;
  font-weight:700;
  opacity:0;
  pointer-events:none;
  transition:.3s ease;
  z-index:250;
}

.qf-toast.show{
  opacity:1;
  transform:translate(-50%,0);
}

.qf-toast b{color:var(--st-orange)}
.qf-toast[data-state="error"] b{color:#ff8a8a}


/* =========================
   TABLET
   ========================= */

@media (max-width:1050px){

  .qf-panel{
    padding-left:32px;
    padding-right:32px;
  }

  .qf-grid{
    gap:24px;
  }

}


/* =========================
   MOVIL
   =========================
   Tambien por ALTURA, no solo por ancho. Un telefono en horizontal mide 844px
   de ancho (iPhone) y pasaba por escritorio: recibia la hoja de dos columnas
   con 860px de alto minimo dentro de una pantalla de 390px. Cualquier
   viewport bajo se lleva la version de una columna a sangre completa. */

@media (max-width:820px), (max-height:560px){

  .qf-overlay{
    background:#fff;
  }

  .qf-shell{
    width:100%;
    min-height:100vh;
    min-height:100dvh;
    margin:0;
    border-radius:0;
    grid-template-columns:1fr;
    box-shadow:none;
  }

  .qf-visual{
    display:none;
  }

  /* Sin panel izquierdo no hay nada que dejar ver: el modal ocupa la
     pantalla completa y desenfocar la pagina no se aprecia. */
  html[data-qf-open] body > *:not(.qf-overlay){
    filter:none;
  }

  .qf-panel{
    min-height:100vh;
    min-height:100dvh;
    padding:82px 22px 24px;
  }

  .qf-close{
    right:18px;
    top:18px;
    width:48px;
    height:48px;
  }

  .qf-headline{
    font-size:52px;
    max-width:500px;
  }

  .qf-form{
    margin-top:44px;
  }

  .qf-grid{
    grid-template-columns:1fr;
    gap:23px;
  }

  .qf-field.full{
    grid-column:auto;
  }

  .qf-field textarea{
    min-height:210px;
  }

  .qf-footer{
    padding-top:24px;
    align-items:stretch;
    flex-direction:column-reverse;
  }

  .qf-submit{
    width:100%;
  }

  .qf-mail{
    text-align:center;
    font-size:13px;
  }

}


@media (max-width:430px){

  .qf-headline{
    font-size:45px;
  }

  .qf-field label{
    font-size:15px;
  }

  .qf-field input,
  .qf-field select{
    height:58px;
  }

}


@media (prefers-reduced-motion:reduce){

  body > *:not(.qf-overlay){
    transition:none !important;
  }

  .qf-overlay,
  .qf-overlay *,
  .qf-overlay *::before,
  .qf-overlay *::after{
    animation:none !important;
    transition:none !important;
  }

}