/*
Theme Name: Limón de Melocotón
Description: Tema a la medida. Paleta, logo, estrellas y patrón salen del material real de la marca. Las fuentes son sustitutos temporales de Google Fonts (Now Bold / MaryKate / Bryndan Write aún no llegan como archivos) — reemplazar cuando estén.
Version: 0.5
*/

:root{
  /* paleta oficial del manual de marca */
  --pink-soft:#F7BBD6;
  --pink:#F76EAE;
  --pink-deep:#B63878;   /* rosa de la marca oscurecido hasta cumplir contraste AA sobre blanco */
  --peach:#FFB989;
  --lavender:#C7CCEC;
  --yellow:#FFF8A0;
  --green:#CCE29D;
  --mint:#9CE0DB;

  --paper:#FFFBF4;
  --surface:#FFFFFF;
  --surface-tint:#FFF4EC;
  --ink:#3E2E3B;
  --ink-soft:#8C7B89;

  --shadow-card: 0 2px 0 rgba(62,46,59,.05), 0 16px 32px -20px rgba(62,46,59,.4);
  --shadow-lift: 0 4px 0 rgba(62,46,59,.06), 0 26px 44px -22px rgba(62,46,59,.45);
  --shadow-pop: 0 10px 24px -10px rgba(247,110,174,.6);

  --font-display:'Fredoka', ui-rounded, sans-serif;
  --font-script:'Yellowtail', cursive;
  --font-body:'Quicksand', ui-sans-serif, sans-serif;

  --edge: clamp(18px, 5vw, 56px);

  /* progreso del morph del logo (0 = hero, 1 = acomodado en el header).
     Por defecto 1 para que sin JS el header se vea normal y sólido. */
  --lm-p: 1;

  /* Variables propias de WooCommerce: pintan sus botones, el carrito y el
     checkout. Si no se reasignan, todo eso sale en el morado de fábrica. */
  --wc-primary:#F76EAE;
  --wc-primary-text:#FFFFFF;
  --wc-secondary:#FFF4EC;
  --wc-secondary-text:#3E2E3B;
  --wc-highlight:#B63878;
  --wc-highlight-text:#FFFFFF;
  --wc-content-bg:#FFFFFF;
}

*{ box-sizing:border-box; }
/* clip y no hidden: 'hidden' crea un contenedor de scroll y rompe position:sticky del header */
html{ overflow-x:clip; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16.5px;
  line-height:1.65;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

/* atmósfera: patrón generado con las estrellas reales de la marca */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:url('assets/pattern-tile.png');
  background-size:620px 620px;
  background-repeat:repeat;
  opacity:.42;          /* textura de fondo, no protagonista */
  pointer-events:none;
  z-index:0;
}
body > *{ position:relative; z-index:1; }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  margin:0 0 .45em;
  line-height:1.1;
  letter-spacing:-.015em;
  text-wrap:balance;
}
p{ margin:0 0 1em; }
.lm-script{ font-family:var(--font-script); font-weight:400; }

/* ---------- estrellas ---------- */
.lm-star{
  display:inline-block;
  width:1em; height:1em;
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
}
.lm-star--1{ background-image:url('assets/star-1.png'); }
.lm-star--2{ background-image:url('assets/star-2.png'); }
.lm-star--3{ background-image:url('assets/star-3.png'); }

/* ---------- header ---------- */
.lm-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:10px var(--edge);
  padding-top:max(10px, env(safe-area-inset-top));
  padding-left:max(var(--edge), env(safe-area-inset-left));
  padding-right:max(var(--edge), env(safe-area-inset-right));
  position:sticky;
  top:0;
  z-index:30;
  /* Sin barra de fondo: el logo, el óvalo del menú y la estrella del carrito
     flotan sueltos sobre la página. */
  background:none;
  pointer-events:none;   /* deja pasar el clic al contenido entre los elementos */
}
.lm-topbar > *{ pointer-events:auto; }

/* Huecos del logo: el del hero y el del header. La imagen que viaja es un clon fijo.
   Ambos comparten la proporción del wordmark para que el morph escale uniforme. */
.lm-logo-mark{
  display:block; width:98px; aspect-ratio:1965/1119; flex-shrink:0;
}
.lm-logo-mark img{ width:100%; height:100%; object-fit:contain; }

.lm-hero-logo{
  display:block;
  width:min(382px,82%);
  aspect-ratio:1965/1119;
  margin:0 0 18px;
}
.lm-hero-logo img{ width:100%; height:100%; object-fit:contain; }

.lm-logo-morph{
  position:fixed; top:0; left:0;
  transform-origin:top left;
  z-index:40;
  pointer-events:none;
  will-change:transform;
}

/* Sin barra de fondo, el logo y los botones pasan por encima de las ilustraciones
   y se pierden. Un halo claro pegado a la silueta los despega del fondo sin
   necesidad de meterlos otra vez en una caja. */
.lm-logo-morph,
.lm-logo-mark img,
.lm-cart,
.lm-menu-btn{
  filter:
    drop-shadow(0 0 2px rgba(255,251,244,1))
    drop-shadow(0 0 5px rgba(255,251,244,.95))
    drop-shadow(0 0 11px rgba(255,251,244,.8));
}
body.lm-morph-on [data-lm-logo] img{ visibility:hidden; }

/* Los títulos viven dentro de un solo óvalo, no la barra de ancho completo:
   ocupa mucho menos espacio visual y deja respirar la ilustración de atrás. */
.lm-nav{
  display:flex; align-items:center; gap:clamp(14px,2.2vw,30px);
  background:var(--surface);
  border-radius:999px;
  padding:7px clamp(20px,2.4vw,32px) 9px;
  box-shadow:0 2px 0 rgba(62,46,59,.04), 0 12px 26px -16px rgba(62,46,59,.5);
  /* el óvalo se asienta junto con el logo */
  transform:translateY(calc((var(--lm-p) - 1) * 9px));
  opacity:calc(.72 + .28 * var(--lm-p));
}
/* Menú en la cursiva de la marca, cada opción con su color.
   Los tonos son versiones oscurecidas de la paleta: los pasteles originales
   no tienen contraste suficiente como texto sobre el fondo crema. */
.lm-nav > a,
.lm-nav-tienda > a{
  position:relative;
  font-family:var(--font-script);
  font-weight:400;
  font-size:20px;
  line-height:1.15;
  padding:2px 0 5px;
  transition:transform .24s cubic-bezier(.34,1.56,.64,1), color .18s ease;
}
/* Cada opción trae su color en --c desde el header.php: así "Inicio" puede
   aparecer y desaparecer sin descolocar la paleta del resto.
   Ojo con el '>': sin él esta regla también pintaba los enlaces de dentro del
   desplegable, y el botón rosa quedaba con letra rosa, o sea invisible. */
