/* ============================================================
   Intro overlay — welcome animations
   Mounted into #intro-root by intros/intros.js.
   ============================================================ */

#intro-root {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
}
#intro-root.is-active { pointer-events: auto; }
#intro-root .intro-stage {
  position: absolute;
  inset: 0;
  background: var(--blanco, #F7F5F2);
  display: grid;
  place-items: center;
  overflow: hidden;
}
#intro-root .intro-stage.is-leaving {
  animation: intro-out 280ms ease forwards;
}
@keyframes intro-out {
  to { opacity: 0; transform: scale(1.02); }
}

#intro-root .intro-skip {
  position: absolute;
  bottom: 24px; right: 24px;
  background: rgba(31, 59, 91, 0.08);
  border: 1px solid rgba(31, 59, 91, 0.18);
  border-radius: 999px;
  padding: 8px 14px;
  font: 500 0.78rem/1 "Sora", system-ui, sans-serif;
  color: var(--azul, #1F3B5B);
  cursor: pointer;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0;
  animation: skip-in 400ms 600ms ease forwards;
}
@keyframes skip-in { to { opacity: 1; } }

/* ============================================================
   videofull — intro de video a pantalla completa
   ============================================================ */
.intro-videofull .intro-stage {
  background: #000;
}
.intro-videofull .vf-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #000;
}
@media (orientation: portrait) and (max-width: 720px) {
  .intro-videofull .vf-video { object-fit: cover; }
}
.intro-videofull .intro-skip {
  background: rgba(247, 245, 242, 0.12);
  border-color: rgba(247, 245, 242, 0.32);
  color: #F7F5F2;
}

/* ============================================================
   0) Simbiosis: bosque vivo → logo Micorriza
   ============================================================ */
