/* ============================================================
   ONCO ORAL · Dirección 2 DARK GLASS — Página 5 CONTACTO
   CSS propio (Elena). Reusa tokens y clases de styles.css (Fede).
   Solo agrega lo que no existe en el design system base.
   ============================================================ */

/* Nota: header, nav, estado .nav-link.is-active y el drawer móvil viven en el
   styles.css de Fede (clases nav-toggle / mobile-drawer / mobile-link). main.js
   (initDrawer) maneja la apertura. Aquí NO se duplican ni se editan. */

/* ---- eyebrow centrado (variante para hero centrado de contacto) ---- */
.eyebrow--center { padding-left: 0; }
.eyebrow--center::before { display: none; }

/* ---- hero de contacto (no full-screen) ---- */
.contacto-hero { min-height: 62vh; }

/* ============================================================
   SECCIÓN 1 · TARJETAS DE PERFIL (links que abren WhatsApp)
   ============================================================ */
.profile-card {
  display: flex; flex-direction: column; gap: .85rem;
  padding: 1.8rem 1.7rem; color: var(--ink); text-align: left;
  transition: transform .35s var(--spring), box-shadow .35s ease;
}
.profile-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 64px -28px rgba(40,97,139,.7), inset 0 1px 0 rgba(255,255,255,.12);
}
.profile-card:focus-visible { outline: 2px solid var(--jeansup); outline-offset: 3px; }
.profile-card__icon {
  width: 48px; height: 48px; border-radius: .9rem; display: grid; place-items: center;
  color: var(--jeansup); background: rgba(90,160,214,.12);
  border: 1px solid rgba(90,160,214,.28);
}
.profile-card__title { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700;
  font-size: 1.3rem; color: var(--ink); }
.profile-card__text { color: var(--ink); opacity: .82; line-height: 1.55; flex: 1 1 auto; }
.profile-card__cta {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: .3rem;
  color: var(--jeansup); font-weight: 600; font-size: .92rem;
  transition: gap .25s var(--spring), color .25s ease;
}
.profile-card:hover .profile-card__cta { gap: .75rem; color: var(--ink); }
/* la de médico tratante con el filo cálido (pastel) como acento único */
.profile-card--accent { border-color: rgba(255,244,201,.3); }
.profile-card--accent::before { opacity: 1;
  background: linear-gradient(135deg, rgba(255,244,201,.5), rgba(90,160,214,.12) 50%, rgba(255,244,201,.18)); }
.profile-card--accent .profile-card__icon {
  color: var(--pastel); background: rgba(255,244,201,.1); border-color: rgba(255,244,201,.3); }

/* ============================================================
   SECCIÓN 2 · GRID DE CANALES
   ============================================================ */
.contact-grid { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.contact-item {
  display: flex; align-items: flex-start; gap: 1rem; padding: 1.3rem 1.4rem;
  transition: transform .35s var(--spring), box-shadow .35s ease;
}
.contact-item:hover { transform: translateY(-4px);
  box-shadow: 0 26px 56px -30px rgba(40,97,139,.6), inset 0 1px 0 rgba(255,255,255,.1); }
.contact-item__icon {
  width: 42px; height: 42px; border-radius: .75rem; display: grid; place-items: center;
  color: var(--jeansup); background: rgba(90,160,214,.12);
  border: 1px solid rgba(90,160,214,.26); flex-shrink: 0;
}
.contact-item__label {
  display: block; font-family: "JetBrains Mono", monospace; font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--acero); margin-bottom: .3rem;
}
.contact-item__value { color: var(--ink); font-weight: 500; line-height: 1.45; }
a.contact-item__value { transition: color .2s ease; }
a.contact-item__value:hover { color: var(--jeansup); }

/* ---- endoso Ciclos ---- */
.endoso {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: "JetBrains Mono", monospace; font-size: .82rem; letter-spacing: .04em;
  color: var(--acero);
}
.endoso i { color: var(--pastel); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 767px) {
  /* ocultar nav desktop ya lo hace Tailwind (hidden md:flex); aquí solo el grid */
  .contact-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   ACCESIBILIDAD · reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .profile-card, .contact-item { transition: none; }
  .profile-card:hover, .contact-item:hover { transform: none; }
}