/* ============================================================ */
/* CONTACTO -- capa de entrada del "Expediente de cotizacion"    */
/* (2026-08-24).                                                 */
/*                                                               */
/* Una sola entrada editorial, de una sola pasada, que NO se     */
/* repite al desplazarse. Ocho pasos con desfase leve:           */
/*   1 encabezado fotografico                                    */
/*   2 kicker  ·  3 titular + bajada                             */
/*   4 datos de contacto  ·  5 que necesitas                     */
/*   6 ubicacion  ·  7 antecedentes  ·  8 cierre                 */
/* El ultimo paso arranca a 440 ms y dura 300 ms: la entrada     */
/* cierra a ~740 ms, dentro del rango pedido de 550-750 ms.      */
/*                                                               */
/* Este archivo y su JS NUNCA tocan el envio, las validaciones,  */
/* el honeypot, el timestamp, la subida de archivo, Turnstile ni */
/* los estados de exito/error. Tampoco tocan las cascadas de     */
/* categoria/producto/formato ni region/comuna, que viven en     */
/* contacto-expediente.js.                                       */
/*                                                               */
/* SEGURIDAD SIN JS: el estado por defecto es SIEMPRE visible    */
/* (opacity:1). Solo se oculta para animar cuando el script      */
/* confirmo que esta vivo y agrego .ct-ready. Si no carga, o si  */
/* el visitante desactivo JavaScript, estas reglas nunca aplican */
/* y ningun contenido esencial queda en opacity:0.               */
/* ============================================================ */

[data-ct-in]{ opacity:1; transform:none; }

/* Buscador global del catálogo dentro del expediente. Mantiene la cascada
   categoría -> producto -> formato como respaldo visible, pero permite entrar
   por el nombre real de cualquiera de los productos publicados. */
