/* =============================================================================
   LA PORTADA — la primera pantalla y nada más

   Omar, 14-09-2026: «nada más entrar tiene que haber un vídeo guapo y un
   ecommerce clásico, y un acceso a descubrir la marca que abra la web
   interactiva con gsap y scrollytelling. Y si no le das y sigues haciendo
   scroll entras directamente al ecommerce». Referencia: Solférino Paris.

   Esta hoja es SOLO la primera pantalla. Lo de debajo —el índice, los filtros,
   las fichas— ya está en tienda.css y no se toca desde aquí: la portada monta
   la misma tienda que servía /coleccion, no una versión especial.

   Va en su propio fichero y no dentro de tienda.css porque lo carga UNA
   página. tienda.css pesa 110 KB y lo bajan las trece.
   ========================================================================== */

/* ---------- el escenario ----------------------------------------------------
   100svh y no 100vh: en el móvil, `vh` cuenta la barra del navegador que se
   esconde al bajar, así que la primera pantalla sobresalía justo lo que mide
   esa barra y el botón de «Descubrir» caía por debajo del borde. */
.portal {
  position: relative; isolation: isolate;
  min-height: 100svh;
  display: grid; grid-template-rows: 1fr auto;
  padding: calc(6rem + 3vw) var(--margen) 2.5rem;
  overflow: hidden;
  background: var(--papel);
}

.portal__pelicula { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* La cinta: el hueco del vídeo. Vacío mientras no haya vídeo — y vacío no
   ocupa ni pesa. Lo rellena portada.js solo si MARCA.video apunta a un
   fichero de verdad. */
.portal__cinta { position: absolute; inset: 0; z-index: 0; }
.portal__cinta video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transition: opacity 1.2s var(--curva);
}
.portal__cinta video.es-visto { opacity: 1; }

/* La luz: una lámpara cálida fuera de cuadro que respira. Es lo que hace que
   el negro no sea un fondo apagado sino un plató. Sin fotografía que poner
   —los packshots de la casa están sobre blanco y no valen a sangre—, esto es
   lo que sostiene la pantalla hasta que exista el vídeo. */
.portal__luz {
  position: absolute; inset: -20%; z-index: 1;
  background:
    radial-gradient(ellipse 42% 46% at 62% 44%, rgba(226, 200, 152, 0.17), transparent 68%),
    radial-gradient(ellipse 70% 60% at 18% 88%, rgba(168, 129, 77, 0.10), transparent 70%);
  animation: portal-respira 11s ease-in-out infinite alternate;
}
@keyframes portal-respira {
  from { transform: scale(1) translate3d(0, 0, 0); opacity: 0.86; }
  to   { transform: scale(1.09) translate3d(-1.5%, -1%, 0); opacity: 1; }
}

/* Dos planos de motas a distinta profundidad, como en el recorrido: el de
   detrás casi quieto, el de delante grande y desenfocado. Lo que da
   profundidad no son las sombras, es que haya cosas a distintas distancias. */
.portal__aire { position: absolute; inset: 0; }
.portal__aire .polvo { width: 100%; height: 100%; display: block; }
.portal__aire--lejos { z-index: 1; opacity: 0.8; }
.portal__aire--cerca { z-index: 3; filter: blur(3.5px); opacity: 0.8; }

/* El velo baja la luz por abajo y por la izquierda, que es donde va el texto. */
.portal__velo {
  position: absolute; inset: 0; z-index: 4;
  background:
    linear-gradient(180deg, rgba(13,11,9,0.55) 0%, rgba(13,11,9,0.12) 34%, rgba(13,11,9,0.86) 100%),
    linear-gradient(96deg, rgba(13,11,9,0.72) 0%, rgba(13,11,9,0.10) 52%, transparent 100%);
}

/* ---------- lo que se lee --------------------------------------------------- */
.portal__centro {
  position: relative; z-index: 5;
  align-self: center;
  max-width: 44rem;
}

.portal__firma { width: min(21rem, 62vw); margin-bottom: clamp(1.2rem, 3vw, 2rem); }
.portal__firma .firma { filter: drop-shadow(0 2px 30px rgba(0, 0, 0, 0.55)); }

/* El nombre escrito va debajo de la firma y pequeño: la firma YA dice el
   nombre, y repetirlo grande sería decirlo dos veces. Existe porque un
   buscador y un lector de pantalla no leen un SVG enmascarado. */
