/* HOME — CSS con nesting, anidado según la estructura del DOM (regla del proyecto en AGENTS.md)
   Dirección: «café porteño antañón» — confitería años 30–50.
   Contrastes calculados (ver base.css): crema s/ hero 9.4–14.1:1, latón-claro s/ espresso 5.7–7.2:1,
   bronce s/ claro 4.1–4.5:1 (filetes), oliva s/ card 5.95:1 (ícono no-textual). */

/* HERO */
header {
    position: relative;
    height: 100vh;
    height: 100svh; /* en móvil, evita que el chrome del browser corte el hero */
    min-height: 640px;
    /* espresso de vidriera antañona: los 3 extremos de contraste ya verificados */
    background: linear-gradient(160deg, #241a11 0%, #3a2b1d 55%, #4a3623 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    /* viñeta de cámara antigua: oscurece bordes como la vidriera de noche */
    &::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: radial-gradient(
            ellipse at center,
            transparent 52%,
            rgba(15, 9, 4, 0.55) 100%
        );
    }

    #hero-canvas {
        position: absolute;
        inset: 0;
        z-index: 0;
    }

    .hero-content {
        position: relative;
        z-index: 2;
        text-align: center;
        padding: 0 24px;
        pointer-events: none;

        * {
            pointer-events: auto;
        }

        h1 {
            color: var(--crema); /* 9.4–14.1:1 sobre todo el gradiente */
            font-family: "Yeseva One", serif;
            font-weight: 400;
            font-size: clamp(2.8rem, 8vw, 5.6rem);
            line-height: 1.08;
            /* levemente apretado: el display vintage ya es ancho */
            letter-spacing: -0.01em;
            text-shadow: 0 2px 24px rgba(15, 9, 4, 0.35); /* profundidad de vidriera */
            opacity: 0;
            animation: fadeUp 1s 0.3s forwards;

            em {
                /* acento de cartel: itálica de imprenta, latón claro 5.7:1 (texto grande) */
                font-family: "Playfair Display", serif;
                font-style: italic;
                font-weight: 500;
                color: var(--laton-claro);
                padding: 0 0.06em;
            }
        }

        p {
            color: rgba(
                242,
                233,
                213,
                0.8
            ); /* 6.7:1 s/ el punto más claro del gradiente */
            max-width: 520px;
            margin: 26px auto 40px;
            font-size: 1.05rem;
            font-weight: 300;
            letter-spacing: 0.01em;
            opacity: 0;
            animation: fadeUp 1s 0.55s forwards;
        }
    }

    .hero-btns {
        display: flex;
        gap: 16px;
        justify-content: center;
        flex-wrap: wrap;
        opacity: 0;
        animation: fadeUp 1s 0.75s forwards;
    }

    .scroll-hint {
        position: absolute;
        bottom: 34px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
        color: var(--crema); /* 9.4+:1 sobre cualquier punto del gradiente */
        font-size: 0.7rem;
        letter-spacing: 0.3em;
        text-transform: uppercase;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        /* vaivén contenida con desaceleración (sin rebotes elásticos) */
        animation: hint 2.2s ease-in-out infinite;

        &::after {
            content: "";
            width: 1px;
            height: 34px;
            background: linear-gradient(var(--laton), transparent);
        }
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes hint {
    0%,
    100% {
        transform: translate(-50%, 0);
    }

    50% {
        transform: translate(-50%, 7px);
    }
}

/* SECCIONES — cada bloque vivo dentro de su <section> del DOM */
section {
    padding: 110px 6%;
    scroll-margin-top: 90px; /* las anclas no quedan tapadas por el nav fijo */

    /* Alfajores — la vitrina dulce sobre madero espresso */
    &.menu-bg {
        background: var(--espresso);

        .section-head {
            h2 {
                color: var(--crema); /* 11.2:1 */
            }
        }

        /* la ficha manda a la izquierda y la placa espeja al café: la foto
           queda segunda en el recorrido (y primera en el DOM invertido) */
        .showcase {
            grid-template-columns: minmax(0, 4fr) minmax(0, 3fr);
        }

        @media (max-width: 720px) {
            .showcase {
                grid-template-columns: 1fr;
            }
        }

        /* la misma placa, invertida: superficie crema sobre el espresso.
           El filete exterior enfrenta al fondo oscuro (latón 4.8:1) y el
           interior mira la placa clara (bronce), como manda el metal asignado */
        .showcase .showcase-plate {
            background: radial-gradient(
                circle at 30% 30%,
                var(--card),
                var(--papel)
            );
            border-color: rgba(201, 162, 95, 0.6);
            box-shadow: 0 30px 60px rgba(15, 9, 4, 0.5);

            &::after {
                border-color: rgba(138, 106, 62, 0.3);
            }

            svg {
                .ink {
                    stroke: var(--bronce); /* trazo sobre crema: 4.1–4.5:1 */
                }

                .dot {
                    fill: var(--bronce);
                }

                .tint {
                    fill: rgba(
                        138,
                        106,
                        62,
                        0.16
                    ); /* el dulce, velado sobre crema */
                }
            }
        }

        .showcase .showcase-copy p {
            color: rgba(242, 233, 213, 0.9); /* ~8:1 s/ el espresso */
        }
    }

    /* Nosotros — la marca como placa enmarcada en la pared */
    &#nosotros {
        .about {
            display: grid;
            grid-template-columns: minmax(0, 3fr) minmax(0, 4fr);
            gap: clamp(44px, 6vw, 92px);
            align-items: center;
            max-width: 1060px;
            margin: 0 auto;

            @media (max-width: 720px) {
                grid-template-columns: 1fr;
                gap: 42px;

                /* el texto explica la marca antes de mostrar el medallón */
                .about-copy {
                    order: -1;
                }

                .logo-card {
                    margin-inline: auto;
                }
            }

            .logo-card {
                /* el mismo tamaño de placa que las vitrinas: una pieza por sección */
                position: relative;
                width: 100%;
                max-width: 420px;
                aspect-ratio: 1 / 1;
                /* el filete exterior es ornamento (sin texto ni control apoyado ahí) */
                background: radial-gradient(
                    circle at 30% 30%,
                    #4a3623,
                    var(--espresso-oscuro)
                );
                border: 1px solid rgba(201, 162, 95, 0.5);
                border-radius: 6px;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 48px;
                box-shadow: 0 30px 60px rgba(36, 26, 17, 0.35);
                /* segundo filete del marco, 7px adentro: mood de placa de confitería */
                &::after {
                    content: "";
                    position: absolute;
                    inset: 7px;
                    border: 1px solid rgba(201, 162, 95, 0.3);
                    border-radius: 3px;
                    pointer-events: none;
                }

                img {
                    /* placa de porcelana: el logo verde apoya sobre crema y no se
                       pierde contra el marrón del panel (medallón de confitería) */
                    background: var(--papel);
                    border: 1px solid rgba(201, 162, 95, 0.6);
                    width: min(320px, 100%);
                    height: auto; /* el atributo height del HTML no manda: para que no se estire */
                    aspect-ratio: 1 / 1; /* el logo-card es circular: el cuadrado es el formato real */
                    border-radius: 50%;
                    box-shadow: 0 18px 40px rgba(15, 9, 4, 0.4);
                    animation: floaty 5s ease-in-out infinite;
                }
            }

            h2 {
                font-size: clamp(1.9rem, 4vw, 2.7rem);
                color: var(--cacao);
                font-weight: 400;
                margin-bottom: 22px;
            }

            p {
                line-height: 1.85;
                color: var(--suave); /* 5.69:1 sobre papel */
                font-weight: 300;
                margin-bottom: 16px;
            }

            /* cierre de la sección: el segundo aliento del "dónde y cuándo" (el hero ya nombra San Telmo).
               cacao sobre papel: 11.0:1, texto de .95rem */
            .visit {
                margin-top: 30px;
                padding-top: 22px;
                border-top: 1px solid rgba(138, 106, 62, 0.35); /* filete bronce estilo carta */
                color: var(--cacao);
                font-weight: 400;
                font-size: 0.95rem;
                letter-spacing: 0.05em;
            }
        }
    }

    .section-head {
        text-align: center;
        margin-bottom: 64px;

        h2 {
            font-size: clamp(1.9rem, 4.5vw, 3rem);
            /* más aire sobre el título que debajo (ritmo tipográfico) */
            margin-top: 4px;
            color: var(--cacao);
            font-weight: 400;
        }

        /* ornamento deco de confitería: filete — losange — filete.
           En el fondo oscuro se recolorea a latón (ver override en .menu-bg) */
        .divider {
            position: relative;
            width: 150px;
            height: 12px;
            margin: 18px auto 0;
            background:
                linear-gradient(var(--bronce), var(--bronce)) no-repeat 0 50% /
                    calc(50% - 13px) 1px,
                linear-gradient(var(--bronce), var(--bronce)) no-repeat 100%
                    50% / calc(50% - 13px) 1px;

            &::before {
                content: "";
                position: absolute;
                left: 50%;
                top: 50%;
                width: 7px;
                height: 7px;
                transform: translate(-50%, -50%) rotate(45deg);
                background: var(--bronce);
            }
        }
    }

    /* en el fondo oscuro el ornamento pasa a latón */
    &.menu-bg .divider {
        background:
            linear-gradient(var(--laton), var(--laton)) no-repeat 0 50% /
                calc(50% - 13px) 1px,
            linear-gradient(var(--laton), var(--laton)) no-repeat 100% 50% /
                calc(50% - 13px) 1px;

        &::before {
            background: var(--laton);
        }
    }

    /* cierre de las vitrinas: el próximo paso queda a la vista
       (compartido por la taza y el alfajor) */
    .menu-cta {
        text-align: center;
        margin-top: 48px;
    }

    /* Vitrina de protagonista — la placa enmarcada y su ficha: un ídolo por
       sección. La placa es un objeto de vitrina, no la página: ocupa 3 de 7
       columnas y la ficha (con su cabecera) lleva el peso del texto. */
    .showcase {
        display: grid;
        grid-template-columns: minmax(0, 3fr) minmax(0, 4fr);
        gap: clamp(44px, 6vw, 92px);
        align-items: center;
        max-width: 1060px;
        margin: 0 auto;

        @media (max-width: 720px) {
            grid-template-columns: 1fr;
            gap: 42px;

            /* en una columna, el título y el texto se leen antes de la foto */
            .showcase-copy {
                order: -1;
            }
        }

        .showcase-plate {
            position: relative;
            margin: 0;
            width: 100%;
            max-width: 420px;
            /* cuando la columna supera el tope de la placa (mobile ancho,
               tablet), la placa se centra en vez de quedar pegada al costado */
            justify-self: center;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 9%;
            aspect-ratio: 1 / 1;
            /* placa de porcelana oscura: el mismo gradiente del logo-card,
               con la pieza protagonista adentro en vez del medallón */
            background: radial-gradient(
                circle at 30% 30%,
                #4a3623,
                var(--espresso-oscuro)
            );
            border: 1px solid rgba(201, 162, 95, 0.5);
            border-radius: 6px;
            box-shadow: 0 30px 60px rgba(36, 26, 17, 0.35); /* sombra de pared */
            /* entra/reveal de vidriera y hover de placa conviven: la lista suma
               los props del reveal (.7s) a los del gesto propio (.35s) */
            transition:
                transform 0.35s,
                box-shadow 0.35s,
                opacity 0.7s ease-out,
                translate 0.7s ease-out,
                scale 0.7s ease-out;

            &::after {
                content: "";
                position: absolute;
                inset: 7px;
                border: 1px solid rgba(201, 162, 95, 0.3);
                border-radius: 3px;
                pointer-events: none;
            }

            &:hover {
                transform: translateY(-6px);
                box-shadow: 0 36px 64px rgba(36, 26, 17, 0.4);
            }

            /* ilustración de trazo: el mismo idioma de línea del resto del home,
               coloreada por clase para poder recolorear la placa por fondo */
            svg {
                display: block;
                width: 100%;
                height: auto; /* la placa (aspect-ratio) manda; el viewBox cuadra el dibujo */

                .ink {
                    stroke: var(
                        --laton
                    ); /* trazo principal s/ placa espresso: 4.8–7.2:1 */
                }

                .ink-2 {
                    stroke: var(--laton-claro); /* vapor y superficie: 5.7:1+ */
                }

                .tint {
                    fill: rgba(
                        242,
                        233,
                        213,
                        0.08
                    ); /* veladura crema (taza / dulce) */
                }

                .dot {
                    fill: var(--laton);
                }
            }

            /* foto cargada desde el panel (x-home.showcase-plate): mismo
               encuadre, recortada cuadrada dentro de la placa */
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 3px;
            }
        }

        .showcase-copy {
            max-width: 560px;
            /* la ficha se lee como cartel de vitrina: todo su contenido
               se centra dentro de la columna */
            text-align: center;

            .section-head {
                margin-bottom: 30px;

                h2 {
                    font-size: clamp(1.9rem, 3.2vw, 2.6rem);
                }

                .divider {
                    margin: 16px auto 0;
                }
            }

            p {
                color: var(--suave); /* 5.69:1 sobre papel */
                font-size: clamp(1.05rem, 0.9rem + 0.3vw, 1.15rem);
                font-weight: 300;
                line-height: 1.85;
                max-width: 52ch;
                margin: 0 auto 16px;
            }
        }
    }

    @media (max-width: 720px) {
        padding: 80px 6%;
    }
}

