/* ═══════════════════════════════════════════════════════════════════════════
   4-bloques-contacto.css   ·   Página CONTACTO (/contacto/)
   ───────────────────────────────────────────────────────────────────────────
   Bloques:
     1. con-hero   → título + 3 ventajas
     2. con-form   → canales + horarios (izq) y formulario que ENVÍA CORREO (der)
     3. con-mapa   → mapa de Google + datos de contacto
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════ 1 · HERO ═══════════════ */
.con-hero{ padding:var(--ESPACIO-SECCION); }
.con-hero .contenido{
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;
}
.con-hero .titulo-hero{ font-size:64px; margin-bottom:24px; }
.con-hero .intro{ font-size:15px; font-weight:300; color:var(--GRIS-TEXTO); line-height:1.75; max-width:400px; }
.con-hero .tarjeta{
  background:var(--GRIS-FONDO); border:1px solid var(--GRIS-BORDE);
  border-radius:var(--REDONDEO-CAJA); padding:32px 36px;
}
.con-hero .ventaja{
  display:flex; align-items:flex-start; gap:16px;
  padding:24px 0; border-bottom:1px solid var(--GRIS-BORDE);
}
.con-hero .ventaja:first-child{ padding-top:0; }
.con-hero .ventaja:last-child{ padding-bottom:0; border-bottom:none; }
.con-hero .ventaja .icono{ font-size:28px; flex-shrink:0; line-height:1; margin-top:2px; }
.con-hero .ventaja h3{
  font-family:var(--LETRA-TEXTO); font-size:15px; font-weight:500;
  color:var(--NEGRO); margin-bottom:4px;
}
.con-hero .ventaja p{ font-size:13px; font-weight:300; color:var(--GRIS-SUAVE); line-height:1.55; }
@media(max-width:900px){
  .con-hero .contenido{ grid-template-columns:1fr; gap:40px; }
  .con-hero{ padding:48px 5%; }
  .con-hero .titulo-hero{ font-size:48px; }
}
@media(max-width:500px){ .con-hero .titulo-hero{ font-size:38px; } }


/* ═══════════════ 2 · CANALES + FORMULARIO ═══════════════ */
.con-form{ padding:var(--ESPACIO-SECCION); }
.con-form .contenido{
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1.2fr; gap:48px; align-items:start;
}
.con-form .titulo{ font-size:var(--TITULO-MEDIO); margin-bottom:14px; }
.con-form .intro{ font-size:14px; font-weight:300; color:var(--GRIS-TEXTO); line-height:1.75; margin-bottom:32px; }

/* canales de contacto */
.con-form .canales{ display:flex; flex-direction:column; gap:10px; margin-bottom:28px; }
.con-form .canal{
  display:flex; align-items:center; gap:14px;
  padding:14px 20px; border:1px solid var(--GRIS-BORDE);
  border-radius:var(--REDONDEO-CHICO); background:var(--BLANCO);
  transition:all var(--SUAVE);
}
.con-form .canal:hover{ background:var(--VERDE-SUAVE); border-color:var(--VERDE-BORDE); transform:translateX(4px); }
.con-form .canal-icono{
  font-size:22px; flex-shrink:0; width:40px; height:40px;
  background:#f3f4f6; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
}
.con-form .canal-info{ flex:1; }
.con-form .canal-label{
  font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--GRIS-SUAVE); display:block; margin-bottom:2px;
}
.con-form .canal-valor{ font-size:15px; font-weight:500; color:var(--NEGRO); display:block; }
.con-form .canal .flecha{ color:var(--GRIS-SUAVE); font-size:14px; transition:color var(--SUAVE); }
.con-form .canal:hover .flecha{ color:var(--VERDE); }

/* redes */
.con-form .redes-label{
  font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--GRIS-SUAVE); margin-bottom:12px; display:block;
}
.con-form .redes{ display:flex; gap:10px; margin-bottom:28px; }
.con-form .red{
  display:flex; align-items:center; gap:8px;
  padding:9px 18px; border:1px solid var(--GRIS-BORDE);
  border-radius:var(--REDONDEO-CHICO); background:var(--BLANCO);
  font-size:13px; color:var(--GRIS-FUERTE); transition:all var(--SUAVE);
}
.con-form .red:hover{ background:var(--VERDE-SUAVE); border-color:var(--VERDE-BORDE); }

