/* ==========================================================================
   Perfumaste — Landing Product maestra, v2 (pieza: carga tras principal.css).

   Namespace `.land`. Nada de aquí toca clases de otras piezas.

   ⚠️ LA TESIS DE LA V2: LA LANDING SE TIÑE DEL AROMA. `--fam` llega desde PHP
   con el color de la familia olfativa (mapa del panel viejo de producción) y
   recorre la página: atmósfera del hero, puntos de la nube, guiones del
   perfil, numerales de uso, barra y hover del cierre. La v1 —todo filete gris,
   idéntica para un Oriental y un Acuático— se retiró por fría.

   El crudo de `--fam` es SOLO gráfico. Para texto siempre `--fam-tx`, que lo
   mezcla con la tinta: el amarillo cítrico puro sobre papel no se lee.
   ========================================================================== */

.land {
  --fam: #8C1D26; /* sin familia, el granate de la casa */
  --fam-tx: color-mix(in srgb, var(--fam) 52%, var(--tinta));
  margin-top: var(--s8);
}

.land__k {
  display: block;
  font-family: var(--dato); font-size: var(--fs-dato);
  letter-spacing: .14em; text-transform: uppercase; color: var(--humo);
  margin-bottom: var(--s2);
}
.land__k--luz { color: rgba(255, 255, 255, .85); }

.land__t {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 96;
  font-size: clamp(1.45rem, 2.8vw, 1.95rem); font-weight: 500;
  letter-spacing: -.015em; margin-bottom: var(--s5);
}

/* --------------------------------------------------------------------------
   REVELADO AL HACER SCROLL
   El estado oculto SOLO existe bajo `html.pfp-anim`, que pone el JavaScript:
   sin guion la página nace visible. Ver el porqué en inc/landing.php.
   -------------------------------------------------------------------------- */
.pfp-anim .land[data-rev] {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
}
.pfp-anim .land[data-rev][data-vis] { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   1 · HERO — la atmósfera de la familia
   La foto va en un pseudoelemento para poder darle el zoom lento sin mover el
   texto; el velo mezcla el color de la familia en la sombra, así el Oriental
   respira ámbar y el Acuático respira azul con LA MISMA foto de fondo.
   -------------------------------------------------------------------------- */
.land--hero {
  position: relative; overflow: hidden;
  min-height: clamp(280px, 40vw, 440px);
  border-radius: var(--r-sm);
  display: flex; align-items: flex-end;
}
.land--hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--land-img);
  background-size: cover; background-position: center;
}
.pfp-anim .land--hero::before { animation: land-zoom 16s ease-out both; }
@keyframes land-zoom { from { transform: scale(1.07); } to { transform: scale(1); } }

.land--hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(70deg,
      color-mix(in srgb, var(--fam) 42%, rgba(16, 13, 11, .93)),
      color-mix(in srgb, var(--fam) 14%, rgba(16, 13, 11, .42)) 52%,
      rgba(16, 13, 11, .05));
}
.land__hero-in { position: relative; z-index: 1; padding: clamp(var(--s5), 4.5vw, var(--s8)); }
.land__fam {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 144;
  font-size: clamp(2.5rem, 7vw, 4.4rem); font-weight: 500;
  letter-spacing: -.022em; line-height: .98; color: #fff;
}
.land__fam-d {
  margin-top: var(--s3);
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: rgba(255, 255, 255, .93);
}

/* --------------------------------------------------------------------------
   3 · LA NUBE DE NOTAS
   Tipografía como imagen: las notas de salida en cuerpo de titular, el fondo
   en cuerpo de texto. Los puntos separadores son el color de la familia — es
   el detalle que más comunica por píxel de toda la página.
   -------------------------------------------------------------------------- */
.land__nube {
  max-width: 24em;
  line-height: 1.3; letter-spacing: -.01em;
  overflow-wrap: break-word;
}
.land__nube i {
  font-style: normal; color: var(--fam);
  font-size: 1.3em; vertical-align: middle;
}
.land__nota {
  font-family: var(--display); font-weight: 500; color: var(--tinta);
  transition: color .25s ease;
}
.land__nota:hover { color: var(--fam-tx); }
.land__nota--g { font-size: clamp(1.85rem, 4.6vw, 2.9rem); font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 144; }
.land__nota--m { font-size: clamp(1.35rem, 3vw, 1.9rem); font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 96; color: color-mix(in srgb, var(--tinta) 82%, var(--papel)); }
.land__nota--p { font-size: clamp(1.02rem, 2vw, 1.25rem); color: var(--humo); }

/* --------------------------------------------------------------------------
   4 · ES PARA TI, SI…
   El guion largo en el color de la familia; la frase, grande y cercana.
   -------------------------------------------------------------------------- */
.land__perfil { list-style: none; padding: 0; margin: 0; max-width: 34em; }
.land__perfil li {
  padding: var(--s4) 0 var(--s4) var(--s7);
  border-top: 1px solid var(--hilo);
  position: relative;
  font-size: clamp(1.02rem, 1.6vw, 1.15rem); line-height: 1.5;
}
.land__perfil li:last-child { border-bottom: 1px solid var(--hilo); }
.land__perfil li::before {
  content: "—";
  position: absolute; left: 0;
  color: var(--fam); font-weight: 600;
}

/* --------------------------------------------------------------------------
   5 · CÓMO APLICARLO
   -------------------------------------------------------------------------- */
