/* =========================================================================
   Sin Envejecer — visuals.css (chunk 2)
   Editorial illustrations, animated heroes, parallax media.
   ========================================================================= */

/* ---------- ambient video hero (CSS-only) ---------- */
.video-hero {
  position: relative;
  min-height: 92vh;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
}
.video-hero .layer {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.video-hero .layer.mesh {
  background:
    radial-gradient(45vw 45vw at 75% 25%, rgba(244, 182, 182, 0.55), transparent 60%),
    radial-gradient(40vw 40vw at 15% 75%, rgba(212, 165, 116, 0.55), transparent 60%),
    radial-gradient(50vw 50vw at 55% 60%, rgba(110, 42, 74, 0.7), transparent 70%),
    linear-gradient(180deg, #0a0408, #14080f 50%, #1f1018);
  filter: blur(0px);
  animation: meshShift 22s var(--e-soft) infinite alternate;
}
@keyframes meshShift {
  0%   { background-position: 0% 0%, 0% 0%, 0% 0%, 0 0; transform: scale(1) rotate(0deg); }
  100% { background-position: 30% 20%, -20% 10%, 10% -10%, 0 0; transform: scale(1.05) rotate(2deg); }
}

.video-hero .layer.grain {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");
  opacity: 0.12;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.video-hero .layer.orbs span {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.6;
  mix-blend-mode: screen;
}
.video-hero .layer.orbs span:nth-child(1) {
  width: 35vw; height: 35vw; left: 8%; top: 12%;
  background: radial-gradient(circle, #f4b6b6, transparent 70%);
  animation: floatA 18s ease-in-out infinite alternate;
}
.video-hero .layer.orbs span:nth-child(2) {
  width: 28vw; height: 28vw; right: 6%; top: 40%;
  background: radial-gradient(circle, #d4a574, transparent 70%);
  animation: floatB 24s ease-in-out infinite alternate;
}
.video-hero .layer.orbs span:nth-child(3) {
  width: 22vw; height: 22vw; left: 32%; bottom: 8%;
  background: radial-gradient(circle, #f1c891, transparent 70%);
  animation: floatC 28s ease-in-out infinite alternate;
}
@keyframes floatA { to { transform: translate(8vw, 6vh) scale(1.15); } }
@keyframes floatB { to { transform: translate(-7vw, -4vh) scale(0.9); } }
@keyframes floatC { to { transform: translate(4vw, -10vh) scale(1.1); } }

@media (prefers-reduced-motion: reduce) {
  .video-hero .layer.mesh,
  .video-hero .layer.orbs span { animation: none; }
}

/* ---------- editorial portrait card (svg-art driven) ---------- */
.portrait {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-4);
  overflow: hidden;
  background: linear-gradient(160deg, #6e2a4a, #1f1018);
  isolation: isolate;
}
.portrait svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.portrait .caption {
  position: absolute; left: var(--s-5); right: var(--s-5); bottom: var(--s-5);
  font-family: var(--f-display); font-style: italic;
  color: var(--c-ivory); line-height: 1.2;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
  z-index: 2;
}
.portrait .caption b {
  display: block;
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  color: var(--c-gold-bright);
  margin-bottom: 0.2em;
}
.portrait .caption span {
  font-style: normal; font-family: var(--f-body);
  font-size: var(--fs-micro); letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--c-ivory-dim);
}

/* ---------- magazine pull quotes ---------- */
.pullquote {
  text-align: center;
  margin: var(--s-9) auto;
  max-width: 22ch;
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(2rem, 5vw, 3.75rem);
  line-height: 1.05;
  color: var(--c-ivory);
}
.pullquote .gold { display: block; color: var(--c-gold-bright); }
.pullquote::before, .pullquote::after {
  content: ""; display: block;
  width: 60px; height: 1px;
  background: var(--c-gold);
  margin: var(--s-4) auto;
}

/* ---------- step / chapter card ---------- */
.chapter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-4);
}
.chapter {
  position: relative;
  padding: var(--s-6);
  border-radius: var(--r-3);
  background: linear-gradient(160deg, rgba(212, 165, 116, 0.08), rgba(20, 8, 15, 0.5));
  border: 1px solid var(--c-line);
  overflow: hidden;
}
.chapter::before {
  content: "";
  position: absolute; inset: -50%;
  background:
    conic-gradient(from 0deg, transparent, rgba(212, 165, 116, 0.25), transparent 30%);
  animation: spin 14s linear infinite;
  opacity: 0; transition: opacity 600ms;
  pointer-events: none;
}
.chapter:hover::before { opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }
.chapter .num {
  font-family: var(--f-display); font-style: italic;
  color: var(--c-gold-bright); font-size: 2.25rem; line-height: 1;
}
.chapter h3 { margin: var(--s-3) 0 var(--s-2); }
.chapter p { color: var(--c-ivory-dim); margin: 0; }

/* ---------- comparison strip ---------- */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  margin: var(--s-6) 0;
}
.compare .col {
  padding: var(--s-5);
  border-radius: var(--r-3);
  border: 1px solid var(--c-line);
}
.compare .col.yes {
  background: linear-gradient(160deg, rgba(143, 214, 168, 0.08), transparent);
  border-color: rgba(143, 214, 168, 0.3);
}
.compare .col.no {
  background: linear-gradient(160deg, rgba(244, 182, 182, 0.08), transparent);
  border-color: rgba(244, 182, 182, 0.3);
}
.compare h4 {
  font-family: var(--f-body); font-size: var(--fs-micro);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--c-ivory-dim); margin-bottom: var(--s-3);
}
.compare ul { margin: 0; padding-left: 1.2em; color: var(--c-ivory); }
.compare li { margin-bottom: var(--s-2); }
@media (max-width: 640px) { .compare { grid-template-columns: 1fr; } }

/* ---------- timeline ---------- */
.timeline {
  position: relative;
  padding: var(--s-6) 0;
  margin: var(--s-6) 0;
}
.timeline::before {
  content: ""; position: absolute;
  left: 20px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--c-gold), transparent 95%);
}
.timeline .item {
  position: relative;
  padding-left: 60px;
  margin-bottom: var(--s-5);
}
.timeline .item::before {
  content: ""; position: absolute;
  left: 14px; top: 10px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--c-gold);
  box-shadow: 0 0 0 4px var(--c-bg);
}
.timeline .age {
  font-family: var(--f-display); font-style: italic;
  font-size: 1.5rem; color: var(--c-gold-bright);
  line-height: 1;
}
.timeline .what {
  display: block; margin-top: var(--s-1);
  color: var(--c-ivory-dim); font-size: var(--fs-small);
}

