/* Soy Poder Ancestral - movimiento cinematográfico ligero, sin librerías externas. */
.hero, .closing { isolation:isolate; }
.ancestral-particles {
  position:absolute; inset:0; width:100%; height:100%;
  display:block; z-index:0; pointer-events:none; opacity:.7;
}
.hero > .hero-grid, .closing > .container { position:relative; z-index:2; }
.hero .hero-art { isolation:isolate; }
.hero-art.ancestral-tree::before {
  content:""; display:block; position:absolute; z-index:-1;
  inset:9% -11% 8%; width:auto; height:auto;
  border:0; border-radius:50%; transform:none;
  background:radial-gradient(ellipse at 50% 44%, rgba(182,123,33,.13) 0%, rgba(136,88,28,.065) 29%, transparent 68%);
  filter:blur(12px);
  animation:ancestral-aura 9s ease-in-out infinite;
  pointer-events:none;
}
.hero-art.ancestral-tree::after { display:none; }
.ancestral-tree img {
  animation:ancestral-breath 9s ease-in-out infinite;
  transform-origin:50% 50%;
  filter:drop-shadow(0 9px 18px rgba(196,139,46,.19));
  will-change:transform;
}
@keyframes ancestral-breath {
  0%,100% { transform:scale(1); opacity:.965; }
  50% { transform:scale(1.012); opacity:1; }
}
@keyframes ancestral-aura {
  0%,100% { opacity:.62; transform:scale(.985); }
  50% { opacity:1; transform:scale(1.04); }
}
/* Revelado: ocultamos solo si JS lo ha activado y el movimiento está permitido */
.fx-ready .fx-reveal:not(.fx-seen) {
  opacity:0; transform:translate3d(0,17px,0);
}
.fx-reveal {
  transition:opacity 850ms cubic-bezier(.22,1,.36,1),transform 850ms cubic-bezier(.22,1,.36,1);
}
.fx-reveal.fx-seen { opacity:1; transform:translate3d(0,0,0); }
.fx-ready .fx-reveal.fx-delay-1 { transition-delay:95ms; }
.fx-ready .fx-reveal.fx-delay-2 { transition-delay:180ms; }
.fx-ready .fx-reveal.fx-delay-3 { transition-delay:245ms; }
/* Firma de luz bajo las líneas introductorias */
.section .eyebrow, .videos .eyebrow { position:relative; display:table; }
.section .eyebrow::after, .videos .eyebrow::after {
  content:""; display:block; margin-top:12px; height:1px; width:46px;
  background:linear-gradient(90deg, #e4c384, rgba(206,163,89,.08));
  transform-origin:left center; transform:scaleX(0); transition:transform 1250ms cubic-bezier(.2,.7,.2,1);
}
.section .eyebrow.fx-seen::after, .videos .eyebrow.fx-seen::after { transform:scaleX(1); }
/* Profundidad sin zoom, ni cortes de la imagen original. */
.depth-photo { position:relative; isolation:isolate; }
.depth-photo img { transform:translate3d(0,var(--photo-shift,0px),0); will-change:transform; }
.depth-photo::before {
  content:""; position:absolute; inset:-1px; z-index:1; pointer-events:none;
  background:linear-gradient(115deg, transparent 32%, rgba(242,218,169,.075) 49%, transparent 68%);
  background-size:220% 100%; background-position:120% 0;
  opacity:0; transition:opacity 1100ms ease, background-position 2100ms ease;
}
.depth-photo.fx-seen::before { opacity:.95; background-position:25% 0; }
.depth-photo::after { pointer-events:none; }
/* Trayectorias doradas: un trazo ramificado que se dibuja al desplazarse. */
.roots-grid { position:relative; isolation:isolate; }
.roots-grid article { z-index:1; }
.roots-network {
  display:block; position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; overflow:visible; z-index:0; opacity:.4;
}
.roots-network--mobile { display:none; }
.roots-network path {
  fill:none; stroke:#b88a44; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke;
}
.roots-network .roots-branch { opacity:.68; stroke-width:.8; }
.roots-network--desktop { transform:translateY(26px); }
/* Umbral de luz de cada video. */
.video-portal {
  position:relative; isolation:isolate; background:#050505; overflow:hidden;
  border:1px solid rgba(210,169,92,.48);
  box-shadow:0 14px 34px rgba(0,0,0,.22);
  transition:border-color 450ms ease,box-shadow 450ms ease;
}
.video-portal:hover, .video-portal:focus-within {
  border-color:rgba(244,207,133,.85);
  box-shadow:0 0 0 1px rgba(200,150,64,.17),0 0 30px rgba(180,115,28,.18);
}
.video-portal video {
  display:block; width:100%; aspect-ratio:9 / 12; height:auto;
  border:0; box-shadow:none; object-fit:contain; background:#070706;
}
.portal-trigger {
  position:absolute; inset:0; z-index:2; border:0; padding:20px;
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:18px;
  background:linear-gradient(180deg,rgba(9,7,4,.06),rgba(6,5,4,.48));
  color:#f7e1b4; cursor:pointer; transition:opacity 400ms ease,visibility 400ms ease;
}
.portal-trigger:focus-visible { outline:2px solid #f9d898; outline-offset:-4px; }
.portal-ring {
  display:grid; place-items:center; width:82px; height:82px;
  border-radius:50%; border:1px solid rgba(238,199,116,.84);
  box-shadow:0 0 0 9px rgba(206,164,85,.075),0 0 25px rgba(189,136,43,.25),inset 0 0 20px rgba(192,138,45,.12);
  background:rgba(8,7,6,.36);
  animation:portal-pulse 5.6s ease-in-out infinite;
}
.portal-play-symbol { display:block; font-size:21px; margin-left:4px; line-height:1; }
.portal-label { color:#e9d9bb; text-transform:uppercase; font-size:10px; font-weight:700; letter-spacing:.18em; text-shadow:0 2px 9px #000; }
@keyframes portal-pulse {
  0%,100% { transform:scale(1); box-shadow:0 0 0 9px rgba(206,164,85,.075),0 0 25px rgba(189,136,43,.24); }
  50% { transform:scale(1.045); box-shadow:0 0 0 13px rgba(206,164,85,.03),0 0 39px rgba(189,136,43,.32); }
}
.video-portal.is-playing .portal-trigger {
  opacity:0; visibility:hidden; pointer-events:none;
}
.video-portal.is-opening::after {
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(112deg,transparent 20%,rgba(238,193,110,.26) 50%,transparent 74%);
  animation:portal-open 680ms ease-out both;
}
@keyframes portal-open {
  from { transform:translateX(-120%); opacity:.1; }
  40% { opacity:1; }
  to { transform:translateX(120%); opacity:0; }
}
/* Sutil brillo al interactuar con los CTA, sin pulsos persistentes. */
.button.fill { position:relative; overflow:hidden; }
.button.fill::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.23) 51%,transparent 77%);
  transform:translateX(-125%); transition:transform 640ms ease;
}
.button.fill:hover::before, .button.fill:focus-visible::before { transform:translateX(125%); }
@media(max-width:700px) {
  .ancestral-particles { opacity:.55; }
  .roots-network--desktop { display:none; }
  .roots-network--mobile { display:block; opacity:.34; inset:0; }
  .roots-grid article { background:transparent; }
  .portal-ring { width:72px; height:72px; }
  .video-portal video { aspect-ratio:16 / 12; }
}
@media(prefers-reduced-motion:reduce) {
  .ancestral-particles,.roots-network { display:none!important; }
  .ancestral-tree img, .hero-art.ancestral-tree::before, .portal-ring { animation:none!important; }
  .fx-ready .fx-reveal:not(.fx-seen) { opacity:1!important; transform:none!important; }
  .fx-reveal,.section .eyebrow::after,.depth-photo::before,.video-portal,.portal-trigger { transition:none!important; }
  .depth-photo img { transform:none!important; will-change:auto!important; }
}