/* horarios */
.con-form .horarios{
  background:var(--GRIS-FONDO); border:1px solid var(--GRIS-BORDE);
  border-radius:var(--REDONDEO-CHICO); padding:24px;
}
.con-form .horarios .titulo-h{
  font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--GRIS-SUAVE); margin-bottom:16px; display:block;
}
.con-form .hora{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 0; border-bottom:1px solid var(--GRIS-BORDE);
}
.con-form .hora:last-of-type{ border-bottom:none; }
.con-form .hora .dia{ font-size:14px; font-weight:300; color:var(--GRIS-FUERTE); }
.con-form .badge{ padding:4px 12px; border-radius:var(--REDONDEO-BOTON); font-size:11px; font-weight:500; }
.con-form .badge.verde{    background:var(--VERDE-SUAVE); color:var(--VERDE); }
.con-form .badge.amarillo{ background:#fffbeb; color:#d97706; }
.con-form .badge.rojo{     background:#fef2f2; color:#dc2626; }
.con-form .hora-nota{ font-size:12px; font-weight:300; color:var(--GRIS-FUERTE); margin-top:14px; display:block; line-height:1.5; }

/* --- formulario (tarjeta negra) --- */
.con-form .form-card{
  background:var(--NEGRO); border-radius:var(--REDONDEO-TARJETA);
  padding:36px; position:relative; overflow:hidden;
}
.con-form .form-card::before{
  content:""; position:absolute; top:-60px; right:-60px;
  width:200px; height:200px; background:var(--VERDE); border-radius:50%; opacity:.1; pointer-events:none;
}
.con-form .form-card h2{
  font-family:var(--LETRA-TITULOS); font-size:26px; font-weight:300;
  color:var(--BLANCO); letter-spacing:-.5px; margin-bottom:6px;
}
.con-form .form-card .aclara{ font-size:13px; font-weight:300; color:rgba(255,255,255,.45); line-height:1.6; margin-bottom:24px; display:block; }
.con-form .fila2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.con-form label{
  font-size:12px; font-weight:500; color:rgba(255,255,255,.5);
  margin-bottom:6px; display:block; letter-spacing:.03em;
}
.con-form input,
.con-form select,
.con-form textarea{
  width:100%; padding:12px 16px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15);
  border-radius:10px; font-family:var(--LETRA-TEXTO);
  font-size:14px; font-weight:300; color:rgba(255,255,255,.85);
  transition:border-color var(--SUAVE);
}
.con-form input::placeholder,
.con-form textarea::placeholder{ color:rgba(255,255,255,.3); }
.con-form input:focus,
.con-form select:focus,
.con-form textarea:focus{ border-color:rgba(34,197,94,.5); outline:none; }
.con-form select option{ background:var(--NEGRO-SUAVE); color:#fff; }
.con-form textarea{ resize:vertical; min-height:90px; }
.con-form .campo{ margin-bottom:12px; }

/* chips de servicio */
.con-form .chips-label{ font-size:12px; font-weight:500; color:rgba(255,255,255,.5); margin:16px 0 10px; display:block; }
.con-form .chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.con-form .chip{
  padding:7px 14px; border-radius:var(--REDONDEO-BOTON);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
  font-size:13px; font-weight:300; color:rgba(255,255,255,.65);
  cursor:pointer; user-select:none; transition:all var(--SUAVE);
}
.con-form .chip.activo{
  background:rgba(34,197,94,.15); border-color:var(--VERDE-BRILLANTE);
  color:var(--VERDE-BRILLANTE); font-weight:500;
}
.con-form .aviso{ font-size:11px; font-weight:300; color:rgba(255,255,255,.3); text-align:center; margin-top:12px; display:block; line-height:1.5; }
/* mensaje de éxito/error tras enviar */
.con-form .respuesta-envio{ margin-top:14px; font-size:13px; text-align:center; display:none; }
.con-form .respuesta-envio.ok{ display:block; color:var(--VERDE-BRILLANTE); }
.con-form .respuesta-envio.error{ display:block; color:#f87171; }
/* el campo trampa anti-bots: invisible para personas */
.con-form .trampa{ position:absolute; left:-9999px; top:-9999px; }

@media(max-width:960px){
  .con-form .contenido{ grid-template-columns:1fr; gap:40px; }
  .con-form{ padding:48px 5%; }
  .con-form .titulo{ font-size:34px; }
  .con-form .fila2{ grid-template-columns:1fr; }
}


/* ═══════════════ 3 · MAPA ═══════════════ */
.con-mapa{ padding:48px 6%; }
.con-mapa .marco{
  display:grid; grid-template-columns:1fr 1fr;
  border-radius:var(--REDONDEO-TARJETA); overflow:hidden;
  border:1px solid var(--GRIS-BORDE);
  max-width:1100px; margin:0 auto; height:360px;
}
.con-mapa .mapa{ position:relative; overflow:hidden; }
.con-mapa .mapa iframe{
  width:100%; height:100%; border:none; display:block;
  filter:invert(90%) hue-rotate(160deg) saturate(1.4) brightness(0.85);
}
.con-mapa .info{
  background:var(--GRIS-FONDO); padding:36px 40px;
  display:flex; flex-direction:column; justify-content:center;
}
.con-mapa .info h2{
  font-family:var(--LETRA-TITULOS); font-size:22px; font-weight:300;
  color:var(--NEGRO); letter-spacing:-.3px; margin-bottom:24px;
}
.con-mapa .dato{
  display:flex; align-items:flex-start; gap:14px;
  padding:14px 0; border-bottom:1px solid var(--GRIS-BORDE);
}
.con-mapa .dato:first-of-type{ padding-top:0; }
.con-mapa .dato:last-child{ border-bottom:none; padding-bottom:0; }
.con-mapa .dato .icono{ font-size:20px; flex-shrink:0; margin-top:1px; line-height:1; }
.con-mapa .dato h3{
  font-family:var(--LETRA-TEXTO); font-size:14px; font-weight:500;
  color:var(--NEGRO); margin-bottom:2px;
}
.con-mapa .dato p,
.con-mapa .dato a{ font-size:13px; font-weight:300; color:var(--GRIS-TEXTO); line-height:1.5; display:block; transition:color var(--SUAVE); }
.con-mapa .dato a:hover{ color:var(--VERDE); }
.con-mapa .dato .menor{ font-size:12px; color:var(--GRIS-SUAVE); }
@media(max-width:760px){
  .con-mapa .marco{ grid-template-columns:1fr; height:auto; }
  .con-mapa .mapa{ height:240px; }
  .con-mapa .info{ padding:28px 24px; }
  .con-mapa{ padding:32px 5%; }
}