/* Portada con sesión iniciada: "¿Quién cocina para ti?". Principios en docs/RAVLI_PRINCIPIOS.md
   Lectura de diseño: no es un catálogo. Es una sola persona a pantalla completa, como la portada de una
   revista, y debajo las caras de las demás: se elige a alguien, no un producto.
   Una sola decisión por pantalla: conocer a esa persona. Sin buscador grande, sin categorías, sin tarjetas.
   Diales: variance 8 / motion 6 / density 1. Usa las variables y botones de .rp (ravli_profile.css). */

.rh { position: relative; isolation: isolate; height: 100vh; height: 100dvh; min-height: 420px; overflow: hidden; padding: 0; background: #141210; }
.rh[x-cloak] { display: none !important; }

/* ---------- Las fotos: una encima de otra, se funden al cambiar de persona ---------- */
.rh-stage { position: absolute; inset: 0; z-index: -2; }
.rh-shot { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s var(--rp-ease); }
.rh-shot.is-on { opacity: 1; }
.rh-shot { overflow: hidden; }
/* La foto ocupa la parte derecha: así la cara queda fuera del texto, que va a la izquierda sobre lo oscuro */
.rh-shot img { position: absolute; top: 0; right: 0; width: 68%; height: 100%; object-fit: cover; object-position: 50% 18%; scale: 1.05; transform-origin: 60% 30%; transition: scale 7s cubic-bezier(0.2, 0.6, 0.2, 1); }
.rh-shot.is-on img { scale: 1; }
/* Sin foto real: un fondo cálido con su inicial, nunca una ilustración genérica */
.rh-shot.no-photo { display: grid; place-content: center; background: radial-gradient(120% 90% at 78% 30%, #3a2f26 0%, #1f1a16 55%, #141210 100%); }
.rh-shot.no-photo span { font-size: clamp(220px, 34vw, 520px); font-weight: 600; letter-spacing: -0.06em; line-height: 0.8; color: rgba(244, 239, 232, 0.07); translate: 22% 0; }
.rh::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(90deg, #141210 0%, #141210 31%, rgba(20, 18, 16, 0.86) 40%, rgba(20, 18, 16, 0.32) 58%, rgba(20, 18, 16, 0) 76%),
        linear-gradient(180deg, rgba(14, 12, 10, 0.78) 0%, rgba(14, 12, 10, 0.3) 14%, rgba(14, 12, 10, 0) 28%),
        linear-gradient(0deg, rgba(14, 12, 10, 0.94) 0%, rgba(14, 12, 10, 0.55) 24%, rgba(14, 12, 10, 0) 48%);
}

.rh-wrap { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding-bottom: 24px; }
@media (min-width: 768px) { .rh-wrap { padding-bottom: 32px; } }

/* ---------- Barra de arriba: transparente, la foto sigue hasta el borde ----------
   Solo texto sobre la sombra suave de la parte alta de la foto; nada de franja ni caja. */
.rh-bar { position: relative; z-index: 10; display: flex; align-items: center; gap: 20px; height: 76px; }
@media (min-width: 1024px) { .rh-bar { height: 92px; gap: 44px; } }
.rh-logo { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--rp-accent); flex-shrink: 0; transition: opacity 0.3s var(--rp-ease); }
.rh-logo:hover { opacity: 0.8; }
.rh-nav { display: none; align-items: center; gap: 32px; font-size: 16px; }
@media (min-width: 1024px) { .rh-nav { display: flex; } }
.rh-nav a { position: relative; padding: 6px 0; color: rgba(244, 239, 232, 0.72); transition: color 0.3s var(--rp-ease); }
.rh-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rp-text); scale: 0 1; transform-origin: left; transition: scale 0.4s var(--rp-ease); }
.rh-nav a:hover { color: var(--rp-text); }
.rh-nav a:hover::after { scale: 1 1; }
.rh-dot { display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-radius: 999px; background: var(--rp-accent); vertical-align: middle; }

/* Buscar: una línea, siempre a la vista */
.rh-find { flex: 1; min-width: 0; display: flex; justify-content: flex-end; }
.rh-find input { width: 100%; max-width: 320px; padding: 8px 0 9px; border: 0; border-bottom: 1px solid rgba(244, 239, 232, 0.3); border-radius: 0; background: transparent; color: var(--rp-text); font: inherit; font-size: 16px; outline: none; transition: border-color 0.3s var(--rp-ease), max-width 0.5s var(--rp-ease); }
.rh-find input::placeholder { color: rgba(244, 239, 232, 0.6); }
.rh-find input:hover { border-color: rgba(244, 239, 232, 0.6); }
.rh-find input:focus { border-color: var(--rp-text); max-width: 400px; }
.rh-find input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* El menú de la cuenta es el común: _account_menu.html, estilos .rv-me en base.html */
.rh-guest { display: flex; align-items: center; gap: 24px; margin: 0; flex-shrink: 0; font-size: 16px; }
.rh-guest a { color: rgba(244, 239, 232, 0.8); transition: color 0.3s var(--rp-ease); }
.rh-guest a:hover { color: var(--rp-text); }
.rh-guest a.is-strong { color: var(--rp-text); font-weight: 600; border-bottom: 1px solid rgba(244, 239, 232, 0.4); padding-bottom: 1px; }

