/* Murano Collection: negro azulado y luz fría, opuesto a Ámbar. */
.tema-murano {
  --acento: var(--murano);
  --acento-claro: var(--murano-claro);
  --otro: var(--ambar);
  --otro-claro: var(--ambar-claro);
  --aura: rgba(47, 159, 208, 0.16);
  --fondo: #04060a;
  --linea: rgba(226, 240, 246, 0.13);
}

.hero {
  position: sticky;
  top: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100svh;
  overflow: hidden;
  text-align: center;
}
.hero__fondo { position: absolute; inset: 0; }
.hero__fondo img {
  width: 100%;
  height: 112%;
  object-fit: cover;
  /* Lámina compuesta para el héroe: nace oscura y con la parte alta libre, así
     que no hay nada que domar. */
  filter: saturate(1.02) brightness(0.96);
  will-change: transform;
}
.hero__velo {
  position: absolute;
  inset: 0;
  /* La primera capa es una poza de sombra bajo el texto. Sin ella el titular
     cae justo sobre la zona más clara y revuelta de la fotografía, que es donde
     menos se lee. Sobre una imagen así no se percibe como una capa, sino como
     profundidad. */
  /* Apenas un asiento para el titular y el remate hacia el negro de la página:
     la lámina ya trae su propio negro. */
  background:
    linear-gradient(180deg, transparent 82%, rgba(4, 6, 10, 0.5) 96%, var(--fondo)),
    rgba(4, 6, 10, 0.12);
}

.hero__texto {
  position: relative;
  z-index: 2;
  padding: 0 1.4rem;
  /* Una sola sombra ancha y difusa. La segunda, corta y cerrada, dibujaba un
     contorno negro alrededor de la letra en vez de sostenerla. */
  text-shadow: 0 2px 44px rgba(4, 6, 10, 0.5);
}
.hero__titulo {
  margin: 0;
  font-weight: 300;
  font-size: clamp(4.6rem, 9.6vw, 9.2rem);
  line-height: 0.9;
  letter-spacing: -0.035em;
}
.hero__titulo em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  color: var(--murano-claro);
}
.hero__titulo .linea:last-child {
  display: block;
  margin-top: 0.7rem;
  font-size: clamp(0.82rem, 1.05vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 0.62em;
  text-transform: uppercase;
  opacity: 0.55;
}
.hero__titulo .linea, .hero__lema .linea { display: block; }
.hero__titulo .linea i, .hero__lema .linea i { display: block; font-style: inherit; }

.hero__lema {
  margin: clamp(1.6rem, 4vh, 2.6rem) 0 0;
  font-size: clamp(1.76rem, 2.5vw, 2.4rem);
  opacity: 0.86;
}

.materia {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding: clamp(5rem, 14vh, 10rem) clamp(1.4rem, 6vw, 7rem);
  text-align: center;
  overflow: hidden;
  background: var(--fondo);
}
.materia__fondo { position: absolute; inset: 0; }
.materia__video,
.materia__fondo img {
  width: 100%;
  height: 122%;
  object-fit: cover;
  will-change: transform;
}
.materia__sombra {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 58% at 50% 50%, transparent, rgba(4, 6, 10, 0.9)),
    linear-gradient(180deg, rgba(4, 6, 10, 0.55), transparent 40%, rgba(4, 6, 10, 0.8));
}

/* La medida la manda el titular, que es lo más grande: con 56ch —unos 450 px,
   porque `ch` se mide contra el cuerpo del contenedor y no del titular— la
   frase se partía en cuatro renglones y dejaba palabras sueltas. */
.materia__texto {
  position: relative;
  z-index: 2;
  max-width: min(90vw, 880px);
}
.materia__antetitulo { color: var(--murano-claro); opacity: 0.9; margin: 0 0 clamp(1.6rem, 4vh, 2.6rem); }
.materia__frase {
  margin: 0;
  text-wrap: balance;
  font-weight: 300;
  font-size: clamp(2.16rem, 4.1vw, 3.6rem);
  line-height: 1.28;
}
/* El remate va por debajo del titular en tamaño Y en ancho: un texto secundario
   más ancho que el título al que acompaña se lee como el principal. */
