/* =====================================================================
   BRUNCH-TEASER.CSS — el Brunch dentro del home
   ---------------------------------------------------------------------
   1. Enlace "Brunch" del nav: flores que brotan de las letras.
   2. Adelanto: franja floral debajo de la carta.
   3. Sello giratorio en el hero (+ un slide del brunch en el carrusel).
   ---------------------------------------------------------------------
   Franja floral debajo del bento de la carta que lleva a brunch.html.
   Vive DENTRO de .categories-section a propósito: así se oculta y
   aparece junto con la carta cuando showSection() cambia de modo,
   sin tocar las listas MARKETING/PAGE_MODE de script.js.
   La página completa del brunch tiene su propia hoja (css/brunch.css).
   ===================================================================== */


/* =====================================================================
   1. NAV — "Brunch" con flores que brotan de las letras
   ---------------------------------------------------------------------
   Rosas fotográficas de 120 px (images/brunch/flores) nacen en la mitad
   de cada letra, pequeñas y desenfocadas, y suben enfocándose con un
   rebote escalonado; mientras el cursor sigue encima flotan apenas.
   Tamaños y recorridos en em: escalan con el texto del nav. Sin hover
   (táctil) brotan al abrir el drawer.
   ===================================================================== */

/* Compactación extra: con Brunch el nav tiene 8 enlaces + botón y desde
   1121px "Reservar Mesa" se partía en dos líneas o se salía de pantalla.
   Complementa la de css/events.css (993–1320px). Medido de 993 a 1920px. */
@media (min-width: 993px) {
    header #nav .reservation-btn { white-space: nowrap; }
}
@media (min-width: 1121px) and (max-width: 1200px) {
    header #nav { gap: 18px; }
}
@media (min-width: 1321px) {
    header #nav { gap: 34px; }
}
@media (min-width: 1321px) and (max-width: 1440px) {
    header #nav { gap: 26px; }
    header #nav .nav-link { letter-spacing: 1px; }
}

header #nav .nav-brunch-texto {
    position: relative;
    display: inline-block;
}

/* Brote fijo: pista de que el enlace es especial antes del hover */
header #nav .nb-brote {
    position: absolute;
    top: -.6em;
    right: -.95em;
    width: .85em;
    height: .85em;
    object-fit: contain;
    pointer-events: none;
    transition: opacity .3s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1);
}

header #nav .nav-brunch-flores {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

header #nav .nb-flor {
    position: absolute;
    left: var(--l);
    bottom: 35%;
    width: var(--s);
    height: var(--s);
    opacity: 0;
    filter: blur(3px);
    transform: translate(-50%, 20%) scale(.35) rotate(calc(var(--r) * .3));
    transition: transform .7s cubic-bezier(.3, 1.35, .5, 1) var(--d),
                opacity .35s ease var(--d),
                filter .5s ease var(--d);
}
header #nav .nb-flor img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 3px rgba(43, 24, 16, .22));
}

@keyframes nbFlota {
    from { transform: translateY(0) rotate(0deg); }
    to { transform: translateY(-.18em) rotate(8deg); }
}

@media (hover: hover) and (min-width: 961px) {
    header #nav .nav-brunch:hover .nb-flor,
    header #nav .nav-brunch:focus-visible .nb-flor {
        opacity: 1;
        filter: blur(0);
        transform: translate(calc(-50% + var(--x)), var(--y)) scale(1) rotate(var(--r));
    }
    header #nav .nav-brunch:hover .nb-flor img,
    header #nav .nav-brunch:focus-visible .nb-flor img {
        animation: nbFlota 2.4s ease-in-out calc(var(--d) + .6s) infinite alternate;
    }
    header #nav .nav-brunch:hover .nb-brote,
    header #nav .nav-brunch:focus-visible .nb-brote {
        opacity: 0;
        transform: scale(.2);
    }
    header #nav .nav-brunch:hover,
    header #nav .nav-brunch:focus-visible {
        color: #A8461F !important;
    }
}

/* Drawer móvil: el enlace es grande; las flores brotan a la derecha de la
   palabra cuando se abre el menú */
