/* Puna Comercializadora - microinteracciones accesibles.
 * CSS independiente del bundle Tailwind: puede revisarse en el worktree sin recompilar Vite.
 * La animacion de entrada la habilita el island Vue solo si IntersectionObserver funciona.
 */
:root {
    --pn-motion-ease: cubic-bezier(.22, 1, .36, 1);
    --pn-motion-ink: #0b2f45;
    --pn-motion-accent: #3ddc97;
}

/* Animacion en cascada sin FOUC: el contenido arranca visible hasta que Vue habilita ready. */
@media (prefers-reduced-motion: no-preference) {
    [data-pn-motion-group].pn-motion-ready [data-pn-motion-item] {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
        transition: opacity 650ms var(--pn-motion-ease),
                    transform 650ms var(--pn-motion-ease),
                    background-color 280ms ease,
                    border-color 280ms ease,
                    box-shadow 360ms ease;
        transition-delay: var(--pn-stagger-delay, 0ms);
    }
    [data-pn-motion-group].pn-motion-ready [data-pn-motion-item].pn-motion-in {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    /* El estado hover prima sobre la posicion de entrada una vez revelado. */
    @media (hover: hover) and (pointer: fine) {
        .pn-clients.pn-motion-ready .pn-client-chip.pn-motion-in:hover,
        .pn-clients.pn-motion-ready .pn-client-chip.pn-motion-in.pn-motion-hovered {
            transform: translate3d(0, -5px, 0);
        }
        .pn-keypoints.pn-motion-ready .pn-keypoint-card.pn-motion-in:hover,
        .pn-keypoints.pn-motion-ready .pn-keypoint-card.pn-motion-in.pn-motion-hovered {
            transform: translate3d(0, -9px, 0);
        }
        .pn-products.pn-motion-ready .pn-product-card.pn-motion-in:hover,
        .pn-products.pn-motion-ready .pn-product-card.pn-motion-in.pn-motion-hovered {
            transform: translate3d(0, -9px, 0);
        }
    }
}

.pn-clients__grid { align-items: stretch; grid-template-columns: minmax(0, 1fr); width: 100%; min-width: 0; }
@media (min-width: 640px) {
    .pn-clients__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pn-clients__list { min-width: 0; width: 100%; }
@media (min-width: 1024px) {
    .pn-clients__list { width: 58.333333%; }
}
.pn-client-chip {
    position: relative;
    min-width: 0;
    max-width: 100%;
    min-height: 58px;
    padding: 12px 16px;
    overflow-wrap: anywhere;
    font-size: clamp(15px, 1.4vw, 17px);
    line-height: 1.35;
    border: 1px solid rgba(15, 76, 92, .075);
    border-radius: 13px;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 3px 16px rgba(10, 46, 58, .025);
    isolation: isolate;
    overflow: hidden;
}
.pn-client-chip::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    border-radius: 3px;
    background: var(--pn-motion-accent);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform 330ms var(--pn-motion-ease);
}
.pn-client-chip::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(180px circle at var(--pn-pointer-x, 18%) var(--pn-pointer-y, 50%),
        rgba(61, 220, 151, .12), transparent 85%);
    transition: opacity 250ms ease;
}
.pn-client-chip__check {
    flex-shrink: 0;
    transition: transform 320ms var(--pn-motion-ease), filter 320ms ease;
}
.pn-clients__showcase { isolation: isolate; }
.pn-clients__photo {
    transition: transform 850ms var(--pn-motion-ease);
}
.pn-clients__showcase:hover .pn-clients__photo { transform: scale(1.055); }

.pn-keypoints__grid { align-items: stretch; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) and (max-width: 1023px) {
    .pn-keypoints__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .pn-keypoints__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.pn-keypoint-card {
    /* Borde verde y badge deben tener aire interior incluso durante hover. */
    position: relative;
    min-width: 0;
    min-height: 292px;
    padding: 44px 24px 34px;
    justify-content: flex-start;
    gap: 18px;
    border: 1px solid rgba(15, 76, 92, .11);
    border-radius: 22px;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 10px 25px rgba(10, 46, 58, .035);
    overflow: hidden;
    isolation: isolate;
}
.pn-keypoint-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, #0f4c5c, #3ddc97);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 380ms var(--pn-motion-ease);
}
.pn-keypoint-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(170px circle at var(--pn-pointer-x, 50%) var(--pn-pointer-y, 20%),
        rgba(61, 220, 151, .13), transparent 100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 280ms ease;
}
.pn-keypoint-card__icon {
    display: grid;
    place-items: center;
    width: 82px;
    height: 82px;
    flex: 0 0 auto;
    border: 1px solid rgba(61, 220, 151, .22);
    border-radius: 23px;
    background: linear-gradient(145deg, rgba(61, 220, 151, .12), rgba(255, 255, 255, .96));
    transition: background 280ms ease, transform 350ms var(--pn-motion-ease),
        box-shadow 350ms ease, border-color 280ms ease;
}
.pn-keypoint-card__icon svg {
    transition: transform 380ms var(--pn-motion-ease);
}
.pn-keypoint-card h3 { max-width: 100%; margin: 0; overflow-wrap: break-word; text-wrap: balance; }
/* La regla anterior margin-top:auto mandaba la descripcion al fondo y vaciaba el centro. */
.pn-keypoint-card p { margin: 0; overflow-wrap: break-word; }

