/* =====================================================================
   VENTANA DE CONTACTO DE LA WEB  -  entrega 335
   Para cambiar colores o tamaños, toca SOLO estas variables.
   ===================================================================== */
:root{
  --ct335-azul: #3f6fa8;        /* cabecera, marco y botón                   */
  --ct335-verde: #2e8b57;       /* el visto de "consulta enviada"            */
  --ct335-rojo: #c0392b;        /* avisos de error                           */
  --ct335-fondo: #eef2f7;       /* fondo de las casillas                     */
  --ct335-tinta: #26303d;
  --ct335-ancho: 620px;         /* ancho de la ventana                       */
  --ct335-marco: 3px;           /* grosor del marco (0 = sin marco)          */
}

/* ---------------- a partir de aquí no hace falta tocar ---------------- */
html.ct335-sin-scroll, html.ct335-sin-scroll body{ overflow:hidden; }
div.ct335-fondo{ position:fixed; inset:0; z-index:9500; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(20,30,45,.55); font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:1.45; color:var(--ct335-tinta); }
div.ct335-fondo[hidden], div.ct335-fondo [hidden]{ display:none !important; }
div.ct335-fondo *, div.ct335-fondo *::before, div.ct335-fondo *::after{ box-sizing:border-box; }
div.ct335-fondo svg{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

section.ct335-caja{ width:var(--ct335-ancho); max-width:100%; max-height:calc(100vh - 32px); overflow-y:auto; border:var(--ct335-marco) solid var(--ct335-azul); border-radius:14px; background:#fff; box-shadow:0 0 0 4px rgba(63,111,168,.18), 0 24px 60px rgba(10,20,35,.35); animation:ct335-sale .18s ease-out; }
@keyframes ct335-sale{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ section.ct335-caja{ animation:none; } }

header.ct335-cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:18px 14px 16px 22px; background:var(--ct335-azul); color:#fff; }
header.ct335-cab h2{ margin:0 0 4px; padding:0; border:0; background:none; color:#fff; font-size:21px; font-weight:bold; line-height:1.2; }
header.ct335-cab p{ margin:0; color:#fff; opacity:.92; font-size:13.5px; }
button.ct335-x{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:36px; height:36px; margin:0; padding:0; border:0; border-radius:8px; background:transparent; color:#fff; cursor:pointer; }
button.ct335-x:hover{ background:rgba(255,255,255,.16); }
button.ct335-x svg{ width:22px; height:22px; }

form.ct335-form{ display:flex; flex-direction:column; gap:12px; margin:0; padding:18px 22px 20px; }
div.ct335-fila{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
form.ct335-form label{ display:flex; flex-direction:column; gap:5px; margin:0; font-size:12.5px; font-weight:bold; color:#4a5565; }
form.ct335-form input, form.ct335-form select, form.ct335-form textarea{ width:100%; margin:0; padding:10px 12px; border:1px solid #c9d4e3; border-radius:8px; background:var(--ct335-fondo); font-family:inherit; font-size:14px; font-weight:normal; color:var(--ct335-tinta); }
form.ct335-form select{ height:41px; padding:0 10px; }
form.ct335-form textarea{ min-height:110px; resize:vertical; }
form.ct335-form input:focus, form.ct335-form select:focus, form.ct335-form textarea:focus{ background:#fff; border-color:var(--ct335-azul); outline:none; box-shadow:0 0 0 3px rgba(63,111,168,.2); }
div.ct335-trampa{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
p.ct335-error{ margin:0; padding:9px 12px; border-left:4px solid var(--ct335-rojo); border-radius:6px; background:#fbeceb; color:#7d221c; font-weight:bold; }
div.ct335-pie{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
div.ct335-pie small{ flex:1 1 220px; color:#6b7686; font-size:12px; }
button.ct335-boton{ display:inline-flex; align-items:center; justify-content:center; padding:12px 24px; border:0; border-radius:8px; background:var(--ct335-azul); color:#fff; font-family:inherit; font-size:15px; font-weight:bold; cursor:pointer; }
button.ct335-boton:hover{ background:#355f91; }
button.ct335-boton:disabled{ opacity:.6; cursor:default; }
div.ct335-fondo button:focus-visible{ outline:3px solid #1f98a9; outline-offset:2px; }

div.ct335-gracias{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:30px 24px 26px; text-align:center; }
span.ct335-ok{ display:flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; background:#e3f4ea; color:var(--ct335-verde); }
span.ct335-ok svg{ width:30px; height:30px; stroke-width:2.6; }
div.ct335-gracias h3{ margin:4px 0 0; font-size:20px; color:var(--ct335-tinta); }
div.ct335-gracias p{ margin:0 0 8px; max-width:420px; color:#4a5565; }

/* botón "Escribir consulta" de la página Contacto */
div.wl-contacto a.wl-boton-consulta{ margin-top:10px; padding:10px 20px; font-size:14px; word-break:normal; }

/* el chat parpadea un momento cuando "Pedir presupuesto" lo abre */
#chat316.ct335-resalta section.chat316-ventana, #chat316.ct335-resalta button.chat316-burbuja{ animation:ct335-latido .9s ease-out 1; }
@keyframes ct335-latido{ 0%{ box-shadow:0 0 0 0 rgba(63,111,168,.7); } 100%{ box-shadow:0 0 0 18px rgba(63,111,168,0); } }

@media (max-width:560px){
  div.ct335-fila{ grid-template-columns:minmax(0,1fr); }
  div.ct335-fondo{ align-items:flex-end; padding:8px; }
  form.ct335-form{ padding:14px 14px 16px; }
}