/* ==========================================================================
   Vijoli · Portada (estructura, medidas y movimiento de la referencia)
   ========================================================================== */

/* Portada con video ------------------------------------------------------ */
.portada {
  position: relative; height: 145svh; min-height: 720px; color: #fff; overflow: hidden;
  isolation: isolate; background: var(--tinta);
}
.portada__fondo { position: absolute; inset: 0; z-index: -1; }
.portada__video {
  width: 100%; height: 100%; object-fit: cover;
  /* entrada: aparece y se acerca de 1.08 a 1 en 0.8 s */
  opacity: 0.001; transform: scale(1.08);
  transition: opacity var(--lento) var(--curva), transform var(--lento) var(--curva);
}
.portada__velo {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(12,16,19,.55) 0%, rgba(12,16,19,.18) 22%, rgba(12,16,19,.28) 48%, rgba(12,16,19,.62) 100%);
}
.portada__contenido {
  position: absolute; left: 0; right: 0; top: 50svh; transform: translateY(-12%);
  display: grid; justify-items: center; text-align: center; gap: 18px;
  padding-inline: var(--borde-lateral);
}
.portada__frase { font-size: clamp(22px, 2.7vw, 34px); font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.portada__logo { width: min(64vw, 520px); color: #fff; margin: 4px 0 6px; }
.portada__logo svg { width: 100%; height: auto; filter: drop-shadow(0 8px 30px rgba(0,0,0,.25)); }
.portada__texto { max-width: 46ch; margin: 0 auto 26px; font-size: clamp(15px, 1.35vw, 18px); line-height: 1.7; color: rgba(255,255,255,.92); }
.portada__botones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Coreografía de entrada (tiempos exactos de la referencia) */
[data-entrada] { opacity: 0.001; transition: opacity var(--medio) var(--curva), transform var(--medio) var(--curva); }
[data-entrada="1"] { transform: translateY(24px); transition-delay: .25s; }
[data-entrada="2"] { transform: scale(.94); transition-duration: var(--lento); transition-delay: .35s; }
[data-entrada="3"] { transform: translateY(24px); transition-delay: .4s; }
.cargada .portada__video, .cargada [data-entrada] { opacity: 1; transform: none; }

@media (max-width: 809px) {
  .portada { height: 100svh; min-height: 600px; }
  .portada__contenido { top: auto; bottom: 9svh; transform: none; }
  .portada__logo { width: min(70vw, 300px); }
  .portada__botones .boton { flex: 1 1 100%; }
}

/* Marquesina final un poco más alta */
.marquesina--final { padding-block: clamp(56px, 9vw, 110px); }

/* Dos caminos (equivale a Mujer / Hombre de la referencia) ---------------- */
.dos-caminos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.camino { position: relative; height: clamp(380px, 37vw, 560px); overflow: hidden; color: #fff; display: block; }
.camino img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--curva); }
.camino:hover img { transform: scale(1.05); }
.camino::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 100%); }
.camino__texto { position: absolute; left: 0; right: 0; bottom: clamp(32px, 4.5vw, 52px); z-index: 1; text-align: center; padding-inline: 24px; }
.camino__titulo { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 3.3vw, 42px); line-height: 1.1; letter-spacing: -0.025em; }
.camino__texto p { max-width: 34ch; margin: 8px auto 0; font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,.9); }
.camino--mocasin img { object-position: 50% 58%; }
@media (max-width: 640px) { .dos-caminos { grid-template-columns: 1fr; } }

/* Frase grande con palabras en cursiva subrayadas ------------------------- */
.frase { padding: clamp(72px, 9vw, 120px) var(--borde-lateral); text-align: center; }
.frase__enlace { display: block; max-width: 1180px; margin: 0 auto; }
.frase__texto {
  font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 9vw, 116px);
  line-height: 1.1; letter-spacing: -0.025em;
}
.frase__texto em {
  font-style: italic; text-decoration: underline; text-decoration-color: var(--rosa);
  text-decoration-thickness: 2px; text-underline-offset: .12em;
}

