/* Juvenile Madam — estilos de la tienda. Fiel al diseño original. */

.jm-app *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
.jm-app{margin:0;padding:0;color:#2a281d;font-family:'Mulish',system-ui,sans-serif;-webkit-font-smoothing:antialiased;background:#f4ecdc;}
.jm-app ::selection{background:#565a2b;color:#f5edde;}

/* Botón flotante de WhatsApp — siempre a un toque, con mensaje prearmado. */
.jm-wafloat{position:fixed;right:18px;bottom:18px;z-index:80;width:56px;height:56px;border-radius:100px;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 30px -10px rgba(0,0,0,0.5);text-decoration:none;transition:transform .2s ease,box-shadow .2s ease;}
.jm-wafloat:hover{transform:scale(1.08);box-shadow:0 18px 36px -10px rgba(0,0,0,0.55);}
.jm-wafloat::after{content:'';position:absolute;inset:0;border-radius:100px;animation:jmring 4s ease-out infinite;}

@keyframes jmfade{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
@keyframes jmmarquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes jmfloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@keyframes jmspin{from{transform:rotate(0);}to{transform:rotate(360deg);}}
@keyframes jmreveal{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);}}
@keyframes jmlineup{from{transform:translateY(108%);}to{transform:translateY(0);}}
@keyframes jmpop{0%{transform:scale(1);}45%{transform:scale(1.45);}100%{transform:scale(1);}}
@keyframes jmring{0%{box-shadow:0 0 0 0 rgba(37,211,102,0.45);}55%{box-shadow:0 0 0 15px rgba(37,211,102,0);}100%{box-shadow:0 0 0 0 rgba(37,211,102,0);}}
@keyframes jmimgin{from{opacity:0;transform:scale(1.045);}to{opacity:1;transform:scale(1);}}

/* Textura de lino: grano sutil sobre toda la página. */
.jm-grain{position:fixed;inset:0;z-index:100;pointer-events:none;opacity:0.05;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");}

/* Revelado al hacer scroll (cascada suave, tipo tela). */
.jm-rev{opacity:0;}
.jm-rev.jm-in{opacity:1;animation:jmreveal 0.7s cubic-bezier(0.22,0.61,0.36,1) backwards;}

/* Titular del hero: cada línea sube como costura. */
.jm-lineclip{display:block;overflow:hidden;}
.jm-line{display:inline-block;animation:jmlineup 0.85s cubic-bezier(0.19,1,0.22,1) both;}

/* Contador del carrito: pop al agregar. */
.jm-pop{animation:jmpop 0.45s cubic-bezier(0.34,1.56,0.64,1) both;}

/* Marquee: pausa al pasar el mouse. */
.jm-marquee:hover > div{animation-play-state:paused;}

/* Presión táctil en botones. */
.jm-app button:active{transform:scale(0.97);}

/* Imagen de la ficha de producto: entrada con leve zoom. */
.jm-pimg{animation:jmimgin 0.8s cubic-bezier(0.22,0.61,0.36,1) both;}

/* Flecha de la píldora de categoría se desliza al hover. */
.jm-catgo{transition:transform 0.25s ease;}
.jm-cat:hover .jm-catgo{transform:translateX(4px);}

/* Foco visible para teclado. */
.jm-app :focus-visible{outline:2px solid #565a2b;outline-offset:2px;border-radius:4px;}

/* El resaltado del subtítulo del hero (el editor de WP quita estilos inline). */
.jm-herosub strong{color:#2a281d;font-weight:700;}

.jm-card{transition:transform .28s ease,box-shadow .28s ease;}
.jm-card:hover{transform:translateY(-6px);box-shadow:0 22px 38px -20px rgba(34,31,24,0.45);}
.jm-card:hover .jm-ph{transform:scale(1.06);}
.jm-card:hover .jm-add{opacity:1;transform:translateY(0);}
.jm-card:hover .jm-name{color:#565a2b;}
.jm-cat{transition:transform .32s ease,box-shadow .32s ease;}
.jm-cat:hover{transform:translateY(-6px);box-shadow:0 24px 40px -22px rgba(34,31,24,0.5);}
.jm-cat:hover .jm-catimg{transform:scale(1.06);}
.jm-float{animation:jmfloat 4.8s ease-in-out infinite;}
.jm-scroll{scrollbar-width:none;-ms-overflow-style:none;}
.jm-scroll::-webkit-scrollbar{display:none;}
.jm-arrow{transition:background .18s ease,color .18s ease;}
.jm-arrow:hover{background:#2a281d;color:#f5edde;}

/* Hovers equivalentes a los style-hover del diseño original. */
.jm-hdark{transition:all .18s ease;}
.jm-hdark:hover{background:#2a281d !important;border-color:#2a281d !important;color:#f4ecdc !important;}
.jm-holive{transition:all .18s ease;}
.jm-holive:hover{background:#565a2b !important;border-color:#565a2b !important;color:#f5edde !important;}
.jm-hdarker{transition:all .18s ease;}
.jm-hdarker:hover{background:#454828 !important;color:#f5edde !important;}
.jm-hcream{transition:all .18s ease;}
.jm-hcream:hover{background:#f4ecdc !important;color:#2a281d !important;}
.jm-hlink{transition:color .15s ease;}
.jm-hlink:hover{color:#f4ecdc !important;}
.jm-hname{transition:color .15s ease;}
.jm-hname:hover{color:#565a2b !important;}

/* Menú móvil */
.jm-burger{display:none;background:none;border:1.5px solid rgba(34,31,24,0.3);cursor:pointer;border-radius:100px;width:40px;height:40px;font-size:17px;color:#2a281d;align-items:center;justify-content:center;}
.jm-mobile-menu{display:none;}
.jm-mobile-menu.open{display:flex;flex-direction:column;gap:4px;position:absolute;top:100%;left:0;right:0;background:#f3ede1;border-bottom:1px solid rgba(34,31,24,0.12);padding:12px 18px 16px;box-shadow:0 24px 40px -22px rgba(34,31,24,0.4);}
.jm-mobile-menu button{background:none;border:none;cursor:pointer;text-align:left;font-family:'Mulish',sans-serif;font-size:13px;letter-spacing:0.05em;text-transform:uppercase;color:#2a281d;padding:12px 10px;border-radius:12px;}
.jm-mobile-menu button:hover{background:#2a281d;color:#f4ecdc;}

/* Responsive: colapsa las rejillas de 2 y 4 columnas en móvil. */
@media (max-width:900px){
  .jm-grid2{grid-template-columns:1fr !important;}
  .jm-grid2 .jm-order-img{order:-1;}
  .jm-cats{grid-template-columns:repeat(2,1fr) !important;}
  .jm-testi{grid-template-columns:1fr !important;}
  .jm-stats{grid-template-columns:1fr !important;}
  .jm-foot{grid-template-columns:1fr 1fr !important;}
  .jm-nav-links{display:none !important;}
  .jm-burger{display:inline-flex;}
  .jm-pad2{padding-left:24px !important;padding-right:24px !important;}
  .jm-padsec{padding:64px 24px !important;}
  /* Los flotantes del hero entran al área visible en pantallas chicas. */
  .jm-price-tag{right:8px !important;top:12px !important;}
  .jm-seal{left:6px !important;bottom:14px !important;transform:scale(0.78);transform-origin:bottom left;}
}
@media (max-width:600px){
  .jm-cats{grid-template-columns:repeat(2,1fr) !important;gap:12px !important;}
  .jm-catlabel{font-size:19px !important;}
  .jm-foot{grid-template-columns:1fr !important;}
  .jm-pad{padding-left:18px !important;padding-right:18px !important;}
  .jm-pad2{padding-left:18px !important;padding-right:18px !important;}
  .jm-padsec{padding:56px 18px !important;}
  .jm-wafloat{width:52px;height:52px;right:14px;bottom:14px;}
}

/* Respeta la preferencia de menos movimiento. */
@media (prefers-reduced-motion:reduce){
  .jm-app *,.jm-app *::before,.jm-app *::after{animation:none !important;transition:none !important;}
  .jm-rev{opacity:1 !important;}
  .jm-line{transform:none !important;}
}