/* Perfil del cocinero. Principios en docs/RAVLI_PRINCIPIOS.md
   Lectura de diseño: perfil editorial de una persona que cocina para ti (Airbnb Luxe + Apple).
   Oscuro cálido, un solo acento (el rojo de Ravli) solo para reservar.
   Forma: fotos con radio de 20px, botones en píldora. Diales: variance 7 / motion 5 / density 3. */

.rp {
    --rp-bg: #1a1a1a;
    --rp-surface: #221f1c;
    --rp-raise: #2b2825;
    --rp-text: #f4efe8;
    --rp-muted: rgba(244, 239, 232, 0.64);
    --rp-soft: rgba(244, 239, 232, 0.42);
    --rp-faint: rgba(244, 239, 232, 0.12);
    --rp-accent: #ff383c;
    --rp-accent-press: #e5292d;
    --rp-star: #f4c46b;
    --rp-radius: 20px;
    --rp-ease: cubic-bezier(0.16, 1, 0.3, 1);

    color: var(--rp-text);
    background: var(--rp-bg);
    font-family: 'Outfit', system-ui, sans-serif;
    padding-bottom: 120px;
}
@media (min-width: 1024px) { .rp { padding-bottom: 140px; } }

/* styles.css pinta h1-h6 con un color oscuro global */
.rp h1, .rp h2, .rp h3 { color: var(--rp-text); }

/* Una sola anchura de página en todo Ravli: el contenido empieza donde el logo y termina donde el avatar
   (mismo --rv-page que la cabecera, definido en base.html: 48 px a cada lado en escritorio, tope 1600 px). Así ninguna pantalla tiene más aire lateral que otra. */
.rp-wrap { width: 100%; max-width: var(--rv-page, 1600px); margin-inline: auto; padding-inline: 20px; }
@media (min-width: 768px) { .rp-wrap { padding-inline: 32px; } }

.rp a:focus-visible, .rp button:focus-visible { outline: 2px solid var(--rp-text); outline-offset: 3px; }

/* Header transparente sobre la foto mientras estás arriba del todo */
html.rp-top #main-header {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* ---------- Botones ---------- */
.rp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 28px;
    border-radius: 999px;
    background: var(--rp-accent);
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    white-space: nowrap;
    border: 0;
    cursor: pointer;
    transition: background-color 0.2s var(--rp-ease), transform 0.2s var(--rp-ease);
}
.rp-btn:hover { background: var(--rp-accent-press); }
.rp-btn:active { transform: scale(0.98); }
.rp-btn.is-block { width: 100%; }
.rp-btn.is-ghost { background: transparent; color: var(--rp-text); border: 1px solid var(--rp-faint); }
.rp-btn.is-ghost:hover { border-color: var(--rp-text); }
.rp-btn.is-light { background: var(--rp-text); color: var(--rp-bg); }
.rp-btn.is-light:hover { background: #fff; }
.rp-btn.is-sm { padding: 11px 20px; font-size: 15px; }

.rp-textlink { font-weight: 600; color: var(--rp-text); border-bottom: 1px solid var(--rp-faint); padding-bottom: 2px; transition: border-color 0.2s var(--rp-ease); }
.rp-textlink:hover { border-color: var(--rp-text); }

/* ---------- 1. Hero ---------- */
.rp-hero { position: relative; isolation: isolate; overflow: hidden; }
.rp-hero-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 8px; pointer-events: none; }
.rp-hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.rp-hero-media img { position: absolute; left: 0; top: 0; width: 100%; height: 110%; object-fit: cover; object-position: 50% 22%; }
.rp-hero-shade {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(14, 12, 10, 0.55) 0%, rgba(14, 12, 10, 0) 22%),
        linear-gradient(180deg, rgba(26, 26, 26, 0) 38%, rgba(26, 26, 26, 0.75) 70%, #1a1a1a 100%);
}
.rp-hero-inner {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 62vh;
    min-height: 62svh;
    padding-block: 110px 28px;
}
.rp-hero-actions {
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}
.rp-round {
    pointer-events: auto;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 18, 16, 0.5);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.16);
}
.rp-round svg { width: 18px; height: 18px; }

