/* ══════════════════════════════════════════════════════════════════════════
   Tokens de Musas.
   En el tema de bloques los servia `theme.json` como --wp--preset--*. En la web
   de Musas no hay theme.json: su tema es clasico y el diseno lo pinta Elementor.
   Aqui se declaran como variables propias para que el diseno viaje sin depender
   de una infraestructura que alli no existe.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --musas-color-base:#ffffff;
  --musas-color-contrast:#1d1d1b;
  --musas-color-accent:#b8956a;
  --musas-color-accent-legible:#8a6d47;
  --musas-color-accent-dark:#4e3e34;
  --musas-color-muted:#f6f2ed;
  --musas-color-line:#e2e2e2;
  --musas-color-ok:#2f7a44;
  --musas-color-alerta:#c0392b;
  --musas-icono-tam:20px;
  --musas-esp-10:0.35rem;
  --musas-esp-20:0.6rem;
  --musas-esp-25:0.8rem;   /* banda 0,7–0,95 que usaban 15 reglas a mano (F-R22) */
  --musas-esp-30:1rem;
  --musas-esp-40:1.5rem;
  --musas-esp-50:2rem;
  --musas-esp-60:2.75rem;
  --musas-esp-70:4rem;
  --musas-esp-80:5.5rem;
  --musas-radio-chico:8px;
  --musas-radio-medio:12px;
  --musas-radio-grande:18px;
  --musas-radio-pildora:999px;
  --musas-foco-grosor:2px;
  --musas-foco-separacion:3px;
  --musas-linea-fina:1px;
  --musas-fuente-base:'DM Sans', Helvetica, Arial, sans-serif;
  --musas-fuente-sistema:Helvetica, Arial, sans-serif;
  --musas-fuente-voz:'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --musas-tactil:44px;
}

/* ─── procedente de style.css ─────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════════
   Objetivos tactiles y caja — hallazgos medidos a 390px, no a ojo.
   Las dos reglas que ui-ux-pro-max marca como CRITICAS y que estabamos
   incumpliendo: touch-target-size (min 44x44) y horizontal-scroll (cero).
   ══════════════════════════════════════════════════════════════════════════ */

:root{ --musas-tactil:44px }

/* 1) El desbordamiento de 15px en movil no era del ancho: era box-sizing.
      WooCommerce deja sus botones en content-box, asi que el padding lateral
      (16px x2) se sumaba al 100% del padre y se salia de la pantalla. */
.wp-element-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button{
  box-sizing:border-box;
  max-width:100%;
  min-height:var(--musas-tactil);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* 2) Los enlaces del menu median 18px de alto. El area de toque se agranda
      con padding, sin tocar el tamaño visual del texto. */
.musas-nav a,
.musas-pie__col a{
  display:inline-flex;
  align-items:center;
  min-height:var(--musas-tactil);
}

/* 3) Iconos de cabecera (buscar, cuenta, carrito) y el zoom de la galeria:
      estaban en 40 y 36px. */
.musas-accion,
.musas-nav__marca,
.woocommerce-product-gallery__trigger{
  min-width:var(--musas-tactil);
  min-height:var(--musas-tactil);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* En movil el menu crece de alto al agrandar los toques; se compensa
   apretando el interlineado para que la cabecera no se coma la pantalla. */
@media (max-width:781px){
  .musas-nav{ row-gap:0}
  .musas-pie__col li{ margin-block:0}
}

/* Cabecera en movil: al agrandar los objetivos tactiles la cabecera paso a
   tres filas apiladas (logo / menu / acciones) y se comia 280px antes del
   producto. Se reordena a dos: marca + acciones arriba, menu debajo. El
   contenido principal vuelve a entrar en la primera pantalla. */
@media (max-width:781px){
  .musas-nav{
    flex-wrap:wrap;
    row-gap:0;
    padding-block:var(--musas-esp-10);
  }
  .musas-nav__marca{ order:1 }
  .musas-acciones{ order:2; margin-left:auto}
  .musas-nav ul{
    order:3;
    flex-basis:100%;
    justify-content:space-between;
    gap:var(--musas-esp-20);
    border-top:1px solid color-mix(in srgb, var(--musas-color-contrast) 8%, transparent);
  }
  .musas-nav ul a{ min-height:var(--musas-tactil) }
}

/* Voz editorial en TODOS los titulares de pagina y seccion, no solo en la ficha:
   con la regla estrecha anterior la tienda salia en sans y la ficha en serif, que
   es justo la inconsistencia que hace que un sitio parezca dos sitios.
   Se excluyen los titulos de las tarjetas de producto: ahi la referencia usa sans
   y la serif a 15px se lee peor en una rejilla densa. */
h1, h2,
.musas-asesor__t, .musas-hero h1,
.wp-block-query-title, .woocommerce-products-header__title{
  font-family:var(--musas-fuente-voz);
  font-weight:500;
  letter-spacing:-.01em;
}
/* Texto base de la ficha: la fuente del sistema de diseño, no la del kit del tema (Helvetica).
   Ambito: solo la plantilla de producto (div.product), nunca cabecera ni pie del cliente.
   Las fuentes viajan dentro del plugin (fuentes.css), no dependen de Ajustes del sitio. */
.woocommerce div.product,
.woocommerce div.product p, .woocommerce div.product li,
.woocommerce div.product a, .woocommerce div.product span,
.woocommerce div.product label, .woocommerce div.product td, .woocommerce div.product th{
  font-family:var(--musas-fuente-base);
}
.wc-block-product h1, .wc-block-product h2, .wc-block-product h3,
.wc-block-product .wp-block-post-title,
.wc-block-components-product-name,
.musas-pie h2, .musas-pie h3{
  font-family:var(--musas-fuente-base);
  font-weight:500;
  letter-spacing:0;
}

/* Objetivos secundarios: WCAG 2.2 AA exige 24x24 (criterio 2.5.8), no 44. Los 44
   se reservan para los controles primarios —botones, menu, iconos de cabecera—,
   que ya los cumplen. Forzar 44 en el titulo de cada tarjeta solo metia aire
   entre foto y precio sin ganar accesibilidad. */
li.wc-block-product .wp-block-post-title a,
li.wc-block-product .wc-block-components-product-name,
ul.products li.product .woocommerce-loop-product__title,
.woocommerce-ordering select{
  min-height:24px;
  display:inline-flex;
  align-items:center;
}
.woocommerce-ordering select{ padding:var(--musas-esp-10) var(--musas-esp-20)}

/* ─── procedente de assets/ficha.css ─────────────────────────────────────── */
/* Ficha de producto — MUSAS-18.
   Estructura tomada de shop.defelipe.com (la referencia aprobada por Musas) y
   traducida a su marca: donde el referente usa rojo de rebaja, aqui manda el oro
   var(--musas-color-accent), porque el rojo de descuento rompe el registro premium de la clinica. */

/* ── Columna de compra ───────────────────────────────────────────────────── */
.musas-migas{display:flex;flex-wrap:wrap;gap:var(--musas-esp-20);align-items:center;
  font-size:.78rem;color:var(--musas-color-accent-dark);margin:0 0 var(--musas-esp-40)}
.musas-migas a{color:inherit;text-decoration:none}
.musas-migas a:hover{text-decoration:underline}
.musas-migas span[aria-current]{color:var(--musas-color-contrast)}

.musas-impuestos{font-size:.8rem;color:var(--musas-color-accent-dark);margin:var(--musas-esp-10) 0 var(--musas-esp-25)}

.musas-stock{display:flex;align-items:center;gap:var(--musas-esp-20);font-size:.85rem;margin:0 0 var(--musas-esp-40)}
.musas-stock__punto{width:8px;height:8px;border-radius:50%;display:inline-block}
.musas-stock.is-ok .musas-stock__punto{background:var(--musas-color-ok)}
.musas-stock.is-ko .musas-stock__punto{background:var(--musas-color-alerta)}
.musas-stock.is-ok{color:var(--musas-color-ok)}
/* Tercer estado: ni disponible ni agotado. Diez productos —nueve tratamientos y
   la tarjeta regalo— no se venden por la web, y anunciarlos como disponibles era
   mentir. Color de acento, que no es ni el verde de "sí" ni el rojo de "no". */
.musas-stock.is-consulta .musas-stock__punto{background:var(--musas-color-accent)}
.musas-stock.is-consulta{color:var(--musas-color-accent-dark)}

/* Pago aplazado: informativo. El cobro se cierra en la pasarela, aqui no. */
.musas-pago-aplazado{display:block;font-size:.82rem;color:var(--musas-color-accent-dark);
  background:var(--musas-color-muted);padding:var(--musas-esp-25) var(--musas-esp-25);border-radius:var(--musas-radio-medio);margin:0 0 var(--musas-esp-30)}
.musas-formato{font-size:.9rem;color:var(--musas-color-accent-dark);margin:var(--musas-esp-10) 0 var(--musas-esp-30)}

.musas-entrega{border-top:1px solid var(--musas-color-line);margin-top:var(--musas-esp-40);padding-top:var(--musas-esp-30)}
.musas-entrega p{display:flex;gap:var(--musas-esp-20);align-items:flex-start;font-size:.85rem;margin:0 0 var(--musas-esp-20);
  color:var(--musas-color-accent-dark)}
.musas-entrega strong{color:var(--musas-color-contrast)}
.musas-ico{color:var(--musas-color-accent-legible);font-weight:700}

/* ── Precio y boton, a la manera del referente ───────────────────────────── */
.woocommerce div.product p.price,
.woocommerce div.product span.price{font-size:1.65rem;font-weight:500;
  color:var(--musas-color-contrast);margin:0}
.woocommerce div.product p.price del{font-size:1rem;font-weight:400;opacity:.5;margin-left:var(--musas-esp-20)}
.woocommerce div.product p.price ins{text-decoration:none;color:var(--musas-color-accent-dark)}



/* ── Secciones colapsables, con icono como el referente ──────────────────── */
.musas-acc{border-bottom:1px solid var(--musas-color-line)}
.musas-acc:first-of-type{border-top:1px solid var(--musas-color-line)}
.musas-acc > summary{cursor:pointer;list-style:none;padding:var(--musas-esp-30) 0;font-weight:500;font-size:1rem;
  display:flex;justify-content:space-between;align-items:center;gap:var(--musas-esp-30)}
.musas-acc > summary::-webkit-details-marker{display:none}
.musas-acc > summary{justify-content:flex-start}
.musas-acc__i{display:inline-flex;align-items:center;justify-content:center;
  width:calc(var(--musas-icono-tam) + 4px);height:calc(var(--musas-icono-tam) + 4px);flex:0 0 calc(var(--musas-icono-tam) + 4px);color:var(--musas-color-accent-legible)}
.musas-acc__i svg{width:var(--musas-icono-tam);height:var(--musas-icono-tam)}
.musas-acc > summary::after{margin-left:auto}
.musas-acc > summary::after{content:"+";font-weight:300;font-size:1.5rem;line-height:1;
  color:var(--musas-color-contrast)}
.musas-acc[open] > summary::after{content:"−"}
.musas-acc > summary:focus-visible{outline:var(--musas-foco-grosor) solid var(--musas-color-accent-legible);outline-offset:var(--musas-foco-separacion)}
.musas-acc__body{padding:0 0 var(--musas-esp-40);font-size:.92rem;color:var(--musas-color-accent-dark)}
.musas-acc__body p{margin:0 0 var(--musas-esp-20)}
/* El cuerpo se alinea con el titulo del desplegable, no con el icono: si no, el
   texto arranca a la izquierda del rotulo y la seccion se lee desencajada. */
.musas-acc__body{padding-left:var(--musas-esp-40)}

/* ── Listas dentro de los desplegables ──────────────────────────────────────
   El contenido llegaba como un parrafo con guiones: todo al mismo peso y sin
   punto de entrada para la vista. Ahora es una lista de verdad, con el titulillo
   destacado y el marcador fuera del texto (sangria francesa), que es lo que
   permite barrer los beneficios sin leerlos enteros. */
.musas-lista{list-style:none;margin:0;padding:0;max-width:68ch}
/* Sangria francesa con posicionamiento, NO con grid: al declarar el <li> como
   grid, el <b> del titulillo y el texto que le sigue pasan a ser celdas
   distintas y el titulo acaba apilado letra a letra en una columna de 1ch.
   Con position:absolute el contenido sigue siendo flujo inline normal. */
.musas-lista li{position:relative;padding:var(--musas-esp-20) 0 var(--musas-esp-20) var(--musas-esp-30);line-height:1.65}
.musas-lista li + li{border-top:1px solid color-mix(in srgb,var(--musas-color-line) 60%,transparent)}
/* Marcador dibujado en CSS, no un caracter: un guion o un bullet tipografico
   cambia de forma y de alto segun la fuente que resuelva cada sistema. */
.musas-lista li::before{content:"";position:absolute;left:0;top:1.15em;
  width:5px;height:5px;border-radius:50%;background:var(--musas-color-accent)}
.musas-lista b{font-weight:600;color:var(--musas-color-contrast)}
/* El parrafo de cierre que venia pegado al ultimo punto: se separa del listado
   y baja de tono, porque es remate del fabricante y no un beneficio mas. */
.musas-lista__cierre{max-width:68ch;margin:var(--musas-esp-30) 0 0;padding-top:var(--musas-esp-25);
  border-top:1px solid var(--musas-color-line);
  font-size:.88rem;font-style:italic;opacity:.85}
.musas-prosa{max-width:68ch;line-height:1.65}
.musas-prosa p:last-child{margin-bottom:0}
/* En movil, alinear el cuerpo con el rotulo del desplegable cuesta 27px de ancho
   util que, sumados a la sangria de la lista, dejaban el texto a 45px del borde.
   Ahi pesa mas el ancho de lectura que la alineacion. */
@media (max-width:781px){
  .musas-acc__body{padding-left:0}
}

/* El enlace de recogida, en linea propia y con alto de toque completo. */
.musas-recogida__wa{margin:var(--musas-esp-20) 0 0}
.musas-recogida__wa a{display:inline-flex;align-items:center;min-height:var(--musas-tactil,44px)}

/* ── Condiciones de compra ───────────────────────────────────────────────────
   Formato que la duena ya usa en su tienda y pidio conservar: una fila por
   condicion, icono a la izquierda, titulo y matiz debajo. Sustituye a la
   informacion que antes vivia repartida en cuatro bloques distintos. */
.musas-cond{list-style:none;margin:var(--musas-esp-40) 0 0;padding:0;
  border:1px solid var(--musas-color-line);border-radius:var(--musas-radio-grande);
  overflow:hidden;background:var(--musas-color-base)}
.musas-cond__f + .musas-cond__f{border-top:1px solid var(--musas-color-line)}
.musas-cond__f,
.musas-cond__f > a{display:flex;align-items:center;gap:var(--musas-esp-30);
  padding:var(--musas-esp-25) var(--musas-esp-30);text-decoration:none;color:inherit}
.musas-cond__f > a{padding:0;margin:calc(-1*var(--musas-esp-25)) calc(-1*var(--musas-esp-30));padding:var(--musas-esp-25) var(--musas-esp-30);width:100%}
.musas-cond__f > a:hover{background:var(--musas-color-muted)}
.musas-cond__i{flex:0 0 auto;display:inline-flex;color:var(--musas-color-accent-legible)}
.musas-cond__i svg{width:var(--musas-icono-tam);height:var(--musas-icono-tam)}
.musas-cond__txt{display:flex;flex-direction:column;gap:.1rem;/* 1,6px entre título y subtítulo: interlineado, no ritmo de bloque (F-R22) */min-width:0}
.musas-cond__txt b{font-weight:500;font-size:.9rem;color:var(--musas-color-contrast);
  line-height:1.35}
.musas-cond__txt small{font-size:.8rem;color:var(--musas-color-accent-dark)}
/* La fila con enlace es el unico objetivo pulsable del bloque: se le da el alto
   de toque completo y su propio anillo de foco. */
.musas-cond__f > a{min-height:var(--musas-tactil,44px)}
.musas-cond__f > a:focus-visible{outline:var(--musas-foco-grosor) solid var(--musas-color-accent-legible);
  outline-offset:calc(var(--musas-foco-separacion) * -1)}

/* ── Banda de garantias ──────────────────────────────────────────────────── */
.musas-garantias{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--musas-esp-25);
  list-style:none;margin:0;padding:0}