@keyframes floaty {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-14px);
    }
}

/* REVEAL — la clase la agrega home.js (progresivo: sin JS, todo visible).
   Usa `translate` (propiedad propia) para no chocar con las transform de hover.
   El fade-up es el movimiento base, pero NO una entrada clonada: cada grupo
   tiene su propio gesto (ver variantes debajo). */
.reveal {
    opacity: 0;
    translate: 0 26px;
    transition:
        opacity 0.7s ease-out,
        translate 0.7s ease-out,
        scale 0.7s ease-out;

    &.in {
        opacity: 1;
        translate: none;
        scale: none;
    }

    /* entrada escalonada: la 2da pieza del grupo sigue, la 3ra después */
    &:nth-child(2) {
        transition-delay: 0.08s;
    }

    &:nth-child(3) {
        transition-delay: 0.16s;
    }
}

/* gestos diferenciados por grupo (el hero es el único momento grande):
   la placa del CTA entra deslizándose desde la izquierda, igual idioma
   que su hover +6px; el medallón de Nosotros asoma con un zoom sutil */
/* gestos diferenciados por grupo (el hero es el único momento grande):
   la placa de café entra desde la izquierda, la del alfajor desde la derecha
   (espejo del orden de lectura); el CTA se desliza desde la izquierda, igual
   idioma que su hover +6px; el medallón de Nosotros asoma con zoom sutil */
#menu .showcase .showcase-plate.reveal {
    translate: -34px 0;

    &.in {
        translate: none;
    }
}

.menu-bg .showcase .showcase-plate.reveal {
    translate: 34px 0;

    &.in {
        translate: none;
    }
}

.menu-bg .menu-cta.reveal {
    translate: -30px 0;

    &.in {
        translate: none;
    }
}

#nosotros .logo-card.reveal {
    translate: none;
    scale: 0.94;

    &.in {
        scale: 1;
    }
}

/* prefers-reduced-motion: respetar la preferencia de menos movimiento (bounce, floats, reveal) */
@media (prefers-reduced-motion: reduce) {
    header {
        .hero-content > * {
            animation: none;
            opacity: 1; /* sin la animación, el estado base opacity:0 los haría invisibles */
        }

        .scroll-hint {
            animation: none;
        }
    }

    .about .logo-card img {
        animation: none;
    }

    .reveal {
        opacity: 1;
        translate: none;
        scale: none;
        transition: none;
    }
}