/* ============================================================
   Home Pro Guides — contacto-original.css
   Piel visual de /contacto clonada del sistema original (el que corre la
   pauta real hoy): tipografía Montserrat, colores de marca reales
   (naranja #f25a18, navy #00326a, morado #3d0d8d) y el fondo ilustrado
   con los dos trabajadores. Vive SOLO dentro de .wizard — el resto del
   sitio (header, footer, home, blog) sigue con su propia marca (Nunito/
   navy #0C3166) sin tocar.
   ============================================================ */

@font-face{ font-family:'OC Montserrat'; font-weight:400; font-style:normal; font-display:swap; src:url('/hpg-site/assets/fonts-oc/Montserrat-Regular.woff2') format('woff2'); }
@font-face{ font-family:'OC Montserrat'; font-weight:600; font-style:normal; font-display:swap; src:url('/hpg-site/assets/fonts-oc/Montserrat-SemiBold.woff2') format('woff2'); }
@font-face{ font-family:'OC Montserrat'; font-weight:700; font-style:normal; font-display:swap; src:url('/hpg-site/assets/fonts-oc/Montserrat-Bold.woff2') format('woff2'); }

.contacto-top{
  --oc-orange: #f25a18; --oc-orange-hover: #f86f35; --oc-navy: #00326a; --oc-purple: #3d0d8d;
  --oc-bg-top: #d6f7fb; --oc-bg-mid: #ffffff;
  font-family: 'OC Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  background: linear-gradient(to bottom, var(--oc-bg-top) 0%, var(--oc-bg-mid) 38%, var(--oc-bg-mid) 62%, var(--oc-bg-top) 100%);
  position: relative; overflow: hidden;
}
/* escritorio/tablet ancho: los dos trabajadores completos, uno a cada lado — sin recortar, como el original */
.contacto-top::before, .contacto-top::after{
  content:''; position:absolute; bottom:0; width:340px; height:404px; pointer-events:none; z-index:0;
  background-repeat:no-repeat; background-position:bottom; background-size:contain; opacity:.9;
}
.contacto-top::before{ left:0; background-image:url('/hpg-site/assets/images/oc-icons/bg-worker-left.webp'); }
.contacto-top::after{ right:0; background-image:url('/hpg-site/assets/images/oc-icons/bg-worker-right.webp'); }
.contacto-top .container{ position:relative; z-index:1; }
/* sin galería al lado: una sola tarjeta centrada, como el original */
.contact-layout-solo{ display:block !important; max-width:560px; margin:0 auto; }

/* tarjeta blanca simple, sin masthead navy — así es el original */
.contacto-top .form-card{ background:#fff; border:1px solid rgba(0,50,106,.08); box-shadow: 0 18px 50px -20px rgba(0,50,106,.25); }
.contacto-top .wizard-masthead{ display:none !important; }
.contacto-top .wizard{ min-height:auto; }
.contacto-top .wizard-step > p.wizard-hint:first-child{ order:-1; }

.contacto-top h1, .contacto-top h2, .contacto-top h3, .contacto-top .wizard-fields label{ font-family:'OC Montserrat', sans-serif; color: var(--oc-navy); }
.contacto-top .wizard-fields label{ font-weight:600; font-size:14px; text-transform:none; letter-spacing:normal; color: var(--oc-navy); }

/* título/subtítulo del paso (sin masthead, van directo en el body) */
.contacto-top .wizard-step-head{ margin-bottom:22px; }
.contacto-top .wizard-step-title{ font-family:'OC Montserrat', sans-serif; font-weight:700; font-size:24px; line-height:1.3; color: var(--oc-navy); margin:0 0 8px; }
.contacto-top .wizard-step-subtitle{ font-size:14px; color:#4a5c74; margin:0; line-height:1.5; }

.contacto-top .wizard-option{ border-color: rgba(0,50,106,.18); font-family:'OC Montserrat', sans-serif; }
.contacto-top .wizard-option:hover{ border-color: var(--oc-orange); background: rgba(242,90,24,.05); }
.contacto-top .wizard-option.is-selected{ border-color: var(--oc-orange); background: rgba(242,90,24,.06); }
.contacto-top .wizard-option-check{ border-color: rgba(0,50,106,.25); }
.contacto-top .wizard-option.is-selected .wizard-option-check{ background: var(--oc-orange); border-color: var(--oc-orange); }
.contacto-top .wizard-option-label{ color: var(--oc-navy); font-weight:700; }
.contacto-top .wizard-options.is-images .wizard-option-label{ font-size:14px; }
.contacto-top .wizard-option.is-image img{ aspect-ratio:1/1; object-fit:contain; background:#f3f9fb; padding:14px; }

.contacto-top .wizard-progress-bar{ background: var(--oc-orange); }
.contacto-top .wizard-check input{ accent-color: var(--oc-orange); }
.contacto-top .wizard-check a{ color: var(--oc-navy); }
.contacto-top .wizard-next.btn{ background: var(--oc-orange); border-color: var(--oc-orange); color:#fff; font-family:'OC Montserrat', sans-serif; font-weight:700; border-radius:10px; }
.contacto-top .wizard-next.btn:hover{ background: var(--oc-orange-hover); }
.contacto-top .wizard-back{ color: var(--oc-navy); opacity:.75; }
.contacto-top .wizard-success svg{ color: var(--oc-orange); }
.contacto-top .wizard-success h3{ font-family:'OC Montserrat', sans-serif; color: var(--oc-navy); }

/* ---- paso de dirección con mapa (kind:'area') ---- */
.contacto-top .wizard-map{ margin-top:12px; border-radius:12px; overflow:hidden; border:1px solid rgba(0,50,106,.15); height:260px; background:#eef6fa; }
.contacto-top .wizard-map-note{ font-size:12.5px; color:#4a5c74; margin:8px 0 0; }
.contacto-top .wizard-area-result{ margin-top:14px; padding:12px 16px; border-radius:10px; background: rgba(242,90,24,.07); border:1px solid rgba(242,90,24,.25); font-size:14.5px; color: var(--oc-navy); }
.contacto-top .wizard-area-result strong{ color: var(--oc-orange); }

/* pantalla angosta: no hay espacio a los lados de la tarjeta — un solo fondo con los dos trabajadores abajo, como hace el original en móvil */
@media (max-width:900px){
  .contacto-top::before{ display:none; }
  .contacto-top::after{
    left:0; right:0; width:auto; height:220px; background-image:url('/hpg-site/assets/images/oc-icons/bg-workers.webp');
    background-position:center bottom; background-size:cover; opacity:.55;
  }
}
@media (max-width:640px){
  .contacto-top .wizard-step-title{ font-size:20px; }
}