/* ==========================================================================
   Porta Distribución — Plantilla front-end
   Estilo corporativo mayorista (referencia: clgdistribuciones.com.pe)
   Stack: Bootstrap 5.3 + Bootstrap Icons + CSS propio (prefijo po-)
   Variables personalizables desde el panel (Plantillas › Personalizar):
     --po-primary, --po-primary-dark, --po-primary-light,
     --po-accent, --po-accent-dark, --po-bg, --po-footer, --po-font
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
    --po-primary: #2B3990;
    --po-primary-dark: #1A2460;
    --po-primary-light: #4B6CB7;
    --po-accent: #F5841F;
    --po-accent-dark: #D96D0A;
    --po-accent-light: #FFA94D;
    --po-bg: #F7F8FC;
    --po-footer: #1A1C2E;
    --po-font: 'Inter', Arial, 'Helvetica Neue', system-ui, -apple-system, sans-serif;

    --po-white: #FFFFFF;
    --po-gray-50: #F1F3F8;
    --po-gray-100: #E4E7EF;
    --po-gray-200: #C8CCE0;
    --po-gray-400: #8B90A8;
    --po-gray-600: #5A5F7A;
    --po-gray-800: #2D3048;
    --po-gray-900: #1A1C2E;

    --po-primary-06: color-mix(in srgb, var(--po-primary) 6%, transparent);
    --po-primary-08: color-mix(in srgb, var(--po-primary) 8%, transparent);
    --po-primary-15: color-mix(in srgb, var(--po-primary) 15%, transparent);
    --po-accent-10: color-mix(in srgb, var(--po-accent) 10%, transparent);
    --po-accent-30: color-mix(in srgb, var(--po-accent) 30%, transparent);

    --po-shadow-sm: 0 .25rem .75rem color-mix(in srgb, var(--po-primary) 4%, transparent);
    --po-shadow-md: 0 .75rem 2.5rem color-mix(in srgb, var(--po-primary) 6%, transparent);
    --po-shadow-lg: 0 1.5rem 4rem color-mix(in srgb, var(--po-primary) 10%, transparent);
    --po-shadow-xl: 0 2.5rem 6.5rem color-mix(in srgb, var(--po-primary) 12%, transparent);

    --po-radius-sm: .5rem;
    --po-radius-md: .75rem;
    --po-radius-lg: 1rem;
    --po-radius-xl: 1.25rem;
    --po-radius-full: 9999px;

    --po-ease-out: cubic-bezier(.16, 1, .3, 1);
    --po-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --po-float: 3.5rem;
    --po-nav-h: 4.5rem;

    --bs-body-font-family: var(--po-font);
    --bs-body-color: var(--po-gray-800);
    --bs-primary: var(--po-primary);
    --bs-link-color: var(--po-primary);
    --bs-link-hover-color: var(--po-primary-dark);
}

/* 2. Base ------------------------------------------------------------------ */
* { font-family: var(--po-font); }
html, body {
    background: var(--po-bg); color: var(--po-gray-800);
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
body { display: flex; flex-direction: column; min-height: 100vh; padding-top: var(--po-nav-h); }
body.po-has-hero { padding-top: 0; }
#po-main { flex: 1 0 auto; }
a { color: var(--po-primary); text-decoration: none; transition: color .2s; }
a:hover { color: var(--po-primary-dark); }
img { max-width: 100%; height: auto; }
::selection { background: var(--po-accent); color: #fff; }
.bi { line-height: 1; }

/* Aparición al hacer scroll */
.po-reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.po-reveal-left { opacity: 0; transform: translateX(-2rem); transition: opacity .6s var(--po-ease-out), transform .6s var(--po-ease-out); }
.po-reveal-right { opacity: 0; transform: translateX(2rem); transition: opacity .6s var(--po-ease-out), transform .6s var(--po-ease-out); }
.po-reveal-scale { opacity: 0; transform: scale(.9); transition: opacity .6s var(--po-ease-out), transform .6s var(--po-ease-spring); }
.is-visible.po-reveal, .is-visible.po-reveal-left, .is-visible.po-reveal-right, .is-visible.po-reveal-scale { opacity: 1; transform: none; }

/* Botones */
.po-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    border-radius: var(--po-radius-full); padding: .875rem 2rem;
    font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer;
    border: 1px solid transparent; white-space: nowrap;
    transition: all .2s var(--po-ease-spring);
}
.po-btn--primary {
    background: linear-gradient(135deg, var(--po-accent), var(--po-accent-dark)); color: #fff;
    box-shadow: 0 .5rem 2rem var(--po-accent-30);
}
.po-btn--primary:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 .75rem 2.5rem color-mix(in srgb, var(--po-accent) 40%, transparent); }
.po-btn--secondary { background: #fff; color: var(--po-primary); border-color: var(--po-gray-200); box-shadow: var(--po-shadow-sm); }
.po-btn--secondary:hover { background: var(--po-gray-50); color: var(--po-primary); border-color: var(--po-gray-400); transform: translateY(-2px); box-shadow: var(--po-shadow-md); }
.po-btn--outline { background: transparent; color: var(--po-primary); border: 2px solid var(--po-primary); padding: .75rem 1.75rem; font-size: .9375rem; }
.po-btn--outline:hover { background: var(--po-primary); color: #fff; transform: translateY(-2px); box-shadow: var(--po-shadow-md); }
.po-btn--whatsapp { background: #25D366; color: #fff; box-shadow: 0 .5rem 1.5rem rgba(37,211,102,.35); }
.po-btn--whatsapp:hover { background: #1EBE5A; color: #fff; transform: translateY(-3px); }
.po-btn--sm { padding: .55rem 1.1rem; font-size: .85rem; }
.po-btn--block { width: 100%; }

/* Encabezado de sección */
.po-section { padding: 3.5rem 0; }
.po-section--white { background: #fff; }
.po-section--soft { background: var(--po-bg); }
.po-head { text-align: center; margin-bottom: 3rem; }
.po-head--start { text-align: left; }
.po-tag {
    display: inline-flex; align-items: center; gap: .5rem; padding: .375rem 1rem;
    border-radius: var(--po-radius-full); background: var(--po-primary-06); color: var(--po-primary);
    font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 1rem;
}
.po-title {
    font-size: clamp(1.75rem, 3.5vw, 2.75rem); font-weight: 800; color: var(--po-gray-900);
    letter-spacing: -.02em; line-height: 1.15; margin-bottom: 1rem;
}
.po-title .po-accent-text { color: var(--po-accent); }
.po-sub { font-size: clamp(.9375rem, 1.2vw, 1.125rem); color: var(--po-gray-600); max-width: 40rem; margin: 0 auto; line-height: 1.7; }
.po-head--start .po-sub { margin: 0; }

/* 3. Barra de navegación (fija, azul marino) ------------------------------- */
.po-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
    background: color-mix(in srgb, var(--po-primary) 97%, transparent);
    border-bottom: 1px solid rgba(255,255,255,.08);
    transition: background .4s var(--po-ease-out), box-shadow .4s var(--po-ease-out);
}
.po-nav.is-scrolled {
    background: color-mix(in srgb, var(--po-primary-dark) 98%, transparent);
    box-shadow: 0 .25rem 2rem rgba(0,0,0,.2);
}
.po-nav__inner { display: flex; align-items: center; gap: 1.5rem; height: var(--po-nav-h); transition: height .4s var(--po-ease-out); }
.po-nav.is-scrolled .po-nav__inner { height: calc(var(--po-nav-h) - .75rem); }
.po-brand { display: flex; align-items: center; flex-shrink: 0; }
.po-brand img { height: 3rem; width: auto; transition: transform .2s var(--po-ease-spring), height .4s var(--po-ease-out); }
.po-brand img.is-dark { filter: brightness(0) invert(1); }
.po-brand:hover img { transform: scale(1.05); }
.po-brand__text { color: #fff; font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; }
.po-nav.is-scrolled .po-brand img { height: 2.6rem; }

.po-menu { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0 auto; padding: 0; height: 100%; }
.po-menu > li { display: flex; align-items: center; height: 100%; }
.po-menu > li:not(.has-mega) { position: relative; }
.po-link {
    position: relative; display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem 1rem; border: 0; border-radius: .5rem; background: none;
    color: rgba(255,255,255,.85); font-size: .9375rem; font-weight: 500; cursor: pointer; white-space: nowrap;
    transition: all .2s var(--po-ease-out);
}
.po-link::after {
    content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; border-radius: 1px;
    background: var(--po-accent); transform: translateX(-50%); transition: width .4s var(--po-ease-out);
}
.po-link:hover, .po-link.is-active, .po-link[aria-expanded="true"] { color: #fff; background: rgba(255,255,255,.08); }
.po-link:hover::after, .po-link.is-active::after, .po-link[aria-expanded="true"]::after { width: 60%; }
.po-chevron { font-size: .65rem; opacity: .7; transition: transform .25s var(--po-ease-out); }
.po-link[aria-expanded="true"] .po-chevron { transform: rotate(180deg); }

.po-actions { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.po-icon-btn {
    width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.06); color: #fff; font-size: 1.05rem;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    transition: all .2s var(--po-ease-out); touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.po-icon-btn:hover, .po-icon-btn[aria-expanded="true"] { background: rgba(255,255,255,.16); color: #fff; }
.po-cta {
    display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1.5rem; border-radius: var(--po-radius-full);
    background: var(--po-accent); color: #fff !important; font-size: .875rem; font-weight: 600; white-space: nowrap;
    box-shadow: 0 .25rem 1rem var(--po-accent-30); transition: all .2s var(--po-ease-spring);
}
.po-cta:hover { background: var(--po-accent-dark); transform: translateY(-2px); box-shadow: 0 .5rem 1.5rem color-mix(in srgb, var(--po-accent) 40%, transparent); }
.po-burger { display: none; }

/* Desplegable simple */
.po-drop {
    position: absolute; top: calc(100% - .5rem); left: 0; min-width: 16rem; list-style: none; margin: 0; padding: .5rem;
    background: #fff; border-radius: var(--po-radius-lg); border: 1px solid var(--po-gray-100); box-shadow: var(--po-shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(-.5rem); transition: all .25s var(--po-ease-out);
}
.po-drop.is-open { opacity: 1; visibility: visible; transform: none; }
.po-drop a { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border-radius: .5rem; color: var(--po-gray-800); font-size: .9rem; font-weight: 500; }
.po-drop a:hover { background: var(--po-gray-50); color: var(--po-primary); }

/* Megamenú a 100% de ancho */
.po-mega {
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-top: 3px solid var(--po-accent);
    box-shadow: 0 2rem 4rem rgba(16,24,40,.18);
    opacity: 0; visibility: hidden; transform: translateY(-.75rem);
    transition: opacity .3s var(--po-ease-out), transform .3s var(--po-ease-out), visibility .3s;
    max-height: calc(100vh - var(--po-nav-h)); overflow-y: auto;
}
.po-mega.is-open { opacity: 1; visibility: visible; transform: none; }
.po-mega__inner { display: flex; min-height: 17rem; }
.po-mega--media-left .po-mega__media { order: -1; }
.po-mega__body { flex: 1; min-width: 0; padding: 2rem 1.75rem; }
.po-mega__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.po-mega__head h3 { font-size: 1.1rem; font-weight: 800; color: var(--po-gray-900); margin: 0; }
.po-mega__head p { margin: .15rem 0 0; font-size: .85rem; color: var(--po-gray-600); }
.po-mega__grid { display: grid; gap: 1.5rem 1.75rem; grid-template-columns: repeat(var(--mega-cols, 4), minmax(0, 1fr)); }
.po-mega__col-title {
    display: flex; align-items: center; gap: .6rem; padding-bottom: .6rem; margin-bottom: .5rem;
    border-bottom: 1px solid var(--po-gray-100); font-weight: 700; font-size: .9rem; color: var(--po-gray-900); line-height: 1.3;
}
.po-mega__col-title:hover { color: var(--po-primary); }
.po-mega__ic {
    width: 2rem; height: 2rem; border-radius: var(--po-radius-sm); flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--po-primary); color: #fff; font-size: .9rem; transition: all .2s var(--po-ease-spring);
}
.po-mega__col-title:hover .po-mega__ic { background: #fff; color: var(--po-primary); box-shadow: inset 0 0 0 1px var(--po-primary); }
.po-mega__col-title small { margin-left: auto; font-weight: 700; font-size: .72rem; color: var(--po-gray-400); }
.po-mega__links { list-style: none; margin: 0; padding: 0; }
.po-mega__links a {
    display: block; padding: .35rem 0; font-size: .875rem; color: var(--po-gray-600);
    transition: color .2s, padding .2s var(--po-ease-out);
}
.po-mega__links a:hover { color: var(--po-accent-dark); padding-left: .4rem; }
.po-mega__more { display: inline-flex; align-items: center; gap: .35rem; margin-top: .4rem; font-size: .8rem; font-weight: 700; color: var(--po-primary); }
.po-mega__item { display: flex; gap: .8rem; padding: .7rem; border-radius: var(--po-radius-md); background: var(--po-gray-50); transition: all .3s var(--po-ease-out); }
.po-mega__item:hover { background: #fff; box-shadow: var(--po-shadow-md); transform: translateX(.3rem); }
.po-mega__item strong { display: block; font-size: .9rem; color: var(--po-gray-900); }
.po-mega__item em { display: block; font-style: normal; font-size: .8rem; color: var(--po-gray-600); margin-top: .15rem; }
.po-mega__media {
    position: relative; flex: 0 0 20rem; overflow: hidden; isolation: isolate; color: #fff;
    background: linear-gradient(135deg, var(--po-primary-dark), var(--po-primary));
    display: flex; flex-direction: column; justify-content: flex-end; padding: 1.75rem;
}
.po-mega__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; opacity: var(--mega-img-opacity, 1); transition: transform 6s ease; }
.po-mega.is-open .po-mega__media img { transform: scale(1.06); }
.po-mega__media.has-text::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(16,24,40,.85) 0%, rgba(16,24,40,.1) 65%, transparent); }
.po-mega__media h4 { color: #fff; font-size: 1.2rem; font-weight: 800; margin: 0 0 .4rem; }
.po-mega__media p { color: rgba(255,255,255,.85); font-size: .85rem; line-height: 1.55; margin: 0 0 1rem; }
.po-mega__footer {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem;
    margin-top: 1.5rem; padding-top: 1rem; border-top: 1px dashed var(--po-gray-100); font-size: .85rem; color: var(--po-gray-600);
}
.po-backdrop { position: fixed; inset: 0; z-index: 1029; background: rgba(16,24,40,.35); opacity: 0; visibility: hidden; transition: all .3s; }
.po-backdrop.is-visible { opacity: 1; visibility: visible; }

/* Buscador */
.po-search { position: absolute; left: 0; right: 0; top: 100%; background: #fff; box-shadow: var(--po-shadow-lg); padding: 1.25rem 0; border-top: 3px solid var(--po-accent); opacity: 0; visibility: hidden; transform: translateY(-.5rem); transition: all .25s var(--po-ease-out); }
.po-search.is-open { opacity: 1; visibility: visible; transform: none; }
.po-search form { display: flex; gap: .6rem; max-width: 46rem; margin: 0 auto; }
.po-search input { flex: 1; border: 1px solid var(--po-gray-200); border-radius: var(--po-radius-full); padding: .8rem 1.25rem; font-size: 1rem; outline: none; transition: border-color .2s, box-shadow .2s; }
.po-search input:focus { border-color: var(--po-primary); box-shadow: 0 0 0 .25rem var(--po-primary-08); }

/* Menú móvil (offcanvas + list-group) */
.po-offcanvas { --bs-offcanvas-width: min(22rem, 88vw); }
.po-offcanvas .offcanvas-header { background: var(--po-primary); }
.po-offcanvas .offcanvas-header .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.po-offcanvas .po-brand img { height: 2.6rem; }
.po-mlist {
    --bs-list-group-border-color: var(--po-gray-100);
    --bs-list-group-color: var(--po-gray-800);
    --bs-list-group-action-color: var(--po-gray-800);
    --bs-list-group-action-hover-color: var(--po-primary);
    --bs-list-group-action-hover-bg: var(--po-gray-50);
    --bs-list-group-action-active-bg: var(--po-gray-50);
    --bs-list-group-active-bg: var(--po-primary);
    --bs-list-group-active-border-color: var(--po-primary);
    --bs-list-group-item-padding-y: .8rem;
    --bs-list-group-item-padding-x: .75rem;
    margin: 0 -.75rem;
}
.po-mlist > .list-group-item { font-weight: 600; }
.po-mlist .list-group-item.active { border-radius: .5rem; }
.po-mlist > button[aria-expanded="true"] { color: var(--po-primary); background: var(--po-gray-50); }
.po-mlist > button .po-chevron { font-size: .75rem; }
.po-mlist > button[aria-expanded="true"] .po-chevron { transform: rotate(180deg); }
.po-mlist__sub { margin: .25rem 0 .5rem .9rem; padding-left: .25rem; border-left: 2px solid var(--po-accent); }
.po-mlist__sub .list-group-item { font-weight: 500; font-size: .9rem; border: 0; border-radius: .5rem; --bs-list-group-item-padding-y: .55rem; }
.po-searchbox { position: relative; }
.po-searchbox input { width: 100%; border: 1px solid var(--po-gray-200); border-radius: var(--po-radius-full); padding: .7rem 3rem .7rem 1.1rem; font-size: 16px; outline: none; }
.po-searchbox input:focus { border-color: var(--po-primary); box-shadow: 0 0 0 .2rem var(--po-primary-08); }
.po-searchbox button { position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); width: 2.3rem; height: 2.3rem; border: 0; border-radius: 50%; background: var(--po-accent); color: #fff; }

/* 4. HERO ------------------------------------------------------------------ */
.po-hero {
    position: relative; overflow: hidden; display: flex; flex-direction: column;
    padding-top: calc(var(--po-nav-h) + 3rem);
    background: radial-gradient(circle at 10% 50%, #F4F6F9 0%, #E2E8F0 100%);
}
.po-hero--full { min-height: 100vh; }
.po-hero__glow { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .6; z-index: 0; animation: poFloatGlow 15s ease-in-out infinite alternate; pointer-events: none; }
.po-hero__glow--1 { width: 500px; height: 500px; top: -100px; left: -100px; background: color-mix(in srgb, var(--po-primary) 15%, transparent); }
.po-hero__glow--2 { width: 400px; height: 400px; bottom: 60px; right: -50px; background: color-mix(in srgb, var(--po-accent) 15%, transparent); animation-delay: -5s; }
.po-hero__glow--3 { width: 300px; height: 300px; top: 40%; left: 50%; background: color-mix(in srgb, var(--po-primary-light) 10%, transparent); animation-delay: -10s; }
@keyframes poFloatGlow {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, 50px) scale(1.1); }
    100% { transform: translate(-30px, 20px) scale(.9); }
}
.po-hero__content { position: relative; z-index: 2; flex: 1; display: flex; align-items: center; padding-bottom: 2.5rem; }
.po-hero .carousel, .po-hero .carousel-inner { width: 100%; }
.po-hero .carousel-item { transition: opacity .7s ease-in-out; }
.po-hero__badge {
    display: inline-flex; align-items: center; gap: .6rem; padding: .5rem 1rem; margin-bottom: 1.5rem;
    border-radius: 50px; background: rgba(255,255,255,.85); border: 1px solid var(--po-primary-08);
    box-shadow: 0 4px 15px rgba(0,0,0,.03); backdrop-filter: blur(10px);
    font-size: .8rem; font-weight: 700; color: var(--po-primary-dark); letter-spacing: .05em; text-transform: uppercase;
}
.po-hero__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--po-accent); box-shadow: 0 0 0 0 var(--po-accent-30); animation: poPulseDot 2s infinite cubic-bezier(.66, 0, 0, 1); }
@keyframes poPulseDot { to { box-shadow: 0 0 0 10px transparent; } }
.po-hero h1, .po-hero .po-hero__title {
    font-size: clamp(2.3rem, 4.6vw, 4rem); font-weight: 800; line-height: 1.12; letter-spacing: -.03em;
    color: var(--po-gray-900); margin-bottom: 1.25rem;
}
.po-hero__accent {
    display: block;
    background: linear-gradient(135deg, var(--po-accent), #FF9F43);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.po-hero__desc { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--po-gray-600); line-height: 1.7; font-weight: 500; max-width: 34rem; margin-bottom: 2rem; }
.po-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.75rem; }
.po-hero__features { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; list-style: none; padding: 0; margin: 0; }
.po-hero__features li { display: flex; align-items: center; gap: .45rem; font-size: .9rem; font-weight: 600; color: var(--po-gray-800); }
.po-hero__features .bi { color: #10B981; }
.po-hero__visual { position: relative; z-index: 2; }
.po-hero__blob {
    position: absolute; inset: 5% -5% 5% 5%; z-index: -1;
    background: linear-gradient(135deg, var(--po-primary-08), color-mix(in srgb, var(--po-accent) 6%, transparent));
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    animation: poMorph 10s ease-in-out infinite alternate;
}
@keyframes poMorph {
    0% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; transform: rotate(0); }
    50% { border-radius: 50% 50% 30% 70% / 50% 30% 70% 50%; transform: rotate(5deg); }
    100% { border-radius: 70% 30% 50% 50% / 70% 70% 30% 30%; transform: rotate(-5deg); }
}
.po-hero__img {
    width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fff;
    border-radius: var(--po-radius-xl); border: 6px solid #fff; padding: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,.15);
    animation: poFloatImg 6s ease-in-out infinite;
}
@keyframes poFloatImg { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
.po-hero__glass {
    position: absolute; bottom: 1.5rem; left: -2rem; z-index: 5;
    display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.4rem;
    background: rgba(255,255,255,.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.5); border-radius: 16px; box-shadow: 0 20px 40px -10px rgba(0,0,0,.12);
    animation: poFloatImg 5s ease-in-out infinite 1s;
}
.po-hero__glass-ic {
    width: 3rem; height: 3rem; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--po-primary), var(--po-primary-dark)); color: #fff; font-size: 1.25rem;
    box-shadow: 0 8px 16px color-mix(in srgb, var(--po-primary) 30%, transparent);
}
.po-hero__glass strong { display: block; font-size: 1.1rem; font-weight: 800; color: var(--po-gray-900); line-height: 1.1; }
.po-hero__glass span { font-size: .8rem; font-weight: 600; color: var(--po-gray-600); }
.po-hero .carousel-indicators { position: static; margin: 0 0 1rem; justify-content: flex-start; }
.po-hero .carousel-indicators [data-bs-target] { width: 10px; height: 10px; border-radius: 50%; border: 0; background: var(--po-primary); opacity: .3; }
.po-hero .carousel-indicators .active { opacity: 1; background: var(--po-accent); }

/* Olas + franja de estadísticas */
.po-waves { position: relative; z-index: 3; margin-top: auto; }
.po-waves svg { display: block; width: 100%; height: 10vh; min-height: 50px; max-height: 100px; margin-bottom: -7px; }
.po-waves use { animation: poMoveForever 25s cubic-bezier(.55, .5, .45, .5) infinite; }
.po-waves use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; }
.po-waves use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; }
@keyframes poMoveForever { 0% { transform: translate3d(-90px, 0, 0); } 100% { transform: translate3d(85px, 0, 0); } }
.po-stats { background: var(--po-primary); color: #fff; }
.po-stat { text-align: center; padding: 1rem .5rem 1.75rem; }
.po-stat + .po-stat { border-left: 1px solid rgba(255,255,255,.15); }
.po-stat__num { font-size: clamp(2rem, 4vw, 3rem); font-weight: 300; line-height: 1; color: #fff; }
.po-stat__plus { font-weight: 300; margin-left: .15rem; color: var(--po-accent-light); }
.po-stat__label { margin: .6rem 0 0; font-size: .8rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.8); }

/* 5. Secciones de portada -------------------------------------------------- */
/* Barra informativa (Configuración › Portada) */
.po-infobar { position: relative; z-index: 4; background: #fff; padding: 1.5rem 0; border-bottom: 1px solid var(--po-gray-100); }
.po-infobar__item {
    display: flex; align-items: center; gap: 1rem; height: 100%; padding: 1rem 1.25rem;
    border-radius: var(--po-radius-md); background: var(--po-gray-50); color: var(--po-gray-800);
    border: 1px solid transparent; transition: all .4s var(--po-ease-out);
}
a.po-infobar__item:hover { background: #fff; border-color: var(--po-gray-100); box-shadow: var(--po-shadow-md); transform: translateY(-3px); color: var(--po-gray-800); }
.po-infobar__ic { width: 3rem; height: 3rem; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; background: var(--po-accent); color: #fff; box-shadow: 0 .5rem 1rem var(--po-accent-30); }
.po-infobar__item strong { display: block; font-size: 1.05rem; font-weight: 700; color: var(--po-gray-900); line-height: 1.2; }
.po-infobar__item small { display: block; font-size: .875rem; color: var(--po-gray-600); margin-top: .15rem; }

/* Carrusel infinito */
.po-brands { padding: 3rem 0; background: #fff; border-top: 1px solid var(--po-gray-100); border-bottom: 1px solid var(--po-gray-100); }
.po-brands__label { text-align: center; font-size: .8125rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--po-gray-600); margin-bottom: .5rem; }
.po-marquee { position: relative; overflow: hidden; white-space: nowrap; padding: 1.75rem 0; }
.po-marquee::before, .po-marquee::after { content: ''; position: absolute; top: 0; bottom: 0; width: 8rem; z-index: 2; pointer-events: none; }
.po-marquee::before { left: 0; background: linear-gradient(to right, #fff, transparent); }
.po-marquee::after { right: 0; background: linear-gradient(to left, #fff, transparent); }
.po-marquee__track { display: inline-flex; align-items: center; min-width: 200%; justify-content: space-around; animation: poScrollLeft 45s linear infinite; }
.po-marquee__track--right { animation-name: poScrollRight; }
.po-marquee:hover .po-marquee__track { animation-play-state: paused; }
.po-marquee__item { display: inline-flex; flex-direction: column; align-items: center; gap: .5rem; margin: 0 2rem; text-decoration: none; }
.po-marquee__item img {
    width: 10rem; height: 7rem; object-fit: contain;
    filter: grayscale(100%) opacity(.6); transition: filter .4s var(--po-ease-out), transform .35s var(--po-ease-spring);
}
.po-marquee__item span { font-size: .75rem; font-weight: 600; color: var(--po-gray-400); white-space: nowrap; transition: color .3s; }
.po-marquee__item:hover img { filter: none; transform: scale(1.12); }
.po-marquee__item:hover span { color: var(--po-primary); }
@keyframes poScrollLeft { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes poScrollRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* Tarjetas de beneficio */
.po-benefit {
    position: relative; overflow: hidden; height: 100%; padding: 2rem;
    background: #fff; border: 1px solid var(--po-gray-100); border-radius: var(--po-radius-sm);
    transition: all .4s var(--po-ease-out);
}
.po-benefit::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--po-primary); transform: scaleX(0); transition: transform .4s var(--po-ease-out); }
.po-benefit:hover { transform: translateY(-.5rem); box-shadow: var(--po-shadow-lg); border-color: transparent; }
.po-benefit:hover::after { transform: scaleX(1); }
.po-benefit__ic { width: 3.5rem; height: 3.5rem; border-radius: var(--po-radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 1.25rem; transition: transform .2s var(--po-ease-spring); }
.po-benefit:hover .po-benefit__ic { transform: scale(1.1); }
.po-benefit__ic--blue { background: var(--po-primary-08); color: var(--po-primary); }
.po-benefit__ic--orange { background: var(--po-accent-10); color: var(--po-accent); }
.po-benefit h3 { font-size: 1.125rem; font-weight: 700; color: var(--po-gray-900); margin-bottom: .5rem; }
.po-benefit p { font-size: .9375rem; color: var(--po-gray-600); line-height: 1.6; margin: 0; }

/* Tarjetas de categoría */
.po-cat {
    display: flex; align-items: center; gap: 1rem; padding: 1.25rem; height: 100%;
    border-radius: var(--po-radius-md); background: var(--po-gray-50); border: 1px solid transparent;
    color: inherit; transition: all .4s var(--po-ease-out);
}
.po-cat:hover { background: #fff; border-color: var(--po-gray-100); box-shadow: var(--po-shadow-md); transform: translateX(.5rem); color: inherit; }
.po-cat__ic {
    width: 3rem; height: 3rem; border-radius: var(--po-radius-sm); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
    background: var(--po-primary); color: #fff; box-shadow: var(--po-shadow-sm); transition: all .2s var(--po-ease-spring);
}
.po-cat:hover .po-cat__ic { background: #fff; color: var(--po-primary); box-shadow: inset 0 0 0 1px var(--po-primary); }
.po-cat h3 { font-size: .9375rem; font-weight: 700; color: var(--po-gray-800); margin: 0 0 .15rem; line-height: 1.3; }
.po-cat small { font-size: .8125rem; color: var(--po-gray-600); }

/* Por qué elegirnos */
.po-why { height: 100%; padding: 2.5rem 2rem; text-align: center; background: #fff; border: 1px solid var(--po-gray-100); border-radius: var(--po-radius-xl); transition: all .4s var(--po-ease-out); }
.po-why:hover { transform: translateY(-.5rem); box-shadow: var(--po-shadow-lg); }
.po-why__num { font-size: 3.5rem; font-weight: 900; line-height: 1; letter-spacing: -.05em; color: var(--po-primary); opacity: .9; margin-bottom: .75rem; }
.po-why h3 { font-size: 1.125rem; font-weight: 700; color: var(--po-gray-900); margin-bottom: .6rem; }
.po-why p { font-size: .9375rem; color: var(--po-gray-600); line-height: 1.6; margin: 0; }

/* Pasos */
.po-step { position: relative; text-align: center; padding: 2rem 1.5rem; }
.po-step__num {
    width: 3.5rem; height: 3.5rem; margin: 0 auto 1.25rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 800; color: #fff;
    background: linear-gradient(135deg, var(--po-primary), var(--po-primary-light));
    box-shadow: 0 .5rem 1.5rem color-mix(in srgb, var(--po-primary) 20%, transparent); transition: all .3s var(--po-ease-spring);
}
.po-step:hover .po-step__num { transform: scale(1.12); background: linear-gradient(135deg, var(--po-accent), var(--po-accent-dark)); }
.po-step h3 { font-size: 1rem; font-weight: 700; color: var(--po-gray-900); margin-bottom: .5rem; }
.po-step p { font-size: .875rem; color: var(--po-gray-600); line-height: 1.6; margin: 0; }
.po-step__arrow { position: absolute; top: 3.3rem; right: -1rem; color: var(--po-gray-200); font-size: 1.25rem; display: none; }
@media (min-width: 768px) { .po-step__arrow { display: block; } }

/* FAQ */
.po-faq-item { border: 1px solid var(--po-gray-100); border-radius: var(--po-radius-md); margin-bottom: .75rem; overflow: hidden; background: #fff; transition: all .3s var(--po-ease-out); }
.po-faq-item:hover { border-color: var(--po-primary-15); }
.po-faq-item.is-open { border-color: var(--po-primary); box-shadow: var(--po-shadow-sm); }
.po-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: 1.25rem 1.5rem; border: 0; background: #fff; text-align: left; font-size: .9375rem; font-weight: 600; color: var(--po-gray-900); cursor: pointer; transition: background .2s; }
.po-faq-q:hover { background: var(--po-gray-50); }
.po-faq-q .bi { color: var(--po-primary); transition: transform .3s var(--po-ease-out); flex-shrink: 0; }
.po-faq-item.is-open .po-faq-q { color: var(--po-primary); }
.po-faq-item.is-open .po-faq-q .bi { transform: rotate(180deg); }
.po-faq-a { max-height: 0; overflow: hidden; padding: 0 1.5rem; transition: max-height .35s var(--po-ease-out), padding .35s var(--po-ease-out); }
.po-faq-item.is-open .po-faq-a { max-height: 20rem; padding: 0 1.5rem 1.25rem; }
.po-faq-a p { margin: 0; font-size: .9375rem; color: var(--po-gray-600); line-height: 1.7; }

/* CTA */
.po-cta-band { position: relative; overflow: hidden; padding: 3.5rem 0; background: linear-gradient(135deg, var(--po-primary-dark) 0%, var(--po-primary) 100%); }
.po-cta-band::before { content: ''; position: absolute; top: -50%; right: -20%; width: 40rem; height: 40rem; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--po-accent) 12%, transparent) 0%, transparent 70%); }
.po-cta-band__content { position: relative; z-index: 1; text-align: center; }
.po-cta-band h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; color: #fff; letter-spacing: -.02em; margin-bottom: 1rem; }
.po-cta-band p { font-size: 1.125rem; color: rgba(255,255,255,.75); max-width: 36rem; margin: 0 auto 2rem; line-height: 1.7; }

/* 6. Productos ------------------------------------------------------------- */
.po-products { display: grid; gap: 1.5rem; grid-template-columns: repeat(var(--po-cols, 4), minmax(0, 1fr)); }
.po-product {
    position: relative; display: flex; flex-direction: column; overflow: hidden;
    background: #fff; border: 1px solid var(--po-gray-100); border-radius: var(--po-radius-lg);
    transition: all .4s var(--po-ease-out);
}
.po-product::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--po-accent); transform: scaleX(0); transition: transform .4s var(--po-ease-out); }
.po-product:hover { transform: translateY(-.4rem); box-shadow: var(--po-shadow-lg); border-color: transparent; }
.po-product:hover::after { transform: scaleX(1); }
.po-product__media { display: block; aspect-ratio: 1 / 1; background: var(--po-gray-50); overflow: hidden; }
.po-product__media img { width: 100%; height: 100%; object-fit: contain; padding: 1.25rem; transition: transform .6s var(--po-ease-out); }
.po-product:hover .po-product__media img { transform: scale(1.07); }
.po-product__badge { position: absolute; top: .9rem; left: .9rem; z-index: 1; padding: .25rem .7rem; border-radius: var(--po-radius-full); background: var(--po-accent); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.po-product__body { display: flex; flex-direction: column; flex: 1; padding: 1.1rem 1.2rem 1.3rem; }
.po-product__cat { display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start; max-width: 100%; font-size: .72rem; font-weight: 500; color: var(--po-gray-400); margin-bottom: .4rem; }
.po-product__cat span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-product__cat:hover { color: var(--po-primary); }
.po-product__title { font-size: 1rem; font-weight: 700; line-height: 1.35; margin: 0 0 .45rem; }
.po-product__title a { color: var(--po-gray-900); }
.po-product__title a:hover { color: var(--po-primary); }
.po-product__excerpt { font-size: .85rem; line-height: 1.55; color: var(--po-gray-600); margin: 0 0 1rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.po-product__foot { margin-top: auto; display: flex; gap: .5rem; }
.po-product__foot .po-btn { flex: 1; padding: .6rem .9rem; font-size: .85rem; }
.po-product__foot .po-btn--whatsapp { flex: 0 0 2.6rem; padding: 0; font-size: 1.1rem; }

/* 7. Páginas internas ------------------------------------------------------ */
.po-page-head { position: relative; overflow: hidden; padding: 3rem 0 2.75rem; background: linear-gradient(135deg, var(--po-primary-dark) 0%, var(--po-primary) 100%); color: #fff; }
.po-page-head::before { content: ''; position: absolute; top: -60%; right: -10%; width: 34rem; height: 34rem; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--po-accent) 14%, transparent), transparent 70%); }
.po-page-head .container { position: relative; }
.po-page-head h1 { color: #fff; font-size: clamp(1.75rem, 3.5vw, 2.6rem); font-weight: 800; letter-spacing: -.02em; margin: .75rem 0 .5rem; }
.po-page-head p { color: rgba(255,255,255,.78); margin: 0; max-width: 42rem; font-size: 1.05rem; }
.po-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; list-style: none; padding: 0; margin: 0; font-size: .82rem; }
.po-crumbs li { color: rgba(255,255,255,.7); display: flex; align-items: center; gap: .5rem; }
.po-crumbs li + li::before { content: '/'; color: var(--po-accent-light); }
.po-crumbs a { color: rgba(255,255,255,.9); }
.po-crumbs a:hover { color: #fff; }

.po-layout { display: grid; grid-template-columns: 18rem 1fr; gap: 2rem; align-items: start; }
.po-side { position: sticky; top: calc(var(--po-nav-h) + 1rem); display: grid; gap: 1.25rem; }
.po-box { background: #fff; border: 1px solid var(--po-gray-100); border-radius: var(--po-radius-lg); padding: 1.25rem; }
.po-box__title { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--po-gray-600); margin-bottom: .9rem; padding-bottom: .6rem; border-bottom: 2px solid var(--po-accent); display: inline-block; }
.po-catlist { list-style: none; margin: 0; padding: 0; }
.po-catlist a { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .6rem .7rem; border-radius: .5rem; font-size: .9rem; font-weight: 500; color: var(--po-gray-800); }
.po-catlist a:hover { background: var(--po-gray-50); color: var(--po-primary); }
.po-catlist a.is-active { background: var(--po-primary); color: #fff; font-weight: 600; }
.po-catlist a span { font-size: .72rem; font-weight: 700; padding: .1rem .55rem; border-radius: var(--po-radius-full); background: var(--po-gray-50); color: var(--po-gray-600); }
.po-catlist a.is-active span { background: rgba(255,255,255,.2); color: #fff; }
.po-help { text-align: center; background: linear-gradient(135deg, var(--po-primary-dark), var(--po-primary)); color: #fff; border: 0; }
.po-help h3 { color: #fff; font-size: 1.05rem; font-weight: 700; margin: .6rem 0 .3rem; }
.po-help p { color: rgba(255,255,255,.75); font-size: .85rem; margin-bottom: 1rem; }
.po-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; font-size: .9rem; color: var(--po-gray-600); }
.po-empty { text-align: center; padding: 3.5rem 1.5rem; border: 2px dashed var(--po-gray-200); border-radius: var(--po-radius-lg); color: var(--po-gray-600); background: #fff; }
.po-empty .bi { font-size: 2.5rem; color: var(--po-gray-200); }
.pagination { --bs-pagination-color: var(--po-gray-800); --bs-pagination-active-bg: var(--po-primary); --bs-pagination-active-border-color: var(--po-primary); gap: .4rem; }
.pagination .page-link { border-radius: 50% !important; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; }

.po-prose { font-size: 1rem; line-height: 1.8; color: var(--po-gray-800); }
.po-prose p { margin-bottom: 1.1em; }
.po-prose img { border-radius: var(--po-radius-md); }
.po-prose a { text-decoration: underline; text-underline-offset: 3px; }

/* Detalle de producto */
.po-pdetail { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: start; }
.po-gallery__main { position: relative; aspect-ratio: 1 / 1; background: #fff; border: 1px solid var(--po-gray-100); border-radius: var(--po-radius-xl); overflow: hidden; box-shadow: var(--po-shadow-md); }
.po-gallery__main img { width: 100%; height: 100%; object-fit: contain; padding: 2rem; cursor: zoom-in; }
.po-gallery__hint { position: absolute; right: 1rem; bottom: 1rem; padding: .35rem .8rem; border-radius: var(--po-radius-full); background: rgba(255,255,255,.95); box-shadow: var(--po-shadow-sm); font-size: .75rem; font-weight: 600; color: var(--po-gray-600); pointer-events: none; }
.po-gallery__thumbs { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .75rem; }
.po-gallery__thumbs img { width: 5rem; height: 5rem; object-fit: contain; padding: .4rem; background: #fff; border: 1px solid var(--po-gray-100); border-radius: var(--po-radius-sm); cursor: zoom-in; }
.po-pinfo__cat { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .9rem; border-radius: var(--po-radius-full); background: var(--po-primary-06); color: var(--po-primary); font-size: .78rem; font-weight: 600; margin-bottom: .9rem; }
.po-pinfo h2 { font-size: clamp(1.75rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; color: var(--po-gray-900); margin-bottom: 1rem; }
.po-pinfo__summary { font-size: 1rem; line-height: 1.75; color: var(--po-gray-600); }
.po-pinfo__summary p { margin-bottom: .9em; }
.po-pinfo__summary img { display: block; max-width: 100%; height: auto; border-radius: 6px; }
.po-pinfo__cta { margin: 1.5rem 0; }
.po-pinfo__perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.po-pinfo__perks div { display: flex; align-items: center; gap: .5rem; padding: .8rem; border-radius: var(--po-radius-md); background: var(--po-gray-50); font-size: .8rem; font-weight: 600; color: var(--po-gray-800); }
.po-pinfo__perks .bi { color: var(--po-accent); font-size: 1.1rem; }

/* Ficha técnica */
.po-specs { margin-top: 3rem; background: #fff; border: 1px solid var(--po-gray-100); border-radius: var(--po-radius-xl); overflow: hidden; box-shadow: var(--po-shadow-md); }
.po-specs__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; padding: 1.25rem 2rem; background: linear-gradient(135deg, var(--po-primary-dark), var(--po-primary)); color: #fff; }
.po-specs__head h2 { display: flex; align-items: center; gap: .6rem; margin: 0; font-size: 1.2rem; font-weight: 800; color: #fff; }
.po-specs__head h2 .bi { color: var(--po-accent-light); }
.po-specs__head span { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.po-specs__body { padding: 1.75rem 2rem; }
.po-sheet { display: grid; gap: 1.5rem; }
.po-sheet__intro { margin: 0; line-height: 1.8; color: var(--po-gray-800); }
.po-sheet__specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 0; }
.po-sheet__row { display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem; border-radius: var(--po-radius-md); background: var(--po-gray-50); border: 1px solid transparent; transition: all .3s var(--po-ease-out); }
.po-sheet__row:hover { background: #fff; border-color: var(--po-gray-100); box-shadow: var(--po-shadow-md); }
.po-sheet__ic { width: 2.6rem; height: 2.6rem; border-radius: var(--po-radius-sm); flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--po-primary); color: #fff; font-size: 1.05rem; }
.po-sheet__row:nth-child(4n+2) .po-sheet__ic, .po-sheet__row:nth-child(4n+3) .po-sheet__ic { background: var(--po-accent); }
.po-sheet__row dt { margin: 0; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--po-gray-600); }
.po-sheet__row dd { margin: .1rem 0 0; font-size: 1.05rem; font-weight: 800; color: var(--po-gray-900); line-height: 1.35; }
.po-sheet__features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.po-sheet__feature { position: relative; padding: 1.25rem 1.25rem 1.25rem 1.5rem; background: #fff; border: 1px solid var(--po-gray-100); border-radius: var(--po-radius-md); overflow: hidden; transition: all .3s var(--po-ease-out); }
.po-sheet__feature::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(var(--po-accent), var(--po-accent-dark)); }
.po-sheet__feature:hover { box-shadow: var(--po-shadow-md); transform: translateY(-2px); }
.po-sheet__feature strong { display: block; font-size: .82rem; font-weight: 800; letter-spacing: .06em; color: var(--po-primary); margin-bottom: .35rem; }
.po-sheet__feature p { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--po-gray-600); }
.po-sheet__bullets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1.5rem; }
.po-sheet__bullets li { display: flex; gap: .6rem; font-weight: 600; font-size: .95rem; color: var(--po-gray-800); }
.po-sheet__bullets .bi { color: #10B981; margin-top: .15rem; }

/* Contacto */
.po-contact { display: grid; grid-template-columns: .9fr 1.1fr; gap: 2rem; align-items: start; }
.po-info { display: flex; gap: 1rem; padding: 1.25rem; margin-bottom: 1rem; background: #fff; border: 1px solid var(--po-gray-100); border-radius: var(--po-radius-lg); transition: all .3s var(--po-ease-out); }
.po-info:hover { box-shadow: var(--po-shadow-md); transform: translateX(.3rem); }
.po-info__ic { width: 3rem; height: 3rem; border-radius: var(--po-radius-sm); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; background: var(--po-primary); color: #fff; }
.po-info h3 { font-size: .95rem; font-weight: 700; color: var(--po-gray-900); margin-bottom: .3rem; }
.po-info p { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--po-gray-600); }
.po-form { background: #fff; border: 1px solid var(--po-gray-100); border-radius: var(--po-radius-xl); padding: 2rem; box-shadow: var(--po-shadow-md); }
.po-form .form-control { border-radius: var(--po-radius-sm); border-color: var(--po-gray-200); padding: .75rem 1rem; }
.po-form .form-control:focus { border-color: var(--po-primary); box-shadow: 0 0 0 .25rem var(--po-primary-08); }
.po-form .form-label { font-weight: 600; font-size: .85rem; color: var(--po-gray-800); }
.po-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.po-alert { display: flex; gap: .6rem; align-items: center; padding: .9rem 1.1rem; margin-bottom: 1.25rem; border-radius: var(--po-radius-md); background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; font-weight: 600; font-size: .92rem; }
.po-map { margin-top: 2rem; border-radius: var(--po-radius-xl); overflow: hidden; border: 1px solid var(--po-gray-100); }
.po-map iframe { display: block; width: 100%; height: 26rem; border: 0; }

/* 8. Pie de página --------------------------------------------------------- */
.po-footer { position: relative; flex-shrink: 0; background: var(--po-footer); color: #fff; padding: 3.5rem 0 1rem; }
.po-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--po-primary); }
.po-footer__logo img { height: 3.25rem; width: auto; }
.po-footer__logo img.is-dark { filter: brightness(0) invert(1); }
.po-footer__desc { font-size: .8125rem; color: rgba(255,255,255,.7); line-height: 1.7; max-width: 21rem; margin: 1rem 0 1.25rem; }
.po-footer h5 { position: relative; color: #fff; font-weight: 700; font-size: .875rem; margin-bottom: 1rem; padding-bottom: .55rem; }
.po-footer h5::after { content: ''; position: absolute; left: 0; bottom: 0; width: 2rem; height: 2px; border-radius: 1px; background: var(--po-accent); }
.po-footer__link { display: block; margin-bottom: .45rem; font-size: .8125rem; color: rgba(255,255,255,.7); transition: all .2s var(--po-ease-out); }
.po-footer__link:hover { color: var(--po-accent-light); padding-left: .5rem; }
.po-footer__contact { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .7rem; font-size: .8125rem; color: rgba(255,255,255,.7); line-height: 1.55; }
.po-footer__contact .bi { color: var(--po-accent); font-size: 1rem; margin-top: .1rem; }
.po-footer__contact a { color: rgba(255,255,255,.8); }
.po-footer__contact a:hover { color: #fff; }
.po-social { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; margin-right: .4rem; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; font-size: .9rem; transition: all .2s var(--po-ease-spring); }
.po-social:hover { background: var(--po-accent); color: #fff; transform: translateY(-2px); box-shadow: 0 .5rem 1.5rem var(--po-accent-30); }
.po-footer__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.08); font-size: .75rem; color: rgba(255,255,255,.55); }
.po-footer__bottom p { margin: 0; }

/* 9. Acciones flotantes ---------------------------------------------------- */
.po-float { position: fixed; bottom: 2rem; z-index: 1040; display: flex; flex-direction: column; gap: 1rem; pointer-events: none; }
.po-float--right { right: 2rem; align-items: flex-end; }
.po-float--left { left: 2rem; align-items: flex-start; }
.po-float__item { display: flex; align-items: center; gap: 1rem; pointer-events: auto; }
.po-float--right .po-float__item { flex-direction: row-reverse; }
.po-wa {
    position: relative; flex-shrink: 0; width: var(--po-float); height: var(--po-float); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; background: #25D366; color: #fff; font-size: 1.6rem;
    box-shadow: 0 .5rem 1.5rem rgba(37,211,102,.4); transition: all .3s var(--po-ease-spring);
}
.po-wa::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25D366; animation: poWaPulse 2s infinite; }
@keyframes poWaPulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }
.po-wa:hover { color: #fff; transform: translateY(-.25rem) scale(1.05); box-shadow: 0 .75rem 2rem rgba(37,211,102,.6); }
.po-client {
    position: relative; overflow: hidden; display: flex; align-items: center; gap: .5rem; height: var(--po-float); padding: 0 1.5rem;
    border-radius: 100px; background: linear-gradient(135deg, var(--po-accent), var(--po-accent-dark)); color: #fff;
    font-weight: 700; font-size: 1rem; box-shadow: 0 .5rem 1.5rem color-mix(in srgb, var(--po-accent) 40%, transparent);
    transition: all .3s var(--po-ease-spring);
}
.po-client::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(to right, transparent, rgba(255,255,255,.3), transparent); transform: rotate(45deg); animation: poShine 3s infinite; }
@keyframes poShine { 0% { transform: translateX(-100%) rotate(45deg); } 100% { transform: translateX(100%) rotate(45deg); } }
.po-client:hover { color: #fff; transform: translateY(-.25rem) scale(1.04); }
.po-bubble {
    position: relative; padding: .85rem 1.25rem; border-radius: 1rem; background: #fff; color: var(--po-gray-900);
    font-size: .9375rem; font-weight: 600; white-space: nowrap; box-shadow: 0 .5rem 2rem color-mix(in srgb, var(--po-primary) 15%, transparent);
    opacity: 0; visibility: hidden; transform: scale(.9); transition: all .4s var(--po-ease-spring); pointer-events: none;
}
.po-bubble.is-visible { opacity: 1; visibility: visible; transform: none; }
.po-float--right .po-bubble::after { content: ''; position: absolute; right: -.4rem; top: 50%; transform: translateY(-50%); border-width: .5rem 0 .5rem .6rem; border-style: solid; border-color: transparent transparent transparent #fff; }
.po-float--left .po-bubble::after { content: ''; position: absolute; left: -.4rem; top: 50%; transform: translateY(-50%); border-width: .5rem .6rem .5rem 0; border-style: solid; border-color: transparent #fff transparent transparent; }
.po-top {
    position: fixed; bottom: 2rem; z-index: 1039; width: var(--po-float); height: var(--po-float); border-radius: 50%; border: 0;
    display: flex; align-items: center; justify-content: center; background: var(--po-primary); color: #fff; font-size: 1.4rem;
    box-shadow: 0 .5rem 1.5rem color-mix(in srgb, var(--po-primary) 30%, transparent);
    opacity: 0; visibility: hidden; transform: scale(.6) translateY(20px); transition: all .4s var(--po-ease-spring);
}
.po-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.po-top:hover { background: var(--po-primary-dark); transform: translateY(-5px); }
.po-top--right { right: 2rem; }
.po-top--left { left: 2rem; }

/* lightGallery */
.lg-backdrop { background: rgba(16,24,40,.95); }

/* 10. Responsive ----------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .po-products { --po-cols: 3 !important; }
    .po-mega__media { flex-basis: 16rem; }
}
@media (max-width: 991.98px) {
    :root { --po-nav-h: 4rem; }
    .po-menu, .po-cta { display: none; }
    .po-burger { display: inline-flex; }
    .po-nav__inner { justify-content: space-between; }
    .po-brand img { height: 2.4rem; }
    .po-hero { padding-top: calc(var(--po-nav-h) + 2rem); text-align: center; }
    .po-hero__desc { margin-left: auto; margin-right: auto; }
    .po-hero__actions, .po-hero__features, .po-hero .carousel-indicators { justify-content: center; }
    .po-hero__visual { margin-top: 2.5rem; max-width: 30rem; margin-left: auto; margin-right: auto; }
    .po-hero__glass { left: 50%; transform: translateX(-50%); bottom: -1.25rem; animation: none; white-space: nowrap; }
    .po-stat:nth-child(odd) { border-left: 0; }
    .po-stat:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.15); }
    .po-layout, .po-pdetail, .po-contact { grid-template-columns: 1fr; }
    .po-side { position: static; }
    .po-products { --po-cols: 2 !important; }
    .po-section { padding: 2.5rem 0; }
    .po-head { margin-bottom: 2rem; }
    .po-head--start { text-align: center; }
    .po-head--start .po-sub { margin: 0 auto; }
}
@media (max-width: 767.98px) {
    .po-sheet__specs, .po-sheet__features, .po-sheet__bullets { grid-template-columns: 1fr; }
    .po-specs__head, .po-specs__body { padding-left: 1.25rem; padding-right: 1.25rem; }
    .po-marquee__item img { width: 7rem; height: 5rem; }
    .po-marquee__item { margin: 0 1.1rem; }
    .po-marquee::before, .po-marquee::after { width: 3rem; }
    .po-footer { padding-top: 2.5rem; }
    .po-footer__bottom { flex-direction: column; text-align: center; }
    .po-bubble { display: none; }
    .po-float { bottom: 1.25rem; }
    .po-float--right { right: 1.25rem; } .po-float--left { left: 1.25rem; }
    .po-top { bottom: 1.25rem; width: 3rem; height: 3rem; font-size: 1.2rem; }
    .po-top--right { right: 1.25rem; } .po-top--left { left: 1.25rem; }
    .po-client { height: 3rem; padding: 0 1rem; font-size: .85rem; }
    .po-wa { width: 3rem; height: 3rem; font-size: 1.4rem; }
}
@media (max-width: 575.98px) {
    .po-products { --po-cols: 1 !important; }
    .po-pinfo__perks { grid-template-columns: 1fr; }
    .po-hero h1, .po-hero .po-hero__title { font-size: 2rem; }
    .po-btn { padding: .75rem 1.4rem; font-size: .92rem; }
    .po-form { padding: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .po-reveal, .po-reveal-left, .po-reveal-right, .po-reveal-scale { opacity: 1; transform: none; }
}