.lm-nav > a,
.lm-nav-tienda > a{ color:var(--c,#B63878); }
.lm-nav > a::after,
.lm-nav-tienda > a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:3px; border-radius:3px;
  background:currentColor;
  opacity:.55;
  transform:scaleX(0); transform-origin:left;
  transition:transform .26s cubic-bezier(.34,1.56,.64,1);
}
.lm-nav > a:hover,
.lm-nav-tienda > a:hover{ transform:translateY(-2px) rotate(-1.5deg); }
.lm-nav > a:hover::after,
.lm-nav-tienda:hover > a::after,
.lm-nav-tienda.abierto > a::after{ transform:scaleX(1); }

/* El carrito vive dentro de una estrella de la marca, con la silueta del
   carrito encima y el contador en una burbujita. */
.lm-cart{
  position:relative;
  width:74px; aspect-ratio:1;
  display:grid; place-items:center;
  flex-shrink:0;
  color:var(--ink);
  background-image:url('assets/star-yellow.png');
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  transition:transform .26s cubic-bezier(.34,1.56,.64,1);
  opacity:calc(.6 + .4 * var(--lm-p));
}
.lm-cart-icono{ width:23px; height:23px; margin-top:-5px; }  /* sube al cuerpo ancho de la estrella */
.lm-cart-cuenta{
  position:absolute; top:12%; right:8%;   /* apoyada sobre el brazo de la estrella */
  min-width:21px; height:21px; padding:0 6px;
  border:2px solid var(--paper);
  border-radius:999px;
  background:var(--pink); color:#fff;
  font-family:var(--font-display); font-weight:600; font-size:12px;
  display:grid; place-items:center;
  box-shadow:0 4px 10px -4px rgba(247,110,174,.9);
}
.lm-cart:hover{ transform:rotate(-8deg) scale(1.08); }

/* ---------- botón de menú (solo móvil): estrella con tres rayas ---------- */
/* La zona ancha de la estrella está por encima de su centro geométrico, así que
   las rayas se suben un poco; si van centradas se salen por los costados. */
.lm-menu-btn{
  display:none;
  width:78px; aspect-ratio:1;
  border:none; padding:0; cursor:pointer;
  background:url('assets/star-mint.png') center/contain no-repeat;
  place-items:center;
  opacity:calc(.6 + .4 * var(--lm-p));
  transition:transform .26s cubic-bezier(.34,1.56,.64,1);
}
.lm-menu-btn:hover{ transform:rotate(8deg) scale(1.08); }
.lm-menu-lineas{ display:grid; gap:4px; margin-top:-7px; }
.lm-menu-lineas i{ display:block; width:17px; height:2.6px; border-radius:3px; background:var(--ink); }

/* ---------- overlay del menú móvil ---------- */
/* Imprescindible: 'display:flex' pisaría al atributo [hidden] y el overlay
   invisible se quedaría capturando los toques de toda la pantalla. */
.lm-menu-movil[hidden]{ display:none; }
.lm-menu-movil{
  position:fixed; inset:0; z-index:80;
  background:var(--paper);
  display:flex; flex-direction:column; align-items:center;
  /* 'justify-content:center' recorta por arriba cuando el contenido no cabe
     (pasa al abrir las categorías). Con márgenes automáticos se centra si hay
     sitio y se puede desplazar si no. */
  justify-content:flex-start;
  gap:4px;
  padding:78px 18px 28px;
  padding-top:max(78px, calc(env(safe-area-inset-top) + 70px));
  padding-bottom:max(28px, calc(env(safe-area-inset-bottom) + 20px));
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  animation:lm-fade .22s ease;
}
.lm-menu-movil::before{
  content:""; position:absolute; inset:0;
  background:url('assets/pattern-tile.png') repeat;
  background-size:520px 520px; opacity:.5; pointer-events:none;
}
@keyframes lm-fade{ from{ opacity:0; } to{ opacity:1; } }

.lm-menu-cerrar{
  position:absolute;
  top:max(12px, env(safe-area-inset-top));
  left:max(16px, env(safe-area-inset-left));
  width:72px; aspect-ratio:1;
  border:none; cursor:pointer;
  background:url('assets/star-yellow.png') center/contain no-repeat;
  display:grid; place-items:center;
  font-size:24px; line-height:1; color:var(--ink);
  font-family:var(--font-display);
}
.lm-menu-cerrar > span{ margin-top:-7px; }

/* Los títulos en el overlay son los mismos del escritorio: cursiva de la marca,
   cada uno con su color. Nada de meterlos dentro de estrellas. */
.lm-menu-movil-nav{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:22px;
  text-align:center;
  margin-top:auto;     /* junto con el del carrito, centra el bloque */
  width:100%;
}
.lm-menu-movil-nav > a,
.lm-menu-movil-nav > .lm-movil-tienda{
  font-family:var(--font-script);
  font-size:38px; line-height:1.05;
  animation:lm-rise .5s cubic-bezier(.22,.9,.3,1) backwards;
}
/* Zona de toque cómoda: la cursiva deja una caja de ~40px y Apple recomienda
   44 como mínimo. El relleno no se ve, pero se siente al tocar con el pulgar. */
.lm-menu-movil-nav > a,
.lm-movil-tienda-btn{
  display:flex; align-items:center; justify-content:center;
  min-height:44px;
  padding:3px 10px;
  -webkit-tap-highlight-color:transparent;
}
.lm-menu-movil-nav > a,
.lm-movil-tienda-btn{ color:var(--c,#B63878); }
.lm-menu-movil-nav > *:nth-child(1){ animation-delay:.04s; }
.lm-menu-movil-nav > *:nth-child(2){ animation-delay:.10s; }
.lm-menu-movil-nav > *:nth-child(3){ animation-delay:.16s; }
.lm-menu-movil-nav > *:nth-child(4){ animation-delay:.22s; }
.lm-menu-movil-nav > *:nth-child(5){ animation-delay:.28s; }

.lm-cart--menu{
  position:relative;
  margin-top:38px;
  margin-bottom:auto;
  opacity:1;
  animation:lm-rise .5s cubic-bezier(.22,.9,.3,1) .28s backwards;
}
/* Acompaña al JS: con el menú abierto el body queda fijo, si no Safari en
   iPhone sigue moviendo la página de atrás por debajo del menú. */
body.lm-menu-abierto{
  overflow:hidden;
  position:fixed;
  left:0; right:0;
  width:100%;
}

@media (max-width:820px){
  /* tres columnas: rayas a la izquierda, logo centrado, carrito a la derecha */
  .lm-topbar{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; padding:10px 16px; }
  .lm-menu-btn{ display:grid; justify-self:start; }
  .lm-logo-mark{ width:96px; justify-self:center; }
  .lm-cart{ justify-self:end; width:76px; }
  .lm-cart-icono{ width:22px; height:22px; }
  .lm-nav{ display:none; }          /* los títulos viven en el overlay */
  .lm-hero-logo{ width:min(300px,80%); }
}

/* ---------- botón whatsapp ---------- */
.lm-whatsapp{
  position:fixed; z-index:60;
  right:max(20px, env(safe-area-inset-right));
  bottom:max(20px, env(safe-area-inset-bottom));
  width:62px; height:62px; border-radius:50%;
  background:#CCE29D;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 26px -8px rgba(62,46,59,.45);
  transition:transform .22s cubic-bezier(.34,1.56,.64,1);
}
.lm-whatsapp:hover{ transform:scale(1.1) rotate(-8deg); }
.lm-whatsapp svg{ width:31px; height:31px; }

/* ---------- hero ---------- */
/* El hero ocupa el alto disponible de la ventana: así el contenido queda centrado
   y la sección siguiente arranca justo debajo del pliegue, sin asomarse, en
   cualquier pantalla (mejor que un relleno fijo que sobra o falta según el alto). */
.lm-hero{
  position:relative;
  padding:clamp(8px,2vw,26px) var(--edge) clamp(26px,4vw,52px);
  min-height:calc(100vh - var(--lm-header-h, 94px));
  min-height:calc(100vh - var(--lm-header-h, 94px));   /* respaldo: Safari < 15.4 */
  min-height:calc(100svh - var(--lm-header-h, 94px));
  display:flex; align-items:center;
}
@media (max-width:900px){ .lm-hero{ min-height:0; display:block; } }
.lm-hero-grid{
  width:100%;
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1fr .92fr;
  gap:clamp(28px,5vw,64px); align-items:center;
}
@media (max-width:900px){ .lm-hero-grid{ grid-template-columns:1fr; } }

.lm-hero-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-display); font-weight:600;
  font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--pink-deep);
  background:#fff;
  border-radius:999px;
  padding:8px 18px 8px 12px;
  box-shadow:var(--shadow-card);
  margin-bottom:15px;
  transform:rotate(-1.5deg);
}
.lm-hero-copy{
  font-size:17px; color:var(--ink-soft);
  max-width:44ch; margin-bottom:24px;
}
.lm-hero-actions{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }

.lm-btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-display); font-weight:600; font-size:15.5px;
  color:#fff; background:var(--pink);
  padding:15px 30px; border-radius:999px; border:none; cursor:pointer;
  box-shadow:var(--shadow-pop);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
}
.lm-btn:hover{ transform:translateY(-3px) rotate(-1deg); box-shadow:0 16px 30px -10px rgba(247,110,174,.75); }
.lm-btn--ghost{
  background:transparent; color:var(--ink);
  border:2px solid var(--ink); box-shadow:none; padding:13px 28px;
}
.lm-btn--ghost:hover{ background:var(--ink); color:var(--paper); box-shadow:none; }

/* producto del mes */
.lm-polaroid-wrap{ position:relative; display:flex; justify-content:center; padding:14px; }
.lm-polaroid-blob{
  position:absolute; width:min(430px,105%); aspect-ratio:1;
  background:var(--lavender); opacity:.5;
  border-radius:47% 53% 62% 38% / 42% 45% 55% 58%;
  top:50%; left:50%; transform:translate(-50%,-50%) rotate(-6deg);
  animation:lm-blob 16s ease-in-out infinite;
}
@keyframes lm-blob{
  0%,100%{ border-radius:47% 53% 62% 38% / 42% 45% 55% 58%; transform:translate(-50%,-50%) rotate(-6deg); }
  50%{ border-radius:58% 42% 41% 59% / 55% 52% 48% 45%; transform:translate(-50%,-50%) rotate(4deg); }
}
.lm-polaroid{
  position:relative; z-index:2;
  background:var(--surface);
  padding:15px 15px 26px;
  border-radius:20px;
  box-shadow:var(--shadow-lift);
  width:min(338px,100%);
  transform:rotate(3deg);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.lm-polaroid:hover{ transform:rotate(0deg) translateY(-6px); }
.lm-polaroid img{
  border-radius:12px; aspect-ratio:1; width:100%;
  object-fit:contain; padding:10px;
  background:var(--surface-tint);
}
.lm-polaroid figcaption{ text-align:center; margin-top:14px; }
.lm-polaroid .lm-tag{
  display:inline-block;
  font-family:var(--font-script); font-size:25px; color:var(--pink);
  transform:rotate(-2deg); margin-bottom:2px;
}
.lm-polaroid .lm-title{ font-family:var(--font-display); font-weight:600; font-size:17px; }
.lm-polaroid .lm-price{ font-family:var(--font-display); font-size:14.5px; color:var(--ink-soft); }
/* el perrito trota: sube, baja y mueve la cola con un balanceo suave */
.lm-hero-perro{
  position:absolute; z-index:3;
  width:128px; height:auto;
  left:-14px; bottom:-26px;
  filter:drop-shadow(0 10px 14px rgba(62,46,59,.14));
  transform-origin:60% 80%;
  animation:lm-trote 3.6s ease-in-out infinite;
}
@keyframes lm-trote{
  0%,100%{ transform:translateY(0) rotate(-8deg); }
  25%    { transform:translateY(-9px) rotate(-3deg); }
  50%    { transform:translateY(0) rotate(-8deg); }
  75%    { transform:translateY(-5px) rotate(-12deg); }
}
@media (max-width:900px){ .lm-hero-perro{ width:96px; left:2px; bottom:-14px; } }

/* el limón de la marca gira despacito sobre la esquina de la polaroid */
.lm-polaroid-limon{
  position:absolute; width:116px; height:auto;
  top:-34px; right:-18px; z-index:3;
  filter:drop-shadow(0 8px 12px rgba(62,46,59,.16));
  animation:lm-spin 30s linear infinite;
}
@keyframes lm-spin{ to{ transform:rotate(360deg); } }
@media (max-width:900px){ .lm-polaroid-limon{ width:88px; top:-24px; right:-6px; } }

/* ---------- secciones ---------- */
.lm-section{ padding:clamp(44px,6vw,76px) var(--edge); }
.lm-section-inner{ max-width:1200px; margin:0 auto; }
.lm-section-head{
  max-width:1200px; margin:0 auto clamp(24px,3vw,36px);
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:18px; flex-wrap:wrap;
}
.lm-section-head h2{
  font-size:clamp(28px,3.8vw,44px); margin:0;
  display:flex; align-items:center; gap:14px;
}
.lm-head-mascota{
  width:clamp(38px,4vw,52px); height:auto; flex-shrink:0;
  transform:rotate(-7deg);
}
.lm-section-head p{ margin:6px 0 0; color:var(--ink-soft); font-size:15.5px; }
.lm-see-all{
  font-family:var(--font-display); font-weight:600; font-size:15px;
  color:var(--pink-deep); white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px;
  transition:gap .2s ease;
}
.lm-see-all:hover{ gap:12px; }

/* ---------- tira de estrellas (categorías) ---------- */
.lm-strip{
  width:fit-content;
  max-width:1200px;
  min-width:min(100%, 620px);
  margin:0 auto;
  background:var(--surface);
  border-radius:34px;
  padding:38px clamp(18px,3vw,40px) 30px;
  box-shadow:var(--shadow-card);
}
.lm-strip-title{
  text-align:center;
  font-family:var(--font-script);
  font-size:clamp(26px,3vw,34px);
  color:var(--pink);
  margin-bottom:22px;
}
.lm-star-filter-row{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:10px clamp(12px,3.2vw,44px);
}
.lm-star-filter{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  width:112px; text-align:center;
}
/* Las mascotas tienen proporciones distintas (el perro es ancho, el payaso alto),
   así que 'contain' dentro de una caja fija las deja todas centradas y alineadas. */
.lm-star-filter-icon{
  width:96px; height:96px;
  background-repeat:no-repeat; background-size:contain; background-position:center bottom;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1);
}
.lm-star-filter:nth-child(3n+1) .lm-star-filter-icon{ transform:rotate(-7deg); }
.lm-star-filter:nth-child(3n+2) .lm-star-filter-icon{ transform:rotate(5deg); }
.lm-star-filter:nth-child(3n+3) .lm-star-filter-icon{ transform:rotate(-2deg); }
.lm-star-filter:hover .lm-star-filter-icon{ transform:rotate(0deg) scale(1.16); }
.lm-star-filter-label{
  font-family:var(--font-display); font-weight:600; font-size:15px;
  transition:color .18s ease;
}
.lm-star-filter:hover .lm-star-filter-label{ color:var(--pink-deep); }

