/* ============================================================
   PATYTA — HOME APP PREMIUM R1

   Dirección:
   - Consumer app premium
   - Mobile first
   - Blanco predominante
   - Verde Patyta #008B4F
   - Azul #052F5E
   - Crema únicamente como detalle
   - Radios controlados
   - Sin exceso de cards/pills
   ============================================================ */

html.patyta-home-app {
    --pp-green: #008B4F;
    --pp-green-soft: rgba(0, 139, 79, .08);
    --pp-blue: #052F5E;
    --pp-red: #BA2D63;
    --pp-cream: #FFF5DD;

    --pp-ink: #171719;
    --pp-muted: #727276;
    --pp-line: rgba(5,47,94,.09);

    --pp-radius-sm: 6px;
    --pp-radius-md: 10px;
    --pp-radius-lg: 16px;

    --pp-shadow-soft:
        0 1px 2px rgba(20, 20, 30, .025),
        0 8px 28px rgba(20, 20, 40, .055);

    --pp-shadow-lift:
        0 2px 4px rgba(20, 20, 30, .035),
        0 14px 34px rgba(20, 20, 40, .09);

    background: #fff;
    color-scheme: light;
}

html.patyta-home-app body {
    background: #fff;
    color: var(--pp-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
}

/* ============================================================
   APP SHELL
   ============================================================ */

html.patyta-home-app main {
    position: relative;
}

html.patyta-home-app .pp-home-shell {
    isolation: isolate;
}

/* Evita sensación de página con demasiado "aire". */
html.patyta-home-app .pp-home-section {
    position: relative;
    margin-block: clamp(24px, 4vw, 42px);
    scroll-margin-top: 92px;
}

/* Títulos de módulos */
html.patyta-home-app .pp-home-section h2,
html.patyta-home-app .pp-home-section h3 {
    color: var(--pp-ink);
    letter-spacing: -.025em;
    text-wrap: balance;
}

html.patyta-home-app .pp-home-section p {
    text-wrap: pretty;
}

/* ============================================================
   TOP APP BAR
   ============================================================ */

html.patyta-home-app header,
html.patyta-home-app [class*="topbar"],
html.patyta-home-app [class*="top-bar"] {
    -webkit-backdrop-filter: blur(18px) saturate(1.16);
    backdrop-filter: blur(18px) saturate(1.16);
}

html.patyta-home-app header {
    border-bottom-color: rgba(5,47,94,.065);
}

/* ============================================================
   HERO / BANNERS
   ============================================================ */

html.patyta-home-app .pp-home-hero {
    position: relative;
}

html.patyta-home-app .pp-home-hero > [class*="banner"],
html.patyta-home-app .pp-home-hero [class*="hero"],
html.patyta-home-app .pp-home-hero [class*="carousel"] {
    overflow: clip;
}

html.patyta-home-app .pp-home-hero img {
    display: block;
}

/* ============================================================
   CATEGORÍAS
   ============================================================ */

html.patyta-home-app .pp-home-categories {
    position: relative;
}

html.patyta-home-app .pp-home-categories a,
html.patyta-home-app .pp-home-categories button {
    -webkit-tap-highlight-color: transparent;
}

html.patyta-home-app .pp-home-categories [class*="card"],
html.patyta-home-app .pp-home-categories [class*="item"],
html.patyta-home-app .pp-home-categories > a {
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease,
        opacity .18s ease;
}

/* ============================================================
   PRODUCTOS
   ============================================================ */

html.patyta-home-app .pp-home-products {
    position: relative;
}

html.patyta-home-app .pp-home-products article,
html.patyta-home-app .pp-home-products [class*="product-card"],
html.patyta-home-app .pp-home-products [class*="product_card"],
html.patyta-home-app .pp-home-products [class*="producto-card"] {
    border-color: var(--pp-line);
    box-shadow: var(--pp-shadow-soft);
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

html.patyta-home-app .pp-home-products [class*="price"],
html.patyta-home-app .pp-home-products [class*="precio"] {
    color: var(--pp-ink);
    letter-spacing: -.02em;
}

/* Texto logístico: útil pero visualmente secundario */
html.patyta-home-app .pp-home-products [class*="shipping"],
html.patyta-home-app .pp-home-products [class*="envio"],
html.patyta-home-app .pp-home-products [class*="delivery"] {
    color: var(--pp-green);
}

/* ============================================================
   GUÍAS / EDITORIAL
   ============================================================ */

html.patyta-home-app .pp-home-guides {
    position: relative;
}

html.patyta-home-app .pp-home-guides article,
html.patyta-home-app .pp-home-guides [class*="card"],
html.patyta-home-app .pp-home-guides [class*="guide"] {
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

/* ============================================================
   BOTONES / TACTILIDAD
   ============================================================ */

html.patyta-home-app .pp-home-shell button,
html.patyta-home-app .pp-home-shell [role="button"],
html.patyta-home-app .pp-home-shell a[class*="btn"],
html.patyta-home-app .pp-home-shell a[class*="button"] {
    touch-action: manipulation;
}

html.patyta-home-app .pp-home-shell button:focus-visible,
html.patyta-home-app .pp-home-shell [role="button"]:focus-visible,
html.patyta-home-app .pp-home-shell a:focus-visible {
    outline: 3px solid rgba(0, 139, 79, .24);
    outline-offset: 3px;
}

/* ============================================================
   BOTTOM NAV — sensación de app
   ============================================================ */

html.patyta-home-app [class*="bottom-nav"],
html.patyta-home-app [class*="bottom_nav"],
html.patyta-home-app [class*="mobile-nav"] {
    -webkit-backdrop-filter: blur(22px) saturate(1.18);
    backdrop-filter: blur(22px) saturate(1.18);
}

/* ============================================================
   DESKTOP / POINTER
   ============================================================ */

@media (hover:hover) and (pointer:fine) {

    html.patyta-home-app .pp-home-products article:hover,
    html.patyta-home-app .pp-home-products [class*="product-card"]:hover,
    html.patyta-home-app .pp-home-products [class*="producto-card"]:hover {
        transform: translateY(-2px);
        box-shadow: var(--pp-shadow-lift);
    }

    html.patyta-home-app .pp-home-categories [class*="card"]:hover,
    html.patyta-home-app .pp-home-categories [class*="item"]:hover {
        transform: translateY(-2px);
    }

    html.patyta-home-app .pp-home-guides article:hover,
    html.patyta-home-app .pp-home-guides [class*="card"]:hover {
        transform: translateY(-2px);
    }
}

/* ============================================================
   MÓVIL — LA PARTE MÁS IMPORTANTE
   ============================================================ */

@media (max-width: 767px) {

    html.patyta-home-app body {
        overscroll-behavior-x: none;
    }

    html.patyta-home-app main {
        padding-bottom:
            max(
                86px,
                calc(70px + env(safe-area-inset-bottom))
            );
    }

    html.patyta-home-app .pp-home-section {
        margin-block: 24px;
    }

    /*
       Hero:
       menos sensación de banner web flotando;
       más módulo principal de aplicación.
    */
    html.patyta-home-app .pp-home-hero {
        margin-top: 8px;
        margin-bottom: 22px;
    }

    /*
       Categorías:
       botones táctiles rápidos, no módulos gigantes.
    */
    html.patyta-home-app .pp-home-categories [class*="card"],
    html.patyta-home-app .pp-home-categories [class*="item"] {
        min-width: 0;
    }

    /*
       Productos:
       imagen/producto/precio mandan;
       el contenedor sólo acompaña.
    */
    html.patyta-home-app .pp-home-products article,
    html.patyta-home-app .pp-home-products [class*="product-card"],
    html.patyta-home-app .pp-home-products [class*="producto-card"] {
        border-radius: var(--pp-radius-md);
    }

    /*
       Respuesta táctil.
       Se usa transform — no width/height — para evitar layout thrash.
    */
    html.patyta-home-app .pp-home-categories a:active,
    html.patyta-home-app .pp-home-categories button:active,
    html.patyta-home-app .pp-home-products a:active,
    html.patyta-home-app .pp-home-products button:active,
    html.patyta-home-app .pp-home-guides a:active {
        transform: scale(.982);
    }

    /*
       App bar móvil:
       fondo blanco translúcido y separación apenas visible.
    */
    html.patyta-home-app header,
    html.patyta-home-app [class*="topbar"],
    html.patyta-home-app [class*="top-bar"] {
        background-color: rgba(255, 255, 255, .91);
        border-bottom:
            1px solid rgba(5,47,94,.06);
    }

    /*
       Bottom navigation:
       conserva Liquid Glass pero más contenido y premium.
    */
    html.patyta-home-app [class*="bottom-nav"],
    html.patyta-home-app [class*="bottom_nav"],
    html.patyta-home-app [class*="mobile-nav"] {
        background-color: rgba(255, 255, 255, .84);
        border-top-color: rgba(5,47,94,.07);
    }
}

/* ============================================================
   PANTALLAS MUY PEQUEÑAS
   ============================================================ */

@media (max-width: 390px) {

    html.patyta-home-app .pp-home-section {
        margin-block: 21px;
    }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

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

    html.patyta-home-app *,
    html.patyta-home-app *::before,
    html.patyta-home-app *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}