@media (max-width: 960px) {
    header #nav .nb-brote { display: none; }
    header #nav .nav-brunch-flores {
        inset: 0 auto 0 100%;
        width: 3.6em;
        margin-left: 1.6em;
        font-size: .42em;
    }
    header #nav .nav-brunch-flores .nb-flor { bottom: 30%; }
    header #nav.active .nav-brunch .nb-flor {
        opacity: 1;
        filter: blur(0);
        transform: translate(calc(-50% + var(--x) * .35), calc(var(--y) * .6)) scale(1) rotate(var(--r));
        transition-delay: calc(var(--d) + .75s);
    }
}

@media (prefers-reduced-motion: reduce) {
    header #nav .nb-flor,
    header #nav .nb-brote { transition: opacity .2s ease; }
    header #nav .nav-brunch:hover .nb-flor img,
    header #nav .nav-brunch:focus-visible .nb-flor img { animation: none; }
}


/* =====================================================================
   2. ADELANTO — franja floral debajo de la carta
   ===================================================================== */

.categories-section .brunch-teaser {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
    align-items: center;
    gap: 24px;
    max-width: 1200px;
    margin: clamp(56px, 7vw, 96px) auto 0;
    padding: clamp(40px, 5vw, 64px) clamp(28px, 6vw, 88px);
    border-radius: 240px 240px 32px 32px;
    background: linear-gradient(120deg, #FBE3DF 0%, #F3C9C6 48%, #EFDDC2 100%);
    color: #2B1810;
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 44px 70px -50px rgba(43, 24, 16, .6);
    transition: transform .6s cubic-bezier(.22, .8, .24, 1), box-shadow .6s ease;
}

/* Manchas de acuarela */
.categories-section .brunch-teaser::before,
.categories-section .brunch-teaser::after {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(50px);
    pointer-events: none;
}
.categories-section .brunch-teaser::before {
    width: 420px; height: 420px;
    right: -80px; bottom: -200px;
    background: rgba(213, 226, 196, .9);
}
.categories-section .brunch-teaser::after {
    width: 300px; height: 300px;
    left: 30%; top: -170px;
    background: rgba(246, 228, 166, .7);
}

.categories-section .brunch-teaser:hover {
    transform: translateY(-4px);
    box-shadow: 0 54px 80px -50px rgba(43, 24, 16, .65);
}
.categories-section .brunch-teaser:focus-visible {
    outline: 3px solid #B23F62;
    outline-offset: 5px;
}

.brunch-teaser-texto { display: block; position: relative; }

.brunch-teaser-kicker {
    display: block;
    font-family: var(--sans-body, 'Outfit', sans-serif);
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: #A8461F;
}

.brunch-teaser-title {
    display: block;
    margin-top: 8px;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(3.8rem, 8vw, 6.6rem);
    line-height: .9;
    letter-spacing: -.02em;
    color: #2B1810;
}

.brunch-teaser-lema {
    display: block;
    width: max-content;
    max-width: 100%;
    margin: 0 0 0 9%;
    font-family: 'Great Vibes', 'Playfair Display', cursive;
    font-size: clamp(1.7rem, 3.2vw, 2.6rem);
    line-height: 1.25;
    color: #A8461F;
    transform: rotate(-3deg);
    transform-origin: left center;
}

.brunch-teaser-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    margin-top: 28px;
    padding: 0 26px;
    border-radius: 999px;
    background: #2B1810;
    color: #FFF8EE;
    font-family: var(--sans-body, 'Outfit', sans-serif);
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    transition: background-color .3s ease;
}
.brunch-teaser-cta-flecha { display: inline-block; transition: transform .35s cubic-bezier(.22, .8, .24, 1); }
.categories-section .brunch-teaser:hover .brunch-teaser-cta { background: #A8461F; }
.categories-section .brunch-teaser:hover .brunch-teaser-cta-flecha { transform: translateX(5px); }

.brunch-teaser-ramo {
    position: relative;
    display: block;
    justify-self: end;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 1.3;
}
/* Flores fotográficas (images/brunch/flores). Al pasar el cursor el ramo
   "se abre": cada flor se separa apenas del centro. */
.bt-flor {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    height: auto;
    transform: translate(-50%, -50%) rotate(var(--r));
    filter: drop-shadow(0 14px 18px rgba(43, 24, 16, .22));
    transition: transform 1s cubic-bezier(.22, .8, .24, 1);
}
.bt-flor--1 { --x: 50%; --y: 55%; --w: 96%; --r: -8deg; z-index: 1; }
.bt-flor--2 { --x: 44%; --y: 46%; --w: 40%; --r: 0deg; z-index: 4; }
.bt-flor--3 { --x: 74%; --y: 33%; --w: 31%; --r: 10deg; z-index: 3; }
.bt-flor--4 { --x: 21%; --y: 64%; --w: 30%; --r: -10deg; z-index: 3; }
.bt-flor--5 { --x: 76%; --y: 70%; --w: 25%; --r: 6deg; z-index: 2; }
.categories-section .brunch-teaser:hover .bt-flor--1 { transform: translate(-50%, -50%) rotate(-6deg) scale(1.03); }
.categories-section .brunch-teaser:hover .bt-flor--2 { transform: translate(-50%, -54%) rotate(-3deg) scale(1.06); }
.categories-section .brunch-teaser:hover .bt-flor--3 { transform: translate(-40%, -60%) rotate(16deg); }
.categories-section .brunch-teaser:hover .bt-flor--4 { transform: translate(-60%, -44%) rotate(-16deg); }
.categories-section .brunch-teaser:hover .bt-flor--5 { transform: translate(-42%, -42%) rotate(12deg); }

@media (max-width: 720px) {
    .categories-section .brunch-teaser {
        grid-template-columns: 1fr;
        gap: 0;
        margin-left: 16px;
        margin-right: 16px;
        padding: 28px 24px 40px;
        border-radius: 150px 150px 24px 24px;
        text-align: center;
    }
    .brunch-teaser-ramo { order: -1; justify-self: center; max-width: 270px; margin-bottom: 4px; }
    .brunch-teaser-lema { margin: 2px auto 0; }
}

@media (prefers-reduced-motion: reduce) {
    .categories-section .brunch-teaser,
    .bt-flor,
    .brunch-teaser-cta,
    .brunch-teaser-cta-flecha { transition: none; }
    .categories-section .brunch-teaser:hover,
    .categories-section .brunch-teaser:hover .bt-flor { transform: translate(-50%, -50%) rotate(var(--r)); }
}


/* =====================================================================
   3. SELLO DEL BRUNCH EN EL HERO
   ---------------------------------------------------------------------
   Abajo a la derecha, en espejo con el rail de créditos (abajo a la
   izquierda) y por encima del botón flotante de reseñas. Un anillo de
   texto gira despacio alrededor de la foto de un plato; rosas reales
   asoman por los bordes. Entra enfocándose cuando termina el preloader
   (~2,9 s). Al pasar el cursor se despliega la etiqueta "Descubrir".
   Mientras el slide del brunch está activo, hero-cinema.js pone
   .is-brunch en el hero y el sello brilla.
   ===================================================================== */

.hero .brunch-sello {
    --bs-d: clamp(128px, 11vw, 168px);
    position: absolute;
    right: clamp(24px, 5vw, 76px);
    bottom: clamp(118px, 15vh, 170px);
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 14px;
    color: #FFF8EE;
    text-decoration: none;
    animation: bsEntrada 1.4s cubic-bezier(.22, .8, .24, 1) 3.1s both;
}

.bs-disco {
    position: relative;
    display: block;
    width: var(--bs-d);
    height: var(--bs-d);
    flex: none;
    transition: transform .7s cubic-bezier(.22, .8, .24, 1);
}

.bs-anillo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: #FFF8EE;
    font-family: 'Outfit', var(--sans-body, system-ui), sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .55));
    animation: bsGiro 38s linear infinite;
}