/* ---------- carrusel ---------- */
.lm-drag-hint{
  max-width:1200px; margin:0 auto 12px;
  font-family:var(--font-display); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-soft);
}
/* el track se alinea con el resto del contenido y sangra solo hacia la derecha */
.lm-carousel{
  max-width:1200px; margin:0 auto;
  position:relative;
}
.lm-carousel-track{
  display:flex; gap:22px;
  overflow-x:auto; scroll-snap-type:x proximity;
  padding:8px 0 30px;
  margin-right:calc(-1 * var(--edge));
  cursor:grab; user-select:none;
  scrollbar-width:none;
}
.lm-carousel-track::-webkit-scrollbar{ display:none; }
.lm-carousel-track.lm-dragging{ cursor:grabbing; scroll-snap-type:none; }
.lm-carousel-track img,
.lm-carousel-track a{ -webkit-user-drag:none; user-select:none; }

.lm-card{
  flex:0 0 auto; width:232px;
  scroll-snap-align:start;
  background:var(--surface);
  border-radius:22px; padding:14px 14px 18px;
  box-shadow:var(--shadow-card);
  display:flex; flex-direction:column;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
}
.lm-card .lm-price{ margin-top:auto; }
.lm-card:hover{ transform:translateY(-8px) rotate(-1.2deg); box-shadow:var(--shadow-lift); }
/* La obra se muestra completa (contain), no recortada: varias ilustraciones
   llevan lettering en los bordes y perderlo sería mutilar la pieza. */
.lm-card-thumb{
  aspect-ratio:1; border-radius:16px; overflow:hidden;
  background:var(--surface-tint); margin-bottom:13px;
  padding:8px;
}
.lm-card-thumb img{ width:100%; height:100%; object-fit:contain; transition:transform .4s ease; }
.lm-card:hover .lm-card-thumb img{ transform:scale(1.06); }
.lm-card h4{
  font-family:var(--font-body); font-weight:700; font-size:15px;
  margin:0 0 4px; line-height:1.3;
}
.lm-card .lm-price{ font-family:var(--font-display); font-weight:600; font-size:14.5px; color:var(--pink-deep); }

/* ---------- grilla de destacados ---------- */
.lm-grid{
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:22px;
}
.lm-grid .lm-card{ width:auto; }
/* en celular: dos columnas, si no la tienda se vuelve un scroll eterno */
@media (max-width:700px){
  .lm-grid{ grid-template-columns:repeat(2,1fr); gap:13px; }
  .lm-grid .lm-card{ padding:10px 10px 13px; border-radius:18px; }
  .lm-grid .lm-card h4{ font-size:13.5px; }
  .lm-grid .lm-card .lm-price{ font-size:13px; }
  .lm-grid .lm-card-thumb{ border-radius:13px; padding:5px; margin-bottom:9px; }
}