.rh-hello { margin: 0 0 clamp(12px, 4vh, 44px); font-size: 16px; color: var(--rp-muted); }
.rh-hello a { color: var(--rp-text); border-bottom: 1px solid rgba(244, 239, 232, 0.3); padding-bottom: 1px; transition: border-color 0.3s var(--rp-ease); }
.rh-hello a:hover { border-color: var(--rp-text); }

/* ---------- La persona ---------- */
.rh-who { align-self: end; max-width: 700px; min-height: 0; max-height: 100%; overflow: hidden; padding-bottom: clamp(12px, 3.4vh, 40px); }
.rh-card { display: none; }
.rh-card.is-on { display: block; }
.rh-place { margin: 0 0 clamp(6px, 1.6vh, 12px); font-size: 16px; color: var(--rp-muted); }
.rh-name { margin: 0; font-size: clamp(40px, min(7.2vw, 14.5vh), 108px); font-weight: 600; letter-spacing: -0.05em; line-height: 0.92; text-wrap: balance; color: var(--rp-text); }
.rh-line { margin: clamp(10px, 2.6vh, 22px) 0 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: rgba(244, 239, 232, 0.82); max-width: 44ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rh-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin: clamp(10px, 2.2vh, 18px) 0 0; padding: 0; list-style: none; font-size: 16px; color: var(--rp-text); }
.rh-facts li { display: inline-flex; align-items: center; gap: 7px; }
.rh-facts svg { width: 15px; height: 15px; color: var(--rp-star); }
.rh-facts .is-quiet { color: var(--rp-muted); }
.rh-go { display: flex; align-items: center; gap: 26px; margin-top: clamp(14px, 3.6vh, 30px); }
.rh-go .rp-btn { padding: 17px 34px; font-size: 17px; }
.rh-next { display: inline-flex; align-items: center; gap: 9px; padding: 0 0 2px; border: 0; border-bottom: 1px solid rgba(244, 239, 232, 0.3); background: none; color: var(--rp-text); font: inherit; font-size: 16px; cursor: pointer; transition: border-color 0.3s var(--rp-ease), gap 0.3s var(--rp-ease); }
.rh-next:hover { border-color: var(--rp-text); gap: 14px; }
.rh-next svg { width: 16px; height: 16px; }

/* Cada vez que cambia la persona, su texto sube en orden */
@media (prefers-reduced-motion: no-preference) {
    .rh-card.is-on > * { animation: rp-rise 0.9s var(--rp-ease) both; }
    .rh-card.is-on > :nth-child(2) { animation-delay: 0.07s; }
    .rh-card.is-on > :nth-child(3) { animation-delay: 0.14s; }
    .rh-card.is-on > :nth-child(4) { animation-delay: 0.21s; }
    .rh-card.is-on > :nth-child(5) { animation-delay: 0.28s; }
}