.ct-main .qf-product-finder{
  position:relative;
  display:grid;
  grid-template-columns:minmax(220px,.72fr) minmax(300px,1.28fr);
  gap:10px 24px;
  align-items:end;
  margin:0 0 18px;
  padding:18px 20px;
  color:#fff;
  background:
    linear-gradient(135deg,rgba(215,0,0,.13),transparent 36%),
    linear-gradient(90deg,#06182c 0%,#092641 100%);
  border-left:3px solid var(--brick);
  box-shadow:0 14px 34px rgba(6,24,44,.12);
}
.ct-main .qf-product-finder::after{
  content:'';
  position:absolute;
  right:18px;
  top:0;
  width:74px;
  height:1px;
  background:var(--brick);
}
.qf-product-finder-copy span{
  display:block;
  margin:0 0 5px;
  font:800 9.5px/1.2 'Archivo',sans-serif;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:#ff625a;
}
.qf-product-finder-copy label{
  display:block;
  margin:0;
  font:800 15px/1.2 'Archivo',sans-serif;
  letter-spacing:.01em;
  color:#fff;
}
.qf-product-finder-copy p,
.qf-product-search-help{
  margin:7px 0 0;
  font-size:11px;
  line-height:1.45;
  color:rgba(255,255,255,.7);
}
.qf-product-combobox{ position:relative; align-self:center; }
.qf-product-combobox input{
  display:block;
  width:100%;
  height:50px;
  box-sizing:border-box;
  padding:0 46px 0 44px;
  border:1px solid rgba(255,255,255,.32);
  border-radius:2px;
  background:#fff;
  color:#06182c;
  font:600 13.5px/1 'Archivo',sans-serif;
  outline:none;
  box-shadow:0 8px 22px rgba(0,0,0,.16);
}
.qf-product-combobox input::placeholder{ color:#687282; font-weight:500; }
.qf-product-combobox input:focus{
  border-color:#ff4038;
  box-shadow:0 0 0 3px rgba(255,64,56,.24),0 8px 22px rgba(0,0,0,.18);
}
.qf-product-search-icon{
  position:absolute;
  left:15px;
  top:15px;
  z-index:2;
  width:20px;
  height:20px;
  color:#d70000;
  pointer-events:none;
}
.qf-product-search-icon svg{ width:100%; height:100%; display:block; }
.qf-product-search-clear{
  position:absolute;
  z-index:4;
  right:7px;
  top:7px;
  width:36px;
  height:36px;
  border:0;
  background:transparent;
  color:#495567;
  font:500 25px/1 Arial,sans-serif;
  cursor:pointer;
}
.qf-product-search-clear:hover{ color:#d70000; }
.qf-product-search-clear:focus-visible{ outline:2px solid #d70000; outline-offset:0; }
.qf-product-results{
  position:absolute;
  z-index:30;
  left:0;
  right:0;
  top:calc(100% + 6px);
  max-height:300px;
  overflow:auto;
  padding:5px;
  background:#fff;
  border:1px solid rgba(6,24,44,.18);
  box-shadow:0 18px 44px rgba(3,17,31,.24);
}
.qf-product-result{
  display:grid;
  grid-template-columns:1fr auto;
  gap:5px 16px;
  align-items:center;
  min-height:50px;
  padding:8px 11px;
  color:#06182c;
  cursor:pointer;
  border-left:3px solid transparent;
}
.qf-product-result + .qf-product-result{ border-top:1px solid rgba(6,24,44,.09); }
.qf-product-result strong{ font:700 13px/1.25 'Archivo',sans-serif; }
.qf-product-result small{
  font:700 9px/1.2 'Archivo',sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#687282;
}
.qf-product-result span{
  grid-column:1/-1;
  font-size:10.5px;
  line-height:1.35;
  color:#687282;
}
.qf-product-result:hover,
.qf-product-result.is-active,
.qf-product-result[aria-selected="true"]{
  background:#f1f4f7;
  border-left-color:#d70000;
}
.qf-product-result-empty{
  margin:0;
  padding:16px 13px;
  color:#4f5d6d;
  font-size:12px;
  line-height:1.45;
}
.qf-product-search-help{
  grid-column:2;
  margin:0;
  min-height:16px;
}

@media (max-width:900px){
  .ct-main .qf-product-finder{ grid-template-columns:1fr; align-items:stretch; }
  .qf-product-search-help{ grid-column:1; }
}
@media (max-width:520px){
  .ct-main .qf-product-finder{ padding:16px 14px; margin-left:-2px; margin-right:-2px; }
  .qf-product-combobox input{ height:48px; font-size:13px; }
  .qf-product-result{ grid-template-columns:1fr; gap:3px; }
  .qf-product-result small{ grid-row:auto; }
}

@media (prefers-reduced-motion:no-preference){
  .ct-main.ct-ready [data-ct-in]{
    opacity:0; transform:translateY(10px); transition:none;
  }
  .ct-main.ct-ready.is-in [data-ct-in]{
    opacity:1; transform:none;
    transition:opacity .30s cubic-bezier(.16,.76,.24,1), transform .30s cubic-bezier(.16,.76,.24,1);
  }

  .ct-main.ct-ready.is-in [data-ct-in="1"]{ transition-delay:0ms; }
  .ct-main.ct-ready.is-in [data-ct-in="2"]{ transition-delay:80ms; }
  .ct-main.ct-ready.is-in [data-ct-in="3"]{ transition-delay:140ms; }
  .ct-main.ct-ready.is-in [data-ct-in="4"]{ transition-delay:210ms; }
  .ct-main.ct-ready.is-in [data-ct-in="5"]{ transition-delay:270ms; }
  .ct-main.ct-ready.is-in [data-ct-in="6"]{ transition-delay:330ms; }
  .ct-main.ct-ready.is-in [data-ct-in="7"]{ transition-delay:390ms; }
  .ct-main.ct-ready.is-in [data-ct-in="8"]{ transition-delay:440ms; }

  /* El encabezado no se desplaza: se asienta. Un acercamiento minimo    */
  /* de la propia fotografia, una sola vez, sin barridos ni mascaras.    */
  .ct-main.ct-ready [data-ct-in="1"]{ opacity:0; transform:none; }
  .ct-main.ct-ready [data-ct-in="1"] img{ transform:scale(1.026); transition:none; }
  .ct-main.ct-ready.is-in [data-ct-in="1"] img{
    transform:scale(1);
    transition:transform .66s cubic-bezier(.16,.76,.24,1);
  }

  /* Filete rojo superior del marco: se traza de izquierda a derecha una */
  /* sola vez, acompanando la entrada del encabezado.                    */
  .ct-main.ct-ready .exp-frame{ border-top-color:transparent; }
  .ct-main.ct-ready .exp-frame::before{
    content:''; display:block; height:3px; margin:-3px -1px 0; width:0;
    background:var(--brick);
  }
  .ct-main.ct-ready.is-in .exp-frame::before{
    width:calc(100% + 2px);
    transition:width .52s cubic-bezier(.65,0,.15,1);
  }
}