/* ---------- banda de marca ---------- */
.lm-soul{
  position:relative; overflow:hidden;
  background:var(--pink-soft);
  padding:clamp(50px,7vw,82px) var(--edge);
  text-align:center;
}
.lm-soul-inner{ max-width:760px; margin:0 auto; position:relative; z-index:2; }
.lm-soul .lm-script{
  display:block;
  font-size:clamp(30px,4.6vw,52px); color:#fff;
  line-height:1.25; margin-bottom:16px;
  text-shadow:0 3px 0 rgba(201,69,138,.18);
}
.lm-soul p{ color:#8A2B60; font-size:17px; margin:0 auto; max-width:52ch; }
.lm-soul-deco{
  position:absolute; opacity:.55; pointer-events:none;
  filter:drop-shadow(0 6px 10px rgba(62,46,59,.1));
}
.lm-soul-deco--1{ width:120px; left:4%; top:16%; transform:rotate(-14deg); }
.lm-soul-deco--2{ width:92px; right:6%; top:22%; transform:rotate(12deg); }
.lm-soul-deco--3{ width:70px; right:16%; bottom:12%; transform:rotate(-6deg); }
/* en celular las mascotas se van a las esquinas: si no, chocan con el texto */
@media (max-width:760px){
  .lm-soul-deco--1{ width:56px; opacity:.45; left:2%; top:auto; bottom:6%; }
  .lm-soul-deco--2{ width:52px; opacity:.45; right:3%; top:6%; }
  .lm-soul-deco--3{ display:none; }
}

/* ---------- club creativo ---------- */
.lm-club{
  max-width:1200px; margin:0 auto;
  background:var(--mint);
  border-radius:34px;
  padding:clamp(30px,4.5vw,52px);
  display:grid; grid-template-columns:1.25fr .75fr;
  gap:30px; align-items:center;
  position:relative; overflow:hidden;
}
@media (max-width:820px){ .lm-club{ grid-template-columns:1fr; text-align:center; } }
.lm-club h2{ font-size:clamp(26px,3.4vw,40px); color:#14524A; }
.lm-club p{ color:#17564F; max-width:46ch; margin-bottom:24px; font-size:16.5px; }
@media (max-width:820px){ .lm-club p{ margin-left:auto; margin-right:auto; } }
.lm-club .lm-btn{ background:#1F6B63; box-shadow:0 10px 22px -10px rgba(31,107,99,.8); }
.lm-club .lm-btn:hover{ box-shadow:0 16px 28px -10px rgba(31,107,99,.9); }
.lm-club-art{ display:flex; justify-content:center; align-items:center; gap:8px; }
.lm-club-art img{ width:min(210px,60%); transform:rotate(-5deg); }

/* ---------- footer ---------- */
.lm-footer{
  background:var(--surface);
  border-top:1px solid rgba(247,187,214,.5);
  padding:clamp(44px,6vw,64px) var(--edge) 28px;
  margin-top:clamp(40px,6vw,70px);
}
.lm-footer-inner{
  max-width:1200px; margin:0 auto;
  display:flex; justify-content:space-between; gap:36px; flex-wrap:wrap;
}
.lm-footer-brand img{ height:64px; margin-bottom:14px; }
.lm-footer-copy{ max-width:40ch; color:var(--ink-soft); font-size:15px; }
.lm-footer-cols{ display:flex; gap:clamp(28px,5vw,64px); flex-wrap:wrap; }
.lm-footer-col h5{
  font-family:var(--font-display); font-size:12.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--pink-deep); margin:0 0 12px;
}
.lm-footer-col a{ display:block; font-size:15px; color:var(--ink); margin-bottom:8px; transition:color .18s ease; }
.lm-footer-col a:hover{ color:var(--pink); }
.lm-footer-bottom{
  max-width:1200px; margin:34px auto 0; padding-top:18px;
  border-top:1px solid rgba(247,187,214,.5);
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:13px; color:var(--ink-soft);
}

/* ---------- páginas de contenido ---------- */
.lm-page-head{
  text-align:center;
  padding:clamp(34px,5vw,60px) var(--edge) 0;
  position:relative;
}
.lm-page-head .lm-star{
  width:54px; height:54px; margin:0 auto 12px;
  display:block; transform:rotate(-8deg);
}
.lm-page-head h1{ font-size:clamp(34px,5vw,58px); margin:0; }

.lm-prose{
  max-width:68ch; margin:0 auto;
  background:var(--surface);
  border-radius:30px;
  padding:clamp(28px,4vw,52px);
  box-shadow:var(--shadow-card);
  font-size:17px;
}
.lm-prose h2{
  font-size:clamp(22px,2.6vw,30px);
  color:var(--pink-deep);
  margin-top:1.6em;
}
.lm-prose h2:first-child{ margin-top:0; }
.lm-prose h3{ font-size:19px; margin-top:1.4em; }
.lm-prose ul{ padding-left:1.1em; }
.lm-prose li{ margin-bottom:.5em; }
.lm-prose li strong{ color:var(--pink-deep); }
.lm-prose blockquote{
  margin:1.6em 0; padding:22px 26px;
  background:var(--surface-tint);
  border-radius:20px;
  font-family:var(--font-script);
  font-size:24px; line-height:1.5; color:var(--pink-deep);
}
.lm-prose blockquote p{ margin:0; }

/* ---------- tienda: listado ---------- */
.lm-page-mascota{
  width:clamp(64px,8vw,96px); height:auto;
  margin:0 auto 10px; transform:rotate(-6deg);
}
.lm-page-desc{ max-width:56ch; margin:6px auto 0; color:var(--ink-soft); font-size:16px; }
.lm-conteo{
  max-width:1200px; margin:0 auto 18px;
  font-family:var(--font-display); font-size:13px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-soft);
}
.lm-card-thumb{ position:relative; }
.lm-agotado{
  position:absolute; top:8px; left:8px;
  background:var(--ink); color:var(--paper);
  font-family:var(--font-display); font-weight:600; font-size:11px;
  padding:4px 10px; border-radius:999px;
}
.lm-star-filter.activa .lm-star-filter-icon{ transform:rotate(0deg) scale(1.14); }
.lm-star-filter.activa .lm-star-filter-label{ color:var(--pink-deep); text-decoration:underline; text-underline-offset:4px; }

/* Paginación. WooCommerce la pinta con recuadros y bordes desde su propio CSS,
   con selectores tan específicos como estos, así que hay que igualarlos o
   pierde el estilo del tema. La página actual va sobre una estrella. */
.lm-paginacion{ max-width:1200px; margin:40px auto 0; }
body .lm-paginacion nav.woocommerce-pagination{ text-align:center; }
body .lm-paginacion nav.woocommerce-pagination ul,
body .lm-paginacion nav.woocommerce-pagination ul li{
  border:none; margin:0; overflow:visible; background:none;
}
body .lm-paginacion nav.woocommerce-pagination ul{
  display:inline-flex; align-items:center; gap:8px;
  list-style:none; padding:0; white-space:normal;
}
body .lm-paginacion nav.woocommerce-pagination ul li a,
body .lm-paginacion nav.woocommerce-pagination ul li span{
  display:grid; place-items:center;
  min-width:48px; height:48px; padding:0 12px; margin:0;
  border-radius:50%;
  font-family:var(--font-display); font-weight:600; font-size:16px;
  color:var(--ink-soft); background:none;
  transition:color .18s ease, transform .2s cubic-bezier(.34,1.56,.64,1);
}
body .lm-paginacion nav.woocommerce-pagination ul li a:hover{
  color:var(--pink-deep); background:none; transform:translateY(-2px);
}
body .lm-paginacion nav.woocommerce-pagination ul li span.current{
  color:var(--ink);
  background:url('assets/star-yellow.png') center/contain no-repeat;
}
body .lm-paginacion nav.woocommerce-pagination ul li a.next,
body .lm-paginacion nav.woocommerce-pagination ul li a.prev{
  color:var(--pink-deep); font-size:19px;
  background:var(--surface);
  box-shadow:var(--shadow-card);
}
body .lm-paginacion nav.woocommerce-pagination ul li a.next:hover,
body .lm-paginacion nav.woocommerce-pagination ul li a.prev:hover{
  background:var(--pink); color:#fff;
}

.lm-vacio{ text-align:center; max-width:44ch; margin:0 auto; }
.lm-vacio img{ width:120px; margin:0 auto 16px; }
.lm-vacio p{ margin-bottom:22px; color:var(--ink-soft); }

/* ---------- ficha de producto ---------- */
.lm-producto-envoltura{ max-width:1200px; margin:0 auto; }
.lm-volver{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-display); font-weight:600; font-size:14px;
  color:var(--pink-deep); margin-bottom:20px;
}
.lm-volver:hover{ gap:12px; }

.lm-producto{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(26px,4vw,60px); align-items:start;
}
@media (max-width:860px){ .lm-producto{ grid-template-columns:1fr; } }

.lm-producto-marco{
  background:var(--surface); border-radius:26px; padding:clamp(14px,2vw,26px);
  box-shadow:var(--shadow-card);
}
.lm-producto-marco img{
  width:100%; aspect-ratio:1; object-fit:contain;
  background:var(--surface-tint); border-radius:16px;
}
.lm-producto-miniaturas{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.lm-producto-miniaturas button{
  width:70px; height:70px; padding:5px; cursor:pointer;
  border:2px solid transparent; border-radius:14px;
  background:var(--surface); box-shadow:var(--shadow-card);
}
.lm-producto-miniaturas button.activa{ border-color:var(--pink); }
.lm-producto-miniaturas img{ width:100%; height:100%; object-fit:contain; }

.lm-producto-titulo{ font-size:clamp(28px,3.6vw,42px); margin-bottom:10px; }
.lm-producto-precio{
  font-family:var(--font-display); font-weight:600;
  font-size:26px; color:var(--pink-deep); margin-bottom:12px;
}
.lm-producto-stock{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-display); font-weight:600; font-size:13px;
  background:var(--good-suave,#E6F2DC); color:#3D6B2A;
  padding:6px 14px; border-radius:999px; margin-bottom:18px;
}
.lm-producto-stock--no{ background:#F6E2E6; color:#8A2B42; }
.lm-producto-resumen{ color:var(--ink-soft); margin-bottom:20px; max-width:46ch; }

/* El formulario lo pinta WooCommerce; aquí se le da la piel de la marca. */
.lm-producto-compra{ margin:22px 0 24px; }
.lm-producto-compra form.cart{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.lm-producto-compra .quantity input[type="number"]{
  width:86px; height:54px; padding:0 10px;
  border:2px solid var(--pink-soft); border-radius:999px;
  font-family:var(--font-display); font-weight:600; font-size:16px;
  text-align:center; color:var(--ink); background:var(--surface);
}
/* selector específico: los estilos propios de WooCommerce pintan el botón de morado */
.lm-producto-compra form.cart button.single_add_to_cart_button,
.lm-producto-compra .single_add_to_cart_button{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-display); font-weight:600; font-size:16px;
  color:#fff; background:var(--pink);
  padding:16px 34px; border-radius:999px; border:none; cursor:pointer;
  box-shadow:var(--shadow-pop);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), background .2s ease;
}
.lm-producto-compra form.cart button.single_add_to_cart_button:hover,
.lm-producto-compra .single_add_to_cart_button:hover{
  transform:translateY(-3px) rotate(-1deg);
  background:var(--pink-deep);
}
.lm-producto-compra .variations{ width:100%; border-collapse:collapse; margin-bottom:8px; }
.lm-producto-compra .variations th{ text-align:left; padding:6px 0; font-family:var(--font-display); font-size:14px; }
.lm-producto-compra .variations select{
  padding:11px 14px; border-radius:14px; border:2px solid var(--pink-soft);
  background:var(--surface); font-family:var(--font-body); font-size:15px; min-width:180px;
}

.lm-producto-aviso{
  display:inline-block; font-family:var(--font-display); font-weight:600;
  font-size:14.5px; color:var(--pink-deep); text-decoration:underline;
  text-underline-offset:4px; margin-bottom:18px;
}
.lm-producto-notas{
  list-style:none; padding:18px 0 0; margin:0;
  border-top:1px dashed var(--pink-soft);
  font-size:14.5px; color:var(--ink-soft);
}
.lm-producto-notas li{ margin-bottom:7px; }
.lm-producto-notas a{ color:var(--pink-deep); text-decoration:underline; text-underline-offset:3px; }

.lm-producto-detalle{
  margin-top:clamp(34px,5vw,60px);
  background:var(--surface); border-radius:26px;
  padding:clamp(24px,3.5vw,44px);
  box-shadow:var(--shadow-card);
  max-width:70ch;
}
.lm-producto-detalle h2{ font-size:22px; color:var(--pink-deep); }

/* ---------- carrito y checkout (bloques de WooCommerce) ----------
   Estos bloques traen sus propios estilos muy específicos y no leen las
   variables --wc-*, por eso se les apunta directo. */
.wc-block-cart, .wc-block-checkout{ font-family:var(--font-body); }
.wc-block-cart h1, .wc-block-checkout h1,
.wc-block-components-title{ font-family:var(--font-display); }

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button:not(.is-link){
  background-color:var(--pink);
  color:#fff;
  border-radius:999px;
  font-family:var(--font-display);
  font-weight:600;
  border:none;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-button:not(.is-link):hover{
  background-color:var(--pink-deep);
}
.wc-block-components-product-name{ font-family:var(--font-body); font-weight:700; color:var(--ink); }
.wc-block-components-totals-item__value{ font-family:var(--font-display); }
.wc-block-cart-items__row img{ border-radius:12px; background:var(--surface-tint); }

/* avisos de WooCommerce con la piel de la marca */
.woocommerce-message, .woocommerce-info, .woocommerce-error{
  list-style:none;
  background:var(--surface); border-radius:18px;
  padding:16px 22px; margin:0 0 22px;
  box-shadow:var(--shadow-card);
  border-left:5px solid var(--pink);
  font-size:15px;
}
.woocommerce-error{ border-left-color:#C9455B; }
.woocommerce-message a, .woocommerce-info a{
  font-family:var(--font-display); font-weight:600; color:var(--pink-deep);
  margin-left:10px; text-decoration:underline; text-underline-offset:3px;
}

/* ---------- entrada escalonada ---------- */
@keyframes lm-rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
.lm-rise{ animation:lm-rise .7s cubic-bezier(.22,.9,.3,1) backwards; }
.lm-rise-1{ animation-delay:.05s; }
.lm-rise-2{ animation-delay:.16s; }
.lm-rise-3{ animation-delay:.27s; }
.lm-rise-4{ animation-delay:.38s; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .lm-btn:hover, .lm-card:hover, .lm-polaroid:hover{ transform:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- variantes: la "paletica" ---------- */
.lm-select-oculto{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.lm-producto-compra .variations{ display:block; }
.lm-producto-compra .variations tbody,
.lm-producto-compra .variations tr,
.lm-producto-compra .variations th,
.lm-producto-compra .variations td{ display:block; width:100%; }
.lm-producto-compra .variations th{
  font-family:var(--font-display); font-weight:600; font-size:14px;
  color:var(--ink-soft); padding:0 0 8px;
  text-transform:uppercase; letter-spacing:.06em;
}
.lm-producto-compra .variations td{ padding:0 0 18px; }

.lm-variantes{ display:flex; flex-wrap:wrap; gap:10px; }

.lm-variante{
  font-family:var(--font-display); font-weight:600; font-size:13.5px;
  color:var(--ink); background:var(--surface);
  border:2px solid transparent; border-radius:999px;
  padding:9px 17px; cursor:pointer;
  box-shadow:var(--shadow-card);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), border-color .18s ease;
}
.lm-variante:hover{ transform:translateY(-2px); }
.lm-variante.activa{ border-color:var(--pink); color:var(--pink-deep); }
.lm-variante.agotada{ opacity:.35; cursor:not-allowed; transform:none; }


/* Color: circulitos del color real de la obra, compactos y debajo del tamaño. */
.lm-variantes--puntos{ align-items:center; gap:10px; }
.lm-punto{
  width:34px; height:34px; padding:0; border-radius:50%;
  background:var(--punto);
  border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(62,46,59,.14), 0 4px 10px -4px rgba(62,46,59,.4);
  position:relative;
}
.lm-punto:hover{ transform:scale(1.12); }
.lm-punto.activa{
  border-color:#fff;
  box-shadow:0 0 0 2.5px var(--pink), 0 6px 14px -5px rgba(62,46,59,.5);
  transform:scale(1.1);
}
.lm-punto.agotada{ opacity:.3; }
.lm-variante-elegida{
  font-family:var(--font-body); font-weight:700; font-size:14px;
  color:var(--ink-soft); margin-left:4px;
}

.woocommerce-variation-price{ margin:4px 0 14px; }
.woocommerce-variation-price .price{
  font-family:var(--font-display); font-weight:600; font-size:24px; color:var(--pink-deep);
}
.woocommerce-variation-availability p{ margin:0 0 10px; font-size:14px; color:var(--ink-soft); }
.reset_variations{
  display:inline-block; margin-left:4px; font-size:13px;
  font-family:var(--font-display); color:var(--ink-soft);
  text-decoration:underline; text-underline-offset:3px;
}

/* WooCommerce imprime textos solo para lectores de pantalla; si el tema no los
   oculta, aparecen visibles (ej. "Rango de precios: desde ... hasta ..."). */
.screen-reader-text{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; margin:-1px; padding:0; border:0;
}

/* WooCommerce mete el enlace "Limpiar" entre la etiqueta y las opciones;
   se manda al final para que no interrumpa la lectura. */
/* el grupo de opciones y el enlace "Limpiar" comparten línea, sin robar alto */
.lm-producto-compra .variations td{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
  padding-bottom:14px;
}
.lm-producto-compra .variations td .lm-variantes{ order:1; }
.lm-producto-compra .variations td .reset_variations{ order:2; margin:0; font-size:12.5px; }
.lm-producto-compra .variations th{ padding-bottom:7px; }

/* ---------- panel de pago (página de pedido recibido) ---------- */
.lm-pago{
  position:relative;
  max-width:600px;
  margin:0 auto clamp(30px,5vw,48px);
  background:var(--surface);
  border-radius:30px;
  padding:clamp(30px,4vw,46px) clamp(22px,3.5vw,44px) clamp(26px,3.5vw,38px);
  box-shadow:var(--shadow-lift);
  text-align:center;
}
.lm-pago-mascota{
  width:84px; height:auto; margin:-72px auto 10px;
  transform:rotate(-8deg);
  filter:drop-shadow(0 8px 12px rgba(62,46,59,.14));
}
.lm-pago-titulo{ font-size:clamp(26px,3.4vw,34px); margin-bottom:8px; }
.lm-pago-intro{ color:var(--ink-soft); max-width:44ch; margin:0 auto 26px; font-size:16px; }
.lm-pago-intro strong{ color:var(--pink-deep); }

.lm-pago-medios{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px; margin-bottom:26px;
}
.lm-pago-medio{
  background:var(--surface-tint);
  border-radius:20px;
  padding:16px 14px 14px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.lm-pago-etiqueta{
  font-family:var(--font-display); font-weight:600; font-size:11.5px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft);
}
.lm-pago-valor{
  display:flex; align-items:center; gap:9px;
  background:none; border:none; cursor:pointer;
  font-family:var(--font-display); font-weight:600; font-size:19px;
  color:var(--ink); padding:2px 0;
  transition:color .18s ease;
}
.lm-pago-valor:hover{ color:var(--pink-deep); }
.lm-pago-copiar{
  font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  background:var(--pink-soft); color:#8A2B60;
  padding:3px 9px; border-radius:999px;
}
.lm-pago-valor.copiado .lm-pago-copiar{ background:var(--green); color:#3D6B2A; }
.lm-pago-nota{ font-size:12.5px; color:var(--ink-soft); }

.lm-pago-boton{
  display:inline-flex; align-items:center; justify-content:center; gap:11px;
  background:#4CAF50; color:#fff;
  font-family:var(--font-display); font-weight:600; font-size:16.5px;
  padding:17px 32px; border-radius:999px;
  box-shadow:0 12px 26px -12px rgba(76,175,80,.9);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1);
}
.lm-pago-boton:hover{ transform:translateY(-3px); }
.lm-pago-boton svg{ width:24px; height:24px; flex-shrink:0; }
.lm-pago-pie{ margin:16px 0 0; font-size:13.5px; color:var(--ink-soft); }
.lm-pago-pie strong{ color:var(--ink); }

/* la caja de instrucciones que WooCommerce repite debajo sobra, ya está arriba */
.woocommerce-order .woocommerce-bacs-bank-details{ display:none; }

/* En producto variable, WooCommerce mete cantidad y botón dentro de este
   contenedor, así que el gap de form.cart no les aplica: se separan aquí. */
.lm-producto-compra .woocommerce-variation-add-to-cart{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  margin-top:6px;
}
.lm-producto-compra .quantity{ margin:0; }
.lm-producto-compra .quantity input[type="number"]{ width:96px; padding:0 6px 0 14px; }

/* Botón mientras faltan opciones por elegir: si no se define, sale en el
   morado de fábrica de WooCommerce. */
.lm-producto-compra .single_add_to_cart_button.disabled,
.lm-producto-compra .single_add_to_cart_button:disabled,
.lm-producto-compra form.cart button.single_add_to_cart_button.disabled{
  background:var(--pink-soft);
  color:#A15C82;
  box-shadow:none;
  cursor:not-allowed;
}
.lm-producto-compra .single_add_to_cart_button.disabled:hover{ transform:none; }

/* ---------- filtros y buscador ---------- */
.lm-filtros{ max-width:1200px; margin:0 auto 26px; display:flex; flex-direction:column; gap:14px; }

.lm-buscador{
  display:flex; align-items:center; gap:10px;
  background:var(--surface);
  border-radius:999px;
  padding:7px 7px 7px 18px;
  box-shadow:var(--shadow-card);
  max-width:520px; width:100%;
}
.lm-buscador .lm-star{ width:20px; height:20px; flex-shrink:0; }
.lm-buscador input[type="search"]{
  flex:1; min-width:0; border:none; background:none; outline:none;
  font-family:var(--font-body); font-size:15.5px; color:var(--ink);
  padding:8px 0;
}
.lm-buscador input::placeholder{ color:var(--ink-soft); }
.lm-buscador button{
  border:none; cursor:pointer;
  background:var(--pink); color:#fff;
  font-family:var(--font-display); font-weight:600; font-size:14px;
  padding:11px 22px; border-radius:999px;
  box-shadow:var(--shadow-pop);
  transition:transform .18s ease;
}
.lm-buscador button:hover{ transform:translateY(-2px); }

.lm-filtros-fila{ display:flex; align-items:center; gap:18px 26px; flex-wrap:wrap; }
.lm-filtro-colores{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.lm-filtro-titulo{
  font-family:var(--font-display); font-weight:600; font-size:11.5px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft);
  margin-right:2px;
}
.lm-filtro-punto{
  width:28px; height:28px; border-radius:50%;
  background:var(--punto);
  border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(62,46,59,.14);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1);
}
.lm-filtro-punto:hover{ transform:scale(1.15); }
.lm-filtro-punto.activa{ box-shadow:0 0 0 2.5px var(--pink); transform:scale(1.12); }
.lm-filtro-texto{
  width:auto; height:auto; border-radius:999px;
  background:var(--surface); color:var(--ink);
  font-family:var(--font-display); font-weight:600; font-size:12.5px;
  padding:6px 14px; border:2px solid transparent;
  box-shadow:var(--shadow-card);
}
.lm-filtro-texto.activa{ border-color:var(--pink); color:var(--pink-deep); box-shadow:var(--shadow-card); }

.lm-orden select{
  font-family:var(--font-display); font-weight:600; font-size:13.5px;
  color:var(--ink); background:var(--surface);
  border:2px solid transparent; border-radius:999px;
  padding:10px 16px; cursor:pointer;
  box-shadow:var(--shadow-card);
}
.lm-limpiar-filtros{
  font-family:var(--font-display); font-weight:600; font-size:13px;
  color:var(--pink-deep); text-decoration:underline; text-underline-offset:4px;
}
@media (max-width:600px){
  .lm-filtros-fila{ gap:14px; }
  .lm-orden select{ width:100%; }
}

/* ==================================================================
   Desplegable de "Tienda" (escritorio)
   Se abre al pasar el mouse en equipos con puntero fino, y al tocar
   en pantallas táctiles grandes (iPad), donde el hover no existe.
   ================================================================== */
.lm-nav-tienda{ position:relative; display:flex; align-items:center; }

/* Un puente invisible entre el título y el panel: sin él, el hueco de 10px
   hace que el menú se cierre al bajar el mouse. */
.lm-nav-tienda::after{
  content:""; position:absolute; left:-14px; right:-14px; top:100%; height:16px;
}
.lm-nav-tienda:not(.abierto)::after{ pointer-events:none; }
.lm-nav-tienda:hover::after{ pointer-events:auto; }

.lm-submenu[hidden]{ display:none; }
.lm-submenu{
  position:absolute; top:calc(100% + 14px); left:50%;
  transform:translateX(-50%);
  width:max-content; max-width:min(92vw,540px);
  background:var(--surface);
  border-radius:22px;
  padding:14px;
  box-shadow:0 3px 0 rgba(62,46,59,.04), 0 26px 50px -22px rgba(62,46,59,.55);
  z-index:50;
  animation:lm-submenu-entra .2s cubic-bezier(.22,.9,.3,1);
}
@keyframes lm-submenu-entra{
  from{ opacity:0; transform:translateX(-50%) translateY(-7px); }
  to  { opacity:1; transform:translateX(-50%) translateY(0); }
}
/* La punta del globo, apuntando al título. */
.lm-submenu::before{
  content:""; position:absolute; bottom:100%; left:50%;
  margin-left:-8px; border:8px solid transparent;
  border-bottom-color:var(--surface);
}

.lm-submenu-todo{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-display); font-weight:600;
  font-size:15px; letter-spacing:.01em;
  color:var(--paper); background:var(--pink-deep);
  border-radius:999px; padding:10px 18px; margin-bottom:12px;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), filter .2s ease;
}
.lm-submenu-todo:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.lm-submenu-todo span{ transition:transform .2s ease; }
.lm-submenu-todo:hover span{ transform:translateX(4px); }

.lm-submenu-cats{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px 10px;
}
.lm-submenu-cats a{
  display:flex; align-items:center; gap:9px;
  font-family:var(--font-body); font-size:14.5px; font-weight:500;
  color:var(--ink);
  padding:7px 10px; border-radius:13px;
  transition:background .16s ease, transform .16s ease;
}
.lm-submenu-cats a:hover{ background:rgba(247,187,214,.28); transform:translateX(2px); }
.lm-submenu-icono{
  width:26px; height:26px; flex-shrink:0;
  background:center/contain no-repeat;
}

/* ==================================================================
   "Tienda" desplegable dentro del menú móvil
   ================================================================== */
.lm-movil-tienda{ display:flex; flex-direction:column; align-items:center; }

.lm-movil-tienda-btn{
  /* la cursiva se inclina hacia la derecha, así que necesita más aire del
     habitual para que la flechita no se le monte encima */
  display:inline-flex; align-items:center; gap:16px;
  background:none; border:0; padding:0; cursor:pointer;
  font-family:inherit; font-size:inherit; line-height:inherit;
  color:var(--c,#B63878);
  -webkit-tap-highlight-color:transparent;
}
.lm-chevron{
  width:11px; height:11px; flex-shrink:0;
  border-right:2.6px solid currentColor;
  border-bottom:2.6px solid currentColor;
  border-radius:2px;
  transform:translateY(-3px) rotate(45deg);
  transition:transform .26s cubic-bezier(.34,1.56,.64,1);
}
.lm-movil-tienda-btn[aria-expanded="true"] .lm-chevron{
  transform:translateY(2px) rotate(-135deg);
}

.lm-movil-cats[hidden]{ display:none; }
.lm-movil-cats{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  margin:14px 0 4px;
  width:min(340px,100%);
  animation:lm-rise .34s cubic-bezier(.22,.9,.3,1);
}
.lm-movil-cats a{
  display:flex; align-items:center; gap:11px;
  width:100%;
  font-family:var(--font-body); font-size:16px; font-weight:500;
  color:var(--ink);
  padding:11px 16px; border-radius:15px;
  background:rgba(255,255,255,.66);
  min-height:44px;                 /* zona de toque cómoda en móvil */
  -webkit-tap-highlight-color:transparent;
}
.lm-movil-todo{
  justify-content:center;
  font-family:var(--font-display) !important;
  font-weight:600 !important;
  color:var(--paper) !important;
  background:var(--pink-deep) !important;
  margin-bottom:8px;
}
.lm-movil-cats .lm-submenu-icono{ width:30px; height:30px; }

/* ==================================================================
   PÁGINAS DE CONTENIDO — Sobre mí · Personalizados · Club creativo
   Piezas compartidas primero, luego lo propio de cada una.
   ================================================================== */

/* ---------- piezas compartidas ---------- */
.lm-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:600;
  font-size:13px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--pink-deep);
  margin-bottom:14px;
}
.lm-script-inline{
  font-family:var(--font-script); font-weight:400;
  color:var(--pink-deep);
  /* la cursiva tiene trazos que suben y bajan: necesita aire propio */
  line-height:1.5; display:inline-block;
}

/* Marco de foto de la marca: esquinas suaves, leve giro, sombra cálida. */
.lm-marco-foto{
  margin:0; border-radius:26px; overflow:hidden;
  background:var(--surface);
  box-shadow:var(--shadow-lift);
  transform:rotate(-1.6deg);
  transition:transform .4s cubic-bezier(.22,.9,.3,1);
}
.lm-marco-foto--izq{ transform:rotate(1.8deg); }
.lm-marco-foto--grande{ transform:rotate(1.2deg); }
.lm-marco-foto:hover{ transform:rotate(0deg) scale(1.012); }
.lm-marco-foto img{ display:block; width:100%; height:100%; object-fit:cover; }

/* Mancha orgánica de fondo, para que la foto no flote sobre el vacío. */
.lm-blob{
  position:absolute; inset:-6% -8% auto -8%; height:86%;
  background:var(--lavender);
  border-radius:58% 42% 46% 54% / 50% 56% 44% 50%;
  opacity:.5; z-index:0;
  animation:lm-blob 14s ease-in-out infinite;
}
@keyframes lm-blob{
  0%,100%{ border-radius:58% 42% 46% 54% / 50% 56% 44% 50%; }
  50%{ border-radius:44% 56% 58% 42% / 58% 44% 56% 42%; }
}

/* Hueco que solo ve quien puede editar: dice qué va en cada sitio. */
/* Hueco de foto pendiente. Mide exactamente lo que medira la foto real, para
   que la pagina no se mueva cuando entre el material. */
.lm-hueco{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:9px; text-align:center;
  width:100%; height:100%;
  min-height:120px; padding:20px 18px;
  border:2.5px dashed rgba(247,110,174,.4);
  border-radius:inherit;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(247,187,214,.13) 0 12px,
      rgba(255,255,255,0) 12px 24px
    ),
    rgba(255,255,255,.6);
  color:var(--ink-soft);
  box-sizing:border-box;
}
/* Clase propia y no ' .lm-hueco img': dentro del mosaico y de los marcos hay
   reglas que estiran cualquier <img> al 100%, y se llevaban al muneco por
   delante. */
.lm-hueco .lm-hueco-mascota{
  width:clamp(38px,16%,56px); height:auto; max-height:56px;
  object-fit:contain; opacity:.9; flex:0 0 auto;
  animation:lm-flota 6s ease-in-out infinite;
}
.lm-hueco p{
  margin:0; max-width:30ch;
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(12.5px,1.4vw,15px); line-height:1.35; color:var(--ink);
}
.lm-hueco span{
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  font-weight:600; opacity:.5;
}

.lm-section-head--centro{ justify-content:center; text-align:center; }
.lm-section-head--centro > div{ max-width:60ch; }
.lm-section-head--centro .lm-head-mascota{ vertical-align:-6px; }

.lm-btn--grande{ padding:15px 34px; font-size:17px; }

/* Banda de cierre con llamado a la acción. */
.lm-cta-banda{
  position:relative; overflow:hidden;
  margin-top:clamp(40px,6vw,80px);
  padding:clamp(48px,7vw,92px) var(--edge);
  background:var(--surface-tint);
  text-align:center;
}
.lm-cta-banda::before{
  content:""; position:absolute; inset:0;
  background:url('assets/pattern-tile.png') repeat;
  background-size:460px 460px; opacity:.42; pointer-events:none;
}
.lm-cta-inner{ position:relative; max-width:640px; margin:0 auto; }
.lm-cta-mascota{ width:78px; height:78px; object-fit:contain; margin-bottom:10px; }
.lm-cta-banda h2{ margin:0 0 10px; }
.lm-cta-banda p{ margin:0 auto 24px; max-width:48ch; color:var(--ink-soft); }
.lm-cta-nota{ display:block; margin-top:14px; font-size:13.5px; color:var(--ink-soft); }

/* ==================================================================
   SOBRE MÍ
   ================================================================== */
.lm-sobre-hero{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,5vw,70px); align-items:center;
  padding:clamp(26px,4vw,54px) var(--edge) clamp(30px,5vw,60px);
  max-width:1240px; margin:0 auto;
}
.lm-sobre-titulo{
  font-size:clamp(34px,4.6vw,56px); line-height:1.1;
  margin:0 0 18px; max-width:16ch;
}
.lm-sobre-intro{ max-width:52ch; }
.lm-sobre-intro blockquote{ margin:0 0 14px; }
.lm-sobre-acciones{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.lm-sobre-acciones--centro{ justify-content:center; margin-top:22px; }

.lm-sobre-retrato{ position:relative; }
.lm-sobre-retrato .lm-marco-foto{ position:relative; z-index:1; aspect-ratio:4/5; }
.lm-sobre-retrato .lm-hueco{ position:relative; z-index:1; }
.lm-sobre-deco{
  position:absolute; z-index:2; width:84px; height:84px; object-fit:contain;
  filter:drop-shadow(0 8px 16px rgba(62,46,59,.18));
}
.lm-sobre-deco--1{ top:-26px; right:8%; animation:lm-flota 5.5s ease-in-out infinite; }
.lm-sobre-deco--2{ bottom:-22px; left:-14px; width:70px; height:70px; animation:lm-flota 6.5s ease-in-out .8s infinite; }
@keyframes lm-flota{
  0%,100%{ transform:translateY(0) rotate(-4deg); }
  50%{ transform:translateY(-11px) rotate(5deg); }
}

.lm-sobre-capitulos{ max-width:1180px; margin:0 auto; padding:0 var(--edge); }
.lm-capitulo{
  display:grid; grid-template-columns:1fr .85fr;
  gap:clamp(24px,4vw,60px); align-items:center;
  padding:clamp(28px,4.5vw,58px) 0;
  border-top:1.5px dashed rgba(62,46,59,.14);
}
.lm-capitulo--invertido{ grid-template-columns:.85fr 1fr; }
.lm-capitulo--invertido .lm-capitulo-texto{ order:2; }
.lm-capitulo--invertido .lm-capitulo-media{ order:1; }
.lm-capitulo-texto{ position:relative; }
.lm-capitulo-texto h2{ margin-top:0; }
.lm-capitulo-mascota{
  width:54px; height:54px; object-fit:contain;
  margin-bottom:10px;
  animation:lm-flota 7s ease-in-out infinite;
}
.lm-capitulo-media .lm-marco-foto{ aspect-ratio:1; }
.lm-soul--cierre{ margin-top:clamp(30px,5vw,60px); }

/* ==================================================================
   PERSONALIZADOS
   ================================================================== */
.lm-perso-hero{
  position:relative; overflow:hidden;
  text-align:center;
  padding:clamp(34px,5vw,70px) var(--edge) clamp(26px,4vw,50px);
}
.lm-perso-hero h1{
  font-size:clamp(34px,5vw,60px); line-height:1.08;
  margin:0 auto 16px; max-width:15ch;
}
.lm-perso-intro{ max-width:58ch; margin:0 auto; }
.lm-perso-deco{
  position:absolute; width:92px; height:92px; object-fit:contain; opacity:.9;
  animation:lm-flota 6s ease-in-out infinite;
}
.lm-perso-deco--1{ left:4%; top:22%; }
.lm-perso-deco--2{ right:5%; top:14%; width:76px; height:76px; animation-delay:1.1s; }

/* el antes y después */
.lm-ad-par{
  display:grid; grid-template-columns:1fr auto 1fr;
  gap:clamp(14px,2.6vw,34px); align-items:center;
  max-width:980px; margin:0 auto;
}
.lm-ad-lado{ margin:0; position:relative; }
.lm-ad-lado img{
  display:block; width:100%; aspect-ratio:1; height:auto; object-fit:cover;
  border-radius:24px; box-shadow:var(--shadow-card);
  background:var(--surface);
}
.lm-ad-lado figcaption{ text-align:center; margin-top:12px; }
.lm-ad-etiqueta{
  display:inline-block;
  font-family:var(--font-display); font-weight:600; font-size:13px;
  letter-spacing:.07em; text-transform:uppercase;
  padding:7px 16px; border-radius:999px;
  background:var(--surface-tint); color:var(--ink-soft);
}
.lm-ad-etiqueta--final{ background:var(--pink-deep); color:var(--paper); }
.lm-ad-lado--final img{ box-shadow:var(--shadow-lift); }

.lm-ad-flecha{
  position:relative;
  display:grid; place-items:center;
  color:var(--pink-deep);
  padding-bottom:38px;
}
.lm-ad-flecha svg{ width:clamp(44px,6vw,72px); height:auto; }
.lm-ad-chispa{
  position:absolute; top:-34px; left:50%;
  transform:translateX(-50%);
  width:34px; height:34px;
  background:url('assets/star-2.png') center/contain no-repeat;
  animation:lm-chispa 2.4s ease-in-out infinite;
}
@keyframes lm-chispa{
  0%,100%{ transform:translateX(-50%) scale(.82) rotate(-8deg); opacity:.7; }
  50%{ transform:translateX(-50%) scale(1.08) rotate(10deg); opacity:1; }
}

.lm-perso-pasos{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(16px,2.4vw,28px);
  margin-top:clamp(34px,5vw,62px);
}
.lm-paso{
  position:relative;
  background:var(--surface); border-radius:24px;
  padding:30px 24px 24px;
  box-shadow:var(--shadow-card);
  max-width:none; margin:0;
}
.lm-paso h2{ font-size:21px; margin:6px 0 8px; }
.lm-paso ul{ margin:0; padding-left:18px; }
.lm-paso-num{
  position:absolute; top:-16px; left:24px;
  display:grid; place-items:center;
  width:40px; height:40px; border-radius:50%;
  background:var(--pink-deep); color:var(--paper);
  font-family:var(--font-display); font-weight:700; font-size:18px;
}
.lm-paso-mascota{
  position:absolute; top:-22px; right:18px;
  width:56px; height:56px; object-fit:contain;
}

.lm-perso-card{
  margin:0; flex:0 0 auto; width:clamp(230px,30vw,290px);
  background:var(--surface); border-radius:22px; overflow:hidden;
  box-shadow:var(--shadow-card);
}
.lm-perso-card img{ display:block; width:100%; aspect-ratio:1; height:auto; object-fit:cover; }
.lm-perso-card figcaption{ padding:12px 16px 16px; font-size:14.5px; color:var(--ink-soft); }

/* ==================================================================
   CLUB CREATIVO
   ================================================================== */
.lm-club-hero{
  position:relative;
  display:grid; grid-template-columns:1.02fr .98fr;
  gap:clamp(26px,4.5vw,64px); align-items:center;
  max-width:1240px; margin:0 auto;
  padding:clamp(24px,4vw,52px) var(--edge) clamp(34px,5vw,64px);
}
.lm-club-mancha{
  position:absolute; right:-6%; top:-10%; width:58%; height:118%;
  background:var(--mint); opacity:.26;
  border-radius:54% 46% 38% 62% / 46% 54% 46% 54%;
  z-index:-1;
  animation:lm-blob 17s ease-in-out infinite;
}
.lm-club-hero h1{
  font-size:clamp(34px,4.8vw,58px); line-height:1.08;
  margin:0 0 16px; max-width:14ch;
}
.lm-club-intro{ max-width:50ch; }
.lm-club-acciones{ display:flex; flex-wrap:wrap; gap:12px; margin:26px 0 22px; }
.lm-club-promesas{ list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.lm-club-promesas li{
  display:flex; align-items:center; gap:9px;
  font-size:15px; font-weight:500; color:var(--ink-soft);
}
.lm-club-promesas span{ color:var(--pink); font-size:13px; }

.lm-club-hero-media{ position:relative; }
.lm-club-hero-media .lm-marco-foto{ aspect-ratio:5/4; }
.lm-club-deco{
  position:absolute; bottom:-26px; left:-20px; z-index:3;
  width:92px; height:92px; object-fit:contain;
  animation:lm-flota 6.2s ease-in-out infinite;
  filter:drop-shadow(0 10px 18px rgba(62,46,59,.2));
}
/* El sello gira despacio. Es el logo redondo de ella, puesto como estampa. */
.lm-sello{
  position:absolute; z-index:4;
  top:-38px; right:-26px;
  width:clamp(96px,11vw,136px); height:auto;
  border-radius:50%;
  box-shadow:0 14px 30px -12px rgba(62,46,59,.5);
  animation:lm-gira 26s linear infinite;
}
@keyframes lm-gira{ to{ transform:rotate(360deg); } }

.lm-club-tarjetas{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(262px,1fr));
  gap:clamp(16px,2.4vw,26px);
}
.lm-club-tarjeta{
  position:relative;
  background:var(--surface); border-radius:26px;
  padding:34px 26px 26px;
  box-shadow:var(--shadow-card);
  transition:transform .28s cubic-bezier(.22,.9,.3,1), box-shadow .28s ease;
}
.lm-club-tarjeta:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lift); }
.lm-club-tarjeta img{ width:66px; height:66px; object-fit:contain; margin-bottom:8px; }
.lm-club-tarjeta h3{ margin:0 0 8px; font-size:21px; }
.lm-club-tarjeta p{ margin:0 0 14px; color:var(--ink-soft); font-size:15px; }
.lm-club-pie{
  display:block; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--pink-deep); font-weight:600;
}

