/* Janua — soporte y presupuesto (janua.es/soporte/ y /presupuesto/). Sobre
   estilo.css, con el mismo aspecto que el alta. */
.contacto [hidden] { display:none !important; }

/* Como zetein.es/soporte, con la estética de Janua: a la izquierda, el titular,
   el plazo y los contactos (primero el teléfono); a la derecha, el formulario
   en su tarjeta. En móvil: titular, formulario y, debajo, los contactos. Fondo,
   el de la cabecera de la portada. */
.contacto-pagina { background:#ebeff3; }
.contacto { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,560px); column-gap:clamp(40px,7vw,120px);
            align-items:start; padding:56px 0 120px; }
.contacto-cabeza { grid-column:1; grid-row:1; }
.contacto-lado { grid-column:1; grid-row:2; margin-top:40px; }
.contacto-centro { grid-column:2; grid-row:1 / span 2; }
.contacto h1 { font-size:clamp(44px,5.6vw,76px); line-height:1.02; letter-spacing:-.055em; margin:20px 0 26px; }
.contacto h1 > span { color:var(--accent); }
.contacto-entrada { margin:0 0 20px; max-width:30em; font-size:18px; line-height:1.6; color:var(--muted); }
.contacto-plazo { display:flex; align-items:center; gap:10px; margin:0; font-size:15px; color:var(--muted); }
.contacto-reloj { flex:none; color:var(--accent); }
.contacto a { color:var(--accent); }

/* La tarjeta del formulario. */
.contacto-centro { padding:34px 36px 36px; border:1px solid var(--line); border-radius:28px; background:var(--white);
                   box-shadow:0 24px 60px #1020401a; }
.contacto-centro h2 { margin:0; font-size:30px; line-height:1.15; letter-spacing:-.035em; }
.contacto-nota { margin:8px 0 6px; font-size:14px; color:var(--muted); }
.contacto-fila { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.contacto-oblig { color:var(--accent); }
.contacto-form select { width:100%; font:inherit; font-size:16px; padding:13px 40px 13px 14px; border:1px solid var(--line);
                        border-radius:12px; background:var(--white); color:var(--ink); appearance:none;
                        background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
                        background-position:calc(100% - 20px) 55%,calc(100% - 15px) 55%; background-size:5px 5px; background-repeat:no-repeat; }
.contacto-form select:focus { outline:2px solid var(--accent); outline-offset:-1px; border-color:transparent; }
.contacto-form textarea::placeholder { color:#8b93a1; }

/* Teléfono, WhatsApp y correo: una fila cada uno, el dato en grande. */
.contacto-vias { list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.contacto-vias li { border-bottom:1px solid var(--line); }
.contacto-vias a { display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 16px; padding:18px 2px;
                   color:var(--ink); text-decoration:none; }
.contacto-vias span { grid-column:1; font-size:13px; color:var(--muted); }
.contacto-vias strong { grid-column:1; font-size:clamp(20px,2vw,24px); font-weight:500; letter-spacing:-.02em; overflow-wrap:anywhere; }
.contacto-vias i { grid-column:2; grid-row:1 / span 2; font-style:normal; color:var(--accent); font-size:18px; transition:transform .2s; }
.contacto-vias a:hover strong { color:var(--accent); }
.contacto-vias a:hover i { transform:translate(2px,-2px); }

.contacto-form label { display:block; font-weight:600; font-size:14px; margin:18px 0 7px; }
.contacto-opcional { font-weight:400; color:var(--muted); }
.contacto-form input, .contacto-form textarea {
  width:100%; font:inherit; font-size:16px; padding:13px 14px; border:1px solid var(--line);
  border-radius:12px; background:var(--white); color:var(--ink);
}
.contacto-form textarea { min-height:150px; resize:vertical; line-height:1.5; }
.contacto-form input:focus, .contacto-form textarea:focus {
  outline:2px solid var(--accent); outline-offset:-1px; border-color:transparent;
}

/* El campo para los bots: fuera de la vista (no `display:none`, que algunos se saltan). */
.contacto-trampa { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }

.contacto-boton { display:flex; justify-content:space-between; align-items:center; width:100%; margin-top:28px; padding:16px 24px; border:0; border-radius:999px;
                  background:var(--accent); color:var(--accent-text); font-size:16px; font-weight:600; }
.contacto-boton i { font-style:normal; }
.contacto-boton:hover { filter:brightness(1.08); }
.contacto-boton:disabled { opacity:.5; cursor:default; filter:none; }
.contacto-privacidad { margin:14px 0 0; font-size:13px; line-height:1.5; color:var(--muted); }
.contacto-privacidad a { color:inherit; border-bottom:1px solid currentColor; }

.contacto-mal { margin:22px 0 -6px; padding:11px 14px; border-radius:12px; background:#fdecea; color:#a8281d; font-size:15px; }
/* Encima del campo que lo tiene, debajo de su etiqueta (contacto.js lo pone ahí). */
.contacto-form label + .contacto-mal { margin:0 0 8px; }
.contacto-form [aria-invalid="true"] { border-color:#a8281d; }
.contacto-mal a { color:inherit; text-decoration:underline; }
.contacto-hecho { margin:0; font-size:19px; line-height:1.55; color:var(--ink); font-weight:600; }
.contacto-hecho:focus { outline:none; }

@media (max-width:1000px) {
  .contacto { grid-template-columns:minmax(0,600px); justify-content:center; padding-top:32px; }
  .contacto-cabeza, .contacto-centro, .contacto-lado { grid-column:1; grid-row:auto; }
  .contacto-centro { margin-top:32px; }
}
@media (max-width:560px) {
  .contacto-centro { padding:26px 20px 26px; border-radius:22px; }
  .contacto-fila { grid-template-columns:1fr; }
}