/* ==========================================================================
   Contacto (/contacto/) · Contacto.dc.html
   Portada con canales, formulario «Escríbenos» y teléfono con la vista previa del mensaje; oficina con mapa y
   horario; redes. Los campos del formulario usan las clases comunes .vcampo/.vgrupo/.vpill (componentes.css).
   ========================================================================== */

/* Portada */
.heroe-contacto{position:relative;background:var(--noche);color:#fff;overflow:hidden}
.heroe-contacto__fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%;opacity:.14}
.heroe-contacto__in{position:relative;max-width:var(--carril);margin:0 auto;padding:120px 28px 64px;display:grid;grid-template-columns:minmax(0,1fr);gap:28px 40px;align-items:start}
@media (min-width:760px){.heroe-contacto__in{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}}
@media (min-width:1180px){.heroe-contacto__in{grid-template-columns:minmax(0,.9fr) minmax(0,1.15fr) minmax(0,.75fr)}.heroe-contacto--sintel .heroe-contacto__in{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}}
.heroe-contacto__txt{display:flex;flex-direction:column;gap:18px}
.heroe-contacto__titulo{margin:0;font-family:var(--f-titulo);font-size:clamp(37px,4.3vw,68px);line-height:.95;letter-spacing:-.045em}
.heroe-contacto__texto{margin:0;font-size:16px;line-height:1.6;color:var(--sobre-noche);max-width:40ch}
.ccanales{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.ccanal{display:flex;align-items:center;gap:14px;min-height:64px;padding:8px 16px 8px 8px;border-radius:20px;background:rgba(255,255,255,.07);color:#fff;text-decoration:none;transition:background .2s}
.ccanal:hover{background:rgba(255,255,255,.14);color:#fff}
.ccanal__ico{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--r-pill);background:#fff;color:var(--azul)}
.ccanal__txt{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.ccanal__txt span{font-size:12px;color:var(--sobre-noche-3)}
.ccanal__txt strong{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ccanal__flecha{margin-left:auto;color:#9CC6F0}

/* Formulario */
.cform-hueco{scroll-margin-top:90px;min-width:0}
.cform{border-radius:30px;background:#fff;color:var(--tinta);padding:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;box-shadow:0 30px 70px rgba(0,0,0,.35)}
.cform :focus-visible{outline-color:var(--azul)}
.cform__titulo{grid-column:1/-1;font-family:var(--f-titulo);font-weight:800;font-size:20px;padding:4px 6px 6px}
.cform .vcampo{gap:3px;padding:9px 14px;border-radius:16px;background:var(--niebla)}
.cform .vcampo input,.cform .vcampo select,.cform .vcampo textarea{padding:1px 0}
/* En teléfonos, WhatsApp y correo van uno debajo del otro (lado a lado el correo no cabe). */
@media (max-width:479px){.cform>.vcampo{grid-column:1/-1}}
.cform .vgrupo{padding:10px 14px 12px!important;border-radius:16px;background:var(--niebla);border:0;margin:0;min-width:0}
.cform .vgrupo>legend{margin-bottom:7px}
.cform .vpill span{min-height:44px;padding:0 12px}
.cform .vacepto{padding:4px 6px}
.cform .vacepto a{color:var(--azul)}
.cform .vform__falta{padding:0 6px}
.cform__enviar{grid-column:1/-1;min-height:56px;border-radius:var(--r-pill);border:0;background:var(--azul);color:#fff;font-family:var(--f-titulo);font-weight:800;font-size:16px;cursor:pointer;transition:background .2s}
.cform__enviar:hover{background:var(--noche)}
.cform__enviar:disabled{opacity:.7;cursor:progress}
.cform .trampa{position:absolute;left:-9999px}

/* Después de enviar */
.clisto{display:flex;flex-direction:column;gap:14px;padding:28px;border-radius:30px;background:#fff;color:var(--tinta)}
.clisto:focus{outline:none}
.clisto :focus-visible{outline-color:var(--azul)}
.clisto__ico{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:var(--r-pill);background:var(--whatsapp);color:var(--whatsapp-tinta);font-weight:800;font-size:20px}
.clisto__titulo{font-family:var(--f-titulo);font-weight:800;font-size:23px}
.clisto__texto{font-size:16px;line-height:1.55;color:var(--gris-2)}
.clisto__btns{display:flex;flex-wrap:wrap;gap:8px}
.clisto__wa{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 20px 0 6px;border-radius:var(--r-pill);background:var(--whatsapp);color:var(--whatsapp-tinta);text-decoration:none;font-weight:800;font-size:15px}
.clisto__wa:hover{background:var(--whatsapp-hover);color:var(--whatsapp-tinta)}
.clisto__wa-ico{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--r-pill);background:#fff}
.clisto__otro{min-height:52px;padding:0 18px;border-radius:var(--r-pill);border:1.5px solid #D5DCE5;background:#fff;color:var(--tinta);font:700 15px var(--f-texto);cursor:pointer}

/* Teléfono con la vista previa (solo 1180 px o más) */
.ctel{display:none;flex-direction:column;align-items:center;gap:12px}
@media (min-width:1180px){.ctel{display:flex}}
.ctel__marco{width:100%;max-width:300px;aspect-ratio:9/17;border-radius:42px;background:#050E1A;padding:9px;box-shadow:0 30px 70px rgba(0,0,0,.45),inset 0 0 0 2px #1E3556}
.ctel__pantalla{width:100%;height:100%;border-radius:34px;overflow:hidden;background:#EFEAE2;display:flex;flex-direction:column}
.ctel__cab{display:flex;align-items:center;gap:10px;padding:30px 14px 10px;background:var(--noche);color:#fff}
.ctel__avatar{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--r-pill);background:var(--azul);overflow:hidden;font-family:var(--f-titulo);font-weight:800;font-size:13px}
.ctel__avatar img{width:100%;height:100%;object-fit:cover}
.ctel__quien{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.ctel__quien strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctel__quien>span{font-size:11px;color:var(--sobre-noche-3)}
.ctel__chat{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:12px}
.ctel__burbuja{align-self:flex-start;max-width:85%;padding:8px 11px;border-radius:14px 14px 14px 4px;background:#fff;font-size:13px;line-height:1.4;color:var(--tinta);overflow-wrap:anywhere}
.ctel__burbuja--yo{align-self:flex-end;max-width:88%;padding:8px 11px 5px;border-radius:14px 14px 4px 14px;background:#D9FDD3}
.ctel__hora{display:block;text-align:right;font-size:10px;color:#5D6B74}
.ctel__pie{font-size:13px;color:var(--sobre-noche-3);text-align:center}

/* Cuerpo */
.contacto__cuerpo{max-width:var(--carril);margin:0 auto;padding:72px 20px 88px;display:flex;flex-direction:column;gap:32px}

/* Oficina */
.oficina{scroll-margin-top:90px;position:relative;border-radius:34px;overflow:hidden;min-height:480px;background:var(--niebla)}
.oficina__mapa{position:absolute;inset:0;width:100%;height:100%;border:0}
.oficina__tarjeta{position:relative;margin:clamp(14px,2.4vw,28px);width:min(420px,calc(100% - 28px));box-sizing:border-box;display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:28px;background:#fff;box-shadow:0 24px 60px rgba(11,27,46,.25)}
.oficina__titulo{margin:0;font-family:var(--f-titulo);font-weight:800;font-size:clamp(27px,2.58vw,37px);line-height:1;letter-spacing:-.03em}
.oficina__dir{margin:0;font-size:15px;line-height:1.55;color:var(--gris-2)}
.oficina__horario{display:flex;flex-direction:column;gap:4px}
.ohora{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:46px;padding:0 14px;border-radius:14px;color:var(--tinta)}
.ohora__d{font-weight:600;font-size:14px}
.ohora__h{font-weight:700;font-size:14px;white-space:nowrap}
.ohora.is-hoy{background:var(--noche);color:#fff}
.ohora.is-hoy .ohora__d{font-weight:800}
.oficina__btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.oficina__llegar{display:flex;align-items:center;justify-content:center;min-height:50px;border-radius:var(--r-pill);background:var(--azul);color:#fff;font-weight:800;font-size:14px;text-decoration:none;white-space:nowrap}
.oficina__llegar:hover{background:var(--noche);color:#fff}
.oficina__guardar{min-height:50px;border-radius:var(--r-pill);border:1.5px solid #D5DCE5;background:#fff;color:var(--tinta);font:700 14px var(--f-texto);cursor:pointer;white-space:nowrap}
.oficina__guardar:hover{border-color:var(--tinta)}

/* Redes */
.credes{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;justify-content:space-between;padding:18px 18px 18px 26px;border-radius:28px;background:var(--niebla)}
.credes__titulo{font-family:var(--f-titulo);font-weight:800;font-size:18px}
.credes__lista{display:flex;flex-wrap:wrap;gap:8px}
.credes__red{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border-radius:var(--r-pill);background:#fff;color:var(--tinta);font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap}
.credes__red:hover{color:var(--azul)}