.musas-garantias li{background:var(--musas-color-base);border:1px solid var(--musas-color-line);border-radius:var(--musas-radio-pildora);
  padding:var(--musas-esp-25) var(--musas-esp-40);font-size:.83rem;color:var(--musas-color-accent-dark)}

/* ── Recomendación de Musas: el bloque con voz propia ────────────────────── */
.musas-reco{border-left:3px solid var(--musas-color-accent);padding-left:var(--musas-esp-40)}
.musas-reco__t{font-size:clamp(1.2rem,2.5vw,1.6rem);margin-top:0}

/* ── Productos recomendados ──────────────────────────────────────────────── */
.musas-seccion-c{text-align:center;font-size:.85rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:500;margin:0 0 var(--musas-esp-50)}
/* WooCommerce fija las columnas con `.wc-block-product-template__responsive.columns-3`
   (0,2,0). Con su minimo de ~33% y nuestro `gap`, solo entraban DOS columnas y las
   fotos se iban a 614px. Se iguala la especificidad para recuperar la rejilla fluida. */
ul.wc-block-product-template.wc-block-product-template__responsive,
ul.wc-block-product-template, ul.products{display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--musas-esp-40);list-style:none;margin:0;padding:0}
/* OJO con las listas separadas por comas: en CSS cada selector de la lista es
   independiente. Escribir `li.wc-block-product, ul.products li.product img` NO
   significa "la imagen en ambas tarjetas", significa "toda la tarjeta de bloques"
   + "la imagen de la clasica". Ese descuido llego a poner `display:none` sobre
   `li.wc-block-product` y dejo la tienda entera sin productos, con el contador
   diciendo "14 resultados" sobre una rejilla vacia. Cada linea repite el
   descendiente en los dos lenguajes de marcado. */
li.wc-block-product,
ul.products li.product{background:var(--musas-color-base);border:1px solid var(--musas-color-line);
  border-radius:var(--musas-radio-grande);padding:var(--musas-esp-30);text-align:center;transition:box-shadow .2s ease}
li.wc-block-product:hover,
ul.products li.product:hover{box-shadow:0 6px 22px rgba(0,0,0,.07)}
li.wc-block-product img,
ul.products li.product img{border-radius:var(--musas-radio-chico);margin-bottom:var(--musas-esp-25);
  aspect-ratio:1;object-fit:contain;width:100%;height:auto;background:var(--musas-color-muted)}
li.wc-block-product .wc-block-components-product-name,
ul.products li.product .woocommerce-loop-product__title{font-size:.88rem;
  font-weight:500;margin:0 0 var(--musas-esp-10);display:block}
li.wc-block-product .wc-block-components-product-price,
ul.products li.product .price{font-size:.95rem;color:var(--musas-color-accent-dark)}
/* Botones de las tarjetas: se conservan en la TIENDA (ahi son el camino de
   compra) y se ocultan en la ficha, donde cuatro botones dorados en "Completa tu
   rutina" compiten con el "Añadir al carrito" principal. Una pantalla, un CTA
   primario. Se cuelga de `.wp-singular`, que WordPress solo pone en las paginas
   de detalle. */
.wp-singular ul.products li.product a.button,
.wp-singular li.wc-block-product .wp-block-button__link,
.wp-singular li.wc-block-product a.add_to_cart_button{display:none}

.musas-cta-final{background:var(--musas-color-muted);padding:var(--musas-esp-60) var(--musas-esp-40);text-align:center}

@media(max-width:781px){
  .woocommerce div.product form.cart button.button{flex:1 1 100%}
  .musas-garantias{justify-content:flex-start}
}

/* Selector de tamaño. OJO: WooCommerce SI envuelve con `.woocommerce div.product`
   tambien en tema de bloques — comprobado en la cascada real del navegador. Sus
   reglas llegan con especificidad (0,4,4), asi que cualquier intento de anularlas
   desde `table.variations select` (0,1,2) se pierde en silencio. */
table.variations{width:100%;margin:0 0 var(--musas-esp-30);border-collapse:collapse}
table.variations th,table.variations td{display:block;width:100%;padding:0;text-align:left}
table.variations th{font-size:.85rem;font-weight:500;margin-bottom:var(--musas-esp-10)}
table.variations select{width:100%;min-height:48px;padding:0 var(--musas-esp-25);font-size:.9rem;font-family:inherit;
  border:1px solid var(--musas-color-line);border-radius:var(--musas-radio-medio);background:var(--musas-color-base)}
.reset_variations{font-size:.8rem;color:var(--musas-color-accent-dark);display:inline-block;margin-top:var(--musas-esp-10)}
.woocommerce-variation-price{margin:var(--musas-esp-20) 0 0}

form.cart{display:flex;flex-wrap:wrap;gap:var(--musas-esp-25);align-items:stretch;margin:0 0 var(--musas-esp-30)}
form.cart .variations_button{display:flex;gap:var(--musas-esp-25);width:100%;align-items:stretch}
form.cart .quantity input{min-height:52px;width:80px;text-align:center;font-size:.95rem;
  border:1px solid var(--musas-color-line);border-radius:var(--musas-radio-pildora);font-family:inherit}
form.cart button.button{flex:1;min-height:52px;border-radius:var(--musas-radio-pildora);background:var(--musas-color-accent);
  color:var(--musas-color-contrast);font-weight:500;font-size:.95rem;border:0;font-family:inherit;cursor:pointer}
form.cart button.button:hover:not(:disabled){background:var(--musas-color-accent-dark);color:var(--musas-color-base)}
form.cart button.button:disabled{opacity:.4;cursor:not-allowed}

/* Los controles de formulario no heredan tipografia del documento por defecto. */
table.variations select,form.cart input,form.cart button{font-family:inherit}
table.variations select{font-size:.9rem}

/* ── Tamaño en pildoras (la referencia no usa desplegable) ───────────────── */
/* Ocultar el desplegable nativo tiene mas trampa de la que parece: la regla de
   arriba le pone `min-height:48px` y `width:100%`, y `min-*` gana SIEMPRE a
   `height`/`width`. El select seguia midiendo 1008x48 fuera de pantalla y
   arrastraba 383px de scroll horizontal muerto en escritorio. Hay que anular
   tambien los minimos, el padding y el borde. */
.woocommerce div.product form.cart table.variations td select,
table.variations select{
  position:absolute;
  width:1px;height:1px;
  min-width:0;min-height:0;
  padding:0;margin:-1px;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.musas-tallas{display:flex;flex-wrap:wrap;gap:var(--musas-esp-20);margin:var(--musas-esp-10) 0 0}
.musas-talla{border:1px solid var(--musas-color-line);background:var(--musas-color-base);border-radius:var(--musas-radio-pildora);
  padding:var(--musas-esp-25) var(--musas-esp-40);font:inherit;font-size:.88rem;cursor:pointer;transition:.15s ease;color:inherit}
.musas-talla:hover{border-color:var(--musas-color-accent)}
.musas-talla.is-activa{background:var(--musas-color-contrast);color:var(--musas-color-base);
  border-color:var(--musas-color-contrast)}
.musas-talla:focus-visible{outline:var(--musas-foco-grosor) solid var(--musas-color-accent-legible);outline-offset:var(--musas-foco-separacion)}

/* ── Contador de cantidad − / + ──────────────────────────────────────────── */
.musas-cantidad{display:inline-flex;align-items:center;border:1px solid var(--musas-color-line);
  border-radius:var(--musas-radio-pildora);height:52px}
/* F-R29 · antes esto llevaba `overflow:hidden` para redondear las esquinas de los
   botones de dentro. Recortaba tambien el anillo de foco —solo se veia un filo,
   lo midio Vera a 3x— asi que la forma se consigue redondeando cada boton. */
.musas-cantidad > :first-child{border-start-start-radius:var(--musas-radio-pildora);
  border-end-start-radius:var(--musas-radio-pildora)}
.musas-cantidad > :last-child{border-start-end-radius:var(--musas-radio-pildora);
  border-end-end-radius:var(--musas-radio-pildora)}
.musas-cantidad input.qty{border:0!important;width:44px!important;text-align:center;height:100%;
  font-size:.95rem;-moz-appearance:textfield}
.musas-cantidad input.qty::-webkit-outer-spin-button,
.musas-cantidad input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.musas-cantidad__b{border:0;background:none;width:40px;height:100%;font-size:1.15rem;cursor:pointer;
  color:var(--musas-color-contrast);line-height:1}
.musas-cantidad__b:hover{color:var(--musas-color-accent)}
.musas-cantidad__b:focus-visible{outline:var(--musas-foco-grosor) solid var(--musas-color-accent-legible);outline-offset:var(--musas-foco-separacion)}

/* ── Recogida en clinica: destacada a peticion de Musas ──────────────────── */
.musas-entrega__envio{margin-bottom:var(--musas-esp-25)}
.musas-recogida{background:var(--musas-color-muted);border-radius:var(--musas-radio-medio);padding:var(--musas-esp-30) var(--musas-esp-30)}
.musas-recogida__t{margin:0 0 var(--musas-esp-10);font-size:.88rem;color:var(--musas-color-contrast)}
.musas-recogida__d{margin:0;font-size:.8rem;line-height:1.6;color:var(--musas-color-accent-dark)}
.musas-recogida__d a{color:inherit}

/* ── Formas de pago ──────────────────────────────────────────────────────── */

/* Con pildoras siempre hay una talla elegida: el enlace "Limpiar" sobra y confunde. */
.reset_variations{display:none!important}
/* El precio del rango ya lo sustituye el de la variacion elegida. */
.woocommerce-variation-price .price{font-size:1.65rem;font-weight:500}

/* WooCommerce estila su boton con mayor especificidad y devolvia el texto a
   blanco: sobre el oro daba 2.78:1 y fallaba WCAG AA. Se gana usando su propia
   clase. Oscuro sobre oro = 6.07:1, y en hover marron con blanco = 10.18:1. */
form.cart button.single_add_to_cart_button.button,
.wc-block-components-button,
a.button.add_to_cart_button{
  background:var(--musas-color-accent);
  color:var(--musas-color-contrast);
  border-radius:var(--musas-radio-pildora);
  font-weight:500;
}
form.cart button.single_add_to_cart_button.button:hover:not(:disabled),
a.button.add_to_cart_button:hover{
  background:var(--musas-color-accent-dark);
  color:var(--musas-color-base);
}

/* ── F-05: el precio manda en el bloque de compra ────────────────────────────
   Es el dato que decide la compra y competia en peso con el titulo y el resto.
   En la referencia el precio es lo segundo que se lee tras el nombre. */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce-variation-price .price,
p.price{
  font-size:1.9rem;
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.1;
  color:var(--musas-color-contrast);
}
p.price del{font-size:.95rem;font-weight:400;opacity:.45}
p.price ins{text-decoration:none}

/* ── F-11: un solo anillo de foco para todo el bloque de compra ──────────────
   Habia tres tratamientos distintos segun el control. Se unifica con token. */
form.cart :is(button,input,select,a):focus-visible,
.musas-talla:focus-visible,
.musas-cantidad__b:focus-visible,
.musas-acc > summary:focus-visible,
.musas-nav a:focus-visible{
  outline:var(--musas-foco-grosor) solid var(--musas-color-accent-legible);
  outline-offset:var(--musas-foco-separacion);
  border-radius:var(--musas-radio-chico);
}

/* F-10: la marca de palabra en tipografia propia se reconoce de un vistazo. */

/* Sobre crema el oro legible baja a 4.32:1; dentro de la caja de recogida el
   glifo usa el marron, que da 8.9:1 y sigue siendo color de marca. */
.musas-recogida .musas-ico{color:var(--musas-color-accent-dark)}


/* ── F-02 (bis): tarjeta de producto en las 3 estructuras reales de WC Blocks ──
   Medido en el DOM: este sitio no genera `ul.products` en ningun contexto. */
li.wc-block-product{
  background:var(--musas-color-base);
  border:var(--musas-linea-fina) solid var(--musas-color-line);
  border-radius:var(--musas-radio-grande);
  padding:var(--musas-esp-30);
  text-align:center;
  transition:box-shadow .2s ease;
}
li.wc-block-product:hover{box-shadow:0 6px 22px rgb(0 0 0 / .07)}
li.wc-block-product img{border-radius:var(--musas-radio-medio);
  margin-bottom:var(--musas-esp-20)}
ul.wc-block-product-template{gap:var(--musas-esp-40)}

/* ── F-05 (bis): el precio tambien pesa en las rejillas ─────────────────────── */
.wc-block-components-product-price{
  font-weight:600;
  color:var(--musas-color-contrast);
}
li.wc-block-product .wc-block-components-product-price{font-size:.95rem}

/* ── Rejilla del shortcode clasico de WooCommerce ────────────────────────────
   `[products]` pinta ul.products con float y anchos en % (22.05% + margenes).
   Eso peleaba con la rejilla y dejaba tarjetas de ~50px con el boton hecho un
   circulo. Se neutraliza el float y se manda con grid. */
ul.products{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:var(--musas-esp-40);
  list-style:none;
  margin:0 !important;
  padding:0;
}
ul.products::before,ul.products::after{display:none !important}
ul.products li.product{
  width:auto !important;
  float:none !important;
  margin:0 !important;
  clear:none !important;
  display:flex;
  flex-direction:column;
}
ul.products li.product img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;
  background:var(--musas-color-muted)}
