/* Exialoe — store chrome (header + footer). Paleta ALOE (verde natural + honey gold).
   Clases prefijadas lm- (se conservan para no romper el markup heredado del template). */

.lm-wrap{max-width:1240px;margin:0 auto;padding:0 28px}

/* ---------- TOP BANNER ---------- */
.lm-topbar{background:#C1121F;color:#FBEDED;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;overflow:hidden}
/* Banda superior EN MOVIMIENTO PERMANENTE (antes solo se desplazaba en movil).
   .lm-ticker-dup es una copia exacta de la pista: al desplazar -50% el bucle es
   continuo y no se ve el salto. Se pausa al pasar el raton para poder leerla. */
.lm-topbar .lm-wrap{display:flex;justify-content:flex-start;gap:2.6rem;align-items:center;padding-top:9px;padding-bottom:9px;flex-wrap:nowrap;width:max-content;max-width:none;animation:lmslide 45s linear infinite}
.lm-topbar:hover .lm-wrap{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.lm-topbar .lm-wrap{animation:none;flex-wrap:wrap;width:auto;justify-content:center}.lm-ticker-dup{display:none!important}}
.lm-topbar span{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap}
.lm-topbar a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap}
.lm-topbar svg{width:13px;height:13px;stroke:#C1121F;opacity:.95;fill:none}
.lm-ticker-main{display:flex;gap:2.6rem;align-items:center;flex-wrap:nowrap}
.lm-ticker-dup{display:flex;gap:2.6rem;align-items:center;flex-wrap:nowrap}

/* ---------- NAV ---------- */
header.lm-nav{position:sticky;top:0;z-index:200;background:rgba(246,250,243,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid #EBD9D9;transition:.3s}
.lm-nav-inner{display:flex;align-items:center;justify-content:space-between;height:84px}
/* flex:none IMPRESCINDIBLE: el logo es un flex-item y, cuando el nav no cabe, el
   navegador lo encogia a lo ancho manteniendo el alto -> salia DISTORSIONADO (y por
   debajo de 1100px llegaba a 0px de ancho, desaparecia). */
.lm-brand{display:flex;align-items:center;gap:13px;cursor:pointer;text-decoration:none;flex:none}
.lm-brand img{height:46px;width:auto;flex:none;object-fit:contain}
.lm-bk{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.5rem;letter-spacing:.02em;color:#C1121F;font-weight:600}
/* margin-left: separa el logo del primer enlace del menu (lo pidio el cliente).
   Los enlaces SI pueden encogerse (min-width:0) para que el logo y el CTA no lo hagan. */
.lm-nav-links{display:flex;gap:1.7rem;align-items:center;margin-left:2.4rem;min-width:0}
/* white-space:nowrap: sin esto el "Carrito" (icono + texto) se partia en dos lineas */
.lm-nav-links a{font-family:'Raleway',sans-serif;font-size:.82rem;letter-spacing:.06em;font-weight:500;color:#4A3A3C;cursor:pointer;position:relative;padding:4px 0;transition:.25s;text-decoration:none;white-space:nowrap}
.lm-nav-links a.lm-nl::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:1px;background:#C1121F;transition:.3s}
.lm-nav-links a.lm-nl:hover{color:#C1121F}
.lm-nav-links a.lm-nl:hover::after{width:100%}
/* Pagina ACTIVA: marco rojo alrededor para que el cliente sepa siempre donde esta.
   El borde y el padding se dan a TODOS los .lm-nl (transparentes) para que marcar
   uno como activo no cambie el ancho de la caja y descuadre el nav a ~900-1100px. */
.lm-nav-links a.lm-nl{border:2px solid transparent;border-radius:40px;padding:7px 14px}
.lm-nav-links a.lm-nl.lm-on{color:#C1121F;font-weight:700;border-color:#C1121F;background:rgba(193,18,31,.07)}
.lm-nav-links a.lm-nl.lm-on::after{display:none}
.lm-nav-links a.lm-nl::after{bottom:2px;left:14px;right:14px}
.lm-mobile-menu a.lm-on{color:#C1121F;font-weight:700;box-shadow:inset 3px 0 0 #C1121F;background:rgba(193,18,31,.07)}
/* CTA COMPRA AHORA: misma altura que el logo (56px) y con aire a los lados.
   flex:none + nowrap para que el flex del nav no lo encoja y el texto no se salga.
   PARPADEO: con el carrito VACIO parpadea rojo/verde para llamar la atencion; en
   cuanto hay algo en la cesta se queda rojo fijo y el que parpadea es el Carrito. */
/* OJO especificidad: `.lm-nav-links a` (0,1,1) gana a `.lm-nav-cta` (0,1,0) y le metia
   `padding:4px 0` + `font-size:.82rem` -> el texto se salia del boton. Por eso se
   cualifica con `.lm-nav-links a.lm-nav-cta`. */
.lm-nav-cta,.lm-nav-links a.lm-nav-cta{display:inline-flex!important;align-items:center;justify-content:center;gap:8px;flex:none;white-space:nowrap;background:#C1121F;color:#FDF7F6!important;height:56px;padding:0 42px;border-radius:40px;font-size:1rem;letter-spacing:.08em;font-weight:800;cursor:pointer;transition:transform .3s;box-shadow:0 4px 14px rgba(193,18,31,.32)}
@media(max-width:860px){.lm-nav-cta,.lm-nav-links a.lm-nav-cta{height:46px;font-size:.9rem;padding:0 30px}}
.lm-nav-cta:hover,.lm-nav-links a.lm-nav-cta:hover{transform:translateY(-1px) scale(1.04);background:#9E1B24}
.lm-nav-cta::after{display:none}
/* Carrito VACIO -> el CTA parpadea rojo/verde */
.lm-nav-cta{animation:rmrCtaBlink 1.4s steps(1,end) infinite}
@keyframes rmrCtaBlink{0%,49%{background:#C1121F;box-shadow:0 4px 14px rgba(193,18,31,.4)}50%,100%{background:#1DA851;box-shadow:0 4px 14px rgba(29,168,81,.4)}}
/* Carrito CON producto -> el CTA se queda rojo fijo (la clase la pone cart.js) */
body.rmr-cart-has-items .lm-nav-cta{animation:none;background:#C1121F}
@media(prefers-reduced-motion:reduce){.lm-nav-cta{animation:none}}

/* Carrito: parpadea en VERDE cuando hay producto en la cesta (clase puesta por cart.js) */
.lm-nav-links a.lm-nl.rmr-cart-on,.lm-mobile-menu a.rmr-cart-on{color:#fff!important;background:#1DA851;border-color:transparent!important;border-radius:40px;padding:7px 16px;animation:rmrCartBlink 1.2s steps(1,end) infinite}
.lm-nav-links a.lm-nl.rmr-cart-on::after{display:none}
@keyframes rmrCartBlink{0%,49%{background:#1DA851;box-shadow:0 0 0 0 rgba(29,168,81,.55)}50%,100%{background:#15803d;box-shadow:0 0 0 7px rgba(29,168,81,0)}}
@media(prefers-reduced-motion:reduce){.lm-nav-links a.lm-nl.rmr-cart-on,.lm-mobile-menu a.rmr-cart-on{animation:none}}

/* Nav estrecho: se aprieta el MENU, nunca el logo ni el CTA (ambos con flex:none).
   Van despues de las reglas base a proposito: misma especificidad, gana la ultima. */
@media(max-width:1400px){.lm-nav-links{gap:1rem;margin-left:1.6rem}.lm-nav-links a.lm-nl{padding:7px 10px}}
@media(max-width:1200px){.lm-nav-links{gap:.5rem;margin-left:1rem}.lm-nav-links a.lm-nl{padding:6px 7px;font-size:.76rem}.lm-nav-cta,.lm-nav-links a.lm-nav-cta{height:48px;padding:0 22px;font-size:.85rem}.rmr-lang{margin-left:0}}
.lm-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none}
.lm-burger span{width:24px;height:2px;background:#241416;transition:.3s}
/* Boton de menu movil (☰ + seccion activa): pastilla roja bien visible con icono ☰ blanco,
   sin salirse de la pantalla con palabras largas tipo CATALOGO — peticion Marius 17-ago.
   Pisa (via !important) los estilos que inyecta rmrSetBurgerLabel en cart.js. */
@media(max-width:1080px){
  .lm-burger.rmr-has-label{background:#C1121F!important;border:none!important;border-radius:40px!important;box-shadow:0 3px 12px rgba(193,18,31,.4)!important;padding:9px 15px!important;gap:8px!important;max-width:56vw!important;animation:rmrBurgerPulse 1.6s ease-in-out infinite}
  .lm-burger.rmr-has-label::before{content:"\2630";color:#fff;font-size:17px;line-height:1;flex:none}
  .lm-burger.rmr-has-label .rmr-burger-word{color:#fff!important;background:none!important;height:auto!important;width:max-content!important;font-size:13px!important;line-height:1.1!important;flex:0 0 auto;white-space:nowrap;max-width:44vw;overflow:hidden;text-overflow:ellipsis}
  .lm-burger.rmr-has-label .rmr-burger-word::after{color:#fff!important;opacity:.9!important}
}
@keyframes rmrBurgerPulse{0%,100%{box-shadow:0 3px 12px rgba(193,18,31,.4)}50%{box-shadow:0 3px 20px rgba(193,18,31,.85)}}
@media(prefers-reduced-motion:reduce){.lm-burger.rmr-has-label{animation:none}}

/* Acceso flotante al carrito en movil cuando hay productos en la cesta — peticion Marius 17-ago.
   Aparece abajo-izquierda (encima de la barra WhatsApp), enlaza a carrito.html, con nº de articulos + subtotal. */
.rmr-cart-fab{display:none}
@media(max-width:860px){
  body.rmr-cart-has-items .rmr-cart-fab{display:inline-flex;align-items:center;gap:.5rem;position:fixed;left:12px;bottom:calc(70px + env(safe-area-inset-bottom,0px));z-index:1150;background:#C1121F;color:#fff;font-family:'Raleway',system-ui,sans-serif;font-weight:800;font-size:14px;letter-spacing:.02em;text-decoration:none;padding:11px 17px;border-radius:40px;box-shadow:0 4px 16px rgba(193,18,31,.5);animation:rmrCartFabPulse 1.4s ease-in-out infinite}
  body.rmr-cart-has-items .rmr-cart-fab svg{width:20px;height:20px;stroke:#fff;fill:none;flex:none}
}
@keyframes rmrCartFabPulse{0%,100%{transform:scale(1);box-shadow:0 4px 16px rgba(193,18,31,.5)}50%{transform:scale(1.05);box-shadow:0 7px 24px rgba(193,18,31,.9)}}
@media(prefers-reduced-motion:reduce){.rmr-cart-fab{animation:none!important}}
.lm-mobile-menu{display:none;flex-direction:column;background:#FDF7F6;border-bottom:1px solid #EBD9D9}
.lm-mobile-menu a{padding:15px 28px;border-top:1px solid #EBD9D9;font-size:.92rem;font-weight:500;cursor:pointer;color:#4A3A3C;text-decoration:none;font-family:'Raleway',sans-serif}

/* ---------- FOOTER ---------- */
footer.lm-footer{background:#241416;color:#E6CCCE;padding:72px 0 28px;margin-top:0}
.lm-foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.1fr;gap:36px;margin-bottom:48px}
/* Bloque de marca del footer: TODO centrado (logo + las 3 lineas) */
.lm-foot-brand{display:flex;flex-direction:column;align-items:center;text-align:center}
.lm-foot-brand img{height:92px!important;margin-bottom:18px}
.lm-foot-brand .rmr-foot-line{display:block;font-size:.88rem;line-height:1.9;color:#C99EA0;font-family:'Raleway',sans-serif}
.lm-foot-brand .rmr-foot-line.rmr-foot-name{color:#FDF7F6;font-family:'Cormorant Garamond',Georgia,serif;font-size:1.25rem;letter-spacing:.04em;margin-top:6px}
.lm-fbk{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.6rem;color:#FDF7F6;margin-bottom:14px}
.lm-foot-brand p{font-size:.88rem;line-height:1.7;max-width:320px;color:#C99EA0;font-family:'Raleway',sans-serif}
.lm-foot-col h4{font-family:'Raleway',sans-serif;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:#C1121F;margin-bottom:18px;font-weight:600}
.lm-foot-col a,.lm-foot-col p{display:block;font-size:.88rem;color:#E3C7C9;margin-bottom:11px;cursor:pointer;transition:.2s;text-decoration:none;font-family:'Raleway',sans-serif}
.lm-foot-col a:hover{color:#FDF7F6}
.lm-foot-social{display:flex;gap:12px;margin-top:6px}
.lm-foot-social a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;margin:0}
.lm-foot-social a svg{width:17px;height:17px;fill:#E3C7C9;transition:.2s}
.lm-foot-social a:hover{border-color:#C1121F}
.lm-foot-social a:hover svg{fill:#C1121F}
.lm-foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;text-align:center;font-size:.78rem;color:#A9787A;line-height:1.8;font-family:'Raleway',sans-serif}
.lm-foot-bottom a{color:#C1121F}

@media(max-width:1080px){
  .lm-nav-links{display:none}
  .lm-burger{display:flex}
  .lm-foot-grid{grid-template-columns:1fr;gap:28px}
  .lm-foot-brand p{max-width:none}
}
@keyframes lmslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Ramirio lang switcher */
.rmr-lang{display:inline-flex;gap:2px;border:1px solid #EBD9D9;border-radius:40px;padding:2px;margin-left:4px}
.rmr-lang button{border:none;background:none;font-family:inherit;font-size:.66rem;font-weight:700;letter-spacing:.04em;color:#8A7476;padding:4px 8px;border-radius:40px;cursor:pointer;transition:.2s;line-height:1}
.rmr-lang button.active{background:#C1121F;color:#fff}
.rmr-lang button:hover:not(.active){color:#C1121F}
.rmr-lang-m{margin-top:14px;border-color:#EBD9D9}
/* Logo Ramirio más grande y visible (override del inline height:38px por página) */
.lm-brand img{height:56px!important;width:auto;border-radius:5px}
@media(max-width:860px){.lm-brand img{height:46px!important}}
/* Logo del footer: en móvil, altura fija + width auto y SIN max-width que lo recorte,
   así conserva su proporción y queda al mismo tamaño que el logo de la cabecera — petición Marius */
@media(max-width:860px){.lm-foot-brand img{height:46px!important;width:auto!important;max-width:none!important}}

/* ---------- FRANJA / RÚBRICA descripción Ramirio (entre menú y cuerpo) ---------- */
.rmr-ribbon{background:linear-gradient(90deg,#C1121F 0%,#9E1B24 100%);color:#FDECEC;overflow:hidden}
/* En MOVIMIENTO y en UNA SOLA FILA, igual que la banda de arriba: dos pistas identicas
   desplazandose -50% para que el bucle sea continuo. Se pausa al pasar el raton. */
.rmr-ribbon-inner{display:flex;width:max-content;animation:rmrRibbonSlide 60s linear infinite}
.rmr-ribbon:hover .rmr-ribbon-inner{animation-play-state:paused}
.rmr-ribbon-track{display:flex;align-items:center;gap:14px;padding:11px 2.6rem;white-space:nowrap}
.rmr-ribbon svg{width:18px;height:18px;stroke:#FBEDED;fill:none;flex:none;opacity:.9}
.rmr-ribbon p{font-family:'Raleway',sans-serif;font-size:12px;line-height:1.5;font-weight:500;letter-spacing:.01em;margin:0;white-space:nowrap}
.rmr-ribbon strong{color:#fff;font-weight:700}
@keyframes rmrRibbonSlide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.rmr-ribbon-inner{animation:none;width:auto}.rmr-ribbon-track{white-space:normal;justify-content:center}.rmr-ribbon-track+.rmr-ribbon-track{display:none}.rmr-ribbon p{white-space:normal;text-align:center}}

/* ---------- Barra de idioma bajo el logo — SOLO MÓVIL (en desktop ya está en el menú) ---------- */
.rmr-lang-bar{display:none;background:#FDF7F6;border-bottom:1px solid #EBD9D9}
.rmr-lang-bar .lm-wrap{display:flex;align-items:center;justify-content:center;gap:10px;padding:9px 28px}
.rmr-lang-bar .rmr-lang-label{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#8A7476;font-weight:700}
.rmr-lang-bar .rmr-lang{border-color:#E0C4C6}
.rmr-lang-bar .rmr-lang button{font-size:.8rem;padding:7px 14px;display:inline-flex;align-items:center;gap:5px}.rmr-flag{font-size:1rem;line-height:1}
@media(max-width:860px){.rmr-lang-bar{display:block}}

/* ---------- Botón flotante WhatsApp (global, todas las páginas) ---------- */
.wa-float{position:fixed;bottom:1.5rem;right:1.5rem;z-index:900;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(37,211,102,.35);transition:transform .2s}
.wa-float:hover{transform:scale(1.1)}
.wa-float svg{width:30px;height:30px;fill:#fff}
/* En móvil el botón de WhatsApp queda SIEMPRE fijo abajo en la pantalla (respeta la barra inferior del navegador) — petición Marius */
@media(max-width:860px){.wa-float{position:fixed!important;bottom:calc(1rem + env(safe-area-inset-bottom,0px))!important;right:1rem!important;top:auto!important;z-index:1000!important}}

/* Parpadeo verde / verde oscuro en TODOS los botones de WhatsApp (flotante + "Escríbenos por WhatsApp") */
.wa-float,a.btn-wa,.btn-primary.btn-wa{animation:rmrWaBlink 1.3s steps(1,end) infinite}
@keyframes rmrWaBlink{0%,49%{background:#25D366}50%,100%{background:#0F7A3D}}
@media(prefers-reduced-motion:reduce){.wa-float,a.btn-wa,.btn-primary.btn-wa{animation:none}}

/* Barra WhatsApp fija abajo en movil (.rmr-wa-bar): parpadeo + brillo para que llame mas la atencion — peticion Marius 14-ago */
.rmr-wa-bar{animation:rmrWaBarPulse 1.4s ease-in-out infinite}
@keyframes rmrWaBarPulse{0%,100%{background:#25D366;box-shadow:0 -3px 14px rgba(0,0,0,.18)}50%{background:#0F9D48;box-shadow:0 -4px 24px rgba(37,211,102,.85)}}
@media(prefers-reduced-motion:reduce){.rmr-wa-bar{animation:none}}

/* ---------- Mapa "Dónde estamos": en móvil a la mitad de alto ---------- */
@media(max-width:640px){#rmr-map{height:220px!important}}


/* ---------- Boton subir al inicio ---------- */
.rmr-totop{position:fixed;bottom:6rem;right:1.5rem;z-index:899;width:48px;height:48px;border-radius:50%;background:#C1121F;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(193,18,31,.4);opacity:0;visibility:hidden;transform:translateY(10px);transition:.25s;border:none;cursor:pointer}
.rmr-totop.show{opacity:1;visibility:visible;transform:translateY(0)}
.rmr-totop svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.rmr-totop:hover{background:#9E1B24}

/* ---- Footer en movil: menos distancia entre elementos + logo cuadrado (petición Marius 7-ago) ---- */
@media(max-width:1080px){
  footer.lm-footer{padding:44px 0 24px}
  .lm-foot-grid{gap:15px;margin-bottom:24px}
  .lm-foot-col h4{margin-bottom:12px}
  .lm-foot-col a,.lm-foot-col p{margin-bottom:7px}
  .lm-foot-brand{margin-bottom:2px}
  .lm-foot-brand img{height:44px!important;width:auto!important;max-width:150px!important;margin-bottom:10px;border-radius:5px}
  .lm-foot-brand p{margin-top:2px}
  /* Redes sociales en movil: que se vean TODAS, ordenadas, envueltas y centradas abajo (peticion Marius 7-ago) */
  .lm-foot-social{margin-top:10px;flex-wrap:wrap;justify-content:center;gap:10px;width:100%}
}

/* ---- Barra "Comparte esta pagina" (todas las paginas) ---- */
.rmr-sharebar{display:flex;flex-direction:column;align-items:center;gap:.7rem;padding:2rem 1rem;background:var(--cream-warm,#FBF5F3);border-top:1px solid var(--sand,#EBD9D9)}
.rmr-share-label{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#8A7476;font-weight:700}
.rmr-share-btns{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}
.rmr-share-btn{width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--sand,#EBD9D9);color:#241416;cursor:pointer;transition:transform .2s,background .2s,color .2s;padding:0;text-decoration:none}
.rmr-share-btn svg{width:19px;height:19px;fill:currentColor}
.rmr-share-btn:hover{transform:translateY(-2px);background:#C1121F;color:#fff;border-color:#C1121F}
.rmr-share-btn.ok{background:#1DA851;color:#fff;border-color:#1DA851}