/* Árbol original: únicamente un halo dorado delicado, sin recorridos ni líneas. */
.hero-art.ancestral-tree::before,
.hero-art.ancestral-tree::after { display:none; }
.hero-art.ancestral-tree .tree-emblem {
  position:relative;
  display:block;
  flex:none;
  isolation:isolate;
  width:min(405px,100%);
  aspect-ratio:684 / 909;
}
.hero-art.ancestral-tree .tree-emblem img {
  width:100%;
  height:auto;
  max-height:none;
  display:block;
  margin:0;
  transform:none;
  object-fit:contain;
  mix-blend-mode:normal;
}
.tree-emblem .tree-main-image {
  position:relative;
  z-index:2;
  animation:none!important;
  filter:none!important;
}
.tree-emblem .tree-glow-image {
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  filter:blur(7px) brightness(1.35) saturate(1.2)!important;
  animation:soft-ancestral-light 7s ease-in-out infinite!important;
}
@keyframes soft-ancestral-light {
  0%,100% {opacity:.16;}
  50% {opacity:.43;}
}
@media(max-width:700px) {
  .hero-art.ancestral-tree .tree-emblem {width:min(70vw,310px);}
}
@media(prefers-reduced-motion:reduce) {
  .tree-emblem .tree-glow-image {animation:none!important;opacity:.2;}
}