.portal__casa {
  margin: 0; font-family: var(--sans); font-weight: 400;
  font-size: 0.78rem; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--tinta-tenue);
}
.portal__casa .logo-casa { font-size: clamp(1.7rem, 3.2vw, 2.6rem); letter-spacing: 0.04em; color: var(--tinta); }
.portal__oficio {
  margin: 0.45rem 0 0; font-family: var(--serif); font-style: italic;
  font-size: clamp(1.4rem, 3.4vw, 2.1rem); line-height: 1.2; color: var(--tinta);
}
.portal__linea {
  margin: clamp(1rem, 2.4vw, 1.6rem) 0 0; max-width: 31rem;
  font-size: clamp(1rem, 1.5vw, 1.12rem); line-height: 1.62; color: var(--tinta-suave);
}

.portal__acciones {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem 1.6rem;
  margin-top: clamp(1.6rem, 3.4vw, 2.6rem);
}
.portal__cta { min-height: 52px; display: inline-flex; align-items: center; }
/* «o baja a la tienda» es un enlace y no un segundo botón: dos botones del
   mismo tamaño no son una jerarquía, son una duda. Y bajar, además, se hace
   solo — este enlace es para quien prefiere que se lo digan. */
.portal__ir { font-size: 0.86rem; }

/* ---------- el aviso de que hay tienda debajo -------------------------------
   En el móvil esta rayita es LO ÚNICO que dice que la página sigue: el menú no
   nombra la tienda de esta página, y la brújula no se pinta sobre el portal.
   Por eso lleva la palabra escrita al lado y no solo una flecha, y por eso es
   un enlace de verdad: se puede pulsar, no solo mirar. */
.portal__baja {
  position: relative; z-index: 5; justify-self: start;
  display: inline-flex; align-items: center; gap: 0.8rem; min-height: 44px;
  font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--tinta-tenue);
  transition: color 0.45s var(--curva);
}
.portal__baja:hover { color: var(--tinta); }
.portal__baja i {
  display: block; width: 1px; height: 2.6rem;
  background: linear-gradient(180deg, var(--oro), transparent);
  animation: portal-baja 2.6s var(--curva) infinite;
  transform-origin: top;
}
@keyframes portal-baja {
  0%, 100% { transform: scaleY(0.35); opacity: 0.45; }
  45%      { transform: scaleY(1);    opacity: 1; }
}

/* ---------- la costura con la tienda ----------------------------------------
   La cabecera de la tienda no empieza pegada al portal: un respiro dice «esto
   es otra cosa». Y `scroll-margin-top` deja sitio a la cabecera fija cuando se
   llega por el enlace de bajar o por #tienda desde fuera. */
.portada .cabecera-pagina--tienda {
  padding-top: clamp(3.5rem, 8vw, 6.5rem);
  scroll-margin-top: 4.5rem;
}

@media (max-width: 720px) {
  .portal { padding-top: calc(5rem + 3vw); }
  .portal__firma { width: min(17rem, 70vw); }
}

/* Con «reducir movimiento» no respira nada y la rayita se queda quieta: sigue
   diciendo que hay más abajo, sin moverse. */
@media (prefers-reduced-motion: reduce) {
  .portal__luz { animation: none; }
  .portal__baja i { animation: none; opacity: 0.8; transform: scaleY(1); }
}

/* ---------- el carril fijo, apartado en la primera pantalla ------------------
   Por qué, escrito en portada.js. Con un panel abierto no se aparta nada: sería
   cerrarle la conversación en la cara a quien la ha abierto. */
.portada.portal-a-la-vista:not(.sugerir-abierto):not(.asistente-abierto) .carril-flotante,
.portada.portal-a-la-vista:not(.sugerir-abierto):not(.asistente-abierto) .carril-flotante > * {
  opacity: 0; pointer-events: none;
}

/* ---------- la vitrina (01-10-2026) -----------------------------------------
   Omar: «en la portada hay mucho aire, hay que poner algo ahí». La mitad
   derecha: un corde grande, recortado, sobre su propio halo del color del
   jugo, y debajo su nombre y su precio. Lo monta portada.js. Solo a partir de
   900 px; en el móvil la portada ya está llena. */
@keyframes vitrina-llega { from { opacity: 0; transform: translateY(2.5rem); } }

