/* ============================================================================
   NUEVO ASPECTO 2026 — HERO de la home (reconstruido fiel desde rama rediseno-full,
   junio 2026) sobre el código actual. Todo bajo `.rd` para no afectar al resto.
   Hero grande con foto a sangre + gradiente navy→coral + tarjetas flotantes.
   El chat de Mari Chei va JUSTO DEBAJO (sección aparte), protagonista.
   ============================================================================ */
.rd {
  --navy: #0f1736; --coral: #ec3f68; --coral-d: #c4214c;
  --ink: #16203f; --muted: #5b6480; --line: #e7eaf3;
}
.rd * { box-sizing: border-box; }
.rd-wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }
.rd-grad { background: linear-gradient(92deg, #ff5c81, #ec3f68); -webkit-background-clip: text; background-clip: text; color: transparent; }

.rd-btn { display: inline-flex; align-items: center; gap: 9px; font: 700 14.5px 'Plus Jakarta Sans', system-ui, sans-serif; text-decoration: none; cursor: pointer; border: 0; border-radius: 11px; padding: 13px 22px; transition: transform .15s, box-shadow .15s, background .15s; }
.rd-btn--coral { background: linear-gradient(135deg, var(--coral), var(--coral-d)); color: #fff; box-shadow: 0 8px 20px rgba(236, 63, 104, .3); }
.rd-btn--coral:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(236, 63, 104, .4); }
.rd-btn--outline { border: 1.5px solid rgba(255, 255, 255, .4); color: #fff; background: rgba(255, 255, 255, .06); }
.rd-btn--outline:hover { background: rgba(255, 255, 255, .16); }
.rd-btn--soft { color: #fff; background: transparent; border: 1.5px solid transparent; }
.rd-btn--soft:hover { background: rgba(255, 255, 255, .1); }

.rd-hero { position: relative; overflow: hidden; color: #fff; min-height: 500px; display: flex; align-items: center; border-radius: 0;
  background: linear-gradient(100deg, #0b112c 0%, #16193f 36%, #532a55 74%, #cf3360 100%); }
.rd-hero__compass { position: absolute; top: 50%; left: 32%; transform: translate(-50%, -50%); width: min(1250px, 125vw); height: auto; z-index: 0; opacity: .17; pointer-events: none; }
.rd-hero__compass img { width: 100%; display: block; animation: rd-spin 110s linear infinite; }
@keyframes rd-spin { to { transform: rotate(360deg); } }
.rd-hero__photo { position: absolute; top: 0; right: 0; bottom: 0; width: 48%; z-index: 1;
  background: linear-gradient(100deg, rgba(11, 17, 44, .58), rgba(11, 17, 44, .10) 56%, rgba(40, 18, 52, .15)), url('/assets/photos/hero-estudiante.jpg') 58% 8% / cover;
  -webkit-mask: linear-gradient(90deg, transparent, #000 38%); mask: linear-gradient(90deg, transparent, #000 38%); }
.rd-hero__in { position: relative; z-index: 2; width: 100%; padding: clamp(32px, 4vw, 58px) clamp(18px, 4vw, 40px); }
.rd-hero__text { max-width: 560px; }
.rd-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; font: 700 12px 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: #ffb3c4; }
.rd-eyebrow::before { content: ''; width: 34px; height: 2px; background: var(--coral); }
.rd-hero h1 { margin: 0; font-weight: 800; font-size: clamp(2.6rem, 5.2vw, 4.2rem); line-height: .98; letter-spacing: -.03em; color: #fff; }
.rd-hero__sub { margin: 20px 0 0; max-width: 470px; font-size: clamp(1rem, 1.5vw, 1.12rem); color: #d6dcf2; }
.rd-search { display: flex; align-items: stretch; max-width: 540px; background: #fff; border-radius: 10px; padding: 5px 5px 5px 18px; box-shadow: 0 16px 40px rgba(4, 8, 24, .4); margin-top: 26px; }
.rd-search input { flex: 1; border: 0; outline: 0; background: transparent; font: 500 15px 'Plus Jakarta Sans', system-ui, sans-serif; padding: 14px 0; color: var(--ink); }
.rd-search button { border: 0; background: var(--coral); color: #fff; cursor: pointer; font: 700 14.5px 'Plus Jakarta Sans', system-ui, sans-serif; padding: 0 26px; border-radius: 6px; }
.rd-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.rd-fcard { position: absolute; z-index: 3; background: #fff; color: var(--ink); border-radius: 14px; padding: 13px 15px; box-shadow: 0 18px 38px rgba(4, 8, 24, .36); display: flex; align-items: center; gap: 11px; animation: rd-bob 5s ease-in-out infinite; }
.rd-fcard svg { width: 34px; height: 34px; flex: none; }
.rd-fcard b { display: block; font-weight: 700; font-size: 18px; line-height: 1.1; }
.rd-fcard span { font-size: 12px; color: var(--muted); }
.rd-fcard--1 { top: 13%; right: 5%; animation-delay: .2s; }
.rd-fcard--2 { top: 45%; right: 3%; animation-delay: 1.1s; }
.rd-fcard--3 { bottom: 12%; right: 9%; animation-delay: 2s; }
@keyframes rd-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

@media (max-width: 860px) {
  .rd-hero { min-height: auto; }
  .rd-hero__photo { width: 100%; opacity: .3; -webkit-mask: linear-gradient(180deg, transparent, #000 72%); mask: linear-gradient(180deg, transparent, #000 72%); }
  .rd-fcard { display: none; }
  .rd-hero__in { padding-top: 60px; padding-bottom: 60px; }
}

/* ============================================================================
   HERO EN COLUMNA: título arriba (bien visible) y el chat de Mari Chei justo
   debajo, como protagonista. Sin CTAs ni badges: esas opciones ya las integra
   el propio chat (sus chips + la nota de fuentes). Todo bajo .rd.
   ============================================================================ */
.rd-hero--chat { min-height: auto; }
/* Título arriba y chat debajo, alineados a la IZQUIERDA; la foto llena la derecha. */
.rd-hero--chat .rd-hero__in { display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  padding-top: clamp(40px, 5vw, 60px); padding-bottom: clamp(34px, 4vw, 50px); }
.rd-hero--chat .rd-hero__text { max-width: 600px; }
/* La foto de la chica vuelve a verse, a la derecha (como en junio). */

/* Tarjeta del chat: justo debajo del título y a ANCHO COMPLETO, como los demás banners. */
.rd-hero__chat { position: relative; z-index: 3; min-width: 0; width: 100%; max-width: none; margin-top: clamp(20px, 3vw, 30px); text-align: left; }
.rd-hero__chat .mchome-panel { margin: 0; background: #fff; color: var(--ink); border-radius: 18px; border: 0; box-shadow: 0 26px 60px rgba(4, 8, 24, .42); }
.rd-hero__chat .mc-thread { max-height: 300px; }
/* Cabecera del chat más compacta dentro del hero (el h1 grande es el del hero). */
.rd-hero__chat .mchome-panel__head { margin-bottom: 12px; padding-bottom: 12px; }
.rd-hero__chat .mchome-panel__logo { width: 42px; height: 42px; }
.rd-hero__chat .mchome-panel__title { font-size: clamp(1.3rem, 2.4vw, 1.65rem); }

/* Con Mari Chei dentro del hero, la rejilla inferior solo lleva el eco: a bloque. */
.hero-grid--eco-only { display: block; }

@media (max-width: 860px) {
  .rd-hero--chat .rd-hero__in { padding-top: 54px; }
  .rd-hero--chat .rd-hero__text, .rd-hero--chat .rd-hero__chat { max-width: none; }
}