/* Esferas de energía ascendente, SIN líneas trazadas sobre las ramas ni alrededor del anillo. */
.tree-emblem .tree-floating-energy {
  position:absolute;
  inset:0;
  z-index:5;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
}
.tree-energy-orbs circle {
  filter:drop-shadow(0 0 5px rgba(255,227,145,.86));
}
/* Franja de luz vertical que sube desde las raíces hasta la copa:
   sin movimiento horizontal, diagonal ni circunferencial. */
.tree-emblem::before {
  content:"";
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:3;
  pointer-events:none;
  background-image:linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255,227,148,.11) 17%,
    rgba(255,245,204,.72) 49%,
    rgba(255,203,111,.16) 78%,
    transparent 100%
  );
  background-size:100% 33%;
  background-position:50% 115%;
  background-repeat:no-repeat;
  -webkit-mask-image:url('/media/arbol-logo-web.png');
  mask-image:url('/media/arbol-logo-web.png');
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  animation:ancestral-light-up 6.8s linear infinite;
  mix-blend-mode:screen;
}
@keyframes ancestral-light-up {
  0% {background-position:50% 115%;opacity:0;}
  9% {opacity:.83;}
  80% {background-position:50% -12%;opacity:.88;}
  98%,100% {background-position:50% -12%;opacity:0;}
}
@media(prefers-reduced-motion:reduce) {
  .tree-emblem::before,.tree-floating-energy {display:none!important;}
}

/* Pilares en móvil: el ornamento queda a la izquierda, nunca encima del texto. */
@media (max-width:700px) {
  .roots-grid { position:relative; }
  .roots-grid .roots-network--mobile {
    display:block;
    position:absolute;
    left:0;
    top:0;
    right:auto;
    bottom:auto;
    inset:0 auto auto 0;
    width:30px;
    height:100%;
    overflow:hidden;
    opacity:.52;
    z-index:0;
    pointer-events:none;
  }
  .roots-grid article {
    position:relative;
    z-index:1;
    border-top:0;
    padding-left:39px;
    padding-right:0;
  }
  .roots-grid article::before { display:none; }
  .roots-grid article > span,
  .roots-grid article > h3,
  .roots-grid article > p { position:relative; z-index:1; }
}

