*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--red-color-background,#f8fafc);color:var(--red-color-text,#0f172a);font-family:var(--red-font-family,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);line-height:1.5}img{max-width:100%;height:auto}a{color:inherit}.red-container{width:min(calc(100% - 32px),var(--red-content-width,1360px));margin-inline:auto}.red-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.red-muted{color:#64748b}.red-icon{display:block}.red-shell-header{position:sticky;top:0;z-index:50;background:var(--red-color-header-bg,#fff);color:var(--red-color-header-text,#0f172a);box-shadow:0 1px 0 rgba(15,23,42,.08)}.red-shell-header__main{display:grid;grid-template-columns:auto minmax(120px,190px) minmax(280px,1fr) auto;gap:18px;align-items:center;min-height:82px}.red-brand{display:flex;align-items:center;text-decoration:none;min-width:0}.red-brand img{display:block;max-width:160px;max-height:64px;object-fit:contain}.red-search{display:flex;min-width:0}.red-search input{min-width:0;width:100%;height:46px;padding:0 16px;border:1px solid #dbe3ee;border-right:0;border-radius:14px 0 0 14px;background:var(--red-color-search-container-bg,#f8fafc);font:inherit;outline:0}.red-search input:focus{border-color:var(--red-color-primary,#2563eb);box-shadow:0 0 0 3px color-mix(in srgb,var(--red-color-primary,#2563eb) 15%,transparent)}.red-search button{width:50px;border:0;border-radius:0 14px 14px 0;background:var(--red-color-search-button-bg,var(--red-color-primary,#2563eb));color:#fff;display:grid;place-items:center;cursor:pointer}.red-search--mobile-wrap{display:none}.red-header-actions{display:flex;align-items:center;gap:6px}.red-header-actions>a{position:relative;display:flex;min-width:62px;flex-direction:column;align-items:center;gap:3px;padding:7px 8px;border-radius:12px;text-decoration:none;font-size:12px}.red-header-actions>a:hover{background:#f1f5f9}.red-icon-button{border:0;background:transparent;color:inherit;padding:8px;cursor:pointer}.red-shell-header__menu{display:none}.red-badge{position:absolute;top:0;right:3px;display:grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--red-color-secondary,#ff5722);color:#fff;font-size:10px;line-height:1}.red-primary-nav{border-top:1px solid #edf2f7;background:#fff}.red-primary-nav__inner{display:flex;align-items:center;gap:4px;min-height:46px}.red-primary-nav a,.red-primary-nav button{display:inline-flex;align-items:center;gap:6px;padding:12px 14px;border:0;background:transparent;text-decoration:none;font:inherit;font-weight:650;color:var(--red-color-menu-text,#0f172a);cursor:pointer;border-radius:10px}.red-primary-nav a:hover,.red-primary-nav button:hover{background:#f8fafc;color:var(--red-color-primary,#2563eb)}.red-primary-nav__categories{margin-right:8px}.red-primary-nav__item{position:relative}.red-primary-nav__submenu{position:absolute;left:0;top:calc(100% - 2px);display:none;min-width:220px;padding:8px;background:#fff;border:1px solid #e2e8f0;border-radius:14px;box-shadow:0 18px 50px rgba(15,23,42,.13)}.red-primary-nav__submenu a{display:block;padding:10px 12px}.red-primary-nav__item:hover>.red-primary-nav__submenu,.red-primary-nav__item:focus-within>.red-primary-nav__submenu{display:block}.red-main{min-height:65vh;padding:34px 0 56px}.red-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}.red-card{border:1px solid #e5eaf0;border-radius:var(--red-radius,16px);background:#fff;box-shadow:0 8px 26px rgba(15,23,42,.05)}.red-product-card{overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}.red-product-card:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(15,23,42,.10)}.red-product-card__image{display:flex;aspect-ratio:1/1;align-items:center;justify-content:center;padding:10px;background:#fff;overflow:hidden}.red-product-card__image img{width:100%;height:100%;object-fit:contain}.red-product-card__body{padding:15px}.red-product-card__body h3{margin:5px 0 10px;font-size:16px;line-height:1.35}.red-product-card__body h3 a{text-decoration:none}.red-product-card__code{font-size:12px;color:#64748b}.red-product-card__price{margin:0;font-weight:800;color:var(--red-color-primary,#2563eb)}.red-button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 16px;border:0;border-radius:var(--red-radius,14px);background:var(--red-color-primary,#2563eb);color:#fff;text-decoration:none;font-weight:750;cursor:pointer}.red-form{display:grid;gap:14px;max-width:720px}.red-form input,.red-form select,.red-form textarea{width:100%;padding:11px 13px;border:1px solid #d5dde8;border-radius:12px;background:#fff;font:inherit}.red-drawer-overlay{position:fixed;inset:0;z-index:79;background:rgba(15,23,42,.45);backdrop-filter:blur(2px)}.red-drawer{position:fixed;z-index:80;top:0;bottom:0;width:min(92vw,420px);background:#fff;box-shadow:0 0 60px rgba(15,23,42,.22);transition:transform .22s ease;display:flex;flex-direction:column}.red-drawer--left{left:0;transform:translateX(-105%)}.red-drawer--right{right:0;transform:translateX(105%)}.red-drawer.is-open{transform:translateX(0)}.red-drawer__header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid #e8edf4;font-size:18px}.red-drawer__header button{border:0;background:transparent;padding:6px;cursor:pointer}.red-drawer__body{padding:14px 18px 28px;overflow:auto}.red-category-tree,.red-category-tree ul{list-style:none;margin:0;padding:0}.red-category-tree__row>a{display:flex;align-items:center;gap:10px;padding:10px 8px;border-radius:10px;text-decoration:none}.red-category-tree__row>a:hover{background:#f8fafc}.red-category-tree__row img{border-radius:8px;object-fit:contain}.red-category-tree__row small{margin-left:auto;color:#94a3b8}.red-category-tree--nested{padding-left:20px}.red-category-tree--nested .red-category-tree__row>a{padding-block:7px;font-size:14px}.red-mobile-menu{display:grid;gap:2px}.red-mobile-menu>a{padding:11px 8px;text-decoration:none;border-radius:9px}.red-mobile-menu>a:hover{background:#f8fafc}.red-mobile-menu__child{padding-left:26px!important;font-size:14px;color:#475569}.red-bottom-nav{display:none}.red-footer{background:var(--red-color-footer-bg,#0f172a);color:var(--red-color-footer-text,#fff);padding:44px 0 28px}.red-footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px}.red-footer__grid>div{display:grid;align-content:start;gap:8px}.red-footer__grid a{color:inherit;text-decoration:none;opacity:.86}.red-footer__brand{font-size:20px}.red-footer__bottom{margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14)}.red-toast-region{position:fixed;z-index:100;right:18px;bottom:22px;display:grid;gap:10px;pointer-events:none}.red-toast{max-width:360px;padding:12px 16px;border-radius:12px;background:#0f172a;color:#fff;box-shadow:0 14px 40px rgba(15,23,42,.25);animation:redToastIn .2s ease}.red-toast--error{background:#991b1b}@keyframes redToastIn{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}.red-home-module{position:relative;margin:24px 0;padding:22px;border-radius:var(--red-radius,16px);overflow:hidden}.red-home-module--full{width:100vw;margin-left:calc(50% - 50vw);border-radius:0;padding-inline:max(16px,calc((100vw - var(--red-content-width,1360px))/2))}.red-module-title{margin:0 0 18px;padding-bottom:9px}.red-module-carousel{position:relative}.red-module-carousel__track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:4px 2px 10px}.red-module-carousel__track::-webkit-scrollbar{display:none}.red-module-slide{flex:0 0 min(var(--red-module-item-width,240px),82vw);scroll-snap-align:start}.red-module-slide--image{overflow:hidden;border-radius:var(--red-radius,16px);background:#fff}.red-module-slide--image img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.red-carousel-nav{position:absolute;z-index:2;top:50%;width:40px;height:40px;transform:translateY(-50%);border:1px solid #dbe3ee;border-radius:50%;background:#fff;box-shadow:0 6px 18px rgba(15,23,42,.12);font-size:25px;cursor:pointer}.red-carousel-nav--prev{left:-10px}.red-carousel-nav--next{right:-10px}.legacy-catalog-section{margin:28px 0}.legacy-section-title{font-size:clamp(22px,2.4vw,32px);margin:0 0 18px}.legacy-category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}.legacy-category-card{display:flex;align-items:center;justify-content:space-between;padding:18px;border:1px solid #e5eaf0;border-radius:var(--red-radius,16px);background:#fff;text-decoration:none;font-weight:700}.red-notification{padding:12px 0;border-bottom:1px solid #edf2f7}.red-notification:last-child{border-bottom:0}.red-notification.is-unread{padding-left:10px;border-left:3px solid var(--red-color-primary,#2563eb)}.red-notification__store{display:inline-flex;margin-bottom:5px;padding:3px 7px;border-radius:999px;background:#f1f5f9;color:#475569;font-size:11px;font-weight:750}.red-notification strong{display:block}.red-notification p{margin:4px 0;color:#475569}.red-notification a{display:inline-block;margin-top:4px;color:var(--red-color-primary,#2563eb)}
@media(max-width:1024px){.red-shell-header__main{grid-template-columns:auto minmax(110px,150px) 1fr auto;gap:10px}.red-header-actions>a{min-width:48px}.red-header-actions>a>span{display:none}.red-primary-nav__inner{overflow-x:auto;white-space:nowrap}.red-footer__grid{grid-template-columns:1.5fr 1fr 1fr}}
@media(max-width:780px){body{padding-bottom:calc(70px + env(safe-area-inset-bottom))}.red-container{width:min(calc(100% - 24px),var(--red-content-width,1360px))}.red-shell-header__main{grid-template-columns:auto 1fr auto;min-height:64px}.red-shell-header__menu{display:block}.red-brand{justify-content:center}.red-brand img{max-height:50px;max-width:140px}.red-shell-header__main>.red-search{display:none}.red-header-actions>a:not(.red-cart-link){display:none}.red-header-actions .red-cart-link>span{display:none}.red-search--mobile-wrap{display:block;padding-bottom:10px}.red-search--mobile{display:flex;width:100%}.red-primary-nav{display:none}.red-main{padding:22px 0 36px}.red-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.red-product-card__body{padding:11px}.red-product-card__body h3{font-size:14px}.red-bottom-nav{position:fixed;z-index:70;left:0;right:0;bottom:0;display:flex;align-items:stretch;justify-content:space-around;padding:7px 6px calc(7px + env(safe-area-inset-bottom));border-top:1px solid #dfe6ef;background:rgba(255,255,255,.97);backdrop-filter:blur(16px);box-shadow:0 -8px 30px rgba(15,23,42,.08)}.red-bottom-nav__item{flex:1;display:flex;min-width:0;flex-direction:column;align-items:center;gap:2px;padding:3px 2px;color:#475569;text-decoration:none;font-size:10px}.red-bottom-nav__item:hover{color:var(--red-color-primary,#2563eb)}.red-bottom-nav__icon{position:relative}.red-bottom-nav .red-badge{top:-6px;right:-10px}.red-footer{padding-bottom:90px}.red-footer__grid{grid-template-columns:1fr}.red-carousel-nav{display:none}.red-home-module{padding:14px;margin:18px 0}.red-toast-region{left:12px;right:12px;bottom:calc(82px + env(safe-area-inset-bottom))}.red-toast{max-width:none}.red-drawer{width:min(94vw,390px)}}
@media(max-width:430px){.red-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.red-product-card__image{padding:5px}.red-product-card__price{font-size:14px}.legacy-category-grid{grid-template-columns:1fr 1fr}.legacy-category-card{padding:13px;font-size:13px}}
/* Fase 3.1 - carrusel responsive real */
.red-module-carousel{position:relative;min-width:0}
.red-module-carousel__track{
display:flex;
align-items:stretch;
gap:16px;
overflow-x:auto;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
scrollbar-width:none;
overscroll-behavior-inline:contain;
padding:4px 2px 12px;
--red-carousel-visible:var(--red-carousel-items,4);
}
.red-module-carousel__track::-webkit-scrollbar{display:none}
.red-module-slide{
flex:0 0 calc((100% - (16px * (var(--red-carousel-visible) - 1))) / var(--red-carousel-visible));
min-width:0;
scroll-snap-align:start;
}
.red-module-slide>.red-product-card,.red-module-slide.red-product-card{height:100%}
.red-module-slide--image{display:flex;align-items:flex-start;justify-content:center;background:transparent;overflow:hidden}
.red-module-slide--image>a{display:flex;width:100%;align-items:flex-start;justify-content:center}
.red-module-slide--image img{display:block;width:100%;height:auto;max-height:620px;object-fit:contain;aspect-ratio:auto}
.red-carousel-dots{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:8px}
.red-carousel-dot{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:#cbd5e1;cursor:pointer;transition:width .18s ease,background .18s ease}
.red-carousel-dot.is-active{width:22px;background:var(--red-color-primary,#2563eb)}
@media(max-width:620px){.red-module-carousel__track{gap:10px}.red-module-slide--image img{max-height:none}}
/* Formularios dinámicos CMS */
.red-dynamic-form{margin:22px 0;padding:22px;border:1px solid #e2e8f0;border-radius:var(--red-radius,12px);background:#fff;box-shadow:0 10px 28px rgba(15,23,42,.06)}
.red-dynamic-form__grid{display:grid;grid-template-columns:repeat(var(--red-dynamic-form-cols,2),minmax(0,1fr));gap:16px}
.red-dynamic-form__title{grid-column:1/-1;margin:8px 0 0;padding-bottom:9px;border-bottom:1px solid #e5e7eb}
.red-dynamic-field{display:grid;gap:7px;align-content:start}
.red-dynamic-field--wide{grid-column:1/-1}
.red-dynamic-field>label{font-weight:650}
.red-dynamic-field input,.red-dynamic-field select,.red-dynamic-field textarea{width:100%;min-height:44px;padding:10px 12px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:inherit;font:inherit}
.red-dynamic-field textarea{min-height:120px;resize:vertical}
.red-dynamic-options{display:flex;flex-wrap:wrap;gap:10px 18px;padding:9px 0}
.red-dynamic-options label{display:flex;align-items:center;gap:7px;font-weight:500}
.red-dynamic-options input{width:auto;min-height:auto}
.red-dynamic-field__error{min-height:16px;color:#b91c1c;font-size:12px}
.red-dynamic-form__submit{margin-top:18px;border:0;cursor:pointer;font-weight:750}
.red-dynamic-form__submit:disabled{opacity:.6;cursor:wait}
.red-dynamic-form__message{margin-bottom:14px;padding:11px 13px;border-radius:8px;background:#ecfdf5;color:#166534}
.red-dynamic-form__message.is-error{background:#fef2f2;color:#991b1b}
.red-dynamic-form__notice{padding:14px;border:1px dashed #cbd5e1;border-radius:8px;color:#64748b}
@media(max-width:760px){.red-dynamic-form{padding:16px}.red-dynamic-form__grid{grid-template-columns:1fr}.red-dynamic-field--wide,.red-dynamic-form__title{grid-column:1}}
/* Fase 3.2 - compatibilidad editorial tipo Bootstrap (solo dentro de contenido administrable) */
.dynamic-content-root .container{width:100%;max-width:var(--red-content-width,1360px);margin-inline:auto;padding-inline:12px}
.dynamic-content-root .container-fluid{width:100%;margin-inline:auto;padding-inline:12px}
.dynamic-content-root .row{display:flex;flex-wrap:wrap;margin-inline:-12px;min-width:0}
.dynamic-content-root [class^="col-"],.dynamic-content-root [class*=" col-"]{position:relative;width:100%;min-width:0;padding-inline:12px}
.dynamic-content-root .col-1{width:8.333333%}.dynamic-content-root .col-2{width:16.666667%}.dynamic-content-root .col-3{width:25%}.dynamic-content-root .col-4{width:33.333333%}.dynamic-content-root .col-5{width:41.666667%}.dynamic-content-root .col-6{width:50%}.dynamic-content-root .col-7{width:58.333333%}.dynamic-content-root .col-8{width:66.666667%}.dynamic-content-root .col-9{width:75%}.dynamic-content-root .col-10{width:83.333333%}.dynamic-content-root .col-11{width:91.666667%}.dynamic-content-root .col-12{width:100%}
.dynamic-content-root .d-flex{display:flex!important}.dynamic-content-root .d-grid{display:grid!important}.dynamic-content-root .d-block{display:block!important}.dynamic-content-root .d-none{display:none!important}.dynamic-content-root .flex-row{flex-direction:row!important}.dynamic-content-root .flex-column{flex-direction:column!important}.dynamic-content-root .flex-wrap{flex-wrap:wrap!important}.dynamic-content-root .flex-nowrap{flex-wrap:nowrap!important}.dynamic-content-root .justify-content-start{justify-content:flex-start!important}.dynamic-content-root .justify-content-center{justify-content:center!important}.dynamic-content-root .justify-content-end{justify-content:flex-end!important}.dynamic-content-root .justify-content-between{justify-content:space-between!important}.dynamic-content-root .align-items-start{align-items:flex-start!important}.dynamic-content-root .align-items-center{align-items:center!important}.dynamic-content-root .align-items-end{align-items:flex-end!important}.dynamic-content-root .w-100{width:100%!important}.dynamic-content-root .h-100{height:100%!important}.dynamic-content-root .mx-auto{margin-inline:auto!important}.dynamic-content-root .text-start{text-align:left!important}.dynamic-content-root .text-center{text-align:center!important}.dynamic-content-root .text-end{text-align:right!important}.dynamic-content-root .p-0{padding:0!important}.dynamic-content-root .px-0{padding-inline:0!important}.dynamic-content-root .gap-1{gap:.25rem!important}.dynamic-content-root .gap-2{gap:.5rem!important}.dynamic-content-root .gap-3{gap:1rem!important}.dynamic-content-root .gap-4{gap:1.5rem!important}.dynamic-content-root .gap-5{gap:3rem!important}
@media(min-width:576px){.dynamic-content-root .col-sm-1{width:8.333333%}.dynamic-content-root .col-sm-2{width:16.666667%}.dynamic-content-root .col-sm-3{width:25%}.dynamic-content-root .col-sm-4{width:33.333333%}.dynamic-content-root .col-sm-5{width:41.666667%}.dynamic-content-root .col-sm-6{width:50%}.dynamic-content-root .col-sm-7{width:58.333333%}.dynamic-content-root .col-sm-8{width:66.666667%}.dynamic-content-root .col-sm-9{width:75%}.dynamic-content-root .col-sm-10{width:83.333333%}.dynamic-content-root .col-sm-11{width:91.666667%}.dynamic-content-root .col-sm-12{width:100%}}
@media(min-width:768px){.dynamic-content-root .col-md-1{width:8.333333%}.dynamic-content-root .col-md-2{width:16.666667%}.dynamic-content-root .col-md-3{width:25%}.dynamic-content-root .col-md-4{width:33.333333%}.dynamic-content-root .col-md-5{width:41.666667%}.dynamic-content-root .col-md-6{width:50%}.dynamic-content-root .col-md-7{width:58.333333%}.dynamic-content-root .col-md-8{width:66.666667%}.dynamic-content-root .col-md-9{width:75%}.dynamic-content-root .col-md-10{width:83.333333%}.dynamic-content-root .col-md-11{width:91.666667%}.dynamic-content-root .col-md-12{width:100%}}
@media(min-width:992px){.dynamic-content-root .col-lg-1{width:8.333333%}.dynamic-content-root .col-lg-2{width:16.666667%}.dynamic-content-root .col-lg-3{width:25%}.dynamic-content-root .col-lg-4{width:33.333333%}.dynamic-content-root .col-lg-5{width:41.666667%}.dynamic-content-root .col-lg-6{width:50%}.dynamic-content-root .col-lg-7{width:58.333333%}.dynamic-content-root .col-lg-8{width:66.666667%}.dynamic-content-root .col-lg-9{width:75%}.dynamic-content-root .col-lg-10{width:83.333333%}.dynamic-content-root .col-lg-11{width:91.666667%}.dynamic-content-root .col-lg-12{width:100%}}
@media(min-width:1200px){.dynamic-content-root .col-xl-1{width:8.333333%}.dynamic-content-root .col-xl-2{width:16.666667%}.dynamic-content-root .col-xl-3{width:25%}.dynamic-content-root .col-xl-4{width:33.333333%}.dynamic-content-root .col-xl-5{width:41.666667%}.dynamic-content-root .col-xl-6{width:50%}.dynamic-content-root .col-xl-7{width:58.333333%}.dynamic-content-root .col-xl-8{width:66.666667%}.dynamic-content-root .col-xl-9{width:75%}.dynamic-content-root .col-xl-10{width:83.333333%}.dynamic-content-root .col-xl-11{width:91.666667%}.dynamic-content-root .col-xl-12{width:100%}}
/* Fase 3.3 - carrusel: items configurados primero, ancho como referencia responsive */
.red-module-carousel__track{--red-carousel-gap:16px;gap:var(--red-carousel-gap)}
.red-module-slide{
flex-basis:calc((100% - (var(--red-carousel-gap) * (var(--red-carousel-visible) - 1))) / var(--red-carousel-visible));
}
.red-module-carousel[data-items="1"] .red-module-slide{flex-basis:100%}
@media(max-width:620px){.red-module-carousel__track{--red-carousel-gap:10px}}
/* Fase 3.4 */
.red-category-tree__branch{display:grid;grid-template-rows:1fr;opacity:1;transition:grid-template-rows .24s ease,opacity .2s ease}
.red-category-tree__branch>.red-category-tree{min-height:0;overflow:hidden}
.red-category-tree__branch.is-collapsed{grid-template-rows:0fr;opacity:0;pointer-events:none}
.red-product-card__image img[data-red-image-fallback]{display:block}
/* Fase 3.7 — compatibilidad de contenido histórico CI3 / CKEditor.
No cargamos Able Pro/Bootstrap completo en el storefront: sólo el grid que
realmente aparece en contenido guardado (Bootstrap 3 + 4/5 básico). */
.dynamic-content-root .btgrid,
.dynamic-content-root .layoutmanager,
.dynamic-content-root .layout-container,
.dynamic-content-root .layout-row,
.dynamic-content-root .layout-column,
.dynamic-content-root .layout-column-editable{
min-width:0;
}
.dynamic-content-root .btgrid,
.dynamic-content-root .layoutmanager,
.dynamic-content-root .layout-container{width:100%;max-width:100%}
.dynamic-content-root .layout-container{padding-left:0;padding-right:0}
.dynamic-content-root .layout-row{display:flex;flex-wrap:wrap;margin-left:-12px;margin-right:-12px}
.dynamic-content-root .layout-column{position:relative;min-height:1px;padding-left:12px;padding-right:12px}
.dynamic-content-root .layout-column-editable{width:100%}
.dynamic-content-root .content{width:100%;min-width:0}
/* Bootstrap 4/legacy CKEditor: el contenido histórico de arm_menu fue editado
bajo el contrato "Bootstrap 4 + Font Awesome". Mantenemos un subconjunto
SCOPED dentro de .dynamic-content-root; no cargamos Bootstrap globalmente. */
.dynamic-content-root,
.dynamic-content-root *{box-sizing:border-box}
.dynamic-content-root .row{
display:flex;
flex-wrap:wrap;
min-width:0;
margin-left:-12px;
margin-right:-12px;
}
/* Compatibilidad Bootstrap legacy.
Importante: no usamos custom properties para el ancho de columnas.
El selector base tiene la misma especificidad que los breakpoints y éstos
aparecen después, igual que en Bootstrap, evitando que un 100% base opaque
col-md-4 / col-md-6 / etc. */
.dynamic-content-root .row>[class^="col-"],
.dynamic-content-root .row>[class*=" col-"]{
position:relative;
width:100%;
min-width:0;
min-height:1px;
padding-left:12px;
padding-right:12px;
}
.dynamic-content-root .row>.col{flex-basis:0;flex-grow:1;max-width:100%}
.dynamic-content-root .row>.col-1{flex:0 0 8.333333%;width:8.333333%;max-width:8.333333%}
.dynamic-content-root .row>.col-2{flex:0 0 16.666667%;width:16.666667%;max-width:16.666667%}
.dynamic-content-root .row>.col-3{flex:0 0 25%;width:25%;max-width:25%}
.dynamic-content-root .row>.col-4{flex:0 0 33.333333%;width:33.333333%;max-width:33.333333%}
.dynamic-content-root .row>.col-5{flex:0 0 41.666667%;width:41.666667%;max-width:41.666667%}
.dynamic-content-root .row>.col-6{flex:0 0 50%;width:50%;max-width:50%}
.dynamic-content-root .row>.col-7{flex:0 0 58.333333%;width:58.333333%;max-width:58.333333%}
.dynamic-content-root .row>.col-8{flex:0 0 66.666667%;width:66.666667%;max-width:66.666667%}
.dynamic-content-root .row>.col-9{flex:0 0 75%;width:75%;max-width:75%}
.dynamic-content-root .row>.col-10{flex:0 0 83.333333%;width:83.333333%;max-width:83.333333%}
.dynamic-content-root .row>.col-11{flex:0 0 91.666667%;width:91.666667%;max-width:91.666667%}
.dynamic-content-root .row>.col-12{flex:0 0 100%;width:100%;max-width:100%}
.dynamic-content-root .row>.col-xs-1{flex:0 0 8.333333%;width:8.333333%;max-width:8.333333%}
.dynamic-content-root .row>.col-xs-2{flex:0 0 16.666667%;width:16.666667%;max-width:16.666667%}
.dynamic-content-root .row>.col-xs-3{flex:0 0 25%;width:25%;max-width:25%}
.dynamic-content-root .row>.col-xs-4{flex:0 0 33.333333%;width:33.333333%;max-width:33.333333%}
.dynamic-content-root .row>.col-xs-5{flex:0 0 41.666667%;width:41.666667%;max-width:41.666667%}
.dynamic-content-root .row>.col-xs-6{flex:0 0 50%;width:50%;max-width:50%}
.dynamic-content-root .row>.col-xs-7{flex:0 0 58.333333%;width:58.333333%;max-width:58.333333%}
.dynamic-content-root .row>.col-xs-8{flex:0 0 66.666667%;width:66.666667%;max-width:66.666667%}
.dynamic-content-root .row>.col-xs-9{flex:0 0 75%;width:75%;max-width:75%}
.dynamic-content-root .row>.col-xs-10{flex:0 0 83.333333%;width:83.333333%;max-width:83.333333%}
.dynamic-content-root .row>.col-xs-11{flex:0 0 91.666667%;width:91.666667%;max-width:91.666667%}
.dynamic-content-root .row>.col-xs-12{flex:0 0 100%;width:100%;max-width:100%}
@media(min-width:576px){
.dynamic-content-root .row>.col-sm-1{flex:0 0 8.333333%;width:8.333333%;max-width:8.333333%}
.dynamic-content-root .row>.col-sm-2{flex:0 0 16.666667%;width:16.666667%;max-width:16.666667%}
.dynamic-content-root .row>.col-sm-3{flex:0 0 25%;width:25%;max-width:25%}
.dynamic-content-root .row>.col-sm-4{flex:0 0 33.333333%;width:33.333333%;max-width:33.333333%}
.dynamic-content-root .row>.col-sm-5{flex:0 0 41.666667%;width:41.666667%;max-width:41.666667%}
.dynamic-content-root .row>.col-sm-6{flex:0 0 50%;width:50%;max-width:50%}
.dynamic-content-root .row>.col-sm-7{flex:0 0 58.333333%;width:58.333333%;max-width:58.333333%}
.dynamic-content-root .row>.col-sm-8{flex:0 0 66.666667%;width:66.666667%;max-width:66.666667%}
.dynamic-content-root .row>.col-sm-9{flex:0 0 75%;width:75%;max-width:75%}
.dynamic-content-root .row>.col-sm-10{flex:0 0 83.333333%;width:83.333333%;max-width:83.333333%}
.dynamic-content-root .row>.col-sm-11{flex:0 0 91.666667%;width:91.666667%;max-width:91.666667%}
.dynamic-content-root .row>.col-sm-12{flex:0 0 100%;width:100%;max-width:100%}
}
@media(min-width:768px){
.dynamic-content-root .row>.col-md-1{flex:0 0 8.333333%;width:8.333333%;max-width:8.333333%}
.dynamic-content-root .row>.col-md-2{flex:0 0 16.666667%;width:16.666667%;max-width:16.666667%}
.dynamic-content-root .row>.col-md-3{flex:0 0 25%;width:25%;max-width:25%}
.dynamic-content-root .row>.col-md-4{flex:0 0 33.333333%;width:33.333333%;max-width:33.333333%}
.dynamic-content-root .row>.col-md-5{flex:0 0 41.666667%;width:41.666667%;max-width:41.666667%}
.dynamic-content-root .row>.col-md-6{flex:0 0 50%;width:50%;max-width:50%}
.dynamic-content-root .row>.col-md-7{flex:0 0 58.333333%;width:58.333333%;max-width:58.333333%}
.dynamic-content-root .row>.col-md-8{flex:0 0 66.666667%;width:66.666667%;max-width:66.666667%}
.dynamic-content-root .row>.col-md-9{flex:0 0 75%;width:75%;max-width:75%}
.dynamic-content-root .row>.col-md-10{flex:0 0 83.333333%;width:83.333333%;max-width:83.333333%}
.dynamic-content-root .row>.col-md-11{flex:0 0 91.666667%;width:91.666667%;max-width:91.666667%}
.dynamic-content-root .row>.col-md-12{flex:0 0 100%;width:100%;max-width:100%}
}
@media(min-width:992px){
.dynamic-content-root .row>.col-lg-1{flex:0 0 8.333333%;width:8.333333%;max-width:8.333333%}
.dynamic-content-root .row>.col-lg-2{flex:0 0 16.666667%;width:16.666667%;max-width:16.666667%}
.dynamic-content-root .row>.col-lg-3{flex:0 0 25%;width:25%;max-width:25%}
.dynamic-content-root .row>.col-lg-4{flex:0 0 33.333333%;width:33.333333%;max-width:33.333333%}
.dynamic-content-root .row>.col-lg-5{flex:0 0 41.666667%;width:41.666667%;max-width:41.666667%}
.dynamic-content-root .row>.col-lg-6{flex:0 0 50%;width:50%;max-width:50%}
.dynamic-content-root .row>.col-lg-7{flex:0 0 58.333333%;width:58.333333%;max-width:58.333333%}
.dynamic-content-root .row>.col-lg-8{flex:0 0 66.666667%;width:66.666667%;max-width:66.666667%}
.dynamic-content-root .row>.col-lg-9{flex:0 0 75%;width:75%;max-width:75%}
.dynamic-content-root .row>.col-lg-10{flex:0 0 83.333333%;width:83.333333%;max-width:83.333333%}
.dynamic-content-root .row>.col-lg-11{flex:0 0 91.666667%;width:91.666667%;max-width:91.666667%}
.dynamic-content-root .row>.col-lg-12{flex:0 0 100%;width:100%;max-width:100%}
}
@media(min-width:1200px){
.dynamic-content-root .row>.col-xl-1{flex:0 0 8.333333%;width:8.333333%;max-width:8.333333%}
.dynamic-content-root .row>.col-xl-2{flex:0 0 16.666667%;width:16.666667%;max-width:16.666667%}
.dynamic-content-root .row>.col-xl-3{flex:0 0 25%;width:25%;max-width:25%}
.dynamic-content-root .row>.col-xl-4{flex:0 0 33.333333%;width:33.333333%;max-width:33.333333%}
.dynamic-content-root .row>.col-xl-5{flex:0 0 41.666667%;width:41.666667%;max-width:41.666667%}
.dynamic-content-root .row>.col-xl-6{flex:0 0 50%;width:50%;max-width:50%}
.dynamic-content-root .row>.col-xl-7{flex:0 0 58.333333%;width:58.333333%;max-width:58.333333%}
.dynamic-content-root .row>.col-xl-8{flex:0 0 66.666667%;width:66.666667%;max-width:66.666667%}
.dynamic-content-root .row>.col-xl-9{flex:0 0 75%;width:75%;max-width:75%}
.dynamic-content-root .row>.col-xl-10{flex:0 0 83.333333%;width:83.333333%;max-width:83.333333%}
.dynamic-content-root .row>.col-xl-11{flex:0 0 91.666667%;width:91.666667%;max-width:91.666667%}
.dynamic-content-root .row>.col-xl-12{flex:0 0 100%;width:100%;max-width:100%}
}
.dynamic-content-root .d-none{display:none!important}.dynamic-content-root .d-block{display:block!important}.dynamic-content-root .d-flex{display:flex!important}.dynamic-content-root .flex-wrap{flex-wrap:wrap!important}.dynamic-content-root .justify-content-start{justify-content:flex-start!important}.dynamic-content-root .justify-content-end{justify-content:flex-end!important}.dynamic-content-root .justify-content-center{justify-content:center!important}.dynamic-content-root .justify-content-between{justify-content:space-between!important}.dynamic-content-root .justify-content-around{justify-content:space-around!important}.dynamic-content-root .align-items-start{align-items:flex-start!important}.dynamic-content-root .align-items-end{align-items:flex-end!important}.dynamic-content-root .align-items-center{align-items:center!important}.dynamic-content-root .align-items-stretch{align-items:stretch!important}
.dynamic-content-root .text-left{text-align:left!important}.dynamic-content-root .text-center{text-align:center!important}.dynamic-content-root .text-right{text-align:right!important}
/* Un [modulo N] incrustado nunca rompe la columna/row del CKEditor. */
.dynamic-content-root .red-page-module--inline,
.layout-column .red-page-module--inline{
position:relative!important;
left:auto!important;
right:auto!important;
width:100%!important;
max-width:100%!important;
margin-left:0!important;
margin-right:0!important;
overflow:hidden;
}
.dynamic-content-root .red-page-module--inline>.red-page-module__inner,
.layout-column .red-page-module--inline>.red-page-module__inner{
width:100%!important;
max-width:100%!important;
margin-inline:0!important;
padding-inline:0!important;
}
.dynamic-content-root .red-page-module--inline .red-module-carousel{width:100%;min-width:0}
.dynamic-content-root .red-page-module--inline .red-module-carousel__track{max-width:100%}
/* Imágenes de contenido antiguo: respeta width/height editorial sin desbordar. */
.dynamic-content-root img{max-width:100%;height:auto}
/* ========================================================================== */
/* Fase 4.7 — Social Share reutilizable */
/* ========================================================================== */
.red-social-share{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:9px;
}
.red-social-share__label{
color:#667085;
font-size:12px;
font-weight:700;
}
.red-social-share__actions{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:7px;
}
.red-social-share__button{
display:grid;
place-items:center;
width:var(--red-share-size,36px);
height:var(--red-share-size,36px);
padding:0;
border:1px solid #e4e7ec;
border-radius:50%;
background:#fff;
color:#344054;
text-decoration:none;
cursor:pointer;
transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease,background .15s ease,color .15s ease;
}
.red-social-share__button:hover,
.red-social-share__button:focus-visible{
transform:translateY(-1px);
box-shadow:0 6px 16px rgba(16,24,40,.12);
outline:0;
}
.red-social-share__button svg{
width:48%;
height:48%;
fill:none;
stroke:currentColor;
stroke-width:1.9;
stroke-linecap:round;
stroke-linejoin:round;
}
.red-social-share__button[data-network="facebook"]{
color:#1877f2;
}
.red-social-share__button[data-network="facebook"] svg,
.red-social-share__button[data-network="linkedin"] svg{
fill:currentColor;
stroke:none;
}
.red-social-share__button[data-network="linkedin"]{
color:#0a66c2;
}
.red-social-share__button[data-network="whatsapp"]{
color:#138f3e;
border-color:#ccebd7;
background:#f2fff6;
}
.red-social-share__button[data-network="x"]{
color:#111;
}
.red-social-share__button[data-network="email"]{
color:#667085;
}
.red-social-share__button[data-network="copy"]{
color:#475467;
}
/* ========================================================================== */
/* Fase 4.7 — Product Detail */
/* ========================================================================== */
.red-product-breadcrumb{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:7px;
margin:0 0 15px;
color:#7b8494;
font-size:11px;
}
.red-product-breadcrumb a{
color:inherit;
text-decoration:none;
}
.red-product-breadcrumb a:hover{color:var(--red-color-primary,#e11d2e)}
.red-product-layout{
display:grid;
grid-template-columns:330px minmax(0,1fr);
gap:18px;
align-items:start;
}
.red-product-sidebar{
position:sticky;
top:calc(var(--red-sticky-header-offset,94px) + 14px);
}
.red-product-detail{min-width:0}
.red-product-default,
.red-product-template{
min-width:0;
}
.red-product-hero{
display:grid;
grid-template-columns:minmax(0,1.12fr) minmax(330px,.88fr);
gap:28px;
padding:22px;
border:1px solid #e9edf2;
border-radius:18px;
background:#fff;
box-shadow:0 14px 38px rgba(16,24,40,.055);
}
.red-product-hero__gallery,
.red-product-hero__info{min-width:0}
.red-product-hero__info{
display:flex;
flex-direction:column;
align-items:stretch;
}
.red-product-hero__meta{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:8px;
margin-bottom:10px;
}
.red-product-hero__meta>span:first-child{
display:inline-flex;
align-items:center;
min-height:26px;
padding:4px 8px;
border:1px solid #e4e7ec;
border-radius:999px;
color:#667085;
font-size:9px;
font-weight:700;
background:#fff;
}
.red-product-title-row{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
}
.red-product-title-row h1{
margin:0;
color:#101828;
font-size:clamp(25px,3vw,42px);
line-height:1.02;
letter-spacing:-.035em;
}
.red-product-wishlist{
display:grid;
place-items:center;
flex:0 0 38px;
width:38px;
height:38px;
margin:0;
padding:0;
border:1px solid #e4e7ec;
border-radius:50%;
background:#fff;
color:#475467;
text-decoration:none;
}
.red-product-wishlist button{
display:grid;
place-items:center;
width:100%;
height:100%;
padding:0;
border:0;
background:transparent;
color:inherit;
cursor:pointer;
}
.red-product-wishlist svg{
width:18px;
height:18px;
fill:none;
stroke:currentColor;
stroke-width:1.9;
stroke-linecap:round;
stroke-linejoin:round;
}
.red-product-price{margin-top:18px}
.red-product-price__old{
display:flex;
align-items:center;
gap:8px;
color:#98a2b3;
font-size:11px;
}
.red-product-price__old span{text-decoration:line-through}
.red-product-price__old b{
padding:3px 6px;
border-radius:6px;
background:#e8f8ed;
color:#15933a;
font-size:9px;
}
.red-product-price__current{
display:block;
margin-top:3px;
color:#101828;
font-size:clamp(28px,4vw,42px);
line-height:1;
font-variant-numeric:tabular-nums;
}
.red-product-price__quote{
display:block;
margin-top:5px;
color:#8a4b00;
font-size:20px;
}
.red-product-price__tax{
display:block;
margin-top:6px;
color:#15933a;
font-size:9px;
font-style:italic;
}
.red-product-stock{
display:inline-flex;
align-items:center;
gap:5px;
width:max-content;
min-height:26px;
padding:4px 8px;
border-radius:999px;
background:#f2f4f7;
color:#475467;
font-size:9px;
font-weight:750;
}
.red-product-stock i{
width:6px;
height:6px;
border-radius:50%;
background:currentColor;
}
.red-product-stock--1{background:#ecfdf3;color:#027a48}
.red-product-stock--2{background:#fffaeb;color:#b54708}
.red-product-stock--3{background:#f2f4f7;color:#344054}
.red-product-stock--0{background:#fef3f2;color:#b42318}
.red-product-stock small{font-size:8px;font-weight:650}
.red-product-hero__summary{
margin:16px 0 0;
color:#667085;
font-size:12px;
line-height:1.55;
}
.red-product-hero__notice{
display:grid;
gap:3px;
margin-top:15px;
padding:10px 12px;
border:1px solid #fedf89;
border-radius:10px;
background:#fffaeb;
color:#7a2e0e;
}
.red-product-hero__notice strong{font-size:10px}
.red-product-hero__notice span{font-size:9px}
.red-product-purchase{
display:grid;
gap:10px;
margin-top:18px;
}
.red-product-purchase__form{
display:flex;
align-items:center;
gap:9px;
margin:0;
}
.red-product-purchase__qty{
display:grid;
grid-template-columns:34px 46px 34px;
flex:0 0 auto;
height:42px;
overflow:hidden;
border:1px solid #dfe3e8;
border-radius:11px;
background:#fff;
}
.red-product-purchase__qty button{
padding:0;
border:0;
background:#fff;
color:#101828;
font-size:16px;
cursor:pointer;
}
.red-product-purchase__qty button:hover{background:#f5f6f8}
.red-product-purchase__qty input{
width:46px;
padding:0;
border:0;
outline:0;
background:#fff;
color:#101828;
text-align:center;
font-size:11px;
font-weight:800;
appearance:textfield;
-moz-appearance:textfield;
}
.red-product-purchase__qty input::-webkit-inner-spin-button,
.red-product-purchase__qty input::-webkit-outer-spin-button{-webkit-appearance:none}
.red-product-purchase__button{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
min-width:190px;
min-height:42px;
padding:9px 18px;
border:0;
border-radius:11px;
background:var(--red-color-primary,#e11d2e);
color:#fff;
font-size:11px;
font-weight:850;
cursor:pointer;
box-shadow:0 8px 18px color-mix(in srgb,var(--red-color-primary,#e11d2e) 20%,transparent);
}
.red-product-purchase__button.is-quote{background:#b66a00}
.red-product-purchase__button.is-disabled{background:#98a2b3;box-shadow:none;cursor:not-allowed}
.red-product-purchase__button svg{
width:17px;
height:17px;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round;
}
.red-product-purchase__consult{
width:max-content;
color:#12853b;
font-size:9px;
font-weight:800;
text-decoration:none;
}
.red-product-trust{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
margin-top:18px;
}
.red-product-trust>div{
display:flex;
align-items:flex-start;
gap:7px;
min-width:0;
padding:9px;
border:1px solid #edf0f3;
border-radius:10px;
background:#fbfcfd;
}
.red-product-trust b{
display:grid;
place-items:center;
flex:0 0 22px;
width:22px;
height:22px;
border-radius:7px;
background:#f0f4ff;
color:#335cff;
font-size:10px;
}
.red-product-trust span{min-width:0}
.red-product-trust strong{
display:block;
color:#344054;
font-size:8px;
}
.red-product-trust small{
display:block;
margin-top:2px;
color:#98a2b3;
font-size:7px;
line-height:1.3;
}
.red-product-advisor{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-top:14px;
padding:10px 12px;
border:1px solid #d9ece0;
border-radius:10px;
background:#f5fff8;
color:#187a35;
text-decoration:none;
}
.red-product-advisor span{font-size:8px}
.red-product-advisor strong{font-size:10px}
.red-social-share--product{margin-top:15px;padding-top:14px;border-top:1px solid #edf0f3}
.red-product-gallery{
display:grid;
grid-template-columns:74px minmax(0,1fr);
gap:12px;
min-height:500px;
}
.red-product-gallery__thumbs{
display:flex;
flex-direction:column;
gap:8px;
max-height:500px;
overflow:auto;
scrollbar-width:thin;
}
.red-product-gallery__thumb{
display:grid;
place-items:center;
flex:0 0 68px;
width:68px;
height:68px;
padding:4px;
border:1px solid #e5e7eb;
border-radius:9px;
background:#fff;
cursor:pointer;
}
.red-product-gallery__thumb.is-active{
border-color:var(--red-color-primary,#e11d2e);
box-shadow:0 0 0 2px color-mix(in srgb,var(--red-color-primary,#e11d2e) 10%,transparent);
}
.red-product-gallery__thumb img{
width:100%;
height:100%;
object-fit:contain;
}
.red-product-gallery__stage{
position:relative;
display:grid;
place-items:center;
min-width:0;
min-height:500px;
overflow:hidden;
border:1px solid #edf0f3;
border-radius:14px;
background:
radial-gradient(circle at 50% 35%,rgba(248,250,252,.1),#fff 70%);
}
.red-product-gallery__main{
width:100%;
height:100%;
max-height:500px;
object-fit:contain;
padding:18px;
transition:opacity .16s ease;
}
.red-product-gallery__zoom{
position:absolute;
z-index:2;
top:10px;
right:10px;
display:grid;
place-items:center;
width:36px;
height:36px;
padding:0;
border:1px solid #e4e7ec;
border-radius:50%;
background:rgba(255,255,255,.92);
color:#344054;
cursor:pointer;
}
.red-product-gallery__zoom svg{
width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round
}
.red-product-gallery__dialog{
width:min(94vw,1100px);
height:min(92vh,850px);
padding:48px 20px 20px;
border:0;
border-radius:16px;
background:#fff;
box-shadow:0 28px 90px rgba(0,0,0,.35);
}
.red-product-gallery__dialog::backdrop{background:rgba(15,23,42,.76)}
.red-product-gallery__dialog img{
width:100%;
height:100%;
object-fit:contain;
}
.red-product-gallery__dialog-close{
position:absolute;
top:10px;
right:12px;
width:34px;
height:34px;
border:0;
border-radius:50%;
background:#f2f4f7;
color:#101828;
font-size:24px;
cursor:pointer;
}
.red-product-content-grid{
display:grid;
grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
gap:18px;
margin-top:20px;
align-items:start;
}
.red-product-content-grid__main,
.red-product-content-grid__aside{
display:grid;
gap:18px;
min-width:0;
}
.red-product-content-grid__aside{position:sticky;top:calc(var(--red-sticky-header-offset,94px) + 14px)}
.red-product-section{
padding:20px;
border:1px solid #e9edf2;
border-radius:15px;
background:#fff;
}
.red-product-section__heading{margin-bottom:14px}
.red-product-section__heading>span{
display:block;
margin-bottom:2px;
color:var(--red-color-primary,#e11d2e);
font-size:8px;
font-weight:850;
letter-spacing:.07em;
text-transform:uppercase;
}
.red-product-section__heading h2{
margin:0;
color:#101828;
font-size:18px;
}
.red-product-rich-text{
color:#475467;
font-size:11px;
line-height:1.7;
}
.red-product-rich-text img{max-width:100%;height:auto}
.red-product-specs{display:grid;gap:0}
.red-product-specs__item{
display:grid;
grid-template-columns:minmax(110px,.8fr) minmax(0,1.2fr);
gap:12px;
padding:9px 0;
border-bottom:1px solid #edf0f3;
}
.red-product-specs__item:last-child{border-bottom:0}
.red-product-specs__item span{color:#7b8494;font-size:9px}
.red-product-specs__item strong{color:#344054;font-size:9px;text-align:right}
.red-product-faq__list{display:grid;gap:7px}
.red-product-faq details{
border:1px solid #e8ebef;
border-radius:9px;
background:#fbfcfd;
}
.red-product-faq summary{
padding:10px 12px;
color:#344054;
font-size:9px;
font-weight:800;
cursor:pointer;
}
.red-product-faq details>div{
padding:0 12px 11px;
color:#667085;
font-size:9px;
line-height:1.5;
}
.red-product-question-form{margin-bottom:15px}
.red-product-question-form>label{
display:block;
margin-bottom:6px;
color:#344054;
font-size:9px;
font-weight:800;
}
.red-product-question-form>div{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:8px;
}
.red-product-question-form textarea{
width:100%;
min-height:74px;
padding:10px 11px;
border:1px solid #dce1e7;
border-radius:9px;
resize:vertical;
font:inherit;
font-size:10px;
}
.red-product-questions__login{
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
gap:8px 14px;
margin-bottom:14px;
padding:12px;
border-radius:10px;
background:#f8fafc;
}
.red-product-questions__login span{color:#101828;font-size:10px;font-weight:800}
.red-product-questions__login p{flex:1;margin:0;color:#667085;font-size:9px}
.red-product-questions__login a{
padding:7px 10px;
border-radius:8px;
background:#101828;
color:#fff;
font-size:8px;
font-weight:800;
text-decoration:none;
}
.red-product-questions__list{display:grid;gap:10px}
.red-product-questions__list article{
padding:12px;
border:1px solid #edf0f3;
border-radius:10px;
}
.red-product-questions__q,
.red-product-questions__a{
display:flex;
gap:9px;
align-items:flex-start;
}
.red-product-questions__q>span,
.red-product-questions__a>span{
display:grid;
place-items:center;
flex:0 0 23px;
width:23px;
height:23px;
border-radius:7px;
background:#f2f4f7;
color:#475467;
font-size:8px;
font-weight:900;
}
.red-product-questions__q p,
.red-product-questions__a p{
margin:2px 0 0;
color:#344054;
font-size:10px;
line-height:1.45;
}
.red-product-questions__a{margin-top:9px;padding-left:31px}
.red-product-questions__a>span{background:#ecfdf3;color:#027a48}
.red-product-questions__a strong{font-size:8px;color:#027a48}
.red-product-rating-summary{
display:flex;
align-items:center;
gap:7px;
margin-top:6px;
color:#7b8494;
font-size:9px;
}
.red-product-rating-summary__stars{display:inline-flex;gap:1px}
.red-product-rating-summary__stars i{
color:#d0d5dd;
font-size:12px;
font-style:normal;
}
.red-product-rating-summary__stars i.is-filled{color:#f5a623}
.red-product-reviews__summary{
display:flex;
align-items:center;
gap:12px;
padding:11px;
border-radius:10px;
background:#fafbfc;
}
.red-product-reviews__summary>strong{font-size:28px;color:#101828}
.red-product-reviews__summary span{display:block;margin-top:3px;color:#98a2b3;font-size:8px}
.red-product-reviews__list{display:grid;gap:9px;margin-top:13px}
.red-product-reviews__list article{
padding:11px;
border:1px solid #edf0f3;
border-radius:10px;
}
.red-product-reviews__list article>div{display:flex;justify-content:space-between;gap:10px}
.red-product-reviews__list strong{font-size:9px;color:#344054}
.red-product-reviews__list span{font-size:8px;color:#f5a623;font-weight:800}
.red-product-reviews__list p{margin:6px 0 0;color:#667085;font-size:9px;line-height:1.45}
.red-product-review-form{margin-top:14px}
.red-product-login-note,
.red-product-empty-note{color:#98a2b3;font-size:9px}
.red-product-login-note a{color:var(--red-color-primary,#e11d2e);font-weight:800}
.red-product-related{margin-top:22px}
.red-product-template{
overflow:hidden;
border-radius:16px;
}
.red-product-template img{max-width:100%;height:auto}
.red-product-template__legacy-section{margin-bottom:16px}
.red-product-token-action,
.red-product-token-buy{
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px;
min-height:40px;
padding:10px 14px;
border-radius:10px;
background:#101828;
color:#fff;
font-size:10px;
font-weight:800;
text-decoration:none;
}
.red-product-token-action--whatsapp{background:#128c3d;color:#fff}
.red-product-template .red-product-gallery{min-height:420px}
.red-product-template .red-product-gallery__stage{min-height:420px}
.red-product-template .red-product-gallery__main{max-height:420px}
@media(max-width:1180px){
.red-product-layout{grid-template-columns:250px minmax(0,1fr);gap:14px}
.red-product-hero{grid-template-columns:minmax(0,1fr) minmax(300px,.85fr);gap:18px;padding:16px}
.red-product-gallery{grid-template-columns:62px minmax(0,1fr);min-height:420px}
.red-product-gallery__thumb{width:58px;height:58px}
.red-product-gallery__stage{min-height:420px}
.red-product-gallery__main{max-height:420px}
.red-product-trust{grid-template-columns:1fr}
}
@media(max-width:900px){
.red-product-layout{grid-template-columns:1fr}
.red-product-sidebar{display:none}
.red-product-hero{grid-template-columns:1fr}
.red-product-content-grid{grid-template-columns:1fr}
.red-product-content-grid__aside{position:static}
}
@media(max-width:620px){
.red-product-breadcrumb{font-size:9px}
.red-product-hero{padding:11px;border-radius:13px}
.red-product-gallery{
display:flex;
flex-direction:column-reverse;
min-height:auto;
}
.red-product-gallery__thumbs{
flex-direction:row;
max-height:none;
overflow-x:auto;
}
.red-product-gallery__thumb{flex:0 0 58px;width:58px;height:58px}
.red-product-gallery__stage{min-height:330px}
.red-product-gallery__main{max-height:330px;padding:10px}
.red-product-title-row h1{font-size:27px}
.red-product-purchase__form{align-items:stretch;flex-wrap:wrap}
.red-product-purchase__button{flex:1;min-width:170px}
.red-product-trust{grid-template-columns:1fr}
.red-product-section{padding:14px;border-radius:12px}
.red-product-question-form>div{grid-template-columns:1fr}
.red-product-questions__a{padding-left:0}
.red-social-share__label{width:100%}
}
/* ========================================================================== */
/* Fase 4.7.1 — ajustes Product Detail */
/* ========================================================================== */
.red-social-share__button[data-network="native"]{background:#151b79;border-color:#151b79;color:#fff}
.red-social-share__button[data-network="whatsapp"]{background:#16c75f;border-color:#16c75f;color:#fff}
.red-social-share__button[data-network="facebook"]{background:#1877f2;border-color:#1877f2;color:#fff}
.red-social-share__button[data-network="linkedin"]{background:#0a66c2;border-color:#0a66c2;color:#fff}
.red-social-share__button[data-network="x"]{background:#050505;border-color:#050505;color:#fff}
.red-social-share__button[data-network="email"]{background:#69717b;border-color:#69717b;color:#fff}
.red-social-share__button[data-network="copy"]{background:#84a936;border-color:#84a936;color:#fff}
.red-social-share__button[data-network="copy"] svg{width:50%;height:50%}
.red-product-price__availability{
display:block;
margin-top:8px;
color:#475467;
font-size:9px;
font-style:italic;
}
.red-product-price__availability strong{font-weight:800}
.red-product-hero__summary.red-product-rich-text{
margin-top:16px;
color:#667085;
font-size:11px;
line-height:1.55;
}
.red-product-hero__summary.red-product-rich-text p{margin:0 0 7px}
.red-product-hero__summary.red-product-rich-text p:last-child{margin-bottom:0}
.red-product-content-grid.is-single{grid-template-columns:minmax(0,1fr)}
.red-product-content-grid.is-single .red-product-content-grid__main{width:100%}
@media(max-width:900px){
.red-product-layout{display:block}
.red-product-detail{width:100%}
.red-product-hero{padding:14px}
.red-product-template{width:100%;max-width:100%;overflow:hidden}
.red-product-template [style*="min-width:280px"]{min-width:0!important}
}
@media(max-width:620px){
.red-product-hero__info{padding:2px}
.red-product-title-row{gap:8px}
.red-product-price__current{font-size:31px}
.red-product-purchase__qty{grid-template-columns:32px 42px 32px}
.red-product-purchase__qty input{width:42px}
.red-social-share__actions{gap:6px}
}
/* ========================================================================== */
/* Fase 4.7.2 — semantic templates + adaptive blocks + social SVG assets */
/* ========================================================================== */
/*
* El template de producto conserva y position relative/absolute.
* Estas reglas sólo mejoran su adaptación; NO sustituyen sus estilos inline.
*/
.red-product-template section{
max-width:100%;
}
.red-product-template [data-red-template-single-column="1"]{
grid-template-columns:1fr!important;
}
.red-product-template [data-red-template-single-column="1"]>div{
min-width:0;
width:100%;
}
/* El CTA de login debe ser legible aunque el template padre imponga color. */
.red-product-questions__login a.red-product-questions__login-button,
.red-product-template .red-product-questions__login a.red-product-questions__login-button{
display:inline-flex!important;
align-items:center;
justify-content:center;
flex:0 0 auto;
min-width:96px;
min-height:32px;
padding:7px 12px!important;
border:0!important;
border-radius:8px!important;
background:#101828!important;
color:#ffffff!important;
font-size:9px!important;
font-weight:800!important;
line-height:1.15!important;
text-decoration:none!important;
white-space:nowrap;
opacity:1!important;
}
.red-product-questions__login a.red-product-questions__login-button:hover{
background:#25324a!important;
color:#ffffff!important;
}
/*
* Compartir tipo CI3: círculos de marca con SVG local.
* No carga Font Awesome ni dependencias externas.
*/
.red-social-share__button img{
display:block;
width:50%;
height:50%;
object-fit:contain;
pointer-events:none;
}
.red-social-share__button[data-network="native"]{
background:#171b77;
border-color:#171b77;
}
.red-social-share__button[data-network="whatsapp"]{
background:#19c760;
border-color:#19c760;
}
.red-social-share__button[data-network="facebook"]{
background:#1877f2;
border-color:#1877f2;
}
.red-social-share__button[data-network="linkedin"]{
background:#0a66c2;
border-color:#0a66c2;
}
.red-social-share__button[data-network="x"]{
background:#050505;
border-color:#050505;
}
.red-social-share__button[data-network="email"]{
background:#6f7781;
border-color:#6f7781;
}
.red-social-share__button[data-network="copy"]{
background:#87aa3b;
border-color:#87aa3b;
}
.red-social-share__button:hover,
.red-social-share__button:focus-visible{
filter:brightness(.96);
transform:translateY(-2px);
}
/* Tablet: los grids editoriales de dos columnas se apilan de forma segura. */
@media(max-width:900px){
.red-product-template section[style*="display:grid"]{
grid-template-columns:1fr!important;
}
.red-product-template section[style*="display:flex"]{
min-width:0;
}
.red-product-template section{
border-radius:min(24px,5vw)!important;
}
}
/* Móvil: anulamos anchos/márgenes editoriales que causen scroll horizontal. */
@media(max-width:620px){
.red-product-template{
overflow:visible;
}
.red-product-template>div{
max-width:100%!important;
}
.red-product-template section{
max-width:100%!important;
padding-left:16px!important;
padding-right:16px!important;
margin-left:0!important;
margin-right:0!important;
}
.red-product-template section[style*="display:grid"]{
grid-template-columns:minmax(0,1fr)!important;
gap:14px!important;
}
.red-product-template [style*="font-size:44px"]{
font-size:31px!important;
line-height:1.06!important;
}
.red-product-template [style*="font-size:38px"]{
font-size:30px!important;
}
.red-product-template [style*="font-size:36px"]{
font-size:28px!important;
}
.red-product-template [style*="font-size:32px"],
.red-product-template [style*="font-size:30px"]{
font-size:25px!important;
}
.red-product-template [style*="padding:32px"],
.red-product-template [style*="padding:34px"],
.red-product-template [style*="padding:40px"]{
padding:18px 16px!important;
}
.red-product-questions__login{
align-items:flex-start;
}
.red-product-questions__login p{
flex-basis:100%;
order:3;
}
}
/* ========================================================================== */
/* Fase 4.7.3 — Detail adaptable + zoom de galería */
/* ========================================================================== */
/* Sin columna lateral, el contenido ocupa realmente todo el espacio disponible. */
.red-product-content-grid.is-single{
grid-template-columns:minmax(0,1fr)!important;
}
.red-product-content-grid.is-single>.red-product-content-grid__main,
.red-product-content-grid.is-single>.red-product-section{
width:100%;
max-width:none;
min-width:0;
}
.red-product-content-grid.is-single .red-product-description{
width:100%;
}
.red-product-specifications-card--wide .red-product-specs{
grid-template-columns:repeat(2,minmax(0,1fr));
column-gap:30px;
}
.red-product-specifications-card--wide .red-product-specs__item{
min-width:0;
}
/*
* Zoom tipo marketplace:
* - desktop con mouse: amplía dentro del mismo visor siguiendo el cursor;
* - clic/Enter: abre el viewer grande que ya existía;
* - touch: no aplica hover zoom, sólo viewer.
*/
.red-product-gallery__stage[data-red-gallery-stage]{
cursor:zoom-in;
}
.red-product-gallery__main{
transform:scale(1);
transform-origin:50% 50%;
will-change:transform;
transition:opacity .16s ease,transform .16s ease;
}
.red-product-gallery__zoom-hint{
position:absolute;
left:50%;
bottom:12px;
z-index:2;
transform:translateX(-50%);
padding:6px 9px;
border:1px solid rgba(208,213,221,.8);
border-radius:999px;
background:rgba(255,255,255,.92);
color:#667085;
font-size:8px;
font-weight:750;
line-height:1;
white-space:nowrap;
opacity:0;
pointer-events:none;
box-shadow:0 4px 14px rgba(16,24,40,.08);
transition:opacity .15s ease;
}
.red-product-gallery__stage:hover .red-product-gallery__zoom-hint{
opacity:1;
}
@media (hover:hover) and (pointer:fine) and (min-width:901px){
.red-product-gallery__stage.is-zooming{
cursor:zoom-out;
}
.red-product-gallery__stage.is-zooming .red-product-gallery__main{
transform:scale(1.82);
transition:transform .08s linear,opacity .16s ease;
}
.red-product-gallery__stage.is-zooming .red-product-gallery__zoom-hint{
opacity:0;
}
}
/* Tablet/móvil: viewer por clic, sin zoom hover ni texto de ayuda. */
@media(max-width:900px), (hover:none), (pointer:coarse){
.red-product-gallery__zoom-hint{
display:none;
}
.red-product-gallery__stage[data-red-gallery-stage]{
cursor:pointer;
}
.red-product-gallery__main{
transform:none!important;
transform-origin:50% 50%!important;
}
}
@media(max-width:720px){
.red-product-specifications-card--wide .red-product-specs{
grid-template-columns:1fr;
}
}
/* ========================================================================== */
/* Fase 4.8 — Catalog toolbar / facet drawer / paginación híbrida */
/* ========================================================================== */
.red-catalog-tools{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin:0 0 11px;
padding:9px 10px;
border:1px solid #e8ebef;
border-radius:11px;
background:#fff;
}
.red-catalog-tools__primary{
display:flex;
align-items:center;
gap:10px;
min-width:0;
}
.red-catalog-filter-trigger{
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px;
min-height:36px;
padding:7px 11px;
border:1px solid #dfe3e8;
border-radius:9px;
background:#fff;
color:#344054;
font:inherit;
font-size:9px;
font-weight:800;
cursor:pointer;
}
.red-catalog-filter-trigger:hover{
border-color:var(--red-color-primary,#e11d2e);
color:var(--red-color-primary,#e11d2e);
}
.red-catalog-filter-trigger svg{
width:15px;
height:15px;
fill:none;
stroke:currentColor;
stroke-width:1.9;
stroke-linecap:round;
}
.red-catalog-filter-trigger b{
display:grid;
place-items:center;
min-width:18px;
height:18px;
padding:0 5px;
border-radius:999px;
background:var(--red-color-primary,#e11d2e);
color:#fff;
font-size:7px;
}
.red-catalog-result-count{
color:#7b8494;
font-size:9px;
white-space:nowrap;
}
.red-catalog-sort{
display:flex;
align-items:center;
gap:7px;
margin:0;
}
.red-catalog-sort label{
color:#7b8494;
font-size:8px;
font-weight:750;
}
.red-catalog-sort select{
min-height:36px;
padding:6px 30px 6px 9px;
border:1px solid #dfe3e8;
border-radius:9px;
background:#fff;
color:#344054;
font:inherit;
font-size:9px;
font-weight:750;
cursor:pointer;
}
.red-catalog-chips{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:6px;
margin:-2px 0 12px;
}
.red-catalog-chips>a{
display:inline-flex;
align-items:center;
gap:5px;
min-height:27px;
padding:4px 8px;
border:1px solid #dfe4ea;
border-radius:999px;
background:#f8fafc;
color:#475467;
font-size:8px;
font-weight:750;
text-decoration:none;
}
.red-catalog-chips>a:hover{
border-color:#f0b5ba;
background:#fff4f5;
color:#b42318;
}
.red-catalog-chips>a span{
font-size:12px;
line-height:1;
}
.red-catalog-chips>a.red-catalog-chips__clear{
border-color:transparent;
background:transparent;
color:var(--red-color-primary,#e11d2e);
}
.red-catalog-filter-overlay{
position:fixed;
z-index:1090;
inset:0;
background:rgba(15,23,42,.48);
backdrop-filter:blur(1.5px);
}
.red-catalog-filter-drawer{
position:fixed;
z-index:1100;
top:0;
right:0;
width:min(410px,92vw);
height:100dvh;
display:flex;
flex-direction:column;
background:#fff;
box-shadow:-20px 0 60px rgba(15,23,42,.18);
transform:translateX(105%);
visibility:hidden;
transition:transform .22s ease,visibility .22s ease;
}
.red-catalog-filter-drawer.is-open{
transform:translateX(0);
visibility:visible;
}
.red-catalog-filter-drawer__head{
display:flex;
align-items:center;
justify-content:space-between;
gap:15px;
padding:17px 18px 13px;
border-bottom:1px solid #edf0f3;
}
.red-catalog-filter-drawer__head span{
display:block;
color:var(--red-color-primary,#e11d2e);
font-size:7px;
font-weight:850;
letter-spacing:.07em;
text-transform:uppercase;
}
.red-catalog-filter-drawer__head strong{
display:block;
margin-top:2px;
color:#101828;
font-size:18px;
}
.red-catalog-filter-drawer__head button{
display:grid;
place-items:center;
width:34px;
height:34px;
padding:0;
border:1px solid #e4e7ec;
border-radius:50%;
background:#fff;
color:#344054;
font-size:22px;
cursor:pointer;
}
.red-catalog-filter-form{
display:block;
flex:1;
min-height:0;
overflow:auto;
padding:3px 18px 92px;
}
.red-catalog-filter-form fieldset{
margin:0;
padding:15px 0;
border:0;
border-bottom:1px solid #edf0f3;
}
.red-catalog-filter-form legend{
width:100%;
margin:0 0 10px;
padding:0;
color:#101828;
font-size:10px;
font-weight:850;
}
.red-catalog-price-filter{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
}
.red-catalog-price-filter label>span{
display:block;
margin-bottom:4px;
color:#98a2b3;
font-size:7px;
font-weight:750;
}
.red-catalog-price-filter label>div{
display:flex;
align-items:center;
min-height:38px;
overflow:hidden;
border:1px solid #dfe3e8;
border-radius:8px;
}
.red-catalog-price-filter small{
padding-left:9px;
color:#667085;
font-size:9px;
}
.red-catalog-price-filter input{
width:100%;
min-width:0;
height:36px;
padding:0 9px 0 4px;
border:0;
outline:0;
background:#fff;
color:#344054;
font:inherit;
font-size:9px;
}
.red-catalog-filter-options{
display:grid;
gap:2px;
max-height:240px;
overflow:auto;
scrollbar-width:thin;
}
.red-catalog-filter-options label{
display:grid;
grid-template-columns:18px minmax(0,1fr) auto;
align-items:center;
gap:7px;
min-height:32px;
margin:0;
padding:4px 3px;
border-radius:7px;
cursor:pointer;
}
.red-catalog-filter-options label:hover{
background:#f8fafc;
}
.red-catalog-filter-options input{
width:15px;
height:15px;
margin:0;
accent-color:var(--red-color-primary,#e11d2e);
}
.red-catalog-filter-options span{
min-width:0;
overflow:hidden;
color:#475467;
font-size:9px;
font-weight:650;
text-overflow:ellipsis;
white-space:nowrap;
}
.red-catalog-filter-options small{
color:#98a2b3;
font-size:7px;
}
.red-catalog-filter-drawer__footer{
position:absolute;
right:0;
bottom:0;
left:0;
display:grid;
grid-template-columns:auto minmax(0,1fr);
align-items:center;
gap:10px;
padding:12px 18px calc(12px + env(safe-area-inset-bottom));
border-top:1px solid #e6e9ed;
background:rgba(255,255,255,.96);
backdrop-filter:blur(8px);
}
.red-catalog-filter-drawer__footer>a{
color:#667085;
font-size:9px;
font-weight:800;
text-decoration:none;
}
.red-catalog-filter-drawer__footer>button{
min-height:40px;
padding:8px 13px;
border:0;
border-radius:9px;
background:var(--red-color-primary,#e11d2e);
color:#fff;
font:inherit;
font-size:9px;
font-weight:850;
cursor:pointer;
}
.red-catalog-empty{
display:grid;
place-items:center;
gap:4px;
min-height:170px;
padding:25px;
border:1px dashed #dfe3e8;
border-radius:12px;
background:#fbfcfd;
text-align:center;
}
.red-catalog-empty strong{color:#344054;font-size:12px}
.red-catalog-empty span{color:#98a2b3;font-size:9px}
.red-catalog-pagination{
display:grid;
place-items:center;
gap:11px;
margin:22px 0 8px;
}
.red-catalog-pagination__status{
color:#98a2b3;
font-size:8px;
}
.red-catalog-pagination__status strong{
color:#667085;
}
.red-catalog-load-more{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
min-width:180px;
min-height:40px;
padding:9px 16px;
border:1px solid #dfe3e8;
border-radius:10px;
background:#fff;
color:#344054;
font-size:9px;
font-weight:850;
text-decoration:none;
transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.red-catalog-load-more:hover{
border-color:var(--red-color-primary,#e11d2e);
box-shadow:0 7px 20px rgba(16,24,40,.08);
transform:translateY(-1px);
}
.red-catalog-load-more.is-loading{
opacity:.55;
pointer-events:none;
}
.red-catalog-load-more svg{
width:14px;
height:14px;
fill:none;
stroke:currentColor;
stroke-width:1.9;
stroke-linecap:round;
stroke-linejoin:round;
}
.red-catalog-page-links{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:4px;
}
.red-catalog-page-links>a,
.red-catalog-page-links>span{
display:grid;
place-items:center;
min-width:30px;
height:30px;
padding:0 5px;
border-radius:8px;
color:#667085;
font-size:8px;
font-weight:800;
text-decoration:none;
}
.red-catalog-page-links>a{
border:1px solid #eaecf0;
background:#fff;
}
.red-catalog-page-links>a:hover{
border-color:#f0b5ba;
color:var(--red-color-primary,#e11d2e);
}
.red-catalog-page-links>.is-current{
background:#101828;
color:#fff;
}
body.red-filter-open{
overflow:hidden;
}
@media(max-width:720px){
.red-catalog-tools{
align-items:stretch;
flex-direction:column;
}
.red-catalog-tools__primary{
justify-content:space-between;
}
.red-catalog-sort{
justify-content:space-between;
}
.red-catalog-sort select{
flex:1;
max-width:220px;
}
.red-catalog-filter-drawer{
top:auto;
bottom:0;
width:100%;
height:min(88dvh,780px);
border-radius:18px 18px 0 0;
transform:translateY(105%);
}
.red-catalog-filter-drawer.is-open{
transform:translateY(0);
}
.red-catalog-page-links{
display:none;
}
.red-catalog-load-more{
width:100%;
max-width:320px;
}
}
/* ========================================================================== */
/* Fase 4.8.1 — Buscador dedicado, facetado visible y AJAX */
/* ========================================================================== */
.red-search-experience{
min-height:520px;
}
.red-search-experience__intro{
display:flex;
align-items:end;
justify-content:space-between;
gap:18px;
margin:0 0 14px;
}
.red-search-experience__intro>div>span{
display:block;
color:var(--red-color-primary,#e11d2e);
font-size:8px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}
.red-search-experience__intro h1{
margin:2px 0 0;
color:#101828;
font-size:clamp(24px,2.5vw,34px);
line-height:1.08;
}
.red-search-experience__intro p{
margin:0;
color:#98a2b3;
font-size:9px;
}
.red-search-live-shell{
display:grid;
grid-template-columns:245px minmax(0,1fr);
gap:16px;
align-items:start;
}
.red-search-live-results{
min-width:0;
}
.red-search-live-toolbar{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
min-height:48px;
margin-bottom:11px;
padding:8px 10px;
border:1px solid #e8ebef;
border-radius:10px;
background:#fff;
}
.red-search-live-toolbar__left{
display:flex;
align-items:center;
gap:9px;
}
.red-search-live-toolbar__left>strong{
color:#344054;
font-size:10px;
}
.red-search-mobile-filter{
display:none;
align-items:center;
gap:6px;
min-height:34px;
padding:6px 9px;
border:1px solid #dfe3e8;
border-radius:8px;
background:#fff;
color:#344054;
font:inherit;
font-size:8px;
font-weight:850;
}
.red-search-mobile-filter svg{
width:14px;
height:14px;
fill:none;
stroke:currentColor;
stroke-width:2;
stroke-linecap:round;
}
.red-search-mobile-filter b{
display:grid;
place-items:center;
min-width:17px;
height:17px;
padding:0 4px;
border-radius:999px;
background:var(--red-color-primary,#e11d2e);
color:#fff;
font-size:7px;
}
.red-search-sort{
display:flex;
align-items:center;
gap:7px;
}
.red-search-sort>span{
color:#98a2b3;
font-size:8px;
font-weight:750;
}
.red-search-sort select{
min-width:135px;
min-height:34px;
padding:5px 28px 5px 8px;
border:1px solid #dfe3e8;
border-radius:8px;
background:#fff;
color:#344054;
font:inherit;
font-size:8px;
font-weight:800;
}
.red-search-facets{
position:sticky;
top:calc(var(--red-sticky-header-offset,94px) + 12px);
display:grid;
gap:9px;
max-height:calc(100vh - var(--red-sticky-header-offset,94px) - 24px);
overflow:auto;
padding-right:2px;
scrollbar-width:thin;
}
.red-search-facets__mobile-head,
.red-search-facets__mobile-footer{
display:none;
}
.red-search-facets__form{
display:grid;
gap:9px;
}
.red-search-facet-box{
padding:11px;
border:1px solid #e5e8ec;
border-radius:10px;
background:#fff;
}
.red-search-facet-box__title{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:9px;
}
.red-search-facet-box__title strong{
color:#344054;
font-size:10px;
}
.red-search-facet-box__title>a{
display:grid;
place-items:center;
width:22px;
height:22px;
border-radius:50%;
color:#98a2b3;
text-decoration:none;
}
.red-search-facet-box__title>a:hover{
background:#fef3f2;
color:#b42318;
}
/* Dual range inspirado en CI3, sin dependencia noUiSlider. */
.red-search-dual-range{
position:relative;
height:24px;
margin:2px 1px 5px;
}
.red-search-dual-range__track{
position:absolute;
top:11px;
right:2px;
left:2px;
height:3px;
border-radius:999px;
background:
linear-gradient(
to right,
#d0d5dd 0 var(--min-pos,0%),
var(--red-color-primary,#e11d2e) var(--min-pos,0%) var(--max-pos,100%),
#d0d5dd var(--max-pos,100%) 100%
);
}
.red-search-dual-range input[type=range]{
position:absolute;
inset:0;
width:100%;
height:24px;
margin:0;
background:transparent;
pointer-events:none;
appearance:none;
-webkit-appearance:none;
}
.red-search-dual-range input[type=range]::-webkit-slider-runnable-track{
height:3px;
background:transparent;
}
.red-search-dual-range input[type=range]::-moz-range-track{
height:3px;
background:transparent;
}
.red-search-dual-range input[type=range]::-webkit-slider-thumb{
width:14px;
height:14px;
margin-top:-5px;
border:2px solid #fff;
border-radius:50%;
background:#101828;
box-shadow:0 0 0 1px #101828;
pointer-events:auto;
appearance:none;
-webkit-appearance:none;
cursor:pointer;
}
.red-search-dual-range input[type=range]::-moz-range-thumb{
width:12px;
height:12px;
border:2px solid #fff;
border-radius:50%;
background:#101828;
box-shadow:0 0 0 1px #101828;
pointer-events:auto;
cursor:pointer;
}
.red-search-price-values{
display:grid;
grid-template-columns:1fr 1fr;
gap:6px;
}
.red-search-price-values label>span{
display:block;
margin-bottom:3px;
color:#98a2b3;
font-size:7px;
}
.red-search-price-values input{
width:100%;
min-width:0;
height:32px;
padding:5px 7px;
border:1px solid #e1e5ea;
border-radius:7px;
background:#fff;
color:#475467;
font:inherit;
font-size:8px;
}
.red-search-price-apply{
width:100%;
min-height:31px;
margin-top:7px;
border:0;
border-radius:7px;
background:var(--red-color-primary,#e11d2e);
color:#fff;
font:inherit;
font-size:8px;
font-weight:850;
cursor:pointer;
}
.red-search-category-chips{
display:flex;
flex-wrap:wrap;
gap:5px;
}
.red-search-category-chips a{
display:inline-flex;
align-items:center;
gap:4px;
min-height:25px;
padding:4px 7px;
border:1px solid #e2e6eb;
border-radius:999px;
background:#f8fafc;
color:#475467;
font-size:7px;
font-weight:800;
text-decoration:none;
}
.red-search-category-chips a small{
color:#98a2b3;
font-size:6px;
}
.red-search-category-chips a:hover,
.red-search-category-chips a.is-active{
border-color:#101828;
background:#101828;
color:#fff;
}
.red-search-category-chips a.is-active small{
color:#d0d5dd;
}
.red-search-check-list{
display:grid;
gap:1px;
max-height:220px;
overflow:auto;
scrollbar-width:thin;
}
.red-search-check-list label{
display:grid;
grid-template-columns:16px minmax(0,1fr) auto;
align-items:center;
gap:6px;
min-height:29px;
padding:3px 2px;
border-radius:6px;
cursor:pointer;
}
.red-search-check-list label:hover{
background:#f8fafc;
}
.red-search-check-list input{
width:13px;
height:13px;
margin:0;
accent-color:var(--red-color-primary,#e11d2e);
}
.red-search-check-list span{
min-width:0;
overflow:hidden;
color:#475467;
font-size:8px;
text-overflow:ellipsis;
white-space:nowrap;
}
.red-search-check-list small{
color:#98a2b3;
font-size:7px;
}
.red-search-grid-wrap .red-product-grid{
grid-template-columns:repeat(4,minmax(0,1fr));
gap:9px;
}
.red-search-grid-wrap .red-product-card{
min-width:0;
}
.red-search-grid-wrap .red-product-card__image{
aspect-ratio:1/1;
}
.red-search-grid-wrap .red-product-card__body{
padding:9px;
}
.red-search-grid-wrap .red-product-card__body h3{
font-size:11px;
}
.red-search-empty,
.red-search-live-empty{
display:grid;
place-items:center;
min-height:260px;
padding:28px;
border:1px dashed #dfe3e8;
border-radius:12px;
background:#fbfcfd;
color:#667085;
text-align:center;
}
.red-search-empty svg{
width:34px;
height:34px;
margin-bottom:5px;
fill:none;
stroke:#98a2b3;
stroke-width:1.6;
stroke-linecap:round;
}
.red-search-empty strong{
color:#344054;
font-size:11px;
}
.red-search-empty span{
font-size:8px;
}
.red-search-live-shell.is-loading{
opacity:.58;
pointer-events:none;
transition:opacity .12s ease;
}
@media(min-width:1450px){
.red-search-grid-wrap .red-product-grid{
grid-template-columns:repeat(5,minmax(0,1fr));
}
}
@media(max-width:1050px){
.red-search-live-shell{
grid-template-columns:210px minmax(0,1fr);
}
.red-search-grid-wrap .red-product-grid{
grid-template-columns:repeat(3,minmax(0,1fr));
}
}
@media(max-width:820px){
.red-search-experience__intro{
align-items:flex-start;
flex-direction:column;
}
.red-search-live-shell{
grid-template-columns:1fr;
}
.red-search-mobile-filter{
display:inline-flex;
}
.red-search-facets{
position:fixed;
z-index:1160;
top:auto;
right:0;
bottom:0;
left:0;
display:flex;
flex-direction:column;
width:100%;
height:min(88dvh,760px);
max-height:none;
padding:0;
overflow:hidden;
border-radius:18px 18px 0 0;
background:#fff;
box-shadow:0 -20px 60px rgba(15,23,42,.2);
transform:translateY(105%);
visibility:hidden;
transition:transform .2s ease,visibility .2s ease;
}
.red-search-facets.is-open{
transform:translateY(0);
visibility:visible;
}
.red-search-facets__mobile-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:14px 16px 10px;
border-bottom:1px solid #edf0f3;
}
.red-search-facets__mobile-head span{
display:block;
color:var(--red-color-primary,#e11d2e);
font-size:7px;
font-weight:850;
text-transform:uppercase;
}
.red-search-facets__mobile-head strong{
font-size:17px;
}
.red-search-facets__mobile-head button{
width:32px;
height:32px;
border:1px solid #e4e7ec;
border-radius:50%;
background:#fff;
font-size:20px;
}
.red-search-facets__form{
display:block;
flex:1;
min-height:0;
overflow:auto;
padding:8px 13px 86px;
}
.red-search-facet-box{
margin-bottom:8px;
}
.red-search-facets__mobile-footer{
position:absolute;
right:0;
bottom:0;
left:0;
display:grid;
grid-template-columns:auto minmax(0,1fr);
align-items:center;
gap:10px;
padding:11px 14px calc(11px + env(safe-area-inset-bottom));
border-top:1px solid #e7eaee;
background:rgba(255,255,255,.97);
}
.red-search-facets__mobile-footer a{
color:#667085;
font-size:9px;
font-weight:800;
text-decoration:none;
}
.red-search-facets__mobile-footer button{
min-height:38px;
border:0;
border-radius:8px;
background:var(--red-color-primary,#e11d2e);
color:#fff;
font:inherit;
font-size:9px;
font-weight:850;
}
.red-search-filter-overlay{
position:fixed;
z-index:1150;
inset:0;
background:rgba(15,23,42,.5);
backdrop-filter:blur(2px);
}
.red-search-grid-wrap .red-product-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
/* ========================================================================== */
/* Fase 4.8.2 — búsqueda compacta + Mall facets + slider catálogo */
/* ========================================================================== */
/* Resultados: preferimos la tarjeta compacta que ya usa el catálogo. */
.red-search-compact-wrap{
min-width:0;
}
.red-search-compact-wrap .red-product-compact-grid{
grid-template-columns:repeat(3,minmax(0,1fr));
}
.red-search-compact-wrap .red-product-card--compact{
min-height:150px;
}
.red-search-compact-wrap .red-product-card--compact .red-product-card__body h3{
font-size:13px;
font-weight:650;
}
.red-search-compact-wrap .red-product-card--compact .red-product-card__summary{
-webkit-line-clamp:2;
}
/* Los estilos anteriores de cards grid ya no aplican al buscador. */
.red-search-compact-wrap .red-product-card__image{
max-width:100%;
}
.red-search-store-list{
display:grid;
gap:5px;
}
.red-search-store-list>a{
display:grid;
grid-template-columns:38px minmax(0,1fr);
align-items:center;
gap:8px;
padding:7px;
border:1px solid #e5e8ec;
border-radius:8px;
background:#f8fafc;
color:#344054;
text-decoration:none;
}
.red-search-store-list>a:hover,
.red-search-store-list>a.is-active{
border-color:#101828;
background:#fff;
box-shadow:0 5px 15px rgba(16,24,40,.06);
}
.red-search-store-list>a img,
.red-search-store-list__fallback{
width:38px;
height:38px;
border-radius:8px;
object-fit:contain;
background:#fff;
}
.red-search-store-list__fallback{
display:grid;
place-items:center;
font-size:17px;
}
.red-search-store-list__body{
display:block;
min-width:0;
}
.red-search-store-list__body>strong{
display:block;
overflow:hidden;
color:#344054;
font-size:8px;
font-weight:850;
text-overflow:ellipsis;
white-space:nowrap;
}
.red-search-store-list__body>small{
display:block;
margin-top:2px;
color:#98a2b3;
font-size:7px;
}
.red-search-store-list__body>em{
display:block;
margin-top:2px;
color:#667085;
font-size:7px;
font-style:normal;
font-weight:700;
}
.red-search-zone-notice{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:9px;
padding:9px 11px;
border:1px solid #fedf89;
border-radius:9px;
background:#fffaeb;
}
.red-search-zone-notice strong{
color:#93370d;
font-size:8px;
}
.red-search-zone-notice span{
color:#b54708;
font-size:7px;
}
/* Slider del drawer normal usa exactamente la misma base del buscador. */
.red-catalog-dual-range{
margin:0 2px 8px;
}
.red-catalog-price-apply{
width:100%;
min-height:33px;
margin-top:8px;
border:0;
border-radius:8px;
background:var(--red-color-primary,#e11d2e);
color:#fff;
font:inherit;
font-size:8px;
font-weight:850;
cursor:pointer;
}
@media(max-width:1240px){
.red-search-compact-wrap .red-product-compact-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media(max-width:820px){
.red-search-compact-wrap .red-product-compact-grid{
grid-template-columns:1fr;
}
.red-search-zone-notice{
align-items:flex-start;
flex-direction:column;
}
}
/* ========================================================================== */
/* Fase 4.8.3 — search close/recents + catálogo 4 columnas + mobile cards */
/* ========================================================================== */
.red-search-experience__heading{
min-width:0;
}
.red-search-experience__title-row{
display:flex;
align-items:center;
gap:10px;
min-width:0;
}
.red-search-experience__title-row h1{
min-width:0;
}
.red-search-close{
display:inline-flex;
flex:0 0 auto;
align-items:center;
justify-content:center;
gap:5px;
min-height:29px;
padding:5px 8px;
border:1px solid #e3e7ec;
border-radius:999px;
background:#fff;
color:#667085;
font:inherit;
font-size:8px;
font-weight:800;
cursor:pointer;
}
.red-search-close:hover{
border-color:var(--red-color-primary,#e11d2e);
color:var(--red-color-primary,#e11d2e);
}
.red-search-close svg{
width:12px;
height:12px;
fill:none;
stroke:currentColor;
stroke-width:2;
stroke-linecap:round;
}
.red-search-recents{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:6px;
margin:-4px 0 12px;
}
.red-search-recents[hidden]{
display:none;
}
.red-search-recents>span{
color:#98a2b3;
font-size:7px;
font-weight:800;
text-transform:uppercase;
}
.red-search-recents>div{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:5px;
}
.red-search-recents>div>button{
max-width:180px;
min-height:25px;
overflow:hidden;
padding:4px 8px;
border:1px solid #e4e7ec;
border-radius:999px;
background:#fff;
color:#475467;
font:inherit;
font-size:7px;
font-weight:750;
text-overflow:ellipsis;
white-space:nowrap;
cursor:pointer;
}
.red-search-recents>div>button:hover{
border-color:#cfd5dc;
background:#f8fafc;
color:#101828;
}
.red-search-recents>[data-red-search-recents-clear]{
margin-left:auto;
padding:3px 0;
border:0;
background:transparent;
color:#98a2b3;
font:inherit;
font-size:7px;
font-weight:750;
cursor:pointer;
}
.red-search-recents>[data-red-search-recents-clear]:hover{
color:#b42318;
}
/*
* Catálogo cuadriculado:
* 4 cards en escritorio con sidebar, evitando que la quinta comprima
* precio/cantidad/acciones. Selector más específico que el Legacy base.
*/
.red-legacy .red-catalog-results > .red-product-grid.red-product-grid--catalog{
grid-template-columns:repeat(4,minmax(0,1fr));
gap:9px;
}
@media(max-width:1180px){
.red-legacy .red-catalog-results > .red-product-grid.red-product-grid--catalog{
grid-template-columns:repeat(3,minmax(0,1fr));
}
}
@media(max-width:760px){
.red-search-experience__intro{
gap:8px;
}
.red-search-experience__title-row{
align-items:flex-start;
}
.red-search-close{
min-width:29px;
width:29px;
height:29px;
padding:0;
}
.red-search-close span{
display:none;
}
.red-search-recents{
overflow:hidden;
flex-wrap:nowrap;
margin-bottom:9px;
}
.red-search-recents>span{
flex:0 0 auto;
}
.red-search-recents>div{
flex:1;
min-width:0;
flex-wrap:nowrap;
overflow-x:auto;
padding-bottom:2px;
scrollbar-width:none;
}
.red-search-recents>div::-webkit-scrollbar{
display:none;
}
.red-search-recents>div>button{
flex:0 0 auto;
max-width:130px;
}
.red-search-recents>[data-red-search-recents-clear]{
display:none;
}
.red-legacy .red-catalog-results > .red-product-grid.red-product-grid--catalog{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:7px;
}
/*
* En móvil la card de cuadrícula dedica una fila a cantidad y otra a
* acciones. Así nunca se cortan cart/info aunque la card mida ~180–220px.
*/
.red-legacy .red-product-grid--catalog .red-product-card--grid .red-product-card__body{
min-height:0;
padding:9px 8px 10px;
}
.red-legacy .red-product-grid--catalog .red-product-card--grid h3{
min-height:36px;
margin-bottom:7px;
font-size:13px;
line-height:1.32;
}
.red-legacy .red-product-grid--catalog .red-product-card--grid .red-product-card__commerce{
align-items:stretch;
flex-direction:column;
gap:6px;
margin-top:6px;
}
.red-legacy .red-product-grid--catalog .red-product-card--grid .red-product-card__pricing{
width:100%;
}
.red-legacy .red-product-grid--catalog .red-product-card--grid .red-product-card__price{
font-size:15px;
}
.red-legacy .red-product-grid--catalog .red-product-card--grid .red-product-card__tax,
.red-legacy .red-product-grid--catalog .red-product-card--grid .red-product-card__stock{
font-size:7px;
}
.red-legacy .red-product-grid--catalog .red-product-card--grid .red-product-card__actions{
width:100%;
align-items:flex-end;
gap:4px;
margin-left:0;
}
.red-legacy .red-product-grid--catalog .red-product-card--grid .red-product-card__cart-form{
display:flex;
flex:1 1 auto;
flex-direction:column;
align-items:stretch;
gap:4px;
min-width:0;
}
.red-legacy .red-product-grid--catalog .red-product-card--grid .red-product-qty{
width:100%;
grid-template-columns:27px minmax(28px,1fr) 27px;
}
.red-legacy .red-product-grid--catalog .red-product-card--grid .red-product-action--cart{
width:100%;
}
.red-legacy .red-product-grid--catalog .red-product-card--grid .red-product-action--info{
flex:0 0 28px;
align-self:flex-end;
}
.red-legacy .red-product-grid--catalog .red-product-card--grid .red-product-card__consult{
max-width:100%;
white-space:normal;
}
}
@media(max-width:360px){
.red-legacy .red-catalog-results > .red-product-grid.red-product-grid--catalog{
grid-template-columns:1fr;
}
}
/* ========================================================================== */
/* Fase 4.8.4 — directorio en mapa del Mall */
/* ========================================================================== */
.red-mall-map-page{
margin:20px 0 28px;
overflow:hidden;
border:1px solid #e6eaf0;
border-radius:18px;
background:#fff;
box-shadow:0 14px 40px rgba(16,24,40,.06);
}
.red-mall-map-page__header{
padding:18px 22px 16px;
text-align:center;
}
.red-mall-map-page__header>span{
color:var(--red-color-primary,#e11d2e);
font-size:8px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}
.red-mall-map-page__header h1{
margin:4px 0 5px;
color:#101828;
font-size:clamp(22px,2.3vw,32px);
line-height:1.1;
}
.red-mall-map-page__header p{
max-width:760px;
margin:0 auto;
color:#667085;
font-size:11px;
}
.red-mall-map-canvas{
width:100%;
height:clamp(390px,58vh,650px);
min-height:390px;
background:#eef2f6;
}
.red-mall-map-canvas.is-error{
display:grid;
place-items:center;
padding:24px;
color:#667085;
font-size:12px;
}
.red-mall-map-marker{
display:grid;
place-items:center;
width:46px;
height:46px;
padding:4px;
border:3px solid #fff;
border-radius:50%;
background:#fff;
box-shadow:0 7px 20px rgba(16,24,40,.25);
cursor:pointer;
transition:transform .15s ease,box-shadow .15s ease;
}
.red-mall-map-marker:hover{
transform:translateY(-3px) scale(1.05);
box-shadow:0 10px 26px rgba(16,24,40,.32);
}
.red-mall-map-marker img{
width:100%;
height:100%;
border-radius:50%;
object-fit:contain;
}
.red-mall-map-marker span{
color:#344054;
font-size:10px;
font-weight:900;
}
.red-mall-map-info{
width:min(285px,70vw);
padding:3px 2px;
color:#344054;
font-family:var(--red-font-family,Arial,sans-serif);
}
.red-mall-map-info__head{
display:flex;
align-items:center;
gap:8px;
margin-bottom:7px;
}
.red-mall-map-info__head img{
width:38px;
height:38px;
border-radius:8px;
object-fit:contain;
}
.red-mall-map-info__head strong{
color:#101828;
font-size:13px;
line-height:1.25;
}
.red-mall-map-info p{
margin:4px 0;
color:#667085;
font-size:10px;
line-height:1.4;
}
.red-mall-map-info__actions{
display:flex;
gap:7px;
margin-top:9px;
}
.red-mall-map-info__actions a{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:30px;
padding:6px 9px;
border-radius:7px;
background:#101828;
color:#fff;
font-size:9px;
font-weight:800;
text-decoration:none;
}
.red-mall-map-info__actions a+ a{
background:#eef4ff;
color:#175cd3;
}
.red-mall-map-directory{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:8px;
padding:12px;
border-top:1px solid #edf0f3;
background:#fbfcfd;
}
.red-mall-map-directory__item{
display:grid;
grid-template-columns:42px minmax(0,1fr) auto;
align-items:center;
gap:8px;
min-width:0;
padding:8px;
border:1px solid #e7eaee;
border-radius:10px;
background:#fff;
color:#344054;
text-decoration:none;
}
.red-mall-map-directory__item:hover{
border-color:#cfd5dc;
box-shadow:0 5px 16px rgba(16,24,40,.05);
}
.red-mall-map-directory__item>img,
.red-mall-map-directory__item>span:first-child{
width:42px;
height:42px;
border-radius:9px;
object-fit:contain;
background:#f8fafc;
}
.red-mall-map-directory__item>span:first-child{
display:grid;
place-items:center;
}
.red-mall-map-directory__item>span:nth-child(2){
min-width:0;
}
.red-mall-map-directory__item strong,
.red-mall-map-directory__item small{
display:block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.red-mall-map-directory__item strong{
color:#101828;
font-size:10px;
}
.red-mall-map-directory__item small{
margin-top:2px;
color:#98a2b3;
font-size:8px;
}
.red-mall-map-fallback{
display:grid;
place-items:center;
min-height:360px;
padding:36px;
background:#f8fafc;
color:#667085;
text-align:center;
}
.red-mall-map-fallback i{
margin-bottom:8px;
font-size:34px;
}
.red-mall-map-fallback strong{
color:#344054;
font-size:13px;
}
.red-mall-map-fallback span{
margin-top:4px;
font-size:10px;
}
@media(max-width:1100px){
.red-mall-map-directory{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:760px){
.red-mall-map-page{margin:10px 0 18px;border-radius:13px;}
.red-mall-map-page__header{padding:14px 12px 12px;}
.red-mall-map-page__header p{font-size:9px;}
.red-mall-map-canvas{height:58vh;min-height:360px;}
.red-mall-map-directory{grid-template-columns:1fr 1fr;padding:8px;}
.red-mall-map-directory__item{grid-template-columns:36px minmax(0,1fr);padding:7px;}
.red-mall-map-directory__item>img,
.red-mall-map-directory__item>span:first-child{width:36px;height:36px;}
.red-mall-map-directory__item>i{display:none;}
}
@media(max-width:430px){
.red-mall-map-directory{grid-template-columns:1fr;}
}
/* ========================================================================== */
/* Fase 4.8.4.1 — alineación CKEditor / contenido dinámico */
/* ========================================================================== */
/*
* `.red-legacy img { display:block; }` es correcto para responsive, pero un
* IMG block ya no obedece visualmente el `text-align:center` de su padre.
* Respetamos las alineaciones que CKEditor guarda inline sin quitar display:block.
*/
.red-legacy .dynamic-content-root .text-center > img,
.red-legacy .dynamic-content-root [style*="text-align:center"] > img,
.red-legacy .dynamic-content-root [style*="text-align: center"] > img,
.red-legacy .dynamic-content-root .text-center img,
.red-legacy .dynamic-content-root [style*="text-align:center"] img,
.red-legacy .dynamic-content-root [style*="text-align: center"] img {
margin-left:auto;
margin-right:auto;
}
.red-legacy .dynamic-content-root .text-right > img,
.red-legacy .dynamic-content-root [style*="text-align:right"] > img,
.red-legacy .dynamic-content-root [style*="text-align: right"] > img {
margin-left:auto;
margin-right:0;
}
.red-legacy .dynamic-content-root .text-left > img,
.red-legacy .dynamic-content-root [style*="text-align:left"] > img,
.red-legacy .dynamic-content-root [style*="text-align: left"] > img {
margin-left:0;
margin-right:auto;
}
/* ========================================================================== */
/* Fase 4.8.5 — ubicación Mall: limpiar dirección + UX móvil */
/* ========================================================================== */
.red-location-form__address .red-location-address-control{
position:relative;
display:block;
width:100%;
}
.red-location-address-control .red-location-place-host,
.red-location-address-control .red-location-place-autocomplete,
.red-location-address-control > input[type="text"]{
width:100%;
max-width:100%;
box-sizing:border-box;
}
.red-location-address-control > input[type="text"]{
padding-right:46px;
}
.red-location-address-clear{
position:absolute;
z-index:8;
top:50%;
right:8px;
display:grid;
place-items:center;
width:30px;
height:30px;
padding:0;
transform:translateY(-50%);
border:1px solid #d0d5dd;
border-radius:999px;
background:rgba(255,255,255,.96);
color:#344054;
box-shadow:0 1px 3px rgba(16,24,40,.08);
font:inherit;
cursor:pointer;
}
.red-location-address-clear[hidden]{
display:none !important;
}
.red-location-address-clear:hover,
.red-location-address-clear:focus-visible{
border-color:var(--red-color-primary,#e11d2e);
color:var(--red-color-primary,#e11d2e);
outline:none;
}
.red-location-address-clear span{
display:block;
font-size:19px;
line-height:1;
transform:translateY(-1px);
}
@media(max-width:620px){
.red-location-address-clear{
right:7px;
width:28px;
height:28px;
}
}
/* ========================================================================== */
/* Fase 4.9.0.1 — Compatibilidad global para contenido enriquecido legacy */
/* ========================================================================== */
/*
* Los contenidos históricos de CKEditor/LayoutManager pueden guardar clases
* Bootstrap 3 como:
*
* row
* col-xs-6 col-sm-6 col-md-6 col-lg-6
* layout-column / layout-column-editable
*
* `.dynamic-content-root` ya soportaba buena parte de este contrato.
* `.red-rich-content` permite reutilizar la compatibilidad en eventos,
* noticias, páginas dinámicas, productos, etc. sin cargar Bootstrap completo.
*/
.red-rich-content,
.red-rich-content *{
box-sizing:border-box;
}
.red-rich-content{
width:100%;
min-width:0;
max-width:100%;
}
.red-rich-content .row,
.red-rich-content .layout-row{
display:flex;
flex-wrap:wrap;
min-width:0;
margin-left:-12px;
margin-right:-12px;
}
.red-rich-content .layout-column,
.red-rich-content .layout-column-editable,
.red-rich-content [class*="col-xs-"],
.red-rich-content [class*="col-sm-"],
.red-rich-content [class*="col-md-"],
.red-rich-content [class*="col-lg-"]{
position:relative;
min-width:0;
min-height:1px;
padding-left:12px;
padding-right:12px;
}
.red-rich-content .layout-column-editable{
width:100%;
}
.red-rich-content img,
.red-rich-content video,
.red-rich-content iframe{
max-width:100%;
}
.red-rich-content img{
height:auto;
}
/* Bootstrap 3 xs: activo desde el ancho mínimo. */
.red-rich-content .col-xs-1{width:8.333333%}
.red-rich-content .col-xs-2{width:16.666667%}
.red-rich-content .col-xs-3{width:25%}
.red-rich-content .col-xs-4{width:33.333333%}
.red-rich-content .col-xs-5{width:41.666667%}
.red-rich-content .col-xs-6{width:50%}
.red-rich-content .col-xs-7{width:58.333333%}
.red-rich-content .col-xs-8{width:66.666667%}
.red-rich-content .col-xs-9{width:75%}
.red-rich-content .col-xs-10{width:83.333333%}
.red-rich-content .col-xs-11{width:91.666667%}
.red-rich-content .col-xs-12{width:100%}
/* Breakpoints Bootstrap 3: sm 768 / md 992 / lg 1200. */
@media(min-width:768px){
.red-rich-content .col-sm-1{width:8.333333%}
.red-rich-content .col-sm-2{width:16.666667%}
.red-rich-content .col-sm-3{width:25%}
.red-rich-content .col-sm-4{width:33.333333%}
.red-rich-content .col-sm-5{width:41.666667%}
.red-rich-content .col-sm-6{width:50%}
.red-rich-content .col-sm-7{width:58.333333%}
.red-rich-content .col-sm-8{width:66.666667%}
.red-rich-content .col-sm-9{width:75%}
.red-rich-content .col-sm-10{width:83.333333%}
.red-rich-content .col-sm-11{width:91.666667%}
.red-rich-content .col-sm-12{width:100%}
}
@media(min-width:992px){
.red-rich-content .col-md-1{width:8.333333%}
.red-rich-content .col-md-2{width:16.666667%}
.red-rich-content .col-md-3{width:25%}
.red-rich-content .col-md-4{width:33.333333%}
.red-rich-content .col-md-5{width:41.666667%}
.red-rich-content .col-md-6{width:50%}
.red-rich-content .col-md-7{width:58.333333%}
.red-rich-content .col-md-8{width:66.666667%}
.red-rich-content .col-md-9{width:75%}
.red-rich-content .col-md-10{width:83.333333%}
.red-rich-content .col-md-11{width:91.666667%}
.red-rich-content .col-md-12{width:100%}
}
@media(min-width:1200px){
.red-rich-content .col-lg-1{width:8.333333%}
.red-rich-content .col-lg-2{width:16.666667%}
.red-rich-content .col-lg-3{width:25%}
.red-rich-content .col-lg-4{width:33.333333%}
.red-rich-content .col-lg-5{width:41.666667%}
.red-rich-content .col-lg-6{width:50%}
.red-rich-content .col-lg-7{width:58.333333%}
.red-rich-content .col-lg-8{width:66.666667%}
.red-rich-content .col-lg-9{width:75%}
.red-rich-content .col-lg-10{width:83.333333%}
.red-rich-content .col-lg-11{width:91.666667%}
.red-rich-content .col-lg-12{width:100%}
}
.red-rich-content .text-left{text-align:left!important}
.red-rich-content .text-center{text-align:center!important}
.red-rich-content .text-right{text-align:right!important}
.red-rich-content [style*="text-align:center"] img,
.red-rich-content [style*="text-align: center"] img{
margin-left:auto;
margin-right:auto;
}
.red-rich-content [style*="text-align:right"] img,
.red-rich-content [style*="text-align: right"] img{
margin-left:auto;
margin-right:0;
}
/* ========================================================================== */
/* Fase 4.9.0.2 — LayoutManager/Bootstrap 3 interpretado globalmente */
/* ========================================================================== */
.red-main .layoutmanager,
.red-main .layoutmanager *{
box-sizing:border-box;
}
.red-main .layoutmanager,
.red-main .layoutmanager .layout-container,
.red-main .layoutmanager .container,
.red-main .layoutmanager .container-fluid{
width:100%;
max-width:100%;
min-width:0;
}
.red-main .layoutmanager .container,
.red-main .layoutmanager .container-fluid,
.red-main .layoutmanager .layout-container{
margin-left:auto;
margin-right:auto;
}
.red-main .layoutmanager .row,
.red-main .layoutmanager .layout-row{
display:flex;
flex-wrap:wrap;
min-width:0;
margin-left:-12px;
margin-right:-12px;
}
.red-main .layoutmanager .layout-column,
.red-main .layoutmanager .layout-column-editable,
.red-main .layoutmanager [class^="col-"],
.red-main .layoutmanager [class*=" col-"]{
position:relative;
min-width:0;
min-height:1px;
padding-left:12px;
padding-right:12px;
}
.red-main .layoutmanager .layout-column-editable{
width:100%;
}
.red-main .layoutmanager img,
.red-main .layoutmanager video,
.red-main .layoutmanager iframe{
max-width:100%;
}
.red-main .layoutmanager img{height:auto}
.red-main .layoutmanager .col-xs-1{width:8.333333%}
.red-main .layoutmanager .col-xs-2{width:16.666667%}
.red-main .layoutmanager .col-xs-3{width:25%}
.red-main .layoutmanager .col-xs-4{width:33.333333%}
.red-main .layoutmanager .col-xs-5{width:41.666667%}
.red-main .layoutmanager .col-xs-6{width:50%}
.red-main .layoutmanager .col-xs-7{width:58.333333%}
.red-main .layoutmanager .col-xs-8{width:66.666667%}
.red-main .layoutmanager .col-xs-9{width:75%}
.red-main .layoutmanager .col-xs-10{width:83.333333%}
.red-main .layoutmanager .col-xs-11{width:91.666667%}
.red-main .layoutmanager .col-xs-12{width:100%}
@media(min-width:768px){
.red-main .layoutmanager .col-sm-1{width:8.333333%}
.red-main .layoutmanager .col-sm-2{width:16.666667%}
.red-main .layoutmanager .col-sm-3{width:25%}
.red-main .layoutmanager .col-sm-4{width:33.333333%}
.red-main .layoutmanager .col-sm-5{width:41.666667%}
.red-main .layoutmanager .col-sm-6{width:50%}
.red-main .layoutmanager .col-sm-7{width:58.333333%}
.red-main .layoutmanager .col-sm-8{width:66.666667%}
.red-main .layoutmanager .col-sm-9{width:75%}
.red-main .layoutmanager .col-sm-10{width:83.333333%}
.red-main .layoutmanager .col-sm-11{width:91.666667%}
.red-main .layoutmanager .col-sm-12{width:100%}
}
@media(min-width:992px){
.red-main .layoutmanager .col-md-1{width:8.333333%}
.red-main .layoutmanager .col-md-2{width:16.666667%}
.red-main .layoutmanager .col-md-3{width:25%}
.red-main .layoutmanager .col-md-4{width:33.333333%}
.red-main .layoutmanager .col-md-5{width:41.666667%}
.red-main .layoutmanager .col-md-6{width:50%}
.red-main .layoutmanager .col-md-7{width:58.333333%}
.red-main .layoutmanager .col-md-8{width:66.666667%}
.red-main .layoutmanager .col-md-9{width:75%}
.red-main .layoutmanager .col-md-10{width:83.333333%}
.red-main .layoutmanager .col-md-11{width:91.666667%}
.red-main .layoutmanager .col-md-12{width:100%}
}
@media(min-width:1200px){
.red-main .layoutmanager .col-lg-1{width:8.333333%}
.red-main .layoutmanager .col-lg-2{width:16.666667%}
.red-main .layoutmanager .col-lg-3{width:25%}
.red-main .layoutmanager .col-lg-4{width:33.333333%}
.red-main .layoutmanager .col-lg-5{width:41.666667%}
.red-main .layoutmanager .col-lg-6{width:50%}
.red-main .layoutmanager .col-lg-7{width:58.333333%}
.red-main .layoutmanager .col-lg-8{width:66.666667%}
.red-main .layoutmanager .col-lg-9{width:75%}
.red-main .layoutmanager .col-lg-10{width:83.333333%}
.red-main .layoutmanager .col-lg-11{width:91.666667%}
.red-main .layoutmanager .col-lg-12{width:100%}
}
.red-main .layoutmanager .text-left{text-align:left!important}
.red-main .layoutmanager .text-center{text-align:center!important}
.red-main .layoutmanager .text-right{text-align:right!important}
.red-main .layoutmanager [style*="text-align:center"] img,
.red-main .layoutmanager [style*="text-align: center"] img{
margin-left:auto;
margin-right:auto;
}
.red-main .layoutmanager [style*="text-align:right"] img,
.red-main .layoutmanager [style*="text-align: right"] img{
margin-left:auto;
margin-right:0;
}
/* Fase 4.9.0.3 — Compartir reutilizable en eventos */
.red-social-share--event{
justify-content:flex-end;
color:inherit;
margin-top:12px;
}
.red-social-share--event .red-social-share__label{
color:inherit;
font-size:12px;
font-weight:800;
}
.legacy-event-summary__aside .red-social-share--event{
width:100%;
}
@media(max-width:720px){
.red-social-share--event{
justify-content:flex-start;
}
}
/* Fase 5.2.4 — categorías Home con imagen cuando existe. */
.legacy-category-card--with-image{display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:14px;min-height:92px}
.legacy-category-card__media{width:72px;height:72px;display:flex;align-items:center;justify-content:center;border-radius:12px;overflow:hidden;background:rgba(15,23,42,.035);flex:0 0 72px}
.legacy-category-card__media img{display:block;width:100%;height:100%;object-fit:contain;padding:5px}
.legacy-category-card__name{min-width:0;line-height:1.3}
@media (max-width:640px){.legacy-category-card--with-image{grid-template-columns:58px minmax(0,1fr) auto;min-height:76px;gap:10px}.legacy-category-card__media{width:58px;height:58px;flex-basis:58px}}
/* Fase 5.2.7 - semántica CI3 de width_category.
fullscreen: módulo + contenido ocupan todo el viewport (equivalente a module-fullscreen w-100 px-0).
fullscreen_background: el fondo ocupa viewport y el contenido usa el ancho normal del template.
width_content: fondo + contenido permanecen dentro del container actual. */
.red-home-module--content-width{width:100%;margin-inline:0}
.red-main .red-home-module--fullscreen,
.red-main .red-home-module--fullscreen-background{
position:relative;
left:50%;
width:100vw;
max-width:100vw;
margin-left:-50vw;
margin-right:-50vw;
padding-left:0;
padding-right:0;
border-radius:0;
}
.red-main .red-home-module--fullscreen>.red-home-module__inner{
width:100%;
max-width:none;
margin:0;
padding-left:0;
padding-right:0;
}
.red-main .red-home-module--fullscreen-background>.red-home-module__inner--constrained{
width:min(calc(100% - 32px),var(--red-content-width,1360px));
max-width:var(--red-content-width,1360px);
margin-inline:auto;
}
@media(max-width:780px){
.red-main .red-home-module--fullscreen-background>.red-home-module__inner--constrained{
width:min(calc(100% - 24px),var(--red-content-width,1360px));
}
}
/* Dashboard/Storefront V2 — notificaciones con contador, estado leído y acciones. */
.legacy-action-button,.red-header-notification-button{position:relative}
.red-header-notification-button{display:flex;min-width:62px;flex-direction:column;align-items:center;gap:3px;padding:7px 8px;border:0;border-radius:12px;background:transparent;color:inherit;font:inherit;font-size:12px;cursor:pointer}.red-header-notification-button:hover{background:#f1f5f9}.red-header-notification-button .red-icon{width:20px;height:20px}
.red-notification-badge{top:-2px!important;right:-2px!important;box-shadow:0 0 0 2px #fff}
.red-notification-drawer{width:min(94vw,460px)}.red-notification-drawer__header>div:first-child{display:grid;gap:2px}.red-notification-drawer__header small{color:#98a2b3;font-size:.7rem;font-weight:600}.red-notification-drawer__tools{display:flex;align-items:center;gap:4px}.red-notification-read-all{padding:6px 9px!important;border:1px solid #e5e9f0!important;border-radius:999px!important;background:#fff!important;color:var(--red-color-primary,#2563eb)!important;font:inherit!important;font-size:.68rem!important;font-weight:800!important;white-space:nowrap}.red-notification-read-all:hover{background:#f8fafc!important}.red-notification-read-all:disabled{opacity:.5;cursor:wait}
.red-notification-loading{display:flex;align-items:center;justify-content:center;gap:6px;min-height:130px}.red-notification-loading span{width:8px;height:8px;border-radius:50%;background:var(--red-color-primary,#2563eb);animation:red-notification-pulse 1s infinite ease-in-out}.red-notification-loading span:nth-child(2){animation-delay:.15s}.red-notification-loading span:nth-child(3){animation-delay:.3s}@keyframes red-notification-pulse{0%,100%{opacity:.28;transform:scale(.82)}50%{opacity:1;transform:scale(1)}}
.red-notification{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr);gap:11px;margin:0 0 9px;padding:13px;border:1px solid #e9edf3;border-radius:16px;background:#fff;box-shadow:0 4px 16px rgba(15,23,42,.035);transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.red-notification:hover{transform:translateY(-1px);border-color:#d8dee8;box-shadow:0 9px 22px rgba(15,23,42,.07)}.red-notification.is-unread{border-color:color-mix(in srgb,var(--red-color-primary,#2563eb) 27%,#e9edf3);background:linear-gradient(135deg,color-mix(in srgb,var(--red-color-primary,#2563eb) 4%,#fff),#fff)}.red-notification.is-unread::before{content:"";position:absolute;top:15px;right:14px;width:7px;height:7px;border-radius:50%;background:var(--red-color-primary,#2563eb);box-shadow:0 0 0 4px color-mix(in srgb,var(--red-color-primary,#2563eb) 9%,transparent)}.red-notification__icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:color-mix(in srgb,var(--red-color-primary,#2563eb) 9%,#fff);color:var(--red-color-primary,#2563eb)}.red-notification__content{display:grid;gap:5px;min-width:0}.red-notification__meta{display:flex;align-items:center;gap:7px;padding-right:12px;color:#98a2b3;font-size:.62rem}.red-notification__meta time{margin-left:auto;white-space:nowrap}.red-notification__store{display:inline-flex;max-width:180px;padding:3px 7px;border-radius:999px;background:#f2f4f7;color:#475467;font-size:.6rem;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.red-notification__title{padding-right:10px;color:#1d2939;font-size:.8rem;line-height:1.35}.red-notification__content>p{margin:0;color:#667085;font-size:.72rem;line-height:1.45}.red-notification__footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px}.red-notification__footer>a{display:inline-flex;align-items:center;justify-content:center;padding:6px 9px;border-radius:9px;background:var(--red-color-primary,#2563eb);color:#fff;font-size:.66rem;font-weight:800;text-decoration:none}.red-notification__footer>a.is-loading{opacity:.65;pointer-events:none}.red-notification__status{display:inline-flex;align-items:center;max-width:180px;padding:4px 7px;border-radius:999px;background:#fff7ed;color:#c2410c;font-size:.6rem;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.red-notification__status.is-active{background:#eff6ff;color:#1d4ed8}.red-notification__status.is-history{background:#f2f4f7;color:#667085}.red-notification-empty{display:grid;place-items:center;min-height:180px;padding:24px;border:1px dashed #d8dee8;border-radius:17px;background:#fbfcfe;text-align:center}.red-notification-empty i{display:grid;place-items:center;width:42px;height:42px;margin-bottom:7px;border-radius:50%;background:#ecfdf3;color:#067647;font-size:1.1rem}.red-notification-empty strong{color:#344054}.red-notification-empty p{margin:4px 0 0;color:#667085;font-size:.72rem}.red-notification-empty.is-error{border-color:#fecaca;background:#fff7f7}.red-notification-empty.is-error i{background:#fee2e2;color:#b42318}
@media(max-width:520px){.red-notification-drawer{width:100vw}.red-notification-drawer__header{padding:14px}.red-notification-drawer__body{padding:11px}.red-notification-read-all{font-size:.62rem!important}.red-notification{grid-template-columns:34px minmax(0,1fr);padding:11px}.red-notification__icon{width:34px;height:34px}.red-notification__meta{flex-wrap:wrap}.red-notification__meta time{margin-left:0}.red-notification__footer{align-items:flex-start;flex-direction:column}}
/* El drawer de notificaciones usa superficie clara incluso en el template
legacy, cuyo menú lateral general puede usar el color oscuro/primario. */
.legacy-drawer.red-notification-drawer{background:#f8fafc;color:#101828}.legacy-drawer.red-notification-drawer .red-drawer__header{border-color:#e5e9f0;background:#fff}.legacy-drawer.red-notification-drawer .red-drawer__header button{color:#475467}.legacy-drawer.red-notification-drawer .red-drawer__body{background:#f8fafc}
/* Dashboard Cliente PRO V3 — contadores + favoritos. */
.legacy-wishlist-action,.legacy-cart-action,.legacy-action-button,.red-wishlist-link{position:relative}
.legacy-actions .red-badge,.red-header-actions .red-badge{
min-width:22px;
height:22px;
padding:0 6px;
font-size:11px;
font-weight:900;
line-height:22px;
box-shadow:0 0 0 2px #fff,0 4px 12px rgba(15,23,42,.18);
}
.red-wishlist-badge{background:var(--red-color-primary,#b00000)}
.red-bottom-nav .red-badge{
min-width:20px;
height:20px;
padding:0 5px;
font-size:10px;
font-weight:900;
line-height:20px;
box-shadow:0 0 0 2px #fff,0 3px 8px rgba(15,23,42,.16);
}
.red-bottom-nav .red-wishlist-badge--pwa{top:-7px;right:-12px}
.red-wishlist-page{display:grid;gap:20px;padding:4px 0 18px}
.red-wishlist-page__head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px}
.red-wishlist-page__eyebrow{display:block;margin-bottom:4px;color:var(--red-color-primary,#2563eb);font-size:.68rem;font-weight:900;letter-spacing:.12em}
.red-wishlist-page__head h1{margin:0;font-size:clamp(1.7rem,3vw,2.35rem);color:#101828}
.red-wishlist-page__head p{margin:6px 0 0;color:#667085}
.red-wishlist-page__back{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border:1px solid #e1e6ed;border-radius:12px;background:#fff;color:#475467;text-decoration:none;font-weight:800;white-space:nowrap}
.red-wishlist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.red-wishlist-card{overflow:hidden;display:grid;grid-template-rows:auto 1fr;border:1px solid #e5e9f0;border-radius:20px;background:#fff;box-shadow:0 10px 30px rgba(15,23,42,.055)}
.red-wishlist-card__media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#f8fafc}
.red-wishlist-card__media img{width:100%;height:100%;object-fit:contain;padding:12px;transition:transform .2s ease}
.red-wishlist-card__media:hover img{transform:scale(1.025)}
.red-wishlist-card__body{display:grid;align-content:start;gap:9px;padding:15px}
.red-wishlist-card__store{display:inline-flex;justify-self:start;padding:4px 8px;border-radius:999px;background:#f2f4f7;color:#475467;font-size:.68rem;font-weight:800}
.red-wishlist-card h2{margin:0;font-size:1rem;line-height:1.35}
.red-wishlist-card h2 a{text-decoration:none;color:#101828}
.red-wishlist-card__price{display:flex;align-items:baseline;gap:8px;min-height:24px}
.red-wishlist-card__price strong{font-size:1.15rem;color:#101828}
.red-wishlist-card__price del{color:#98a2b3;font-size:.78rem}
.red-wishlist-card__actions{display:flex;gap:8px;margin-top:2px}
.red-wishlist-card__actions>a,.red-wishlist-card__actions button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:39px;padding:9px 12px;border-radius:11px;font:inherit;font-size:.78rem;font-weight:850;cursor:pointer;text-decoration:none}
.red-wishlist-card__actions>a{flex:1;border:0;background:var(--red-color-primary,#2563eb);color:#fff}
.red-wishlist-card__actions form{margin:0}
.red-wishlist-card__actions button{border:1px solid #e3e7ed;background:#fff;color:#b42318}
.red-wishlist-empty[hidden],.red-wishlist-grid[hidden]{display:none!important}
.red-wishlist-empty{display:grid;place-items:center;gap:8px;min-height:300px;padding:36px;border:1px dashed #d5dce7;border-radius:22px;background:#fbfcfe;text-align:center}
.red-wishlist-empty>span{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:color-mix(in srgb,var(--red-color-primary,#2563eb) 8%,#fff);color:var(--red-color-primary,#2563eb);font-size:1.45rem}
.red-wishlist-empty h2{margin:0;color:#344054}.red-wishlist-empty p{margin:0;max-width:520px;color:#667085}.red-wishlist-empty .red-button{margin-top:5px;text-decoration:none}
@media(max-width:780px){
.red-wishlist-page__head{align-items:flex-start;flex-direction:column}
.red-wishlist-grid{grid-template-columns:1fr 1fr;gap:10px}
.red-wishlist-card__body{padding:11px}.red-wishlist-card h2{font-size:.88rem}
.red-wishlist-card__actions{display:grid}.red-wishlist-card__actions>a,.red-wishlist-card__actions button{width:100%}
}
@media(max-width:430px){.red-wishlist-grid{grid-template-columns:1fr}}
/* Dashboard Cliente PRO V4 — badges uniformes, feedback de conteos y PWA. */
.legacy-actions .red-badge,.red-header-actions .red-badge{
width:auto!important;
min-width:22px!important;
height:22px!important;
padding:0 6px!important;
border-radius:999px!important;
font-size:11px!important;
font-weight:900!important;
line-height:22px!important;
}
.red-cart-badge{background:#dc2626!important;color:#fff!important}
.red-wishlist-badge{background:#64748b!important;color:#fff!important}
.red-notification-badge{background:#16a34a!important;color:#fff!important}
.red-bottom-nav .red-badge{
min-width:20px!important;
height:20px!important;
padding:0 5px!important;
line-height:20px!important;
font-size:10px!important;
}
.red-bottom-nav .red-notification-badge--pwa{top:-7px!important;right:-12px!important}
.red-count-pulse{animation:red-count-pop 1.15s cubic-bezier(.2,.8,.2,1)}
.red-count-pulse .red-badge{animation:red-badge-pop 1.15s cubic-bezier(.2,.8,.2,1)}
@keyframes red-count-pop{0%,100%{transform:translateZ(0)}18%{transform:translateY(-2px) scale(1.08)}36%{transform:translateY(0) scale(1)}55%{transform:translateY(-1px) scale(1.04)}}
@keyframes red-badge-pop{0%,100%{box-shadow:0 0 0 2px #fff,0 4px 12px rgba(15,23,42,.18)}22%{box-shadow:0 0 0 5px rgba(220,38,38,.16),0 6px 18px rgba(15,23,42,.22);transform:scale(1.18)}48%{transform:scale(.96)}}
.red-notification-badge.red-count-fresh{animation:red-notification-fresh 1.5s ease 2}
@keyframes red-notification-fresh{0%,100%{filter:none}35%{filter:brightness(1.18);transform:scale(1.16)}}
/* Dashboard Cliente PRO V5 — coherencia de badges y editor de dirección reutilizado. */
.legacy-actions .red-badge,.red-header-actions .red-badge{top:-6px!important;right:-6px!important;display:grid!important;place-items:center!important;min-width:22px!important;height:22px!important;padding:0 5px!important;line-height:1!important;text-align:center!important}
.legacy-actions .red-badge[hidden],.red-header-actions .red-badge[hidden],.red-bottom-nav .red-badge[hidden]{display:none!important}
.red-bottom-nav .red-badge{display:grid!important;place-items:center!important;min-width:20px!important;height:20px!important;line-height:1!important;text-align:center!important}
.red-location-modal.is-account-editor .red-location-saved,.red-location-modal.is-account-editor [data-red-location-show-welcome]{display:none!important}
/* V21 compatibilidad CI3: embeds multimedia administrados (YouTube/Vimeo).
El HTML del iframe se valida en LegacyModuleContentProcessor; aquí sólo
garantizamos un contenedor responsive y sin desbordes. */
.red-legacy-embed{
position:relative;
width:100%;
max-width:100%;
aspect-ratio:16/9;
margin:16px auto;
overflow:hidden;
background:#000;
border-radius:var(--red-radius,12px);
}
.red-legacy-embed>iframe{
position:absolute;
inset:0;
display:block;
width:100%;
height:100%;
border:0;
}
/* ========================================================================== */
/* PRODUCT_DETAIL_PRO_V1 — ficha comercial responsive + galería S3 resiliente */
/* ========================================================================== */
.red-product-default .red-product-hero{
grid-template-columns:minmax(0,1.08fr) minmax(350px,.92fr);
gap:30px;
padding:24px;
border-color:#e6e9ee;
border-radius:20px;
box-shadow:0 18px 46px rgba(16,24,40,.06);
}
.red-product-default .red-product-hero__info{
position:sticky;
top:calc(var(--red-sticky-header-offset,94px) + 14px);
align-self:start;
gap:0;
}
.red-product-hero__info-primary,
.red-product-hero__actions{min-width:0}
.red-product-default .red-product-hero__meta{margin-bottom:12px}
.red-product-default .red-product-title-row h1{
font-size:clamp(28px,3vw,44px);
line-height:1.04;
letter-spacing:-.03em;
}
.red-product-default .red-product-wishlist{
width:44px;
height:44px;
flex-basis:44px;
border-color:#dfe3e8;
box-shadow:0 3px 10px rgba(16,24,40,.04);
}
.red-product-default .red-product-price{margin-top:17px}
.red-product-default .red-product-price__current{
font-size:clamp(31px,3.8vw,46px);
font-weight:900;
}
.red-product-default .red-product-price__tax{
margin-top:7px;
font-size:10px;
font-weight:750;
font-style:normal;
}
.red-product-default .red-product-price__availability{
margin-top:8px;
font-size:10px;
}
.red-product-default .red-product-hero__summary{
margin-top:15px;
font-size:11px;
line-height:1.55;
}
.red-product-default .red-product-hero__summary-card{display:contents}
.red-product-default .red-product-hero__summary-title{display:none}
.red-product-default .red-product-purchase{margin-top:19px;gap:12px}
.red-product-default .red-product-purchase__form{
display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:10px;
}
.red-product-default .red-product-purchase__qty{
grid-template-columns:42px 52px 42px;
height:50px;
border-radius:13px;
}
.red-product-default .red-product-purchase__qty input{
width:52px;
font-size:13px;
}
.red-product-default .red-product-purchase__qty button{font-size:21px}
.red-product-default .red-product-purchase__button{
width:100%;
min-height:50px;
min-width:0;
border-radius:13px;
font-size:13px;
letter-spacing:-.01em;
}
.red-product-purchase__consult{
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
align-items:center;
gap:11px;
width:100%;
min-height:68px;
padding:12px 14px;
border:1px solid #d8eadf;
border-radius:13px;
background:#fbfffc;
color:#12833b;
text-decoration:none;
transition:border-color .15s ease,background .15s ease,transform .15s ease;
}
.red-product-purchase__consult:hover{
border-color:#9dd4ad;
background:#f5fff8;
transform:translateY(-1px);
}
.red-product-purchase__consult-icon{
display:grid;
place-items:center;
width:38px;
height:38px;
border-radius:11px;
background:#ebf8ef;
}
.red-product-purchase__consult-icon svg{
width:21px;
height:21px;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round;
}
.red-product-purchase__consult-copy{display:grid;gap:2px;min-width:0}
.red-product-purchase__consult-copy strong{font-size:11px;line-height:1.2}
.red-product-purchase__consult-copy small{color:#667085;font-size:8px;font-weight:550;line-height:1.35}
.red-product-purchase__consult-arrow{font-size:28px;line-height:1;color:#159447}
.red-product-default .red-product-trust{
grid-template-columns:repeat(3,minmax(0,1fr));
gap:0;
margin-top:18px;
padding:14px 0;
border-top:1px solid #eaecf0;
border-bottom:1px solid #eaecf0;
}
.red-product-default .red-product-trust>div{
padding:4px 12px;
border:0;
border-radius:0;
background:transparent;
}
.red-product-default .red-product-trust>div+div{border-left:1px solid #eaecf0}
.red-product-default .red-product-trust__icon{
display:grid;
place-items:center;
width:34px;
height:34px;
flex:0 0 34px;
border-radius:10px;
background:#f4f7ff;
color:#2563eb;
}
.red-product-default .red-product-trust__icon svg{
width:21px;
height:21px;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round;
}
.red-product-default .red-product-trust__item:nth-child(2) .red-product-trust__icon{color:#1677d2;background:#f0f8ff}
.red-product-default .red-product-trust__item:nth-child(3) .red-product-trust__icon{color:#0f69c9;background:#f1f7ff}
.red-product-default .red-product-trust strong{font-size:9px;color:#101828}
.red-product-default .red-product-trust small{font-size:7px;line-height:1.35}
.red-product-default .red-product-advisor{
margin-top:14px;
min-height:76px;
padding:12px 14px;
border-color:#cde8d5;
border-radius:13px;
background:linear-gradient(90deg,#f3fff7,#fbfffc);
}
.red-product-advisor__copy{
display:flex;
align-items:center;
gap:10px;
min-width:0;
}
.red-product-advisor__copy>span:last-child{display:grid;gap:2px;min-width:0}
.red-product-default .red-product-advisor__copy strong{
display:block;
min-height:0;
padding:0;
border:0;
background:transparent;
color:#117f39;
font-size:11px;
}
.red-product-default .red-product-advisor__copy small{
display:block;
color:#667085;
font-size:8px;
font-weight:550;
line-height:1.35;
}
.red-product-advisor__icon{
display:grid;
place-items:center;
width:36px;
height:36px;
flex:0 0 36px;
border-radius:10px;
background:#e8f8ed;
color:#159447;
}
.red-product-advisor__icon svg{
width:21px;
height:21px;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round;
}
.red-product-default .red-product-advisor__button{
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px;
min-height:38px;
padding:8px 12px;
border:1px solid #80c494;
border-radius:10px;
background:#fff;
color:#12833b;
font-size:10px;
white-space:nowrap;
}
.red-product-advisor__button>span{
color:inherit;
font-size:inherit;
font-weight:inherit;
}
.red-product-advisor__button svg{
width:17px;
height:17px;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round;
}
.red-product-default .red-product-gallery{
grid-template-columns:76px minmax(0,1fr);
gap:12px;
min-height:520px;
}
.red-product-default .red-product-gallery__thumbs{
max-height:520px;
padding:2px;
}
.red-product-default .red-product-gallery__thumb{
flex-basis:70px;
width:70px;
height:70px;
border-radius:11px;
}
.red-product-default .red-product-gallery__stage{
min-height:520px;
border-radius:16px;
background:#fff;
}
.red-product-default .red-product-gallery__main{
max-height:520px;
padding:22px;
}
.red-product-gallery__nav{
position:absolute;
z-index:3;
top:50%;
display:grid;
place-items:center;
width:36px;
height:36px;
padding:0 0 3px;
transform:translateY(-50%);
border:1px solid #e4e7ec;
border-radius:50%;
background:rgba(255,255,255,.94);
color:#344054;
font-size:26px;
line-height:1;
cursor:pointer;
box-shadow:0 5px 16px rgba(16,24,40,.08);
}
.red-product-gallery__nav.is-prev{left:10px}
.red-product-gallery__nav.is-next{right:10px}
.red-product-gallery__counter{
position:absolute;
right:12px;
bottom:12px;
z-index:2;
display:none;
min-width:42px;
padding:5px 8px;
border-radius:999px;
background:rgba(16,24,40,.72);
color:#fff;
font-size:8px;
font-weight:800;
text-align:center;
}
.red-product-gallery img.is-broken{opacity:.16}
.red-product-default .red-product-content-grid{margin-top:22px}
.red-product-default .red-product-section{
border-color:#e6e9ee;
border-radius:16px;
box-shadow:0 8px 24px rgba(16,24,40,.035);
}
.red-product-default .red-product-specifications-card .red-product-section__heading h2{
font-size:20px;
}
.red-product-default .red-product-specs__item{
grid-template-columns:minmax(140px,.9fr) minmax(0,1.1fr);
padding:10px 2px;
border-bottom:1px solid #eef0f3;
}
.red-product-default .red-product-specs__item:last-child{border-bottom:0}
.red-product-default .red-product-specs__item span{color:#344054;font-weight:750}
.red-product-default .red-product-specs__item strong{color:#101828;font-weight:600}
@media(max-width:1180px){
.red-product-default .red-product-hero{
grid-template-columns:minmax(0,1fr) minmax(330px,.88fr);
gap:20px;
}
.red-product-default .red-product-gallery,
.red-product-default .red-product-gallery__stage{min-height:450px}
.red-product-default .red-product-gallery__main{max-height:450px}
}
@media(max-width:900px){
.red-product-default .red-product-hero{
display:grid;
grid-template-columns:1fr;
gap:14px;
padding:16px;
}
.red-product-default .red-product-hero__info{display:contents;position:static}
.red-product-default .red-product-hero__info-primary{order:1}
.red-product-default .red-product-hero__gallery{order:2}
.red-product-default .red-product-hero__actions{order:3}
.red-product-default .red-product-gallery{
display:flex;
flex-direction:column;
gap:10px;
min-height:auto;
}
.red-product-default .red-product-gallery__stage{order:1;min-height:430px}
.red-product-default .red-product-gallery__thumbs{
order:2;
flex-direction:row;
max-height:none;
overflow-x:auto;
padding:2px 1px 5px;
scroll-snap-type:x proximity;
}
.red-product-default .red-product-gallery__thumb{
flex:0 0 68px;
width:68px;
height:68px;
scroll-snap-align:start;
}
.red-product-default .red-product-gallery__main{max-height:430px;padding:16px}
.red-product-default .red-product-trust{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:620px){
.red-product-breadcrumb{padding-inline:4px}
.red-product-default .red-product-hero{
gap:12px;
padding:12px;
border-radius:15px;
box-shadow:0 8px 22px rgba(16,24,40,.045);
}
.red-product-default .red-product-title-row{align-items:flex-start}
.red-product-default .red-product-title-row h1{
font-size:25px;
line-height:1.1;
letter-spacing:-.025em;
}
.red-product-default .red-product-wishlist{
width:42px;
height:42px;
flex-basis:42px;
}
.red-product-default .red-product-price__current{font-size:35px}
.red-product-default .red-product-hero__summary{font-size:10px}
.red-product-default .red-product-gallery__stage{min-height:350px}
.red-product-default .red-product-gallery__main{max-height:350px;padding:10px}
.red-product-default .red-product-gallery__thumb{
flex-basis:60px;
width:60px;
height:60px;
}
.red-product-gallery__zoom{width:34px;height:34px}
.red-product-gallery__nav{width:34px;height:34px;font-size:24px}
.red-product-gallery__counter{display:block}
.red-product-default .red-product-purchase__form{
grid-template-columns:118px minmax(0,1fr);
align-items:stretch;
}
.red-product-default .red-product-purchase__qty{
grid-template-columns:34px 50px 34px;
width:118px;
height:50px;
}
.red-product-default .red-product-purchase__qty input{width:50px}
.red-product-default .red-product-purchase__button{
min-width:0;
min-height:50px;
padding:8px 10px;
font-size:11px;
}
.red-product-purchase__consult{min-height:66px;padding:11px 12px}
.red-product-default .red-product-trust{
grid-template-columns:repeat(3,minmax(0,1fr));
margin-top:15px;
padding:12px 0;
}
.red-product-default .red-product-trust>div{
display:grid;
justify-items:center;
align-content:start;
gap:5px;
padding:3px 7px;
text-align:center;
}
.red-product-default .red-product-trust__icon{margin:auto;width:32px;height:32px;flex-basis:32px}
.red-product-default .red-product-trust strong{font-size:8px}
.red-product-default .red-product-trust small{font-size:6.5px}
.red-product-default .red-product-advisor{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:10px;
min-height:68px;
}
.red-product-default .red-product-advisor__copy small{font-size:7px}
.red-product-default .red-product-advisor__copy strong{font-size:9px}
.red-product-default .red-product-advisor__button{font-size:9px;padding-inline:10px}
.red-product-default .red-social-share--product{margin-top:12px;padding-top:10px}
.red-product-default .red-product-specs__item{
grid-template-columns:minmax(110px,.85fr) minmax(0,1.15fr);
gap:12px;
padding:9px 0;
}
}
@media(max-width:380px){
.red-product-default .red-product-purchase__form{grid-template-columns:108px minmax(0,1fr)}
.red-product-default .red-product-purchase__qty{grid-template-columns:31px 46px 31px;width:108px}
.red-product-default .red-product-purchase__qty input{width:46px}
.red-product-default .red-product-purchase__button{font-size:10px}
}
@media(max-width:900px){
/* En móvil el resumen sale del hero y queda como tarjeta independiente,
inmediatamente antes de la descripción completa. */
.red-product-default .red-product-summary-card{
display:block;
width:100%;
margin-top:18px;
}
.red-product-default .red-product-summary-card .red-product-hero__summary-title{
display:block;
margin-bottom:12px;
}
.red-product-default .red-product-summary-card .red-product-hero__summary{
margin:0 !important;
padding:0 !important;
}
.red-product-default .red-product-summary-card + .red-product-content-grid{
margin-top:18px;
}
}
/* ALEX_PRODUCT_STICKY_GALLERY_V28_START */
/* ==========================================================================
Proyecto Alex · V28
Detalle de producto: galería sticky + descripción corta responsive
Marker: ALEX_PRODUCT_STICKY_GALLERY_V28
Alcance deliberadamente limitado a .red-product-default para no alterar
templates personalizados, cards, marketplace ni componentes de checkout.
========================================================================== */
/* --------------------------------------------------------------------------
* DESKTOP / TABLET HORIZONTAL
* La galería acompaña el scroll únicamente dentro del hero del producto.
* Al terminar el hero (antes de la descripción larga), sticky se libera de
* forma natural. No usa JavaScript ni listeners de scroll.
* ----------------------------------------------------------------------- */
@media (min-width: 992px) {
.red-product-default .red-product-hero {
align-items: start !important;
overflow: visible !important;
}
.red-product-default .red-product-hero__gallery {
position: -webkit-sticky !important;
position: sticky !important;
top: calc(var(--red-sticky-header-offset, 88px) + 14px) !important;
align-self: start !important;
height: max-content !important;
z-index: 6 !important;
}
/* Los wrappers internos no deben crear un segundo scroll vertical. */
.red-product-default .red-product-hero__gallery .red-product-gallery,
.red-product-default .red-product-hero__gallery [data-red-product-gallery] {
overflow-y: visible !important;
}
}
/* --------------------------------------------------------------------------
* RESPONSIVE
* En móvil la galería vuelve al flujo normal y la descripción corta debe
* mostrarse. El selector es intencionalmente específico porque storefront.css
* tiene reglas históricas que pueden ocultar .red-product-hero__summary.
* ----------------------------------------------------------------------- */
@media (max-width: 991.98px) {
.red-product-default .red-product-hero,
.red-product-default .red-product-hero__gallery {
overflow: visible !important;
}
.red-product-default .red-product-hero__gallery {
position: static !important;
top: auto !important;
height: auto !important;
max-height: none !important;
transform: none !important;
}
.red-product-default .red-product-hero__summary {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
color: inherit !important;
font-size: .88rem !important;
line-height: 1.55 !important;
white-space: normal !important;
overflow: visible !important;
-webkit-line-clamp: unset !important;
}
.red-product-default .red-product-hero__summary > :first-child {
margin-top: 0 !important;
}
.red-product-default .red-product-hero__summary > :last-child {
margin-bottom: 0 !important;
}
}
/* Pantallas muy pequeñas: evitar que tablas/listas de una descripción corta
* provoquen overflow horizontal accidental. */
@media (max-width: 575.98px) {
.red-product-default .red-product-hero__summary,
.red-product-default .red-product-hero__summary * {
max-width: 100% !important;
overflow-wrap: anywhere;
}
.red-product-default .red-product-hero__summary table {
display: block;
width: 100% !important;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
@media print {
.red-product-default .red-product-hero__gallery {
position: static !important;
top: auto !important;
}
}
/* ALEX_PRODUCT_STICKY_GALLERY_V28_END */
/* V33 CRM UI — Eventos/Servicios (templates modernos) */
.red-events-page{min-height:320px;margin-bottom:56px}.red-events-page__header{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid #e5e7eb}.red-events-page__eyebrow{display:block;color:var(--red-color-primary,#2563eb);font-size:11px;font-weight:800;text-transform:uppercase}.red-events-page__header h1{margin:3px 0 0}.red-events-page__count{font-size:12px;color:#64748b}.red-events-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.red-event-card{padding:16px;overflow:hidden}.red-event-card>a:first-child{display:block}.red-event-card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px}.red-event-card h2{margin:12px 0 6px;font-size:19px}.red-event-card h2 a{text-decoration:none}.red-event-card p{margin:5px 0;color:#64748b;font-size:13px}.red-events-grid--lista{grid-template-columns:1fr;gap:11px}.red-events-grid--lista .red-event-card{display:grid;grid-template-columns:minmax(160px,230px) minmax(0,1fr) auto;gap:12px 16px;align-items:center;padding:10px 12px}.red-events-grid--lista .red-event-card>a:first-child{grid-row:1/6}.red-events-grid--lista .red-event-card img{height:132px;aspect-ratio:auto}.red-events-grid--lista .red-event-card h2,.red-events-grid--lista .red-event-card p{grid-column:2;margin:0}.red-events-grid--lista .red-event-card>.red-button{grid-column:3;grid-row:1/6}.red-events-empty{padding:48px;text-align:center;color:#64748b}@media(max-width:680px){.red-events-grid{grid-template-columns:1fr}.red-events-grid--lista .red-event-card{grid-template-columns:100px minmax(0,1fr);gap:5px 10px;padding:8px}.red-events-grid--lista .red-event-card>a:first-child{grid-row:1/7}.red-events-grid--lista .red-event-card img{height:105px}.red-events-grid--lista .red-event-card h2,.red-events-grid--lista .red-event-card p{grid-column:2}.red-events-grid--lista .red-event-card>.red-button{display:none}.red-event-card h2{font-size:15px}.red-event-card p{font-size:11px}}
/* V33.1 CRM UI — compact event image + mobile Google access */
.red-events-grid--lista .red-event-card>a:first-child{
overflow:hidden;
border-radius:10px;
background:#f8fafc;
}
.red-events-grid--lista .red-event-card img{
object-fit:contain;
object-position:center;
background:#f8fafc;
}
@media(max-width:680px){
.red-events-grid--lista .red-event-card{
grid-template-columns:112px minmax(0,1fr);
gap:6px 10px;
}
.red-events-grid--lista .red-event-card>a:first-child{
align-self:start;
}
.red-events-grid--lista .red-event-card img{
width:112px;
height:76px;
aspect-ratio:16/9;
object-fit:contain;
}
}
@media(max-width:980px){
.red-auth-google--mobile-dock:not([hidden]){
position:fixed;
z-index:69;
left:max(12px,env(safe-area-inset-left));
right:max(12px,env(safe-area-inset-right));
bottom:calc(72px + env(safe-area-inset-bottom));
width:auto;
max-width:520px;
margin-inline:auto;
box-shadow:0 10px 32px rgba(15,23,42,.18);
background:#fff;
}
.red-auth-shell{padding-bottom:72px}
}