/* Cormorant Garamond italic 400 · latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/cormorant-garamond-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cormorant Garamond italic 400 · latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/cormorant-garamond-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Cormorant Garamond normal 400 · latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/cormorant-garamond-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cormorant Garamond normal 400 · latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/cormorant-garamond-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Cormorant Garamond normal 500 · latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/cormorant-garamond-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cormorant Garamond normal 500 · latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/cormorant-garamond-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Jost normal 300 · latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../assets/fonts/jost-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Jost normal 300 · latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../assets/fonts/jost-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Jost normal 400 · latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/jost-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Jost normal 400 · latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/jost-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Jost normal 500 · latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/jost-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Jost normal 500 · latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/jost-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * LouLou with Love — el diseño que mandó Pablo el 03-10-2026 («LouLou · Pulseras y
 * joyitas hechas a mano en España.html»): crema, rosa empolvado y tinta, Cormorant
 * Garamond + Jost, esquinas rectas, mayúsculas espaciadas en botones y menú.
 * Ajuste de accesibilidad (AA): el gris de texto y el rosa del texto van un punto más
 * oscuros que en el original (#7b7370 → #655d5a, #c9948f → #9e6b66); el rosa original
 * se queda para fondos, líneas y adornos.
 *
 * Las fuentes van alojadas en el propio sitio (SIL OFL, arriba): sin Google Fonts no se
 * manda la IP del visitante a terceros, y en las páginas de tienda la plataforma corta
 * la URL de un <link> de Google Fonts en el primer «;».
 *
 * En las páginas de TIENDA la plataforma importa esta hoja dentro de la capa `tenant`,
 * que va ANTES que las del motor: lo que deba ganarle en cabecera y pie lleva !important.
 */
:root {
  --ll-bg: #fbf8f4;
  --ll-bg2: #f4ece4;
  --ll-pink: #efdcd8;
  --ll-rose: #c9948f;
  --ll-rose-texto: #9e6b66;
  --ll-rose-hover: #8f5d58;
  --ll-gold: #b08d57;
  --ll-ink: #2e2a2a;
  --ll-mut: #655d5a;
  --ll-line: #e8ddd3;
  --ll-serif: 'Cormorant Garamond', Georgia, serif;
  --ll-sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { background: var(--ll-bg) !important; color: var(--ll-ink); font: 300 16px/1.7 var(--ll-sans); -webkit-font-smoothing: antialiased; }
.ll-wrap { max-width: 1180px; margin-inline: auto; padding-inline: 24px; }
.ll-sec { padding: 84px 24px; max-width: 1180px; margin-inline: auto; }
.ll-sec.ll-tight { padding-top: 56px; padding-bottom: 56px; }
@media (max-width: 860px) { .ll-sec { padding: 60px 22px; } }
.ll-band { background: var(--ll-bg2); }
.ll-band.ll-pink { background: var(--ll-pink); }
.ll-ctr { text-align: center; }
.ll-nar { max-width: 640px; margin-inline: auto; }

/* Tipografía */
.ll-h1, .ll-h2, .ll-h3 { font-family: var(--ll-serif); font-weight: 400; line-height: 1.08; margin: 0 0 .5em; color: var(--ll-ink); }
.ll-h1 { font-size: clamp(42px, 7vw, 76px); }
.ll-h2 { font-size: clamp(32px, 4.6vw, 50px); }
.ll-h3 { font-size: 20px; }
.ll-h1 em, .ll-h2 em { color: var(--ll-rose-texto); font-style: italic; }
.ll-heart { color: var(--ll-rose); font-style: normal; }
.ll-sub { color: var(--ll-mut); max-width: 560px; margin: 0 auto 40px; }
.ll-big { font: italic 400 clamp(26px, 3.6vw, 38px)/1.25 var(--ll-serif); margin: 24px 0; color: var(--ll-ink); }
.ll-ey { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ll-rose-texto); margin: 0 0 14px; font-weight: 400; }
.ll-p { margin: 0 0 1em; }
.ll-mut { color: var(--ll-mut); }

