/* =========================================================
   MUSÉ TENTACIÓN · ESTILOS GENERALES
   Paleta tomada del logo. Celular primero: los estilos base
   son para pantallas chicas y se amplían con min-width.
   Fuentes (cargadas en el <head> de cada HTML):
   - Leckerli One: script redondeada, solo títulos grandes y marca.
   - Nunito: cuerpo de texto, botones y etiquetas.
========================================================= */

:root {
    /* Colores de marca */
    --chocolate: #55241a;          /* texto principal, títulos, botones secundarios */
    --chocolate-hondo: #3d1811;    /* hovers sobre chocolate */
    --chocolate-suave: #7a4a3e;    /* texto secundario (7:1 sobre blanco) */
    --frutilla: #ef8199;           /* acento, botones principales (texto chocolate) */
    --frutilla-hover: #e96d89;
    --frutilla-titulo: #de5a78;    /* rosa para títulos grandes sobre crema */
    --frutilla-intensa: #b83a60;   /* rosa para textos chicos: precios, etiquetas (5:1) */
    --rosa-claro: #fbb3c1;         /* fondos suaves, hovers, bordes */
    --rosa-niebla: #fde6eb;        /* fondos rosados muy suaves */
    --crema: #fdf3ea;              /* fondo general */
    --crema-tostada: #f6e4d4;      /* fondos crema un poco más intensos */
    --blanco: #ffffff;             /* tarjetas */

    /* Estados */
    --exito: #3f7a52;
    --error: #a3324f;

    /* Bordes y sombras */
    --borde: rgba(85, 36, 26, 0.12);
    --borde-fuerte: rgba(85, 36, 26, 0.24);
    --sombra-suave: 0 8px 24px rgba(85, 36, 26, 0.08);
    --sombra-media: 0 16px 40px rgba(85, 36, 26, 0.14);
    --sombra-rosa: 0 10px 24px rgba(239, 129, 153, 0.35);

    /* Radios */
    --radio-chico: 12px;
    --radio: 20px;
    --radio-grande: 32px;
    --pildora: 999px;

    /* Alturas del navbar fijo */
    --alto-navbar: 64px;
    --alto-navbar-hero: 74px;
    --alto-navbar-compacto: 56px;
    --logo-normal: 50px;
    --logo-hero: 60px;
    --logo-compacto: 42px;

    /* Tipografía */
    --fuente-titulos: 'Leckerli One', 'Segoe Script', cursive;
    --fuente-texto: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* Ondas de chocolate derretido (SVG reutilizable) */
    --onda-chocolate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%237a3a24'/%3E%3Cstop offset='.5' stop-color='%235e2819'/%3E%3Cstop offset='1' stop-color='%2355241a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M0 60V28c40 0 60 18 100 18s70-30 120-30 60 26 110 26 60-20 105-20 65 30 115 30 55-24 100-24 70 22 120 22 60-28 110-28 70 24 115 24 65-18 105-18 60 14 100 14V60Z'/%3E%3Cpath fill='none' stroke='%23fff' stroke-opacity='.28' stroke-width='3' stroke-linecap='round' stroke-dasharray='140 90' d='M0 35c40 0 60 18 100 18s70-30 120-30 60 26 110 26 60-20 105-20 65 30 115 30 55-24 100-24 70 22 120 22 60-28 110-28 70 24 115 24 65-18 105-18 60 14 100 14'/%3E%3C/svg%3E");
    --onda-crema: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath fill='%23fdf3ea' d='M0 60V28c40 0 60 18 100 18s70-30 120-30 60 26 110 26 60-20 105-20 65 30 115 30 55-24 100-24 70 22 120 22 60-28 110-28 70 24 115 24 65-18 105-18 60 14 100 14V60Z'/%3E%3C/svg%3E");
    --onda-niebla: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath fill='%23fde6eb' d='M0 60V28c40 0 60 18 100 18s70-30 120-30 60 26 110 26 60-20 105-20 65 30 115 30 55-24 100-24 70 22 120 22 60-28 110-28 70 24 115 24 65-18 105-18 60 14 100 14V60Z'/%3E%3C/svg%3E");
}

/* ===========================
   CONFIGURACIÓN GENERAL
=========================== */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    min-height: 100vh;

    background: var(--crema);
    color: var(--chocolate);

    font-family: var(--fuente-texto);
    font-size: 16px;
    line-height: 1.5;

    /* Sin scroll horizontal (hidden de respaldo, clip donde se soporte) */
    overflow-x: hidden;
    overflow-x: clip;

    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
}

a {
    color: inherit;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

::selection {
    background: var(--rosa-claro);
    color: var(--chocolate);
}

:focus-visible {
    outline: 3px solid var(--frutilla);
    outline-offset: 3px;
}

/* ===========================
   PRESENTACIÓN (HERO)
=========================== */

.hero {
    position: relative;

    min-height: 88vh;
    min-height: 88svh;

    padding: calc(var(--alto-navbar-hero) + 90px) 20px 100px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;

    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(circle at 12% 78%, rgba(251, 179, 193, 0.55) 0, rgba(251, 179, 193, 0) 38%),
        radial-gradient(circle at 88% 30%, rgba(251, 179, 193, 0.45) 0, rgba(251, 179, 193, 0) 34%),
        var(--crema);
}

/* Onda rosa al pie del hero */
.hero::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;

    height: 46px;

    background: var(--onda-niebla) center bottom / 100% 100% no-repeat;

    z-index: -1;
}

.hero h1 {
    color: var(--chocolate);

    font-family: var(--fuente-titulos);
    font-size: clamp(76px, 22vw, 190px);
    font-weight: 400;
    line-height: 0.95;

    /* "MUSÉ" se muestra como "Musé", igual que el logo */
    text-transform: lowercase;

    text-shadow: 0 6px 0 rgba(85, 36, 26, 0.08);

    animation: entrada-titulo 1.1s cubic-bezier(.2, .9, .3, 1.25) both;
}