.materia__remate {
  margin: clamp(2rem, 5vh, 3.2rem) auto 0;
  max-width: 34rem;
  font-size: clamp(1.08rem, 1.25vw, 1.16rem);
  line-height: 1.7;
  opacity: 0.66;
}

.tonos {
  position: relative;
  padding: clamp(6rem, 16vh, 12rem) clamp(1.4rem, 6vw, 7rem);
  overflow: hidden;
  background: var(--fondo);
}
.tonos::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--tono-activo, #2f9fd0);
  opacity: 0;
  transition: background 1.2s var(--ease), opacity 1.2s var(--ease);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
.tonos.is-elegido::before { opacity: 0.16; }
.tonos__resplandor {
  position: absolute;
  left: 50%; top: 58%;
  width: min(120vw, 1100px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--tono-activo, #2f9fd0) 0%, transparent 62%);
  opacity: 0.1;
  transition: background 1.1s var(--ease), opacity 1.2s var(--ease);
  pointer-events: none;
}
.tonos.is-elegido .tonos__resplandor { opacity: 0.3; }
.tonos > *:not(.tonos__resplandor) { position: relative; z-index: 1; }

.tonos__encabezado { text-align: center; margin-bottom: clamp(3rem, 8vh, 5.5rem); }
.tonos__titulo {
  margin: 0;
  font-weight: 300;
  font-size: clamp(3.16rem, 6.6vw, 5.7rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.tonos__titulo em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  color: var(--murano-claro);
}

.tonos__escenario {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2.5rem, 6vh, 4rem);
}

.tonos__gotas {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(0.3rem, 1.4vw, 1.4rem);
}
.gota {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  position: relative;
  width: clamp(34px, 7vw, 88px);
  aspect-ratio: 274 / 788;
  filter: grayscale(0.5) brightness(0.66);
  transform: translateY(0) scale(0.94);
  transition: filter 0.75s var(--ease), transform 0.75s var(--ease);
}
.gota__pieza {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: opacity 0.55s var(--ease), transform 0.75s var(--ease);
  transform-origin: bottom center;
}
/* El <picture> lleva la medida y no la imagen: una altura en porcentaje contra
   un padre de altura automática se resuelve como `auto`, así que puesta sobre la
   imagen no hacía nada. */
.gota__pieza picture {
  display: block;
  width: 100%;
  height: 100%;
}
.gota__pieza img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}
.gota__una {
  opacity: 0;
  transform: scale(0.9);
}
/* La uña ocupa bastante menos que el frasco: es el resultado, no el producto,
   y a igual tamaño competía con él. */
/* La uña ocupa bastante menos que el frasco: es el resultado, no el producto,
   y a igual tamaño competía con él. */
.gota__una picture { height: 38%; align-self: center; }
.gota__una img { object-position: center; }

/* El estado elegido va aparte del hover, y el hover solo donde hay cursor: en
   iOS un elemento con reglas :hover se traga el primer toque sin disparar el
   clic, y entonces el JavaScript nunca corre. */
.gota.is-activa .gota__frasco { opacity: 0; transform: scale(1.05); }
.gota.is-activa .gota__una { opacity: 1; transform: scale(1); }

@media (hover: hover) {
  .gota:hover .gota__frasco { opacity: 0; transform: scale(1.05); }
  .gota:hover .gota__una { opacity: 1; transform: scale(1); }
  .gota:hover { filter: grayscale(0.1) brightness(0.94); transform: translateY(-8px) scale(0.98); }
}

.gota.is-activa {
  filter: none;
  transform: translateY(-16px) scale(1.08);
}
.gota:focus-visible { outline: 1px solid var(--acento-claro); outline-offset: 12px; }