/* El contenido mantiene el mismo eje que header, hero, nosotros y footer.
   En viewport ultrawide (o al alejar el zoom) los fondos siguen full-bleed,
   pero nunca se estiran los textos y cards a los extremos de la pantalla.
   .pn-container del theme fija max-width:1440px y margin-inline:auto. */

.pn-product-card {
    min-width: 0;
    position: relative;
    isolation: isolate;
    box-shadow: 0 12px 32px rgba(10, 46, 58, .12);
    transition: transform 370ms var(--pn-motion-ease), box-shadow 370ms ease;
}
.pn-product-card > span:first-child::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(125deg, transparent 48%, rgba(255, 255, 255, .19) 59%, transparent 70%);
    transform: translateX(-110%);
    transition: transform 680ms var(--pn-motion-ease);
    pointer-events: none;
}
.pn-product-card__img {
    transition: transform 680ms var(--pn-motion-ease), filter 480ms ease;
}
.pn-product-card__arrow {
    transition: transform 320ms var(--pn-motion-ease);
}
.pn-product-card:focus-visible {
    outline: 3px solid var(--pn-motion-accent);
    outline-offset: 4px;
}
.pn-mission__quote {
    position: relative;
    padding: 24px 26px;
    border-left: 3px solid var(--pn-motion-accent);
    border-radius: 0 20px 20px 0;
    background: rgba(255, 255, 255, .075);
    transition: background 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}
.pn-mission__quote:hover {
    background: rgba(255, 255, 255, .115);
}

@media (hover: hover) and (pointer: fine) {
    .pn-client-chip:hover,
    .pn-client-chip.pn-motion-hovered {
        border-color: rgba(61, 220, 151, .45);
        background: #ffffff;
        box-shadow: 0 14px 26px rgba(10, 46, 58, .10);
        transform: translateY(-5px);
    }
    .pn-client-chip:hover::before,
    .pn-client-chip.pn-motion-hovered::before { transform: scaleY(1); }
    .pn-client-chip:hover::after,
    .pn-client-chip.pn-motion-hovered::after { opacity: 1; }
    .pn-client-chip:hover .pn-client-chip__check,
    .pn-client-chip.pn-motion-hovered .pn-client-chip__check {
        transform: rotate(-12deg) scale(1.13);
        filter: drop-shadow(0 4px 6px rgba(61, 220, 151, .25));
    }
    .pn-keypoint-card:hover,
    .pn-keypoint-card.pn-motion-hovered {
        border-color: rgba(61, 220, 151, .50);
        background: #ffffff;
        box-shadow: 0 24px 42px rgba(10, 46, 58, .115);
        transform: translateY(-9px);
    }
    .pn-keypoint-card:hover::before,
    .pn-keypoint-card.pn-motion-hovered::before { transform: scaleX(1); }
    .pn-keypoint-card:hover::after,
    .pn-keypoint-card.pn-motion-hovered::after { opacity: 1; }
    .pn-keypoint-card:hover .pn-keypoint-card__icon,
    .pn-keypoint-card.pn-motion-hovered .pn-keypoint-card__icon {
        transform: translateY(-5px) rotate(-5deg);
        border-color: rgba(61, 220, 151, .62);
        box-shadow: 0 10px 21px rgba(61, 220, 151, .14);
    }
    .pn-keypoint-card:hover .pn-keypoint-card__icon svg,
    .pn-keypoint-card.pn-motion-hovered .pn-keypoint-card__icon svg { transform: scale(1.09); }
    .pn-product-card:hover,
    .pn-product-card.pn-motion-hovered {
        box-shadow: 0 26px 48px rgba(10, 46, 58, .23);
        transform: translateY(-9px);
    }
    .pn-product-card:hover .pn-product-card__img,
    .pn-product-card.pn-motion-hovered .pn-product-card__img {
        transform: scale(1.095);
        filter: saturate(1.11);
    }
    .pn-product-card:hover > span:first-child::after,
    .pn-product-card.pn-motion-hovered > span:first-child::after { transform: translateX(110%); }
    .pn-product-card:hover .pn-product-card__arrow,
    .pn-product-card.pn-motion-hovered .pn-product-card__arrow { transform: translateX(5px); }
}

@media (max-width: 640px) {
    .pn-keypoint-card { min-height: 0; padding: 36px 20px 30px; }
    .pn-client-chip { min-height: 54px; padding: 12px; font-size: 15px; }
    .pn-client-chip::after { display: none; }
    .pn-mission__quote { padding: 22px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    [data-pn-motion-group] [data-pn-motion-item],
    .pn-client-chip, .pn-client-chip::before, .pn-client-chip::after,
    .pn-client-chip__check, .pn-clients__photo,
    .pn-keypoint-card, .pn-keypoint-card::before, .pn-keypoint-card::after,
    .pn-keypoint-card__icon, .pn-keypoint-card__icon svg,
    .pn-product-card, .pn-product-card__img, .pn-product-card__arrow,
    .pn-product-card > span:first-child::after, .pn-mission__quote {
        opacity: 1;
        transition: none;
        animation: none;
        transform: none;
    }
}