/* ============================================================================
Reysa Soluciones — sistema de diseño (réplica del landing Next)
Cargado en el vía view_render_event (Vue no lo toca).
Prefijo de clases: .rx-* | Marca: #003366 / #0055a5 / #00a0e3 | IBM Plex Sans
============================================================================ */
:root{
--brand-primary:#003366;
--brand-secondary:#0055a5;
--brand-accent:#00a0e3;
--bg-main:#ffffff;
--bg-muted:#f8fafc;
--text-main:#1e293b;
--text-muted:#64748b;
--s400:#94a3b8;--s300:#cbd5e1;--s200:#e2e8f0;--s100:#f1f5f9;--s600:#475569;--s700:#334155;--s900:#0f172a;
--radius:.625rem;
--font-plex-sans:"IBM Plex Sans";
--font-plex-mono:"IBM Plex Mono";
--font-sans:var(--font-plex-sans),ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--font-mono:var(--font-plex-mono),ui-monospace,"Courier New",monospace;
--brand-gradient:linear-gradient(155deg,#003366 0%,#0055a5 42%,#00a0e3 100%);
}
/* utilidades base (scoped a marca; no piso el body global del shop) */
.rx{font-family:var(--font-sans);color:var(--text-main);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.rx *{box-sizing:border-box;}
.rx-container{max-width:1280px;margin:0 auto;padding:0 24px;}
.rx-section{padding:100px 0;}
@media(max-width:768px){.rx-section{padding:64px 0;}}
.rx-section.rx-alt{background:var(--bg-muted);}
/* `:where()` no aporta especificidad: esto es un reset, no una regla de color.
Escrito como `.rx a{...}` (0,1,1) le ganaba a cualquier `.boton{color:#fff}`
(0,1,0) y dejaba los botones sólidos con el texto heredado, oscuro sobre el
color de marca — pasaba en el héroe de varias páginas de servicio. */
:where(.rx) :where(a){text-decoration:none;color:inherit;}
/* Logo de la tienda: el tema lo pinta forzando 131x29 y deforma cualquier
archivo que no tenga esa proporcion (el de Reysa es 162x46). Se respeta el
ancho maximo y se deja la altura libre — vale igual si algun dia se sube otro
logo desde Admin > Configuracion > Canales. */
img[width="131"][height="29"]{width:auto;height:auto;max-width:131px;max-height:38px;}
/* ---- header nav (inyectado en el header Bagisto; CSS en head, no Vue) ---- */
.rx-nav{display:flex;align-items:center;gap:34px;margin-left:14px;}
.rx-nav a{font-size:.95rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--s700);
white-space:nowrap;transition:color .3s;position:relative;padding:4px 0;}
.rx-nav a:hover{color:var(--brand-primary);}
.rx-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--brand-accent);
transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.22,1,.36,1);}
.rx-nav a:hover::after{transform:scaleX(1);}
@media(max-width:1023px){.rx-nav{display:none;}}
/* nav dentro del drawer móvil de Bagisto (arriba, sobre las categorías) */
.rx-mnav{display:flex;flex-direction:column;padding:12px 0 14px;border-bottom:1px solid var(--s200);background:var(--bg-muted);}
.rx-mnav .rx-mnav-lbl{padding:2px 16px 10px;font-size:10px;font-weight:800;letter-spacing:.2em;
text-transform:uppercase;color:var(--text-muted);}
.rx-mnav a{display:flex;align-items:center;gap:12px;margin:0 8px;padding:12px 12px;border-radius:12px;
font-size:15px;font-weight:600;color:var(--brand-primary);transition:background .18s;}
.rx-mnav a:active{background:#fff;}
.rx-mnav a svg{width:20px;height:20px;color:var(--brand-accent);flex:0 0 auto;}
.rx-mnav a>span{flex:1 1 auto;}
.rx-mnav a .rx-mnav-arrow{width:16px;height:16px;color:var(--s300);}
/* barra de nav móvil siempre visible (bajo el header): 3 tarjetas con icono */
.rx-mbar{display:none;}
@media(max-width:1023px){
.rx-mbar{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px 12px;
background:var(--bg-muted);border-bottom:1px solid var(--s200);}
.rx-mbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
padding:10px 4px;border-radius:12px;background:#fff;border:1px solid var(--s200);
font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--brand-primary);
box-shadow:0 1px 2px rgba(15,23,42,.05);transition:transform .15s,background .2s,color .2s;}
.rx-mbar a svg{width:19px;height:19px;color:var(--brand-accent);transition:color .2s;}
.rx-mbar a:active,.rx-mbar a:focus{transform:translateY(1px);background:var(--brand-primary);color:#fff;}
.rx-mbar a:active svg,.rx-mbar a:focus svg{color:#fff;}
}
/* ---- tipografía de marca ---- */
.rx-eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:.75rem;font-weight:700;letter-spacing:.3em;
text-transform:uppercase;color:var(--brand-accent);}
.rx-eyebrow::before{content:"";width:44px;height:2px;background:var(--brand-accent);}
.rx-eyebrow.rx-center{justify-content:center;}
.rx-eyebrow.rx-center::after{content:"";width:44px;height:2px;background:var(--brand-accent);}
.rx-h1{font-size:clamp(2.4rem,5.4vw,4rem);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:1;
color:var(--brand-primary);margin:0;}
.rx-h2{font-size:clamp(1.9rem,3.8vw,3.2rem);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:1.02;
color:var(--brand-primary);margin:0;}
.rx-h3{font-size:1.25rem;font-weight:800;color:var(--brand-primary);margin:0;}
.rx .ac{color:var(--brand-accent);}
.rx-lead{font-size:1.06rem;line-height:1.7;color:var(--text-muted);}
.rx-kicker{font-size:.8rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--brand-accent);}
/* ---- botones ---- */
.rx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 28px;
font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border-radius:12px;border:0;cursor:pointer;
transition:background-color .3s,color .3s,border-color .3s,box-shadow .3s,transform .3s;}
.rx-btn--primary{background:var(--brand-primary);color:#fff;box-shadow:0 10px 15px -3px rgba(0,51,102,.30);}
.rx-btn--primary:hover{background:var(--brand-secondary);filter:brightness(1.02);}
.rx-btn--outline{border:2px solid rgba(0,51,102,.45);background:rgba(255,255,255,.85);color:var(--brand-primary);backdrop-filter:blur(4px);}
.rx-btn--outline:hover{border-color:var(--brand-accent);background:var(--brand-primary);color:#fff;}
.rx-btn--wa{background:#25D366;color:#fff;box-shadow:0 10px 15px -3px rgba(37,211,102,.35);}
.rx-btn--wa:hover{background:#1eb457;}
.rx-btn--sm{height:40px;padding:0 18px;font-size:12px;border-radius:10px;}
/* Color del texto de los botones-enlace.
Dos trampas, las dos ya vistas en vivo:
1) `.rx a{color:inherit}` (arriba) le gana por especificidad a `.rx-btn--*`
—lleva un selector de tipo— y dejaba el texto de los botones oscuros en el
color heredado, invisible sobre el navy. Por eso se re-declara con
`.rx a.rx-btn--*`.
2) ORDEN LVHA: `:visited` y `:hover` tienen la MISMA especificidad, así que
manda el que se declare último. Con el estado base después del hover, un
enlace YA VISITADO (p.ej. /contactenos) perdía el blanco al pasar el mouse
y quedaba el botón lleno de navy sin texto legible. Base primero, hover
después — siempre. */
.rx a.rx-btn--outline,.rx a.rx-btn--outline:visited{color:var(--brand-primary);}
.rx a.rx-btn--primary,.rx a.rx-btn--primary:visited,
.rx a.rx-btn--wa,.rx a.rx-btn--wa:visited{color:#fff;}
.rx a.rx-btn--primary:hover,.rx a.rx-btn--primary:focus-visible,
.rx a.rx-btn--wa:hover,.rx a.rx-btn--wa:focus-visible,
.rx a.rx-btn--outline:hover,.rx a.rx-btn--outline:focus-visible{color:#fff;}
/* Respuesta al hover: además del color, un pequeño levantamiento y más sombra
para que se note que es pulsable. El ícono va con `currentColor`, así que
cambia junto al texto. */
.rx-btn--primary:hover,.rx-btn--primary:focus-visible{background:var(--brand-secondary);
box-shadow:0 18px 28px -12px rgba(0,51,102,.55);transform:translateY(-2px);}
.rx-btn--outline:hover,.rx-btn--outline:focus-visible{border-color:var(--brand-primary);
background:var(--brand-primary);box-shadow:0 18px 28px -14px rgba(0,51,102,.6);transform:translateY(-2px);}
.rx-btn--wa:hover,.rx-btn--wa:focus-visible{background:#1eb457;
box-shadow:0 18px 28px -12px rgba(37,211,102,.6);transform:translateY(-2px);}
.rx-btn:active{transform:translateY(0);box-shadow:0 6px 12px -6px rgba(15,23,42,.4);}
.rx-btn:focus-visible{outline:3px solid rgba(0,160,227,.5);outline-offset:3px;}
/* En táctil no hay hover: el :active cubre la respuesta y se evita el estado
"pegado" tras el tap. */
@media (hover:none){
.rx-btn--primary:hover,.rx-btn--outline:hover,.rx-btn--wa:hover{transform:none;}
}
/* magnetic wrapper */
.rx-mag{display:inline-block;will-change:transform;}
.rx-mag .rx-btn{will-change:transform;}
/* ---- reveal on scroll (IntersectionObserver + CSS; nunca deja el contenido oculto) ---- */
.rx-reveal{opacity:0;transform:translateY(28px);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1);}
.rx-reveal.rx-in{opacity:1;transform:none;}
.rx-stag{opacity:0;transform:translateY(38px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);}
.rx-stag.rx-in{opacity:1;transform:none;}
html:not(.rx-js) .rx-reveal,html:not(.rx-js) .rx-stag{opacity:1!important;transform:none!important;}
@media (prefers-reduced-motion:reduce){.rx-reveal,.rx-stag{opacity:1!important;transform:none!important;}}
/* ---- 3D tilt card ---- */
.rx-tilt-scene{perspective:1200px;display:flex;align-items:stretch;justify-content:center;}
.rx-tilt-card{position:relative;width:100%;max-width:400px;transform-style:preserve-3d;will-change:transform;}
.rx-tilt-body{position:relative;width:100%;transform-style:preserve-3d;}
.rx-tilt-body>*{transform-style:preserve-3d;}
.rx-tilt-item{width:100%;transition:transform .3s ease-out;}
/* ---- pixel image ---- */
.rx-pix{position:relative;overflow:hidden;border-radius:1rem;}
.rx-pix-float{animation:rx-pixfloat 6s ease-in-out infinite;}
.rx-pix img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1);transform:scale(1.07);transition:filter .9s cubic-bezier(.4,0,.2,1),transform 1.1s cubic-bezier(.16,1,.3,1);}
.rx-pix.rx-pix-in img{transform:scale(1);}
.rx-pix img.rx-color{filter:grayscale(0);}
/* modo piezas (réplica PixelImage.tsx): la imagen se arma por celdas desde el centro */
.rx-pix-layer{position:absolute;inset:0;border-radius:inherit;}
.rx-pix-piece{position:absolute;inset:0;will-change:transform,opacity;backface-visibility:hidden;}
.rx-pix .rx-pix-piece img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:none;filter:grayscale(1);transition:filter .9s cubic-bezier(.4,0,.2,1);}
.rx-pix-layer.rx-color .rx-pix-piece img{filter:grayscale(0);}
.rx-pix-shimmer{position:absolute;inset:0;pointer-events:none;border-radius:1rem;opacity:0;
background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.15) 45%,rgba(255,255,255,.25) 50%,rgba(255,255,255,.15) 55%,transparent 60%);
background-size:200% 100%;animation:rx-shimmer 3s ease-in-out forwards;}
/* ---- marquee testimonios ---- */
.rx-mq-mask{-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);}
.rx-mq-vp{overflow:hidden;padding:2px 0;}
.rx-mq-track{display:flex;width:max-content;animation:rx-marquee 78s linear infinite;}
.rx-mq-track--rev{animation:rx-marquee-rev 59s linear infinite;}
.rx-mq-group{display:flex;}
/* ---- beam de scroll ---- */
.rx-beam{position:sticky;top:7rem;z-index:10;height:calc(100vh - 8rem);width:3rem;flex-shrink:0;display:none;}
@media(min-width:1280px){.rx-beam{display:block;}}
.rx-beam-inner{position:relative;margin:0 auto;height:100%;width:2px;}
.rx-beam-bg{position:absolute;inset:0;border-radius:9999px;background:linear-gradient(to bottom,transparent,var(--s300),transparent);}
.rx-beam-fill{position:absolute;left:50%;width:2px;transform:translateX(-50%);border-radius:9999px;top:0;height:4%;
background:linear-gradient(to bottom,var(--brand-primary),var(--brand-accent),var(--brand-secondary));}
.rx-beam-dot{position:absolute;left:50%;width:1rem;height:1rem;transform:translateX(-50%);border-radius:9999px;
border:2px solid #fff;background:var(--brand-accent);box-shadow:0 0 20px rgba(0,160,227,.55);outline:2px solid var(--s100);top:6%;}
/* ---- meteors ---- */
.rx-meteor{position:absolute;width:2px;height:2px;border-radius:9999px;background:#71717a;box-shadow:0 0 0 1px rgba(255,255,255,.06);
pointer-events:none;transform:rotate(var(--angle));animation-name:rx-meteor;animation-timing-function:linear;animation-iteration-count:infinite;}
.rx-meteor i{position:absolute;top:50%;left:0;transform:translateY(-50%);height:1px;width:50px;
background:linear-gradient(to right,#71717a,transparent);z-index:-1;}
/* ---- stat count-up ---- */
.rx-stat b{display:block;font-weight:900;color:var(--brand-primary);line-height:1;}
.rx-stat span{color:var(--text-muted);}
/* ---- keyframes ---- */
@keyframes rx-pixfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes rx-shimmer{0%{opacity:0;background-position:200% 0}30%{opacity:1}100%{opacity:0;background-position:-200% 0}}
@keyframes rx-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes rx-marquee-rev{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes rx-meteor{0%{transform:rotate(var(--angle)) translateX(0);opacity:1}70%{opacity:1}100%{transform:rotate(var(--angle)) translateX(-500px);opacity:0}}
@keyframes rx-glow{0%,100%{opacity:.12;transform:scale(1)}50%{opacity:.25;transform:scale(1.15)}}
@keyframes rx-float{0%,100%{transform:translateY(0) rotate(0)}33%{transform:translateY(-6px) rotate(.3deg)}66%{transform:translateY(3px) rotate(-.2deg)}}
@media (prefers-reduced-motion:reduce){
.rx-mq-track,.rx-mq-track--rev,.rx-pix-float{animation:none!important;}
.rx-mq-track>.rx-mq-group:last-child,.rx-mq-track--rev>.rx-mq-group:last-child{display:none;}
}
/* ============================================================================
BANDA DE CONFIANZA + PIE DE PÁGINA de marca
--------------------------------------------------------------------------
Viven aquí (y no en un @push('styles') dentro de la vista) porque el layout
del shop pinta la banda y el footer DESPUÉS de haber volcado @stack('styles')
en el : un push desde esas vistas llegaría tarde y no se aplicaría.
Sin utilidades de Tailwind a propósito — el build del tema shop
(public/themes/shop/default/build) no se regenera desde estas vistas.
============================================================================ */
/* ---- banda de confianza (sustituye el "Free Shipping / EMI" de la demo) ---- */
.rxt{margin-top:64px;border-top:1px solid var(--s100);background:var(--bg-muted);font-family:var(--font-sans);}
@media(max-width:767px){.rxt{margin-top:44px;}}
.rxt-wrap{max-width:1280px;margin:0 auto;padding:36px 24px;display:grid;gap:26px;grid-template-columns:repeat(2,1fr);}
@media(min-width:1024px){.rxt-wrap{grid-template-columns:repeat(4,1fr);gap:20px;padding:40px 24px;}}
@media(max-width:480px){.rxt-wrap{padding:26px 16px;gap:18px;}}
.rxt-item{display:flex;align-items:flex-start;gap:14px;min-width:0;}
.rxt-ic{display:flex;align-items:center;justify-content:center;width:46px;height:46px;flex:0 0 auto;border-radius:13px;
background:#fff;border:1px solid var(--s200);color:var(--brand-accent);box-shadow:0 1px 2px rgba(15,23,42,.05);}
.rxt-ic svg{width:22px;height:22px;}
@media(max-width:480px){.rxt-ic{width:38px;height:38px;border-radius:11px;}.rxt-ic svg{width:19px;height:19px;}}
.rxt-tx{min-width:0;}
.rxt-tx b{display:block;font-size:.86rem;font-weight:800;letter-spacing:-.01em;color:var(--brand-primary);line-height:1.25;}
.rxt-tx span{display:block;margin-top:4px;font-size:.78rem;line-height:1.45;color:var(--text-muted);}
/* ---- pie de página ---- */
.rxf{position:relative;overflow:hidden;background:#00264d;color:#a9c2da;font-family:var(--font-sans);line-height:1.6;}
.rxf::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--brand-primary),var(--brand-accent) 55%,var(--brand-secondary));}
.rxf::after{content:"";position:absolute;top:-180px;right:-120px;width:520px;height:520px;border-radius:50%;pointer-events:none;
background:radial-gradient(circle,var(--brand-accent),transparent 68%);opacity:.14;}
.rxf a{color:inherit;text-decoration:none;}
.rxf-wrap{position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:60px 24px 40px;
display:grid;gap:38px;grid-template-columns:1fr;}
@media(min-width:640px){.rxf-wrap{grid-template-columns:repeat(2,1fr);gap:36px 28px;}}
@media(min-width:1024px){.rxf-wrap{grid-template-columns:1.55fr 1fr 1fr .9fr;gap:44px 32px;padding:70px 24px 46px;}}
@media(max-width:480px){.rxf-wrap{padding:44px 18px 32px;gap:30px;}}
/* marca */
@media(min-width:640px) and (max-width:1023px){.rxf-brand{grid-column:1 / -1;}}
.rxf-logo{display:inline-flex;align-items:center;gap:12px;}
.rxf-mark{width:44px;height:44px;flex:0 0 auto;}
.rxf-word b{display:block;font-size:1.15rem;font-weight:900;letter-spacing:.06em;color:#fff;line-height:1;}
.rxf-word small{display:block;margin-top:3px;font-size:.62rem;font-weight:700;letter-spacing:.34em;color:var(--brand-accent);}
.rxf-pitch{margin:20px 0 0;max-width:34rem;font-size:.87rem;line-height:1.7;color:#93aec8;}
.rxf-contact{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:12px;}
.rxf-ci{display:flex;align-items:center;gap:11px;font-size:.86rem;color:#cfe0f0;transition:color .2s;}
.rxf-ci svg{width:17px;height:17px;flex:0 0 auto;color:var(--brand-accent);transition:transform .2s;}
a.rxf-ci:hover{color:#fff;}
a.rxf-ci:hover svg{transform:translateY(-1px);}
.rxf-wa{display:inline-flex;align-items:center;gap:9px;margin-top:24px;height:44px;padding:0 20px;border-radius:11px;
background:#25d366;font-size:.79rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
box-shadow:0 12px 24px -14px rgba(37,211,102,.9);transition:background .2s,transform .2s,box-shadow .2s;}
.rxf a.rxf-wa,.rxf a.rxf-wa:visited{color:#fff;}
.rxf a.rxf-wa:hover,.rxf a.rxf-wa:focus-visible{color:#fff;background:#1eb457;transform:translateY(-2px);
box-shadow:0 18px 30px -14px rgba(37,211,102,1);}
.rxf-wa svg{width:17px;height:17px;}
/* columnas de enlaces */
.rxf-title{margin:0 0 18px;font-size:.68rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:#fff;}
.rxf-title::after{content:"";display:block;width:26px;height:2px;margin-top:10px;background:var(--brand-accent);}
.rxf-links{margin:0;padding:0;list-style:none;display:grid;gap:11px;}
.rxf-links a{display:inline-block;font-size:.845rem;color:#a9c2da;transition:color .2s,transform .2s;}
.rxf-links a:hover{color:#fff;transform:translateX(3px);}
.rxf-more{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-size:.76rem;font-weight:800;
letter-spacing:.08em;text-transform:uppercase;transition:gap .2s,color .2s;}
.rxf a.rxf-more,.rxf a.rxf-more:visited{color:var(--brand-accent);}
.rxf a.rxf-more:hover,.rxf a.rxf-more:focus-visible{color:#fff;gap:12px;}
.rxf-more svg{width:14px;height:14px;}
/* foco visible para teclado en todo el pie */
.rxf a:focus-visible{outline:2px solid var(--brand-accent);outline-offset:3px;border-radius:4px;}
/* newsletter (oculto por config; se conserva el formulario del tema) */
.rxf-news{position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:0 24px 44px;}
.rxf-news-box{border-top:1px solid rgba(255,255,255,.09);padding-top:34px;display:grid;gap:18px;align-items:center;}
@media(min-width:900px){.rxf-news-box{grid-template-columns:1fr 1fr;gap:40px;}}
.rxf-news h3{margin:0;font-size:1.1rem;font-weight:800;color:#fff;letter-spacing:-.01em;}
.rxf-news p{margin:8px 0 0;font-size:.83rem;color:#93aec8;}
/* barra inferior */
.rxf-bottom{position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.09);background:rgba(0,0,0,.16);}
.rxf-bottom-wrap{max-width:1280px;margin:0 auto;padding:20px 24px;display:flex;flex-wrap:wrap;align-items:center;
justify-content:space-between;gap:12px;font-size:.78rem;color:#8aa6c2;}
@media(max-width:640px){.rxf-bottom-wrap{justify-content:center;text-align:center;padding:18px;}}
.rxf-bottom p{margin:0;}
.rxf-legal{display:flex;flex-wrap:wrap;gap:18px;}
.rxf-legal a{transition:color .2s;}
.rxf-legal a:hover{color:#fff;}
.rxf-made{display:inline-flex;align-items:center;gap:7px;}
.rxf-made i{display:inline-block;width:16px;height:11px;border-radius:2px;flex:0 0 auto;
background:linear-gradient(90deg,#d91023 33.33%,#fff 33.33%,#fff 66.66%,#d91023 66.66%);}
/* ---- imagenes de catalogo: que nunca rompan su caja ----------------------
La galeria del tema limita el ANCHO (`max-w-[560px]`) pero no la ALTURA: con
una foto vertical el `height:auto` del preflight la estira fuera de su caja y
se come las pestanas y la descripcion de abajo. Con las fotos cuadradas de la
demo no se notaba; con fotos reales de producto, si.
`object-fit:contain` mantiene la proporcion sin recortar el producto. */
.rx-pimg{display:block;width:auto;height:auto;max-width:100%;max-height:610px;
object-fit:contain;margin-inline:auto;}
@media(max-width:1400px){.rx-pimg{max-height:520px;}}
/* Tarjeta de producto: caja cuadrada fija para la miniatura.
El tema intentaba reservar el cuadrado con `after:pb-[calc(100%+9px)]`, pero
ese truco vive en un ::after y un ![]()
es un elemento reemplazado: no lo
pinta. Resultado: cada foto imponia su propio alto y la grilla del catalogo
quedaba despareja (nombres y precios a distinta altura). `contain` en vez de
`cover` porque recortar una foto de producto esconde justo lo que se vende.
La clase cae tanto en el ![]()
como en el div del shimmer, asi que el hueco
se reserva desde el primer pintado y no hay salto de layout. */
.rx-cardimg{display:block;width:100%;aspect-ratio:1/1;}
/* el fondo solo en la imagen: en el div del shimmer taparia su animacion */
img.rx-cardimg{object-fit:contain;background:#fff;}