/* ---------- price table ---------- */
.price-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--s-5) 0;
  font-size: var(--fs-small);
}
.price-table th, .price-table td {
  text-align: left;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--c-line);
}
.price-table thead th {
  font-family: var(--f-body); font-size: var(--fs-micro);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--c-gold); font-weight: 600;
}
.price-table tbody tr:hover {
  background: rgba(212, 165, 116, 0.05);
}
.price-table td b { color: var(--c-gold-bright); }

/* ---------- quiz / game ---------- */
.quiz-card {
  max-width: 720px; margin: 0 auto;
  padding: var(--s-7);
  border-radius: var(--r-4);
  background: linear-gradient(160deg, rgba(212, 165, 116, 0.1), rgba(110, 42, 74, 0.18));
  border: 1px solid var(--c-line-strong);
  min-height: 480px;
  display: flex; flex-direction: column;
}
.quiz-progress {
  display: flex; gap: 4px; margin-bottom: var(--s-5);
}
.quiz-progress span {
  flex: 1; height: 3px; border-radius: 3px; background: var(--c-line);
}
.quiz-progress span.on { background: var(--c-gold); }
.quiz-question {
  font-family: var(--f-display); font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: var(--s-5); color: var(--c-ivory);
  line-height: 1.15;
}
.quiz-options { display: flex; flex-direction: column; gap: var(--s-3); }
.quiz-option {
  text-align: left;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-3);
  border: 1px solid var(--c-line);
  background: var(--c-bg-deep);
  color: var(--c-ivory);
  font: inherit;
  cursor: pointer;
  transition: all var(--d-fast) var(--e-soft);
  display: flex; justify-content: space-between; align-items: center;
}
.quiz-option:hover {
  border-color: var(--c-gold);
  transform: translateX(4px);
  background: linear-gradient(135deg, rgba(212, 165, 116, 0.12), var(--c-bg-deep));
}
.quiz-option .key {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  display: grid; place-items: center;
  font-family: var(--f-mono); font-size: var(--fs-small);
  color: var(--c-gold);
}
.quiz-result {
  text-align: center;
  padding: var(--s-6) 0;
}
.quiz-result h2 { color: var(--c-gold-bright); }
.quiz-result .badge {
  display: inline-block;
  padding: var(--s-2) var(--s-5);
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--c-gold), var(--c-gold-bright));
  color: var(--c-bg-deep);
  font-family: var(--f-body); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  font-size: var(--fs-small);
  margin-bottom: var(--s-4);
}

