/* ==========================================================
   NovæONE Strategic Advisory — Contacto (page-specific)
   Extiende style.css. No modifica ninguna regla existente.
   ========================================================== */

/* ===== HERO — foto propia (antes heredaba la de Home) =====
   Silueta de hombre al teléfono contra un muro de vidrio azul, con otras
   siluetas conversando de fondo — encaja con el motivo de arquitectura
   de vidrio que ya usan Home/Servicios, y es un guiño a "la conversación"
   sin caer en el cliché de íconos flotantes de la foto anterior.
   La imagen ya es azul de origen (vidrio + cielo), así que el overlay va
   mucho más ligero que en el resto del sitio — con esta foto, un overlay
   fuerte solo la oscurecía sin aportar nada, el tono institucional ya
   está en la fotografía misma. */
.hero.hero--contact::before{
  background:url('../images/hero/contacto-hero-background.jpg') center 30% / cover no-repeat;
}
.hero.hero--contact::after{
  background:linear-gradient(100deg, rgba(13,24,42,.46) 0%, rgba(17,32,54,.34) 50%, rgba(22,40,66,.22) 100%);
}
.hero.hero--contact .hero-inner{ max-width:680px; }
.hero.hero--contact .hero-sub{ font-style:normal; color:rgba(255,255,255,.82); font-family:var(--sans); font-size:17px; max-width:560px; margin-bottom:0; }

/* ===== SECCIÓN DE CONTACTO ===== */
.contact-section{ background:var(--white); padding:150px 0; }
.contact-grid{ display:grid; grid-template-columns:.42fr .58fr; gap:128px; align-items:start; }
@media(max-width:960px){ .contact-grid{ grid-template-columns:1fr; gap:64px; } }

.contact-info{ position:sticky; top:130px; max-width:400px; }
@media(max-width:960px){ .contact-info{ position:static; max-width:none; } }
.contact-info h2{ font-size:clamp(26px,2.6vw,32px); margin-bottom:22px; }
.contact-info p{ color:var(--grey); font-size:1.02rem; line-height:1.75; margin-bottom:36px; }
.contact-email{ display:inline-block; font-family:var(--display); font-style:italic; color:var(--gold); font-size:1.2rem; border-bottom:1px solid rgba(156,122,60,.35); padding-bottom:4px; transition:border-color .2s ease, color .2s ease; }
.contact-email:hover{ color:var(--gold-light); border-color:var(--gold-light); }