/* Cinco ancestras: fotografía completa con una luz discreta, sin ampliar ni recortar. */
.essence { padding-bottom:50px; }
.essence-image.depth-photo { position:relative; overflow:visible; isolation:isolate; }
.essence-image.depth-photo > img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  object-fit:contain;
  object-position:center;
}
.essence-image.depth-photo::after { display:none; }
.ancestral-photo-sparks {
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  overflow:hidden;
}
.ancestral-spark {
  display:block;
  position:absolute;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#ffe5a4;
  box-shadow:0 0 5px 2px rgba(255,212,121,.35), 0 0 13px 5px rgba(233,162,61,.13);
  opacity:0;
  animation:ancestral-spark-rise 6.8s ease-in-out infinite;
}
.ancestral-spark::after {
  content:"";
  position:absolute;
  left:-2.5px;
  top:-2.5px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,245,205,.32),transparent 70%);
}
.sparkle-one   { left:8%; top:31%; animation-delay:-1s; }
.sparkle-two   { left:24%; top:78%; animation-delay:-4.5s; }
.sparkle-three { left:39%; top:14%; animation-delay:-2.7s; }
.sparkle-four  { left:60%; top:73%; animation-delay:-5.9s; }
.sparkle-five  { left:79%; top:19%; animation-delay:-3.6s; }
.sparkle-six   { left:93%; top:66%; animation-delay:-.3s; }
@keyframes ancestral-spark-rise {
  0%,100% {opacity:0; transform:translate3d(0,8px,0) scale(.75);}
  26% {opacity:.6;}
  57% {opacity:.9; transform:translate3d(0,-8px,0) scale(1);}
  82% {opacity:.22;}
}
/* Marco dorado continuo y una única luz ambiental que gira suavemente por el borde.
   Sin fragmentos, rayas móviles ni esquinas decorativas. */
@property --ancestral-frame-angle {
  syntax:"<angle>";
  inherits:false;
  initial-value:0deg;
}
.ancestral-photo-frame {
  position:absolute;
  inset:-6px;
  z-index:4;
  display:block;
  pointer-events:none;
  border:1px solid rgba(218,175,102,.65);
  box-shadow:0 0 7px rgba(220,166,77,.13);
  opacity:1;
  overflow:visible;
}
.ancestral-photo-frame::before {
  content:"";
  position:absolute;
  inset:-1px;
  border:1px solid rgba(230,182,97,.19);
  box-shadow:0 0 12px rgba(232,180,87,.22),0 0 24px rgba(219,155,61,.075);
  pointer-events:none;
  animation:ancestral-frame-breathe 6.8s ease-in-out infinite;
}
.ancestral-photo-frame::after {
  content:"";
  position:absolute;
  inset:-2px;
  padding:2px;
  pointer-events:none;
  background:conic-gradient(
    from var(--ancestral-frame-angle),
    rgba(210,154,73,.17) 0deg,
    rgba(216,164,82,.28) 65deg,
    rgba(239,193,112,.49) 125deg,
    rgba(255,231,161,.88) 172deg,
    rgba(255,246,211,.96) 196deg,
    rgba(248,209,128,.78) 222deg,
    rgba(225,174,92,.35) 286deg,
    rgba(210,154,73,.17) 360deg
  );
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  filter:drop-shadow(0 0 5px rgba(255,215,129,.55));
  animation:ancestral-frame-orbit 10s linear infinite;
}
@keyframes ancestral-frame-orbit {
  to {--ancestral-frame-angle:360deg;}
}
@keyframes ancestral-frame-breathe {
  0%,100% {opacity:.55;}
  50% {opacity:1;}
}
/* Transición de sombra ancestral a marfil cálido, sin corte abrupto. */
.essence-to-manifest {
  position:relative;
  height:116px;
  isolation:isolate;
  overflow:hidden;
  background:linear-gradient(180deg,
    #0d0c09 0%,
    #211c14 26%,
    #6a573b 56%,
    #d2c4aa 82%,
    #f1ebdf 100%);
}
.essence-to-manifest .transition-aura {
  position:absolute;
  inset:12% 10% 7%;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(224,180,94,.17),transparent 69%);
  opacity:.75;
}
@media(max-width:700px) {
  .essence.section { padding-bottom:31px; }
  .essence-to-manifest {height:96px;}
  .manifest {padding-top:77px;}
  .ancestral-photo-frame {inset:-6px;}
}
@media(prefers-reduced-motion:reduce) {
  .ancestral-spark {animation:none!important;opacity:.42;}
  .ancestral-photo-frame {transition:none!important;}
  .ancestral-photo-frame::before,.ancestral-photo-frame::after {animation:none!important;}
}