.vitrina__pieza {
  position: relative; display: block; width: 100%;
  height: min(58svh, 36rem);
  perspective: 1200px;
}
.vitrina__halo {
  position: absolute; left: 50%; top: 46%; width: 70%; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--jugo, #e2c898) 34%, transparent) 0%, transparent 66%);
  filter: blur(12px); opacity: 0.9;
  transition: background 1.2s ease;
  animation: vitrina-respira 6s ease-in-out infinite alternate;
}
@keyframes vitrina-respira { to { transform: translate(-50%, -50%) scale(1.12); opacity: 0.65; } }
.vitrina__foto {
  position: absolute; left: 0; right: 0; bottom: 6%; margin: auto;
  height: 88%; width: auto; max-width: 100%; object-fit: contain;
  opacity: 0; transform: translateY(1.2rem) scale(0.96) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: opacity 1.1s ease, transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.6));
  will-change: transform, opacity;
}
.vitrina__foto.es-actual { opacity: 1; transform: translateY(0) scale(1) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.vitrina__pieza:hover .vitrina__foto.es-actual { transform: translateY(-0.6rem) scale(1.03) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.vitrina__suelo {
  position: absolute; left: 22%; right: 22%; bottom: 4%; height: 3%;
  border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, 0.75), transparent 70%);
}