.tonos__ficha { text-align: center; min-height: 7rem; }
.tonos__invita {
  opacity: 0.4;
  transition: opacity 0.5s var(--ease);
}
.tonos.is-elegido .tonos__invita { opacity: 0; }
.tonos__nombre {
  margin: 0;
  font-weight: 300;
  font-size: clamp(2.4rem, 4.6vw, 3.4rem);
  letter-spacing: 0.02em;
  color: var(--murano-claro);
}
.tonos__glosa {
  margin: 0.7rem 0 0;
  font-size: clamp(1.31rem, 1.6vw, 1.42rem);
  opacity: 0.62;
}

.tonos__cierre {
  margin: clamp(4.5rem, 11vh, 7.5rem) auto 0;
  text-align: center;
  white-space: nowrap;
  font-size: clamp(1.17rem, 3.5vw, 5.2rem);
  line-height: 1.24;
  opacity: 0.9;
  color: var(--murano-claro);
}

@media (max-width: 860px) {
  .tonos__gotas {
    gap: 0.45rem;
    flex-wrap: wrap;
    row-gap: clamp(0.9rem, 2.6vh, 1.8rem);
  }
  .gota { width: min(14vw, 76px); }
}

.origen {
  position: relative;
  height: 280vh;
  padding: 0;
  display: block;
}
.origen__escena {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}
.origen__medio {
  position: absolute;
  inset: 0;
}
.origen__medio--nitido { opacity: 0.32; }

.origen__avance {
  position: absolute;
  left: clamp(1.4rem, 6vw, 7rem);
  right: clamp(1.4rem, 6vw, 7rem);
  bottom: clamp(1.6rem, 4vh, 2.6rem);
  height: 1px;
  background: rgba(244, 241, 236, 0.14);
  overflow: hidden;
}
.origen__avance i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--murano-claro);
  transform: scaleX(0);
  transform-origin: left;
}
.origen__medio img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 38% 46%;
  will-change: transform;
}
.origen__velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(6, 5, 5, 0.5) 0%,
      transparent 26%,
      rgba(6, 5, 5, 0.42) 52%,
      rgba(6, 5, 5, 0.86) 76%,
      rgba(6, 5, 5, 0.97) 100%);
}
.origen__texto {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(3rem, 10vh, 7rem);
  padding: 0 clamp(1.4rem, 6vw, 7rem);
  max-width: 60rem;
}
.origen__paso { opacity: 0; }
.origen .antetitulo {
  margin-bottom: clamp(1rem, 2.4vh, 1.6rem);
  color: var(--murano-claro);
  opacity: 1;
}

@media (max-width: 860px) {
  /* El titular va centrado y solo ocupa su renglón más largo, así que en vertical
     el remate lleva una medida propia: un texto secundario más ancho que el
     titular se lee como el principal. */
  .materia__remate {
    max-width: 18rem;
    font-size: 1.02rem;
    opacity: 0.6;
  }

  .origen { height: 240vh; }
  .origen__texto { bottom: clamp(2rem, 7vh, 4rem); }
  /* La lámina vertical ya trae libre su tercio inferior, así que el velo solo
     tiene que rematar el fondo, no rescatar el texto. */
  .origen__velo {
    background:
      linear-gradient(180deg,
        rgba(6, 5, 5, 0.5) 0%,
        transparent 24%,
        rgba(6, 5, 5, 0.34) 52%,
        rgba(6, 5, 5, 0.8) 78%,
        rgba(6, 5, 5, 0.97) 100%);
  }
}

.origen,
.tonos,
.atributos,
.cita,
.pilares,
.plataforma,
.impactos,
.cierre {
  position: relative;
  z-index: 2;
  background: var(--fondo);
}

.atributos {
  align-items: center;
  background: var(--fondo);
}
.atributos::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--rasgo-color, #8fd4ea);
  opacity: 0.07;
  transition: background 1.1s var(--ease);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 76%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 76%, transparent 100%);
}
.atributos__texto, .atributos__medio { position: relative; z-index: 1; }