/* Texto oficial de la sección musical: lectura cómoda, sin ocultar contenido. */
.videos h2.song-story-title {
  max-width:1040px;
  margin:22px 0 40px;
  font-size:clamp(37px,4.1vw,62px);
  line-height:1.24;
  letter-spacing:-.016em;
  text-wrap:balance;
}
.videos .song-story-title em {
  font-style:normal;
  color:#dfba79;
}
.song-story {
  width:100%;
  max-width:890px;
  border-left:1px solid rgba(218,171,90,.37);
  padding-left:26px;
  margin:0 0 83px;
}
.song-story p {
  color:#bcb4a7;
  font:400 13px/2 var(--body);
  letter-spacing:.005em;
  margin:0 0 23px;
}
.song-story p:last-child { margin-bottom:0; }
.song-story p.song-story-emphasis {
  font:italic 400 clamp(26px,2.6vw,35px)/1.27 var(--poem);
  color:#e4c994;
  max-width:800px;
  margin:26px 0 28px;
}
.song-story p.song-story-conclusion {
  color:#e6d5ba;
  font-weight:500;
  border-top:1px solid rgba(218,171,90,.22);
  padding-top:28px;
  margin-top:27px;
}
.song-story-videos-heading { margin:0 0 34px; }
.song-story-videos-heading .rule { margin:0 0 22px; }
.song-story-videos-heading h3 {
  font:400 clamp(21px,2.5vw,30px)/1.36 var(--head);
  color:var(--light);
  letter-spacing:.025em;
  margin:0;
}
@media(max-width:700px) {
  .videos h2.song-story-title {
    font-size:clamp(26px,7.2vw,38px);
    margin:18px 0 32px;
    line-height:1.27;
    text-wrap:pretty;
  }
  .song-story {
    padding-left:14px;
    margin-bottom:62px;
    border-left-color:rgba(218,171,90,.28);
  }
  .song-story p {font-size:12.5px;line-height:1.9;margin-bottom:20px;}
  .song-story p.song-story-emphasis {
    font-size:clamp(26px,7.4vw,33px);
    line-height:1.25;
    margin:25px 0;
  }
  .song-story p.song-story-conclusion {padding-top:24px;margin-top:23px;}
  .song-story-videos-heading {margin-bottom:29px;}
  .song-story-videos-heading h3 {font-size:20px;}
}

/* El logo del cierre comparte las trayectorias del árbol principal:
   energía ascendente y esferas en las ramas, sin trazos decorativos. */
.closing .closing-tree.tree-emblem {
  position:relative;
  display:block;
  isolation:isolate;
  width:117px;
  aspect-ratio:684 / 909;
  height:auto;
  margin:0 auto 17px;
}
.closing .closing-tree.tree-emblem img {
  width:100%;
  height:auto;
  max-height:none;
  display:block;
  margin:0;
  padding:0;
  object-fit:contain;
  mix-blend-mode:normal;
  animation:none;
  transform:none;
}
.closing .closing-tree.tree-emblem .tree-main-image {
  position:relative;
  z-index:2;
  filter:none!important;
}
.closing .closing-tree.tree-emblem .tree-glow-image {
  position:absolute;
  inset:0;
  z-index:1;
  opacity:.28;
  pointer-events:none;
  filter:blur(7px) brightness(1.35) saturate(1.2)!important;
  animation:soft-ancestral-light 7s ease-in-out infinite!important;
}
.closing .closing-tree.tree-emblem::before {
  /* La misma franja vertical ya definida en .tree-emblem::before */
  z-index:3;
}
.closing .closing-tree.tree-emblem .tree-floating-energy {
  z-index:5;
}
@media(prefers-reduced-motion:reduce) {
  .closing .closing-tree.tree-emblem .tree-glow-image {
    animation:none!important;
    opacity:.2;
  }
}