/* ===== VARIABLES ===== */
:root{
  --azul-profesional:#1976D2;
  --azul-hover:#1565C0;
  --azul-claro:#2196F3;
  --azul-muy-claro:#64B5F6;
  --blanco-puro:#FFFFFF;
  --blanco-suave:#F8F9FA;
  --gris-elegante:#6B7280;
  --gris-claro:#E5E7EB;
  --gris-oscuro:#374151;
  --sombra-delicada:0 4px 20px rgba(0,0,0,.08);
  --sombra-intensa:0 8px 30px rgba(0,0,0,.12);
  --t: all .25s cubic-bezier(.4,0,.2,1);
}

.container{max-width:1280px; margin:0 auto; padding:0 2rem;}

/* ===== HERO ===== */
.contact-hero{
  background:linear-gradient(180deg,rgba(25,118,210,.06),rgba(25,118,210,0));
  padding:3.5rem 0 2.5rem;
}
.title{
  font-size:clamp(2rem,4vw,3rem);
  font-weight:800; color:var(--gris-oscuro); margin:0 0 .5rem;
}
.subtitle{
  font-size:clamp(1rem,1.2vw,1.08rem);
  color:var(--gris-elegante); max-width:760px; line-height:1.7; margin:0;
}
.highlight{color:var(--azul-profesional); position:relative; display:inline-block;}
.highlight::after{
  content:''; position:absolute; left:0; bottom:4px; width:100%; height:10px;
  background:var(--azul-muy-claro); opacity:.4; border-radius:4px; z-index:-1;
}

/* ===== GRID ===== */
.contact-section{ padding:3rem 0; background:var(--blanco-puro); }
.contact-grid{
  display:grid; gap:2rem; align-items:start;
  grid-template-columns: 1.1fr .9fr; /* texto / mapa */
}

/* ===== CARDS ===== */
.stack{ display:grid; gap:1rem; }
.card{
  background:#fff; border:1px solid var(--gris-claro);
  border-radius:18px; padding:clamp(1.2rem,2vw,1.5rem);
  box-shadow:var(--sombra-delicada); transition:var(--t);
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--sombra-intensa); }
.row{
  display:grid; grid-template-columns:40px 1fr; gap:1rem; align-items:start;
}
.emoji{ font-size:1.6rem; line-height:1; }
.h2{ font-size:clamp(1.1rem,1.4vw,1.25rem); margin:.1rem 0 .25rem; color:var(--gris-oscuro); }
.text{ color:var(--gris-elegante); margin:0 0 .35rem; }
.link{ color:var(--azul-profesional); font-weight:700; text-decoration:none; }
.link:hover{ text-decoration:underline; }

/* Redes */
.socials{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.25rem; }
.social{
  color:var(--gris-oscuro); background:#fff; border:1px solid var(--gris-claro);
  padding:.45rem .8rem; border-radius:999px; text-decoration:none; font-weight:600;
}
.social:hover{ border-color:var(--azul-muy-claro); color:var(--azul-profesional); }
.social.disabled{ opacity:.55; pointer-events:none; }

/* ===== MAPA ===== */
.map-card{
  background:#fff; border:1px solid var(--gris-claro);
  border-radius:18px; box-shadow:var(--sombra-delicada);
}
.map-header{
  padding:.9rem 1.2rem; font-weight:700; color:var(--gris-oscuro);
  border-bottom:1px solid var(--gris-claro);
}
.map-frame{ position:relative; }
.map-frame iframe{
  width:100%;
  height:min(60vh, 500px); /* altura adaptativa */
  display:block; border:0;
  aspect-ratio: 16 / 9; /* respaldo para evitar saltos de layout */
}
.map-link{
  position:absolute; right:12px; bottom:12px; background:#fff; border:1px solid var(--gris-claro);
  padding:.45rem .8rem; border-radius:999px; text-decoration:none; color:var(--azul-profesional);
  font-weight:700; box-shadow:var(--sombra-delicada);
}
.map-link:hover{ border-color:var(--azul-muy-claro); }

/* ===== CTA ===== */
.contact-cta{ padding:2.5rem 0 4rem; background:var(--blanco-puro); }
.cta-bar{
  background:var(--azul-profesional); color:#fff; padding:1.75rem; border-radius:16px;
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:1rem;
  box-shadow:0 12px 40px rgba(25,118,210,.25);
}
.cta-actions{ display:flex; gap:.6rem; flex-wrap:wrap; justify-content:flex-end; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:1rem 1.4rem; border-radius:14px; font-weight:700; font-size:1rem;
  text-decoration:none; border:none; cursor:pointer; transition:all .3s ease;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.btn-primary{
  background:linear-gradient(135deg,var(--azul-profesional),var(--azul-claro)); color:#fff;
  box-shadow:0 6px 20px rgba(25,118,210,.25);
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 8px 25px rgba(25,118,210,.4); }
.btn-light{
  background:#fff; color:var(--azul-profesional); box-shadow:0 4px 16px rgba(0,0,0,.15);
}
.btn-light:hover{ transform:translateY(-2px); }

/* ===== ANIMACIÓN ===== */
.pre-reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.is-visible{ opacity:1; transform:translateY(0); }

/* Respeto a reducción de movimiento */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* ===== BREAKPOINTS ===== */

/* Ajustes finos en desktops medianos */
@media (max-width:1200px){
  .container{ padding:0 1.5rem; }
  .contact-grid{ gap:1.5rem; grid-template-columns: 1.05fr .95fr; }
  .map-frame iframe{ height:min(55vh, 480px); }
}

/* Tablets / pantallas medianas */
@media (max-width:900px){
  .contact-grid{ grid-template-columns:1fr; }
  .map-frame iframe{ height:min(50vh, 420px); }
  .cta-bar{ grid-template-columns: 1fr; text-align:center; }
  .cta-actions{ justify-content:center; }
  .row{ grid-template-columns:36px 1fr; }
}

/* Móviles */
@media (max-width:640px){
  .container{ padding:0 1rem; }
  .contact-section{ padding:2.25rem 0; }
  .card{ padding:1.2rem; }
  .map-frame iframe{ height:min(45vh, 360px); }
  .btn{ width:100%; }
  .cta-actions{ width:100%; gap:.5rem; }
}

/* Móviles pequeños */
@media (max-width:480px){
  .row{ grid-template-columns:32px 1fr; gap:.75rem; }
  .emoji{ font-size:1.4rem; }
  .map-frame iframe{ height:min(40vh, 320px); }
  .title{ font-size:clamp(1.8rem, 7vw, 2.2rem); }
  .subtitle{ font-size:clamp(.95rem, 3.5vw, 1rem); }
}