.intro-simbiosis .intro-stage,
.intro-simbiosis .sym-canvas {
  background: linear-gradient(180deg, #fafafa 0%, #f5f0e8 100%);
}
.intro-simbiosis .sym-canvas {
  width: min(96vw, 1100px);
  height: auto;
  display: block;
}

/* --- Soil --- */
.intro-simbiosis .sym-soil {
  opacity: 0;
  animation: sym-soil-fade 500ms 200ms ease forwards;
}
@keyframes sym-soil-fade { to { opacity: 0.7; } }

/* --- Trees grow up from base (scale-from-soil) --- */
.intro-simbiosis .sym-tree {
  transform-box: view-box;
  transform: scale(0);
  opacity: 0;
}
.intro-simbiosis .sym-tree.st-1 {
  transform-origin: 300px 350px;
  animation: sym-tree-grow 1100ms 500ms cubic-bezier(.16,.84,.44,1) forwards;
}
.intro-simbiosis .sym-tree.st-2 {
  transform-origin: 500px 350px;
  animation: sym-tree-grow 1200ms 700ms cubic-bezier(.16,.84,.44,1) forwards;
}
.intro-simbiosis .sym-tree.st-3 {
  transform-origin: 700px 350px;
  animation: sym-tree-grow 1100ms 900ms cubic-bezier(.16,.84,.44,1) forwards;
}
@keyframes sym-tree-grow {
  0%   { transform: scale(0); opacity: 0; }
  20%  { opacity: 1; }
  35%  { transform: scale(0.45); }
  60%  { transform: scale(0.55); }
  100% { transform: scale(1);    opacity: 1; }
}

/* --- Mushrooms pop --- */
.intro-simbiosis .sym-mushroom {
  transform-box: view-box;
  transform: scale(0);
  opacity: 0;
  animation: sym-pop 480ms cubic-bezier(.2,.7,.2,1) forwards;
}
.intro-simbiosis .sym-mushroom.sm-1 { transform-origin: 268px 350px; animation-delay: 1700ms; }
.intro-simbiosis .sym-mushroom.sm-2 { transform-origin: 524px 350px; animation-delay: 1850ms; }
.intro-simbiosis .sym-mushroom.sm-3 { transform-origin: 731px 350px; animation-delay: 2000ms; }
@keyframes sym-pop {
  0%   { opacity: 0; transform: scale(0); }
  60%  { opacity: 1; transform: scale(1.2); }
  100% { opacity: 1; transform: scale(1); }
}

/* --- Roots draw outward (per-tree timing) --- */
.intro-simbiosis .sym-root {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: sym-draw 700ms cubic-bezier(.55,.05,.45,.95) forwards;
}
.intro-simbiosis .sr-1-1, .intro-simbiosis .sr-1-2,
.intro-simbiosis .sr-1-3, .intro-simbiosis .sr-1-4,
.intro-simbiosis .sr-1-5 { animation-delay: 1500ms; }
.intro-simbiosis .sr-2-1, .intro-simbiosis .sr-2-2,
.intro-simbiosis .sr-2-3, .intro-simbiosis .sr-2-4,
.intro-simbiosis .sr-2-5 { animation-delay: 1700ms; }
.intro-simbiosis .sr-3-1, .intro-simbiosis .sr-3-2,
.intro-simbiosis .sr-3-3, .intro-simbiosis .sr-3-4,
.intro-simbiosis .sr-3-5 { animation-delay: 1900ms; }
@keyframes sym-draw { to { stroke-dashoffset: 0; } }

/* --- Underground network draws --- */
.intro-simbiosis .sym-network {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: sym-draw 900ms cubic-bezier(.55,.05,.45,.95) forwards;
}
.intro-simbiosis .sn-1 { animation-delay: 2400ms; }
.intro-simbiosis .sn-2 { animation-delay: 2520ms; }
.intro-simbiosis .sn-3 { animation-delay: 2640ms; }
.intro-simbiosis .sn-4 { animation-delay: 2760ms; }
.intro-simbiosis .sn-5 { animation-delay: 2880ms; }
.intro-simbiosis .sn-6 { animation-delay: 3000ms; }
.intro-simbiosis .sn-7 { animation-delay: 3120ms; }

/* --- Organic scene fades to make way for the logo --- */
.intro-simbiosis .sym-organic-scene {
  animation: sym-organic-fade 900ms 5000ms ease forwards;
}
@keyframes sym-organic-fade {
  to { opacity: 0; }
}

/* --- Logo nodes pop in (top cinnamon, center, bottom teal) --- */
.intro-simbiosis .sym-logo-node {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  opacity: 0;
  animation: sym-logo-node-pop 520ms cubic-bezier(.2,.7,.2,1) forwards;
}
.intro-simbiosis .sln-center { animation-delay: 5300ms; }
.intro-simbiosis .sln-top-1  { animation-delay: 5400ms; }
.intro-simbiosis .sln-top-2  { animation-delay: 5440ms; }
.intro-simbiosis .sln-top-3  { animation-delay: 5480ms; }
.intro-simbiosis .sln-top-4  { animation-delay: 5520ms; }
.intro-simbiosis .sln-top-5  { animation-delay: 5560ms; }
.intro-simbiosis .sln-top-6  { animation-delay: 5600ms; }
.intro-simbiosis .sln-top-7  { animation-delay: 5640ms; }
.intro-simbiosis .sln-top-8  { animation-delay: 5680ms; }
.intro-simbiosis .sln-bot-1  { animation-delay: 5500ms; }
.intro-simbiosis .sln-bot-2  { animation-delay: 5540ms; }
.intro-simbiosis .sln-bot-3  { animation-delay: 5580ms; }
.intro-simbiosis .sln-bot-4  { animation-delay: 5620ms; }
.intro-simbiosis .sln-bot-5  { animation-delay: 5660ms; }
.intro-simbiosis .sln-bot-6  { animation-delay: 5700ms; }
.intro-simbiosis .sln-bot-7  { animation-delay: 5740ms; }
.intro-simbiosis .sln-bot-8  { animation-delay: 5780ms; }
@keyframes sym-logo-node-pop {
  0%   { opacity: 0; transform: scale(0); }
  60%  { opacity: 1; transform: scale(1.4); }
  100% { opacity: 1; transform: scale(1); }
}

/* --- Logo connection lines draw --- */
.intro-simbiosis .sym-logo-line {
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
  animation: sym-draw 520ms cubic-bezier(.2,.7,.2,1) forwards;
}
.intro-simbiosis .sll-1, .intro-simbiosis .sll-2, .intro-simbiosis .sll-3 { animation-delay: 5900ms; }
.intro-simbiosis .sll-4, .intro-simbiosis .sll-5, .intro-simbiosis .sll-6 { animation-delay: 5960ms; }
.intro-simbiosis .sll-7, .intro-simbiosis .sll-8, .intro-simbiosis .sll-9 { animation-delay: 6020ms; }
.intro-simbiosis .sll-10, .intro-simbiosis .sll-11, .intro-simbiosis .sll-12, .intro-simbiosis .sll-13 { animation-delay: 6080ms; }
.intro-simbiosis .sll-14, .intro-simbiosis .sll-15, .intro-simbiosis .sll-16 { animation-delay: 6140ms; }
.intro-simbiosis .sll-17, .intro-simbiosis .sll-18, .intro-simbiosis .sll-19 { animation-delay: 6200ms; }
.intro-simbiosis .sll-20, .intro-simbiosis .sll-21, .intro-simbiosis .sll-22 { animation-delay: 6260ms; }
.intro-simbiosis .sll-23, .intro-simbiosis .sll-24, .intro-simbiosis .sll-25, .intro-simbiosis .sll-26 { animation-delay: 6320ms; }

/* --- Wordmark "Micorriza" appears next to the logo --- */
.intro-simbiosis .sym-word {
  opacity: 0;
  animation: sym-word-in 700ms 6500ms cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes sym-word-in {
  0%   { opacity: 0; transform: translateX(-12px); }
  100% { opacity: 1; transform: translateX(0);     }
}

/* --- Final fade of canvas --- */
.intro-simbiosis .sym-canvas {
  animation: sym-final 800ms 7100ms ease forwards;
}
@keyframes sym-final {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  .intro-simbiosis * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
  .intro-simbiosis .sym-organic-scene { opacity: 0 !important; }
}

/* ============================================================
   1) Mycelium grow → neural network → nutrients → plant grows
   ============================================================ */
.intro-mycelium svg { width: min(78vmin, 720px); height: auto; }

/* soil reference line (subtle dashed) */
.intro-mycelium .myc-soil {
  opacity: 0;
  animation: myc-soil-in 400ms 200ms ease forwards;
}
@keyframes myc-soil-in { to { opacity: 0.5; } }

/* central spore */
.intro-mycelium .myc-spore {
  transform-box: fill-box; transform-origin: center;
  transform: scale(0);
  animation: myc-spore 320ms cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes myc-spore {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* main roots draw outward (staggered by class) */
.intro-mycelium .myc-line {
  stroke-dasharray: 260; stroke-dashoffset: 260;
  animation: myc-draw 720ms cubic-bezier(.2,.7,.2,1) 220ms forwards;
}
.intro-mycelium .myc-line.l2 { animation-delay: 260ms; }
.intro-mycelium .myc-line.l3 { animation-delay: 300ms; }
.intro-mycelium .myc-line.l4 { animation-delay: 340ms; }
.intro-mycelium .myc-line.l5 { animation-delay: 380ms; }
.intro-mycelium .myc-line.l6 { animation-delay: 420ms; }
.intro-mycelium .myc-line.l7 { animation-delay: 460ms; }
.intro-mycelium .myc-line.l8 { animation-delay: 500ms; }

/* sub-branches */
.intro-mycelium .myc-sub {
  stroke-dasharray: 110; stroke-dashoffset: 110;
  animation: myc-draw 460ms cubic-bezier(.2,.7,.2,1) 720ms forwards;
}
.intro-mycelium .myc-sub:nth-of-type(odd)  { animation-delay: 800ms; }
.intro-mycelium .myc-sub:nth-of-type(3n)   { animation-delay: 880ms; }
@keyframes myc-draw { to { stroke-dashoffset: 0; } }

/* nodes pop in at root tips & sub-tips */
.intro-mycelium .myc-node {
  transform-box: fill-box; transform-origin: center;
  transform: scale(0); opacity: 0;
  animation: myc-node 360ms cubic-bezier(.2,.7,.2,1) forwards;
}
.intro-mycelium .myc-node.tier-1 { animation-delay: 900ms; }
.intro-mycelium .myc-node.tier-2 { animation-delay: 1180ms; }
@keyframes myc-node {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(1);  opacity: 1; }
}

/* neural cross-connections: dashed lines between distant nodes */
.intro-mycelium .myc-neural {
  fill: none;
  stroke-linecap: round;
  opacity: 0;
  animation: myc-neural-in 600ms cubic-bezier(.2,.7,.2,1) forwards;
}
.intro-mycelium .neu-1 { animation-delay: 1300ms; }
.intro-mycelium .neu-2 { animation-delay: 1340ms; }
.intro-mycelium .neu-3 { animation-delay: 1380ms; }
.intro-mycelium .neu-4 { animation-delay: 1420ms; }
.intro-mycelium .neu-5 { animation-delay: 1460ms; }
.intro-mycelium .neu-6 { animation-delay: 1500ms; }
.intro-mycelium .neu-7 { animation-delay: 1540ms; }
.intro-mycelium .neu-8 { animation-delay: 1580ms; }
@keyframes myc-neural-in {
  0%   { opacity: 0; transform: translateZ(0); }
  100% { opacity: 0.6; }
}

/* the entire arrayán scales from sapling to full tree progressively */
.intro-mycelium .myc-plant {
  transform-box: view-box;
  transform-origin: 300px 320px;
  transform: scale(0.18);
  opacity: 0;
  animation: myc-plant-grow 1500ms 1500ms cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes myc-plant-grow {
  0%   { transform: scale(0.18); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}

/* arrayán stem rises from the spore (drawn while the tree is scaling up) */
.intro-mycelium .myc-stem {
  stroke-dasharray: 320; stroke-dashoffset: 320;
  fill: none; stroke-linecap: round;
  animation: myc-draw 900ms 1600ms cubic-bezier(.2,.7,.2,1) forwards;
}

/* arrayán bark patches fade in once the trunk is drawn */
.intro-mycelium .myc-bark-spot {
  opacity: 0;
  animation: myc-bark-fade 360ms ease forwards;
}
.intro-mycelium .bs-1 { animation-delay: 2700ms; }
.intro-mycelium .bs-2 { animation-delay: 2750ms; }
.intro-mycelium .bs-3 { animation-delay: 2800ms; }
.intro-mycelium .bs-4 { animation-delay: 2850ms; }
@keyframes myc-bark-fade { to { opacity: 0.75; } }

/* mushrooms fruit at the base of the arrayán
   transform-box: view-box gives a deterministic origin in user units,
   anchoring each cap to the soil line at y=320.                      */
.intro-mycelium .myc-mushroom {
  transform-box: view-box;
  transform: scale(0); opacity: 0;
  animation: myc-mush-pop 560ms cubic-bezier(.2,.7,.2,1) forwards;
}
.intro-mycelium .mush-1 { transform-origin: 230px 320px; animation-delay: 2700ms; }
.intro-mycelium .mush-2 { transform-origin: 372px 320px; animation-delay: 2820ms; }
.intro-mycelium .mush-3 { transform-origin: 196px 320px; animation-delay: 2940ms; }
@keyframes myc-mush-pop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* leaves unfurl one by one */
.intro-mycelium .myc-leaf {
  transform-box: fill-box; transform-origin: 50% 100%;
  transform: scale(0); opacity: 0;
  animation: myc-leaf-unfurl 480ms cubic-bezier(.2,.7,.2,1) forwards;
}
.intro-mycelium .myc-leaf-1 { animation-delay: 2100ms; }
.intro-mycelium .myc-leaf-2 { animation-delay: 2200ms; }
.intro-mycelium .myc-leaf-3 { animation-delay: 2320ms; }
.intro-mycelium .myc-leaf-4 { animation-delay: 2430ms; }
.intro-mycelium .myc-leaf-5 { animation-delay: 2560ms; }
@keyframes myc-leaf-unfurl {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1);  opacity: 1; }
}

/* forest: 4 side arrayanes scale-in around the central tree
   1100ms duration with two-stage keyframes so the user sees a clear
   sapling-then-tree transition rather than an instant pop. */
.intro-mycelium .myc-forest-tree {
  transform-box: view-box;
  transform: scale(0);
  opacity: 0;
  animation: myc-forest-grow 1100ms cubic-bezier(.16,.84,.44,1) forwards;
}
.intro-mycelium .ft-1 { transform-origin: 140px 320px; animation-delay: 3300ms; }
.intro-mycelium .ft-2 { transform-origin: 460px 320px; animation-delay: 3420ms; }
.intro-mycelium .ft-3 { transform-origin:  76px 320px; animation-delay: 3560ms; }
.intro-mycelium .ft-4 { transform-origin: 524px 320px; animation-delay: 3680ms; }

/* Two-stage growth so the trees visibly mature: rapid sprout, then a
   slower second push that doubles their size into a full canopy. */
@keyframes myc-forest-grow {
  0%   { transform: scale(0);    opacity: 0; }
  18%  { opacity: 1; }
  35%  { transform: scale(0.45); }   /* sapling stage */
  60%  { transform: scale(0.55); }   /* brief hold */
  100% { transform: scale(1);    opacity: 1; }
}

/* mycorriza connecting the forest: dashed lines drawn between tree bases */
.intro-mycelium .myc-network {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  opacity: 0.85;
  animation: myc-net-draw 720ms cubic-bezier(.2,.7,.2,1) forwards;
}
.intro-mycelium .mn-1 { animation-delay: 4000ms; }
.intro-mycelium .mn-2 { animation-delay: 4060ms; }
.intro-mycelium .mn-3 { animation-delay: 4180ms; }
.intro-mycelium .mn-4 { animation-delay: 4240ms; }
.intro-mycelium .mn-5 { animation-delay: 4360ms; }
.intro-mycelium .mn-6 { animation-delay: 4420ms; }
@keyframes myc-net-draw { to { stroke-dashoffset: 0; } }

/* whole canvas holds the final composition, then fades out */
.intro-mycelium .myc-canvas {
  animation: myc-fade 320ms 5500ms ease forwards;
}
@keyframes myc-fade { to { opacity: 0; transform: scale(1.04); } }

/* ============================================================
   2) Logo build-up
   ============================================================ */
.intro-logo svg { width: min(60vmin, 380px); height: auto; }
.intro-logo .lg-line {
  stroke-dasharray: 80; stroke-dashoffset: 80;
  animation: lg-draw 380ms cubic-bezier(.2,.7,.2,1) forwards;
}
.intro-logo .lg-line.d1 { animation-delay: 700ms; }
.intro-logo .lg-line.d2 { animation-delay: 760ms; }
.intro-logo .lg-line.d3 { animation-delay: 820ms; }
.intro-logo .lg-line.d4 { animation-delay: 880ms; }
.intro-logo .lg-line.d5 { animation-delay: 940ms; }
.intro-logo .lg-line.d6 { animation-delay: 1000ms; }
@keyframes lg-draw { to { stroke-dashoffset: 0; } }
.intro-logo .lg-node {
  transform-box: fill-box; transform-origin: center;
  transform: scale(0); opacity: 0;
  animation: lg-node 360ms cubic-bezier(.2,.7,.2,1) forwards;
}
.intro-logo .lg-node:nth-of-type(1) { animation-delay: 100ms; }
.intro-logo .lg-node:nth-of-type(2) { animation-delay: 180ms; }
.intro-logo .lg-node:nth-of-type(3) { animation-delay: 260ms; }
.intro-logo .lg-node:nth-of-type(4) { animation-delay: 340ms; }
.intro-logo .lg-node:nth-of-type(5) { animation-delay: 420ms; }
.intro-logo .lg-node:nth-of-type(6) { animation-delay: 500ms; }
.intro-logo .lg-node:nth-of-type(7) { animation-delay: 580ms; }
@keyframes lg-node {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1);  opacity: 1; }
}
.intro-logo .lg-wordmark {
  font-family: "Fraunces", "Sora", Georgia, serif;
  font-weight: 600;
  font-size: clamp(2.6rem, 5vw, 4rem);
  color: var(--azul, #1F3B5B);
  margin-top: 18px;
  letter-spacing: 0.4em;
  opacity: 0;
  animation: lg-word 600ms 1200ms cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes lg-word {
  0%   { opacity: 0; letter-spacing: 0.4em; transform: translateY(8px); }
  100% { opacity: 1; letter-spacing: 0;     transform: translateY(0); }
}
.intro-logo .lg-canvas {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  animation: lg-fade 500ms 1750ms ease forwards;
}
@keyframes lg-fade { to { opacity: 0; transform: scale(0.96); } }

/* ============================================================
   3) Spores germinating
   ============================================================ */
.intro-spores svg { width: min(82vmin, 720px); height: auto; }
.intro-spores .sp-soil {
  opacity: 0;
  animation: sp-soil 500ms 100ms ease forwards;
}
@keyframes sp-soil { to { opacity: 0.6; } }
.intro-spores .sp-spore  { /* JS-driven via WAAPI */ }
.intro-spores .sp-sprout {
  stroke-dasharray: 80; stroke-dashoffset: 80;
  /* JS-driven start */
}
.intro-spores .sp-thread {
  stroke-dasharray: 160; stroke-dashoffset: 160;
}
.intro-spores .sp-canvas {
  animation: sp-fade 500ms 1750ms ease forwards;
}
@keyframes sp-fade { to { opacity: 0; } }

/* ============================================================
   4) Underground emergence
   ============================================================ */
.intro-emergence { position: relative; width: 100%; height: 100%; }
.intro-emergence .em-curtain {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, #3B2E26 0%, #5b4a3c 35%, #898561 70%, #DCC8A8 100%);
  transform: translateY(0);
  animation: em-rise 1500ms 200ms cubic-bezier(.7,0,.2,1) forwards;
  overflow: hidden;
}
@keyframes em-rise {
  0%   { transform: translateY(0);    }
  100% { transform: translateY(-105%); }
}
.intro-emergence .em-curtain::before {
  /* topographic dotted texture */
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(247,245,242,0.18) 1px, transparent 0);
  background-size: 22px 22px;
  opacity: 0.6;
}
.intro-emergence .em-roots {
  position: absolute;
  left: 0; right: 0;
  bottom: -2px;
  width: 100%;
  display: block;
}
.intro-emergence .em-root {
  transform-box: fill-box;
  transform-origin: top center;
  animation: em-root-sway 1.2s ease-in-out infinite;
}
.intro-emergence .em-root:nth-child(2n) { animation-duration: 1.4s; animation-delay: -0.3s; }
.intro-emergence .em-root:nth-child(3n) { animation-duration: 1.6s; animation-delay: -0.6s; }
@keyframes em-root-sway {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg);  }
}
.intro-emergence .em-dirt {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #B07A4A;
  top: 60%;
  opacity: 0;
  animation: em-dirt 1400ms ease-in forwards;
}
.intro-emergence .em-canvas {
  animation: em-fade 360ms 1800ms ease forwards;
}
@keyframes em-fade { to { opacity: 0; } }

