/* ============================================================================
   Landing "Scalp Longevity" · Miriam Quevedo · advancedcms
   Fichero de página del módulo: modules/advancedcms/views/css/pages/cms_<id>_<id_lang>.css
   Solo se carga en esta landing, así que los selectores genéricos del principio
   (.advanced-cms-wrapper, .page-content...) no afectan a ninguna otra página.
   Medidas tomadas del Figma a 1512 px (escritorio) y 428 px (móvil).
   Prefijo de clases: sl- (scalp longevity).
   ============================================================================ */

:root {
  --sl-head: "AvantGarde Bk BT", "ITC Avant Garde Gothic Pro", "TeX Gyre Adventor", "Century Gothic", sans-serif;
  --sl-body: "FiraSans", "Fira Sans", "Source Sans Pro", Arial, sans-serif;
  --sl-serif: "Times New Roman", Times, Georgia, serif; /* cursivas de acento: la fuente real no viene en el export de Figma */
  --sl-black: #000;
  --sl-grey-bg: #f9f8f7;
  --sl-grey-card: #f2f2f2;
  --sl-grey-video: #d9d9d9;
  --sl-pink: #fff5f8;
  --sl-red: #ff0000;
  --sl-max: 1512px;
}

/* ---- Reset del contenedor de advancedcms y del tema en esta página ---------- */
#module-advancedcms-adcms #wrapper { padding-top: 0; }
#module-advancedcms-adcms #wrapper > .container,
#module-advancedcms-adcms #content-wrapper,
#module-advancedcms-adcms #main,
#module-advancedcms-adcms #content.page-content { padding: 0; margin: 0; max-width: 100%; width: 100%; }
#module-advancedcms-adcms .breadcrumb { display: none; }
/* En PROD el layout envuelve el contenido en .container > .row (márgenes -12px): sin esto la landing mide 24 px más
   que la pantalla y aparece scroll horizontal. En DEV8 esos divs van sin clase y la regla no hace nada. */