/* Editorial a todo lo ancho ---------------------------------------------- */
.editorial { position: relative; height: clamp(520px, 50vw, 680px); overflow: hidden; color: #fff; display: flex; align-items: flex-end; }
.editorial__fondo { position: absolute; inset: -12% 0; }
.editorial__fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.editorial__velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,16,19,0) 25%, rgba(12,16,19,.7) 100%); }
.editorial__contenido { position: relative; padding-bottom: clamp(36px, 5vw, 56px); padding-inline: clamp(24px, 6.9vw, 88px); }
.etiqueta--rosa-claro { color: var(--rosa); letter-spacing: .2em; font-weight: 500; }
.editorial__titulo { font-family: var(--serif); font-weight: 400; font-size: clamp(52px, 7.5vw, 96px); line-height: .98; letter-spacing: -0.03em; margin: 16px 0 14px; }
.editorial__texto { max-width: 42ch; color: rgba(255,255,255,.88); }
.editorial__enlace { display: inline-block; margin-top: 18px; font-size: 13px; }
.editorial__linea { border: 0; height: 1px; background: rgba(255,255,255,.35); margin: 28px 0 0; }
/* Editorial claro: la foto de la mano completa sobre su propio fondo, texto oscuro al costado */
.editorial--clara { background: #FCFFFE; color: var(--texto); align-items: center; }
.editorial--clara .editorial__fondo {
  left: auto; right: 0; width: auto; max-width: 62%; aspect-ratio: 1400 / 1637;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%); mask-image: linear-gradient(90deg, transparent 0, #000 16%);
}
.editorial--clara .editorial__fondo img { object-fit: cover; object-position: right center; }
.editorial--clara .editorial__velo { display: none; }
.editorial--clara .editorial__contenido { padding-bottom: 0; margin: 0; width: min(46%, 620px); max-width: none; }
.editorial--clara .editorial__texto { color: var(--texto-2); }
.editorial--clara .editorial__linea { background: var(--borde); }
@media (max-width: 809px) {
  .editorial--clara { height: auto; flex-direction: column; align-items: stretch; padding-bottom: 56px; }
  .editorial--clara .editorial__fondo { position: relative; inset: auto; width: 100%; max-width: none; aspect-ratio: auto; height: 112vw; max-height: 620px; transform: none !important; -webkit-mask-image: none; mask-image: none; }
  .editorial--clara .editorial__fondo img { object-fit: cover; object-position: 60% 40%; }
  .editorial--clara .editorial__contenido { padding-top: 28px; width: auto; }
}

/* Paneles que se apilan al bajar ---------------------------------------- */
.paneles { position: relative; }
.panel {
  position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden;
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: center;
  --cubierto: 0;
}
.panel--1 { background: #F4ECE8; }
.panel--2 { background: #EDE4DA; }
.panel--3 { background: var(--tinta); color: #fff; }
.panel__contenido {
  padding-left: clamp(24px, 5.6vw, 72px); padding-right: 24px; max-width: 640px;
  opacity: calc(1 - var(--cubierto) * .75); transform: scale(calc(1 - var(--cubierto) * .05)) translateY(calc(var(--cubierto) * -30px));
  transform-origin: left center; will-change: transform, opacity;
}
.panel__numero { opacity: .72; letter-spacing: .16em; }
.panel__titulo { font-family: var(--serif); font-weight: 400; font-size: clamp(48px, 6.8vw, 92px); line-height: 1; letter-spacing: -0.03em; margin: 22px 0 18px; }
.panel__texto { max-width: 40ch; margin-bottom: 30px; font-size: 16px; opacity: .85; }
.panel__figura { position: relative; height: 100%; margin: 0; display: grid; place-items: center; overflow: hidden;
  transform: scale(calc(1 - var(--cubierto) * .06)); }
.panel__figura img { max-width: 86%; max-height: 78%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0,0,0,.18)); }
.panel__figura--foto img { max-width: none; max-height: none; width: 100%; height: 100%; object-fit: cover; filter: none; }
.panel::after { content: ""; position: absolute; inset: 0; background: #000; opacity: calc(var(--cubierto) * .25); pointer-events: none; }
@media (max-width: 809px) {
  .panel { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: start; padding-top: calc(var(--alto-encabezado) + 32px); }
  .panel__figura { height: auto; min-height: 0; }
  .panel__figura img { max-height: 40svh; }
  .panel__titulo { margin: 14px 0 12px; }
  .panel__texto { margin-bottom: 20px; font-size: 15px; }
}

/* Nosotras: titular con fotos que se mueven a distinta velocidad ---------- */
.nosotras { padding-block: clamp(80px, 10vw, 140px); overflow: hidden; }
.nosotras__rejilla { position: relative; display: grid; grid-template-columns: 1fr 1fr 0.8fr; gap: 36px; align-items: center; min-height: 640px; }
.nosotras__titulo { font-family: var(--serif); font-weight: 400; font-size: clamp(42px, 5vw, 64px); line-height: 1.05; letter-spacing: -0.01em; color: #2C2C2C; margin-bottom: 24px; }
.nosotras__texto { position: relative; z-index: 2; }
.nosotras__texto > p { max-width: 42ch; color: var(--texto-2); }
.nosotras__datos { display: grid; gap: 0; margin-top: 32px; border-top: 1px solid var(--borde); max-width: 440px; }
.nosotras__datos li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--borde); }
.nosotras__datos strong { font-weight: 600; }
.nosotras__datos span { color: var(--texto-2); }
.nosotras__foto { margin: 0; overflow: hidden; will-change: transform; }
.nosotras__foto img { width: 100%; height: 100%; object-fit: cover; }
.nosotras__foto--a { aspect-ratio: 3 / 4; }
.nosotras__foto--b { aspect-ratio: 4 / 5; align-self: start; background: var(--fondo-2); display: grid; place-items: center; }
.nosotras__foto--b img { object-fit: contain; padding: 10%; }
@media (max-width: 1023px) {
  .nosotras__rejilla { grid-template-columns: 1fr 1fr; }
  .nosotras__texto { grid-column: 1 / -1; }
}

/* ---------------------------------------------- Inspiración (Pinterest) */
.inspira-cta { padding-block: clamp(64px, 8vw, 112px); background: var(--fondo-2); }
.inspira-cta__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.inspira-cta__titulo { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 4.4vw, 58px); line-height: 1.05; letter-spacing: -0.01em; color: #2C2C2C; margin-bottom: 20px; }
.inspira-cta__texto > p { max-width: 44ch; color: var(--texto-2); margin-bottom: 28px; }
.inspira-cta__visual { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(12px, 2vw, 24px); }
.inspira-cta__foto { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--fondo); display: grid; place-items: end start; }
.inspira-cta__foto span { position: relative; z-index: 1; margin: 12px; padding: 6px 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; background: rgba(255, 255, 255, 0.92); color: var(--texto); }
.inspira-cta__foto--tuya { border: 1.5px dashed #C9C4C1; background:
  linear-gradient(135deg, transparent 0 46%, rgba(236, 162, 159, 0.22) 46% 54%, transparent 54% 100%), var(--fondo); transform: rotate(-3deg); }
.inspira-cta__foto--tuya::before { content: ""; position: absolute; inset: 28% 30%; border-radius: 50%; border: 1.5px solid #D9D3CF;
  background: radial-gradient(circle at 50% 40%, #EFE9E6 0 30%, transparent 31%); }
.inspira-cta__foto--vjoli { box-shadow: var(--sombra); transform: rotate(2deg); }
.inspira-cta__foto--vjoli img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.inspira-cta__flecha { width: 40px; height: 40px; border-radius: 50%; background: var(--negro); color: #fff; display: grid; place-items: center; }
.inspira-cta__flecha svg { width: 16px; height: 16px; }
.nosotras__lema { margin-top: 18px; font-family: var(--serif); font-style: italic; font-size: clamp(24px, 2.4vw, 30px); color: var(--rosa-texto) !important; }
.nosotras__texto > p + p { margin-top: 14px; }
@media (max-width: 809px) {
  .inspira-cta__rejilla { grid-template-columns: 1fr; }
  .inspira-cta__visual { max-width: 420px; }
}