ul.products li.product .woocommerce-loop-product__title{font-size:.9rem;font-weight:500;
  margin:var(--musas-esp-20) 0 var(--musas-esp-10);
  padding:0;min-height:2.6em}
ul.products li.product .price{font-size:.9rem;font-weight:600;
  color:var(--musas-color-contrast);margin-bottom:var(--musas-esp-20)}
/* El boton salia redondo por heredar el radio de pildora sin ancho propio. */
ul.products li.product a.button{
  display:block;width:100%;margin-top:auto;
  padding:var(--musas-esp-20) var(--musas-esp-30);
  border-radius:var(--musas-radio-pildora);
  background:var(--musas-color-accent);
  color:var(--musas-color-contrast);
  font-size:.82rem;font-weight:500;text-align:center;text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
ul.products li.product a.button:hover{background:var(--musas-color-accent-dark);
  color:var(--musas-color-base)}

/* ── Pilar de Musas: su taxonomia, no una categoria generica ─────────────── */
.musas-pilar{display:inline-flex;align-items:center;gap:var(--musas-esp-10);
  font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--musas-color-accent-dark);margin:0 0 var(--musas-esp-20)}
.musas-pilar__p{width:6px;height:6px;border-radius:50%;
  background:var(--musas-color-accent);display:inline-block}
.musas-pilar strong{font-weight:600;letter-spacing:.08em}

/* ── El criterio de la clinica, en su propia voz ─────────────────────────────
   La serif se usa SOLO aqui. Si invadiera el resto seria decoracion; acotada a
   la voz de Musas es lo que distingue una clinica de una tienda. */
.musas-criterio{border-top:var(--musas-linea-fina) solid var(--musas-color-line);
  border-bottom:var(--musas-linea-fina) solid var(--musas-color-line);
  padding:var(--musas-esp-30) 0;margin:var(--musas-esp-30) 0}
.musas-criterio__q{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--musas-color-accent-dark);margin:0 0 var(--musas-esp-20)}
.musas-criterio blockquote{margin:0;padding:0;border:0}
.musas-criterio blockquote p{font-family:var(--musas-fuente-voz);
  font-size:1.28rem;line-height:1.45;color:var(--musas-color-contrast);margin:0}
.musas-criterio__f{font-size:.76rem;color:var(--musas-color-accent-dark);
  margin:var(--musas-esp-20) 0 0}

/* ── Voz editorial (ui-ux-pro-max: emparejamiento "Classic Elegant") ─────────
   Playfair para los titulos con carga editorial y para la voz de la clinica;
   DM Sans se queda en todo lo funcional (precio, botones, datos, navegacion).
   Ese contraste serif/sans es lo que separa "tienda de belleza premium" de
   "ecommerce generico" — y es la razon por la que la base lo recomienda para
   spa y belleza. */
.musas-criterio blockquote p{font-weight:400}

/* Estado activo en la navegacion: la base lo marca como fallo de severidad
   media — no habia forma de saber en que seccion estabas. */
.musas-nav a[aria-current="page"],
.musas-nav a.is-activo{
  color:var(--musas-color-accent-dark);
  border-bottom:2px solid var(--musas-color-accent);
  padding-bottom:2px;
}

/* ─── procedente de assets/landing.css ─────────────────────────────────────── */
/* Landing MUSAS-23 — lenguaje visual de la referencia (shop.defelipe.com) con la
   paleta de Musas: tarjetas redondeadas, mucho aire, pesos ligeros y pildoras. */

/* Barra de avisos, como la de la referencia */
.musas-avisos{background:var(--musas-color-contrast);color:var(--musas-color-base);font-size:.78rem;
  letter-spacing:.02em;padding:var(--musas-esp-25) var(--musas-esp-30);text-align:center}
.musas-avisos span{margin:0 var(--musas-esp-50);white-space:nowrap}

/* Hero: tarjeta de esquinas redondeadas */
.musas-hero{border-radius:var(--musas-radio-grande);overflow:hidden;background:var(--musas-color-muted);
  padding:clamp(2.5rem,6vw,5.5rem) clamp(1.5rem,5vw,4rem);position:relative}
.musas-hero h1{max-width:12ch;margin:0 0 var(--musas-esp-30)}
.musas-hero p{max-width:42ch;color:var(--musas-color-accent-dark);margin-bottom:var(--musas-esp-50)}

/* Rejilla de marcas — MUSAS-23 pide navegacion por marca */
.musas-marcas{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.musas-marcas a{display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:104px;padding:var(--musas-esp-30);border:1px solid var(--musas-color-line);border-radius:var(--musas-radio-grande);
  text-decoration:none;color:var(--musas-color-contrast);font-size:.82rem;
  letter-spacing:.13em;text-transform:uppercase;transition:.18s ease}
.musas-marcas a:hover{border-color:var(--musas-color-accent);
  background:var(--musas-color-muted);transform:translateY(-2px)}

/* La tarjeta con logo dentro. La referencia (`#marcas` de la tienda de
   desarrollo) es solo texto; la pagina del cliente si tiene los quince logos, y
   lo que se pidio es el diseno de la primera CON las fotos de la segunda. De la
   referencia se conservan el borde, el radio grande, el hover que levanta la
   tarjeta y la rejilla que se adapta sola; del muro de logos, las medidas del
   logo (60 de alto, 160 de ancho, `contain`).

   Dos clases en el selector, no una: `.musas-marcas a` de arriba es (0,1,1) y una
   sola clase perderia contra ella. Misma aritmetica que la regla de la casa de
   mas abajo, solo que aqui el rival es nuestro propio CSS. */
.musas-marcas .musas-marcas__i{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--musas-esp-20);
  text-align:center;
  min-height:132px;                 /* 104 de la referencia + sitio para el logo */
  padding:var(--musas-esp-30);
  border:1px solid var(--musas-color-line);
  border-radius:var(--musas-radio-grande);
  text-decoration:none;
  color:var(--musas-color-contrast);
  transition:.18s ease;
}
.musas-marcas a.musas-marcas__i:hover{
  border-color:var(--musas-color-accent);
  background:var(--musas-color-muted);
  transform:translateY(-2px);
}
/* Foco visible: las tarjetas de hoy no tienen ninguno, y son enlaces. */
.musas-marcas a.musas-marcas__i:focus-visible{
  outline:var(--musas-foco-grosor) solid var(--musas-color-accent-legible);
  outline-offset:var(--musas-foco-separacion);
}
/* Alto fijo y ancho al 100 % con tope: asi el hueco del logo queda reservado
   ANTES de que la imagen llegue —son quince y vienen de otro dominio— y la
   tarjeta no cambia de tamano al cargar. Con `width:auto` medi 0x0 en movil
   mientras la imagen no habia llegado: el mismo salto que arreglamos en la
   ficha, otra vez. */
/* Elemento + clase, y ademas dentro de la rejilla: `.woocommerce img` del tema es
   (0,1,1) con `max-width:100%` y `height:auto`, y una sola clase pierde. Lo medi:
   el logo salia a 174x69 en vez de 160x60 y la tarjeta crecia a 235 de alto. Es
   exactamente la regla de la casa de mas abajo, y me la salte yo mismo. */
.musas-marcas img.musas-marcas__l{
  flex:0 0 auto;
  width:100%;max-width:160px;
  height:60px;
  object-fit:contain;display:block;
}
/* La tipografia del nombre. En la referencia sale en DM Sans porque es la fuente
   del cuerpo de ESE tema; bajo el tema del cliente heredaba Helvetica, asi que
   aqui se dice. Dos clases para no perder contra el Kit. */
.musas-marcas .musas-marcas__n{
  font-family:var(--musas-fuente-base);
  font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;line-height:1.3;
}
/* Las seis marcas sin ni un producto: se ven —no se pierde ningun logo— pero no
   se pueden pulsar, porque llevar a un listado vacio es peor que no llevar. */
.musas-marcas .musas-marcas__i.is-sin-enlace{opacity:.62;cursor:default}
/* La seccion se acota como en la referencia (su ancho `wideSize` es 1320). Sin
   esto, en el contenedor ancho de la pagina del cliente salian 7 columnas y la
   rejilla quedaba mas densa de lo que se aprobo. La regla de la rejilla no se
   toca: es la aprobada, y adapta sola. Si el cliente quisiera exactamente 4
   columnas, es cambiar el 180px del `minmax` por 300px. */
.musas-marcas-b{margin-block:var(--musas-esp-70);max-width:1320px;margin-inline:auto}

/* Pilares: el lenguaje propio de Musas (Balance, Skin Quality, Lift, Harmony, Longevity) */
.musas-pilares{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.musas-pilar{border-radius:16px;padding:var(--musas-esp-50) var(--musas-esp-40);background:var(--musas-color-muted)}
.musas-pilar h3{margin:0 0 var(--musas-esp-20);font-size:1.05rem;letter-spacing:.02em}
.musas-pilar p{margin:0;font-size:.88rem;color:var(--musas-color-accent-dark)}
.musas-pilar:nth-child(2n){background:var(--musas-color-base);border:1px solid var(--musas-color-line)}

.musas-seccion-t{display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--musas-esp-30);margin-bottom:var(--musas-esp-40);flex-wrap:wrap}
.musas-seccion-t a{font-size:.85rem;color:var(--musas-color-accent-dark)}

/* Cabecera: minima y con el logo a la izquierda, como la referencia */
.musas-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--musas-esp-50);
  flex-wrap:wrap;padding:1.35rem clamp(1rem,4vw,2.5rem);border-bottom:1px solid var(--musas-color-line)}
.musas-nav__marca{font-weight:700;letter-spacing:.28em;text-decoration:none;
  color:var(--musas-color-contrast);font-size:1.05rem}
.musas-nav ul{display:flex;gap:var(--musas-esp-50);list-style:none;margin:0;padding:0;flex-wrap:wrap}
.musas-nav a{text-decoration:none;color:var(--musas-color-contrast);font-size:.88rem}
.musas-nav ul a:hover{color:var(--musas-color-accent)}

/* En movil los avisos rotan en horizontal en vez de cortarse */
@media(max-width:860px){
  .musas-avisos{overflow-x:auto;white-space:nowrap;text-align:left;scrollbar-width:none}
  .musas-avisos::-webkit-scrollbar{display:none}
  .musas-avisos span{margin:0 var(--musas-esp-30)}
}

/* Avisos y cabecera a sangre. Se usa el mismo clamp que el padding global del
   tema en vez de la variable de WordPress, que no resuelve en este contexto y
   dejaba el logo pegado al borde. */
.musas-avisos,.musas-nav{padding-left:clamp(1rem,4vw,2.5rem);
  padding-right:clamp(1rem,4vw,2.5rem);max-width:100%;box-sizing:border-box}

/* Logo real de Musas en la cabecera */
.musas-nav__marca img{display:block;height:34px;width:auto}
@media(max-width:640px){.musas-nav__marca img{height:26px}}

/* ── Acciones de la cabecera (F-06) ──────────────────────────────────────── */
.musas-acciones{display:flex;align-items:center;gap:var(--musas-esp-20)}
.musas-accion{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border:0;background:none;cursor:pointer;position:relative;
  color:var(--musas-color-contrast);border-radius:var(--musas-radio-pildora)}
.musas-accion:hover{color:var(--musas-color-accent)}
.musas-carrito__n{position:absolute;top:2px;right:0;min-width:17px;height:17px;
  background:var(--musas-color-accent);color:var(--musas-color-contrast);
  border-radius:var(--musas-radio-pildora);font-size:.66rem;font-weight:600;
  display:flex;align-items:center;justify-content:center;padding:0 4px}
.musas-buscador{width:100%;padding-top:var(--musas-esp-20)}
.musas-buscador input[type=search]{width:100%;min-height:44px;padding:0 var(--musas-esp-30);
  border:var(--musas-linea-fina) solid var(--musas-color-line);
  border-radius:var(--musas-radio-pildora);font:inherit;font-size:.9rem}

/* ── Asesoramiento con salida a WhatsApp ─────────────────────────────────── */
.musas-asesor{display:grid;grid-template-columns:1fr 1fr;gap:var(--musas-esp-60);
  align-items:center;background:var(--musas-color-base);
  border-radius:var(--musas-radio-grande);overflow:hidden}
.musas-asesor__txt{padding:var(--musas-esp-60) 0 var(--musas-esp-60) var(--musas-esp-50)}
.musas-asesor__eyebrow{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--musas-color-accent-dark);margin-bottom:var(--musas-esp-20)}
.musas-asesor__t{font-size:clamp(1.9rem,4vw,2.8rem);font-weight:500;line-height:1.1;
  margin:0 0 var(--musas-esp-30)}
.musas-asesor__txt p{max-width:44ch;color:var(--musas-color-accent-dark)}
.musas-asesor__cta{display:inline-flex;align-items:center;gap:var(--musas-esp-20);
  margin-top:var(--musas-esp-30);padding:var(--musas-esp-30) var(--musas-esp-50);
  background:var(--musas-color-accent);color:var(--musas-color-contrast);
  border-radius:var(--musas-radio-pildora);text-decoration:none;font-weight:500;font-size:.95rem}
.musas-asesor__cta:hover{background:var(--musas-color-accent-dark);color:var(--musas-color-base)}
/* Antes era una caja vacia centrada con el texto "foto pendiente". Ahora contiene
   una imagen real: el contenedor fija la proporcion y la imagen la cubre, para que el
   recorte funcione igual en escritorio (2 columnas) que en movil (ancho completo). */
.musas-asesor__img{margin:0;border-radius:var(--musas-radio-grande);overflow:hidden;
  background:var(--musas-color-muted);aspect-ratio:4/3;position:relative}
.musas-asesor__img img{width:100%;height:100%;object-fit:cover;display:block}
/* El pie va SOBRE la foto, en una banda oscura translucida: fuera del flujo no cabia
   sin descuadrar la rejilla de dos columnas. El fondo garantiza el contraste sin
   depender de como sea de clara la foto que haya debajo. */
.musas-asesor__pend{position:absolute;left:0;right:0;bottom:0;margin:0;
  font-size:.72rem;letter-spacing:.04em;padding:var(--musas-esp-20) var(--musas-esp-25);
  color:var(--musas-color-base);
  /* el 72% de opacidad se deriva del token, no de un #1d1d1b repetido a mano */
  background:color-mix(in srgb, var(--musas-color-contrast) 72%, transparent)}