.vitrina__pie { display: grid; justify-items: center; gap: 0.35rem; margin-top: 0.4rem; text-align: center; }
.vitrina__num { font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.3em; color: var(--oro); }
.vitrina__nombre { font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.1; color: var(--tinta); }
.vitrina--cambia .vitrina__nombre, .vitrina--cambia .vitrina__num {
  animation: vitrina-texto 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes vitrina-texto { from { opacity: 0; transform: translateY(0.6rem); } }
.vitrina__barra { display: block; width: 7rem; height: 1px; margin-top: 0.9rem; background: rgba(244, 239, 231, 0.14); overflow: hidden; }
.vitrina__barra i { display: block; height: 100%; background: var(--oro); transform-origin: left; }
.vitrina--cambia .vitrina__barra i { animation: vitrina-barra 4.8s linear both; }
.vitrina--parada .vitrina__barra i { animation-play-state: paused; }
@keyframes vitrina-barra { from { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
  .portal__vitrina:not([hidden]) { animation: none; }
  .vitrina__halo, .vitrina--cambia * { animation: none !important; }
  .vitrina__barra { display: none; }
}

/* El pie, sin explicar el corde (02-10-2026): su nombre y, discreto, «Ver todos». */
.vitrina__nombre { border-bottom: 1px solid transparent; transition: border-color 0.4s ease; }
.vitrina__nombre:hover { border-bottom-color: var(--oro); }
.vitrina__todos {
  margin-top: 0.7rem; font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--tinta-tenue, rgba(244, 239, 231, 0.55)); transition: color 0.3s ease;
}
.vitrina__todos::after { content: ' →'; letter-spacing: 0; }
.vitrina__todos:hover { color: var(--tinta); }

/* ---------- la composición de 02-10-2026 ------------------------------------
   Omar: «esa portada es una mierda, la composición no me gusta». Referencia
   suya (Drive, uiuxforfun_25 · Pantex Motors): titular enorme a todo el ancho
   con el producto entre las palabras, tarjeta pequeña abajo a la izquierda y
   tres puntitos a la derecha. Tres filas: firma y logo · el titular con el
   vial encima · el pie (tarjeta de la tienda, «Baja», «Descubrir la marca»). */
.portal {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
  padding: calc(5.2rem + 1vw) var(--margen) 1.6rem; text-align: left;
}
.portal__centro { position: relative; z-index: 6; display: flex; align-items: center; gap: 1.2rem; max-width: none; align-self: start; }
.portal__firma { width: clamp(6.5rem, 10vw, 10rem); margin: 0; }
.portal__casa { margin: 0; padding-left: 1.2rem; border-left: 1px solid rgba(244, 239, 231, 0.2); }
.portal__casa .logo-casa { font-size: clamp(1rem, 1.6vw, 1.35rem); letter-spacing: 0.12em; }

/* El titular: tres palabras a distintas alturas y lados, como en la referencia. */
.portal__titular {
  position: relative; z-index: 4; align-self: center; margin: 0; display: grid;
  font-family: var(--serif); font-weight: 400; line-height: 0.86; letter-spacing: -0.02em;
  font-size: clamp(4.2rem, 13.5vw, 14rem); color: var(--tinta);
}
.portal__palabra { display: block; }
.portal__palabra--1 { justify-self: start; padding-left: 4%; }
.portal__palabra--2 { justify-self: end; padding-right: 20%; font-style: italic; color: rgba(244, 239, 231, 0.5); }
.portal__palabra--3 { justify-self: end; }

/* La vitrina, por encima del titular y en su centro; su pie, a la derecha. */
.portal__vitrina:not([hidden]) { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.portal__vitrina .vitrina__pieza {
  position: absolute; left: 47%; top: 52%; transform: translate(-50%, -50%);
  width: min(26rem, 40vw); height: min(64vh, 42rem); pointer-events: auto;
  animation: vitrina-llega 1.6s var(--lujo, cubic-bezier(0.22, 1, 0.36, 1)) 0.5s both;
}
.portal__vitrina .vitrina__pie {
  position: absolute; right: var(--margen); top: 50%; transform: translateY(-50%); margin: 0;
  display: grid; justify-items: end; gap: 0.7rem; text-align: right; pointer-events: auto;
}
.portal__vitrina .vitrina__nombre { font-size: clamp(1.1rem, 1.6vw, 1.5rem); }
.portal__vitrina .vitrina__barra { width: 4rem; margin-top: 0; }
.portal__vitrina .vitrina__todos { margin-top: 0; }
.portal__vitrina .puntos { flex-direction: column; padding: 0.7rem 0.45rem; border: 1px solid rgba(244, 239, 231, 0.18); border-radius: 999px; }

/* El pie: la tarjeta de la tienda, «Baja» y «Descubrir la marca». */
.portal__pie { position: relative; z-index: 6; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.portal__tarjeta {
  display: grid; width: clamp(11rem, 16vw, 15rem); border: 1px solid rgba(244, 239, 231, 0.22);
  background: rgba(13, 11, 9, 0.5); backdrop-filter: blur(6px); overflow: hidden;
  transition: border-color 0.4s ease, transform 0.5s var(--lujo, ease);
}
.portal__tarjeta:hover { border-color: var(--oro); transform: translateY(-3px); }
.portal__tarjeta img { width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; display: block; }
.portal__tarjeta-texto {
  display: flex; justify-content: space-between; align-items: center; padding: 0.7rem 0.8rem;
  font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tinta);
}
.portal__tarjeta-texto i { font-style: normal; color: var(--oro); }
.portal__pie .portal__baja { align-self: flex-end; }
.portal__cta { min-height: 52px; }

@media (max-width: 760px) {
  .portal { padding: 4.6rem var(--margen) 1rem; }
  .portal__centro { gap: 0.8rem; }
  .portal__firma { width: min(6rem, 26vw); }
  .portal__casa { padding-left: 0.8rem; }
  .portal__casa .logo-casa { font-size: 0.95rem; }
  /* En el móvil el texto va a la izquierda y el vial a la derecha, delante
     solo del final de «Parfums»: así no tapa ninguna palabra entera. */
  .portal__titular { font-size: clamp(3rem, 16.5vw, 5rem); line-height: 0.92; }
  .portal__palabra--1, .portal__palabra--2, .portal__palabra--3 { justify-self: start; padding: 0; }
  .portal__palabra--2 { padding-left: 14%; }
  .portal__vitrina .vitrina__pieza { left: 78%; top: 50%; width: 34vw; height: min(42svh, 19rem); }
  .portal__vitrina .vitrina__pie { left: 78%; right: auto; top: calc(50% + min(21svh, 9.5rem) + 0.6rem); transform: translateX(-50%); }
  .portal__vitrina .puntos { flex-direction: row; padding: 0; border: 0; }
  .portal__vitrina .vitrina__nombre, .portal__vitrina .vitrina__barra, .portal__vitrina .vitrina__todos { display: none; }
  .portal__pie { align-items: stretch; }
  .portal__tarjeta { width: 46%; }
  .portal__tarjeta img { aspect-ratio: 16 / 9; }
  .portal__tarjeta-texto { padding: 0.55rem 0.6rem; font-size: 0.62rem; }
  .portal__pie .portal__baja { display: none; }
  .portal__cta { align-self: flex-end; min-height: 46px; padding: 0.7rem 0.8rem; font-size: clamp(0.56rem, 2.9vw, 0.64rem); letter-spacing: 0.12em; white-space: nowrap; }
}