.hero h1::first-letter {
    text-transform: uppercase;
}

/* "Tentación" */
.hero p:first-of-type {
    margin-top: 2px;

    color: var(--frutilla-titulo);

    font-family: var(--fuente-titulos);
    font-size: clamp(44px, 12vw, 104px);
    line-height: 1.05;

    text-transform: lowercase;

    animation: entrada-titulo 1.1s 0.25s cubic-bezier(.2, .9, .3, 1.25) both;
}

.hero p:first-of-type::first-letter {
    text-transform: uppercase;
}

/* Corazón entre el nombre y el lema */
.hero p:first-of-type::after {
    content: "";

    display: block;

    width: 150px;
    height: 18px;

    margin: 14px auto 0;

    background:
        linear-gradient(var(--chocolate), var(--chocolate)) left center / 52px 2px no-repeat,
        linear-gradient(var(--chocolate), var(--chocolate)) right center / 52px 2px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1.1 -0.8 2.2 1.9'%3E%3Cpath fill='%23ef8199' d='M0 -0.3C-0.18 -0.72 -1 -0.72 -1 -0.12C-1 0.32 -0.45 0.6 0 1C0.45 0.6 1 0.32 1 -0.12C1 -0.72 0.18 -0.72 0 -0.3Z'/%3E%3C/svg%3E") center / 20px 18px no-repeat;
}

/* Lema: "Postres • Chocolates • Antojos" */
.hero p:nth-of-type(2) {
    margin-top: 18px;

    color: var(--chocolate);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 3px;
    text-transform: uppercase;

    animation: aparecer 1s 0.6s ease both;
}

@keyframes entrada-titulo {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.92);
    }

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

@keyframes aparecer {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

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

/* ---------- Elementos que inyecta animaciones.js ---------- */

/* Contenido del hero que se mueve con parallax */
.hero-capa {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;

    will-change: transform, opacity;
}

/* Chocolate derretido (SVG "gooey" armado por animaciones.js).
   Sale de debajo del navbar, como si chorreara de él. */
.hero-goteo {
    position: absolute;
    top: 0;           /* empieza detrás del navbar: la capa nunca deja hueco */
    left: 0;
    right: 0;

    pointer-events: none;

    z-index: 1;
}

.hero-goteo svg {
    display: block;

    width: 100%;
    height: auto;

    overflow: visible;
}

/* Indicador para bajar */
.hero-bajar {
    position: absolute;
    left: 50%;
    bottom: 56px;

    width: 46px;
    height: 46px;

    display: flex;
    justify-content: center;
    align-items: center;

    margin-left: -23px;

    color: var(--chocolate);
    background: var(--blanco);

    border: none;
    border-radius: 50%;
    box-shadow: var(--sombra-suave);

    cursor: pointer;

    z-index: 3;

    animation: rebote 2.2s 1.6s ease-in-out infinite both;
}

.hero-bajar svg {
    width: 20px;
    height: 20px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hero-bajar:hover {
    background: var(--rosa-claro);
}

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

    50% {
        transform: translateY(8px);
    }
}

/* Capa de dulces que caen al scrollear (queda debajo del navbar) */
.capa-dulces {
    position: fixed;
    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 900;
}

.dulce {
    position: absolute;
    top: 0;
    left: 0;

    display: block;

    will-change: transform;
}

.dulce svg {
    display: block;

    width: 100%;
    height: 100%;

    overflow: visible;
}

@media (min-width: 900px) {
    .dulce {
        filter: drop-shadow(0 6px 6px rgba(61, 24, 17, 0.22));
    }
}

/* Aparición de secciones al entrar en pantalla */
.revelar {
    opacity: 0;
    transform: translateY(36px);

    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(.2, .8, .2, 1);

    transition-delay: var(--retraso, 0s);
}

.revelar.visible {
    opacity: 1;
    transform: none;
}

/* Versión tranquila (movimiento reducido): solo fundido */
html.movimiento-tranquilo .revelar {
    transform: none;
    transition: opacity 0.6s ease;
}

/* ===========================
   BARRA SUPERIOR (fija, se compacta al bajar)
=========================== */

/* El contenedor compartido queda fijo arriba en todas las páginas */
#navbarCompartido {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    z-index: 1500;
}

/* Compensa la altura del navbar fijo para que no tape contenido.
   (Dos reglas: :has() y la clase que agrega navbar-scroll.js) */
body:has(> #navbarCompartido):not(:has(> .hero)) {
    padding-top: var(--alto-navbar);
}

html.con-navbar:not(.con-hero) body {
    padding-top: var(--alto-navbar);
}

/* En el inicio no hace falta: el hero arranca debajo del navbar
   y ya tiene su propio espacio arriba. */

html {
    scroll-padding-top: calc(var(--alto-navbar-compacto) + 12px);
}

.navbar {
    position: relative;

    width: 100%;
    height: var(--alto-navbar);

    padding: 0 12px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    background: rgba(253, 243, 234, 0.96);

    border-bottom: 1px solid var(--borde);

    overflow: visible;

    transition:
        height 0.35s ease,
        background-color 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

/* Arriba de todo en el inicio: más alto y fundido con el hero */
html.con-hero:not(.navbar-compacto) .navbar {
    height: var(--alto-navbar-hero);

    background: var(--crema);
    border-bottom-color: transparent;
}

html.con-hero:not(.navbar-compacto) .logo {
    height: var(--logo-hero);
}

/* Al bajar: compacto, crema semitransparente con blur y sombra suave */
html.navbar-compacto .navbar {
    height: var(--alto-navbar-compacto);

    background: rgba(253, 243, 234, 0.82);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    backdrop-filter: blur(12px) saturate(1.2);

    border-bottom-color: rgba(85, 36, 26, 0.08);
    box-shadow: 0 8px 26px rgba(85, 36, 26, 0.12);
}

html.navbar-compacto .logo {
    height: var(--logo-compacto);
}

/* ===========================
   MENÚ IZQUIERDO (escritorio)
=========================== */

.menu-izquierda {
    display: none;

    height: 100%;

    align-items: center;
    gap: 30px;
}

.menu-izquierda > a,
.menu-item > a {
    position: relative;

    height: 100%;

    display: flex;
    align-items: center;

    color: var(--chocolate);
    text-decoration: none;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: 0.3px;

    transition: color 0.25s ease;
}

.menu-izquierda a:visited {
    color: var(--chocolate);
}

/* Subrayado rosa redondeado al pasar el cursor */
.menu-izquierda > a::after,
.menu-item > a::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 20px;

    width: 0;
    height: 3px;

    background: var(--frutilla);
    border-radius: 3px;

    transition: width 0.3s ease;
}