/* mosaico de fotos */
.lm-club-mosaico-banda{
  position:relative;
  margin-top:clamp(34px,5vw,66px);
  padding:clamp(40px,5.5vw,76px) 0;
  background:var(--surface-tint);
}
.lm-club-mosaico-banda::before{
  content:""; position:absolute; inset:0;
  background:url('assets/pattern-tile.png') repeat;
  background-size:520px 520px; opacity:.35; pointer-events:none;
}
.lm-club-mosaico-banda .lm-section-head{ position:relative; padding:0 var(--edge); margin-bottom:26px; }
.lm-mosaico{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:190px;
  gap:14px;
  padding:0 var(--edge);
  max-width:1320px; margin:0 auto;
}
.lm-mosaico-pieza{
  margin:0; border-radius:22px; overflow:hidden;
  background:var(--surface); box-shadow:var(--shadow-card);
}
.lm-mosaico-pieza img{
  display:block; width:100%; height:100%; object-fit:cover;
  transition:transform .5s cubic-bezier(.22,.9,.3,1);
}
.lm-mosaico-pieza:hover img{ transform:scale(1.05); }
/* Un ritmo que no se siente de plantilla: dos grandes por cada seis. */
.lm-mosaico-pieza--0{ grid-column:span 2; grid-row:span 2; }
.lm-mosaico-pieza--3{ grid-column:span 2; }