.bs-foto {
    position: absolute;
    inset: 19%;
    border-radius: 50%;
    overflow: hidden;
    box-shadow:
        0 0 0 2px rgba(255, 248, 238, .75),
        0 18px 34px -12px rgba(0, 0, 0, .7);
    transition: box-shadow .6s ease;
}
.bs-foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 58%;
    transition: transform 1.2s cubic-bezier(.22, .8, .24, 1);
}

.bs-flor {
    position: absolute;
    height: auto;
    pointer-events: none;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .45));
    animation: bsVaiven 7s ease-in-out infinite alternate;
}
.bs-flor--ramo {
    width: 76%;
    left: -46%;
    top: 36%;
    transform-origin: 90% 50%;
    --bs-r: -8deg;
    animation-duration: 9s;
}
.bs-flor--rosa {
    width: 30%;
    right: -11%;
    top: -9%;
    transform-origin: 30% 90%;
    --bs-r: 8deg;
}
.bs-flor--lila {
    width: 22%;
    right: -3%;
    bottom: -5%;
    transform-origin: 0 0;
    --bs-r: -10deg;
    animation-duration: 8s;
    animation-delay: -3s;
}

/* Etiqueta que se despliega hacia la izquierda */
.bs-etiqueta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    padding: 12px 18px;
    border-radius: 18px;
    background: rgba(24, 12, 7, .55);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 248, 238, .18);
    text-align: right;
    opacity: 0;
    transform: translateX(14px);
    pointer-events: none;
    transition: opacity .45s ease, transform .6s cubic-bezier(.22, .8, .24, 1);
}
.bs-kicker {
    font-family: 'Outfit', var(--sans-body, system-ui), sans-serif;
    font-size: .6rem;
    font-weight: 500;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: #F3C9C6;
}
.bs-titulo {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 1.7rem;
    line-height: 1;
    color: #FFF8EE;
}
.bs-cta {
    margin-top: 4px;
    font-family: 'Outfit', var(--sans-body, system-ui), sans-serif;
    font-size: .64rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255, 248, 238, .9);
}
.bs-flecha { display: inline-block; transition: transform .4s ease; }