/* ---------- decade hero (per article) ---------- */
.decade-hero {
  position: relative;
  padding: var(--s-9) 0 var(--s-7);
  overflow: hidden;
  isolation: isolate;
}
.decade-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
}
.decade-hero[data-d="30s"]::before {
  background:
    radial-gradient(40vw 40vw at 80% 20%, rgba(244, 182, 182, 0.45), transparent 60%),
    radial-gradient(40vw 40vw at 10% 80%, rgba(212, 165, 116, 0.35), transparent 60%);
}
.decade-hero[data-d="40s"]::before {
  background:
    radial-gradient(40vw 40vw at 80% 20%, rgba(212, 165, 116, 0.45), transparent 60%),
    radial-gradient(40vw 40vw at 10% 80%, rgba(110, 42, 74, 0.55), transparent 60%);
}
.decade-hero[data-d="50s"]::before {
  background:
    radial-gradient(40vw 40vw at 80% 20%, rgba(110, 42, 74, 0.55), transparent 60%),
    radial-gradient(40vw 40vw at 10% 80%, rgba(241, 200, 145, 0.35), transparent 60%);
}
.decade-hero[data-d="60s"]::before {
  background:
    radial-gradient(40vw 40vw at 70% 30%, rgba(241, 200, 145, 0.4), transparent 60%),
    radial-gradient(40vw 40vw at 20% 70%, rgba(212, 165, 116, 0.45), transparent 60%);
}
.decade-hero[data-d="70s"]::before {
  background:
    radial-gradient(50vw 50vw at 50% 40%, rgba(244, 182, 182, 0.4), transparent 60%),
    radial-gradient(40vw 40vw at 20% 80%, rgba(212, 165, 116, 0.5), transparent 60%);
}
.decade-hero .age-block {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(8rem, 22vw, 18rem);
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 1px rgba(247, 241, 230, 0.18);
  position: absolute;
  right: -2vw;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: -1;
  white-space: nowrap;
}

/* ---------- ingredient grid (for skincare) ---------- */
.ingredient-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-3);
  margin: var(--s-5) 0;
}
.ingredient {
  padding: var(--s-4);
  border-radius: var(--r-3);
  background: var(--c-glass-hi);
  border: 1px solid var(--c-line);
  text-align: center;
}
.ingredient .icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  margin: 0 auto var(--s-3);
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--c-plum), var(--c-bg-deep));
  font-family: var(--f-display); font-style: italic;
  font-size: 1.5rem; color: var(--c-gold-bright);
}
.ingredient h4 {
  font-family: var(--f-body);
  font-size: 1rem;
  margin-bottom: var(--s-1);
}
.ingredient p {
  font-size: var(--fs-small);
  color: var(--c-ivory-dim);
  margin: 0;
}

/* ---------- before/after-style toggle ---------- */
.toggle-strip {
  display: inline-flex;
  background: var(--c-glass);
  border-radius: var(--r-pill);
  padding: 4px;
  border: 1px solid var(--c-line);
  margin-bottom: var(--s-4);
}
.toggle-strip button {
  background: transparent;
  border: 0;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  color: var(--c-ivory-dim);
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-small);
}
.toggle-strip button.on {
  background: var(--c-gold);
  color: var(--c-bg-deep);
  font-weight: 600;
}

/* ---------- editorial image with frame ---------- */
.editorial-img {
  position: relative;
  margin: var(--s-7) 0;
  border-radius: var(--r-4);
  overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
}
.editorial-img img {
  width: 100%; display: block;
  transition: transform 1.2s var(--e-out);
}
.editorial-img:hover img { transform: scale(1.03); }
.editorial-img figcaption {
  font-family: var(--f-display);
  font-style: italic;
  font-size: var(--fs-small);
  color: var(--c-ivory-dim);
  text-align: center;
  margin-top: var(--s-3);
}

/* ---------- floating tag chips ---------- */
.chips { display: flex; gap: var(--s-2); flex-wrap: wrap; margin: var(--s-4) 0; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px var(--s-3);
  border-radius: var(--r-pill);
  background: var(--c-glass-hi);
  border: 1px solid var(--c-line);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ivory-dim);
}
.chip.gold { border-color: var(--c-gold); color: var(--c-gold-bright); }

/* =========================================================================
   Quality pass — newsletter, back-to-top, search, themed decade cards
   ========================================================================= */

