/* ============================================================
   ORTHOBONE INC. — GLOBAL STYLES
   ============================================================ */
.hero {  background-image: url("../assets/banner-hero-contact.webp");}

.ph-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.ph-chip {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px; font-weight: 500;
  color: rgba(255,255,255,0.75);
}

.chip-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }

/* ── MAIN SECTION ── */
.contact-section { padding: 80px 0; background: white; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }

  /* ── FORM ── */
.form-title { font-family: var(--font-display); font-size: 36px; color: var(--blue-deep); line-height: 1.2; margin-bottom: 8px; font-weight: 900; }
.form-desc { font-size: 15px; color: var(--text-muted-dark); line-height: 1.6; margin-bottom: 32px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.form-group:last-child { margin-bottom: 0; }
.form-label { font-size: 14px; font-weight: 600; color: var(--text-soft); letter-spacing: 0.3px; }
.form-label span { color: var(--gold); }
.form-input { width: 100%; padding: 12px 16px; border: 1.5px solid var(--gray-300); border-radius: 8px; font-size: 14px; font-family: var(--font-body); color: var(--text); background: white; transition: all .2s; outline: none; }
.form-input:focus { border-color: var(--blue-mid); box-shadow: 0 0 0 3px rgba(27,62,130,.08); }
.form-input::placeholder { color: var(--text-muted); font-size: 13px; }
.form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%237080A0' stroke-width='2' d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; cursor: pointer; }
textarea.form-input { resize: vertical; min-height: 130px; line-height: 1.6; }

.form-submit { width: 100%; background: var(--blue-mid); color: white; border: none; padding: 15px 28px; border-radius: 8px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: var(--font-body); transition: all .2s; margin-top: 8px; letter-spacing: 0.3px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.form-submit:hover { background: var(--blue-deep); transform: translateY(-1px); }
.form-submit:active { transform: none; }
.form-note { font-size: 11px; color: var(--text-muted); line-height: 1.6; margin-top: 12px; text-align: center; }
.form-note a { color: var(--blue-light); }

/* Success message */
.form-success { display: none; padding: 20px 24px; background: #EAF5EE; border: 1px solid #90CCA0; border-radius: 10px; margin-top: 16px; }
.form-success.visible { display: flex; align-items: flex-start; gap: 12px; }
.fs-icon { width: 36px; height: 36px; border-radius: 8px; background: #22A050; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fs-title { font-size: 14px; font-weight: 600; color: #1A5030; margin-bottom: 4px; }
.fs-desc { font-size: 13px; color: #3A7050; line-height: 1.6; }

  /* Mensajes de error */
.form-error {
  font-size: 13px;
  color: #C62828; /* rojo profesional */
  margin-top: 6px;
  line-height: 1.3;
  display: none; /* oculto por defecto */
}

/* Cuando hay error, lo mostramos */
.is-invalid + .form-error {
  display: block;
}

/* Input inválido */
.is-invalid {
  border: 1px solid #C62828 !important;
  background: #FDECEC;
}

/* Input válido */
.is-valid {
  border: 1px solid #2E7D32 !important;
  background: #E8F5E9;
}

/* ── INFO PANEL ── */
.info-title { font-family: var(--font-display); font-size: 36px; color: var(--blue-deep); line-height: 1.2; margin-bottom: 8px; font-weight: 900; }
.info-desc { font-size: 15px; color: var(--text-muted-dark); line-height: 1.6; margin-bottom: 32px; }

.info-card { background: var(--gray-100); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--gray-200); margin-bottom: 16px; transition: all .22s; }
.info-card:hover { border-color: var(--blue-light); box-shadow: var(--shadow-md); }
.info-card-inner { padding: 22px 24px; display: flex; align-items: flex-start; gap: 16px; }
.ic-icon { width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ic-label { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: var(--text-muted); text-transform: uppercase; margin-bottom: 5px; }
.ic-value { font-size: 14px; font-weight: 500; color: var(--text); line-height: 1.55; }
.ic-value a { color: var(--blue-mid); text-decoration: none; font-weight: 600; }
.ic-value a:hover { text-decoration: underline; }



/* Social row */
.social-row { display: flex; gap: 10px; margin-top: 16px; }
.social-btn { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1.5px solid var(--gray-300); border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text-soft); text-decoration: none; transition: all .18s; background: white; }
.social-btn:hover { border-color: var(--blue-mid); color: var(--blue-mid); background: var(--blue-soft); }

/* ── MAP SECTION ── */
.map-section { padding: 0; background: var(--gray-100); }

/* Map frame */
.map-frame-wrap { position: relative; }
.region-map { width: 100%; border: none; display: block; filter: saturate(0.85); }

/* ── ANIMATIONS ── */
  @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.visible { opacity: 1; transform: none; }
  .ph-eyebrow { animation: fadeUp .5s ease .1s both; }
  .ph-title    { animation: fadeUp .5s ease .2s both; }
  .ph-desc     { animation: fadeUp .5s ease .3s both; }
  .ph-chips    { animation: fadeUp .5s ease .4s both; }
  .hero-info-card { animation: fadeUp .6s ease .3s both; }