#module-advancedcms-adcms #wrapper > .container > .row { margin-left: 0; margin-right: 0; width: 100%; }
.advanced-cms-wrapper.t17 { padding: 0 !important; background: #fff; }
.advanced-cms-wrapper .sl { width: 100%; clear: both; }
.advanced-cms-wrapper .sl-b {
  float: none; width: 100%; max-width: 100%; flex: none;
  padding-left: 0 !important; padding-right: 0 !important; margin: 0 !important; position: static;
}
.advanced-cms-wrapper .sl-b > .rte { margin: 0; padding: 0; }
/* Resets con :where() (especificidad cero) para que cualquier clase sl-* los pise sin esfuerzo */
:where(.advanced-cms-wrapper .sl-b .rte) p { margin: 0; min-height: 0; }
/* OJO: el tema carga su cmsfront_base.css DESPUÉS de este fichero, con `main .advanced-cms-wrapper .rte p
   { margin-bottom: 1em }` (0,2,2) y `.advanced-cms-wrapper img { height: auto }` (0,1,1). Por eso el reset del
   margen inferior de los párrafos va con 3 clases, y las reglas de imagen y de margin-bottom llevan `.sl` delante. */
.sl .sl-b .rte p { margin-bottom: 0; min-height: 0; }
.sl *, .sl *::before, .sl *::after { box-sizing: border-box; }
:where(.sl) img { display: block; max-width: 100%; height: auto; }
:where(.sl) figure { margin: 0; }
:where(.sl) :is(h1, h2, h3, p, ul, ol) { margin: 0; padding: 0; }
:where(.sl) :is(ul, ol) { list-style: none; }
:where(.sl) a { color: var(--sl-black); }

/* ---- Tipografía común ------------------------------------------------------ */
.sl { font-family: var(--sl-body); color: var(--sl-black); font-size: 14px; line-height: 1.65; }
.sl-title {
  font-family: var(--sl-head); font-weight: 700; font-size: 32px; line-height: 34px;
  text-align: center; color: var(--sl-black); margin: 0; letter-spacing: 0;
}
.sl-title--left { text-align: left; }
.sl-subtitle {
  margin-top: 21px; text-align: center; text-transform: uppercase;
  font-size: 12px; line-height: 1.4; letter-spacing: .04em;
}
.sl-eyebrow { text-transform: uppercase; font-size: 12px; line-height: 1.65; letter-spacing: .06em; }
.sl-eyebrow sup { font-size: 8px; vertical-align: super; line-height: 0; }
.sl-btn {
  display: inline-block; min-width: 159px; padding: 3px 14px; border: 1px solid var(--sl-black);
  background: #fff; color: var(--sl-black); font-family: var(--sl-body); font-size: 14px; line-height: 1.65;
  text-transform: uppercase; text-align: center; text-decoration: none; letter-spacing: .01em; cursor: pointer;
  transition: background .15s, color .15s;
}
.sl-btn:hover, .sl-btn:focus-visible { background: var(--sl-black); color: #fff; text-decoration: none; }
.sl-link {
  font-weight: 300; font-size: 14px; line-height: 1.3; text-transform: uppercase; letter-spacing: .01em;
  color: var(--sl-black); text-decoration: underline;
}
.sl-link:hover { color: var(--sl-black); text-decoration: none; }
.sl em { font-family: var(--sl-serif); font-style: italic; font-weight: 400; }
.sl-placeholder { background: #e6e6e6; position: relative; }
.sl-placeholder::after {
  content: "imagen pendiente"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--sl-body); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #9a9a9a;
}

/* ---- Vídeo placeholder (hero y how to) ------------------------------------- */
.sl-video { position: relative; }
.sl-video img { width: 100%; height: auto; object-fit: cover; }
.sl-video__tag {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--sl-head); font-weight: 700; font-size: 32px; line-height: 26px; color: var(--sl-red);
  text-align: center; pointer-events: none;
}

/* ============================================================================
   1. HERO
   ============================================================================ */
.sl-hero { padding-top: 6px; overflow: visible; }
/* line-height .66: los trazos sobresalen del line box, el padding superior evita que un overflow:hidden del tema los recorte */
.sl-hero__title {
  position: relative; z-index: 2; margin: 0 auto 6px; padding: 18px 16px 0;
  font-family: var(--sl-head); font-weight: 700; font-size: 64px; line-height: .66; letter-spacing: -.02em;
  text-align: center; color: var(--sl-black);
}
.sl-hero__title em { font-size: 1em; letter-spacing: 0; }
.sl-hero__media img { aspect-ratio: 1512 / 602; }
/* Vídeo del hero: la caja toma la proporción del propio vídeo (16:9 escritorio, 1:1 móvil) y el iframe la llena, así el
   vídeo se ve entero a todo el ancho y no se recorta por ningún lado (cliente 2026-09-15; antes se recortaba a 1512x602).
   El JS carga solo el iframe del tamaño de pantalla actual (data-src). */
.sl-video--hero { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #f2f2f2; }
.sl-video--hero .sl-video__frame {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
}
.sl-video--hero .sl-video__frame--mobile { display: none; }

/* ============================================================================
   2. ¿CÓMO AFECTA EL ENVEJECIMIENTO?
   ============================================================================ */
.sl-concerns { padding-top: 76px; }
.sl-concerns__title { margin-bottom: 77px; }
.sl-concerns__carousel { position: relative; }
.sl-concerns__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.sl-concern__media { position: relative; aspect-ratio: 374 / 588; overflow: hidden; }
.sl .sl-concern__media img { width: 100%; height: 100%; object-fit: cover; }
.sl-concern__label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 20px;
  font-family: var(--sl-head); font-weight: 700; font-size: 30px; line-height: 1; text-align: center; color: #fff;
}
.sl-concern__text { margin: 14px 14px 0; font-size: 14px; line-height: 1.65; }

/* ============================================================================
   3. SELECCIONA TU PREOCUPACIÓN
   ============================================================================ */
/* La sección es una rejilla de 4 columnas: la cabecera (título, subtítulo y opciones) ocupa las 4 y debajo van los
   productos. Hay UN bloque de productos por opción (.sl-selector__col--<clave>, configurable en el BO), pero sus
   envoltorios se disuelven con display: contents: cada producto es una celda de esta rejilla, así los 4 bloques se
   ven como una sola rejilla en orden de lectura. Un producto repetido en varias opciones lo pinta el JS una sola vez
   (data-concerns con todas sus opciones); el filtro atenúa los que no llevan la opción elegida. */
.sl-selector { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 107px 16px 0; }
.advanced-cms-wrapper .sl-selector .sl-selector__head { grid-column: 1 / -1; padding-bottom: 62px; }
.sl-filter { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 50px; padding: 0; }
.sl-filter__opt {
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0; margin: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none; cursor: pointer;
  font-family: var(--sl-body); font-size: 14px; line-height: 1.65; text-transform: uppercase; letter-spacing: .02em;
  color: var(--sl-black); text-align: left;
}
.sl-filter__opt::before {
  content: ""; flex: none; width: 24px; height: 24px; border: 1px solid var(--sl-black); border-radius: 50%;
  background: #fff; box-shadow: inset 0 0 0 4px #fff; transition: background .15s;
}
.sl-filter__opt.is-active::before { background: var(--sl-black); }
.sl-filter__opt:hover::before { background: #e6e6e6; }
.sl-filter__opt.is-active:hover::before { background: var(--sl-black); }

/* Bloques de producto nativos restilados: info (nombre, precio, botón) al pasar el ratón */
.sl-selector__products .adcms-product { margin: 62px 0 0; }
.sl-selector__products .adcms-product > ul {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0; padding: 0 16px; list-style: none;
}
/* Un bloque por opción: sus envoltorios no generan caja, los productos (li) pasan a ser celdas de .sl-selector */
.sl-selector__col, .sl-selector__col .adcms-product, .sl-selector__col .adcms-product > ul { display: contents; }
.sl-selector__col .clearfix::before, .sl-selector__col .clearfix::after { content: none; display: none; }
.sl-selector__col .product-box { list-style: none; }
.sl-selector__products .product-box {
  position: relative; float: none; width: auto; margin: 0; padding: 0 20px; min-height: 290px;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
/* Producto que no coincide con la opción elegida: imagen en gris y una capa encima que bloquea hover y clic */
.sl-selector__products .product-box.is-dimmed .product-image img { filter: grayscale(1); opacity: .3; }
.sl-selector__products .product-box.is-dimmed::after {
  content: ""; position: absolute; inset: 0; z-index: 6; background: rgba(255, 255, 255, .35); cursor: default;
}
.sl-selector__products .product-box.is-dimmed .thumbnail-container,
.sl-selector__products .product-box.is-dimmed:hover .thumbnail-container,
.sl-selector__products .product-box.is-dimmed:focus-within .thumbnail-container { opacity: 0; pointer-events: none; }
.sl-selector__products .product-box .product-image img { transition: filter .25s, opacity .25s; }
.sl-selector__products .product-flags,
.sl-selector__products .second_image,
.sl-selector__products .short_description_product_list,
.sl-selector__products .product-quantity,
.sl-selector__products .product-description > .clearfix { display: none !important; }
/* El tema de PROD trae `.t17_product_item a.product-miniature { display: block }` (0,2,1), que dejaba la foto
   pegada a la izquierda: la regla lleva 3 clases + elemento para ganar, y la imagen además se centra con margin auto */
.sl .sl-selector__products .product-box a.product-image {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 270px; margin: 0; padding: 0; float: none;
}
.sl .sl-selector__products .product-image img { max-height: 270px; width: auto; max-width: 100%; margin: 0 auto; object-fit: contain; }
/* La ficha (nombre, precio, botón) va superpuesta e invisible; sin pointer-events para que el toque en móvil
   llegue al producto y no a la capa oculta (antes el primer toque caía en el botón invisible) */
.sl-selector__products .thumbnail-container {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: #fff; opacity: 0; pointer-events: none; transition: opacity .2s; padding: 0 10px;
}
.sl-selector__products .product-box:hover .thumbnail-container,
.sl-selector__products .product-box:focus-within .thumbnail-container,
.sl-selector__products .product-box.is-open .thumbnail-container { opacity: 1; pointer-events: auto; }
.sl-selector__products .product-description { text-align: center; }
.sl-selector__products .product-name {
  margin: 0 auto 17px; max-width: 215px; font-family: var(--sl-body); font-weight: 400; font-size: 14px; line-height: 1.07;
  text-transform: uppercase; letter-spacing: .01em;
}
.sl-selector__products .product-name a { color: var(--sl-black); text-decoration: none; }
.sl-selector__products .content_price { font-size: 14px; line-height: 1.07; margin: 0; }
.sl-selector__products .content_price .price { font-size: 14px; font-weight: 400; color: var(--sl-black); }
.sl-selector__products .ecommaddtocart_productlist { position: relative; margin-top: 44px; }
/* El «+» despliega la descripción corta del producto (cliente 2026-09-15): botón insertado por el JS que marca la
   ficha con is-desc-open. Al abrirse gira 45° y hace de aspa para cerrar. */
.sl-selector__products .sl-tile__more {
  position: absolute; left: 50%; top: -50px; transform: translateX(-50%); padding: 0 12px; z-index: 2;
  background: none; border: 0; appearance: none; -webkit-appearance: none;
  font-family: var(--sl-body); font-weight: 200; font-size: 40px; line-height: 1; color: var(--sl-black); text-decoration: none; cursor: pointer;
  transition: transform .2s;
}
.sl-selector__products .sl-tile__more:hover, .sl-selector__products .sl-tile__more:focus-visible { color: var(--sl-black); text-decoration: none; transform: translateX(-50%) scale(1.15); }
.sl-selector__products .product-box.is-desc-open .sl-tile__more { transform: translateX(-50%) rotate(45deg); }
.sl-selector__products .product-box.is-desc-open .sl-tile__more:hover { transform: translateX(-50%) rotate(45deg) scale(1.15); }
/* Descripción corta: oculta salvo cuando el «+» la despliega; como mucho 2 líneas y el resto con puntos suspensivos.
   El recorte va en el <p> (el texto del tema vive ahí; con el recorte en el contenedor, el <p> contaba como una sola
   línea y no se recortaba nada). El contenedor limita la altura por si algún producto trae el texto suelto. */
.sl-selector__products .product-box.is-desc-open .short_description_product_list {
  display: block !important; margin: 4px auto 14px; max-width: 215px;
  font-size: 12px; line-height: 1.35; color: var(--sl-black); text-align: center;
}
/* Reserva por si algún producto trae el texto sin <p>: entonces se recorta el propio contenedor */
.sl-selector__products .product-box.is-desc-open .short_description_product_list:not(:has(p)) {
  display: -webkit-box !important; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sl-selector__products .product-box.is-desc-open .short_description_product_list p {
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0;
  /* Unos productos traen la descripción dentro de un <p> y otros como texto suelto. El tema da a ese <p> 14px/165%
     y letter-spacing propios (10px en móvil), así que se veía más grande: aquí se iguala al texto sin <p>, que toma
     la tipografía del contenedor (cliente 2026-09-15). */
  font-size: 12px; line-height: 1.35; letter-spacing: normal; font-weight: 400; color: var(--sl-black); text-align: center;
}
/* Botón del widget ecommaddtocart, igual que el botón del diseño (159x30, borde negro 1px, Fira 14px mayúsculas).
   Los selectores repiten la ruta del tema (.ecommaddtocart_productlist form .add-to-cart-productlist) para ganarle. */
.sl .ecommaddtocart_productlist, .sl .ecommaddtocart_productlist form { display: block; width: auto; }
.sl .ecommaddtocart_productlist .contentbuttons { display: block; width: auto; }
.sl .ecommaddtocart_productlist form .add-to-cart-productlist,
.sl .ecommaddtocart_productlist form .add-to-cart-productlist:focus,
.sl .ecommaddtocart_productlist form .no_stock {
  display: inline-block; width: auto; min-width: 159px; max-width: 100%; height: auto; padding: 3px 14px; margin: 0;
  background: #fff; border: 1px solid var(--sl-black); border-radius: 0; box-shadow: none; outline: none;
  color: var(--sl-black); font-family: var(--sl-body); font-size: 14px; line-height: 1.65; font-weight: 400;
  text-transform: uppercase; letter-spacing: .01em; text-align: center; white-space: nowrap; transform: none;
  transition: background .15s, color .15s;
}
.sl .ecommaddtocart_productlist form .add-to-cart-productlist:hover,
.sl .ecommaddtocart_productlist form .add-to-cart-productlist:focus-visible { background: var(--sl-black); color: #fff; }
.sl .ecommaddtocart_productlist form .add-to-cart-productlist span,
.sl .ecommaddtocart_productlist form .add-to-cart-productlist .material-icons { display: none; }
.sl .ecommaddtocart_productlist form .add-to-cart-productlist::after { content: "Añadir al carrito"; }
/* Textos fijos por idioma: PrestaShop pone lang="en-US" / "es-ES" en <html> */
html[lang^="en"] .sl .ecommaddtocart_productlist form .add-to-cart-productlist::after { content: "Add to cart"; }
.sl-selector__products .ecommaddtocart_productlist form .add-to-cart-productlist { min-width: 135px; }
.sl-selector__products .ecommaddtocart_productlist form .add-to-cart-productlist::after { content: "Comprar ahora"; }
html[lang^="en"] .sl-selector__products .ecommaddtocart_productlist form .add-to-cart-productlist::after { content: "Shop now"; }
.sl .ecommaddtocart_productlist form .no_stock { color: #8c8c8c; border-color: #8c8c8c; cursor: default; }
.sl .ecommaddtocart_productlist form .no_stock span { font-size: 14px; }
/* El tema muestra la segunda foto del producto al pasar el ratón (product-list.css); aquí sobra */
.sl .product-miniature:hover .second_image.img-fluid, .sl .second_image { display: none !important; }

/* ============================================================================
   4. CIFRAS
   ============================================================================ */
/* La sección va a sangre: la foto llega siempre al borde derecho de la pantalla (petición del cliente 2026-09-10; antes la
   rejilla se limitaba a 1512 px y en pantallas más anchas la foto se cortaba y seguía el fondo gris). El texto se alinea con
   el ancho máximo de la landing y crece un poco en pantallas anchas para equilibrar el tamaño que gana la foto. Las medidas
   con cqw (ancho de la sección) llevan delante su valor fijo de 1512 px como reserva para navegadores sin unidades de contenedor. */
.sl-stats { margin-top: 63px; background: var(--sl-grey-bg); container-type: inline-size; }
.sl-stats__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sl-stats__text {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 24px; align-content: start;
  /* El texto arranca a 25 px del borde izquierdo en cualquier ancho (como las fichas y el blog); así la 2.ª columna
     tiene sitio para «x2,4 reduce estrés oxidativo» en una línea desde ~1280 px */
  padding: 64px 25px 12px 25px;
  padding: clamp(64px, 4.23cqw, 80px) 25px 12px 25px;
}
/* Antetítulo nuevo (cliente 2026-09-11) en la parte alta de la columna; las cifras quedan a la altura de la foto */
.sl .rte .sl-stats__text p.sl-stats__eyebrow { grid-column: 1 / -1; margin: 0 0 190px; margin-bottom: clamp(190px, 12.6cqw, 235px); }
.sl-stats__list { font-family: var(--sl-head); font-weight: 700; font-size: 32px; font-size: clamp(24px, 2.12cqw, 40px); line-height: 1; }
.sl-stats__list li { margin-bottom: 40px; margin-bottom: clamp(40px, 2.65cqw, 50px); } /* sin nowrap: «x2,4 reduce estrés oxidativo» parte en dos líneas si no cabe */
.sl-stats__list li:last-child { margin-bottom: 0; }
/* Desde el 2026-09-11 las dos columnas de cifras empiezan a la misma altura (antes la segunda bajaba 72 px) */
.sl-stats__list--2 { padding-top: 0; }
.sl-stats__list--mobile { display: none; }
.sl-stats__desc { grid-column: 1 / -1; max-width: 701px; margin-top: 16px; font-size: 14px; font-size: clamp(14px, .93cqw, 16px); line-height: 1.65; }
/* La proporción de la foto (758x537) marca la altura mínima de la fila: al ensancharse la columna, la foto crece sin recortarse */
.sl-stats__media { position: relative; min-height: 537px; aspect-ratio: 758 / 537; }
.sl .sl-stats__media img {
  width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0;
  clip-path: polygon(8.2% 0, 100% 0, 100% 100%, 0 100%);
}

/* ============================================================================
   5. NUEVOS CONCENTRADOS
   ============================================================================ */
.sl-conc-head { padding-top: 91px; }
.sl-conc-head .sl-subtitle { margin-top: 7px; }

/* Ficha: los bloques HTML (texto, claims, antes/después) se "disuelven" (display: contents) para que título,
   descripción, imagen de producto, claims y botón sean celdas de una misma rejilla. Los 4 productos viven en UN
   solo bloque de producto (.sl-conc-products, en la cabecera de la sección); el JS mueve cada <li class="product-box">
   a su ficha en el orden del bloque, y el <li> también se disuelve. */
.sl-conc-products { display: none; }
.sl-card {
  display: grid; grid-template-columns: 320px minmax(0, 1fr) 47%; grid-template-rows: auto auto auto 1fr;
  grid-template-areas: "title title ba" "desc desc ba" "img claims ba" "img btn ba";
  column-gap: 0; margin-top: 55px;
}
.sl-card + .sl-card { margin-top: 102px; }
.sl-card--rev {
  grid-template-columns: 47% 320px minmax(0, 1fr);
  grid-template-areas: "ba title title" "ba desc desc" "ba img claims" "ba img btn";
}
.sl-card .sl-b, .sl-card .sl-b > .rte,
.sl-card > .product-box, .sl-card > .product-box .thumbnail-container,
.sl-card > .product-box .product-description { display: contents; }
.sl-card .product-flags, .sl-card .second_image, .sl-card .short_description_product_list,
.sl-card .product-name, .sl-card .content_price, .sl-card .product-quantity,
.sl-card .product-description > .clearfix { display: none !important; }
.sl-card__title {
  grid-area: title; padding: 0 20px 0 36px; font-family: var(--sl-head); font-weight: 700; font-size: 32px; line-height: 34px;
  color: var(--sl-black); text-align: left;
}
.sl-card--rev .sl-card__title, .sl-card--rev .sl-card__desc { padding-left: 26px; }
.sl-card--rev .sl-card__title { padding-right: 60px; }
.sl-card__desc { grid-area: desc; padding: 9px 60px 0 36px; font-size: 14px; line-height: 1.65; }
/* Marca y nombre del producto al tamaño del cuerpo (14 px): marca en mayúsculas, nombre en minúsculas con versalitas (cliente 2026-09-14) */
.sl .rte .sl-card__desc p.sl-brand { text-transform: uppercase; font-size: 14px; letter-spacing: .02em; line-height: 1.65; margin: 0; }
.sl .rte .sl-card__desc p.sl-pname { text-transform: lowercase; font-variant: small-caps; font-size: 14px; letter-spacing: .04em; line-height: 1.65; margin: 0 0 20px; }
.sl-card__desc p + p:not(.sl-pname) { margin-top: 20px; }
/* OJO con el selector: el contenedor de la ficha lleva «sl» y «sl-card» en el MISMO elemento, así que «.sl .sl-card»
   (descendiente) nunca casa; se usa .advanced-cms-wrapper .sl-card .product-box … para casar y ganarle al tema.
   Desde el 2026-09-16 la foto del catálogo se sustituye por el recorte del Figma (`card-<clave>.png`, lo cambia el JS
   en initCardImages): ya viene sin aire alrededor, así que se muestra a su tamaño natural, que es justo el del diseño
   a 1512 (301..327 px de alto). Si el JS no llegara a ejecutarse se vería la foto del catálogo a 320 px, como antes. */
.advanced-cms-wrapper .sl-card .product-box a.product-image {
  grid-area: img; align-self: start; justify-self: center; display: flex; align-items: flex-start; justify-content: center;
  margin: 12px 0 0; padding: 0; width: auto; max-width: 100%; float: none;
}
.advanced-cms-wrapper .sl-card .product-box .product-image img { width: auto; height: auto; max-width: 100%; object-fit: contain; }
.sl-claims { grid-area: claims; margin: 51px 0 0; font-family: var(--sl-head); font-weight: 700; font-size: 25px; line-height: 24px; }
.sl-claims li { position: relative; max-width: 470px; margin-bottom: 56px; }
.sl-claims li:last-child { margin-bottom: 0; }
.sl-claims sup { font-family: var(--sl-body); font-weight: 400; font-size: 12px; line-height: 0; color: #c5c5c5; margin-left: 6px; vertical-align: super; }
br.sl-br-m { display: none; } /* solo actúa en móvil */
.sl-card .ecommaddtocart_productlist { grid-area: btn; align-self: start; margin: 46px 0 29px; }
.sl-card .ecommaddtocart_productlist .contentbuttons { display: block; }
/* El bloque .sl-card__ba se disuelve (display: contents): la celda de la rejilla es la propia figure */
.sl-card .sl-ba { grid-area: ba; }
/* En escritorio el comparador ocupa toda la altura de la ficha y, como mínimo, la altura natural de la foto para su
   ancho (47 % del viewport x 528/710 = 34.95vw; 528 px a 1512). Si la columna de texto es más baja, la rejilla la
   estira y el hueco extra va a la fila de los claims; si es más alta, la foto se recorta con cover. */
@media (min-width: 1200px) {
  .sl-card .sl-ba { aspect-ratio: auto; align-self: stretch; min-height: 34.95vw; }
}

/* Antes / después: comparador deslizable. Dos fotos superpuestas recortadas con clip-path según --split;
   un <input type="range"> transparente encima da el arrastre (ratón, dedo y teclado) y el JS mueve --split. */
.sl-ba { position: relative; aspect-ratio: 710 / 528; overflow: hidden; background: #eee; user-select: none; }
.sl-ba__before, .sl-ba__after { position: absolute; inset: 0; transition: clip-path .25s ease; }
.sl .sl-ba__before picture, .sl .sl-ba__after picture, .sl .sl-ba__before img, .sl .sl-ba__after img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.sl-ba__before { clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.sl-ba__after { clip-path: inset(0 0 0 var(--split)); }
.sl-ba__handle {
  position: absolute; top: 0; bottom: 0; left: var(--split); z-index: 2; width: 1px; margin-left: -.5px;
  background: #fff; pointer-events: none; transition: left .25s ease;
}
.sl-ba__handle::after {
  content: ""; position: absolute; top: 48.5%; left: 50%; width: 15px; height: 15px; transform: translate(-50%, -50%);
  border: 1px solid #fff; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255, 255, 255, .15);
}
.sl-ba.is-dragging .sl-ba__before, .sl-ba.is-dragging .sl-ba__after, .sl-ba.is-dragging .sl-ba__handle,
.sl-ba.is-hinting .sl-ba__before, .sl-ba.is-hinting .sl-ba__after, .sl-ba.is-hinting .sl-ba__handle { transition: none; }
/* Pista de uso (cliente 2026-09-10): el círculo late hasta el primer toque; el JS añade además un barrido de ida y vuelta al entrar en pantalla */
@keyframes sl-ba-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255, 255, 255, .15); }
  50% { box-shadow: 0 0 0 12px rgba(255, 255, 255, .4); }
}
.sl-ba:not(.is-touched) .sl-ba__handle::after { animation: sl-ba-pulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .sl-ba .sl-ba__handle::after { animation: none; } }
.sl-ba__tag {
  position: absolute; bottom: 22px; z-index: 3; padding: 1px 14px; background: #fff; color: var(--sl-black);
  font-size: 12px; line-height: 1.65; text-transform: uppercase; letter-spacing: .04em; pointer-events: none;
}
.sl-ba__tag--before { left: 14px; }
.sl-ba__tag--after { right: 14px; }
.sl-ba__range {
  position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0;
  cursor: ew-resize; touch-action: pan-y; -webkit-appearance: none; appearance: none; background: transparent; border: 0;
}
.sl-ba__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 40px; height: 100vh; background: transparent; border: 0; }
.sl-ba__range::-moz-range-thumb { width: 40px; height: 100vh; background: transparent; border: 0; border-radius: 0; }
.sl-ba__range::-webkit-slider-runnable-track, .sl-ba__range::-moz-range-track { background: transparent; border: 0; }
.sl-ba__range:focus-visible ~ .sl-ba__handle { background: #000; }

/* ============================================================================
   6. PATENTED GREEN CAVIAR BIOTECH
   ============================================================================ */
.sl-caviar { position: relative; isolation: isolate; margin-top: 97px; padding: 47px 0 32px; }
.sl-caviar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sl-pink);
  clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%); /* recto arriba y corte diagonal abajo, como en Figma (cliente 2026-09-14) */
}
.sl-caviar__inner {
  display: grid; grid-template-columns: 422px minmax(0, 1fr) 404px; column-gap: 31px; align-items: start;
  max-width: var(--sl-max); margin: 0 auto; padding: 0 120px 0 36px;
}
.sl .sl-caviar__media img { width: 422px; height: 422px; object-fit: cover; }
/* Desde el 2026-09-16 el ingrediente es un vídeo de Vimeo en vez de una foto (cliente). El vídeo es cuadrado
   (1280x1280), igual que la caja del diseño, así que no se recorta. La proporción va en el contenedor y el
   iframe lo llena, como en el hero y el how to: con aspect-ratio en el propio iframe, Safari usa el alto del
   atributo HTML y la caja se descuadra. */
.sl-caviar__video { position: relative; width: 422px; aspect-ratio: 1; overflow: hidden; background: #f2f2f2; }
.sl .sl-caviar__video iframe {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; border: 0;
}
.sl-caviar__note { margin-top: 23px; max-width: 433px; font-size: 14px; line-height: 1.26; color: #a2a2a2; }
.sl-caviar__text { max-width: 389px; padding-top: 82px; }
.sl .rte .sl-caviar__text p.sl-eyebrow { margin-bottom: 7px; }
.sl-caviar__text .sl-title { margin-bottom: 20px; }
.sl-caviar__text > p { font-size: 14px; line-height: 1.65; }
.sl-caviar__benefits-title { margin-top: 24px; text-transform: uppercase; font-size: 12px; letter-spacing: .06em; }
.sl-caviar__benefits { counter-reset: sl-benefit; }
.sl-caviar__benefits li { counter-increment: sl-benefit; font-size: 14px; line-height: 1.65; }
.sl-caviar__benefits li::before { content: counter(sl-benefit, decimal-leading-zero); font-size: 9px; vertical-align: super; margin-right: 6px; }
.sl-ingredients { padding-top: 0; } /* la fila de círculos arranca a la altura de la foto */
/* Figma: círculos en (988, 5986) y (1244, 5986) y (988, 6247): paso horizontal 256 = 147 + 109; paso vertical 261 =
   156 de círculo + 15 + ~46 de pie + 44 de hueco */
.sl-ingredients__track { display: grid; grid-template-columns: repeat(2, 147px); gap: 44px 109px; }
.sl-ingredient { width: 147px; text-align: center; }
.sl-ingredient__circle { display: block; width: 147px; height: 156px; margin: 0 auto; }
.sl .sl-ingredient__circle img { width: 100%; height: 100%; object-fit: contain; }
.sl-ingredient figcaption { margin-top: 15px; font-size: 14px; line-height: 1.65; }
.sl-ingredient figcaption em { display: block; font-family: var(--sl-body); font-style: italic; }
.sl-ingredient figcaption span { display: block; margin-top: 2px; text-transform: uppercase; font-size: 11px; letter-spacing: .06em; }

/* ============================================================================
   7. PASOS
   ============================================================================ */
.sl-steps-wrap { margin-top: 64px; }
.sl-steps__title { margin-bottom: 47px; padding: 0 16px; } /* título de la sección (cliente 2026-09-15) */
.sl-steps__track { display: grid; grid-template-columns: 1fr 1.285fr 1fr; gap: 15px; max-width: var(--sl-max); margin: 0 auto; }
.sl-step {
  display: flex; flex-direction: column; align-items: center; min-height: 542px; padding: 32px 30px 40px;
  background: var(--sl-grey-card); text-align: center;
}
.sl .rte .sl-step p.sl-eyebrow { margin-bottom: 19px; }
.sl-step__title { max-width: 490px; margin: 0 0 19px; font-family: var(--sl-head); font-weight: 700; font-size: 32px; line-height: 34px; color: var(--sl-black); }
.sl .rte p.sl-step__desc { max-width: 414px; margin: 0 0 28px; font-size: 14px; line-height: 1.65; }
.sl-step__media {
  flex: 1; display: flex; align-items: flex-end; justify-content: center; width: 100%;
  min-height: 200px; margin: 0 0 24px;
}
.sl-step__media.sl-placeholder { height: 240px; flex: none; }
.sl-step__media img { max-width: 100%; width: auto; height: auto; object-fit: contain; }
/* Tamaño de las imágenes relativo a la tarjeta, como en el Figma a 1512 px (280, 508 y 161 px sobre 391, 520 y 391 de ancho útil) */
.sl-step:nth-child(1) .sl-step__media img { width: 72%; }
.sl-step:nth-child(2) .sl-step__media img { width: 98%; }
.sl-step:nth-child(3) .sl-step__media img { width: 41%; }
.sl-step .sl-btn { margin-top: auto; min-width: 135px; background: var(--sl-grey-card); } /* mismo gris que la tarjeta (cliente 2026-09-10) */
.sl-step .sl-btn:hover, .sl-step .sl-btn:focus-visible { background: var(--sl-black); color: #fff; } /* el gris de la tarjeta pisaba el hover y el texto blanco desaparecía */

/* ============================================================================
   8. VÍDEO HOW TO · 9. NOTAS · 10. BLOG
   ============================================================================ */
.sl-howto { margin-top: 47px; }
.sl-video--howto img { aspect-ratio: 1509 / 764; }
/* Iframes de Vimeo que puso el cliente: a todo el ancho y con la proporción del vídeo, sin bandas ni recorte.
   La proporción va en el contenedor (un div) y el iframe lo llena, como en el hero: con aspect-ratio en el propio
   iframe, Safari se queda con el alto del atributo HTML (height="764"), la caja salía más ancha que el vídeo y el
   reproductor de Vimeo lo recortaba por arriba y por abajo (cliente 2026-09-15). */
.sl .sl-video--howto { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.sl .sl-video--howto:has(iframe.sl-video__mobile) { aspect-ratio: 1 / 1; }
.sl .sl-video--howto iframe {
  position: absolute; inset: 0; display: block; width: 100% !important; height: 100% !important;
  aspect-ratio: auto !important; max-width: none; border: 0;
}
.sl-notes { margin: 37px auto 0; padding: 0 16px; text-align: center; font-size: 11px; line-height: 24px; color: #bebebe; text-transform: uppercase; letter-spacing: .04em; }
.sl-notes sup { font-size: 8px; line-height: 0; vertical-align: super; }

.sl-blog { margin: 55px 0 60px; }
/* A sangre (cliente 2026-09-10): la foto llega al borde derecho y el texto arranca a 39 px del borde izquierdo en cualquier ancho */
.sl-blog__inner { display: grid; grid-template-columns: minmax(0, 625fr) minmax(0, 887fr); align-items: center; }
.sl-blog__text { padding: 0 20px 0 39px; }
.sl .rte p.sl-blog__eyebrow { margin-bottom: 20px; font-size: 14px; line-height: 1.65; text-transform: uppercase; letter-spacing: .02em; }
.sl-blog__title { max-width: 582px; margin-bottom: 26px; font-family: var(--sl-head); font-weight: 700; font-size: 48px; line-height: 45px; color: var(--sl-black); }
.sl .rte p.sl-blog__excerpt { max-width: 606px; margin-bottom: 10px; font-size: 14px; line-height: 1.65; color: var(--sl-black); } /* negro (cliente 2026-09-14) */
.sl-blog__media img { width: 100%; aspect-ratio: 887 / 631; object-fit: cover; clip-path: polygon(4% 0, 100% 0, 100% 100%, 0 100%); }

/* ============================================================================
   CARRUSELES (solo móvil; el JS añade flechas y puntos)
   ============================================================================ */
/* min-width: 0 y minmax(0, 1fr) evitan que el ancho mínimo de los slides (4 x 148 px) ensanche la rejilla
   de la sección y provoque scroll horizontal en móvil */
.sl-carousel { position: relative; min-width: 0; max-width: 100%; }
.sl-carousel__track { min-width: 0; max-width: 100%; }
.sl-carousel__track > * { min-width: 0; }
.sl-carousel__nav { display: none; }
.sl-carousel__dots { display: none; }

/* ============================================================================
   TABLET (768 – 1199)
   ============================================================================ */
@media (max-width: 1199px) and (min-width: 768px) {
  .sl-hero__title { font-size: 48px; }
  .sl-concern__label { font-size: 24px; }
  .sl-filter__opt { font-size: 12px; }
  .sl-stats__text { padding: 40px 20px 20px; }
  .sl .rte .sl-stats__text p.sl-stats__eyebrow { margin-bottom: 60px; }
  .sl-stats__list { font-size: 24px; }
  .sl-stats__list li { margin-bottom: 24px; }
  .sl-stats__media { min-height: 0; }
  .sl-card, .sl-card--rev { grid-template-columns: 1fr; grid-template-areas: "title" "desc" "img" "claims" "btn" "ba"; }
  .sl-card__title, .sl-card__desc, .sl-card--rev .sl-card__title, .sl-card--rev .sl-card__desc { padding: 0 32px; }
  .sl-card__desc { padding-top: 10px; }
  .advanced-cms-wrapper .sl-card .product-box a.product-image { margin: 16px auto 0; padding: 0; width: auto; justify-self: center; }
  .advanced-cms-wrapper .sl-card .product-box .product-image img { max-height: 260px; }
  .sl-claims { margin: 24px 32px 0; }
  .sl-claims li { margin-bottom: 20px; }
  .sl-card .ecommaddtocart_productlist { margin: 24px 32px 0; }
  .sl-card .sl-ba { margin-top:32px; }
  .sl-caviar__inner { grid-template-columns: 1fr 1fr; padding: 0 32px; }
  .sl .sl-caviar__media img { width: 100%; height: auto; aspect-ratio: 1; }
  .sl-caviar__video { width: 100%; }
  .sl-caviar__text { padding-top: 0; }
  .sl-ingredients { grid-column: 1 / -1; }
  .sl-ingredients__track { grid-template-columns: repeat(4, 147px); gap: 24px; justify-content: center; }
  .sl-steps__track { gap: 10px; padding: 0 10px; }
  .sl-step { min-height: 0; padding: 24px 16px 32px; }
  .sl-step__title { font-size: 24px; line-height: 26px; }
  .sl-blog__title { font-size: 34px; line-height: 34px; }
}

/* ============================================================================
   MÓVIL (< 768)
   ============================================================================ */
@media (max-width: 767px) {
  .sl { font-size: 13px; }
  .sl-title { font-size: 25px; line-height: 1.1; }
  .sl-subtitle { margin-top: 12px; font-size: 11px; padding: 0 24px; }
  .sl-eyebrow { font-size: 11px; }
  .sl-video__tag { font-size: 30px; line-height: 26px; }

  /* 1. Hero */
  .sl-hero { padding-top: 6px; }
  .sl-hero__title { font-size: 46px; line-height: .66; margin-bottom: 4px; padding: 14px 12px 0; }
  .sl-hero__media img { aspect-ratio: 428 / 458; }
  .sl-video--hero { aspect-ratio: 1 / 1; }
  .sl-video--hero .sl-video__frame--desktop { display: none; }
  .sl-video--hero .sl-video__frame--mobile { display: block; }

  /* 2. Preocupaciones: una por pantalla, deslizable */
  .sl-concerns { padding-top: 30px; }
  .sl-concerns__title { margin-bottom: 26px; padding: 0 24px; }
  .sl-concerns__grid {
    display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sl-concerns__grid::-webkit-scrollbar { display: none; }
  .sl-concern { flex: 0 0 100%; scroll-snap-align: start; }
  /* Flechas (cliente 2026-09-14) a media altura de la foto, que mide 436/428 del ancho */
  .sl-concerns__carousel .sl-carousel__nav { top: calc(50vw * 436 / 428); margin-top: -15px; }
  .sl-concern__media { aspect-ratio: 428 / 436; }
  .sl-concern__label { font-size: 30px; }
  .sl-concern__text { margin: 20px 32px 0; text-align: center; font-size: 13px; }

  /* 3. Selector: dos opciones por fila y los productos en una rejilla de 2 columnas */
  .sl-selector { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 42px 16px 0; row-gap: 20px; }
  .advanced-cms-wrapper .sl-selector .sl-selector__head { padding-bottom: 20px; }
  .sl-filter { grid-template-columns: 1fr 1fr; row-gap: 22px; column-gap: 12px; margin-top: 30px; padding: 0 16px; }
  .sl-filter__opt { justify-content: flex-start; font-size: 11px; line-height: 1.3; letter-spacing: .02em; }
  .sl-filter__opt::before { width: 15px; height: 15px; box-shadow: inset 0 0 0 3px #fff; }
  .sl-selector__products .adcms-product { margin-top: 40px; }
  .sl-selector__products .adcms-product > ul { grid-template-columns: 1fr 1fr; padding: 0 16px; row-gap: 20px; }
  .sl-selector__products .product-box { min-height: 230px; padding: 0 8px; }
  .sl .sl-selector__products .product-box a.product-image { height: 210px; }
  .sl .sl-selector__products .product-image img { max-height: 210px; }
  .sl-selector__products .product-name { font-size: 11px; margin-bottom: 12px; }
  .sl-selector__products .content_price, .sl-selector__products .content_price .price { font-size: 11px; }
  .sl-selector__products .ecommaddtocart_productlist { margin-top: 34px; }
  .sl-selector__products .sl-tile__more { top: -40px; font-size: 30px; }
  .sl-selector__products .ecommaddtocart_productlist form .add-to-cart-productlist { min-width: 108px; padding: 2px 10px; font-size: 11px; line-height: 1.5; }

  /* 4. Cifras: solo la foto con las cifras encima */
  .sl-stats { margin-top: 48px; background: transparent; }
  .sl-stats__inner { grid-template-columns: 1fr; }
  .sl-stats__text { display: none; }
  .sl-stats__media { min-height: 0; aspect-ratio: 428 / 438; }
  .sl .sl-stats__media img { clip-path: none; }
  .sl-stats__list--mobile {
    display: block; position: absolute; top: 34px; left: 0; right: 0; text-align: center;
    font-size: 25px; line-height: 1.24;
  }
  .sl-stats__list--mobile li { margin: 0; }

  /* 5. Concentrados */
  .sl-conc-head { padding-top: 60px; }
  .sl-conc-head .sl-subtitle { display: none; }
  .sl-card, .sl-card--rev {
    grid-template-columns: 1fr; grid-template-rows: auto;
    grid-template-areas: "title" "img" "price" "btn" "desc" "claims" "ba"; margin-top: 28px;
  }
  .sl-card + .sl-card { margin-top: 28px; }
  .sl-card__title, .sl-card--rev .sl-card__title {
    padding: 0 40px; text-align: center; font-size: 18px; line-height: 1.2;
  }
  .advanced-cms-wrapper .sl-card .product-box a.product-image { margin: 12px auto 0; padding: 0; width: auto; justify-self: center; justify-content: center; }
  .advanced-cms-wrapper .sl-card .product-box .product-image img { max-height: 205px; } /* mismo tamaño que el bote del Figma móvil */
  .sl-card .content_price { display: block !important; grid-area: price; text-align: center; font-size: 12px; line-height: 1.65; margin-top: 4px; }
  .sl-card .content_price .price { font-size: 12px; font-weight: 400; color: var(--sl-black); }
  .sl-card .ecommaddtocart_productlist { grid-area: btn; margin: 8px auto 0; text-align: center; }
  .sl-card__desc, .sl-card--rev .sl-card__desc { padding: 18px 14px 0; text-align: center; font-size: 13px; }
  .sl .rte .sl-card__desc p.sl-brand { font-size: 13px; }
  .sl .rte .sl-card__desc p.sl-pname { font-size: 13px; margin-bottom: 14px; }
  .sl-card__desc p + p:not(.sl-pname) { margin-top: 14px; }
  /* Claims como en el Figma móvil: columnas al ancho de su texto, repartidas, con los saltos br.sl-br-m */
  .sl-claims {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin: 22px 20px 0;
    font-size: 17px; line-height: 1.12; text-align: left;
  }
  .sl-claims li { flex: 0 1 auto; margin: 0; max-width: 48%; min-width: 0; overflow-wrap: break-word; }
  br.sl-br-m { display: initial; }
  .sl-claims sup { font-size: 9px; margin-left: 3px; }
  .sl-card .sl-ba { margin-top:20px; }
  /* Las fotos reales del comparador comparten encuadre (710x528): se mantiene su proporción también en móvil */
  .sl-ba { aspect-ratio: 710 / 528; }
  .sl-ba__tag { bottom: 12px; font-size: 9px; padding: 1px 12px; }
  .sl-ba__tag--before { left: 8px; }
  .sl-ba__tag--after { right: 8px; }

  /* 6. Green caviar */
  .sl-caviar { margin-top: 44px; padding: 40px 0 34px; }
  .sl-caviar::before { clip-path: polygon(0 0, 100% 0, 100% 97%, 0 100%); }
  .sl-caviar__inner { grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: 26px; padding: 0 17px; }
  .sl-caviar__text { order: 1; max-width: none; padding-top: 0; text-align: center; }
  .sl-caviar__text .sl-title { text-align: center; margin-bottom: 14px; }
  .sl-caviar__text > p { font-size: 13px; }
  .sl-caviar__benefits-title { margin-top: 16px; }
  .sl-caviar__benefits li { font-size: 13px; }
  .sl-caviar__media { order: 2; margin: 0 -17px; }
  .sl .sl-caviar__media img { width: 100%; height: auto; aspect-ratio: 428 / 269; }
  /* El vídeo se deja cuadrado también en móvil: recortarlo a la tira 428/269 de la foto se comería la pieza */
  .sl-caviar__video { width: 100%; }
  .sl-caviar__note { margin: 18px 17px 0; max-width: none; text-align: center; font-size: 12px; }
  .sl-ingredients { order: 3; padding: 4px 0 0; }
  .sl-ingredients__track { display: flex; gap: 0; }
  .sl-ingredient { flex: 0 0 100%; width: auto; display: flex; flex-direction: column; align-items: center; }
  .sl-ingredient__circle { width: 148px; height: 148px; } /* 1:1 (cliente 2026-09-14); el PNG mide 147x156 y se ajusta */
  .sl .sl-ingredient__circle img { object-fit: fill; }
  .sl-ingredient figcaption { font-size: 13px; }

  /* 7. Pasos: carrusel */
  .sl-steps-wrap { margin-top: 40px; }
  .sl-steps__title { margin-bottom: 22px; padding: 0 24px; }
  .sl-steps__track { display: flex; gap: 0; }
  .sl-step { flex: 0 0 100%; min-height: 0; padding: 28px 32px 36px; }
  .sl .rte .sl-step p.sl-eyebrow { margin-bottom: 12px; }
  .sl-step__title { font-size: 25px; line-height: 1.2; margin-bottom: 14px; }
  .sl .rte p.sl-step__desc { font-size: 13px; margin-bottom: 20px; }
  .sl-step__media { min-height: 0; margin-bottom: 20px; }
  .sl-step__media.sl-placeholder { height: 214px; }
  /* En móvil las imágenes van a su tamaño natural (hasta el ancho del hueco), como en el Figma móvil */
  .sl-step:nth-child(1) .sl-step__media img, .sl-step:nth-child(2) .sl-step__media img, .sl-step:nth-child(3) .sl-step__media img { width: auto; max-width: 100%; }

  /* Carrusel genérico (track deslizable + flechas + puntos) */
  .sl-carousel__track {
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .sl-carousel__track::-webkit-scrollbar { display: none; }
  .sl-carousel__track > * { scroll-snap-align: start; }
  /* Flechas y puntos más grandes que en el Figma (14 px / 4 px): petición del cliente 2026-09-10 */
  .sl-carousel__nav {
    display: block; position: absolute; top: 50%; z-index: 2; width: 30px; height: 30px; margin-top: -15px; padding: 0;
    border: 0; border-radius: 50%; background: var(--sl-black); cursor: pointer;
  }
  .sl-carousel__nav::before {
    content: ""; position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -6.5px;
    border-right: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(-45deg);
  }
  .sl-carousel__nav--prev { left: 8px; }
  .sl-carousel__nav--prev::before { margin-left: -2.5px; transform: rotate(135deg); }
  .sl-carousel__nav--next { right: 8px; }
  .sl-ingredients .sl-carousel__nav { top: 70px; margin-top: 0; }
  .sl-carousel__dots { display: flex; justify-content: center; gap: 26px; margin-top: 18px; }
  .sl-carousel__dot {
    position: relative; width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: var(--sl-grey-video);
    cursor: pointer;
  }
  .sl-carousel__dot.is-active { background: var(--sl-black); }
  .sl-carousel__dot[data-label]::after {
    content: attr(data-label); position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
    font-family: var(--sl-body); font-size: 10px; line-height: 1.4; color: var(--sl-black);
  }
  .sl-carousel[data-sl-carousel="numbered"] .sl-carousel__dots { margin-bottom: 14px; }

  /* 8-10 */
  .sl-howto { margin-top: 40px; }
  .sl-video--howto img { aspect-ratio: 428 / 529; }
  .sl .sl-video--howto { aspect-ratio: 1 / 1; } /* en móvil solo se ve el bloque del vídeo cuadrado */
  .sl-notes { margin-top: 18px; font-size: 9px; line-height: 17px; }
  .sl-blog { margin: 36px 0 40px; }
  .sl-blog__inner { grid-template-columns: 1fr; }
  .sl-blog__text { padding: 0 10px; }
  .sl .rte p.sl-blog__eyebrow { font-size: 11px; margin-bottom: 6px; }
  .sl-blog__title { max-width: none; font-size: 25px; line-height: 1.1; margin-bottom: 12px; }
  .sl .rte p.sl-blog__excerpt { font-size: 12px; margin-bottom: 8px; }
  .sl-link { font-size: 11px; }
  .sl-blog__media { margin-top: 20px; }
  .sl-blog__media img { aspect-ratio: 428 / 310; clip-path: polygon(4% 0, 100% 0, 100% 100%, 0 100%); }
}