/* ---------- newsletter capture (homepage + footer) ---------- */
.newsletter {
  position: relative;
  padding: var(--s-7);
  border-radius: var(--r-4);
  background: linear-gradient(135deg, rgba(212, 165, 116, 0.15), rgba(110, 42, 74, 0.25));
  border: 1px solid var(--c-line-strong);
  overflow: hidden;
}
.newsletter::before {
  content: "";
  position: absolute; top: -50%; left: -10%; width: 60%; height: 200%;
  background: radial-gradient(closest-side, rgba(244, 182, 182, 0.15), transparent);
  pointer-events: none;
}
.newsletter form {
  display: flex; gap: var(--s-3); flex-wrap: wrap;
  background: var(--c-glass);
  padding: 4px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-line);
  max-width: 480px;
}
.newsletter input[type=email] {
  flex: 1; min-width: 200px;
  background: transparent; border: 0; color: var(--c-ivory);
  padding: var(--s-3) var(--s-4); font: inherit; outline: 0;
  font-size: 0.95rem;
}
.newsletter input[type=email]::placeholder { color: var(--c-ivory-dim); }
.newsletter .fine-print {
  margin-top: var(--s-3);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  color: var(--c-ivory-dim);
}

/* ---------- back to top ---------- */
.to-top {
  position: fixed;
  right: var(--s-5); bottom: var(--s-5);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--c-gold);
  color: var(--c-bg-deep);
  border: 0;
  cursor: pointer;
  display: grid; place-items: center;
  font-size: 1.25rem; font-weight: 700;
  box-shadow: var(--sh-soft);
  opacity: 0; transform: translateY(20px);
  pointer-events: none;
  transition: all var(--d-mid) var(--e-soft);
  z-index: 50;
}
.to-top.on {
  opacity: 1; transform: translateY(0);
  pointer-events: auto;
}
.to-top:hover { filter: brightness(1.1); transform: translateY(-2px); }

/* ---------- search ---------- */
.search-shell {
  max-width: 720px; margin: 0 auto;
  padding: var(--s-7) var(--s-5);
}
.search-input {
  width: 100%;
  background: var(--c-glass-hi);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  padding: var(--s-4) var(--s-5);
  font: inherit;
  font-size: 1.125rem;
  color: var(--c-ivory);
  outline: 0;
  transition: border-color var(--d-fast);
}
.search-input:focus { border-color: var(--c-gold); }
.search-input::placeholder { color: var(--c-ivory-dim); }

.search-results { margin-top: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.search-hit {
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-3);
  background: var(--c-glass-hi);
  transition: all var(--d-fast) var(--e-soft);
  text-decoration: none; color: inherit;
  display: block;
}
.search-hit:hover { border-color: var(--c-gold); transform: translateX(4px); text-decoration: none; }
.search-hit .crumb {
  font-size: var(--fs-micro); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--c-gold);
}
.search-hit h3 {
  margin: var(--s-1) 0 var(--s-2);
  font-family: var(--f-body); font-size: 1.125rem; font-weight: 600;
  color: var(--c-ivory);
}
.search-hit p { color: var(--c-ivory-dim); margin: 0; font-size: 0.95rem; }
.search-empty {
  text-align: center;
  padding: var(--s-7) 0;
  color: var(--c-ivory-dim);
  font-family: var(--f-display); font-style: italic;
  font-size: 1.25rem;
}

/* ---------- themed decade card backgrounds (override on homepage) ---------- */
.decade-card[data-decade="30s"]::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(50% 50% at 70% 25%, rgba(244, 182, 182, 0.25), transparent 70%),
    radial-gradient(50% 50% at 20% 75%, rgba(212, 165, 116, 0.25), transparent 70%);
  pointer-events: none;
}
.decade-card[data-decade="40s"]::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(50% 50% at 75% 25%, rgba(212, 165, 116, 0.3), transparent 70%),
    radial-gradient(50% 50% at 15% 80%, rgba(110, 42, 74, 0.45), transparent 70%);
  pointer-events: none;
}
.decade-card[data-decade="50s"]::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(50% 50% at 75% 20%, rgba(110, 42, 74, 0.4), transparent 70%),
    radial-gradient(50% 50% at 25% 80%, rgba(241, 200, 145, 0.25), transparent 70%);
  pointer-events: none;
}
.decade-card[data-decade="60s"]::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(241, 200, 145, 0.3), transparent 70%);
  pointer-events: none;
}
.decade-card[data-decade="70s"]::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(244, 182, 182, 0.3), transparent 70%),
    radial-gradient(50% 50% at 75% 20%, rgba(212, 165, 116, 0.35), transparent 70%);
  pointer-events: none;
}
.decade-card { isolation: isolate; }

/* ---------- portrait integration ---------- */
.viral-card .media.iris {
  background: linear-gradient(135deg, #6e2a4a, #14080f);
  position: relative;
}
.viral-card .media.iris svg {
  width: 100%; height: 100%;
  display: block;
}
.viral-card .media.iris::before { content: none; }