@keyframes em-dirt {
  0%   { opacity: 1; transform: translate(0, 0); }
  100% { opacity: 0; transform: translate(var(--dx, 0px), 220px); }
}

/* ============================================================
   prefers-reduced-motion: kill all intros
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  #intro-root .intro-stage { display: none !important; }
}

/* ============================================================
   Vistas (gallery) page styles
   ============================================================ */
.vistas-main { padding: 56px 0 96px; }
.vistas-head { margin-bottom: 48px; }
.vistas-head .breadcrumb {
  font-size: 0.85rem;
  color: var(--ink-soft, #4a5160);
  margin-bottom: 18px;
}
.vistas-head .breadcrumb a { color: var(--azul, #1F3B5B); font-weight: 500; }
.vistas-head h1 {
  font-family: "Fraunces", "Sora", Georgia, serif;
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 12px;
}
.vistas-head p { max-width: 640px; }

.vistas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 720px) { .vistas-grid { grid-template-columns: 1fr; } }

.vista-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line, #e8e2d6);
  border-radius: var(--radius, 18px);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.vista-card.is-default {
  border-color: rgba(102, 183, 201, 0.65);
  box-shadow: 0 30px 60px -30px rgba(102, 183, 201, 0.35);
}
.vista-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.vista-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #fbf8f1, #efe7d3);
  overflow: hidden;
  cursor: pointer;
  border-bottom: 1px solid var(--line, #e8e2d6);
}
.vista-thumb svg { width: 100%; height: 100%; display: block; }
.vista-thumb .vista-play {
  position: absolute; inset: auto 12px 12px auto;
  background: rgba(31, 59, 91, 0.9);
  color: var(--blanco, #F7F5F2);
  border: none;
  border-radius: 999px;
  padding: 8px 16px;
  font: 500 0.78rem/1 "Sora", system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.vista-thumb .vista-play:hover { background: var(--azul, #1F3B5B); }

.vista-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.vista-body .meta {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--arcilla, #898561);
  font-weight: 600;
}
.vista-body h3 { margin: 0; font-size: 1.15rem; color: var(--azul, #1F3B5B); }
.vista-body p { margin: 0; font-size: 0.92rem; color: var(--ink-soft, #4a5160); flex: 1; }
.vista-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 18px;
  align-items: center;
}
.vista-actions .btn-link {
  padding: 8px 0; font-size: 0.88rem;
}
.vista-actions .btn {
  padding: 9px 16px;
  font-size: 0.85rem;
}
.vista-default-chip {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: #fff;
  background: var(--agua, #66B7C9);
  padding: 4px 10px; border-radius: 999px;
  margin-left: auto;
}
.vista-card.is-default .vista-mark-default { display: none; }
.vista-card:not(.is-default) .vista-default-chip { display: none; }