@media (hover: hover) {
    .hero .brunch-sello:hover .bs-disco { transform: scale(1.06) rotate(-4deg); }
    .hero .brunch-sello:hover .bs-foto img { transform: scale(1.12); }
    .hero .brunch-sello:hover .bs-anillo { animation-duration: 14s; }
    .hero .brunch-sello:hover .bs-etiqueta { opacity: 1; transform: none; }
    .hero .brunch-sello:hover .bs-flecha { transform: translateX(4px); }
}
.hero .brunch-sello:focus-visible { outline: none; }
.hero .brunch-sello:focus-visible .bs-foto { box-shadow: 0 0 0 3px #F3C9C6, 0 0 0 7px rgba(24, 12, 7, .6); }
.hero .brunch-sello:focus-visible .bs-etiqueta { opacity: 1; transform: none; }

/* Con el slide del brunch en pantalla: un halo cálido */
.hero.is-brunch .bs-foto {
    box-shadow:
        0 0 0 2px rgba(255, 248, 238, .95),
        0 0 0 10px rgba(243, 201, 198, .22),
        0 18px 44px -8px rgba(238, 138, 98, .75);
}
.hero.is-brunch .bs-disco { transform: scale(1.05); }

@keyframes bsGiro { to { transform: rotate(360deg); } }
@keyframes bsVaiven {
    from { transform: rotate(var(--bs-r, 0deg)); }
    to { transform: rotate(calc(var(--bs-r, 0deg) + 5deg)); }
}
@keyframes bsEntrada {
    from { opacity: 0; transform: scale(.82) translateY(16px); filter: blur(10px); }
    to { opacity: 1; transform: none; filter: blur(0); }
}

/* Laptops angostas: la descripción del hero llega casi al borde; el sello
   se achica y baja a la esquina (medido de 993 a 1180 px) */
@media (min-width: 901px) and (max-width: 1180px) {
    .hero .brunch-sello {
        --bs-d: 108px;
        right: 20px;
        bottom: 104px;
    }
}

/* Pantallas bajas (laptops de 720–800 px de alto): el sello sube hasta el
   subtítulo; lo achicamos y lo pegamos más a la esquina */
@media (min-width: 1181px) and (max-height: 800px) {
    .hero .brunch-sello {
        --bs-d: 116px;
        bottom: 110px;
    }
}
/* Donde la descripción casi toca el borde, el ramo sobra */
@media (min-width: 901px) and (max-width: 1040px) {
    .bs-flor--ramo { display: none; }
}

/* Tablet y móvil: el rail de créditos va centrado abajo, así que el sello
   sube a la esquina superior derecha, bajo el header, y se achica */
@media (max-width: 900px) {
    .hero .brunch-sello {
        --bs-d: 104px;
        /* header móvil: 65 px; la rosa de arriba asoma justo debajo */
        top: 80px;
        bottom: auto;
        right: 14px;
    }
    .bs-anillo { font-size: 14px; letter-spacing: .5px; }
    .bs-etiqueta { display: none; }
}

/* Teléfono acostado: el hero es bajito, el sello estorba */
@media (max-width: 900px) and (orientation: landscape) {
    .hero .brunch-sello { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hero .brunch-sello { animation: none; }
    .bs-anillo, .bs-flor { animation: none; }
    .bs-disco, .bs-foto img, .bs-etiqueta { transition: none; }
}