/* ══════════════════════════════════════════════════════════════════════════
   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-rutina h3, .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)}

/* 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)}

/* 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;
}

/* 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{
  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) }

/* 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);
}

/* 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. */
.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}