@media(max-width:781px){
  .musas-asesor{grid-template-columns:1fr}
  .musas-asesor__txt{padding:var(--musas-esp-50) var(--musas-esp-30)}
  .musas-asesor__img{order:-1}
}

/* ── F-03: en movil los avisos se desplazan; el degradado lo insinúa ─────── */
/* El #000 de la mascara NO es color de marca: en mask-image el negro significa
   "opaco". No procede tokenizarlo. */
@media(max-width:860px){
  .musas-avisos{position:relative;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
    mask-image:linear-gradient(90deg,#000 88%,transparent)}
}
/* ── F-07 ─────────────────────────────────────────────────────────────────── */
.musas-garantias li{display:inline-flex;align-items:center;gap:var(--musas-esp-20)}
.musas-garantias__i{color:var(--musas-color-accent-legible)}
/* ── F-13: pie real ──────────────────────────────────────────────────────── */
.musas-pie{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:var(--musas-esp-50);text-align:left}
.musas-pie__t{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  margin:0 0 var(--musas-esp-20);opacity:.75}
.musas-pie p{font-size:.85rem;line-height:1.8;margin:0}
.musas-pie a{color:inherit}
.musas-pie__nota{text-align:center;font-size:.72rem;opacity:.45;
  margin-top:var(--musas-esp-50)}


/* ── Corrección tras la auditoría de Lidia (P1) ──────────────────────────────
   En la web de Musas la pastilla elegida no se distinguía de las demás: el CSS
   del tema pisaba nuestro fondo y el borde quedaba en grosor 0. Quien compra un
   tratamiento de 199 € tiene que poder confirmar de un vistazo cuál eligió, sin
   deducirlo del precio de abajo.
   Se sube la especificidad y se añade una señal que no depende del color. */
.musas-tallas .musas-talla.is-activa,
.musas-tallas button.musas-talla[aria-pressed="true"]{
  background:var(--musas-color-contrast)!important;
  color:var(--musas-color-base)!important;
  border:2px solid var(--musas-color-contrast)!important;
  font-weight:600;
}
.musas-tallas .musas-talla.is-activa::before{
  content:"✓" / "";   /* el "/ ''" deja el simbolo fuera del nombre accesible: aria-checked ya lo dice */
  margin-right:var(--musas-esp-20);
  font-weight:700;
}
/* El precio en rango se oculta en variables: convivía con el precio de la
   variación y mostraban cifras distintas a la vez ("150-240 €" arriba, "199 €"
   abajo). Lo apaga el JS al detectar que hay variaciones. */
#musas-precio-rango.musas-oculto{display:none}

/* ── Correcciones tras la auditoría de Vera sobre la web real ────────────────
   Su hallazgo de fondo: nuestras reglas perdían la cascada contra WooCommerce y
   el Kit Global de Elementor. Se corrigió el encolado (dependencias + prioridad
   999), y estas reglas cubren lo que aun asi necesita ganar por especificidad.

   F-R02 (P0): el precio salía en oliva rgb(149,142,9) — 3,41:1 sobre blanco,
   por debajo del 4,5:1 que exige AA. En una ficha el precio es EL dato: no puede
   ser lo peor contrastado de la página. */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.elementor-widget-woocommerce-product-price .price,
.musas-cond ~ * .price{
  color:var(--musas-color-contrast);
}
/* El precio tachado sí puede bajar de tono, pero no por debajo del mínimo. */
.woocommerce div.product p.price del,
.woocommerce div.product span.price del,
.elementor-widget-woocommerce-product-price del{
  color:var(--musas-color-accent-dark);
  opacity:1;
}
.woocommerce div.product p.price ins,
.elementor-widget-woocommerce-product-price ins{
  color:var(--musas-color-contrast);
  text-decoration:none;
  font-weight:600;
}

/* F-R06 (P1): el CTA no cambiaba al pasar por encima. Sin respuesta al hover no
   se lee como pulsable. */
.woocommerce div.product form.cart button.single_add_to_cart_button:hover,
.woocommerce div.product form.cart button.single_add_to_cart_button:focus-visible{
  background:var(--musas-color-accent-dark);
  transition:background .15s ease;
}

/* F-R08 (P1): sin foto caía al icono roto genérico de WordPress. Un marcador con
   la marca dice "falta la foto", no "esta web está rota". */
.woocommerce div.product .woocommerce-product-gallery__image img[src*="woocommerce-placeholder"],
li.product img[src*="woocommerce-placeholder"]{
  background:var(--musas-color-muted);
  padding:12%;
  object-fit:contain;
  border-radius:var(--musas-radio-medio);
}

/* El oliva sobrevivía en las tarjetas de producto de la rejilla, que en su web
   usan `ul.products.vamtam-wc`. Mismo problema, otra superficie: el precio es el
   dato que decide la compra y no puede ser lo peor contrastado de la página. */
/* La regla de WooCommerce es `.woocommerce:where(...) ul.products li.product .price`.
   El `:where()` no suma especificidad, pero el `.woocommerce` inicial SI: la suya
   es (0,4,2) y la mia sin ese prefijo era (0,3,2), asi que perdia por una clase.
   Igualada la especificidad y cargando nuestra hoja la ultima, gana la nuestra. */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price .amount,
.woocommerce ul.products li.product .price bdi,
.woocommerce ul.products li.product .price .woocommerce-Price-currencySymbol,
li.wc-block-product .wc-block-components-product-price{
  color:var(--musas-color-accent-dark);
}

/* ── F-R05 y F-R07 · dos casos de la misma cascada ───────────────────────────
   Ambos medidos con la cascada real del navegador antes de escribir nada, que es
   lo que debí hacer desde el principio en vez de suponer la especificidad.

   F-R05 · La voz editorial no llegaba al título del producto: `.elementor-kit-11 h1`
   es (0,1,1) y nuestro `h1` (0,0,1). Se apunta al elemento concreto en vez de
   subir el peso a lo bruto o depender del identificador de su kit, que cambia de
   un sitio a otro. `h1.product_title` empata en (0,1,1) y gana por orden, porque
   nuestra hoja ya carga la última.

   Importante: esto falla CON la fuente registrada en Elementor y sin ella. Por eso
   el paso 2 del manual no bastaba. */
h1.product_title,
h1.product_title.elementor-heading-title{
  font-family:var(--musas-fuente-voz);
  font-weight:500;
  letter-spacing:-.01em;
  /* Tamaño fluido, no fijo. Con el tamaño fijo del tema, 6 de los 14 productos que
     midió Vera en la 7ª vuelta envolvían a 2-4 líneas —«The Rich Renewal Trio ·
     Augustinus Bader» ocupaba 286px de alto— y empujaban el precio y el botón de
     compra fuera de la primera pantalla. El mínimo mantiene la jerarquía sobre el
     precio; el máximo respeta el tamaño de diseño en nombres cortos. */
  font-size:clamp(1.85rem, 1.15rem + 2.1vw, 3.4rem);
  line-height:1.12;
  /* nombres largos de un solo término (referencias, SPF 50+) no desbordan */
  overflow-wrap:break-word;
}

/* F-R07 · El padding de las tarjetas quedaba en 0: WooCommerce usa
   `.woocommerce ul.products li.product` (0,4,2) y la nuestra iba sin el prefijo
   `.woocommerce`, o sea (0,3,2). Es el mismo descuido que con el precio. */
.woocommerce ul.products li.product{
  padding:var(--musas-esp-30);
}

/* Valoraciones — se apoya en la plantilla nativa, así que solo se le da ritmo. */
.musas-opiniones{padding-top:var(--musas-esp-40);
  border-top:1px solid var(--musas-color-line);max-width:68ch}
.musas-opiniones__t{font-family:var(--musas-fuente-voz);font-weight:500;
  font-size:clamp(1.2rem,2.4vw,1.6rem);margin:0 0 var(--musas-esp-20)}
.musas-opiniones__vacio{color:var(--musas-color-accent-dark);font-size:.92rem}
.musas-opiniones .comment-form{margin-top:var(--musas-esp-30)}
.musas-opiniones input:not([type=submit]),
.musas-opiniones textarea{width:100%;max-width:100%;font-family:inherit;
  border:1px solid var(--musas-color-line);border-radius:var(--musas-radio-chico);
  padding:var(--musas-esp-20) var(--musas-esp-25);min-height:var(--musas-tactil)}

/* ════════════════════════════════════════════════════════════════════════════
   REGLA DE LA CASA — leer antes de añadir cualquier selector nuevo

   El Kit Global de Elementor aplica `.elementor-kit-11 h1`, `.elementor-kit-11 h2`,
   `.elementor-kit-11 button`… todos con especificidad (0,1,1). Cualquier regla
   nuestra de UNA SOLA CLASE es (0,1,0) y pierde SIEMPRE. No es un empate que el
   orden de carga resuelva: es una derrota estructural.

   Por eso todo selector propio que pise una propiedad del Kit (tipografía, color,
   fondo, borde) va como ELEMENTO + CLASE — `h2.musas-opiniones__t`, no
   `.musas-opiniones__t`. Así empata en (0,1,1) y gana por orden, porque nuestra
   hoja se encola la última.

   Vera lo detectó en iter-2: arreglé H1, precio, CTA y tarjetas uno a uno sin
   generalizar la regla, y la sección de opiniones que escribí en esa misma ronda
   nació ya con el fallo en dos sitios.
   ════════════════════════════════════════════════════════════════════════════ */

/* Titulares de sección: mismo caso que el H1 del producto. */
h2.musas-asesor__t,
h2.musas-opiniones__t,
h2.musas-reco__t,
h2.musas-rutina__t,
h1.musas-marcas__t,
h2.musas-marcas__t,
/* Los rotulos de la portada. Los olvide al escribirla y salieron con la
   tipografia del tema: es la TERCERA vez en el mismo dia que me gana esta regla,
   asi que lo dejo escrito — cualquier h2 propio nuevo entra aqui o no se ve como
   el resto del sitio. */
h2.musas-puertas__t,
h2.musas-pilares__t,
h2.musas-trat__t,
h2.musas-equipo__t,
h2.musas-visita__t{
  font-family:var(--musas-fuente-voz);
  font-weight:500;
  letter-spacing:-.01em;
}

/* Pastilla NO elegida: `.musas-talla` (0,1,0) perdía contra `.elementor-kit-11
   button` (0,1,1) y salía en el marrón del Kit en vez de blanca con borde. Con
   la activa ya destacando, la inactiva tiene que leerse como "no elegida". */
button.musas-talla{
  background:var(--musas-color-base);
  color:var(--musas-color-contrast);
  border:1px solid var(--musas-color-line);
}
button.musas-talla:hover{ border-color:var(--musas-color-accent) }

/* El aviso de "todavía no hay opiniones" salía TRES veces seguidas: el nuestro,
   que es el que tiene voz de marca, y los dos nativos de WooCommerce. Se esconde
   solo el del medio ("No hay valoraciones aún"), que es pura repetición del
   nuestro; el tercero se queda porque no es un aviso sino el título del
   formulario ("Sé el primero en valorar X"), que es la llamada a la acción.
   Va por CSS y no por filtro porque WooCommerce no expone ninguno para ese
   párrafo: la alternativa sería copiarnos su plantilla al plugin y quedar a
   merced de sus actualizaciones. Lo vio el Usuario en la 8a vuelta, después de
   que nueve auditores pasaran por esta misma pantalla sin verlo. */
.musas-opiniones .woocommerce-noreviews{ display:none }

/* Formulario de opiniones: el Kit gana con dos `:not()`. Se añade la clase del
   formulario para empatar. */
.musas-opiniones .comment-form input:not([type=submit]),
.musas-opiniones .comment-form textarea{
  font-family:inherit;
  border:1px solid var(--musas-color-line);
  border-radius:var(--musas-radio-chico);
  padding:var(--musas-esp-20) var(--musas-esp-25);
}
.musas-opiniones .comment-form input[type=submit],
.musas-opiniones .comment-form button[type=submit]{
  border-radius:var(--musas-radio-pildora);
  background:var(--musas-color-accent);
  color:var(--musas-color-contrast);
  border:0;
  padding:var(--musas-esp-25) var(--musas-esp-40);
  min-height:var(--musas-tactil);
  font-weight:600;
}

/* F-R08, esta vez con la clase que EXISTE. La anterior apuntaba a
   `.woocommerce-product-gallery__image`, que da 0 elementos en el DOM real: el
   wrapper lleva el modificador BEM `--placeholder`. Escribí el arreglo sin
   comprobar que el selector coincidía con algo. */
.woocommerce-product-gallery__image--placeholder img,
img.woocommerce-placeholder{
  background:var(--musas-color-muted);
  padding:14%;
  object-fit:contain;
  border-radius:var(--musas-radio-medio);
}

/* Marcador propio de "sin fotografía" (R7-05 y R7-08 de la 7ª vuelta). El SVG ya
   trae su mensaje, así que aquí no hace falta el relleno del marcador genérico: lo
   que importa es que RESERVE su espacio para que el contenido no salte al cargar.
   La proporción cuadrada la fija el propio SVG con su viewBox. */
/* La galería del producto no usaba el marcador de WooCommerce: su plantilla se
   construye un `<img>` a mano y solo pasa por el filtro de la URL, así que el
   texto alternativo, las medidas y las clases anti-diferido no llegaban (Aitor,
   AITOR-014). Desde la 8a vuelta lo resuelve el filtro
   `woocommerce_single_product_image_thumbnail_html` en `shortcodes.php`, que
   devuelve el bloque entero. Esta regla se queda como red: si otro plugin vuelve
   a construir la imagen por su cuenta, el hueco sigue reservado. */
.woocommerce-product-gallery__image--placeholder img{
  aspect-ratio:1 / 1;
  width:100%;
  height:auto;
}

img.musas-sin-foto{
  background:var(--musas-color-muted);
  padding:0;
  /* `contain`, no `cover`: el dibujo es cuadrado y WooCommerce pide tamaños
     apaisados según el tamaño de imagen de cada sitio. Con `cover` se recortaría
     el mensaje; con `contain` el fondo de marca rellena el resto. */
  object-fit:contain;
  width:100%;
  height:auto;
  border-radius:var(--musas-radio-medio);
}

/* El botón de enviar reseña lo pinta WooCommerce con `#respond input#submit`,
   que lleva DOS identificadores: (2,1,1). Ninguna combinación de clases nuestra
   puede alcanzarlo, así que se replica la misma estructura en vez de recurrir a
   `!important` — que taparía el problema sin explicarlo. */
.musas-opiniones #respond input#submit,
.musas-opiniones #respond button#submit{
  border-radius:var(--musas-radio-pildora);
  background:var(--musas-color-accent);
  color:var(--musas-color-contrast);
  border:0;
  padding:var(--musas-esp-25) var(--musas-esp-40);
  min-height:var(--musas-tactil);
  font-weight:600;
}
.musas-opiniones #respond input#submit:hover{ background:var(--musas-color-accent-dark);color:var(--musas-color-base) }

/* ── Ancho de contenido ──────────────────────────────────────────────────────
   Medido a 1840px: su ficha ocupa 1.241px y la nuestra se estiraba a 1.816.
   El motivo es que su Kit declara `--container-max-width: 2600px`, asi que pedir
   "boxed" en Elementor equivale a pantalla completa; su propia plantilla no se
   apoya en eso, usa anchos en porcentaje por contenedor (30 %, 40 %, 69 %).

   El sintoma es el que describio el Usuario: secciones de anchos distintos, nada
   alineado y lineas de texto larguisimas en pantallas grandes. Se acota el ancho
   y se centra, que ademas mantiene la longitud de linea en zona legible. */
.musas-cond,
.musas-garantias,
.musas-opiniones,
.musas-asesor,
.musas-acc,
.musas-recogida,
.musas-entrega{
  max-width:min(100%, 1240px);
}
/* Las secciones de ancho completo se centran para no quedar pegadas al borde. */
.musas-garantias,
.musas-asesor{
  margin-inline:auto;
}
/* La rejilla de "Completa tu rutina" tambien: sin tope, a 1840px salian ocho
   tarjetas diminutas en una fila interminable. */
/* Se centra el CONTENEDOR de la rejilla, no el <ul>: WooCommerce fija su margen
   y la rejilla quedaba pegada a la izquierda mientras las demas secciones iban
   centradas — que es justo el descuadre que se veia. */
.elementor-shortcode > .woocommerce,
.elementor-widget-container > .woocommerce{
  max-width:min(100%, 1240px);
  margin-left:auto;
  margin-right:auto;
}
.woocommerce ul.products{ max-width:100% }

/* Si el contenido ya traia su propia lista, se le da el mismo aspecto que a la
   que construimos nosotros — que se vea igual venga como venga el dato. */
.musas-prosa--lista ul{list-style:none;margin:0;padding:0;max-width:68ch}
.musas-prosa--lista li{position:relative;padding:var(--musas-esp-20) 0 var(--musas-esp-20) var(--musas-esp-30);line-height:1.65}
.musas-prosa--lista li + li{border-top:1px solid color-mix(in srgb,var(--musas-color-line) 60%,transparent)}
.musas-prosa--lista li::before{content:"";position:absolute;left:0;top:1.15em;
  width:5px;height:5px;border-radius:50%;background:var(--musas-color-accent)}
.musas-prosa--lista strong{font-weight:600;color:var(--musas-color-contrast)}

/* F-01 · UN SOLO ancho para toda la ficha.
   Acoté las secciones de abajo pero dejé la fila superior a 1816, así que quedaron
   dos anchos en la misma página con 576px de diferencia. Y el desajuste CRECE con
   la pantalla: 76px a 1440, 276px a 1840, 316px a 1920 — por eso las rondas que
   solo miraron a 1440 no lo vieron.
   La clase la ponen los contenedores de nuestra plantilla. */
.musas-seccion{
  max-width:min(100%, 1240px);
  margin-left:auto;
  margin-right:auto;
}

/* ── Hallazgos de tamaño de Vera (iter-3) ────────────────────────────────────

   F-R18 · Las pastillas de variante salían como TRES BARRAS de ancho completo
   (825px) en vez de píldoras. Causa que ella identificó con CDP: una regla del
   tema, `:is(button, .added_to_cart)`, pensada para "Añadir al carrito", matchea
   cualquier <button> dentro de `form.cart` — incluidas las nuestras. */
.musas-tallas .musas-talla,
form.cart .musas-tallas button.musas-talla{
  width:auto!important;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.musas-tallas{display:flex;flex-wrap:wrap;gap:var(--musas-esp-20)}

/* F-R19 · El checkbox "Guarda mi nombre…" se renderizaba a 1240×44 porque el
   selector que arreglaba los campos de texto no excluía las casillas. */
.musas-opiniones .comment-form input[type=checkbox],
.musas-opiniones .comment-form input[type=radio]{
  width:auto;
  min-height:0;
  padding:0;
  margin-right:var(--musas-esp-20);
  border-radius:3px;
}
.musas-opiniones .comment-form-cookies-consent{
  display:flex;align-items:center;gap:var(--musas-esp-10);
}

/* F-R20 · Tres botones primarios con tres alturas (52 / 54 / 44). Una sola. */
.woocommerce div.product form.cart button.single_add_to_cart_button,
.musas-asesor__cta,
.musas-opiniones #respond input#submit{
  min-height:52px;
}

/* F-R22 · Entre garantías, "Completa tu rutina" y asesoramiento había EXACTAMENTE
   0px: lo que parecía respiro era el padding interno de cada bloque. Ahora el
   ritmo entre secciones sale de la escala de espaciado, no del azar. */
.musas-garantias,
.musas-rutina,   /* el envoltorio de AITOR-005 dejó fuera al .woocommerce desnudo */
.musas-opiniones,
.musas-asesor,
.elementor-shortcode > .woocommerce{
  margin-block:var(--musas-esp-60);
}

/* ── F-01 / F-R17 · UN SOLO ANCHO DE CONTENIDO ───────────────────────────────

   El hallazgo que Lidia y Vera encontraron por separado, y el más visible: la
   fila de arriba (galería + compra) medía 1840 y todo lo de abajo 1240. Un salto
   de 600px que crece con la pantalla, así que en el monitor del Usuario se veía
   peor que en el nuestro.

   Lo intenté primero con una clase propia en la plantilla; Elementor no la pinta
   en el HTML. Se resuelve sobre su propia estructura, que es estable y no
   depende de que la plantilla se reimporte:
   `.woocommerce div.product .e-con.e-parent` = (0,4,1), gana a `.e-con` (0,1,0)
   SIN `!important` — medido, no supuesto. */
.woocommerce div.product .e-con.e-parent{
  max-width:min(100%, 1240px);
  margin-inline:auto;
}

/* F-R18 · Ver el comentario largo en musas-ficha.js: el envoltorio existe para
   que el `min-width` en porcentaje del tema se resuelva contra una caja del
   tamaño del contenido y deje de estirar la pastilla. */
.musas-talla-w{display:inline-block;width:max-content}
.musas-tallas{display:flex;flex-wrap:wrap;gap:var(--musas-esp-20);align-items:flex-start}

/* F-R20 · El CTA de asesoramiento salía a 54px y los otros dos a 52: el
   `min-height` estaba bien, lo que sobraba era el padding vertical. */
.musas-asesor__cta{
  min-height:52px; padding-block:0;
  display:inline-flex; align-items:center; justify-content:center;
}

/* F-R19 (cierre) · 13×13 era correcto pero pequeño para el dedo. WCAG 2.2 pide
   24px de objetivo; se agranda la casilla y se hace clicable toda la etiqueta. */
.musas-opiniones .comment-form-cookies-consent{
  display:flex; align-items:center; gap:var(--musas-esp-20); min-height:24px;
}
.musas-opiniones .comment-form-cookies-consent label{cursor:pointer}
.musas-opiniones .comment-form input[type=checkbox]{
  width:18px; height:18px; flex:0 0 18px; accent-color:var(--musas-color-contrast);
}

/* Vera (iter-3) · La sección salía con DOS titulares seguidos: el nuestro
   ("Opiniones") y el que pone WooCommerce ("Valoraciones (0)"). Se mantiene el
   nuestro, que es la voz de la clínica, y se oculta el suyo — sin quitarlo del
   DOM, para no romper el ancla al que apunta el enlace de valoraciones. */
.musas-opiniones #reviews > h2:first-child,
.musas-opiniones .woocommerce-Reviews-title{
  position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
}

/* ── Formas de pago ──────────────────────────────────────────────────────────
   Bloque restaurado: existia en la version tema y se perdio en el paso a plugin.
   Cierra tambien el F-10 de Vera (estaban en texto plano, sin marcas).

   Los distintivos van todos en la MISMA caja —44x28, proporcion de tarjeta— para
   no repetir el defecto que la propia auditoria senalo: cosas del mismo rango con
   tamanos distintos. El color de marca solo entra dentro del distintivo; alrededor
   manda la paleta de la clinica. */
.musas-pagos{margin-block:var(--musas-esp-40) 0}
.musas-pagos__t{font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--musas-color-accent-dark);margin:0 0 var(--musas-esp-20)}
.musas-pagos__l{display:flex;flex-wrap:wrap;gap:var(--musas-esp-20);
  list-style:none;margin:0;padding:0}
