/* contacto.css — estilos específicos de /contacto */

.page-hero{
  background: linear-gradient(135deg, var(--color-navy-dark) 0%, var(--color-navy) 60%, #143a66 100%);
  color:#fff;
  padding: 90px 0 60px;
  position:relative;
  overflow:hidden;
}
.page-hero::before{
  content:""; position:absolute; right:-120px; top:-120px;
  width:360px; height:360px; border-radius:50%;
  background: radial-gradient(circle, rgba(245,130,32,.35), transparent 70%);
}
.page-hero::after{
  content:""; position:absolute; left:-80px; bottom:-140px;
  width:300px; height:300px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.08), transparent 70%);
}
.page-hero .container{ position:relative; z-index:1; }
.page-hero__kicker{
  display:inline-block; font-size:13px; letter-spacing:.22em; text-transform:uppercase;
  color: var(--color-primary); margin:0 0 10px; font-weight:700;
}
.page-hero__title{
  font-size: clamp(40px, 6vw, 64px); line-height:1; margin:0 0 14px;
  font-weight:800; letter-spacing:-.02em;
}
.page-hero__title::after{
  content:""; display:block; width:80px; height:5px; border-radius:3px;
  background: var(--color-primary); margin-top:16px;
}
.page-hero__lead{ font-size:17px; opacity:.92; max-width:640px; margin:0; }

/* ---- Lista de contactos ---- */
.contact-list{
  display:flex; flex-direction:column; gap:14px;
  background:#fff;
  border-radius:10px;
  box-shadow: 0 10px 40px rgba(14,44,75,.08);
  padding: 10px;
  border: 1px solid #eef1f5;
}
.contact-row{
  display:grid;
  grid-template-columns: 60px 1.3fr 1fr 1.2fr;
  align-items:center;
  gap: 18px;
  padding: 20px 22px;
  border-radius: 8px;
  background:#fff;
  transition: background .2s ease, transform .2s ease;
  border-bottom: 1px solid #f0f2f6;
}
.contact-row:last-child{ border-bottom:0; }
.contact-row:hover{ background:#fafbfd; }
.contact-row__ic{
  width:52px; height:52px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--color-primary), #ff9e3a);
  color:#fff; box-shadow: 0 8px 20px rgba(245,130,32,.25);
  flex:none;
}
.contact-row__ic--sm{
  width:36px; height:36px;
  background: #fff4ea;
  color: var(--color-primary);
  box-shadow: none;
}
.contact-row__title strong{ display:block; color: var(--color-navy); font-size:17px; font-weight:700; line-height:1.2; }
.contact-row__title span{ display:block; color:#6b7a8f; font-size:13.5px; margin-top:3px; }
.contact-row__col{
  display:flex; align-items:center; gap:12px;
}
.contact-row__col strong{ display:block; color: var(--color-navy); font-size:14.5px; font-weight:700; }
.contact-row__col a strong{ color: var(--color-navy); }
.contact-row__col a:hover strong{ color: var(--color-primary); }
.contact-row__col span{ display:block; color:#8492a6; font-size:12.5px; margin-top:2px; }
.contact-row--address .contact-row__title strong{ color: var(--color-primary); }

@media (max-width: 900px){
  .contact-row{ grid-template-columns: 52px 1fr; grid-auto-rows:auto; }
  .contact-row__col{ grid-column: 1 / -1; padding-left: 8px; }
}

/* ---- Formulario + Mapa ---- */
.contact-form-map{
  display:grid; grid-template-columns: 1fr 1fr; gap:36px;
  align-items:start;
}
.contact-form-map .section__title{ margin-top:0; }
.contact-form-map__form .lead-form{ margin-top:18px; display:flex; flex-direction:column; gap:12px; }
.contact-form-map__form .lead-form label{ display:block; color: var(--color-navy); font-size:14px; font-weight:600; }
.contact-form-map__form .lead-form input,
.contact-form-map__form .lead-form select,
.contact-form-map__form .lead-form textarea{
  width:100%; margin-top:6px; padding:12px 14px;
  border:1px solid #dde3eb; border-radius:6px;
  font:inherit; color: var(--color-navy); background:#fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.contact-form-map__form .lead-form input:focus,
.contact-form-map__form .lead-form select:focus,
.contact-form-map__form .lead-form textarea:focus{
  outline:none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(245,130,32,.18);
}
.lead-form__row--2{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }

.map-card{
  border-radius:10px; overflow:hidden;
  box-shadow: 0 12px 40px rgba(14,44,75,.12);
  border: 4px solid #fff;
  outline: 1px solid #eef1f5;
  aspect-ratio: 4 / 3;
  background:#eaf0f6;
}
.map-card iframe{ width:100%; height:100%; border:0; display:block; }

.map-info{
  margin-top:18px;
  background:#fff; border-radius:10px; padding:18px;
  box-shadow: 0 8px 28px rgba(14,44,75,.08);
  border:1px solid #eef1f5;
  display:flex; flex-direction:column; gap:12px;
}
.map-info__row{ display:flex; align-items:center; gap:12px; }
.map-info__ic{
  width:36px; height:36px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff4ea; color: var(--color-primary);
}
.map-info__row strong{ display:block; color: var(--color-navy); font-size:14.5px; }
.map-info__row span{ display:block; color:#8492a6; font-size:12.5px; }

@media (max-width: 900px){
  .contact-form-map{ grid-template-columns: 1fr; }
}

.flash{ padding:12px 14px; border-radius:6px; margin-bottom:10px; font-size:14px; }
.flash--ok{ background:#e7f7ec; color:#1d7a3e; border:1px solid #bfe5cc; }
.flash--err{ background:#fdecec; color:#a82424; border:1px solid #f1c5c5; }

/* ---- Banner ¿Consulta? ---- */
.consulta-banner{
  position:relative;
  background: linear-gradient(135deg, var(--color-navy-dark) 0%, var(--color-navy) 50%, #143a66 100%);
  color:#fff;
  padding: 48px 0;
  overflow:hidden;
  margin-top: 20px;
}
.consulta-banner::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 85% 50%, rgba(245,130,32,.15), transparent 45%);
  pointer-events:none;
}
.consulta-banner__watermark{
  position:absolute;
  right: -10px; top: 50%; transform: translateY(-50%);
  font-size: 220px; font-weight: 900; letter-spacing:-.05em;
  color: rgba(255,255,255,.05);
  line-height:1;
  pointer-events:none;
  user-select:none;
}
.consulta-banner__inner{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
}
.consulta-banner__text h3{
  margin:0 0 6px; font-size: clamp(26px, 3vw, 34px); font-weight:800; letter-spacing:-.01em;
}
.consulta-banner__text p{ margin:0; opacity:.88; font-size:15.5px; max-width:520px; }
.consulta-banner__cta{
  display:flex; align-items:center; gap:16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
  padding: 16px 22px; border-radius: 10px;
}
.consulta-banner__ic{
  width:60px; height:60px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--color-primary); color:#fff;
  box-shadow: 0 10px 24px rgba(245,130,32,.4);
  flex:none;
}
.consulta-banner__phone{
  display:block; color:#fff; text-decoration:none; line-height:1.15;
}
.consulta-banner__phone span{ display:block; font-size:12.5px; opacity:.75; letter-spacing:.08em; text-transform:uppercase; }
.consulta-banner__phone strong{ display:block; font-size: clamp(22px, 2.4vw, 28px); font-weight:800; margin-top:4px; }
.consulta-banner__phone:hover strong{ color: var(--color-primary); }

/* Animación reveal */
.reveal{ opacity:0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}