/* 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(--wp--preset--color--contrast);color:#fff;font-size:.78rem;
  letter-spacing:.02em;padding:.7rem 1rem;text-align:center}
.musas-avisos span{margin:0 2.2rem;white-space:nowrap}

/* Hero: tarjeta de esquinas redondeadas */
.musas-hero{border-radius:18px;overflow:hidden;background:var(--wp--preset--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 1.1rem}
.musas-hero p{max-width:42ch;color:var(--wp--preset--color--accent-dark);margin-bottom:2rem}

/* 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:1rem;border:1px solid var(--wp--preset--color--line);border-radius:14px;
  text-decoration:none;color:var(--wp--preset--color--contrast);font-size:.82rem;
  letter-spacing:.13em;text-transform:uppercase;transition:.18s ease}
.musas-marcas a:hover{border-color:var(--wp--preset--color--accent);
  background:var(--wp--preset--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:1.8rem 1.5rem;background:var(--wp--preset--color--muted)}
.musas-pilar h3{margin:0 0 .5rem;font-size:1.05rem;letter-spacing:.02em}
.musas-pilar p{margin:0;font-size:.88rem;color:var(--wp--preset--color--accent-dark)}
.musas-pilar:nth-child(2n){background:#fff;border:1px solid var(--wp--preset--color--line)}

.musas-seccion-t{display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;margin-bottom:1.6rem;flex-wrap:wrap}
.musas-seccion-t a{font-size:.85rem;color:var(--wp--preset--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:2rem;
  flex-wrap:wrap;padding:1.35rem clamp(1rem,4vw,2.5rem);border-bottom:1px solid var(--wp--preset--color--line)}
.musas-nav__marca{font-weight:700;letter-spacing:.28em;text-decoration:none;
  color:var(--wp--preset--color--contrast);font-size:1.05rem}
.musas-nav ul{display:flex;gap:1.8rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.musas-nav a{text-decoration:none;color:var(--wp--preset--color--contrast);font-size:.88rem}
.musas-nav ul a:hover{color:var(--wp--preset--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 1.1rem}
}

/* 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{margin-left:calc(-1 * clamp(1rem,4vw,2.5rem));
  margin-right:calc(-1 * clamp(1rem,4vw,2.5rem));
  padding-left:calc(2 * clamp(1rem,4vw,2.5rem));
  padding-right:calc(2 * clamp(1rem,4vw,2.5rem))}

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