.rasgos__eco { display: none; }

.rasgos {
  list-style: none;
  margin: clamp(2.4rem, 5vh, 3.4rem) 0 0;
  padding: 0;
  max-width: 34rem;
}

.rasgo {
  position: relative;
  border-top: 1px solid var(--linea);
}
.rasgo:last-child { border-bottom: 1px solid var(--linea); }

.rasgo__btn {
  appearance: none;
  background: none;
  border: 0;
  width: 100%;
  padding: clamp(1.3rem, 3vh, 1.9rem) 0;
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 0.4rem;
  align-items: start;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: padding-left 0.7s var(--ease);
}
.rasgo.is-activo .rasgo__btn { padding-left: 0.9rem; }

.rasgo__n {
  color: var(--rasgo-color, var(--murano));
  opacity: 0.34;
  transition: opacity 0.6s var(--ease);
  padding-top: 0.35em;
}
.rasgo.is-activo .rasgo__n { opacity: 1; }

.rasgo__titulo {
  display: block;
  font-size: clamp(1.35rem, 1.9vw, 1.6rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--tinta);
  opacity: 0.5;
  transition: opacity 0.6s var(--ease), color 0.6s var(--ease);
}
.rasgo.is-activo .rasgo__titulo { opacity: 1; color: var(--rasgo-color, var(--murano-claro)); }

.rasgo__glosa {
  display: block;
  margin-top: 0.45rem;
  font-size: clamp(1.05rem, 1.1vw, 1rem);
  line-height: 1.6;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.6s var(--ease), max-height 0.7s var(--ease);
}
.rasgo.is-activo .rasgo__glosa { opacity: 0.6; max-height: 5rem; }

.rasgo__linea {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  overflow: hidden;
}
.rasgo__linea i {
  display: block;
  height: 100%;
  background: var(--rasgo-color, var(--murano));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--ease);
}
.rasgo.is-activo .rasgo__linea i { transform: scaleX(1); }

.lamina {
  position: relative;
  border-radius: clamp(14px, 1.7vw, 28px);
  aspect-ratio: 5 / 4;
}
.lamina__aura {
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--rasgo-color, #8fd4ea) 0%, transparent 66%);
  opacity: 0.16;
  filter: blur(30px);
  transition: background 1.1s var(--ease);
  pointer-events: none;
}
.lamina__foto {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: inherit;
  overflow: hidden;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1s var(--ease), transform 1.4s var(--ease);
}
.lamina__foto.is-activa { opacity: 1; transform: scale(1); }
.lamina__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lamina::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(244, 241, 236, 0.09);
  pointer-events: none;
  z-index: 2;
}

@media (max-width: 860px) {
  .lamina { aspect-ratio: 4 / 3; }
}

@media (max-width: 860px) {
  .tonos__cierre {
    white-space: normal;
    max-width: 20ch;
    font-size: clamp(2.05rem, 7.6vw, 2.6rem);
  }
}

@media (max-width: 860px) {
  .tonos {
    padding-top: clamp(3.6rem, 9vh, 6rem);
    padding-bottom: clamp(3.6rem, 9vh, 6rem);
  }
  .tonos__cierre { margin-top: clamp(2.8rem, 6.5vh, 4rem); }
}

@media (max-width: 640px) {
  .hero__titulo,
  .tonos__titulo,
  .tonos__cierre { overflow-wrap: break-word; }
}

/* En vertical la lista de atributos se vuelve una fila de píldoras: tres
   renglones altos con su glosa desplegable ocupaban media pantalla y dejaban la
   fotografía —que es lo que el atributo demuestra— fuera de la vista. */