.musas-pago{width:44px;height:28px;flex:0 0 44px;display:flex;align-items:center;
  justify-content:center;border:1px solid var(--musas-color-line);border-radius:5px;
  background:var(--musas-color-base);overflow:hidden}
.musas-pago img{width:100%;height:100%;display:block;object-fit:contain}
/* El nombre real de cada medio queda para lectores de pantalla: un logotipo sin
   texto alternativo no dice nada a quien no lo ve. */
.musas-visualmente-oculto{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}

/* Los iconos de garantías y de entrega dejan de ser caracteres tipográficos
   (✦ ✧ → ✓) y pasan al mismo sprite SVG que ya usaban las condiciones. Tener
   unos rótulos con icono y otros con símbolos de teclado no es un sistema. */
.musas-garantias__i{display:inline-flex;align-items:center;justify-content:center;
  width:calc(var(--musas-icono-tam) + 4px);height:calc(var(--musas-icono-tam) + 4px);flex:0 0 calc(var(--musas-icono-tam) + 4px);color:var(--musas-color-accent-legible)}
.musas-garantias__i svg{width:var(--musas-icono-tam);height:var(--musas-icono-tam)}
.musas-ico{display:inline-flex;align-items:center;justify-content:center;
  vertical-align:-.28em;color:var(--musas-color-accent-legible)}
.musas-ico svg{width:var(--musas-icono-tam);height:var(--musas-icono-tam)}

/* ── Lidia iter-4 · el CTA del producto variable no llegaba al borde ─────────
   "Añadir al carrito" quedaba 164px más corto que el título, el precio y las
   píldoras, con un hueco a su derecha justo en el botón más importante de la
   página. Solo en variables y solo en escritorio.

   No era el botón ni la cascada: `form.cart` es una fila flex y
   `.single_variation_wrap` —que envuelve precio, cantidad y CTA— es un elemento
   flexible que se encogía a su contenido. Basta con decirle que ocupe la fila. */
.woocommerce div.product form.cart .single_variation_wrap{flex:1 0 100%}

/* ── Cierre de la auditoría de accesibilidad (Aitor, iter-1) ────────────────

   AITOR-003 · La casilla de consentimiento medía 18x18 con un área real de
   19,6px de alto: por debajo de los 24x24 que pide 2.5.8 (nuevo en WCAG 2.2).
   Mi propio comentario decía que el objetivo eran 24px — y se quedó corto porque
   medí la fila, no el objetivo. Ahora el objetivo ES la etiqueta entera. */
.musas-opiniones .comment-form-cookies-consent{
  min-height:24px; padding-block:2px;
}
.musas-opiniones .comment-form-cookies-consent label{
  display:inline-flex; align-items:center; min-height:24px; cursor:pointer;
}
.musas-opiniones .comment-form input[type=checkbox]{
  width:18px; height:18px; flex:0 0 18px; margin-right:var(--musas-esp-20);
  /* el cuadro se ve de 18 pero el objetivo tactil llega a 24 */
  outline-offset:3px;
}

/* AITOR-004 · El precio tachado de "Completa tu rutina" daba 4,29:1 — falla AA
   por poco. Venía de aplicar opacidad sobre el color de texto; se cambia por un
   color propio, que es medible y no depende de lo que haya debajo. */


/* El aviso de "elige una puntuación": tiene que verse Y anunciarse. El color
   de alerta se acompaña de texto, nunca va solo (no vale el color como única
   señal para quien no lo distingue). */
.musas-opiniones__error{
  margin:var(--musas-esp-20) 0 0; font-size:.88rem; font-weight:500;
  color:var(--musas-color-alerta);
}
.musas-opiniones .stars.is-invalida{
  outline:2px solid var(--musas-color-alerta); outline-offset:4px; border-radius:4px;
}



/* ── AITOR-002 · el anillo de foco, entero ───────────────────────────────────

   Aitor reportó que el anillo usaba el oro de marca: 2,78:1 sobre blanco, por
   debajo del 3:1 de 1.4.11. Al medirlo control por control con el foco de
   teclado activo apareció algo peor: en CUATRO de los cinco controles no había
   anillo NINGUNO — `outline-width:0`. Para quien navega con teclado eso no es un
   contraste flojo, es no saber dónde está.

   Yo había dado F-11 por cerrado porque los cinco usaban el MISMO token.
   Consistente no es lo mismo que correcto, y el token era el equivocado.

   Va con `!important` a propósito —lo único de esta hoja que lo lleva— porque el
   tema anula el contorno de estos controles y gana por especificidad. Medido:
   sin `!important` el grosor sigue siendo 0. El desplazamiento saca el anillo
   fuera del botón, para que caiga sobre el fondo claro incluso en los controles
   de fondo oscuro. */
.musas-acc > summary:focus-visible,
.musas-cantidad__b:focus-visible,
.musas-talla:focus-visible,
.musas-cond__f > a:focus-visible,
.musas-asesor__cta:focus-visible,
.musas-opiniones input:focus-visible,
.musas-opiniones #respond input#submit:focus-visible,
.woocommerce div.product form.cart button.single_add_to_cart_button:focus-visible,
form.cart :is(button,input,select,a):focus-visible{
  outline-width:var(--musas-foco-grosor)!important;
  outline-style:solid!important;
  outline-color:var(--musas-color-accent-legible)!important;
  outline-offset:3px!important;
}

/* ── F-R30 · el otro anillo de foco, el de Elementor ─────────────────────────
   Vera lo encontro a unos scrolls del anterior: un segundo sistema de anillo
   —`3px solid #b8956a`, inyectado en linea en el <head>— seguia vivo en los
   corazones de lista de deseos de "Completa tu rutina". Mismo color y mismo
   2,78:1 que ya habiamos corregido arriba: el arreglo no habia llegado hasta
   ahi porque esos botones son de su plugin, no nuestros, pero salen dentro de
   nuestra ficha. */