/* videos */
.lm-videos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:clamp(16px,2.4vw,26px); }
.lm-videos--uno{ max-width:860px; margin:0 auto; }
.lm-video{ margin:0; }
.lm-video video,
.lm-video iframe,
.lm-video-externo iframe{
  display:block; width:100%; aspect-ratio:16/9; height:auto;
  border:0; border-radius:22px; background:#2a2230;
  box-shadow:var(--shadow-card);
}
.lm-video figcaption{ margin-top:10px; font-size:14.5px; color:var(--ink-soft); }

.lm-club-detalle-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(20px,3vw,40px);
}
.lm-club-bloque h2{ margin-top:0; font-size:23px; }

/* formulario */
.lm-agenda{
  position:relative; overflow:hidden;
  margin-top:clamp(36px,5vw,70px);
  padding:clamp(44px,6vw,88px) var(--edge);
  background:var(--lavender);
}
.lm-agenda-marca{
  position:absolute; right:-7%; bottom:-16%;
  width:min(560px,58%); opacity:.2; pointer-events:none;
  transform:rotate(-9deg);
}
.lm-agenda-inner{
  position:relative;
  display:grid; grid-template-columns:.92fr 1.08fr;
  gap:clamp(26px,4vw,58px); align-items:start;
  max-width:1160px; margin:0 auto;
}
.lm-agenda-texto{ position:relative; padding-top:8px; }
.lm-agenda-texto h2{ margin:6px 0 12px; font-size:clamp(28px,3.4vw,40px); }
.lm-agenda-texto p{ color:#4A3F53; max-width:40ch; }
.lm-agenda-o a{ color:var(--pink-deep); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.lm-agenda-mascota{
  width:100px; height:100px; object-fit:contain; margin-top:16px;
  animation:lm-flota 6.8s ease-in-out infinite;
}

.lm-agenda-caja{
  background:var(--surface); border-radius:30px;
  padding:clamp(22px,3vw,36px);
  box-shadow:0 4px 0 rgba(62,46,59,.05), 0 30px 56px -26px rgba(62,46,59,.5);
}
.lm-form{ display:grid; gap:14px; }
.lm-form-fila{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.lm-form label{
  display:grid; gap:6px;
  font-family:var(--font-display); font-weight:600; font-size:13.5px;
  color:var(--ink);
}
.lm-form input,
.lm-form select,
.lm-form textarea{
  font-family:var(--font-body); font-size:16px; font-weight:500;
  color:var(--ink);
  background:var(--surface-tint);
  border:2px solid transparent; border-radius:15px;
  padding:12px 14px;
  width:100%;
  transition:border-color .18s ease, background .18s ease;
}
.lm-form textarea{ resize:vertical; min-height:96px; }
.lm-form input:focus,
.lm-form select:focus,
.lm-form textarea:focus{
  outline:none; background:var(--surface);
  border-color:var(--pink);
}
.lm-form button{ justify-self:start; margin-top:4px; border:0; cursor:pointer; }
.lm-form-nota{ margin:0; font-size:12.5px; color:var(--ink-soft); }
.lm-trampa{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.lm-aviso{ border-radius:20px; padding:20px 22px; }
.lm-aviso--bien{ background:rgba(204,226,157,.5); }
.lm-aviso--bien strong{ display:block; font-family:var(--font-display); font-size:20px; margin-bottom:6px; }
.lm-aviso--bien p{ margin:0; color:var(--ink-soft); }
.lm-aviso--ojo{ background:rgba(255,185,137,.42); margin-bottom:16px; font-weight:600; font-size:14.5px; }

/* ==================================================================
   Adaptación a pantallas pequeñas
   ================================================================== */
@media (max-width:960px){
  .lm-mosaico{ grid-template-columns:repeat(3,1fr); grid-auto-rows:160px; }
}
@media (max-width:820px){
  .lm-sobre-hero,
  .lm-club-hero{ grid-template-columns:1fr; }
  .lm-sobre-retrato,
  .lm-club-hero-media{ order:-1; }
  .lm-sobre-titulo,
  .lm-perso-hero h1,
  .lm-club-hero h1{ max-width:none; }
  .lm-capitulo,
  .lm-capitulo--invertido{ grid-template-columns:1fr; gap:20px; }
  .lm-capitulo--invertido .lm-capitulo-texto,
  .lm-capitulo--invertido .lm-capitulo-media{ order:0; }
  .lm-agenda-inner{ grid-template-columns:1fr; }
  .lm-agenda-mascota{ display:none; }
  .lm-club-mancha{ width:100%; right:-20%; opacity:.2; }
  .lm-perso-deco{ display:none; }
  .lm-sello{ top:-24px; right:-8px; }
}
@media (max-width:620px){
  .lm-ad-par{ grid-template-columns:1fr; gap:8px; }
  .lm-ad-flecha{ padding:0; transform:rotate(90deg); margin:2px auto 8px; }
  .lm-ad-chispa{ display:none; }
  .lm-form-fila{ grid-template-columns:1fr; }
  .lm-mosaico{ grid-template-columns:repeat(2,1fr); grid-auto-rows:140px; gap:10px; }
  .lm-mosaico-pieza--0{ grid-column:span 2; grid-row:span 1; }
  .lm-mosaico-pieza--3{ grid-column:span 2; }
  .lm-sobre-deco--1{ width:64px; height:64px; top:-18px; }
  .lm-sobre-deco--2{ width:54px; height:54px; }
}

/* Quien pidió menos movimiento, recibe menos movimiento. */
@media (prefers-reduced-motion:reduce){
  .lm-sello,
  .lm-blob,
  .lm-club-mancha,
  .lm-sobre-deco,
  .lm-capitulo-mascota,
  .lm-club-deco,
  .lm-agenda-mascota,
  .lm-ad-chispa{ animation:none; }
  .lm-marco-foto{ transition:none; }
}

/* '.lm-prose' nació como tarjeta blanca para las páginas viejas de una sola
   columna. En estas el texto va suelto sobre el fondo: si no, cada párrafo
   queda dentro de un recuadro y vuelve el efecto "columna en la mitad". */
.lm-sobre-intro,
.lm-club-intro,
.lm-perso-intro,
.lm-capitulo-texto{
  background:none; box-shadow:none;
  padding:0; border-radius:0;
  max-width:none; margin:0;
}
.lm-sobre-intro,
.lm-club-intro{ max-width:52ch; }
.lm-perso-intro{ max-width:58ch; margin:0 auto; }
.lm-sobre-intro p:first-child,
.lm-club-intro p:first-child,
.lm-perso-intro p:first-child{ margin-top:0; }

/* Sin foto todavía, el hero se centra en una sola columna en vez de dejar
   media pantalla vacía. */
.lm-club-hero--sin-foto,
.lm-sobre-hero--sin-foto{
  grid-template-columns:1fr;
  justify-items:center; text-align:center;
  max-width:900px;
}
.lm-club-hero--sin-foto .lm-club-intro,
.lm-sobre-hero--sin-foto .lm-sobre-intro{ margin-inline:auto; }
.lm-club-hero--sin-foto .lm-club-acciones,
.lm-club-hero--sin-foto .lm-club-promesas,
.lm-sobre-hero--sin-foto .lm-sobre-acciones{ justify-content:center; justify-items:center; }
.lm-club-hero--sin-foto .lm-club-promesas li{ justify-content:center; }
.lm-club-hero--sin-foto .lm-club-hero-media,
.lm-sobre-hero--sin-foto .lm-sobre-retrato{ width:min(420px,100%); }

/* El sello, cuando no compite con una foto, se planta en el centro. */
.lm-sello--solo{
  position:static; display:block; margin:6px auto 0;
  width:clamp(150px,20vw,230px);
}

/* La marca de agua del formulario es textura, no un logo que se deba leer. */
.lm-agenda-marca{ opacity:.13; filter:saturate(.75); }

/* Capitulo sin foto: el texto se queda solo, centrado y con medida de lectura. */
.lm-capitulo--solo{ grid-template-columns:1fr; max-width:74ch; margin-inline:auto; }

/* WordPress escribe width y height en el HTML de cada imagen. Ese height cuenta
   como altura fija y le gana a cualquier 'aspect-ratio' del CSS: la foto sale
   estirada. Donde el diseño manda la proporción, hay que devolver 'height:auto'
   para que el aspect-ratio vuelva a mandar. */
.lm-ad-lado img,
.lm-perso-card img,
.lm-video video,
.lm-video iframe{ height:auto; }

/* ---------- huecos dentro de cada contenedor ---------- */
/* El marco redondeado ya recorta: el hueco hereda su radio y lo llena entero. */
.lm-marco-foto .lm-hueco{ border-radius:26px; }
.lm-marco-foto:has(.lm-hueco){ box-shadow:none; background:none; }

.lm-ad-lado .lm-hueco{ border-radius:24px; }

.lm-perso-card--vacia{ background:none; box-shadow:none; }
.lm-perso-card--vacia .lm-hueco{ border-radius:22px; }

.lm-mosaico-pieza--vacia{ background:none; box-shadow:none; }
.lm-mosaico-pieza--vacia .lm-hueco{ border-radius:22px; min-height:100%; }

.lm-video--vacio .lm-hueco{ border-radius:22px; }

/* Parrafo de entrada de Sobre mi, en la cursiva de la marca. */
.lm-destacado{
  font-family:var(--font-script);
  font-size:clamp(20px,2.3vw,26px); line-height:1.45;
  color:var(--pink-deep);
  margin:0 0 14px;
}

/* Los bloques de texto de las paginas van sueltos sobre el fondo. */
.lm-sobre-intro,
.lm-club-intro,
.lm-perso-intro{ font-size:17px; line-height:1.65; }
.lm-sobre-intro p,
.lm-club-intro p,
.lm-perso-intro p{ margin:0 0 12px; }
.lm-capitulo-texto h2{ font-size:clamp(22px,2.6vw,30px); color:var(--pink-deep); margin:0 0 10px; }
.lm-capitulo-texto p,
.lm-capitulo-texto li{ font-size:16.5px; line-height:1.7; color:var(--ink-soft); }
.lm-capitulo-texto ul{ margin:0; padding-left:1.1em; }
.lm-capitulo-texto li{ margin-bottom:.5em; }
.lm-capitulo-texto li strong{ color:var(--pink-deep); }
.lm-paso h3{ font-size:20px; margin:6px 0 8px; }
.lm-paso p{ margin:0; color:var(--ink-soft); font-size:15.5px; }
.lm-club-bloque h3{ margin:0 0 10px; font-size:22px; color:var(--pink-deep); }
.lm-club-bloque p,
.lm-club-bloque li{ color:var(--ink-soft); font-size:16px; line-height:1.65; }
.lm-club-bloque ul{ margin:0; padding-left:1.1em; }
.lm-club-bloque li{ margin-bottom:.5em; }
.lm-club-bloque{
  background:var(--surface); border-radius:24px;
  padding:clamp(22px,2.6vw,32px);
  box-shadow:var(--shadow-card);
}