@media (max-width: 860px) {
  .rasgos {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    max-width: none;
    margin: clamp(1.6rem, 3.5vh, 2.4rem) 0 0;
    padding: 0 0 0.25rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .rasgos::-webkit-scrollbar { display: none; }
  .rasgo,
  .rasgo:last-child {
    position: static;
    border: 0;
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
  .rasgo__btn,
  .rasgo.is-activo .rasgo__btn {
    width: auto;
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    padding: 0.62rem 0.95rem;
    border: 1px solid var(--linea);
    border-radius: 999px;
    transition: border-color 0.5s var(--ease), background 0.5s var(--ease);
  }
  .rasgo.is-activo .rasgo__btn {
    border-color: var(--rasgo-color, var(--acento));
    background: color-mix(in srgb, var(--rasgo-color, var(--acento)) 15%, transparent);
  }
  .rasgo__n { padding-top: 0; }
  .rasgo__titulo {
    font-size: 0.95rem;
    white-space: nowrap;
    opacity: 0.7;
  }
  /* La descripción vive fuera de las píldoras, en una línea propia que el
     JavaScript reescribe con la elegida. Una sola en el documento: tres
     superpuestas y distinguidas por opacidad se apilan al menor reflujo. */
  .rasgo__glosa { display: none; }
  .rasgos__eco {
    display: block;
    margin: clamp(1rem, 2.4vh, 1.4rem) 0 0;
    font-size: 1.05rem;
    line-height: 1.55;
    opacity: 0.6;
    /* Sitio reservado para dos renglones: cambiar de atributo no mueve nada. */
    min-height: 3.2em;
  }
  .rasgo__linea { display: none; }
}

@media (max-width: 860px) {
  .hero__velo {
    /* La lámina vertical nace oscura y con la mitad superior libre, así que el
       velo casi no hace falta: solo remata el fondo y da un punto de asiento al
       titular. Los cristales quedan a plena luz. */
    background:
      linear-gradient(180deg, transparent 84%, rgba(4, 6, 10, 0.5) 96%, var(--fondo)),
      rgba(4, 6, 10, 0.12);
  }
  .hero__titulo .linea:last-child { letter-spacing: 0.5em; }
  .hero__texto {
    text-shadow: 0 2px 34px rgba(4, 6, 10, 0.45);
    /* Sube el bloque sobre el negro limpio, por encima de los cristales. Va con
       margen y no con transform: la salida del héroe anima el transform de este
       mismo elemento y lo sobrescribiría. */
    margin-bottom: clamp(7rem, 20vh, 14rem);
  }
}

/* La barra de navegación trae su propio degradado de arriba, pensado para las
   fotografías oscuras del resto del sitio. Sobre este héroe —mucho más claro—
   se marcaba como una banda; aquí va a menos de la mitad. */
.tema-murano .navegacion {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--fondo) 38%, transparent), transparent);
}

/* Siete paradas en un renglón, contra las cinco de la retícula base. Con
   minmax(0, …) las columnas encogen por debajo de su contenido —el rótulo más
   largo, DISTRIBUIDORES, no debe fijar el ancho— y ese rótulo lleva menos
   espaciado para caber en la columna. */
.ruta__paradas { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.parada { min-width: 0; }
.parada__nombre { letter-spacing: 0.24em; }

@media (max-width: 900px) {
  .ruta__paradas { grid-template-columns: 1fr; }
  .parada__nombre { letter-spacing: 0.42em; }
}

.frente__pieza img { aspect-ratio: 274 / 788; }

/* La barra de desplazamiento del navegador, en el color del mundo. Solo en
   escritorio: en táctil el sistema la dibuja flotante y estos ajustes no le
   aplican. */
@media (min-width: 861px) {
  html:has(.tema-murano) {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--murano) 72%, transparent)
                     rgba(244, 241, 236, 0.05);
  }
  .tema-murano::-webkit-scrollbar { width: 9px; }
  .tema-murano::-webkit-scrollbar-track { background: rgba(244, 241, 236, 0.05); }
  .tema-murano::-webkit-scrollbar-thumb {
    border-radius: 9px;
    background: color-mix(in srgb, var(--murano) 72%, transparent);
  }
  .tema-murano::-webkit-scrollbar-thumb:hover { background: var(--murano-claro); }
}