/* El mismo botón de lista de deseos tenía dos aspectos en la misma pantalla:
   corazón a secas en la rejilla de la tienda, y píldora con texto dentro de
   nuestro módulo de recomendaciones (Ignacio, F-INCONSISTENT-07). Las dos pieles
   son de su plugin, pero somos nosotros quienes las ponemos juntas, así que aquí
   se iguala al corazón, que es su aspecto por defecto. El texto se esconde solo
   VISUALMENTE: el botón conserva su nombre accesible, que además ya viene por
   `aria-label`. */
.musas-rutina .woosw-btn-text{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* Al esconder el texto, el boton se quedaba en una tira de 190x13 px: mas ancha
   que el corazon de la rejilla y menos alta que el minimo de 24 px que pide WCAG
   2.2 para un objetivo pulsable. Se le da la misma caja que en la rejilla —39x39
   con el icono a 19 px— redondeada a 40 para no quedarse justo en el limite. */
.musas-rutina button.woosw-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  min-width:40px;
  min-height:40px;
  padding:10px;
  font-size:1.2rem;
  line-height:1;
  /* Con la caja puesta, el boton heredaba el marron del Kit de Elementor y quedaba
     un cuadrado solido donde la rejilla tiene un corazon a secas — lo cazo Lidia en
     la 9a vuelta midiendo el fondo: rgb(78,62,52) contra transparente. Elemento +
     clase para ganar al Kit, segun la regla de la casa de mas arriba. */
  background:transparent;
  border:0;
  color:var(--musas-color-contrast);
  box-shadow:none;
}
.musas-rutina button.woosw-btn:hover{
  background:transparent;
  color:var(--musas-color-accent-legible);
}
.musas-rutina .woosw-btn-icon{ font-size:inherit; color:inherit }

.musas-rutina .woosw-btn:focus-visible,
.musas-rutina a:focus-visible,
.musas-rutina button:focus-visible,
.musas-rutina .woocommerce-loop-product__link:focus-visible{
  outline-width:var(--musas-foco-grosor)!important;
  outline-style:solid!important;
  outline-color:var(--musas-color-accent-legible)!important;
  outline-offset:3px!important;
}

/* AITOR-005 · el precio tachado de "Completa tu rutina" daba 4,29:1. Mi primer
   intento fue codigo muerto: apuntaba a `.musas-rutina`, que no existia en el DOM
   porque el bloque nunca tuvo envoltorio. Ya lo tiene, pero ademas hacia falta
   ganarle a `.woocommerce ul.products li.product .price del{opacity:.7}` (0,4,3),
   que es quien apagaba el color. Esta regla es (0,5,3) y no necesita !important. */
.musas-rutina .woocommerce ul.products li.product .price del{
  opacity:1;
  color:var(--musas-color-accent-dark);
  font-weight:400;
}

/* ── Aitor, 3ª vuelta · dos huecos del anillo de foco ────────────────────────

   AITOR-010 · el campo numérico de cantidad, al recibir Tab directamente, no
   mostraba NINGÚN indicador. El tema le pone `outline:none!important` con
   especificidad (0,5,3) y la nuestra era (0,2,2): con las dos en !important,
   decide la especificidad, no el orden del fichero. Esta regla es (0,6,3).

   AITOR-011 · el <textarea> de "Tu valoración" recibía el anillo de Elementor
   (2,78:1) porque el selector decía `input` — y un textarea no es un input. */
.woocommerce div.product form.cart .musas-cantidad input.qty[type=number]:focus-visible,
.musas-opiniones textarea:focus-visible,
.musas-opiniones select:focus-visible{
  outline-width:var(--musas-foco-grosor)!important;
  outline-style:solid!important;
  outline-color:var(--musas-color-accent-legible)!important;
  outline-offset:3px!important;
}

/* ── F-R22 (resto) · los 20px fantasma entre garantías y "Completa tu rutina" ──
   No eran de ningún bloque nuestro: son el hueco que Elementor deja entre widgets,
   y un widget de shortcode que devuelve vacío (p. ej. "La recomendación de Musas"
   cuando el producto no tiene ese texto) mide 0px pero sigue ocupando su hueco.
   Se oculta el widget entero cuando no pinta nada. Medido: la unión pasa de 108
   a 88px, igual que las demás. En navegadores sin :has() (anteriores a 2023)
   simplemente quedan los 20px de antes. */
.elementor-widget-shortcode:not(:has(.elementor-shortcode *)){display:none}


/* ═══════════════════════════════════════════════════════════════════════════
   LA PORTADA — los bloques de `includes/portada.php`

   Mismo lenguaje que la referencia que le gusta a la clienta: tarjetas con borde
   de 1px, radio de 18px, hover que levanta 2px en .18s, rejillas que se adaptan
   solas y titulares en la serif de la marca. La diferencia es que aqui las
   tarjetas llevan foto, porque su web si tiene 21 fotos de la clinica, 6 retratos
   del equipo y 52 tratamientos fotografiados.

   Todos los selectores propios que pisan una propiedad del Kit de Elementor van
   como ELEMENTO + CLASE, segun la regla de la casa de mas arriba. Hoy me ha ganado
   la especificidad dos veces por no hacerlo.
   ═══════════════════════════════════════════════════════════════════════════ */

.musas-bloque{max-width:1320px;margin:var(--musas-esp-80) auto}
.musas-seccion-t__s{margin:var(--musas-esp-10) 0 0;color:var(--musas-color-accent-dark);font-size:.92rem;max-width:62ch}

/* Rejilla: `auto-fit` con minimo, como la de marcas. `is-3` para tarjetas
   grandes con foto ancha, `is-5` para los retratos del equipo. */
.musas-rej{display:grid;gap:var(--musas-esp-30)}
.musas-rej.is-3{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.musas-rej.is-5{grid-template-columns:repeat(auto-fit,minmax(208px,1fr))}

/* La tarjeta, compartida por puertas, tratamientos, equipo y visitanos. */
.musas-rej .musas-tarjeta{
  display:flex;flex-direction:column;
  background:var(--musas-color-base);
  border:1px solid var(--musas-color-line);
  border-radius:var(--musas-radio-grande);
  overflow:hidden;
  text-decoration:none;color:var(--musas-color-contrast);
  transition:.18s ease;
}
.musas-rej a.musas-tarjeta:hover{
  border-color:var(--musas-color-accent);
  transform:translateY(-2px);
}
.musas-rej a.musas-tarjeta:focus-visible{
  outline:var(--musas-foco-grosor) solid var(--musas-color-accent-legible);
  outline-offset:var(--musas-foco-separacion);
}
/* El hueco de la foto se reserva con `aspect-ratio`: son muchas imagenes y
   vienen de otro dominio, asi que sin esto la pagina salta al cargarlas. */
.musas-tarjeta__f{display:block;background:var(--musas-color-muted);overflow:hidden}
.musas-tarjeta__f.is-ancha{aspect-ratio:8/5}
.musas-tarjeta__f.is-alta{aspect-ratio:3/4}
.musas-tarjeta__f.is-cuadrada{aspect-ratio:1/1}
.musas-rej .musas-tarjeta__f img{width:100%;height:100%;object-fit:cover;display:block}
.musas-tarjeta__c{display:flex;flex-direction:column;gap:var(--musas-esp-10);padding:var(--musas-esp-30)}
.musas-rej .musas-tarjeta__e{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--musas-color-accent-legible)}
.musas-rej .musas-tarjeta__t{font-family:var(--musas-fuente-voz);font-size:1.12rem;font-weight:500;line-height:1.25}
.musas-rej .musas-tarjeta__d{font-size:.88rem;color:var(--musas-color-accent-dark);line-height:1.5}
.musas-rej .musas-tarjeta__p{font-size:.92rem;margin-top:var(--musas-esp-10)}

/* Hero: la banda de dos columnas, que ya estaba resuelta en el bloque de
   asesoramiento de la ficha. Aqui con foto real y dos botones. */
.musas-hero2{display:grid;gap:var(--musas-esp-50);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  max-width:1320px;margin:var(--musas-esp-50) auto var(--musas-esp-80)}
.musas-hero2__txt{padding:var(--musas-esp-20) 0}
.musas-hero2__e{margin:0 0 var(--musas-esp-20);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--musas-color-accent-legible)}
h1.musas-hero2__t{font-family:var(--musas-fuente-voz);font-weight:500;letter-spacing:-.015em;
  font-size:clamp(2.1rem,1.2rem + 2.6vw,3.4rem);line-height:1.08;margin:0 0 var(--musas-esp-30)}
.musas-hero2__d{margin:0 0 var(--musas-esp-40);max-width:46ch;color:var(--musas-color-accent-dark);font-size:1.02rem}
.musas-hero2__b{display:flex;gap:var(--musas-esp-25);flex-wrap:wrap;margin:0}
.musas-hero2 a.musas-hero2__cta,
.musas-hero2 a.musas-hero2__cta2{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 var(--musas-esp-40);
  border-radius:var(--musas-radio-pildora);
  text-decoration:none;font-size:.95rem;transition:.18s ease;
}
.musas-hero2 a.musas-hero2__cta{background:var(--musas-color-accent-dark);color:var(--musas-color-base);border:1px solid var(--musas-color-accent-dark)}
.musas-hero2 a.musas-hero2__cta:hover{background:var(--musas-color-accent-legible);border-color:var(--musas-color-accent-legible)}
.musas-hero2 a.musas-hero2__cta2{background:transparent;color:var(--musas-color-contrast);border:1px solid var(--musas-color-line)}
.musas-hero2 a.musas-hero2__cta2:hover{border-color:var(--musas-color-accent)}
.musas-hero2__img{margin:0;border-radius:var(--musas-radio-grande);overflow:hidden;aspect-ratio:3/2;background:var(--musas-color-muted)}
.musas-hero2 .musas-hero2__img img{width:100%;height:100%;object-fit:cover;display:block}

/* Pilares: la tarjeta de color alterno de la referencia, esta vez enlazada. */
.musas-pilares{display:grid;gap:var(--musas-esp-25);grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.musas-pilares a.musas-pilar{
  display:flex;flex-direction:column;gap:var(--musas-esp-10);
  padding:var(--musas-esp-40) var(--musas-esp-30);
  border-radius:var(--musas-radio-medio);
  background:var(--musas-color-muted);
  text-decoration:none;color:var(--musas-color-contrast);transition:.18s ease;
}
.musas-pilares a.musas-pilar:nth-child(2n){background:var(--musas-color-base);border:1px solid var(--musas-color-line)}
.musas-pilares a.musas-pilar:hover{transform:translateY(-2px)}
.musas-pilares a.musas-pilar:focus-visible{outline:var(--musas-foco-grosor) solid var(--musas-color-accent-legible);outline-offset:var(--musas-foco-separacion)}
.musas-pilar__t{font-family:var(--musas-fuente-voz);font-size:1.05rem;font-weight:500}
.musas-pilar__d{font-size:.85rem;color:var(--musas-color-accent-dark);line-height:1.45}

/* Opiniones: la nota grande y el enlace a su ficha de Google. Nada copiado. */
.musas-op{text-align:center}
h2.musas-op__t{font-family:var(--musas-fuente-voz);font-weight:500;letter-spacing:-.01em;margin:0 0 var(--musas-esp-30)}
.musas-op__n{display:flex;align-items:center;justify-content:center;gap:var(--musas-esp-25);margin:0}
.musas-op__nota{font-family:var(--musas-fuente-voz);font-size:3.2rem;line-height:1.15}
.musas-op__e{color:var(--musas-color-line);font-size:1.5rem}
.musas-op__e.is-on{color:var(--musas-color-accent)}
.musas-op__d{margin:var(--musas-esp-20) 0 var(--musas-esp-30);color:var(--musas-color-accent-dark)}
.musas-op a.musas-op__cta{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--musas-esp-40);
  border:1px solid var(--musas-color-line);border-radius:var(--musas-radio-pildora);
  text-decoration:none;color:var(--musas-color-contrast);font-size:.92rem;transition:.18s ease}
.musas-op a.musas-op__cta:hover{border-color:var(--musas-color-accent);background:var(--musas-color-muted)}

/* La fundadora: la misma banda de dos columnas, con la foto a la izquierda. */
.musas-funda{display:grid;gap:var(--musas-esp-50);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  max-width:1320px;margin:var(--musas-esp-80) auto;
  padding:var(--musas-esp-50);background:var(--musas-color-muted);border-radius:var(--musas-radio-grande)}
.musas-funda__img{margin:0;border-radius:var(--musas-radio-medio);overflow:hidden;aspect-ratio:1/1;max-width:420px}
.musas-funda .musas-funda__img img{width:100%;height:100%;object-fit:cover;display:block}
h2.musas-funda__t{font-family:var(--musas-fuente-voz);font-weight:500;letter-spacing:-.01em;margin:0 0 var(--musas-esp-30)}
.musas-funda__txt p{margin:0 0 var(--musas-esp-25);color:var(--musas-color-accent-dark);max-width:52ch}
.musas-funda__f{font-family:var(--musas-fuente-voz);font-style:italic;color:var(--musas-color-contrast)!important}
.musas-funda__f span{display:block;font-family:var(--musas-fuente-base);font-style:normal;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--musas-color-accent-legible);margin-top:var(--musas-esp-10)}

/* Visitanos y el Club de las Musas. */
.musas-club{display:flex;align-items:center;gap:var(--musas-esp-25);flex-wrap:wrap;
  margin:var(--musas-esp-40) 0 0;padding:var(--musas-esp-30) var(--musas-esp-40);
  background:var(--musas-color-accent-dark);color:var(--musas-color-base);
  border-radius:var(--musas-radio-grande);font-size:.95rem}
.musas-club span{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;opacity:.75}
.musas-club a{color:var(--musas-color-base);text-underline-offset:3px}

@media (max-width:640px){
  .musas-funda{padding:var(--musas-esp-40) var(--musas-esp-30)}
  .musas-bloque{margin:var(--musas-esp-60) auto}
}

/* Dos h1 en la misma pagina es un salto de jerarquia, y lo seria en cualquier
   auditoria. Cuando la pagina trae nuestro hero, que ya lleva su h1, el titulo
   que pinta el tema sobra. En su web real esto no pasa porque su pagina tiene el
   titulo oculto por ajuste de Elementor; esta regla es la red por si se olvida. */
/* Cuando la pagina trae uno de nuestros bloques con su propio titular, el titulo
   que pinta el tema sobra: dos h1 es un salto de jerarquia. En la pagina de marcas
   del cliente esto no pasa porque tiene el titulo oculto por ajuste de Elementor;
   en las de vista previa si, y salia un «Untitled» enorme. */
body:has(.musas-hero2) header .vamtam-page-title,
body:has(.musas-hero2) h1[itemprop="headline"],
body:has(.musas-marcas-b) header .vamtam-page-title,
body:has(.musas-marcas-b) h1[itemprop="headline"]{ display:none }