.land__pasos {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--s5);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 719px) { .land__pasos { grid-template-columns: 1fr; } }
.land__paso { border-top: 1px solid var(--hilo); padding-top: var(--s4); }
.land__paso-n {
  display: block;
  font-family: var(--dato); font-size: 1.35rem; letter-spacing: .06em;
  color: var(--fam-tx); margin-bottom: var(--s2);
}
.land__paso b { display: block; font-weight: 600; margin-bottom: var(--s2); }
.land__paso p { color: var(--humo); font-size: .925rem; line-height: 1.55; }

/* --------------------------------------------------------------------------
   6 · ORIGINAL VS IMITACIÓN
   ⚠️ SIN TEÑIR, a propósito: es una garantía y se lee en el idioma del sello.
   Los textos de las celdas están escritos CORTOS para caber a 390px en tres
   columnas; si se alargan en PHP, esto se rompe — están medidos juntos.
   -------------------------------------------------------------------------- */
.land__vs { border: 1px solid var(--hilo); border-radius: var(--r-sm); background: var(--blanco); overflow: hidden; }
.land__vs-f {
  display: grid; grid-template-columns: .9fr 1.1fr 1.1fr; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--hilo);
  font-size: .875rem; line-height: 1.4;
}
.land__vs-f--cab {
  border-top: 0;
  font-family: var(--dato); font-size: var(--fs-dato);
  letter-spacing: .1em; text-transform: uppercase; color: var(--humo);
  background: color-mix(in srgb, var(--papel) 55%, var(--blanco));
}
.land__vs-k { font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .06em; text-transform: uppercase; color: var(--humo); align-self: center; }
.land__vs-si { font-weight: 500; }
.land__vs-no { color: var(--humo); }
.land__vs-si::before { content: "✓ "; color: var(--tinta); }
.land__vs-no::before { content: "✕ "; color: color-mix(in srgb, var(--laca) 70%, var(--humo)); }
@media (max-width: 479px) { .land__vs-f { font-size: .8rem; gap: var(--s2); } }

.land__nota-pie { margin-top: var(--s3); font-size: .875rem; color: var(--humo); }
.land__nota-pie a { color: var(--tinta); }

/* --------------------------------------------------------------------------
   7 · PREGUNTAS FRECUENTES
   -------------------------------------------------------------------------- */
.land__faq { max-width: 38em; }
.land__d { border-top: 1px solid var(--hilo); }
.land__d:last-child { border-bottom: 1px solid var(--hilo); }
.land__d summary {
  cursor: pointer; list-style: none;
  padding: var(--s4) var(--s6) var(--s4) 0;
  font-weight: 600; position: relative;
  transition: color .2s ease;
}
.land__d summary::-webkit-details-marker { display: none; }
.land__d summary::after {
  content: "+";
  position: absolute; right: var(--s2); top: 50%;
  transform: translateY(-50%);
  font-family: var(--dato); color: var(--humo);
  transition: transform .25s ease;
}
.land__d[open] summary { color: var(--fam-tx); }
.land__d[open] summary::after { content: "−"; color: var(--fam-tx); }
.land__d p { padding: 0 0 var(--s4); color: var(--humo); line-height: 1.6; max-width: 34em; }

/* --------------------------------------------------------------------------
   8 · CIERRE DE VENTA
   La única tarjeta de la landing, coronada por la banda del color de familia.
   Aquí viven las tres cifras que venden: estrellas, precio y ahorro.
   -------------------------------------------------------------------------- */
.land--venta {
  text-align: center;
  padding: var(--s7) var(--s4);
  background: var(--blanco);
  border: 1px solid var(--hilo); border-top: 3px solid var(--fam);
  border-radius: var(--r-sm);
}
.land--venta .land__t { margin-bottom: var(--s4); }

.land__val {
  display: flex; justify-content: center; align-items: center; gap: var(--s2);
  margin-bottom: var(--s4); font-size: .95rem;
}
.land__val b { font-weight: 600; }
.land__val span { color: var(--humo); }

.land__precio {
  display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap;
  gap: var(--s3); margin-bottom: var(--s5);
}
.land__precio b {
  font-size: clamp(1.7rem, 4vw, 2.2rem); font-weight: 600; letter-spacing: -.02em;
}
.land__precio s { color: var(--humo); font-size: 1.05rem; }
.land__precio i {
  font-family: var(--dato); font-size: var(--fs-dato); font-style: normal;
  letter-spacing: .05em; color: var(--laca);
  background: color-mix(in srgb, var(--laca) 9%, transparent);
  padding: 4px 10px; border-radius: 999px;
}

.land__chips {
  list-style: none; padding: 0; margin: 0 0 var(--s5);
  display: flex; justify-content: center; flex-wrap: wrap;
}
.land__chips li {
  font-family: var(--dato); font-size: var(--fs-dato);
  letter-spacing: .12em; text-transform: uppercase; color: var(--humo);
  padding: var(--s1) var(--s4);
}
.land__chips li + li { border-left: 1px solid var(--hilo); }
@media (max-width: 559px) {
  .land__chips { flex-direction: column; gap: var(--s2); }
  .land__chips li + li { border-left: 0; }
}

.land__cta {
  display: inline-flex; padding-inline: var(--s7);
  transition: background .25s ease;
}
.land__cta:hover { background: var(--fam-tx); }
.land__agotado { margin-bottom: var(--s4); color: var(--humo); }

/* --------------------------------------------------------------------------
   MOVIMIENTO REDUCIDO: nada se anima y todo nace visible.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pfp-anim .land[data-rev] { opacity: 1; transform: none; transition: none; }
  .pfp-anim .land--hero::before { animation: none; }
  .land__nota, .land__cta, .land__d summary, .land__d summary::after { transition: none; }
}