/* =====================================================================
   Barbie Skincare × Concept by E · Landing v6 «Mix foto»
   Simplicidad de la v1 + carrusel de siluetas de la v2 + la foto
   desenfocada de la v4 como fondo fijo, con paneles de vidrio.
   ===================================================================== */
@import url("styles-v5.css");

:root {
  --sky: #8FC6F3;
  --glass: rgba(255, 255, 255, .74);
  --glass-strong: rgba(255, 255, 255, .88);
  --glass-line: rgba(255, 255, 255, .8);
  --glass-shadow: 0 30px 80px -30px rgba(20, 60, 110, .45);
}
body.v6 { background: var(--sky); }

/* fondo fijo (foto de la v4) */
.bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: var(--sky) url("assets/fondo.jpg") 0% 55% / 165% auto no-repeat;
}
.bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(255,255,255,.25)); }
@media (max-width: 960px) { .bg { background-image: url("assets/fondo-movil.jpg"); background-size: cover; background-position: center 70%; } }
.v6 main, .v6 .site-header, .v6 .site-footer, .v6 .stripes { position: relative; z-index: 1; }

.glass { background: var(--glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--glass-line); border-radius: 22px; box-shadow: var(--glass-shadow); }

/* header y footer de vidrio */
.v6 .site-header { background: rgba(255,255,255,.55); border-bottom: 1px solid var(--glass-line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.v6 .site-footer { background: rgba(255,255,255,.6); color: var(--ink); border-top: 1px solid var(--glass-line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.v6 .site-footer__links a { color: var(--ink); }
.v6 .site-footer__legal { color: var(--ink-60); }
.v6 .site-footer__legal a { color: var(--pink-hot); }
.v6 .site-footer__copy { color: var(--ink-60); }

/* hero: sin franjas, texto sobre el cielo (panel de vidrio en móvil) */
.v6 .hero5 { background: none; }
.v6 .hero5::after { display: none; }
.v6 .hero5 .wrap { padding-block: clamp(40px, 6vw, 88px); }
.hero6__panel { max-width: 640px; }

/* carrusel sobre la foto */
.v6 .muse__ring { box-shadow: inset 0 0 0 12px rgba(255,255,255,.55), var(--glass-shadow); }
.v6 .muse__orbit { border-color: rgba(255,255,255,.85); }
.v6 .muse__orbit::after { background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.4); }
.v6 .muse__dots button { border-color: rgba(255,255,255,.9); background: rgba(255,255,255,.55); backdrop-filter: blur(8px); }
.v6 .muse__dots button img { filter: none; opacity: .85; }
.v6 .muse__dots button.is-active { background: var(--pink-hot); border-color: var(--pink-hot); }
.v6 .muse__dots button.is-active img { filter: brightness(0) invert(1); opacity: 1; }

/* formulario: paneles de vidrio */
.v6 .signup5 { background: none; }
.v6 .signup5__aside { padding: clamp(22px, 3vw, 36px); }
.v6 .perk5 { background: rgba(255,255,255,.7); border-color: var(--glass-line); }
.v6 .card { background: var(--glass-strong); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); }
.v6 .input, .v6 .select { background: rgba(255,255,255,.85); }

/* gracias */
.v6 .join { background: none; }
.v6 .join__card { background: var(--glass-strong); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); }

@media (max-width: 960px) {
  .hero6__panel { background: var(--glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--glass-line); border-radius: 22px; padding: 26px 22px; box-shadow: var(--glass-shadow); margin-bottom: 8px; }
}

/* ===== v6 · estructura definida por el cliente (12 sep) ===== */
.hero7 .wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center;
  padding-block: clamp(40px, 6vw, 84px);
}
.hero7__copy { max-width: 560px; }
.hero7 .eyebrow { color: var(--ink); animation: rise .8s var(--ease5) both; }
.hero7 .eyebrow::before { background: var(--ink); }
.hero7 h1 {
  font-family: var(--f-head); text-transform: uppercase; font-weight: 400;
  font-size: clamp(54px, 7.2vw, 104px); line-height: .9; margin: 0 0 22px; color: var(--ink); text-wrap: balance;
}
.hero7 h1 .w { display: inline-block; opacity: 0; transform: translateY(.6em) rotate(2deg); animation: wordIn .7s var(--ease5) forwards; }
/* Alkaline: la «p» de «por» baja y se abre a la izquierda más que su caja tipográfica.
   Se le da aire por abajo (sin margen negativo) y a la izquierda para que nada la recorte ni la tape. */