/* El banner de la campana del mes: a sangre y lo primero, como en su portada. */
.musas-promo{margin:0 0 var(--musas-esp-50)}
.musas-promo a,.musas-promo img{display:block}
.musas-promo img{width:100%;height:auto;border-radius:var(--musas-radio-grande)}
@media (max-width:640px){ .musas-promo img{border-radius:var(--musas-radio-medio)} }

/* ═══════════════════════════════════════════════════════════════════════════
   LA PIEL PARA SUS WIDGETS DE ELEMENTOR

   El Usuario lo dijo claro y tenia razon: la clienta edita su portada con
   Elementor —clic en la foto, escribir el titular— y entregarle una portada de
   shortcodes le cambiaria la forma de trabajar y nos convertiria en cuello de
   botella cada mes que cambien la promocion.

   Asi que el reparto es este: ELLOS editan con sus widgets de siempre y NOSOTROS
   solo ponemos el aspecto. Estas reglas visten el marcado que emite Elementor
   —`.elementor-image-box-*`, `.elementor-heading-title`…— cuando el widget lleva
   la clase correspondiente en el campo «Clases CSS» de la pestana Avanzado.

   Solo tres secciones siguen siendo shortcode, y son las que nadie querria
   mantener a mano: los tratamientos (salen del catalogo, con su precio), las
   marcas (de la taxonomia) y la nota de Google (de la opcion de su plugin).
   ═══════════════════════════════════════════════════════════════════════════ */

/* `musas-e-seccion` · el contenedor de una seccion */
.musas-e-seccion{max-width:1320px;margin-inline:auto}

/* `musas-e-rotulo` · un heading con la voz de la marca */
.musas-e-rotulo .elementor-heading-title{
  font-family:var(--musas-fuente-voz)!important;
  font-weight:500!important;
  letter-spacing:-.01em!important;
}

/* `musas-e-antetitulo` · la linea pequena en versalitas de encima del titular */
.musas-e-antetitulo,
.musas-e-antetitulo p{
  font-size:.72rem!important;letter-spacing:.2em;text-transform:uppercase;
  color:var(--musas-color-accent-legible)!important;margin:0!important;
}

/* `musas-e-tarjeta` · un image-box con el lenguaje de la referencia: borde de
   1px, radio de 18px y hover que levanta la tarjeta. */
.musas-e-tarjeta .elementor-image-box-wrapper{
  display:flex;flex-direction:column;height:100%;
  background:var(--musas-color-base);
  border:1px solid var(--musas-color-line);
  border-radius:var(--musas-radio-grande);
  overflow:hidden;
  transition:.18s ease;
}
.musas-e-tarjeta:hover .elementor-image-box-wrapper{
  border-color:var(--musas-color-accent);
  transform:translateY(-2px);
}
.musas-e-tarjeta .elementor-image-box-img{margin:0!important;width:100%!important;background:var(--musas-color-muted)}
/* La proporcion, en la propia imagen y no en su envoltorio: el `<figure>` de
   Elementor no tiene altura propia, asi que un `aspect-ratio` ahi no hace nada.
   Medido: las fotos salian a 0,8 cuando pedia 1,6. */
.musas-e-tarjeta .elementor-image-box-img img{width:100%;height:auto;object-fit:cover;display:block;border-radius:0}
.musas-e-tarjeta.is-ancha .elementor-image-box-img img{aspect-ratio:8/5}
.musas-e-tarjeta.is-alta  .elementor-image-box-img img{aspect-ratio:3/4}
.musas-e-tarjeta .elementor-image-box-content{padding:var(--musas-esp-30);text-align:left}
.musas-e-tarjeta .elementor-image-box-title{
  font-family:var(--musas-fuente-voz)!important;font-weight:500!important;
  font-size:1.12rem!important;line-height:1.25!important;margin:0 0 var(--musas-esp-10)!important;
}
.musas-e-tarjeta .elementor-image-box-description{
  font-size:.88rem!important;color:var(--musas-color-accent-dark)!important;line-height:1.5!important;margin:0!important;
}

/* `musas-e-pilar` · la tarjeta de color alterno de los cinco pilares */
.musas-e-pilar .elementor-widget-container{
  padding:var(--musas-esp-40) var(--musas-esp-30);
  border-radius:var(--musas-radio-medio);
  background:var(--musas-color-muted);
  height:100%;transition:.18s ease;
}
.musas-e-pilar:hover .elementor-widget-container{transform:translateY(-2px)}
.musas-e-pilar.is-claro .elementor-widget-container{background:var(--musas-color-base);border:1px solid var(--musas-color-line)}
.musas-e-pilar strong{font-family:var(--musas-fuente-voz);font-weight:500;font-size:1.05rem;display:block;margin-bottom:var(--musas-esp-10)}
.musas-e-pilar p{font-size:.85rem!important;color:var(--musas-color-accent-dark)!important;line-height:1.45!important;margin:0!important}

/* `musas-e-cta` y `musas-e-cta2` · los dos botones del hero */
.musas-e-cta .elementor-button,
.musas-e-cta2 .elementor-button{
  min-height:48px;padding:0 var(--musas-esp-40);
  border-radius:var(--musas-radio-pildora)!important;
  font-size:.95rem!important;display:inline-flex;align-items:center;transition:.18s ease;
}
.musas-e-cta .elementor-button{background:var(--musas-color-accent-dark)!important;color:var(--musas-color-base)!important;border:1px solid var(--musas-color-accent-dark)!important}
.musas-e-cta .elementor-button:hover{background:var(--musas-color-accent-legible)!important;border-color:var(--musas-color-accent-legible)!important}
.musas-e-cta2 .elementor-button{background:transparent!important;color:var(--musas-color-contrast)!important;border:1px solid var(--musas-color-line)!important}
.musas-e-cta2 .elementor-button:hover{border-color:var(--musas-color-accent)!important}

/* `musas-e-foto` · una imagen con el radio de la casa y sin salto de pagina */
.musas-e-foto img{border-radius:var(--musas-radio-grande);width:100%;height:auto;display:block}
.musas-e-foto.is-cuadrada img{aspect-ratio:1/1;object-fit:cover}
.musas-e-foto.is-ancha img{aspect-ratio:3/2;object-fit:cover}

/* `musas-e-crema` · la banda de fondo crema de la fundadora */
.musas-e-crema{background:var(--musas-color-muted);border-radius:var(--musas-radio-grande)}

/* `musas-e-firma` · la firma de la fundadora */
.musas-e-firma p{font-family:var(--musas-fuente-voz)!important;font-style:italic;margin:0!important}
.musas-e-firma p em{font-family:var(--musas-fuente-base);font-style:normal;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--musas-color-accent-legible);display:block;margin-top:var(--musas-esp-10)}

/* El Club de las Musas. Era una tira marron con el texto y un enlace subrayado
   dentro, y el Usuario pidio que llamara mas. Ahora el bloque lleva el fondo
   oscuro nativo del contenedor y aqui va lo que no puede hacer Elementor: el
   texto en claro, la cifra grande y un boton de verdad. `musas-e-claro` y
   `musas-e-oscuro` sirven para cualquier bloque sobre fondo oscuro. */
/* Sobre el widget, no sobre el contenedor: Elementor no pinta las clases de
   contenedor y el titular salia en negro sobre el marron. Cuarta vez. */
.musas-e-rotulo-claro .elementor-heading-title{color:var(--musas-color-base)!important;
  font-size:clamp(1.6rem,1.1rem + 1.6vw,2.4rem)!important;line-height:1.1!important}
.musas-e-claro p{color:var(--musas-color-base)!important;margin:0!important}
.musas-e-claro.musas-e-antetitulo p,
.musas-e-oscuro .musas-e-antetitulo p{color:var(--musas-color-base)!important;opacity:.7}
.musas-e-cta-claro .elementor-button{
  min-height:52px;padding:0 var(--musas-esp-50);
  background:var(--musas-color-base)!important;color:var(--musas-color-accent-dark)!important;
  border:1px solid var(--musas-color-base)!important;
  border-radius:var(--musas-radio-pildora)!important;
  font-size:1rem!important;display:inline-flex;align-items:center;justify-content:center;
  transition:.18s ease;width:100%;
}
.musas-e-cta-claro .elementor-button:hover{
  background:var(--musas-color-muted)!important;border-color:var(--musas-color-muted)!important;
  transform:translateY(-2px);
}

/* La maquetacion ya NO vive aqui: esta en los ajustes de Elementor (filas,
   columnas con su porcentaje y anchos por widget), para que la clienta pueda
   moverla desde el editor como cualquier seccion suya. Lo intente primero por CSS
   y fue un error en tres frentes: Elementor guarda `_css_classes` en los
   contenedores pero no lo pinta, mete un `.e-con-inner` en los «boxed», y le da a
   cada hijo un `width:300px` fijo. Aqui solo queda el ASPECTO.

   Lo unico de maquetacion que se queda es la banda crema de la fundadora, porque
   es un fondo y no un reparto de columnas. */
.musas-e-crema{background:var(--musas-color-muted);border-radius:var(--musas-radio-grande)}
.musas-e-crema > .e-con-inner{padding:var(--musas-esp-50)}
@media (max-width:640px){ .musas-e-crema > .e-con-inner{padding:var(--musas-esp-40) var(--musas-esp-30)} }

/* Los tres shortcodes de la portada viven dentro de un contenedor de Elementor
   que ya pone el aire arriba y abajo. Sus margenes propios se sumaban a ese
   relleno y dejaban los huecos enormes que se veian entre secciones. Dentro de
   un contenedor manda el contenedor; fuera (en la ficha) siguen con su margen. */
.e-con .musas-bloque,
.e-con .musas-marcas-b{margin-block:0}

/* El resto de la ultima fila, estirado. Cinco tarjetas no se reparten en 2, 3 ni 4
   columnas sin dejar hueco —cinco es primo—, y el Usuario ya se quejo del agujero
   una vez. Con `flex-grow` las que sobran ocupan lo que queda y no hay hueco a
   ningun ancho: medido en 1440, 1024, 768, 390 y 320. Solo cambia el reparto, no
   la estructura, asi que esto si es cosa del CSS. */
/* `flex-grow` no bastaba: Elementor pone el ancho por elemento con mas
   especificidad que la nuestra, asi que la tarjeta que sobraba se quedaba a su
   tamano y dejaba el hueco. La solucion es que la ULTIMA de la fila, cuando queda
   sola, ocupe el ancho entero. Cinco es primo: en 2, 3 o 4 columnas siempre sobra
   una, y en vez de pelearse con el reparto se le da la fila completa.

   Medido a 1440, 1024, 768, 390 y 320 px: ningun hueco a ningun ancho. */
/* Con las dos formas del selector: estas filas son de ancho completo, asi que
   Elementor NO les mete el `.e-con-inner` y sus hijos son hijos directos. Escribi
   solo la variante con envoltorio y la regla no aplicaba a ninguna. */
@media (max-width:1100px){
  #musas-rej-puertas > *:nth-child(3), #musas-rej-puertas > .e-con-inner > *:nth-child(3),
  #musas-rej-visita  > *:nth-child(3), #musas-rej-visita  > .e-con-inner > *:nth-child(3),
  #musas-rej-pilares > *:nth-child(5), #musas-rej-pilares > .e-con-inner > *:nth-child(5){
    width:100%!important;
  }
}
/* La que ocupa la fila entera lleva la foto en panoramica y no en vertical: con
   la proporcion 3/4 de las demas, la ultima tarjeta salia del doble de alto que
   sus companeras y descompensaba la seccion. */
@media (max-width:1100px){
  #musas-rej-puertas > *:nth-child(3) .elementor-image-box-img img,
  #musas-rej-puertas > .e-con-inner > *:nth-child(3) .elementor-image-box-img img{
    aspect-ratio:16/9!important;
  }
}
@media (max-width:560px){
  #musas-rej-puertas > *, #musas-rej-puertas > .e-con-inner > *,
  #musas-rej-visita  > *, #musas-rej-visita  > .e-con-inner > *{ width:100%!important }
  /* A un ancho de movil todas van a fila completa, asi que la panoramica sobra:
     vuelven todas a la misma proporcion y la seccion queda regular. */
  #musas-rej-puertas > *:nth-child(3) .elementor-image-box-img img,
  #musas-rej-puertas > .e-con-inner > *:nth-child(3) .elementor-image-box-img img{
    aspect-ratio:8/5!important;
  }
}

/* Las bandas propias, alineadas con la columna del producto.
   Medido en la replica a 1440 px: las dos columnas del producto llevan 12px de
   padding cada una, asi que su contenido vive entre 124 y 1316. Nuestras bandas
   van sueltas dentro del .e-con-inner del tema y ocupaban 112→1328: sobresalian
   12px por cada lado, y por eso el titular «Completa tu rutina» arrancaba antes
   que todo lo que tiene encima. A 1024 y a 390 el desfase es el mismo, fijo.
   Margen y no padding: asi encaja tambien el fondo/borde de las bandas que los
   llevan (opiniones tiene borde de 1px; asesoramiento, fondo blanco). */
body.single-product .elementor-shortcode > section.musas-rutina,
body.single-product .elementor-shortcode > section.musas-opiniones,
body.single-product .elementor-shortcode > section.musas-asesor,
body.single-product .elementor-shortcode > ul.musas-garantias{ margin-inline:12px }

/* «Completa tu rutina»: cuatro productos, cuatro columnas — nunca una fila a medias.
   Medido en la replica: a 1440 y 1280 el tema abria CINCO columnas para cuatro
   productos y dejaba un hueco de 243px a la derecha; a 900 y 768 abria TRES y la
   cuarta tarjeta se quedaba sola con medio ancho vacio al lado; a 390 las apilaba
   de una en una. La seccion pide siempre exactamente cuatro productos, asi que el
   numero de columnas se fija: cuatro arriba, dos abajo, y las filas siempre llenas.
   Sin !important: comprobado en el navegador que gana por especificidad. */
body.single-product .musas-rutina ul.products{ grid-template-columns:repeat(2,minmax(0,1fr)) }
@media (min-width:1024px){
  body.single-product .musas-rutina ul.products{ grid-template-columns:repeat(4,minmax(0,1fr)) }
}

/* ── El repaso de movil de la portada (23-sep) ────────────────────────────────
   Medido a 390 px sobre la pagina publicada: medía 12.198 px de alto, catorce
   pantallas y media. Las tres causas, en orden de bulto:
     · 15 marcas en una sola columna  → 2.176 px
     · 6 tratamientos en una sola columna, con foto cuadrada → ~2.800 px
     · los cinco pilares alternando fondo, que apilados de dos en dos parecia un
       error y no un ritmo.
   No se toca el tamano de letra ni el orden: solo cuantas cosas caben por fila. */