/* Botones */
.ll-btn { display: inline-block; background: var(--ll-ink); color: var(--ll-bg) !important; border: 0; padding: 15px 30px; font: 400 12px/1.4 var(--ll-sans); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: background .3s, color .3s; text-decoration: none !important; text-align: center; }
.ll-btn:hover { background: var(--ll-rose-hover); }
.ll-btn:focus-visible, .ll-campo:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--ll-rose-texto); outline-offset: 2px; }
.ll-btn.ll-o { background: none; color: var(--ll-ink) !important; border: 1px solid var(--ll-ink); }
.ll-btn.ll-o:hover { background: var(--ll-ink); color: var(--ll-bg) !important; }
.ll-btn.ll-sm { padding: 11px 16px; width: 100%; font-size: 11px; }
.ll-chip { display: inline-block; border: 1px solid var(--ll-line); background: none; padding: 8px 18px; font-size: 13px; letter-spacing: .05em; color: var(--ll-ink); transition: background .2s, color .2s; }
.ll-chip:hover { background: var(--ll-ink); color: var(--ll-bg); border-color: var(--ll-ink); }
.ll-chips { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 24px; }

/* ── Cabecera (viaja a la tienda: sin backdrop-filter, que rompe lo fijo) ── */
.ll-barra-aviso { background: var(--ll-pink) !important; text-align: center; font: 300 13px/1.4 var(--ll-sans) !important; padding: 7px 12px; letter-spacing: .04em; color: var(--ll-ink) !important; margin: 0 !important; }
.ll-header { position: sticky; top: 0; z-index: 60; background: var(--ll-bg) !important; border-bottom: 1px solid var(--ll-line); font-family: var(--ll-sans) !important; color: var(--ll-ink) !important; }
.ll-header a { text-decoration: none !important; color: var(--ll-ink) !important; }
.ll-hd { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 8px 22px; max-width: 1300px; margin: auto; }
.ll-nav { display: flex; gap: 26px; }
.ll-nav a { font: 400 12px/1.4 var(--ll-sans) !important; letter-spacing: .14em; text-transform: uppercase; padding: 6px 0; transition: color .2s; }
.ll-nav a:hover, .ll-nav a[aria-current="page"] { color: var(--ll-rose-texto) !important; }
.ll-logo { justify-self: center; display: block; }
/* Entre tableta y portátil pequeño (861-1180 px) el menú no cabía junto al logo: «SOBRE LOULOU» se partía
   y «CONTACTO» se metía debajo del logo (medido a 1024 px: 516 px de menú en una columna de 459). */
@media (min-width: 861px) and (max-width: 1180px) { .ll-nav { gap: 14px; } .ll-nav a { font-size: 11px !important; letter-spacing: .08em; white-space: nowrap; } }
.ll-logo img { width: 62px !important; height: 62px !important; max-width: none !important; display: block; }
.ll-ic { display: flex; gap: 2px; justify-content: flex-end; align-items: center; }
.ll-ib { position: relative; display: grid; place-items: center; background: none; border: 0; padding: 9px; cursor: pointer; color: var(--ll-ink) !important; }
.ll-ib svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.3; }
.ll-cnt { position: absolute; top: 2px; right: 0; background: var(--ll-rose-texto); color: #fff !important; border-radius: 9px; font-size: 10px !important; line-height: 17px; min-width: 17px; height: 17px; padding: 0 4px; text-align: center; }
.ll-cnt[hidden] { display: none !important; }
.ll-burger { display: none !important; }
@media (max-width: 860px) {
  .ll-hd { grid-template-columns: auto 1fr auto; padding: 6px 10px; }
  .ll-burger { display: grid !important; }
  .ll-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--ll-bg); flex-direction: column; padding: 12px 24px 20px; border-bottom: 1px solid var(--ll-line); gap: 0; }
  .ll-nav.is-open { display: flex; }
  .ll-nav a { padding: 14px 0; border-bottom: 1px solid var(--ll-line); font-size: 14px !important; }
  .ll-logo img { width: 52px !important; height: 52px !important; }
  .ll-ic .ll-oculta-movil { display: none !important; }
}

/* ── Portada ──
   Ordenador: una imagen completa con el texto encima (Pablo, 03-10: «nos gusta más una imagen
   completa, no en la derecha»). Cada foto viene fundida a la derecha de un lienzo 2:1, así que el
   texto cae sobre su propio fondo; se recorta por la izquierda (object-position 100 %) para que la
   pieza no se corte nunca. Móvil: la foto arriba y el texto debajo. */