.menu-izquierda > a:hover::after,
.menu-item:hover > a::after {
    width: 100%;
}

.menu-izquierda > a:hover,
.menu-item > a:hover {
    color: var(--frutilla-intensa);
}

.menu-item {
    position: relative;

    height: 100%;

    display: flex;
    align-items: center;
}

/* ===========================
   SUBMENÚ
=========================== */

.submenu {
    position: absolute;
    top: calc(100% - 6px);
    left: -16px;

    min-width: 240px;

    padding: 10px;

    background: var(--blanco);

    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra-media);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-8px);

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease;

    z-index: 1000;
}

.submenu::before {
    content: "";

    position: absolute;
    left: 0;
    bottom: 100%;

    width: 100%;
    height: 12px;
}

.submenu a {
    display: block;

    width: 100%;

    padding: 11px 14px;

    color: var(--chocolate);
    text-decoration: none;

    font-size: 14px;
    font-weight: 600;

    white-space: nowrap;

    border-radius: var(--radio-chico);

    transition:
        background 0.2s ease,
        color 0.2s ease,
        padding-left 0.2s ease;
}

.submenu a::after {
    display: none;
}

.submenu a:visited {
    color: var(--chocolate);
}

.submenu a:hover {
    background: var(--rosa-niebla);
    color: var(--frutilla-intensa);

    padding-left: 20px;
}

.menu-item:hover .submenu,
.menu-item:focus-within .submenu {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}

/* ===========================
   LOGO DEL NAVBAR
=========================== */

.logo {
    position: absolute;
    left: 50%;
    top: 50%;

    height: var(--logo-normal);

    display: flex;
    justify-content: center;
    align-items: center;

    transform: translate(-50%, -50%);

    text-decoration: none;

    transition: height 0.35s ease;
}

.logo img {
    display: block;

    width: auto;
    height: 100%;
    max-width: 170px;

    object-fit: contain;

    border: none;
    outline: none;

    transition: transform 0.35s ease;
}

.logo:hover img {
    transform: scale(1.05) rotate(-2deg);
}

/* ===========================
   BUSCADOR
=========================== */

