/* Dos maquetaciones: escritorio amplio y composición vertical para teléfono/tablet. */

@media (min-width:1024px) {
  .hero { min-height: 640px; }
  .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(355px, .85fr); gap: 7%; padding-top: 58px; padding-bottom: 48px; }
  .hero-copy { max-width: 650px; position: static; z-index: 1; }
  .hero-photo { left: calc(50% - 83px); right: auto; top: 136px; width: 180px; height: 180px; border-radius: 50%; opacity: 1; overflow: hidden; background: #193246; box-shadow: 0 18px 48px #0004; }
  .hero-photo::after { background: linear-gradient(90deg, var(--navy) 0%, transparent 27%, transparent 74%, var(--navy) 100%); }
  .hero-photo img { width: 120%; height: 120%; margin: -10%; object-fit: cover; filter: contrast(1.08) saturate(.92); }
  .signup-column { position: relative; z-index: 2; }

  .expert { grid-template-columns: 260px minmax(0, 650px); justify-content: center; gap: 64px; padding-top: 58px; padding-bottom: 58px; }
  .expert-identity { align-self: center; border-radius: 12px; background: #20332e; }
  .expert-identity img { width: 154px; height: 154px; margin: 22px auto 0; border: 0; border-radius: 50%; object-fit: cover; object-position: center 20%; transform: none; background: #dfeef6; }
  .expert-identity > span, .expert-identity small { text-align: center; margin-inline: 14px; }
  .expert-identity > span { margin-top: 22px; }
  .expert-identity small { margin-bottom: 22px; }
  .expert-copy { max-width: 650px; }
  .expert-copy h2 { font-size: 34px; }
}

/* Teléfono y tablet: una composición vertical estable, sin elementos superpuestos. */
@media (max-width:1023px) {
  .hero { min-height: 0; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-top: 36px; padding-bottom: 34px; }
  .hero-copy { max-width: 620px; margin-inline: auto; padding-bottom: 12px; }
  .hero-description, .hero-benefit { max-width: 620px; }
  .hero-photo { position: static; width: 224px; height: 224px; margin: 24px auto 16px; border-radius: 50%; opacity: 1; overflow: hidden; background: #193246; box-shadow: 0 14px 34px #0005; }
  .hero-photo::after { background: linear-gradient(180deg, transparent 54%, var(--navy) 100%); }
  .hero-photo img { width: 120%; height: 120%; margin: -10%; object-fit: cover; filter: contrast(1.08) saturate(.92); }
  .event-meta { margin-top: 24px; margin-bottom: 4px; }
  .signup-column { width: min(100%, 560px); margin-inline: auto; }
  .signup-card { padding: 28px; }
  .host-mini { margin-top: 18px; }

  .expert { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 50px max(5vw, 24px); }
  .expert-identity { min-height: 0; max-width: 390px; width: 100%; margin-inline: auto; border-radius: 12px; background: #20332e; }
  .expert-identity img { width: 156px; height: 156px; margin: 24px auto 0; border: 0; border-radius: 50%; object-fit: cover; object-position: center 20%; transform: none; background: #dfeef6; }
  .expert-identity > span, .expert-identity small { text-align: center; margin-inline: 14px; }
  .expert-identity > span { margin-top: 22px; }
  .expert-identity small { margin-bottom: 22px; }
  .expert-copy { max-width: 620px; margin-inline: auto; }
}

@media (max-width:650px) {
  .hero-photo { width: 172px; height: 172px; margin-top: 20px; margin-bottom: 10px; }
  .hero-copy { padding-bottom: 28px; }
  .event-meta { margin-top: 24px; margin-bottom: 10px; }
  .signup-column { margin-top: 0; }
  .expert-identity img { width: 142px; height: 142px; }
}