.rp-kicker { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 15px; color: rgba(244, 239, 232, 0.8); }
.rp-kicker svg { width: 15px; height: 15px; }

/* Sin foto real: hero tipográfico, más bajo, con la ilustración como avatar */
.rp-avatar { display: block; width: 96px; height: 96px; margin-bottom: 20px; border-radius: 999px; object-fit: cover; background: var(--rp-raise); border: 1px solid var(--rp-faint); }
.rp-hero.no-photo .rp-hero-inner { min-height: 0; padding-block: 128px 8px; }
@media (min-width: 1024px) {
    .rp-hero.no-photo .rp-hero-inner { min-height: 0; padding-block: 136px 8px; }
    .rp-hero.no-photo .rp-hero-copy { max-width: 760px; }
}
.rp-name {
    margin: 0;
    font-size: clamp(38px, 5.2vw, 68px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.04em;
    text-wrap: balance;
}
.rp-signals { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 18px; font-size: 15px; }
.rp-signal { display: inline-flex; align-items: center; gap: 7px; color: var(--rp-text); }
.rp-signal svg { width: 15px; height: 15px; }
.rp-signal .is-star { color: var(--rp-star); display: inline-flex; }
a.rp-signal { border-bottom: 1px solid rgba(244, 239, 232, 0.3); padding-bottom: 1px; }
a.rp-signal:hover { border-color: var(--rp-text); }

/* Escritorio: composición editorial. Texto a la izquierda, foto a sangre a la derecha. */
@media (min-width: 1024px) {
    .rp-hero { min-height: 0; }
    .rp-hero-media { left: auto; width: 50%; }
    .rp-hero-shade {
        left: auto;
        width: 50%;
        background:
            linear-gradient(90deg, #1a1a1a 0%, rgba(26, 26, 26, 0.55) 18%, rgba(26, 26, 26, 0) 42%),
            linear-gradient(180deg, rgba(14, 12, 10, 0.45) 0%, rgba(14, 12, 10, 0) 20%),
            linear-gradient(180deg, rgba(26, 26, 26, 0) 70%, #1a1a1a 100%);
    }
    /* nombre y datos centrados en vertical, descontando la altura del header */
    .rp-hero-inner { min-height: clamp(460px, 58vh, 580px); justify-content: center; padding-block: 104px 40px; }
    .rp-hero-copy { max-width: 48%; }
    .rp-hero-actions { top: 104px; }
}

@media (prefers-reduced-motion: no-preference) {
    .rp-hero-copy > * { animation: rp-rise 0.9s var(--rp-ease) both; }
    .rp-hero-copy > :nth-child(2) { animation-delay: 0.08s; }
    .rp-hero-copy > :nth-child(3) { animation-delay: 0.16s; }
    .rp-hero-media img { animation: rp-settle 1.6s var(--rp-ease) both; }
    @supports (animation-timeline: scroll()) {
        .rp-hero-media img {
            animation: rp-settle 1.6s var(--rp-ease) both, rp-drift linear both;
            animation-timeline: auto, scroll(root);
            animation-range: normal, 0 100vh;
        }
    }
}
@keyframes rp-rise { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@keyframes rp-settle { from { scale: 1.06; } to { scale: 1; } }
@keyframes rp-drift { from { translate: 0 0; } to { translate: 0 7%; } }

/* ---------- Secciones ---------- */
.rp-section { padding-top: 88px; scroll-margin-top: 40px; }
@media (min-width: 1024px) { .rp-section { padding-top: 112px; } }
/* Perfil del cocinero: tiene poco contenido y con 112px entre secciones se leía como huecos */
.rp-cook .rp-section { padding-top: 72px; }
@media (min-width: 1024px) { .rp-cook .rp-section { padding-top: 80px; } .rp.rp-cook { padding-bottom: 88px; } }
.rp-head { display: grid; gap: 10px; margin-bottom: 32px; max-width: 720px; }
.rp-head-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; margin-bottom: 40px; }
.rp-head-row .rp-head { margin-bottom: 0; }
.rp-h2 { margin: 0; font-size: clamp(28px, 3.2vw, 40px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.02; text-wrap: balance; }
.rp-lead { margin: 0; font-size: 17px; line-height: 1.6; color: var(--rp-muted); max-width: 56ch; }

/* Recuadro para el dueño: lo que le falta al perfil */
.rp-nudge { display: grid; gap: 16px; margin-top: 40px; padding: 24px 26px; border-radius: 24px; background: var(--rp-surface); border: 1px solid rgba(244, 196, 107, 0.28); }
.rp-nudge-head { display: grid; gap: 4px; }
.rp-nudge-head b { font-size: 18px; font-weight: 600; }
.rp-nudge-head span { font-size: 15px; color: var(--rp-muted); }
.rp-nudge-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.rp-nudge-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 15px; color: var(--rp-muted); }
.rp-nudge-list li > svg { width: 18px; height: 18px; color: var(--rp-star); flex-shrink: 0; }
.rp-nudge-list li > span { color: var(--rp-text); font-weight: 500; }

/* Consejos de foto (desplegables) */
.rv-tips-details { border-top: 1px solid var(--rp-faint); padding-top: 14px; }
.rv-tips-details summary { cursor: pointer; font-size: 15px; font-weight: 600; color: var(--rp-text); list-style: none; display: inline-flex; align-items: center; gap: 8px; }
.rv-tips-details summary::-webkit-details-marker { display: none; }
.rv-tips-details summary::after { content: "+"; font-size: 18px; color: var(--rp-muted); transition: transform 0.2s var(--rp-ease); }
.rv-tips-details[open] summary::after { transform: rotate(45deg); }
.rv-tips { display: grid; gap: 20px; margin-top: 16px; }
@media (min-width: 900px) { .rv-tips { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; } }
.rv-tips-group b { display: block; font-size: 15px; font-weight: 600; color: var(--rp-text); margin-bottom: 8px; }
.rv-tips-group ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 15px; line-height: 1.5; color: var(--rp-muted); }
.rv-tips-group li span { color: var(--rp-text); font-weight: 500; }

/* 2. Su voz */
.rp-voice { display: grid; gap: 32px; padding-top: 56px; }
@media (min-width: 1024px) { .rp-voice { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 80px; align-items: start; padding-top: 72px; } .rp-cook .rp-voice { align-items: center; padding-top: 56px; } }
.rp-quote {
    margin: 0;
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: -0.02em;
    text-wrap: pretty;
    max-width: 40ch;
}
/* textos largos (más de una frase) se leen mejor en un cuerpo menor */
.rp-quote.is-long { font-size: clamp(19px, 1.8vw, 23px); line-height: 1.45; letter-spacing: -0.01em; max-width: 52ch; }
.rp-quote::before { content: "\201C"; }
.rp-quote::after { content: "\201D"; }
.rp-quote-by { display: block; margin-top: 18px; font-size: 16px; color: var(--rp-muted); }
.rp-facts { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.rp-facts li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-block: 16px; border-top: 1px solid var(--rp-faint); font-size: 16px; }
.rp-facts li:last-child { border-bottom: 1px solid var(--rp-faint); }
.rp-facts span { color: var(--rp-muted); }
.rp-facts b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.rp-voice.is-facts-only { display: block; }
.rp-voice.is-facts-only .rp-facts { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 32px; }
.rp-voice.is-facts-only .rp-facts li { flex-direction: column; justify-content: flex-start; gap: 4px; border-bottom: 1px solid var(--rp-faint); }
.rp-voice.is-facts-only .rp-facts li:nth-child(n) { border-top: 1px solid var(--rp-faint); }
.rp-voice.is-facts-only .rp-facts b { text-align: left; font-size: 18px; }

/* 3. Su cocina: filas con línea fina, como la tablita de datos; cada cocina con su ícono propio (dos columnas en escritorio) */
.rp-cuisines { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--rp-faint); }
@media (min-width: 768px) { .rp-cuisines { grid-template-columns: 1fr 1fr; column-gap: 56px; } }
.rp-cuisine {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 72px;
    padding-block: 12px;
    border-bottom: 1px solid var(--rp-faint);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.01em;
}
.rp-cuisine > span { flex: 1; min-width: 0; }
.rp-cuisine svg {
    box-sizing: content-box;
    width: 18px;
    height: 18px;
    padding: 8px;
    border-radius: 999px;
    background: var(--rp-raise);
    color: var(--rp-star);
}

/* 4. Platos y Menús */
.rp-owner-row { display: flex; flex-wrap: wrap; gap: 10px; }
.rp-block + .rp-block { margin-top: 64px; }
.rp-block-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.rp-h3 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -0.015em; }
.rp-block-note { font-size: 14px; color: var(--rp-muted); }
.rp-arrows { display: none; gap: 8px; }
@media (min-width: 1024px) { .rp-arrows { display: flex; } }
.rp-arrow {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--rp-faint);
    color: var(--rp-text);
    cursor: pointer;
    transition: border-color 0.2s var(--rp-ease);
}
.rp-arrow:hover { border-color: var(--rp-text); }
.rp-arrow svg { width: 18px; height: 18px; }
.rp-arrow.is-next svg { transform: rotate(180deg); }