.menu-derecha {
    display: none;
    align-items: center;

    height: 42px;

    background: var(--blanco);

    border: 1.5px solid var(--rosa-claro);
    border-radius: var(--pildora);

    overflow: hidden;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.menu-derecha:focus-within {
    border-color: var(--frutilla);
    box-shadow: 0 0 0 4px rgba(239, 129, 153, 0.18);
}

.menu-derecha input {
    width: 190px;
    height: 40px;

    padding: 0 6px 0 18px;

    background: transparent;

    border: none;
    outline: none;

    color: var(--chocolate);

    font-size: 14px;
}

.menu-derecha input::-webkit-search-cancel-button {
    display: none;
}

.menu-derecha input::placeholder {
    color: var(--chocolate-suave);
    opacity: 0.8;
}

.menu-derecha button {
    width: 44px;
    height: 40px;

    display: flex;
    justify-content: center;
    align-items: center;

    background: transparent;
    color: var(--chocolate);

    border: none;

    cursor: pointer;

    transition:
        background 0.25s ease,
        color 0.25s ease;
}

.menu-derecha button svg {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.menu-derecha button:hover {
    background: var(--rosa-niebla);
    color: var(--frutilla-intensa);
}

/* ===========================
   ACCIONES DEL NAVBAR
=========================== */

.acciones-navbar {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-left: auto;
}

/* ===========================
   BOTÓN DEL CARRITO
=========================== */

.boton-carrito {
    position: relative;

    width: 44px;
    height: 44px;

    display: flex;
    justify-content: center;
    align-items: center;

    background: var(--blanco);
    color: var(--chocolate);

    border: 1.5px solid var(--rosa-claro);
    border-radius: 50%;

    cursor: pointer;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

.boton-carrito:hover {
    background: var(--rosa-niebla);
    border-color: var(--frutilla);

    transform: translateY(-2px);
}

.boton-carrito svg {
    width: 21px;
    height: 21px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.contador-carrito {
    position: absolute;
    top: -6px;
    right: -6px;

    min-width: 21px;
    height: 21px;

    padding: 0 5px;

    display: flex;
    justify-content: center;
    align-items: center;

    background: var(--frutilla);
    color: var(--chocolate);

    border: 2px solid var(--crema);
    border-radius: var(--pildora);

    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

/* ===========================
   MENÚ HAMBURGUESA (celular)
=========================== */

.boton-menu-mobile {
    position: relative;

    width: 44px;
    height: 44px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 5px;

    background: transparent;
    border: none;
    border-radius: 50%;

    cursor: pointer;

    z-index: 2;
}

.boton-menu-mobile:hover {
    background: var(--rosa-niebla);
}

.boton-menu-mobile span {
    display: block;

    width: 22px;
    height: 2.5px;

    background: var(--chocolate);
    border-radius: 3px;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}

.boton-menu-mobile span:nth-child(2) {
    width: 16px;
    margin-left: -6px;
}

.fondo-menu-mobile {
    position: fixed;
    inset: 0;

    display: block;

    background: rgba(61, 24, 17, 0.45);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;

    z-index: 1996;
}

.fondo-menu-mobile.activo {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.menu-mobile {
    position: fixed;
    top: 0;
    left: 0;

    width: min(86%, 380px);
    height: 100vh;
    height: 100dvh;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: var(--crema);
    color: var(--chocolate);

    border-radius: 0 var(--radio-grande) var(--radio-grande) 0;
    box-shadow: 15px 0 40px rgba(85, 36, 26, 0.2);

    transform: translateX(-105%);

    transition: transform 0.4s cubic-bezier(.2, .8, .2, 1);

    z-index: 1997;
}

.menu-mobile.abierto {
    transform: translateX(0);
}

.menu-mobile-encabezado {
    flex-shrink: 0;

    min-height: 76px;

    padding: 0 20px 0 24px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    border-bottom: 1px solid var(--borde);
}

.menu-mobile-encabezado p {
    color: var(--frutilla-intensa);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 3px;
}

.cerrar-menu-mobile {
    position: relative;

    width: 44px;
    height: 44px;

    background: var(--blanco);
    border: 1.5px solid var(--rosa-claro);
    border-radius: 50%;

    cursor: pointer;
}

.cerrar-menu-mobile span {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 18px;
    height: 2px;

    background: var(--chocolate);
    border-radius: 2px;
}

.cerrar-menu-mobile span:first-child {
    transform: translate(-50%, -50%) rotate(45deg);
}

.cerrar-menu-mobile span:last-child {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.menu-mobile-contenido {
    flex: 1 1 auto;
    min-height: 0;

    padding: 12px 24px 30px;

    overflow-y: auto;
    overflow-x: hidden;

    -webkit-overflow-scrolling: touch;
}

.enlace-mobile-principal,
.boton-submenu-mobile {
    width: 100%;
    min-height: 56px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    background: transparent;
    color: var(--chocolate);

    border: none;
    border-bottom: 1px solid var(--borde);

    text-decoration: none;

    font-size: 17px;
    font-weight: 700;

    cursor: pointer;
}

.boton-submenu-mobile {
    text-align: left;
}

.icono-desplegar {
    width: 30px;
    height: 30px;

    display: inline-flex;
    justify-content: center;
    align-items: center;

    color: var(--chocolate);
    background: var(--rosa-niebla);
    border-radius: 50%;

    font-size: 20px;
    font-weight: 600;
    line-height: 1;

    transition: transform 0.3s ease;
}

.grupo-menu-mobile.abierto .icono-desplegar {
    transform: rotate(45deg);
}

.submenu-mobile {
    max-height: 0;

    overflow: hidden;

    padding-left: 14px;

    transition:
        max-height 0.4s ease,
        padding 0.4s ease;
}

.grupo-menu-mobile.abierto .submenu-mobile {
    max-height: 400px;

    padding-top: 6px;
    padding-bottom: 10px;
}

.submenu-mobile a {
    min-height: 44px;

    display: flex;
    align-items: center;
    gap: 10px;

    color: var(--chocolate-suave);

    text-decoration: none;

    font-size: 15px;
    font-weight: 600;
}

.submenu-mobile a::before {
    content: "";

    width: 6px;
    height: 6px;

    background: var(--frutilla);
    border-radius: 50%;

    flex-shrink: 0;
}

.menu-mobile-marca {
    flex-shrink: 0;

    padding: 22px 24px 28px;

    background: var(--rosa-niebla);
}

.menu-mobile-marca strong {
    display: block;

    margin-bottom: 6px;

    color: var(--chocolate);

    font-family: var(--fuente-titulos);
    font-size: 28px;
    font-weight: 400;
    line-height: 1.1;
}

.menu-mobile-marca p {
    max-width: 280px;

    color: var(--chocolate-suave);

    font-size: 13px;
    line-height: 1.6;
}

body.menu-mobile-abierto {
    overflow: hidden;
}

/* ===========================
   SEGUNDA PANTALLA: PORTADAS
=========================== */

.contenido {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;

    width: 100%;

    padding: 28px 16px 56px;

    background: var(--rosa-niebla);
}

.categoria {
    position: relative;

    display: block;

    height: 56vh;
    min-height: 300px;
    max-height: 460px;

    overflow: hidden;

    border-radius: var(--radio-grande);
    box-shadow: var(--sombra-media);

    text-decoration: none;

    cursor: pointer;

    isolation: isolate;
}

.categoria img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center 35%;

    transition:
        transform 0.8s ease,
        filter 0.8s ease;
}

.overlay {
    position: absolute;
    inset: 0;

    padding: 28px;

    display: flex;
    justify-content: center;
    align-items: flex-end;

    background: linear-gradient(to top, rgba(61, 24, 17, 0.62), rgba(61, 24, 17, 0) 48%);

    transition: background 0.6s ease;
}

.overlay h2 {
    color: var(--blanco);

    font-family: var(--fuente-titulos);
    font-size: clamp(34px, 9vw, 60px);
    font-weight: 400;
    line-height: 1.1;

    text-transform: lowercase;

    text-shadow: 0 4px 18px rgba(61, 24, 17, 0.45);

    transition: transform 0.6s ease;
}

.overlay h2::first-letter {
    text-transform: uppercase;
}

/* Botoncito "Ver más" con corazón bajo el título */
.overlay h2::after {
    content: "Ver más ♥";

    display: block;

    width: max-content;

    margin: 12px auto 0;
    padding: 8px 18px;

    color: var(--chocolate);
    background: var(--frutilla);

    border-radius: var(--pildora);

    font-family: var(--fuente-texto);
    font-size: 13px;
    font-weight: 800;

    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: none;

    transition: background 0.3s ease;
}

.categoria:hover img {
    transform: scale(1.06);
}

.categoria:hover .overlay {
    background: linear-gradient(to top, rgba(61, 24, 17, 0.8), rgba(61, 24, 17, 0.05) 70%);
}

.categoria:hover .overlay h2 {
    transform: translateY(-6px);
}

.categoria:hover .overlay h2::after {
    background: var(--rosa-claro);
}

/* ===========================
   TERCERA PANTALLA: CATÁLOGO
=========================== */

.catalogo {
    position: relative;

    padding: 70px 0 80px;

    background: var(--crema);
    color: var(--chocolate);

    overflow: hidden;
}

/* Onda que une la sección rosa con la crema */
.catalogo::before {
    content: "";

    position: absolute;
    top: -1px;
    left: 0;
    right: 0;

    height: 40px;

    background: var(--onda-niebla) center top / 100% 100% no-repeat;

    transform: scaleY(-1);
}

.catalogo-encabezado {
    width: min(1400px, 90%);

    margin: 0 auto 30px;

    text-align: center;
}

.catalogo-encabezado p {
    margin-bottom: 6px;

    color: var(--frutilla-intensa);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 3px;
    text-transform: uppercase;
}

.catalogo-encabezado h2 {
    color: var(--chocolate);

    font-family: var(--fuente-titulos);
    font-size: clamp(40px, 10vw, 64px);
    font-weight: 400;
    line-height: 1.1;

    text-transform: lowercase;
}

.catalogo-encabezado h2::first-letter {
    text-transform: uppercase;
}

.carrusel-contenedor {
    position: relative;

    width: min(1400px, 100%);

    margin: 0 auto;

    display: flex;
    align-items: center;
}

.carrusel {
    display: flex;
    gap: 16px;

    width: 100%;

    overflow-x: auto;

    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;

    padding: 8px 16px 26px;
    scroll-padding: 0 16px;

    scrollbar-width: none;
}

.carrusel::-webkit-scrollbar {
    display: none;
}

.tarjeta-catalogo {
    position: relative;

    flex: 0 0 82%;
    height: 400px;

    display: block;

    overflow: hidden;

    border-radius: var(--radio-grande);
    box-shadow: var(--sombra-suave);

    background: var(--rosa-claro);

    text-decoration: none;

    cursor: pointer;

    scroll-snap-align: start;

    isolation: isolate;

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

.tarjeta-catalogo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.8s ease;
}

.tarjeta-catalogo::after {
    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(to top, rgba(61, 24, 17, 0.82), rgba(61, 24, 17, 0) 62%);

    transition: opacity 0.4s ease;
}

.tarjeta-texto {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 22px;

    z-index: 2;

    color: var(--blanco);
}

.tarjeta-texto h3 {
    margin-bottom: 6px;

    font-size: 21px;
    font-weight: 800;
    line-height: 1.2;

    letter-spacing: 0.5px;
}

.tarjeta-texto span {
    display: inline-block;

    padding: 5px 12px;

    color: var(--chocolate);
    background: var(--rosa-claro);

    border-radius: var(--pildora);

    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.tarjeta-catalogo:hover {
    transform: translateY(-6px);
    box-shadow: var(--sombra-media);
}

.tarjeta-catalogo:hover img {
    transform: scale(1.06);
}

/* Tarjeta "Próximamente": no es clickeable */
#proximamente,
.tarjeta-catalogo[aria-disabled="true"] {
    cursor: default;
}

#proximamente img,
.tarjeta-catalogo[aria-disabled="true"] img {
    filter: saturate(0.55) blur(1.5px);
    transform: scale(1.04);
}

#proximamente::after,
.tarjeta-catalogo[aria-disabled="true"]::after {
    background:
        linear-gradient(to top, rgba(61, 24, 17, 0.85), rgba(85, 36, 26, 0.35) 70%);
}

/* Cinta "Muy pronto" */
#proximamente::before,
.tarjeta-catalogo[aria-disabled="true"]::before {
    content: "Muy pronto ♥";

    position: absolute;
    top: 18px;
    right: 18px;

    z-index: 3;

    padding: 7px 14px;

    color: var(--chocolate);
    background: var(--crema);

    border: 2px dashed var(--frutilla);
    border-radius: var(--pildora);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1px;
    text-transform: uppercase;
}

#proximamente:hover,
.tarjeta-catalogo[aria-disabled="true"]:hover {
    transform: none;
    box-shadow: var(--sombra-suave);
}

#proximamente:hover img,
.tarjeta-catalogo[aria-disabled="true"]:hover img {
    transform: scale(1.04);
}

/* Flechas del carrusel (solo escritorio) */

.flecha {
    position: absolute;
    top: 50%;

    z-index: 10;

    width: 52px;
    height: 52px;

    display: none;

    color: var(--chocolate);
    background: var(--blanco);

    border: 1.5px solid var(--rosa-claro);
    border-radius: 50%;
    box-shadow: var(--sombra-suave);

    font-size: 22px;
    font-weight: 700;

    cursor: pointer;

    transform: translateY(-50%);

    transition:
        background 0.25s ease,
        color 0.25s ease,
        opacity 0.3s ease;
}

.flecha:hover {
    background: var(--frutilla);
    color: var(--chocolate);
}

.flecha-izquierda {
    left: 8px;
}

.flecha-derecha {
    right: 8px;
}

.flecha:disabled {
    opacity: 0;
    pointer-events: none;
}

/* ===========================
   PIE DE PÁGINA
=========================== */

.footer {
    position: relative;

    padding: 56px 24px 28px;

    background: var(--chocolate);
    color: var(--crema);

    font-family: var(--fuente-texto);
}

/* Chocolate derretido sobre el borde superior del footer */
.footer::before {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% - 1px);

    height: 40px;

    background: var(--onda-chocolate) center bottom / 100% 100% no-repeat;

    pointer-events: none;
}

.footer-contenido {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;

    max-width: 1400px;

    margin: 0 auto;
}

.footer-columna {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-columna h3 {
    margin-bottom: 16px;

    color: var(--rosa-claro);

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 2px;
    text-transform: uppercase;
}

.footer-columna a {
    margin-bottom: 10px;

    color: var(--crema);
    text-decoration: none;

    font-size: 15px;

    overflow-wrap: anywhere;

    transition: color 0.25s ease;
}

.footer-columna a:visited {
    color: var(--crema);
}

.footer-columna a:hover {
    color: var(--rosa-claro);
}

.footer-columna p {
    margin-bottom: 10px;

    color: rgba(253, 243, 234, 0.85);

    font-size: 14px;
    line-height: 1.6;
}

.footer-marca {
    max-width: 340px;
}

.footer-marca h2 {
    margin-bottom: 12px;

    color: var(--crema);

    font-family: var(--fuente-titulos);
    font-size: 40px;
    font-weight: 400;
    line-height: 1.1;
}

.footer-marca h2::after {
    content: " ♥";

    color: var(--frutilla);

    font-size: 0.6em;
}

.footer-marca p {
    color: rgba(253, 243, 234, 0.85);

    font-size: 14px;
    line-height: 1.7;
}

.footer-info {
    max-width: 1400px;

    margin: 40px auto 0;
    padding: 24px 0;

    display: flex;
    flex-direction: column;
    gap: 18px;

    border-top: 1px solid rgba(251, 179, 193, 0.25);
    border-bottom: 1px solid rgba(251, 179, 193, 0.25);
}

.footer-pagos,
.footer-envios {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;
}

.footer-pagos span,
.footer-envios span {
    margin-right: 6px;

    color: var(--rosa-claro);

    font-size: 13px;
    font-weight: 700;
}

.pago,
.envio {
    min-height: 30px;

    padding: 4px 14px;

    display: flex;
    justify-content: center;
    align-items: center;

    background: var(--crema);
    color: var(--chocolate);

    border-radius: var(--pildora);

    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.footer-final {
    max-width: 1400px;

    margin: 22px auto 0;

    display: flex;
    flex-direction: column;
    gap: 8px;

    color: rgba(253, 243, 234, 0.75);

    font-size: 12px;
}

/* ===========================
   PÁGINA: CÓMO COMPRAR
=========================== */

.encabezado-como-comprar {
    position: relative;

    min-height: 340px;

    padding: 70px 20px 80px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;

    background:
        radial-gradient(circle at 15% 20%, rgba(239, 129, 153, 0.25) 0, rgba(239, 129, 153, 0) 40%),
        var(--rosa-niebla);
    color: var(--chocolate);
}

.encabezado-como-comprar::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;

    height: 40px;

    background: var(--onda-crema) center bottom / 100% 100% no-repeat;
}

.subtitulo-pagina {
    margin-bottom: 10px;

    color: var(--frutilla-intensa);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 3px;
    text-transform: uppercase;
}

.encabezado-como-comprar h1 {
    font-family: var(--fuente-titulos);
    font-size: clamp(44px, 12vw, 80px);
    font-weight: 400;
    line-height: 1.1;
}

.introduccion-compra {
    max-width: 640px;

    margin-top: 18px;

    color: var(--chocolate-suave);

    font-size: 16px;
    line-height: 1.75;
}

/* Enlace activo del navbar */
.enlace-activo::after {
    width: 100% !important;
}

/* ===========================
   LISTA DE PASOS
=========================== */

.seccion-pasos {
    background: var(--crema);

    padding: 50px 16px 80px;
}

.lista-pasos {
    max-width: 960px;

    margin: 0 auto;

    display: grid;
    gap: 16px;
}

.paso-compra {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;

    padding: 24px 22px;

    background: var(--blanco);

    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra-suave);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.paso-compra:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-media);
}

.numero-paso {
    width: 54px;
    height: 54px;

    display: flex;
    justify-content: center;
    align-items: center;

    color: var(--chocolate);
    background: var(--rosa-claro);

    border-radius: 50%;

    font-family: var(--fuente-titulos);
    font-size: 24px;
    line-height: 1;
}

.contenido-paso h2 {
    margin-bottom: 8px;

    color: var(--chocolate);

    font-size: 19px;
    font-weight: 800;
}

.contenido-paso p {
    max-width: 760px;

    color: var(--chocolate-suave);

    font-size: 15px;
    line-height: 1.75;
}

.contenido-paso a {
    color: var(--frutilla-intensa);
    font-weight: 700;

    text-decoration-color: var(--rosa-claro);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.contenido-paso a:hover {
    text-decoration-color: var(--frutilla-intensa);
}

/* ===========================
   BENEFICIOS DE COMPRA
=========================== */

.beneficios-compra {
    padding: 44px 24px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 26px;

    background: var(--rosa-niebla);
}

.beneficio {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 18px;
}

.icono-beneficio {
    flex: 0 0 56px;

    width: 56px;
    height: 56px;

    display: flex;
    justify-content: center;
    align-items: center;

    color: var(--chocolate);
    background: var(--blanco);

    border-radius: 50%;
    box-shadow: var(--sombra-suave);
}

.icono-beneficio svg {
    display: block;

    width: 28px;
    height: 28px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.beneficio h3 {
    margin-bottom: 3px;

    color: var(--chocolate);

    font-size: 15px;
    font-weight: 800;

    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.beneficio p {
    color: var(--chocolate-suave);

    font-size: 14px;
}

.separador-beneficio {
    width: 100%;
    height: 1px;

    background: var(--rosa-claro);
}

/* ===========================
   FONDO DEL CARRITO
=========================== */

.fondo-carrito {
    position: fixed;
    inset: 0;

    background: rgba(61, 24, 17, 0.45);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;

    z-index: 1998;
}

.fondo-carrito.activo {
    opacity: 1;
    visibility: visible;
}

/* ===========================
   CARRITO LATERAL
=========================== */

.carrito-lateral {
    position: fixed;
    top: 0;
    right: 0;

    width: 100%;
    height: 100vh;
    height: 100dvh;

    display: flex;
    flex-direction: column;

    background: var(--crema);
    color: var(--chocolate);

    transform: translateX(105%);

    transition: transform 0.4s cubic-bezier(.2, .8, .2, 1);

    z-index: 1999;

    box-shadow: -15px 0 40px rgba(85, 36, 26, 0.18);
}

.carrito-lateral.abierto {
    transform: translateX(0);
}

body.carrito-abierto {
    overflow: hidden;
}

.carrito-encabezado {
    min-height: 92px;

    padding: 20px 22px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    background: var(--rosa-niebla);

    border-bottom: 1px solid var(--borde);
}

.carrito-etiqueta {
    margin-bottom: 2px;

    color: var(--frutilla-intensa);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 2.5px;
}

.carrito-encabezado h2 {
    font-family: var(--fuente-titulos);
    font-size: 28px;
    font-weight: 400;
    line-height: 1.15;
}

.cerrar-carrito {
    width: 44px;
    height: 44px;

    flex-shrink: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    background: var(--blanco);
    color: var(--chocolate);

    border: 1.5px solid var(--rosa-claro);
    border-radius: 50%;

    cursor: pointer;

    transition:
        background 0.25s ease,
        color 0.25s ease;
}

.cerrar-carrito:hover {
    background: var(--chocolate);
    color: var(--crema);
}

.cerrar-carrito svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;

    stroke-width: 2;
    stroke-linecap: round;
}

/* ---------- Carrito vacío ---------- */

.carrito-vacio {
    flex: 1;

    padding: 40px 28px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
}

.icono-carrito-vacio {
    width: 84px;
    height: 84px;

    margin-bottom: 20px;

    display: flex;
    justify-content: center;
    align-items: center;

    color: var(--chocolate);
    background: var(--rosa-claro);

    border-radius: 50%;
}

.icono-carrito-vacio svg {
    width: 34px;
    height: 34px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.carrito-vacio h3 {
    margin-bottom: 8px;

    font-family: var(--fuente-titulos);
    font-size: 28px;
    font-weight: 400;
}

.carrito-vacio p {
    margin-bottom: 24px;

    color: var(--chocolate-suave);

    font-size: 15px;
    line-height: 1.6;
}

/* Botón secundario: chocolate */
.boton-seguir-comprando {
    min-width: 200px;
    min-height: 48px;

    padding: 0 26px;

    background: var(--chocolate);
    color: var(--crema);

    border: none;
    border-radius: var(--pildora);

    font-size: 14px;
    font-weight: 800;

    letter-spacing: 0.5px;

    cursor: pointer;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.boton-seguir-comprando:hover {
    background: var(--chocolate-hondo);
    transform: translateY(-2px);
}

/* ---------- Productos del carrito ---------- */

.carrito-productos {
    flex: 1;

    padding: 6px 18px;

    overflow-y: auto;
}

.producto-carrito {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr) auto;
    gap: 14px;

    margin: 12px 0;
    padding: 12px;

    background: var(--blanco);

    border-radius: var(--radio);
    box-shadow: var(--sombra-suave);
}

.producto-carrito img {
    width: 80px;
    height: 92px;

    object-fit: cover;

    background: var(--rosa-niebla);

    border-radius: var(--radio-chico);
}

.informacion-producto-carrito h3 {
    margin-bottom: 4px;

    color: var(--chocolate);

    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
}

.informacion-producto-carrito p {
    margin-bottom: 8px;

    color: var(--chocolate-suave);

    font-size: 13px;
}

.precio-producto-carrito {
    color: var(--frutilla-intensa);

    font-size: 16px;
    font-weight: 800;
}

.controles-cantidad {
    margin-top: 10px;

    display: flex;
    align-items: center;

    width: max-content;

    background: var(--rosa-niebla);
    border-radius: var(--pildora);
}

.controles-cantidad button {
    width: 34px;
    height: 34px;

    background: transparent;
    color: var(--chocolate);

    border: none;
    border-radius: 50%;

    font-size: 17px;
    font-weight: 700;

    cursor: pointer;

    transition: background 0.2s ease;
}

.controles-cantidad button:hover {
    background: var(--rosa-claro);
}

.controles-cantidad span {
    min-width: 28px;

    text-align: center;

    font-size: 14px;
    font-weight: 800;
}

.eliminar-producto {
    align-self: start;

    width: 32px;
    height: 32px;

    background: transparent;
    color: var(--chocolate-suave);

    border: none;
    border-radius: 50%;

    font-size: 18px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.eliminar-producto:hover {
    background: var(--rosa-niebla);
    color: var(--error);
}

/* ---------- Resumen del carrito ---------- */

.carrito-resumen {
    padding: 20px 22px 24px;

    background: var(--blanco);

    border-top: 1px solid var(--borde);
    border-radius: var(--radio-grande) var(--radio-grande) 0 0;
    box-shadow: 0 -10px 30px rgba(85, 36, 26, 0.06);
}

.fila-total {
    margin-bottom: 8px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    color: var(--chocolate);
}

.fila-total span {
    font-size: 14px;
    font-weight: 800;

    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.fila-total strong {
    color: var(--chocolate);

    font-size: 24px;
    font-weight: 800;
}

.texto-envio-carrito {
    margin-bottom: 16px;

    color: var(--chocolate-suave);

    font-size: 13px;
    line-height: 1.5;
}

/* Botón principal: rosa frutilla con texto chocolate (contraste 5:1) */
.boton-iniciar-compra {
    width: 100%;
    min-height: 54px;

    background: var(--frutilla);
    color: var(--chocolate);

    border: none;
    border-radius: var(--pildora);
    box-shadow: var(--sombra-rosa);

    font-size: 15px;
    font-weight: 800;

    letter-spacing: 0.5px;

    cursor: pointer;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.boton-iniciar-compra:hover {
    background: var(--chocolate);
    color: var(--crema);

    transform: translateY(-2px);
}

/* Ocultar elementos según el estado */
.carrito-vacio.oculto,
.carrito-resumen.oculto,
.carrito-productos.oculto {
    display: none;
}

/* =========================================================
   PANTALLAS MÁS GRANDES
========================================================= */

@media (min-width: 600px) {

    .hero p:nth-of-type(2) {
        font-size: 14px;
        letter-spacing: 5px;
    }

    .carrito-lateral {
        width: min(460px, 100%);

        border-radius: var(--radio-grande) 0 0 var(--radio-grande);

        overflow: hidden;
    }

    .contenido {
        grid-template-columns: 1fr 1fr;
        gap: 20px;

        padding: 36px 24px 64px;
    }

    .tarjeta-catalogo {
        flex-basis: calc((100% - 16px) / 2);
    }

    .paso-compra {
        grid-template-columns: 70px 1fr;
        gap: 22px;

        padding: 28px 30px;
    }

    .footer-contenido {
        grid-template-columns: 1fr 1fr;
    }

}

@media (min-width: 900px) {

    :root {
        --alto-navbar: 78px;
        --alto-navbar-hero: 92px;
        --alto-navbar-compacto: 62px;
        --logo-normal: 60px;
        --logo-hero: 76px;
        --logo-compacto: 48px;
    }

    .hero {
        min-height: 100vh;
        padding-top: calc(var(--alto-navbar-hero) + 150px);
    }

    /* Navbar de escritorio */
    .navbar {
        padding: 0 32px;
    }

    .boton-menu-mobile,
    .fondo-menu-mobile,
    .menu-mobile {
        display: none;
    }

    .menu-izquierda {
        display: flex;
    }

    .logo img {
        max-width: 230px;
    }

    .menu-derecha {
        display: flex;
    }

    .acciones-navbar {
        margin-left: 0;
        gap: 12px;
    }

    .contenido {
        gap: 28px;

        padding: 56px 5% 80px;
    }

    .categoria {
        height: 70vh;
        max-height: 620px;
    }

    .catalogo {
        padding: 90px 0 100px;
    }

    .catalogo-encabezado {
        margin-bottom: 40px;
    }

    .carrusel-contenedor {
        width: min(1400px, 92%);
    }

    .carrusel {
        gap: 24px;
        padding: 10px 6px 30px;
    }

    .tarjeta-catalogo {
        flex-basis: calc((100% - 48px) / 3);
        height: 460px;
    }

    .flecha {
        display: block;
    }

    .flecha-izquierda {
        left: -26px;
    }

    .flecha-derecha {
        right: -26px;
    }

    .footer {
        padding: 80px 6% 30px;
    }

    .footer-contenido {
        grid-template-columns: 1fr 1fr 1fr 1.3fr;
        gap: 48px;
    }

    .footer-marca {
        justify-self: end;
    }

    .footer-info,
    .footer-final {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .encabezado-como-comprar {
        min-height: 420px;
    }

    .seccion-pasos {
        padding: 80px 25px 110px;
    }

    .beneficios-compra {
        flex-direction: row;
        justify-content: center;
        align-items: center;

        gap: 0;

        padding: 48px 6%;
    }

    .beneficio {
        width: 30%;
        max-width: 360px;

        justify-content: center;
    }

    .separador-beneficio {
        width: 2px;
        height: 56px;

        margin: 0 36px;

        border-radius: 2px;
    }

}

@media (min-width: 1150px) {

    .menu-izquierda {
        gap: 36px;
    }

    .menu-derecha input {
        width: 230px;
    }

}

/* =========================================================
   MOVIMIENTO REDUCIDO
========================================================= */

@media (prefers-reduced-motion: reduce) {

    /* No se apaga todo: animaciones más cortas y tranquilas.
       animaciones.js también arma una versión más liviana. */

    html {
        scroll-behavior: auto;
    }

    .hero h1,
    .hero p:first-of-type,
    .hero p:nth-of-type(2) {
        animation-duration: 0.6s;
        animation-timing-function: ease-out;
    }

    .hero-bajar {
        animation: none;
    }

}

/* ===========================
   PÁGINAS LEGALES (privacidad y términos)
=========================== */

.seccion-legal {
    background: var(--crema);

    padding: 40px 16px 80px;
}

.texto-legal {
    max-width: 820px;

    margin: 0 auto;

    padding: 28px 22px;

    background: var(--blanco);

    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra-suave);

    color: var(--chocolate);

    font-size: 16px;
    line-height: 1.75;

    overflow-wrap: anywhere;
}

.texto-legal h2 {
    margin: 32px 0 10px;

    color: var(--chocolate);

    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
}

.texto-legal p,
.texto-legal ul {
    margin-bottom: 12px;

    color: var(--chocolate-suave);
}

.texto-legal ul {
    padding-left: 22px;
}

.texto-legal li {
    margin-bottom: 6px;
}

.texto-legal strong {
    color: var(--chocolate);
}

.texto-legal a {
    color: var(--frutilla-intensa);

    font-weight: 700;

    text-decoration: underline;
    text-underline-offset: 3px;
}

.legal-actualizacion {
    display: inline-block;

    padding: 6px 14px;

    background: var(--rosa-niebla);

    border-radius: var(--pildora);

    color: var(--frutilla-intensa) !important;

    font-size: 13px;
    font-weight: 800;
}

.legal-destacado {
    padding: 16px 18px;

    background: var(--crema);

    border-left: 4px solid var(--frutilla);
    border-radius: var(--radio-chico);

    font-size: 14px;
}

@media (min-width: 768px) {

    .seccion-legal {
        padding: 60px 25px 110px;
    }

    .texto-legal {
        padding: 48px 56px;
    }

}