@media (max-width:560px){
  /* Las marcas, de dos en dos: el logo mide 160 px de ancho, asi que en una
     columna de 168 entra entero. Son 15, impares, y la ultima se quedaria sola:
     ocupa la fila entera. Escrito con :last-child:nth-child(odd) para que siga
     valiendo si manana la lista tiene 14 o 16. */
  nav.musas-marcas{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  nav.musas-marcas > :last-child:nth-child(odd){ grid-column:1 / -1 }
}

@media (max-width:640px){
  /* Los tratamientos, de dos en dos: son seis, tres filas justas, ninguna a medias. */
  .musas-rej.is-compacta{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--musas-esp-25) }
  /* Si la campana trae un numero impar, la ultima se quedaria sola con medio
     ancho vacio al lado: ocupa la fila entera, como en marcas y en las puertas. */
  .musas-rej.is-compacta > :last-child:nth-child(odd){ grid-column:1 / -1 }
  /* «NEUROMODULADORES» pide 178 px en una caja de 141 y la tarjeta lo recortaba
     (overflow:hidden). Con guion automatico parte por silabas; `break-word` es
     el respaldo por si el navegador no sabe silabear. El documento va en `es`. */
  .musas-rej.is-compacta .musas-tarjeta__t{ font-size:1rem; hyphens:auto; overflow-wrap:break-word }
  .musas-rej.is-compacta .musas-tarjeta__c{ padding:var(--musas-esp-25) }
}

@media (max-width:767px){
  /* Los cinco pilares, todos iguales: el mismo blanco con linea que el resto de
     las tarjetas de la pagina. El fondo alterno se disena para una fila de cinco;
     apilados 2+2+1 se lee como un descuido. */
  #musas-rej-pilares .musas-e-pilar .elementor-widget-container{
    background:var(--musas-color-base);
    border:1px solid var(--musas-color-line);
  }
}

/* El boton del Club parte «Quiero unirme» en dos lineas dentro de una pildora de
   153 px (medido a 390). Son dos palabras cortas: mejor en una linea. */
.musas-e-cta-claro .elementor-button{ white-space:nowrap }

/* La rejilla de tratamientos se rellena sola, traiga la campana 4, 5 o 6.
   Seis carriles y cada tarjeta ocupa dos, o sea tres por fila. Si la ultima fila
   se queda con dos, cada una pasa a tres carriles; si se queda con una, ocupa los
   seis. Medido con los cinco protocolos de septiembre: antes dejaba 338 px de
   hueco a 1440 y 364 a 768. La que se ensancha lleva la foto en panoramica, que
   es lo mismo que ya hacen las puertas y el equipo cuando sobra una. */
/* Tratamientos, en escritorio: TODOS EN UNA FILA, de borde a borde.
   Las creatividades de la campana van numeradas 01 → 05: son una serie, y una
   serie se lee en fila. Con tres por fila la segunda se quedaba con dos, y ni
   pegada a la izquierda (hueco) ni centrada (desalineada con titular, primera fila
   y boton — lo marco el Usuario el 24-sep) casaba con la reticula. En una fila
   empieza y acaba donde todo lo demas, y vale igual si la campana trae 4 o 6. */
@media (min-width:1024px){
  .musas-rej.is-compacta{
    display:grid; grid-template-columns:none;
    grid-auto-flow:column; grid-auto-columns:minmax(0,1fr);
    gap:var(--musas-esp-30);
  }
}
/* Tableta: de dos en dos, y la que queda sola ocupa la fila entera. */
@media (min-width:641px) and (max-width:1023px){
  .musas-rej.is-compacta{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--musas-esp-30) }
  .musas-rej.is-compacta > :last-child:nth-child(odd){ grid-column:1 / -1 }
}
/* En tableta, la que ocupa la fila entera va en panoramica —cuadrada mediria
   700 px de alto—, recortando por ARRIBA: la banda con el nombre del protocolo
   esta en la parte de abajo de la creatividad, y con el recorte centrado de
   siempre se comia el titulo (lo vi el 23-sep). En el movil NO: ahi a todo el
   ancho mide 350 px, cuadrada es lo normal en un telefono, y recortada se quedaba
   sin foto y no se parecia a las otras cuatro. */
@media (min-width:641px) and (max-width:1023px){
  .musas-rej.is-compacta > :last-child:nth-child(odd) .musas-tarjeta__f{ aspect-ratio:16/9 }
  .musas-rej.is-compacta > :last-child:nth-child(odd) .musas-tarjeta__f img{ object-position:center bottom }
}
/* Y dentro de cada tarjeta, el precio siempre abajo del todo: si un nombre ocupa
   dos lineas y el de al lado una, los precios siguen en la misma fila. */
.musas-rej .musas-tarjeta__c{ flex:1 }
.musas-rej .musas-tarjeta__p{ margin-top:auto }

/* El boton que cierra una seccion («Ver los 52 tratamientos», «Ver toda la tienda»).
   Copia exacta de `musas-e-cta2`, el secundario de los widgets de Elementor de la
   misma portada, para que los botones de la pagina sean uno solo: 48 px, borde fino,
   pildora. Elemento + clase (`p.` y `a`) por la regla de la casa: si no, el Kit le
   pinta el enlace con su subrayado y su color. */
/* Centrado, por decision del Usuario (24-sep): bajo una fila de tarjetas que va de
   borde a borde, el boton pegado a la izquierda «se ve muy a la izquierda». Los
   cuatro botones que cierran seccion en la portada van centrados a la vez —los dos
   del plugin por aqui y los dos de Elementor con su ajuste nativo de alineacion—
   para que la pagina no tenga dos alineaciones para el mismo boton. */
p.musas-seccion-cta{ text-align:center; margin:var(--musas-esp-50) 0 0 }
p.musas-seccion-cta a{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 var(--musas-esp-40);
  border:1px solid var(--musas-color-line); border-radius:var(--musas-radio-pildora);
  background:transparent; color:var(--musas-color-contrast);
  font-size:.95rem; text-decoration:none; transition:.18s ease;
}
p.musas-seccion-cta a:hover{ border-color:var(--musas-color-accent); background:var(--musas-color-muted) }
p.musas-seccion-cta a:focus-visible{
  outline:var(--musas-foco-grosor) solid var(--musas-color-accent-legible);
  outline-offset:var(--musas-foco-separacion);
}

/* Marcas: huecos fijos dentro de la tarjeta.
   Medido a 1440: el logo y el nombre se centraban juntos, asi que un nombre de dos
   lineas (Advanced Nutrition, The Organic Pharmacy) subia su logo 9 px respecto a
   los de su fila, y las filas con uno de esos median 138 px y la de en medio 132.
   Reservando siempre dos lineas para el nombre, todos los bloques miden lo mismo:
   cada logo empieza a la misma altura, cada nombre tambien, y las tres filas igual.
   Solo alto minimo: la letra no se toca (decision del Usuario, 23-sep). */
.musas-marcas .musas-marcas__n{ min-height:2.6em }

/* Y columnas que dividen a 15 —5 o 3—, nunca 4. Con el reparto automatico, a
   900 px salian 4 columnas y la ultima fila se quedaba con 3 y 214 px de hueco. */
@media (min-width:561px){ nav.musas-marcas{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (min-width:960px){ nav.musas-marcas{ grid-template-columns:repeat(5,minmax(0,1fr)) } }

/* El banner del mes, de borde a borde.
   Va enlazado a la pagina de la promocion, y ese enlace el tema lo pinta como
   `inline-block`: una caja que se encoge a su contenido. La imagen, al 100 % de
   una caja que mide lo que ella, nunca pasaba de su tamano natural — medido: a
   2560 px se quedaba en 2048 y centrada. Con el enlace en bloque, la imagen
   llena. Y sin radio: a sangre, las esquinas redondeadas contra el borde de la
   pantalla se ven como un corte. */
#musas-sec-promo .musas-e-foto a{ display:block }
#musas-sec-promo .musas-e-foto img{ border-radius:0 }

/* ══════════════════════════════════════════════════════════════════════════
   Pagina de Marcas estilo defelipe — [musas_marcas vista="tarjetas"]
   Referencia: shop.defelipe.com/pages/rutinas-para-cada-tipo-de-piel (26-sep):
   antetitulo y titular centrados; tarjetas de 20 px de radio con la foto
   cuadrada arriba, nombre y «N articulos» debajo y un circulo con flecha a la
   derecha; 2 columnas en movil y 4 en escritorio. La letra es la del plugin
   (no se tocan tipografias): titular en la voz de marca, el resto en la base.
   ══════════════════════════════════════════════════════════════════════════ */
.musas-marcas-b.is-tarjetas{max-width:1320px}
.musas-marcas-b.is-tarjetas .musas-seccion-t{
  flex-direction:column;align-items:center;justify-content:center;text-align:center;
  gap:var(--musas-esp-20);margin-bottom:var(--musas-esp-50);
}
.musas-marcas-b.is-tarjetas p.musas-marcas__e{
  margin:0;font-family:var(--musas-fuente-base);font-size:.75rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--musas-color-accent-legible);
}
/* Como h1, el Kit de su web lo pone en MAYUSCULA y a 60 px: aqui manda la
   medida de los titulares de seccion del plugin (la del asesor), en su caja. */
.musas-marcas-b.is-tarjetas h1.musas-marcas__t{
  margin:0;text-transform:none;color:var(--musas-color-contrast);font-size:clamp(1.9rem,4vw,2.8rem);line-height:1.1;
}

ul.musas-mtar{
  list-style:none;margin:0;padding:0;
  display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:768px){ ul.musas-mtar{ gap:20px;grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (min-width:1024px){ ul.musas-mtar{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
ul.musas-mtar > li{margin:0;padding:0;min-width:0}
ul.musas-mtar > li::before{content:none}

/* Toda la tarjeta es un enlace: mas zona de toque y un solo tabulador por marca. */
.musas-mtar a.musas-mtar__i{
  position:relative;display:flex;flex-direction:column;height:100%;
  border-radius:20px;overflow:hidden;background:var(--musas-color-muted);
  /* Su pagina es blanca y la de defelipe gris: sin el filete, las fotos de bote
     sobre blanco se fundian con el fondo y la tarjeta perdia la forma. */
  border:1px solid var(--musas-color-line);
  color:var(--musas-color-contrast);text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease;
}
.musas-mtar a.musas-mtar__i:hover{transform:translateY(-2px);
  box-shadow:0 1px 2px rgba(29,29,27,.06), 0 10px 24px rgba(29,29,27,.08)}   /* dos capas (Vera, F-MN-01) */
.musas-mtar a.musas-mtar__i:focus-visible{
  outline:var(--musas-foco-grosor) solid var(--musas-color-accent-legible);
  outline-offset:var(--musas-foco-separacion);
}
/* El hueco de la foto se reserva antes de que llegue la imagen: cuadrado. */
.musas-mtar .musas-mtar__f{display:block;aspect-ratio:1 / 1;background:var(--musas-color-base);overflow:hidden}
/* Elemento + clase: `.woocommerce img` del tema (0,1,1) pone height:auto. */
.musas-mtar img.musas-mtar__img{
  display:block;width:100%;height:100%;max-width:none;object-fit:cover;
  transition:transform .4s ease;
}
.musas-mtar a.musas-mtar__i:hover img.musas-mtar__img{transform:scale(1.03)}
/* La foto de producto va a sangre, como las de defelipe: casi todas son
   cuadradas, asi que no se recortan. Con aire alrededor parecia un cuadro
   dentro de otro (la mitad traen su propio fondo gris). */
/* El logo, pequeño y centrado sobre el blanco de la foto. */
.musas-mtar img.musas-mtar__img.is-logo{object-fit:contain;padding:22%;background:var(--musas-color-base)}

.musas-mtar .musas-mtar__c{
  display:flex;flex-direction:column;gap:4px;
  padding:var(--musas-esp-30) 64px var(--musas-esp-30) var(--musas-esp-30);min-height:80px;   /* 16 px, escala 4/8 (Vera, F-MN-02) */
}
.musas-mtar .musas-mtar__n{
  font-family:var(--musas-fuente-base);font-size:1.05rem;font-weight:500;line-height:1.25;
  overflow-wrap:break-word;
}
.musas-mtar .musas-mtar__k{font-family:var(--musas-fuente-base);font-size:.8rem;color:var(--musas-color-accent-dark)}
.musas-mtar .musas-mtar__fl{
  position:absolute;right:16px;bottom:16px;
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--musas-color-base);color:var(--musas-color-contrast);
  transition:background .2s ease, color .2s ease;
}
.musas-mtar a.musas-mtar__i:hover .musas-mtar__fl{background:var(--musas-color-contrast);color:var(--musas-color-base)}
@media (min-width:768px){
  .musas-mtar .musas-mtar__c{padding:20px 72px 20px 20px;min-height:92px}
  .musas-mtar .musas-mtar__n{font-size:1.25rem}
  .musas-mtar .musas-mtar__fl{right:20px;bottom:24px}
}
/* En el movil la flecha se queda a la derecha, como en defelipe, pero mas chica:
   el nombre necesita el sitio para partirse en dos lineas («Augustinus / Bader»). */
@media (max-width:420px){
  .musas-mtar .musas-mtar__c{padding:12px 48px 16px 16px;min-height:72px}
  .musas-mtar .musas-mtar__n{font-size:.98rem}
  .musas-mtar .musas-mtar__fl{right:12px;bottom:16px;width:32px;height:32px}
}
@media (prefers-reduced-motion:reduce){
  .musas-mtar a.musas-mtar__i,.musas-mtar img.musas-mtar__img{transition:none}
  .musas-mtar a.musas-mtar__i:hover,.musas-mtar a.musas-mtar__i:hover img.musas-mtar__img{transform:none}
}
/* Marca sin ninguna foto: su nombre, grande, en la voz de marca. */
.musas-mtar .musas-mtar__vacio{
  display:grid;place-items:center;width:100%;height:100%;padding:12%;box-sizing:border-box;
  background:linear-gradient(160deg,var(--musas-color-muted),var(--musas-color-base));
  font-family:var(--musas-fuente-voz);font-size:clamp(1.4rem,1rem + 1.6vw,2.2rem);
  color:var(--musas-color-accent-dark);text-align:center;line-height:1.1;
}

/* /marcas/ en el móvil: las tarjetas ya no tocan el borde (Lidia, MENU-3) */
@media (max-width:767px){.musas-marcas,.musas-mtar{padding-left:16px!important;padding-right:16px!important;box-sizing:border-box}}