/* ===== FORMULARIO ===== */
.contact-form{ max-width:640px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media(max-width:560px){ .form-row{ grid-template-columns:1fr; gap:0; } }

.field{ margin-bottom:50px; }
/* Aire adicional antes de "Método preferido de contacto" y
   "¿Cómo podemos ayudarle?" — se separan del bloque anterior. */
.field.field-spaced{ margin-top:14px; }
.field label{ display:block; font-family:var(--sans); font-weight:600; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); margin-bottom:10px; }
.field .optional{ font-weight:400; text-transform:none; letter-spacing:0; color:var(--grey); font-size:12px; }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea{
  width:100%;
  font-family:var(--sans);
  font-size:15px;
  color:var(--ink);
  background:var(--frost);
  border:1px solid var(--line);
  border-radius:2px;
  padding:14px 16px;
  transition:border-color .2s ease, background .2s ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus{ outline:none; border-color:var(--gold); background:var(--white); }
.field textarea{ resize:vertical; min-height:150px; line-height:1.6; }
.field select{ appearance:none; -webkit-appearance:none; background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%235B6472" stroke-width="1.6"><path d="M6 9l6 6 6-6"/></svg>'); background-repeat:no-repeat; background-position:right 14px center; background-size:16px; padding-right:42px; }

.field-note{ font-size:12.5px; color:var(--grey); margin-top:8px; line-height:1.5; }

.radio-group{ display:flex; flex-wrap:wrap; gap:12px; }
.radio-pill{ position:relative; }
.radio-pill input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.radio-pill span{ display:inline-block; font-family:var(--sans); font-size:13.5px; font-weight:500; color:var(--ink); border:1px solid var(--line); border-radius:2px; padding:10px 18px; transition:border-color .2s ease, background .2s ease, color .2s ease; }
.radio-pill input:checked + span{ border-color:var(--gold); background:var(--gold); color:#fff; }
.radio-pill input:focus-visible + span{ outline:2px solid var(--gold); outline-offset:2px; }

.checkbox-field{ display:flex; align-items:flex-start; gap:12px; margin-bottom:30px; }
.checkbox-field input{ margin-top:4px; width:16px; height:16px; accent-color:var(--gold); flex-shrink:0; }
.checkbox-field label{ font-size:13.5px; color:var(--grey); line-height:1.6; }
.checkbox-field a{ color:var(--gold); text-decoration:underline; text-underline-offset:2px; }

.confidential-note{ font-family:var(--display); font-style:italic; color:var(--grey); font-size:14.5px; margin-bottom:24px; }

.form-status{ display:none; padding:16px 18px; border-radius:2px; font-size:14px; margin-bottom:24px; }
.form-status.is-visible{ display:block; }
.form-status.status-success{ background:rgba(156,122,60,.08); border:1px solid rgba(156,122,60,.35); color:var(--ink); }
.form-status.status-error{ background:rgba(178,58,58,.06); border:1px solid rgba(178,58,58,.28); color:#7a2a2a; }

/* honeypot */
.hp-field{ position:absolute; left:-9999px; top:-9999px; opacity:0; pointer-events:none; }

/* ===== WHAT HAPPENS NEXT ===== */
.next-steps{ background:var(--frost); padding:140px 0; }
@media(max-width:768px){ .next-steps{ padding:88px 0; } }
.next-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:56px; margin-top:64px; border-top:1px solid var(--line); padding-top:52px; }
@media(max-width:860px){ .next-grid{ grid-template-columns:1fr; gap:44px; } }
.next-item span.n-num{ display:block; font-family:var(--sans); font-weight:700; color:var(--gold); font-size:13px; letter-spacing:.08em; margin-bottom:18px; }
.next-item p{ font-family:var(--display); font-weight:500; font-size:1.3rem; color:var(--ink); }

/* ===== STRATEGIC PRESENCE ===== */
.presence-simple{ background:var(--white); padding:140px 0; text-align:center; }
@media(max-width:768px){ .presence-simple{ padding:88px 0; } }
.presence-simple .section-head{ margin-bottom:56px; }
/* Los 4 bloques comparten el mismo tratamiento de línea: borde superior
   e inferior idénticos en cada uno (antes solo el contenedor llevaba la
   línea superior y el inferior dependía del breakpoint — inconsistente
   entre desktop y móvil). */
.presence-cities{ display:grid; grid-template-columns:repeat(4,1fr); }
.presence-cities .city{ padding:44px 24px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); border-right:1px solid var(--line); }
.presence-cities .city:last-child{ border-right:none; }
.presence-cities .city h3{ font-family:var(--display); font-style:italic; font-weight:500; font-size:1.25rem; color:var(--ink); }
@media(max-width:900px){
  .presence-cities{ grid-template-columns:1fr 1fr; }
  .presence-cities .city:nth-child(2n){ border-right:none; }
}
@media(max-width:640px){
  .presence-cities{ grid-template-columns:1fr; }
  .presence-cities .city{ border-right:none !important; padding:32px 0; }
}

/* Botón de formulario a ancho completo, consistente con btn-primary del sitio */
.contact-form .btn-primary{ width:auto; border:none; cursor:pointer; font-family:var(--sans); }

/* ==========================================================
   RESPONSIVE — exclusivo de la página Contacto
   El sitio anterior comprimía el escritorio en móvil; aquí se
   diseña el móvil de forma independiente, con mucho más aire
   entre secciones y una sola columna clara para el formulario.
   ========================================================== */
@media(max-width:768px){
  .hero.hero--contact .hero-inner{ padding-top:70px; }

  .contact-section{ padding:88px 0 96px; }
  .contact-grid{ gap:56px; }
  .contact-info{ position:static; max-width:none; margin-bottom:8px; }
  .contact-info p{ margin-bottom:28px; }

  .contact-form{ max-width:none; }
  .field{ margin-bottom:24px; }
  .field input, .field select, .field textarea{ font-size:16px; padding:15px 16px; }
  .radio-group{ flex-direction:column; gap:10px; }
  .radio-pill span{ display:block; text-align:center; padding:13px 18px; }
  .contact-form .btn-primary{ width:100%; text-align:center; padding:16px 20px; }

  .next-steps{ padding:80px 0 88px; }
  .next-grid{ margin-top:44px; padding-top:40px; gap:40px; }
  .next-item p{ font-size:1.15rem; }

  .presence-simple{ padding:80px 0 96px; }
}

@media(max-width:374px){
  .contact-section{ padding:72px 0 84px; }
  .next-steps{ padding:64px 0 76px; }
  .presence-simple{ padding:64px 0 84px; }
}