/* ---------- Abajo: a quién ver (colecciones) y sus caras ---------- */
.rh-foot { display: grid; gap: 12px; min-width: 0; }
.rh-sets { display: flex; align-items: center; gap: 26px; overflow-x: auto; scrollbar-width: none; font-size: 15px; }
.rh-sets::-webkit-scrollbar { display: none; }
.rh-set { position: relative; flex-shrink: 0; padding: 6px 0; border: 0; background: none; color: rgba(244, 239, 232, 0.5); font: inherit; white-space: nowrap; cursor: pointer; transition: color 0.3s var(--rp-ease); }
.rh-set::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rp-text); scale: 0 1; transform-origin: left; transition: scale 0.5s var(--rp-ease); }
.rh-set:hover { color: var(--rp-text); }
.rh-set.is-on { color: var(--rp-text); font-weight: 600; }
.rh-set.is-on::after { scale: 1 1; }
.rh-faces { display: flex; align-items: center; gap: 14px; margin: 0; padding: 6px 2px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.rh-faces::-webkit-scrollbar { display: none; }
.rh-faces li { flex-shrink: 0; }
.rh-face { position: relative; display: block; flex-shrink: 0; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 999px; background: var(--rp-raise); cursor: pointer; opacity: 0.5; transition: opacity 0.5s var(--rp-ease), width 0.5s var(--rp-ease), height 0.5s var(--rp-ease), box-shadow 0.5s var(--rp-ease); }
.rh-face:hover { opacity: 0.9; }
.rh-face.is-on { width: 68px; height: 68px; opacity: 1; box-shadow: 0 0 0 2px #141210, 0 0 0 3px var(--rp-text); }
.rh-face img { width: 100%; height: 100%; border-radius: 999px; object-fit: cover; object-position: 50% 20%; }
.rh-face span { display: grid; place-content: center; width: 100%; height: 100%; font-size: 19px; font-weight: 600; color: var(--rp-muted); }
.rh-face:focus-visible { outline: 2px solid var(--rp-text); outline-offset: 4px; opacity: 1; }

/* ---------- Sin resultados ---------- */
.rh-empty { align-self: center; max-width: 620px; }
.rh-empty h1 { margin: 0; font-size: clamp(36px, 5vw, 64px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; text-wrap: balance; color: var(--rp-text); }
.rh-empty p { margin: 18px 0 28px; font-size: 18px; line-height: 1.5; color: var(--rp-muted); }

/* ---------- Pantallas de poca altura ----------
   Un portátil con Windows al 150% deja unos 560 px de alto. Ahí se aprieta el aire y se quita
   lo secundario, en este orden: segunda línea de la frase, la frase, el saludo. Nunca se monta nada. */
@media (min-width: 768px) and (max-height: 720px) {
    .rh-bar { height: 72px; }
    /* Una sola línea, cortada con puntos suspensivos */
    .rh-line { display: block; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; }
    .rh-go .rp-btn { padding: 14px 28px; font-size: 16px; }
    .rh-wrap { padding-bottom: 20px; }
    .rh-foot { gap: 8px; }
    .rh-face { width: 44px; height: 44px; }
    .rh-face.is-on { width: 56px; height: 56px; }
    .rh-faces { gap: 12px; padding-block: 4px; }
}
@media (min-width: 768px) and (max-height: 540px) {
    .rh-bar { height: 64px; }
    .rh-line { display: none; }
    .rh-face { width: 40px; height: 40px; }
    .rh-face.is-on { width: 50px; height: 50px; }
}
@media (min-width: 768px) and (max-height: 470px) {
    .rh-hello { display: none; }
    .rh-sets { display: none; }
}

@media (max-width: 767px) {
    .rh::after {
        background:
            linear-gradient(180deg, rgba(14, 12, 10, 0.7) 0%, rgba(14, 12, 10, 0) 22%),
            linear-gradient(0deg, rgba(14, 12, 10, 0.97) 0%, rgba(14, 12, 10, 0.9) 30%, rgba(14, 12, 10, 0.5) 46%, rgba(14, 12, 10, 0.12) 58%, rgba(14, 12, 10, 0) 66%);
    }
    .rh-shot img { width: 100%; object-position: 50% 12%; }
    /* Las caras quedan justo encima de la barra de abajo (que mide 56 px y flota a 8 del borde) */
    .rh-wrap { padding-bottom: 74px; }
    /* En el teléfono la cara manda: el texto se recoge abajo, cada dato en una sola línea, y el velo oscuro
       solo cubre la parte baja de la foto. Una sombra suave deja leer las líneas que caen sobre la chaqueta. */
    .rh-who { padding-bottom: 14px; text-shadow: 0 1px 14px rgba(14, 12, 10, 0.55); }
    .rh-who .rp-btn { text-shadow: none; }
    .rh-hello, .rh-place, .rh-line { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; }
    .rh-hello { margin-bottom: 6px; font-size: 14px; color: rgba(244, 239, 232, 0.86); }
    .rh-hello.is-next { display: none; }
    .rh-place { margin-bottom: 6px; font-size: 14px; color: rgba(244, 239, 232, 0.8); }
    .rh-line { margin-top: 8px; font-size: 16px; }
    .rh-facts { margin-top: 8px; font-size: 15px; }
    .rh-go { margin-top: 14px; }
    .rh-go .rp-btn { padding: 15px 26px; font-size: 16px; }
    .rh-find input { max-width: none; font-size: 15px; }
    .rh-sets { gap: 20px; }
    .rh-go { flex-wrap: wrap; gap: 18px; }
    .rh-go .rp-btn { flex: 1; }
    .rh-face { width: 46px; height: 46px; }
    .rh-face.is-on { width: 58px; height: 58px; }
}
/* Teléfonos bajos (iPhone SE, o Safari con todas sus barras): se quita lo secundario antes que tapar la cara */
@media (max-width: 767px) and (max-height: 610px) {
    .rh-line, .rh-place { display: none; }
    .rh-bar { height: 64px; }
    .rh-face { width: 40px; height: 40px; }
    .rh-face.is-on { width: 50px; height: 50px; }
}
/* Teléfonos estrechos: el botón y "Otra persona" siguen en la misma línea */
@media (max-width: 359px) {
    .rh-go { flex-wrap: nowrap; gap: 14px; }
    .rh-go .rp-btn { padding: 14px 16px; font-size: 15px; }
    .rh-next { font-size: 15px; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
    .rh *, .rh *::before, .rh *::after { transition: none !important; animation: none !important; }
}