/* Menús completos: tarjetas con la foto a sangre, en un carrusel */
.rp-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: -20px;
    padding: 4px 20px 8px;
    scroll-padding-inline: 20px;
    scrollbar-width: none;
}
.rp-track::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
    .rp-track { grid-auto-columns: calc((100% - 2 * 20px) / 2.4); gap: 20px; margin-inline: -32px; padding-inline: 32px; scroll-padding-inline: 32px; }
}
@media (min-width: 1024px) { .rp-track { grid-auto-columns: calc((100% - 2 * 24px) / 3); gap: 24px; margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; } }
@media (min-width: 1440px) { .rp-track { grid-auto-columns: calc((100% - 3 * 24px) / 4); } }
@media (min-width: 768px) { .rp-track.is-single { grid-auto-columns: minmax(0, 560px); } }

.rp-mcard {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 3 / 4;
    max-width: 100%;
    padding: 0;
    border: 0;
    border-radius: 28px;
    overflow: hidden;
    text-align: left;
    color: var(--rp-text);
    font: inherit;
    cursor: pointer;
    scroll-snap-align: start;
    /* sin foto: una superficie cálida con el detalle de los platos */
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(244, 196, 107, 0.16), transparent 60%),
        linear-gradient(160deg, #2d2925 0%, #201d1a 100%);
    box-shadow: inset 0 0 0 1px rgba(244, 239, 232, 0.08);
    transition: transform 0.5s var(--rp-ease), box-shadow 0.3s var(--rp-ease);
}
.rp-mcard:hover { transform: translateY(-4px); }
.rp-mcard.is-selected { box-shadow: inset 0 0 0 2px var(--rp-text); }
.rp-mcard-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1s var(--rp-ease); }
.rp-mcard:hover .rp-mcard-img { transform: scale(1.05); }
.rp-mcard.has-img::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(14, 12, 10, 0) 35%, rgba(14, 12, 10, 0.55) 62%, rgba(14, 12, 10, 0.92) 100%);
}
.rp-mcard-check {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--rp-text);
    color: var(--rp-bg);
}
.rp-mcard-check svg { width: 18px; height: 18px; }
.rp-mcard-body { display: flex; flex-direction: column; gap: 8px; padding: 26px; }
.rp-mcard-meta { font-size: 14px; color: rgba(244, 239, 232, 0.75); }
.rp-mcard-name { font-size: clamp(22px, 2vw, 27px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.12; text-wrap: balance; }
.rp-mcard-courses { display: grid; gap: 6px; margin: 8px 0 4px; padding-top: 14px; border-top: 1px solid var(--rp-faint); font-size: 15px; color: var(--rp-muted); }
.rp-mcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.rp-mcard-price { font-size: 15px; color: rgba(244, 239, 232, 0.75); font-variant-numeric: tabular-nums; }
.rp-mcard-price b { font-size: 19px; font-weight: 600; color: var(--rp-text); margin-right: 2px; }
.rp-mcard-go {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(244, 239, 232, 0.14);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: background-color 0.3s var(--rp-ease);
}
.rp-mcard-go svg { width: 16px; height: 16px; transform: rotate(180deg); }
.rp-mcard:hover .rp-mcard-go { background: var(--rp-text); color: var(--rp-bg); }

/* A la carta: como la carta de un buen restaurante */
.rp-carta { margin: 0; padding: 0; list-style: none; display: grid; column-gap: 56px; }
@media (min-width: 1024px) { .rp-carta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rp-carta-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding-block: 20px;
    border-top: 1px solid var(--rp-faint);
}
.rp-carta-item:not(:has(.rp-carta-img)) { grid-template-columns: minmax(0, 1fr) auto; }
.rp-carta-img { width: 84px; height: 84px; border-radius: 18px; overflow: hidden; background: var(--rp-raise); }
@media (max-width: 599px) { .rp-carta-img { width: 64px; height: 64px; border-radius: 14px; } .rp-carta-item { gap: 14px; } }
.rp-carta-img img { width: 100%; height: 100%; object-fit: cover; }
.rp-carta-text { display: grid; gap: 4px; min-width: 0; }
.rp-carta-name { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.rp-carta-desc { font-size: 15px; line-height: 1.5; color: var(--rp-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rp-carta-end { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.rp-carta-price { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-plus {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    font-size: 22px;
    line-height: 1;
    color: var(--rp-text);
    background: transparent;
    border: 1px solid rgba(244, 239, 232, 0.28);
    cursor: pointer;
    transition: background-color 0.2s var(--rp-ease), color 0.2s var(--rp-ease), border-color 0.2s var(--rp-ease), transform 0.2s var(--rp-ease);
}
.rp-plus:hover { border-color: var(--rp-text); }
.rp-plus:active { transform: scale(0.94); }
.rp-plus.is-on { background: var(--rp-text); color: var(--rp-bg); border-color: var(--rp-text); }
.rp-carta-item.is-picked .rp-carta-name::after { content: " · Agregado"; font-weight: 400; color: var(--rp-muted); font-size: 15px; }
.rp-carta-text .rp-sheet-owner { margin-top: 6px; }

.rp-empty { margin: 0; padding: 32px; border-radius: 24px; background: var(--rp-surface); font-size: 17px; line-height: 1.6; color: var(--rp-muted); max-width: 720px; }
.rp-empty b { display: block; color: var(--rp-text); font-weight: 600; margin-bottom: 4px; }
/* Sin reseñas: una fila entre líneas finas, no una caja a medio ancho */
.rp-cook #resenas .rp-empty { max-width: none; padding: 24px 0; border-radius: 0; background: none; border-top: 1px solid var(--rp-faint); border-bottom: 1px solid var(--rp-faint); }

/* Formulario del editor de platos */
.rp-field { display: grid; gap: 8px; }
.rp-field label { font-size: 15px; font-weight: 600; color: var(--rp-text); }
.rp-field label span { font-weight: 400; color: var(--rp-muted); }
.rp-field small { font-size: 14px; color: var(--rp-muted); }
/* Mismo campo que en el resto de Ravli: sobre una línea, sin caja */
.rp-field input[type="text"], .rp-field input[type="number"], .rp-field textarea {
    width: 100%;
    padding: 6px 0 12px;
    border: 0;
    border-bottom: 1px solid rgba(244, 239, 232, 0.22);
    border-radius: 0;
    background: transparent;
    color: var(--rp-text);
    font: inherit;
    font-size: 20px;
    line-height: 1.35;
    letter-spacing: -0.01em;
    resize: none;
    field-sizing: content;
    transition: border-color 0.3s var(--rp-ease), box-shadow 0.3s var(--rp-ease);
}
.rp-field textarea { font-size: 18px; line-height: 1.5; }
.rp-field input:hover, .rp-field textarea:hover { border-color: rgba(244, 239, 232, 0.44); }
.rp-field input:focus, .rp-field textarea:focus { outline: none; border-color: var(--rp-text); box-shadow: 0 1px 0 0 var(--rp-text); }
.rp-field label { font-size: 14px !important; font-weight: 400 !important; color: var(--rp-muted) !important; }
.rp-field input[type="file"] { font-size: 15px; color: var(--rp-muted); }

/* Hoja del menú: sube desde abajo en móvil, centrada en escritorio. La foto llega a los bordes redondeados. */
.rp-sheet { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: center; }
@media (min-width: 768px) { .rp-sheet { align-items: center; padding: 32px; } }
.rp-sheet-bg { position: absolute; inset: 0; background: rgba(8, 7, 6, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.rp-sheet-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 620px;
    max-height: 92vh;
    max-height: 92dvh;
    overflow: hidden; /* recorta la foto con las esquinas redondeadas */
    background: var(--rp-surface);
    border-radius: 32px 32px 0 0;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
}
@media (min-width: 768px) { .rp-sheet-panel { border-radius: 32px; } }
.rp-sheet-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.rp-form.rp-sheet-panel { overflow-y: auto; }
.rp-sheet-close { position: absolute; top: 16px; right: 16px; z-index: 3; }

.rp-sheet-hero { position: relative; isolation: isolate; padding: 72px 28px 4px; }
.rp-sheet-hero.has-img { display: flex; align-items: flex-end; min-height: 300px; aspect-ratio: 4 / 3; padding: 0 28px 24px; }
@media (min-width: 768px) { .rp-sheet-hero.has-img { aspect-ratio: 16 / 10; } }
.rp-sheet-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.rp-sheet-hero.has-img::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(14, 12, 10, 0.35) 0%, rgba(14, 12, 10, 0) 28%, rgba(34, 31, 28, 0.55) 62%, var(--rp-surface) 100%);
}
.rp-sheet-grab { position: absolute; top: 10px; left: 50%; translate: -50% 0; width: 40px; height: 5px; border-radius: 99px; background: rgba(244, 239, 232, 0.55); }
@media (min-width: 768px) { .rp-sheet-grab { display: none; } }
.rp-sheet-title { display: grid; gap: 6px; }
.rp-sheet-meta { font-size: 14px; color: rgba(244, 239, 232, 0.78); }
.rp-sheet-name { margin: 0; font-size: clamp(28px, 4vw, 34px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; color: var(--rp-text); text-wrap: balance; }
.rp-sheet-body { display: grid; gap: 16px; padding: 12px 28px 28px; }
.rp-sheet-desc { margin: 0; font-size: 17px; line-height: 1.6; color: var(--rp-muted); }
.rp-sheet-h4 { margin: 8px 0 0; font-size: 15px; font-weight: 600; color: var(--rp-text); }
.rp-courses { margin: 0; padding: 0; list-style: none; display: grid; }
.rp-course { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding-block: 14px; border-top: 1px solid var(--rp-faint); }
.rp-course-n { font-size: 14px; color: var(--rp-soft); font-variant-numeric: tabular-nums; }
.rp-course-text { display: grid; gap: 3px; min-width: 0; }
.rp-course-name { font-size: 17px; font-weight: 500; }
.rp-course-desc { font-size: 15px; color: var(--rp-muted); line-height: 1.5; }
.rp-course-img { width: 64px; height: 64px; border-radius: 14px; overflow: hidden; background: var(--rp-raise); }
.rp-course-img img { width: 100%; height: 100%; object-fit: cover; }
.rp-sheet-link { justify-self: start; font-size: 15px; color: var(--rp-muted); border-bottom: 1px solid var(--rp-faint); padding-bottom: 2px; }
.rp-sheet-link:hover { color: var(--rp-text); }
.rp-sheet-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 20px;
    padding: 18px 28px calc(18px + env(safe-area-inset-bottom, 0px));
    background: var(--rp-surface);
    border-top: 1px solid var(--rp-faint);
}
.rp-sheet-price { font-size: 16px; font-variant-numeric: tabular-nums; }
.rp-sheet-price b { font-size: 24px; font-weight: 600; }
.rp-sheet-price span { color: var(--rp-muted); }
.rp-sheet-owner { display: flex; gap: 18px; font-size: 15px; }
.rp-sheet-owner button { background: none; border: 0; padding: 0; font: inherit; color: var(--rp-muted); cursor: pointer; }
.rp-sheet-owner button:hover { color: var(--rp-text); }
.rp-sheet-owner .is-danger:hover { color: #ff8a8c; }

/* Entrada y salida de la hoja */
.rp-sheet-enter, .rp-sheet-leave { transition: opacity 0.35s var(--rp-ease); }
.rp-sheet-enter .rp-sheet-panel, .rp-sheet-leave .rp-sheet-panel { transition: translate 0.45s var(--rp-ease), scale 0.45s var(--rp-ease); }
.rp-sheet-from { opacity: 0; }
.rp-sheet-from .rp-sheet-panel { translate: 0 40px; }
@media (min-width: 768px) { .rp-sheet-from .rp-sheet-panel { translate: 0 16px; scale: 0.98; } }
.rp-sheet-to { opacity: 1; }
.rp-sheet-to .rp-sheet-panel { translate: 0 0; scale: 1; }
@media (prefers-reduced-motion: reduce) { .rp-sheet-enter .rp-sheet-panel, .rp-sheet-leave .rp-sheet-panel { transition: none; } }

/* 6. Reseñas */
.rp-reviews-wrap { display: grid; gap: 40px; }
@media (min-width: 1024px) { .rp-reviews-wrap { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 72px; align-items: start; } }
.rp-score b { display: block; font-size: clamp(64px, 7vw, 96px); font-weight: 600; letter-spacing: -0.05em; line-height: 0.9; font-variant-numeric: tabular-nums; }
.rp-score-stars { display: inline-flex; gap: 4px; margin-top: 18px; color: var(--rp-star); }
.rp-score-stars svg { width: 18px; height: 18px; }
.rp-score p { margin: 12px 0 0; font-size: 16px; line-height: 1.5; color: var(--rp-muted); max-width: 28ch; }
.rp-reviews { display: grid; gap: 16px; }
@media (min-width: 768px) {
    .rp-reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    /* con un número impar, la primera reseña va destacada a todo el ancho */
    .rp-reviews.is-odd .rp-review:first-child { grid-column: 1 / -1; }
    .rp-reviews.is-odd .rp-review:first-child p { font-size: clamp(20px, 2vw, 24px); line-height: 1.45; }
}
.rp-review { display: flex; flex-direction: column; gap: 18px; padding: 28px; border-radius: 24px; background: var(--rp-surface); }
.rp-review p { margin: 0; font-size: 18px; line-height: 1.55; letter-spacing: -0.01em; }
.rp-review-by { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; }
.rp-review-name { display: grid; gap: 2px; font-size: 15px; }
.rp-review-name b { font-weight: 600; }
.rp-review-name span { color: var(--rp-soft); font-size: 14px; }
.rp-stars { display: inline-flex; gap: 2px; color: var(--rp-star); }
.rp-stars svg { width: 14px; height: 14px; }
.rp-stars .is-off { color: var(--rp-faint); }
.rp-more { justify-self: start; margin-top: 8px; background: none; border: 0; padding: 0 0 2px; cursor: pointer; font: inherit; font-weight: 600; color: var(--rp-text); border-bottom: 1px solid var(--rp-faint); }
.rp-more:hover { border-color: var(--rp-text); }

/* 7. Sobre */
.rp-about-wrap { display: grid; gap: 48px; }
@media (min-width: 1024px) { .rp-about-wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 96px; } }
.rp-about { margin: 0; font-size: 19px; line-height: 1.7; color: var(--rp-muted); white-space: pre-line; max-width: 60ch; }
.rp-timeline { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.rp-timeline li { display: grid; gap: 4px; padding-block: 18px; border-top: 1px solid var(--rp-faint); }
.rp-timeline small { font-size: 14px; color: var(--rp-soft); font-variant-numeric: tabular-nums; }
.rp-timeline b { font-size: 17px; font-weight: 600; }
.rp-timeline span { font-size: 15px; color: var(--rp-muted); line-height: 1.5; }

/* 8. Antes de reservar */
.rp-policies { margin: 0; padding: 0; list-style: none; display: grid; gap: 36px 48px; }
@media (min-width: 768px) { .rp-policies { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .rp-policies { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rp-policies li { display: grid; gap: 10px; align-content: start; }
.rp-policies svg { width: 22px; height: 22px; color: var(--rp-text); }
.rp-policies b { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.rp-policies span { font-size: 16px; line-height: 1.6; color: var(--rp-muted); }
.rp-report { display: inline-block; margin-top: 48px; font-size: 14px; color: var(--rp-soft); }
.rp-report:hover { color: var(--rp-text); }

/* 9. Cierre */
.rp-closing { margin-top: 112px; }
.rp-closing-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    justify-items: start;
    gap: 24px;
    padding: 56px 28px;
    border-radius: 32px;
    background: var(--rp-surface);
}
@media (min-width: 768px) { .rp-closing-card { padding: 88px 72px; } }
.rp-closing-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; z-index: -2; opacity: 0.5; }
.rp-closing-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(26, 26, 26, 0.95) 0%, rgba(26, 26, 26, 0.7) 55%, rgba(26, 26, 26, 0.35) 100%); }
.rp-closing-card h2 { margin: 0; font-size: clamp(28px, 3.4vw, 44px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; max-width: 18ch; text-wrap: balance; }

/* ---------- Barra flotante ---------- */
.rp-dock {
    position: fixed;
    left: 50%;
    bottom: 20px;
    z-index: 120;
    width: min(calc(100% - 32px), 980px);
    translate: -50% 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 10px 10px 10px 26px;
    border-radius: 999px;
    background: rgba(34, 31, 28, 0.86);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid var(--rp-faint);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    transition: opacity 0.4s var(--rp-ease), translate 0.5s var(--rp-ease);
}
.rp-dock.is-hidden { opacity: 0; translate: -50% 24px; pointer-events: none; }
.rp-dock-nav { display: flex; gap: 24px; font-size: 15px; }
.rp-dock-nav a { color: var(--rp-muted); transition: color 0.2s var(--rp-ease); }
.rp-dock-nav a:hover, .rp-dock-nav a.is-active { color: var(--rp-text); }
.rp-dock-end { display: flex; align-items: center; gap: 18px; margin-left: auto; min-width: 0; }
.rp-dock-price { display: grid; text-align: right; font-variant-numeric: tabular-nums; min-width: 0; }
.rp-dock-price small { font-size: 13px; color: var(--rp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-dock-price b { font-size: 17px; font-weight: 600; white-space: nowrap; }
.rp-dock-price > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1023px) { .rp-hide-sm { display: none; } }
.rp-dock-price span { font-weight: 400; color: var(--rp-muted); font-size: 14px; }
@media (max-width: 1023px) {
    .rp-dock { bottom: 0; width: 100%; border-radius: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-width: 1px 0 0; box-shadow: none; }
    .rp-dock.is-hidden { opacity: 1; translate: -50% 0; pointer-events: auto; } /* en móvil la barra siempre está */
    .rp-dock-nav { display: none; }
    .rp-dock-end { width: 100%; justify-content: space-between; }
    .rp-dock-price { text-align: left; }
}

/* ---------- Aparición al hacer scroll ---------- */
html.rp-motion [data-rp-reveal] {
    opacity: 0;
    translate: 0 28px;
    transition: opacity 0.9s var(--rp-ease), translate 0.9s var(--rp-ease);
    transition-delay: calc(var(--rp-i, 0) * 80ms);
}
html.rp-motion [data-rp-reveal].is-in { opacity: 1; translate: 0 0; }

/* En el teléfono, el dueño del perfil no ve esta barra: tapaba la barra de abajo de Ravli y lo dejaba
   sin forma de ir a otra pantalla. Para editar tiene el lápiz de la foto. */
@media (max-width: 767px) { .rp-dock.is-owner { display: none; } }