.hero7 h1 .accent { display: block; text-transform: lowercase; color: var(--pink-hot); font-size: .8em; line-height: 1.15; margin-top: 8px; padding: .04em .2em .2em; margin-inline: -.2em; margin-bottom: 0; }
.hero7 h1 { margin-bottom: 10px; }
.v6 .hero5 { overflow: visible; }
.v6 .thanks5__sub { padding: .04em .2em .2em; margin-inline: -.2em; margin-bottom: 0; }
.hero7__sub { font-size: clamp(17px, 1.8vw, 20px); color: var(--ink); max-width: 44ch; margin: 0 0 26px; animation: rise .9s .5s var(--ease5) both; }
.hero7__cta { animation: rise .9s .65s var(--ease5) both; }
.hero7__note { margin: 16px 0 0; font-size: 14px; color: var(--ink); line-height: 1.5; animation: rise .9s .8s var(--ease5) both; }
.v6 .card__title { font-size: 38px; }

.universe .wrap {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center;
  padding-block: clamp(40px, 6vw, 90px);
}
.universe__muse .muse { max-width: 440px; }
.universe__info { padding: clamp(26px, 3.5vw, 48px); }
.universe__info h2 { font-family: var(--f-head); text-transform: uppercase; font-weight: 400; font-size: clamp(38px, 4.6vw, 64px); line-height: .92; margin: 0 0 16px; }
.universe__info h2 .accent { display: block; text-transform: lowercase; color: var(--pink-hot); font-size: .78em; }
.universe__lead { color: var(--ink); margin: 0 0 22px; max-width: 46ch; }
.universe__list { list-style: none; margin: 0; padding: 0; display: grid; }
.universe__list li { padding: 16px 0; border-top: 1px solid rgba(29,29,27,.12); }
.universe__list h3 { font-family: var(--f-head); text-transform: uppercase; font-weight: 400; font-size: 26px; line-height: 1; margin: 0 0 6px; }
.universe__list p { margin: 0; font-size: 15px; color: var(--ink-60); max-width: 52ch; }

/* La órbita del carrusel gira (cuadrado rotado): su caja puede salirse del
   viewport en móvil y crear scroll horizontal → se recorta a nivel de sección. */
.v6 .universe, .v6 .thanks5 { overflow-x: clip; }
html:has(body.v6) { overflow-x: clip; }
body.v6 { overflow-x: clip; }
.v6 .thanks5 h1, .hero7 h1, .universe__info h2 { overflow-wrap: anywhere; }

@media (max-width: 960px) {
  .hero7 .wrap { grid-template-columns: 1fr; gap: 24px; padding-block: 28px 40px; }
  .hero7__copy { background: var(--glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--glass-line); border-radius: 22px; padding: 26px 22px; box-shadow: var(--glass-shadow); max-width: none; }
  .hero7 h1 { font-size: clamp(50px, 9vw, 84px); }
  .hero7__sub { max-width: none; }
  .universe .wrap { grid-template-columns: 1fr; gap: 28px; padding-block: 24px 48px; }
  .universe__muse .muse { max-width: 320px; }
  .universe__info { padding: 26px 22px; }
  .v6 .card__title { font-size: 34px; }
}
@media (max-width: 560px) {
  .hero7 .wrap { padding-block: 20px 32px; }
  .hero7__copy { padding: 22px 18px; }
  .hero7 .eyebrow { font-size: 11px; letter-spacing: .14em; margin-bottom: 14px; }
  .hero7 .eyebrow::before { width: 18px; }
  .hero7 h1 { font-size: clamp(44px, 12.5vw, 60px); margin-bottom: 8px; }
  .hero7 h1 .accent { margin-top: 4px; }
  .hero7__sub { font-size: 16px; margin-bottom: 20px; }
  .hero7__cta { width: 100%; }
  .hero7__note { font-size: 13px; margin-top: 12px; }
  .v6 .thanks5 h1 { font-size: clamp(40px, 11.5vw, 56px); }
  .v6 .thanks5__sub { font-size: clamp(26px, 7.5vw, 34px); }
  .v6 .card { padding: 22px 18px; }
  .v6 .card__title { font-size: 30px; }
  .universe .wrap { padding-block: 16px 40px; }
  .universe__muse .muse { max-width: 260px; }
  .v6 .muse__dots { margin-top: 24px; }
  .universe__info { padding: 22px 18px; }
  .universe__info h2 { font-size: clamp(34px, 10.5vw, 44px); }
  .universe__list li { padding: 13px 0; }
  .universe__list h3 { font-size: 22px; }
  .universe__list p { font-size: 14px; }
}

/* Brand Comply (6 oct): «Skincare» en sans serif y logo rosa oscuro; en el titular, la línea logo + SKINCARE va al tamaño del titular */
.universe__info h2 .accent { font-size: 1em; margin-top: .06em; }