.ll-hero { position: relative; display: flex; align-items: center; min-height: 88svh; overflow: hidden; background: var(--ll-bg2); }
.ll-ht { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 64px 4vw 84px 6vw; max-width: min(64vw, 900px); }
.ll-hero .ll-h1 { font-size: clamp(44px, 5.2vw, 78px); }
.ll-ht p { font-size: 18px; max-width: 420px; margin: 0 0 28px; }
.ll-ht small { margin-top: 20px; color: var(--ll-mut); letter-spacing: .05em; font-size: 14px; }
.ll-carrusel { position: relative; overflow: hidden; min-height: 92svh; background: var(--ll-bg2); }
.ll-carrusel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s; }
.ll-carrusel img.is-on { opacity: 1; }
.ll-hero .ll-carrusel { position: absolute; inset: 0; min-height: 0; }
@media (min-width: 861px) { .ll-hero .ll-carrusel img { object-position: 100% 50% !important; transform-origin: 80% 55%; } }
.ll-puntos { position: absolute; bottom: 20px; left: 0; right: 0; display: flex; gap: 8px; justify-content: center; z-index: 2; }
.ll-puntos button { width: 30px; height: 3px; border: 0; padding: 0; background: rgba(255,255,255,.55); cursor: pointer; }
.ll-puntos button.is-on { background: #fff; }
.ll-portada .ll-puntos { justify-content: flex-start; padding-left: 6vw; bottom: 32px; }
.ll-portada .ll-puntos button, .ll-regalo .ll-puntos button { background: rgba(46,42,42,.25); }
.ll-portada .ll-puntos button.is-on, .ll-regalo .ll-puntos button.is-on { background: var(--ll-ink); }
.ll-carrusel.ll-regalo { min-height: 0; aspect-ratio: 1 / 1; }
/* El «efecto fino»: la foto que entra se acerca muy despacio y el texto de la portada sube al cargar. */
@keyframes llAcerca { from { transform: scale(1.07); } to { transform: none; } }
@keyframes llSube { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.ll-carrusel img.is-on { animation: llAcerca 9s cubic-bezier(.22,.61,.36,1) both; }
.ll-ht > * { animation: llSube 1s cubic-bezier(.2,.7,.2,1) both; }
.ll-ht > :nth-child(2) { animation-delay: .12s; }
.ll-ht > :nth-child(3) { animation-delay: .24s; }
.ll-ht > :nth-child(4) { animation-delay: .36s; }
@media (max-width: 860px) {
  .ll-hero { flex-direction: column; align-items: stretch; min-height: 0; background: none; }
  .ll-hero .ll-carrusel { position: relative; inset: auto; order: -1; height: 68svh; }
  .ll-ht { padding: 36px 24px 52px; max-width: none; }
  .ll-hero .ll-h1 { font-size: clamp(34px, 10vw, 42px); }
  .ll-portada .ll-puntos { justify-content: center; padding-left: 0; bottom: 20px; }
}
.ll-dual { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ll-tile { display: flex; flex-direction: column; text-align: center; color: var(--ll-ink); text-decoration: none; }
.ll-tile img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ll-tile h3 { font: 400 26px/1.1 var(--ll-serif); margin: 16px 0 2px; }
.ll-tile p { margin: 0 0 14px; color: var(--ll-mut); font-size: 14px; line-height: 1.4; flex: 1; }
@media (max-width: 860px) { .ll-dual { gap: 10px; } .ll-tile h3 { font-size: 22px; } .ll-tile p { font-size: 13px; } }
.ll-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.ll-split.ll-r > :first-child { order: 2; }
.ll-split > img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 860px) { .ll-split { grid-template-columns: 1fr; gap: 28px; } .ll-split.ll-r > :first-child { order: 0; } }
.ll-strip { display: grid; grid-template-columns: repeat(3, 1fr); }
.ll-strip img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.ll-vals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
@media (max-width: 860px) { .ll-vals { grid-template-columns: 1fr 1fr; } }
.ll-vals svg { width: 34px; height: 34px; stroke: var(--ll-rose); fill: none; stroke-width: 1.2; margin: 0 auto 10px; display: block; }
.ll-vals h3 { font: 500 12px/1.4 var(--ll-sans); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 6px; }
.ll-vals p { margin: 0; font-size: 14px; color: var(--ll-mut); line-height: 1.5; }
.ll-igr { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 32px 0; }
.ll-igr img { aspect-ratio: 1; object-fit: cover; width: 100%; }
@media (max-width: 860px) { .ll-igr { grid-template-columns: repeat(3, 1fr); } }

/* Tarjeta de producto (plantilla de la portada; la pinta el motor con datos reales) */
.ll-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 20px; }
@media (max-width: 960px) { .ll-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 12px; } }
.ll-card { position: relative; text-align: center; display: flex; flex-direction: column; }
.ll-card-ph { display: block; overflow: hidden; background: var(--ll-bg2); aspect-ratio: 1; }
.ll-card-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.ll-card:hover .ll-card-ph img { transform: scale(1.04); }
.ll-card h3 { font: 400 19px/1.15 var(--ll-serif); margin: 14px 0 2px; flex: 1; }
.ll-card h3 a { color: var(--ll-ink); text-decoration: none; }
.ll-pr { font-size: 15px; margin-bottom: 12px; }
.ll-np { color: var(--ll-mut); font-size: 13px; }

/* Formularios */
.ll-fm { max-width: 560px; display: grid; gap: 14px; text-align: left; }
.ll-fm label { font-size: 13px; color: var(--ll-mut); display: grid; gap: 6px; }
.ll-campo { width: 100%; background: var(--ll-bg); border: 1px solid var(--ll-line); padding: 14px; font: 300 15px/1.4 var(--ll-sans); color: var(--ll-ink); border-radius: 0; }
.ll-campo:focus { border-color: var(--ll-rose-texto); outline: none; }
.ll-nl { display: flex; gap: 8px; max-width: 460px; margin: 24px auto 0; }
.ll-nl .ll-campo { flex: 1; }
@media (max-width: 520px) { .ll-nl { flex-direction: column; } }
.ll-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 40px 0; text-align: left; }
.ll-steps div { border-top: 1px solid var(--ll-rose); padding-top: 14px; }
.ll-steps b { font: 500 12px/1.4 var(--ll-sans); letter-spacing: .12em; text-transform: uppercase; display: block; margin-bottom: 4px; }
.ll-steps p { margin: 0; font-size: 14px; color: var(--ll-mut); line-height: 1.5; }
@media (max-width: 860px) { .ll-steps { grid-template-columns: 1fr 1fr; } }
.ll-aviso-ok { background: var(--ll-pink); padding: 14px 18px; font-size: 15px; }
.ll-prosa p { margin: 0 0 1em; color: var(--ll-mut); }
.ll-prosa strong { color: var(--ll-ink); font-weight: 500; }
.ll-prosa h2 { font: 400 clamp(26px, 3vw, 34px)/1.1 var(--ll-serif); margin: 1.6em 0 .5em; }
.ll-prosa a { color: var(--ll-rose-texto); text-decoration: underline; }

/* Titulares de las páginas de tienda (ficha, listados, carrito) con la tipografía de la marca */
main h1 { font-family: var(--ll-serif) !important; font-weight: 400 !important; letter-spacing: 0 !important; }

/* ── Pie (el primero de la página viaja a la tienda) ── */
.ll-footer { background: var(--ll-bg2) !important; padding: 64px 24px 32px; font: 300 14px/1.6 var(--ll-sans) !important; color: var(--ll-ink) !important; }
.ll-footer a { color: var(--ll-mut) !important; text-decoration: none !important; display: block; padding: 3px 0; }
.ll-footer a:hover { color: var(--ll-rose-texto) !important; }
.ll-fg { max-width: 1180px; margin: auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 32px; }
.ll-fg h4 { font: 500 12px/1.4 var(--ll-sans) !important; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 14px !important; color: var(--ll-ink) !important; }
.ll-fg p { margin: 0 0 12px !important; color: var(--ll-ink) !important; }
.ll-fg p.ll-mut { color: var(--ll-mut) !important; }
.ll-fg img { width: 70px; height: 70px; margin-bottom: 12px; }
@media (max-width: 860px) { .ll-fg { grid-template-columns: 1fr 1fr; } .ll-fg > :first-child { grid-column: span 2; } }
.ll-cp { text-align: center; color: var(--ll-mut) !important; font-size: 12px !important; margin: 40px 0 0 !important; }

/* Aparición suave al bajar: cada bloque sube un poco mientras aparece (solo con JS: sin JS todo se ve) */
html.js .ll-rv { opacity: 0; transform: translateY(24px); transition: opacity 1s ease, transform 1.1s cubic-bezier(.2,.7,.2,1); }
html.js .ll-rv.is-in { opacity: 1; transform: none; }

/* Tienda: tarjetas con letra fina (Pablo, 03-10: «cambiar de negrita a una letra más fina»).
   El CSS del sitio entra en layer(tenant): sin !important no gana a las utilidades del motor. */
[data-testid="ss-product-card-title"] { font-weight: 300 !important; letter-spacing: .01em; }
[data-testid="ss-product-card-price"] { font-weight: 400 !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .ll-rv { opacity: 1; transform: none; transition: none; }
  .ll-carrusel img, .ll-card-ph img { transition: none; }
  .ll-carrusel img.is-on, .ll-ht > * { animation: none; }
}