/* ============================================================
   BTS · Born to Sing — Landing interactiva
   ============================================================ */


:root {
  --lav-100: #f3efff;
  --lav-200: #e9e3fb;
  --lav-300: #d9d0f7;
  --purple:  #7c5cdb;
  --purple-deep: #5b45c9;
  --indigo:  #4b3fd6;
  --blue:    #4a52e0;
  --blue-deep: #3a34c9;
  --ink:     #14121f;

  --c-trivias: #63c4e8;
  --c-data:    #f6b25a;
  --c-army:    #d6297f;
  --red:       #e8382f;

  --white: #ffffff;

  --font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Archivo Black", var(--font);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
}
html { scroll-behavior: auto; }
body {
  font-family: var(--font); color: var(--ink);
  /*background: var(--lav-100);*/ overflow-x: hidden;
   font-style: normal;
    font-display: swap;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; user-select: none; -webkit-user-drag: none; }


@font-face {
    font-family: 'Bobby Jones Condensed';
    src: url('https://nuevasnarrativasec.github.io/bts/fonts/BobbyJones-Condensed.woff2') format('woff2'),
        url('https://nuevasnarrativasec.github.io/bts/fonts/BobbyJones-Condensed.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bray Notes';
    src: url('../fonts/BrayNotes-Regular.woff2') format('woff2'),
        url('../fonts/BrayNotes-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Monigue Regular';
    src: url('https://nuevasnarrativasec.github.io/bts/fonts/Monigue-Regular.woff2') format('woff2'),
        url('https://nuevasnarrativasec.github.io/bts/fonts/Monigue-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Prelo Book';
    src: url('https://nuevasnarrativasec.github.io/bts/fonts/Prelo-Book.woff2') format('woff2'),
        url('https://nuevasnarrativasec.github.io/bts/fonts/Prelo-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Prelo Medium';
    src: url('https://nuevasnarrativasec.github.io/bts/fonts/Prelo-Medium.woff2') format('woff2'),
        url('https://nuevasnarrativasec.github.io/bts/fonts/Prelo-Medium.woff') format('woff');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Prelo Semibold';
    src: url('https://nuevasnarrativasec.github.io/bts/fonts/Prelo-SemiBold.woff2') format('woff2'),
        url('https://nuevasnarrativasec.github.io/bts/fonts/Prelo-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Prelo Bold';
    src: url('https://nuevasnarrativasec.github.io/bts/fonts/Prelo-Bold.woff2') format('woff2'),
        url('https://nuevasnarrativasec.github.io/bts/fonts/Prelo-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Prelo Extrabold';
    src: url('https://nuevasnarrativasec.github.io/bts/fonts/Prelo-Exbd.woff2') format('woff2'),
        url('https://nuevasnarrativasec.github.io/bts/fonts/Prelo-Exbd.woff') format('woff');
    font-style: normal;
    font-display: swap;
}



/* ---------- Progreso + hint ---------- */
.progress-bar {
  position: fixed; top: 0; left: 0; height: 4px; width: 0%;
  background: linear-gradient(90deg, var(--c-trivias), var(--purple), var(--c-army));
  z-index: 999; transition: width .1s linear;
}
.scroll-hint {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: .28em; color: var(--purple-deep);
  z-index: 900; transition: opacity .4s ease; opacity: .75;
}
.scroll-hint__mouse { width: 20px; height: 32px; border: 2px solid var(--purple-deep); border-radius: 12px; position: relative; }
.scroll-hint__mouse span {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 3px; height: 6px; border-radius: 2px; background: var(--purple-deep);
  animation: mouseScroll 1.5s infinite;
}
@keyframes mouseScroll {
  0% { opacity: 0; transform: translate(-50%, 0); }
  40% { opacity: 1; }
  80%, 100% { opacity: 0; transform: translate(-50%, 12px); }
}

/* ============================================================
   ESCENAS
   ============================================================ */
.scene {
  position: relative; width: 100%; min-height: 100vh;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}

/* ---------- ESCENA 1 · HERO ---------- */
.scene--hero {
  /* termina en lav-200 para empatar sin corte con la escena de la ballena */
  background: linear-gradient(180deg, var(--white) 0%, var(--lav-100) 52%, var(--lav-200) 100%);
}

/* Cabecera editorial */
.masthead {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  padding: 14px clamp(16px, 3vw, 40px) 10px;
  border-bottom: 1px solid rgba(20,18,31,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,0));
}
.masthead__top { display: flex; align-items: stretch; gap: 0; }
.masthead__logo {
  display: flex; align-items: center; gap: 8px;
  background: var(--red); color: var(--white);
  padding: 8px 12px; border-radius: 6px; flex: 0 0 auto;
}
.masthead__logo b { font-family: var(--font-display); font-size: clamp(28px, 3vw, 40px); line-height: .9; }
.masthead__logo span { font-size: clamp(9px, .8vw, 11px); font-weight: 700; letter-spacing: .06em; line-height: 1.15; }

.masthead__cols { display: flex; flex: 1; min-width: 0; }
.masthead__cols article {
  flex: 1; min-width: 0; padding: 2px clamp(10px, 1.4vw, 22px);
  border-left: 1px solid rgba(20,18,31,.14);
}
.masthead__cols article:first-child { border-left: none; padding-left: clamp(12px, 1.6vw, 24px); }
.masthead__kicker { display: block; font-size: clamp(11px, 1vw, 14px); font-weight: 500; color: #6a6580; margin-bottom: 2px; }
.masthead__cols h4 { font-size: clamp(14px, 1.35vw, 20px); font-weight: 700; line-height: 1.12; color: var(--ink); }

.masthead__nav {
  display: flex; align-items: center; margin-top: 12px;
  font-size: clamp(11px, 1vw, 14px); font-weight: 500;
}
.masthead__nav a { color: #6a6580; text-decoration: none; transition: color .2s; white-space: nowrap; }
.masthead__nav a:hover { color: var(--purple-deep); }
.masthead__nav a.is-active { color: var(--red); font-weight: 700; }
.masthead__nav-em { color: var(--red) !important; font-weight: 700; }
.dotsep { flex: 1; height: 0; margin: 0 10px; border-top: 2px dotted rgba(20,18,31,.28); }

.hero__inner {
  position: relative; width: min(94vw, 940px); aspect-ratio: 16 / 10;
  display: flex; align-items: center; justify-content: center;
}
/* --- Logotipo BTS diagramado (peso bold, no black) --- */
.bts-logo {
  position: relative; width: 100%; height: 100%;
  font-family: var(--font); font-weight: 700;
  color: var(--ink); will-change: transform;
}
.bts-logo span { display: block; }
.bts-logo__b, .bts-logo__s {
  position: absolute; top: 50%;
  font-size: clamp(150px, 30vw, 360px); line-height: .7;
  letter-spacing: -.03em;
}
.bts-logo__b { left: 13%; transform: translateY(-52%); }
.bts-logo__s {
    right: 13%;
    top: 40%;
    transform: translateY(-48%) rotate(-100deg); transform-origin: center;
  }
/* La T como barra gruesa inclinada que cruza entre B y S */
.bts-logo__t {
  position: absolute; left: 30%; top: 44%;
  width: clamp(150px, 27vw, 250px);
  height: clamp(150px, 27vw, 290px);
  transform: rotate(35deg); transform-origin: center;
}
.bts-logo__t .bar {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 100%; height: clamp(34px, 6.2vw, 74px);
  background: var(--ink); border-radius: 4px;
}
.bts-logo__t .stem {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: clamp(34px, 6.2vw, 74px); height: 100%;
  background: var(--ink); border-radius: 4px;
}

.tag {
  position: absolute; font-size: clamp(9px, 1vw, 12px); font-weight: 700;
  letter-spacing: .12em; text-align: center; color: var(--ink);
  line-height: 1.15; will-change: transform;
}
.tag::before {
  content: ""; display: block;
  width: clamp(38px, 5vw, 58px); height: clamp(38px, 5vw, 58px);
  border-radius: 16px; margin: 0 auto 8px;
  box-shadow: 0 12px 30px -8px rgba(60,40,120,.35);
}
.tag--trivias { top: 25%;  left: 46%; }
.tag--trivias::before { background: var(--c-trivias); }
.tag--data    { top: 72%; left: 24%; }
.tag--data::before { background: var(--c-data); }
.tag--army    { top: 60%; left: 66%; }
.tag--army::before { background: var(--c-army); }

.hero__subtitle {
  position: absolute; bottom: 2%; left: 2%;
  font-size: clamp(15px, 2vw, 22px); font-weight: 600;
  color: var(--purple-deep); line-height: 1.25;
}
.hero__subtitle em { font-style: italic; font-weight: 700; color: var(--ink); }

/* ---------- ESCENA 2 · BALLENA ---------- */
.scene--whale {
  /* arranca en lav-200 (donde termina el hero) y termina en lav-100 (donde empieza la caída) */
  background: linear-gradient(180deg, var(--lav-200) 0%, var(--lav-100) 100%);
}
.whale__wrap {
  position: relative; width: 100%; height: 100vh;
  display: flex; align-items: center; justify-content: center;
}
/* Ballena sin galaxia (pre-transformación) — centrada vía GSAP */
.whale__dark {
  position: absolute; width: min(84vw, 1080px);
  top: 50%; left: 50%;
  filter: drop-shadow(0 26px 50px rgba(70,40,130,.25));
  opacity: 0; z-index: 1; will-change: transform, opacity;
}
.whale__figure {
  position: relative; width: min(88vw, 1100px);
  z-index: 2; will-change: transform;
}
.whale__img { width: 100%; filter: drop-shadow(0 30px 60px rgba(70,40,130,.28)); }
.whale__army {
  position: absolute; width: 26%; top: 20%; left: 40%;
  transform: rotate(-8deg);
  filter: drop-shadow(0 12px 24px rgba(50,30,100,.35));
  opacity: 0; will-change: transform, opacity;
}
.whale__text {
  /* posición FINAL: esquina superior derecha (la trayectoria la controla GSAP) */
  position: absolute; top: 0%; right: 6%; left: auto;
  font-family: "Bobby Jones Condensed", var(--font-display);
  text-transform: uppercase;
  font-size: clamp(26px, 4vw, 34px); font-weight: 400;
  letter-spacing: .015em;
  text-align: center; color: var(--ink); line-height: 1.12; z-index: 5;
}
.whale__text strong { color: var(--ink); font-weight: 400; }

.hearts { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.hearts span { position: absolute; font-size: 22px; opacity: 0; color: var(--purple); will-change: transform, opacity; }

/* ---------- ESCENA 3 · CAÍDA + ONDAS ---------- */
.scene--fall { background: var(--lav-100); } /* empata con el final de la escena de la ballena */
.fall__bg {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--lav-100) 0%, var(--lav-200) 30%, var(--purple) 62%, var(--indigo) 82%, var(--blue-deep) 100%);
  opacity: 0; will-change: opacity;
}
.fall__army {
  position: absolute; width: clamp(120px, 15vw, 210px);
  top: 4%; left: 50%; transform: translateX(-50%);
  z-index: 4; filter: drop-shadow(0 16px 30px rgba(20,10,60,.4));
  will-change: transform;
}
.waves {
  position: absolute; top: 50%; left: 50%;
  width: 0; height: 0; transform: translate(-50%, -50%);
  z-index: 2; will-change: transform, opacity;
}
.waves svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: visible; }
.waves path { fill: none; stroke: rgba(255,255,255,.6); stroke-width: 2; stroke-linecap: round; stroke-dasharray: .5 9; }
.fall__caption {
  position: absolute; bottom: 12%; left: 0; right: 0; text-align: center;
  color: rgba(255,255,255,.9); font-weight: 500;
  font-size: clamp(14px, 1.8vw, 20px); letter-spacing: .04em; z-index: 5; opacity: 0;
}

/* ---------- ESCENA 4 · REVEAL + CONTENIDO ---------- */
.scene--reveal { background: var(--blue-deep); }
.reveal__circle {
  position: absolute; bottom: -60vh; left: 50%;
  width: 160vh; height: 160vh; border-radius: 50%;
  background: var(--white); transform: translateX(-50%) scale(.2);
  will-change: transform;
}
.reveal__title {
  position: relative; z-index: 3;
  font-size: clamp(24px, 4vw, 48px); font-weight: 800;
  text-align: center; color: var(--ink); line-height: 1.15; opacity: 0;
}

.content { position: relative; background: var(--white); padding: clamp(40px, 8vw, 120px) clamp(20px, 6vw, 100px); }
.block { max-width: 1000px; margin: 0 auto clamp(60px, 12vh, 140px); }
.block__tags { display: flex; gap: 18px; margin-bottom: 34px; }
.block__tags--right { justify-content: flex-end; }
.chip { width: clamp(52px, 7vw, 78px); height: clamp(52px, 7vw, 78px); border-radius: 20px; box-shadow: 0 14px 30px -10px rgba(60,40,120,.4); }
.chip--data { background: var(--c-army); }
.chip--trivias { background: var(--c-trivias); }

.block__kicker { font-family: var(--font-display); font-size: clamp(20px, 3vw, 34px); letter-spacing: .04em; margin-bottom: 22px; color: var(--ink); }
.block__kicker--blue { color: var(--c-trivias); }
.block__kicker--center { text-align: center; color: var(--purple-deep); }

.block__body { max-width: 620px; }
.datum, .trivia { margin-bottom: 22px; }
.datum__label, .trivia__q { display: block; font-weight: 700; font-size: 14px; color: var(--ink); margin-bottom: 4px; }
.trivia__q { color: var(--c-trivias); }
.datum p, .trivia p { color: #4a4560; font-size: 15px; line-height: 1.55; }
.datum strong { color: var(--ink); }

/* Matriz de puntos (visualización de datos) */
.dot-matrix {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(8px, 1.2vw, 16px); max-width: 620px; margin: 34px 0 0;
}
.dot-matrix--wide { max-width: 100%; margin: 30px auto 40px; }
.dot-matrix span {
  aspect-ratio: 1; border-radius: 50%; background: var(--c-army);
  transform: scale(0); transform-origin: center;
}

/* Discografía */
.block--disco { text-align: center; }
.block__credit { color: #8a83a8; font-size: 14px; margin: 4px 0 26px; }
.disco__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px; text-align: left; }
.disco__card { background: linear-gradient(160deg, var(--lav-100), var(--lav-200)); border-radius: 20px; padding: 26px 22px; border: 1px solid rgba(124,92,219,.14); }
.disco__year { font-family: var(--font-display); font-size: 26px; color: var(--purple-deep); display: block; margin-bottom: 10px; }
.disco__card p { color: #5a5478; font-size: 14px; line-height: 1.5; }

/* ---------- ESCENA 5 · LOGO BTS ---------- */
.scene--logo { background: linear-gradient(180deg, var(--white) 0%, var(--lav-200) 45%, var(--lav-300) 100%); }
.bts-mark {
  position: relative; width: clamp(200px, 34vw, 460px); height: clamp(260px, 44vw, 600px);
}
.bts-mark__left, .bts-mark__right { position: absolute; top: 0; bottom: 0; width: 46%; background: var(--purple); opacity: .3; }
.bts-mark__left  { left: 0;  clip-path: polygon(0 0, 62% 0, 100% 100%, 38% 100%); }
.bts-mark__right { right: 0; clip-path: polygon(38% 0, 100% 0, 62% 100%, 0 100%); }
.logo__army {
  position: absolute; top: 4%; left: 50%; width: clamp(90px, 12vw, 150px);
  transform: translateX(-50%); z-index: 4;
  filter: drop-shadow(0 14px 26px rgba(50,30,100,.3)); will-change: transform;
}

/* ---------- ESCENA 6 · FINAL ---------- */
.scene--finale {
  background: linear-gradient(180deg, var(--lav-300) 0%, var(--purple) 55%, var(--purple-deep) 100%);
  flex-direction: column;
}
.bts-mark--faint {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 1; width: clamp(240px, 30vw, 420px); height: clamp(320px, 42vw, 560px);
}
.bts-mark--faint .bts-mark__left, .bts-mark--faint .bts-mark__right { background: var(--white); opacity: .12; }
.rain { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.finale__inner { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; padding-top: 6vh; }
.finale__army { width: clamp(180px, 24vw, 320px); filter: drop-shadow(0 20px 40px rgba(40,20,90,.45)); }
.finale__text { text-align: center; margin-top: 18px; color: var(--white); }
.finale__soy { font-family: var(--font-display); font-size: clamp(30px, 6vw, 68px); line-height: 1; letter-spacing: .02em; }
.finale__soy span { -webkit-text-stroke: 2px var(--white); color: transparent; }
.finale__tag { margin-top: 10px; font-weight: 500; letter-spacing: .1em; opacity: .9; }
.credits { position: relative; z-index: 3; text-align: center; color: rgba(255,255,255,.85); padding: 6vh 20px 5vh; font-size: 14px; }
.credits__names { font-weight: 700; letter-spacing: .08em; margin-top: 6px; }

@media (prefers-reduced-motion: reduce) { .scroll-hint__mouse span { animation: none; } }

@media (max-width: 640px) {
  .whale__text { top: 10%; right: 5%; left: auto; }
  .block__body { max-width: 100%; }
  .tag--trivias { left: 40%; }
  .tag--army { left: 70%; }
  .masthead__headlines em:nth-child(n+2) { display: none; }
  .dot-matrix { grid-template-columns: repeat(10, 1fr); }
}

/** INDEX BTS **/

.main-hero{
    background: url('../img/bg-portada.jpg?v2') no-repeat center top;
    background-size: cover;
    height: 100vh;
    position: relative;
}
    .box-titulo{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 100%;
    }
        .box-titulo a{
            color: #9f9f9f;
            display: block;
            font: 1.4rem / 1 'Monigue Regular';
            text-decoration: none;
            max-width: 330px;
            margin: 0 auto;
            text-align: right;
        }
        .main-hero h1{
            background: url('../img/bts-titular.png') no-repeat center top;
            background-size: 100%;
            color: transparent;
            font: 10rem/1.3 'Monigue Regular';
            height: 345px;
            margin: 0 auto;
            text-align: center;
            position: relative;
            width: 450px;
        }
    .corte-degrade{
        bottom: -100px;
        position: absolute;    
    }
    .degrade-baile-volteado{
        top: 0;
        position: absolute;    
    }
    .box-botones{
        margin-bottom: 25px;
        position: relative;
        width: 100%;
    }
        .box-botones ul{
            box-sizing: border-box;
            list-style-type: none;
            text-align: center;
        }
            .box-botones ul li{
                display: inline-block;
                vertical-align: top;
            }
                .box-botones ul li a{
                    border: 1px solid #9C7EFF;
                    border-bottom-width: 5px;
                    border-bottom-left-radius: 25px;
                    border-bottom-right-radius: 25px;
                    border-top-left-radius: 25px;
                    border-top-right-radius: 25px;
                    color: #ffffff;
                    display: block;
                    font: 1.8rem/1 'Monigue Regular';
                    max-width: 180px;
                    margin: 20px;
                    padding: 10px 40px;
                    text-align: center;
                    text-decoration: none;
                }
                    .box-botones ul li a:hover{
                        transform: translate(0,-5%);
                        transition: all .5s ease;
                    }
        .box-indicacion-desliza{
            bottom: 180px;
            margin-top: 20px;
            position: absolute;
            width: 100%;
            z-index: 10;
        }
            .box-indicacion-desliza p{
                color: #fff;
                font: 1.1rem / 1.4 'Prelo Semibold';
                text-align: center;
            }
            .box-indicacion-desliza img{
                display: block;
                margin: 5px auto;
                max-width: 25px;
            }
.box-bajada{
    background-color: #000;
    padding: 30px 0 20px; 
}
    .box-bajada h2{
        color: #fff;
        font: 1.3rem/1.3  'Prelo Bold';
        margin: 0 auto;
        max-width: 550px;
        text-align: center;
    }
        .box-bajada h2 span{
            color: #F42439;
        }

.main-animacion-1{
    background-color: #fff;
    overflow: hidden;
    padding: 90px 0 0;
}
    .main-animacion-1 h3{
        font: 5rem/1 'Monigue Regular';
        margin-bottom: 30px;
        text-transform: uppercase;
        text-align: center;
    }
    .animacion-aviso{
        align-items: center;
        display: flex;
        gap: 5px;
        justify-content: center;
        margin: 30px auto 10px;
        padding: 0;
    }
        .animacion-aviso img{
            max-width: 22px;
        }
        .animacion-aviso p{
            color: #fff;
            font: 1rem/1.3 'Prelo Bold';
        }

    .animacion-fila--1{
        align-items: center;
        display: flex;
        gap: 40px;
        justify-content: center;
        margin: 0 auto;
        max-width: 1200px;
        padding: 0 20px;
        position: relative;
    }
        .animacion-texto--1{
            flex: 0 0 170px;
        }
            .animacion-texto--1 p{
                color: var(--ink);
                font: 1.7rem/1.3 'Bray Notes';
            }

        .animacion-video-wrap{
            flex: 1 1 auto;
            max-width: 760px;
        }
            .animacion-video{
                display: block;
                width: 100%;
            }

        .animacion-cta{
            align-items: center;
            display: flex;
            flex: 0 0 auto;
            flex-direction: column;
            gap: 10px;
            position: absolute;
            right: 0;
            top: 80px;
        }
            .animacion-cta-play{
                align-items: center;
                background-color: #3ddc71;
                border: none;
                border-radius: 50%;
                cursor: pointer;
                display: flex;
                height: 52px;
                justify-content: center;
                transition: transform .2s ease;
                width: 52px;
            }
                .animacion-cta-play:hover{ transform: scale(1.06); }
                .animacion-cta-play svg{ color: #14121f; height: 22px; width: 22px; }
                .animacion-cta-play .icon-pause{ display: none; }
                .animacion-cta-play.is-playing{ background-color: var(--red); }
                    .animacion-cta-play.is-playing svg{ color: #fff; }
                    .animacion-cta-play.is-playing .icon-play{ display: none; }
                    .animacion-cta-play.is-playing .icon-pause{ display: block; }
            .animacion-cta-nombre{
                color: var(--ink);
                font: 1.3rem/1 'Monigue Regular';
                text-transform: uppercase;
                transform: rotate(180deg);
                white-space: nowrap;
                writing-mode: vertical-rl;
            }
            .animacion-cta-embed:empty{ display: none; }
            .animacion-cta-embed{
                width: 160px;
            }
                .animacion-cta-embed iframe{
                    border: none;
                    border-radius: 8px;
                    width: 100%;
                }

    .animacion-fila--2{
        margin-top: -100px;
        position: relative;        
    }
        .animacion-video--full{
            display: block;
            height: 100%;
            object-fit: cover;
            width: 100%;
            object-position: top;
            mix-blend-mode: multiply;
        }
        .animacion-texto--2{
            bottom: 150px;
            left: 50%;
            max-width: 360px;
            position: absolute;
            transform: translate(-50%);
        }
            .animacion-texto--2 p{
                color: var(--ink);
                font: 1.7rem/1.35 'Bray Notes';
            }
    #animacionVideo10{
        position: relative;
        mix-blend-mode: multiply;
    }

    #animacionCta1 iframe{
        bottom: 0;
        height: 1px;
        position: absolute;   
        opacity: 0;
    }

    @media (max-width: 900px){
        .animacion-fila--1{ flex-wrap: wrap; gap: 24px; }
        .animacion-texto--1{ flex: 1 1 100%; order: 1; text-align: center; }
        .animacion-video-wrap{ flex: 1 1 100%; max-width: 100%; order: 2; }
        /*.animacion-cta{ flex-direction: row; order: 3; }*/
            /*.animacion-cta-nombre{ transform: none; writing-mode: horizontal-tb; }*/
        .animacion-video--full{ height: 70vh; }
        .animacion-texto--2{ left: 24px; max-width: calc(100% - 48px); right: 24px; }
    }
    @media (max-width: 560px){
        .animacion-texto--1 p,
        .animacion-texto--2 p{ font-size: 1.3rem; }
        .animacion-video--full{ height: 60vh; }
        .animacion-texto--2{ bottom: 30px; }
    }

.main-animacion-2{
    background-color: #fff;
    overflow: hidden;
    position: relative;
}
    .animacion2-fila--playa{
        margin-top: -90px;
        position: relative;
    }
        .animacion2-letra{
            max-width: 450px;
            position: absolute;
            right: 200px;
            top: 150px;
        }
            .animacion2-letra p{
                color: var(--ink);
                font: 1.7rem/1.4 'Bray Notes';
                margin: 0 0 16px;
            }
                .animacion2-letra p:last-child{ margin-bottom: 0; }

        .animacion22-letra {
            max-width: 450px;
            position: absolute;
            left: 50%;
            top: 130px;
            transform: translate(-50%, 0);
        }
            .animacion22-letra p{
                color: var(--ink);
                font: 1.7rem / 1.4 'Bray Notes';
                margin: 0 0 16px;
            }

    .animacion2-quote{
        margin: 0 auto;
        max-width: 640px;
        padding: 50px 20px;
        text-align: left;
        transform: translate(35%, 0);
    }
        .animacion2-quote p{
            color: var(--ink);
            font: 1.8rem/1.4 'Bray Notes';
        }

    .animacion2-fila--caja{
        align-items: center;
        margin: 0 auto 60px;
        max-width: 1200px;
        padding: 0 20px;
        margin-top: -70px;
        position: relative;
    }
        .animacion2-caja-videos{
            height: 360px;
            margin: 0 auto;
            position: relative;
            width: 600px;
        }
            .animacion2-video-cuadrado{
                aspect-ratio: 1 / 1;
                object-fit: cover;
                position: absolute;
            }
            #animacionVideo5{
                height: 230px;
                left: 0;
                top: 0;
                width: 230px;
                z-index: 1;
            }
            #animacionVideo6{
                bottom: 0;
                height: 290px;
                right: 0;
                width: 400px;
            }

    .animacion2-fila--puerta{
        display: flex;
        justify-content: center;
        padding: 0 0 0;
    }
        .animacion2-video-puerta{
            width: 100%;
        }

    .animacion2-fila--llave{
        align-items: center;
        display: flex;
        gap: 40px;
        justify-content: center;
        margin: 0 auto;
        max-width: 980px;
        padding: 0 20px;
        z-index: 10;
        position: relative;
    }
        .animacion2-video-llave{
            clip-path: circle(115px);
            border-radius: 50%;
            flex: 0 0 auto;
            height: 235px;
            object-fit: cover;
            width: 280px;
            transform: translate(0%) scale(1.2);
        }
        .animacion2-quote--llave{
            margin: 0;
            max-width: 40%;
            padding: 0;
            text-align: left;
            transform: none;
        }
            .animacion2-quote--llave p{ font-size: 1.5rem; }

    #animacionCta2 iframe{
        bottom: 0;
        height: 1px;
        opacity: 0;
        position: absolute;
    }

    @media (max-width: 900px){
        .animacion2-letra{ max-width: 220px; right: 20px; top: 20px; }
            .animacion2-letra p{ font-size: .85rem; }
        .animacion2-quote p{ font-size: 1.5rem; }
        .animacion2-fila--caja{ flex-wrap: wrap; gap: 24px; }
        .animacion2-caja-videos{ height: 280px; margin: 0 auto; width: 300px; }
            #animacionVideo5{ height: 180px; width: 180px; }
            #animacionVideo6{ height: 220px; width: 220px; }
        .animacion2-fila--llave{ flex-direction: column; text-align: center; }
            .animacion2-quote--llave{ max-width: 100%; text-align: center; }
    }
    @media (max-width: 560px){
        /*.animacion2-letra{ background: rgba(255,255,255,.85); border-radius: 10px; left: 16px; max-width: none; padding: 12px 16px; right: 16px; top: 16px; }*/
        .animacion2-caja-videos{ height: 220px; width: 240px; }
            #animacionVideo5{ height: 140px; width: 140px; }
            #animacionVideo6{ height: 170px; width: 170px; }
        .animacion2-video-puerta{ max-width: 260px; }
        .animacion2-video-llave{ height: 160px; width: 160px; }
        .animacion2-quote--llave p{ font-size: 1.3rem; }
    }

.main-animacion-3{
    position: relative;
    margin-top: -50px;
}
    .animacion3-letra{
        max-width: 500px;
        position: absolute;
        width: 100%;
        left: 50%;
        top: 150px;
        transform: translate(-50%, 0);
        z-index: 10;
    }
        .animacion3-letra p{
            color: #fff;
            font: 1.7rem / 1.4 'Bray Notes';
            margin: 0 0 16px;
            text-align: left;
        }

.main-animacion-4{
    background-color: #fff;
    /*overflow: hidden;*/
    margin-top: -100px;
    position: relative;
}

.main-animacion-5{
    background-color: #fff;
    /*overflow: hidden;*/
    position: relative;
}
    .corte-degrade-celeste{
        top: 0;
        position: absolute;  
        z-index: 10;  
    }
    #animacionVideo12{
        position: relative;
        mix-blend-mode: normal;
    }
    #animacionCta4 iframe{
        bottom: 0;
        height: 1px;
        opacity: 0;
        position: absolute;
    }
    .animacion5-letra{
        max-width: 400px;
        position: absolute;
        width: 100%;
        left: 50%;
        top: 100px;
        transform: translate(-50%, 0);
        z-index: 20;
    }
        .animacion5-letra p{
            color: #fff;
            font: 1.7rem / 1.4 'Bray Notes';
            margin: 0 0 16px;
            text-align: left;
        }
    .corte-mariposas{
        bottom: -130px;
        position: absolute;  
        z-index: 10;  
    }

.main-canciones{
    margin-top: 50px;
    position: relative;
}    
    .main-canciones h3,
    .main-protagonistas h3,
    .main-facturando h3,
    .main-trivia h3{
        display: block;
        font: 5rem/1.3 'Monigue Regular';
        margin: 20px auto;
        padding: 0 20px;
        position: relative;
        text-align: center;
        text-transform: uppercase;
        width: fit-content;
    }
    .main-canciones h3{
        font: 4rem/1.3 'Monigue Regular';
    }
    .box-universo-musical{
        background-color: #fff;
        margin-top: -70px;
        padding: 40px 0 60px;
    }
        .ctn-box-universo-musical{
            padding-top: 70px;
        }
        .ctn-box-universo-musical,
        .ctn-box-canciones,
        .ctn-box-capas,
        .ctn-box-analisis-cancion,
        .ctn-box-buscador-cancion,
        .ctn-box-arirang,
        .ctn-box-cronologia,
        .ctn-box-siete-voces,
        .ctn-box-compara,
        .ctn-box-perfil-radar,
        .ctn-box-comunidad,
        .ctn-box-facturando{
            margin: 0 auto;
            max-width: 900px;
        }
            .ctn-box-universo-musical h4,
            .ctn-box-radiografia h4,
            .ctn-box-canciones h4,
            .ctn-box-capas h4,
            .ctn-box-analisis-cancion h4,
            .ctn-box-buscador-cancion h4,
            .ctn-box-arirang h4,
            .ctn-box-cronologia h4,
            .ctn-box-siete-voces h4,
            .ctn-box-compara h4,
            .ctn-box-perfil-radar h4,
            .ctn-box-comunidad h4,
            .ctn-box-facturando h4{
                color: #5254BF;
                font: 1.9rem/1.3 'Monigue Regular';
                margin: 0 auto 20px;
                max-width: 600px;
            }
            .ctn-box-universo-musical h4 i,
            .ctn-box-radiografia h4 i,
            .ctn-box-canciones h4 i,
            .ctn-box-capas h4 i,
            .ctn-box-analisis-cancion h4 i,
            .ctn-box-buscador-cancion h4 i,
            .ctn-box-arirang h4 i,
            .ctn-box-cronologia h4 i,
            .ctn-box-siete-voces h4 i,
            .ctn-box-compara h4 i,
            .ctn-box-perfil-radar h4 i,
            .ctn-box-comunidad h4 i,
            .ctn-box-facturando h4 i{
                background: url('../img/punto-rojo.png') no-repeat center;
                background-size: 100%;
                display: inline-block;
                height: 10px;
                margin: 0 10px 0 0;
                vertical-align: middle;
                width: 10px;
                display: none;
            }
            .ctn-box-universo-musical p,
            .ctn-box-radiografia p,
            .ctn-box-canciones p,
            .ctn-box-canciones p,
            .ctn-box-capas p,
            .ctn-box-analisis-cancion p,
            .ctn-box-buscador-cancion p,
            .ctn-box-arirang p,
            .ctn-box-cronologia p,
            .ctn-box-siete-voces p,
            .ctn-box-compara p,
            .ctn-box-perfil-radar p,
            .ctn-box-comunidad p,
            .ctn-box-facturando p,
            .ctn-box-deja-tu-mensaje p{
                font: 1.2rem/1.4 'Prelo Book';
                margin: 0 auto 20px;
                max-width: 600px;
            }
                .ctn-box-universo-musical p b,
                .ctn-box-radiografia p b,
                .ctn-box-canciones p b,
                .ctn-box-capas p b,
                .ctn-box-analisis-cancion p b,
                .ctn-box-buscador-cancion p b,
                .ctn-box-arirang p b,
                .ctn-box-cronologia p b,
                .ctn-box-siete-voces p b,
                .ctn-box-compara p b,
                .ctn-box-perfil-radar p b,
                .ctn-box-comunidad p b,
                .ctn-box-facturando p b,
                .ctn-box-deja-tu-mensaje p b{
                    font-family: 'Prelo Bold';
                }
                span.sub{
                    color: #5254bf;
                    display: block;
                    font-family: 'Prelo Semibold';
                }
                .ctn-box-facturando .sub-wrap{
                    margin-bottom: 10px;
                }
                .ctn-box-facturando .impacto-lista{
                    display: flex;
                    flex-direction: column;
                    gap: 22px;
                    margin: 0 auto 80px;
                    max-width: 600px;
                }
                    .ctn-box-facturando .impacto-item{
                        align-items: center;
                        display: flex;
                        gap: 18px;
                    }
                        .ctn-box-facturando .impacto-icono{
                            flex: 0 0 auto;
                            height: 40px;
                            width: 40px;
                        }
                        .ctn-box-facturando .impacto-item p{
                            margin: 0;
                            max-width: none;
                        }

            /* --- Carrusel horizontal de portadas --- */
            .hint-desliza{
                align-items: center;
                color: #000;
                display: flex;
                font: 600 .95rem/1 'Prelo Semibold';
                gap: 8px;
                justify-content: center;
                margin: 36px auto 6px;
            }
                .hint-desliza img{
                    height: 18px;
                    width: 18px;
                }

            .carousel-discos{
                position: relative;
                max-width: 960px;
                margin: 0 auto;
            }
                .carousel-arrow{
                    align-items: center;
                    background: transparent;
                    border: none;
                    /*box-shadow: 0 6px 18px rgba(20, 18, 31, .22);*/
                    cursor: pointer;
                    display: flex;
                    height: 44px;
                    justify-content: center;
                    position: absolute;
                    top: 45%;
                    transform: translateY(-50%);
                    transition: background .2s ease, opacity .2s ease, transform .2s ease;
                    width: 44px;
                    z-index: 5;
                }
                    .carousel-arrow svg{ color: #000; height: 35px; width: 35px; }
                    .carousel-arrow:hover:not(:disabled){ transform: translateY(-50%) scale(1.06); }
                        .carousel-arrow:hover:not(:disabled) svg{ color: #000; }
                    .carousel-arrow--prev{ left: -50px; }
                    .carousel-arrow--next{ right: -50px; }
                    .carousel-arrow:disabled{
                        cursor: default;
                        opacity: .25;
                        pointer-events: none;
                    }
                    .carousel-arrow[hidden]{ display: none; }

                @media (max-width: 900px){
                    .carousel-arrow{ height: 38px; width: 38px; }
                        .carousel-arrow svg{ height: 17px; width: 17px; }
                }
                @media (max-width: 560px){
                    .carousel-arrow{ height: 34px; width: 34px; }
                        .carousel-arrow svg{ height: 15px; width: 15px; }
                        .carousel-arrow--prev{ left: -4px; }
                        .carousel-arrow--next{ right: -4px; }
                }

            .scroll-discos{
                cursor: grab;
                display: flex;
                gap: 0;
                margin: 30px auto 10px;
                overflow-x: auto;
                overflow-y: visible;
                padding: 10px 24px 34px;
                -webkit-overflow-scrolling: touch;
                /* Sin scroll-snap: con el grab activo, si el drag se soltaba
                   a mitad de página, el snap "mandatory" forzaba el scroll de
                   vuelta al punto anterior (se sentía como si se revirtiera
                   el arrastre). Las flechas siguen alineando por página
                   porque usan scrollTo() directo, no dependen del snap. */
            }
                .scroll-discos::-webkit-scrollbar{ height: 8px; opacity: 0;}
                .scroll-discos::-webkit-scrollbar-track{ background: #fff; border-radius: 10px; opacity: 0;}
                .scroll-discos::-webkit-scrollbar-thumb{ background: #fff; border-radius: 10px; opacity: 0;}
                .scroll-discos.is-dragging{
                    cursor: grabbing;
                    scroll-behavior: auto;
                    user-select: none;
                }
                    /* Mientras se arrastra, ignora hover/click en los discos:
                       si no, cada portada por la que pasa el mouse dispara su
                       transición de :hover (rotar + escalar) y eso es lo que
                       se ve como saltos/glitches durante el grab. */
                    .scroll-discos.is-dragging .disco-item{
                        pointer-events: none;
                    }

                /* Cada .discos-page agrupa hasta 6 portadas (3 columnas x 2 filas) y
                   ocupa "una pantalla" del scroll: el usuario desliza de grupo en grupo. */
                .discos-page{
                    display: grid;
                    flex: 0 0 auto;
                    gap: 60px 44px;
                    grid-template-columns: repeat(3, 270px);
                    grid-template-rows: repeat(2, auto);
                    padding: 0 24px;
                    scroll-snap-align: start;
                }
                    /* Si la última página queda incompleta con solo 4 portadas,
                       se acomodan en una grilla de 2 columnas (2 arriba, 2 abajo)
                       en vez de 3 arriba + 1 suelta abajo. Solo aplica en este
                       ancho: en los breakpoints de abajo (900px / 560px) la
                       grilla ya es de 2 columnas (o 1), así que 4 ítems ya
                       caen 2 arriba y 2 abajo sin necesitar este ajuste. */
                    @media (min-width: 901px){
                        .discos-page[data-count="4"]{
                            grid-template-columns: repeat(2, 270px);
                            justify-content: center;
                        }
                    }

                .disco-item:nth-child(odd) .disco-cover{ transform: rotate(-4deg); }
                .disco-item:nth-child(even) .disco-cover{ transform: rotate(3deg); }
                .disco-item:hover .disco-cover{ transform: rotate(0deg) scale(1.03); }

                    .disco-cover-wrap{
                        position: relative;
                    }
                        .disco-cover{
                            aspect-ratio: 1 / 1;
                            background: #fff;
                            border-radius: 2px;
                            /*box-shadow: 0 18px 30px rgba(20, 18, 31, .18);*/
                            display: block;
                            object-fit: cover;
                            transition: transform .35s var(--ease);
                            width: 100%;
                            /*border: 1px solid #c2c2c2;*/
                        }

                        .btn-play{
                            align-items: center;
                            background: #3ddc71;
                            border: none;
                            border-radius: 50%;
                            bottom: -24px;
                            /*box-shadow: 0 8px 16px rgba(0, 0, 0, .25);*/
                            cursor: pointer;
                            display: flex;
                            height: 52px;
                            justify-content: center;
                            left: 24px;
                            position: absolute;
                            transition: background .2s ease, transform .2s ease;
                            width: 52px;
                            z-index: 20;
                        }
                            .btn-play:hover{ transform: scale(1.07); }
                            .btn-play svg{ color: #000; height: 20px; width: 20px; }
                            .btn-play .icon-pause{ display: none; }
                            .btn-play.is-playing{ background: var(--red); }
                            .btn-play.is-playing .icon-play{ display: none; }
                            .btn-play.is-playing .icon-pause{ display: block; }

                    .disco-embed{
                        display: none;
                        margin-top: 40px;
                    }
                        .disco-embed.is-active{ display: block; }
                        .disco-embed iframe{ border: 0; border-radius: 12px; width: 100%; }

            .disclaimer-box{
                border: 2px solid var(--red);
                border-radius: 14px;
                margin: 30px auto 0;
                max-width: 700px;
                padding: 24px 24px 24px 50px;
                position: relative;
                text-align: left;
            }
                .disclaimer-box .disclaimer-icon{
                    align-items: center;
                    background: var(--red);
                    border-radius: 50%;
                    color: #fff;
                    display: flex;
                    font-style: normal;
                    height: 26px;
                    justify-content: center;
                    left: -14px;
                    position: absolute;
                    top: -14px;
                    width: 26px;
                }
                    .disclaimer-box .disclaimer-icon svg{ height: 14px; width: 14px; }
                .disclaimer-box p{
                    font: 1rem/1.4 'Prelo Book';
                    margin: 0;
                }
                    .disclaimer-box p b{
                        font-family: 'Prelo Bold';
                    }

            @media (max-width: 900px){
                .discos-page{
                    grid-template-columns: repeat(2, 200px);
                    grid-template-rows: repeat(3, auto);
                    gap: 54px 28px;
                }
            }

            @media (max-width: 560px){
                /* En móvil cada "página" trae un solo disco (ver carrusel-discos.js,
                   que agrupa de a 1 por debajo de este mismo ancho), así que cada
                   swipe/click de flecha muestra una portada a la vez. */
                .discos-page{
                    grid-template-columns: minmax(0, 240px);
                    grid-template-rows: auto;
                    gap: 0;
                    justify-content: center;
                    padding: 0 14px;
                    width: 100%;
                }
            }
.box-iframe{
    margin-bottom: 40px;
}

.main-radiografia{
    
}  
    .main-radiografia h3{
        font: 5rem/1.3 'Monigue Regular';
        margin: 20px auto 70px;
        padding: 0 20px;
        position: relative;
        text-align: center;
        text-transform: uppercase;
        width: fit-content;
    }
    .ctn-separador{
        opacity: 0;
        margin: 0 auto 40px;
        max-width: 600px;
    }
        span.separador{
            background-color: #000;
            display: block;
            height: 4px;
            margin: 0;
            width: 100px;
        }
    .ctn-box-radiografia{
        padding-bottom: 0;
    }
        .ctn-box-clustering{
            margin: 30px auto 0;
            max-width: 900px;
        }
        .ctn-box-radiografia h5,
        .ctn-box-cronologia h5,
        .ctn-box-siete-voces h5,
        .ctn-box-comunidad h5,
        .ctn-box-facturando h5{
            color: #000;
            font: 3rem/1.4'Monigue Regular';
            text-align: center;
            text-transform: uppercase;
        }

        /* --- Desplegables "¿Cómo leer el gráfico?" / "Descubre las variables" --- */
        .desplegables-radiografia{
            align-items: flex-start;
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            margin: 40px auto 10px;
            max-width: 550px;
        }
            .desplegable{                
                flex: 1 1 260px;
                overflow: hidden;
                text-align: left;
            }
                .desplegable summary{
                    align-items: center;
                    color: #707070;
                    cursor: pointer;
                    display: flex;
                    font: .9rem/1.3 'Prelo Bold';
                    gap: 14px;
                    justify-content: center;
                    list-style: none;
                    padding: 8px 20px;
                    text-decoration: underline;
                }
                    .desplegable summary::-webkit-details-marker{ display: none; }
                    .desplegable summary::marker{ display: none; content: ""; }
                    .desplegable-flecha{
                        color: #9C7EFF;
                        flex: 0 0 auto;
                        height: 16px;
                        transition: transform .25s var(--ease);
                        width: 16px;
                        display: none;
                    }
                    .desplegable[open] .desplegable-flecha{ transform: rotate(180deg); }
                .desplegable-panel{
                    border-top: 1px solid #e3e2f7;
                    padding: 16px 20px 20px;
                }
                    .desplegable-panel p{
                        font: 1rem/1.45 'Prelo Book';
                        margin: 0 0 12px;
                        max-width: none !important;
                    }
                    .desplegable-panel p:last-child{ margin-bottom: 0; }
                    .desplegable-perfiles{
                        display: flex;
                        flex-direction: column;
                        gap: 8px;
                        list-style: none;
                        margin: 0 0 12px;
                        padding: 0;
                    }
                        .desplegable-perfiles li{
                            font: 1rem/1.4 'Prelo Book';
                        }
                            .desplegable-perfiles li i{
                                margin: 0 5px 0 0;
                            }
                            .desplegable-perfiles li b{
                                font-family: 'Prelo Bold';
                            }
                            .desplegable-perfiles li:nth-child(1) i{ 
                                border-radius: 20px;
                                background-color: #6C63FF; 
                                content: '';
                                display: inline-block;
                                height: 12px;
                                width: 12px;
                            }
                            .desplegable-perfiles li:nth-child(2) i{ 
                                border-radius: 20px;
                                background-color: #E8637F; 
                                content: '';
                                display: inline-block;
                                height: 12px;
                                width: 12px;
                            }
                            .desplegable-perfiles li:nth-child(3) i{ 
                                border-radius: 20px;
                                background-color: #4CAF7D; 
                                content: '';
                                display: inline-block;
                                height: 12px;
                                width: 12px;
                            }
                            .desplegable-perfiles li:nth-child(4) i{ 
                                border-radius: 20px;
                                background-color: #D98E4A; 
                                content: '';
                                display: inline-block;
                                height: 12px;
                                width: 12px;
                            }

                        
                    .desplegable-sonido{
                        max-width: 350px;
                    }

            @media (max-width: 560px){
                .desplegables-radiografia{
                    flex-direction: column;
                }
                    /* flex-basis de .desplegable (260px) corre sobre el eje
                       principal: en fila es ancho, pero al pasar a columna
                       pasaría a ser un alto mínimo forzado. Se resetea a
                       auto para que cada desplegable mida solo su contenido. */
                    .desplegable{
                        flex: 1 1 auto;
                    }
            }

    .box-canciones{
        background-color: #fff;
        padding: 0 0 0;
    }
        /* --- Escala comparativa Sonido / Letra --- */
        .ctn-escala-comparativa{
            margin: 10px auto 40px;
            max-width: 600px;
        }
            .escala-comparativa{
                background-color: #fff;
                border: 1px solid #e0e0e0;
                border-radius: 20px;
                padding: 30px 34px;
                position: relative;
            }
                .escala-comparativa .info-badge{
                    cursor: default;
                    height: 26px;
                    position: absolute;
                    right: -12px;
                    top: -12px;
                    width: 26px;
                }
                    .info-badge-icon{
                        display: block;
                        height: 100%;
                        width: 100%;
                    }
                .escala-comparativa .info-badge .info-tip{
                    background-color: var(--ink);
                    border-radius: 8px;
                    color: #fff;
                    display: none;
                    font-size: 11.5px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 1.5;
                    padding: .6rem .75rem;
                    position: absolute;
                    right: 0;
                    text-align: left;
                    top: calc(100% + 8px);
                    width: 220px;
                    z-index: 30;
                }
                .escala-comparativa .info-badge:hover .info-tip{
                    display: block;
                }
                .escala-fila + .escala-fila{
                    margin-top: 34px;
                }
                .escala-titulo{
                    font: 1.5rem/1 'Monigue Regular';
                    margin: 0 0 20px;
                    text-transform: uppercase;
                }
                .escala-track{
                    align-items: center;
                    display: flex;
                    gap: 12px;
                }
                    .escala-extremo{
                        font: 1rem/1.2 'Prelo Medium';
                        white-space: nowrap;
                    }
                    .escala-num{
                        flex: 0 0 auto;
                        font: 1.7rem/1 'Monigue Regular';
                    }
                    .escala-linea{
                        background-color: #967ff9;
                        flex: 1 1 auto;
                        height: 2px;
                    }

                @media (max-width: 560px){
                    .escala-comparativa{
                        padding: 24px 20px;
                    }
                    .escala-extremo{
                        font-size: .85rem;
                    }
                    .escala-num{
                        font-size: 1.3rem;
                    }
                    .escala-comparativa .info-badge .info-tip{
                        width: 160px;
                    }
                }
        .box-disclaimer-rojo{
            background-color: #F42439;
            border-radius: 20px;
            box-sizing: border-box;
            margin: 30px auto;
            max-width: 600px;            
        }
            .box-disclaimer-rojo p{                
                color: #fff;
                font: 1.2rem/1.4 'Prelo Bold';
                padding: 20px;
            }
    .box-capas{
        overflow: hidden;
        position: relative;
    }
        #capasMascota{
            top: 320px;
        }
        .ctn-box-capas{

        }
            img.bg-cancion-capas{
                display: block;
                margin: 40px auto;
                max-width: 700px;
            }
            .box-disclaimer-lineal{
                border: 3px solid #9C7EFF;
                border-radius: 10px;
                box-sizing: border-box;
                margin: 20px auto 40px;
                max-width: 600px;
                position: relative;            
            }
                .box-disclaimer-lineal::before{
                    background: url('../img/flecha-circular.png') no-repeat center;
                    background-size: 100%;
                    content: '';
                    height: 25px;
                    left: -10px;
                    position: absolute;
                    top: -10px;
                    width: 25px;
                }
                .box-disclaimer-lineal p{
                    font: 1.2rem/1.4 'Prelo Bold';
                    margin: 0 auto;
                    padding: 20px 30px;
                }
                    .box-disclaimer-lineal p span.lila{
                        color: #5254BF;
                    }
            .ctn-box-capas h6,
            .ctn-box-analisis-cancion h6,
            .ctn-box-buscador-cancion h6,
            .ctn-box-arirang h6,
            .ctn-box-radiografia h6{
                background-color: #F42439;
                color: #fff;
                display: block;
                font: 1.4rem/1 'Monigue Regular';      
                margin: 0 auto;
                padding: 5px 10px;
                position: relative;
                text-align: center;
                width: fit-content;
            }
                .ctn-box-capas h6::after,
                .ctn-box-analisis-cancion h6::after,
                .ctn-box-buscador-cancion h6::after,
                .ctn-box-arirang h6::after,
                .ctn-box-radiografia h6::after{
                    content: '';
                    width: 0; height: 0;
                    border-style: solid;
                    border-width: 12px 12px 0px 12px;
                    border-color: #f42439 transparent transparent transparent;
                    transform: rotate(0deg);

                    bottom: 0;
                    left: 50%;
                    position: absolute;
                    transform: translate(-50%, 100%);
                }
            /* En escritorio los 3 ítems entran en línea y no hace falta
               carrusel: las flechas quedan ocultas por defecto y solo se
               muestran en el media query de abajo (móvil). */
            .carousel-medida{
                position: relative;
            }
                .carousel-medida .carousel-arrow{
                    display: none;
                }

            ul.medida{
                list-style: none;
                margin: 30px auto;
                padding: 0;
                text-align: center;
            }
                ul.medida li{
                    display: inline-block;
                    margin: 20px;
                    max-width: 250px;
                    vertical-align: top;
                }
                    ul.medida li img{
                        display: block;
                        margin: 0 auto 20px;
                        max-width: 40px;
                    }
                    ul.medida li h5{
                        font: 1.4rem/1 'Monigue Regular';
                        margin-bottom: 10px;
                        text-align: center;
                        text-transform: uppercase;
                    }
                    ul.medida li p{
                        text-align: left;
                    }

            @media (max-width: 560px){
                /* Carrusel de a un ítem con flechas (ver js/carrusel-medida.js
                   para la navegación con flechas y cronologia-drag.js, que ya
                   engancha el arrastre vía la clase "js-drag-scroll"). */
                .carousel-medida .carousel-arrow{
                    display: flex;
                }
                ul.medida{
                    cursor: grab;
                    display: flex;
                    flex-wrap: nowrap;
                    margin: 20px 0;
                    overflow-x: auto;
                    padding: 0 24px;
                    text-align: left;
                    -webkit-overflow-scrolling: touch;
                }
                    ul.medida.is-dragging{
                        cursor: grabbing;
                        scroll-behavior: auto;
                        user-select: none;
                    }
                    ul.medida li{
                        box-sizing: border-box;
                        flex: 0 0 100%;
                        margin: 0;
                        max-width: none;
                        padding: 0 10px;
                    }
            }

    .box-analisis-cancion{
        background-color: #fff;
        padding: 0 0 0;
    }
        /* --- Patrón más amplio: brecha por periodo --- */
        .ctn-patron-amplio{
            margin: 34px auto 40px;
            max-width: 600px;
        }
            .patron-amplio{
                background-color: #fff;
                border: 1px solid #e0e0e0;
                border-radius: 20px;
                padding: 30px 34px;
            }
                .patron-periodo + .patron-periodo{
                    margin-top: 34px;
                }
                .patron-anios{
                    color: #b5b5b5;
                    font: 1.8rem/1 'Monigue Regular';
                    letter-spacing: .02em;
                    margin: 0 0 14px;
                }
                .ctn-box-analisis-cancion .patron-brecha{
                    font: 1.15rem/1.2 'Prelo Extrabold';
                    margin: 0 0 16px;
                    max-width: none;
                }
                .patron-track{
                    align-items: center;
                    display: flex;
                    gap: 14px;
                    max-width: 460px;
                }
                    .patron-lbl{
                        flex: 0 0 auto;
                        font: 1.1rem/1 'Prelo Medium';
                        white-space: nowrap;
                    }
                    .patron-wrap{
                        flex: 0 0 auto;
                        height: 14px;
                        min-width: 14px;
                        position: relative;
                    }
                        .patron-wrap::before{
                            background-color: #E8382F;
                            content: '';
                            height: 2px;
                            left: 7px;
                            position: absolute;
                            right: 7px;
                            top: 50%;
                            transform: translateY(-50%);
                        }
                        .patron-dot{
                            background-color: #E8382F;
                            border-radius: 50%;
                            height: 14px;
                            position: absolute;
                            top: 0;
                            width: 14px;
                        }
                            .patron-dot--start{ left: 0; }
                            .patron-dot--end{ right: 0; }
                .ctn-box-analisis-cancion .patron-n{
                    font: .95rem/1 'Prelo Bold';
                    margin: 16px 0 0;
                    max-width: none;
                }
                .ctn-box-analisis-cancion h6{
                    margin-bottom: 40px;
                    margin-top: 40px;
                }

                @media (max-width: 560px){
                    .patron-amplio{
                        padding: 24px 20px;
                    }
                    .patron-anios{
                        font-size: 1.9rem;
                    }
                    .ctn-box-analisis-cancion .patron-brecha{
                        font-size: 1rem;
                    }
                    .patron-lbl{
                        font-size: .95rem;
                    }
                }
        /* --- Gráfico de barras: dirección de la brecha por periodo --- */
        .ctn-grafico-barras{
            margin: 34px auto 40px;
            max-width: 600px;
        }
            .grafico-barras{
                background-color: #fff;
                border: 1px solid #e0e0e0;
                border-radius: 5px;
                padding: 20px;
            }
                .grafico-barras-leyenda{
                    column-gap: 28px;
                    display: flex;
                    flex-wrap: wrap;
                    margin-bottom: 30px;
                    row-gap: 10px;
                }
                    .grafico-barras-item{
                        align-items: center;
                        color: var(--ink);
                        display: inline-flex;
                        font: .95rem/1.2 'Prelo Medium';
                        gap: 10px;
                    }
                    .grafico-barras-dot{
                        border-radius: 50%;
                        flex: 0 0 auto;
                        height: 16px;
                        width: 16px;
                    }
                        .grafico-barras-dot--letra{ background-color: #967ff9; }
                        .grafico-barras-dot--musica{ background-color: #d7d7e2; }
                .grafico-barras-fila + .grafico-barras-fila{
                    margin-top: 30px;
                }
                .grafico-barras-periodo{
                    color: var(--ink);
                    font: 1.1rem / 1 'Prelo Bold' !important;
                        margin: 0 0 5px !important;
                }
                .grafico-barras-track{
                    display: flex;
                    gap: 18px;
                    height: 34px;
                }
                    .grafico-barras-seg{
                        border-radius: 4px;
                        flex-grow: 0;
                        flex-shrink: 0;
                        min-width: 2px;
                    }
                        .grafico-barras-seg--letra{ background-color: #967ff9; }
                        .grafico-barras-seg--musica{ background-color: #d7d7e2; }
                .ctn-box-analisis-cancion .grafico-barras-conteo{
                    color: var(--ink);
                    font: 1.1rem/1 'Prelo Book';
                    margin: 16px 0 0;
                    max-width: none;
                }
                    .ctn-box-analisis-cancion .grafico-barras-conteo b{
                        font-family: 'Prelo Extrabold';
                    }

                @media (max-width: 560px){
                    .grafico-barras{
                        padding: 24px 20px;
                    }
                    .grafico-barras-periodo{
                        font-size: 1.1rem;
                    }
                    .grafico-barras-track{
                        height: 26px;
                    }
                    .ctn-box-analisis-cancion .grafico-barras-conteo{
                        font-size: 1rem;
                    }
                }

    .box-buscador-cancion{
        overflow: hidden;
        position: relative;
    }
        #buscadorMascota{
            top: 470px;
        }
        .ctn-box-buscador-cancion{

        }
            .ctn-box-buscador-cancion h6{
                margin-top: 40px;
            }
            ul.lectura-grafico{
                list-style-type: none;
                margin: 30px auto 120px;
                max-width: 600px;
            }
                ul.lectura-grafico li{
                    font: 1.2rem / 1.4 'Prelo Book';
                    letter-spacing: -0.4px;
                }
                    ul.lectura-grafico li i{
                        background-color: #F42439;
                        border-radius: 30px;
                        content: '';
                        display: inline-block;
                        height: 10px;
                        margin: 0 10px 0 0;
                        vertical-align: middle;
                        width: 10px;
                    }
                    ul.lectura-grafico li p{
                        display: inline-block;
                        margin: 0;
                        vertical-align: top;
                    }
    .box-compara{
        overflow: hidden;
        position: relative;
    }
        #comparaMascota{
            top: 20px;
        }
    .box-arirang{
        background-color: #fff;
        padding: 50px 0 60px;
    }
    .box-cronologia{
        overflow: hidden;
        position: relative;
        margin-bottom: 120px;
    }
        .crono-mascota{
            left: -20px;
            max-width: 260px;
            opacity: 0;
            position: absolute;
            top: 10px;
            transition: transform 1s ease, opacity 1s ease;
            transform: translateX(-120%);
            width: 22%;
            z-index: 1;
        }
            .crono-mascota.is-visible{
                opacity: 1;
                transform: translateX(-50px) rotate(25deg);
            }
            /* Variante espejada: mascotas que entran/asoman por la derecha
               en vez de por la izquierda (mismo efecto de "asomarse" desde
               afuera del contenedor, solo que del otro lado). */
            .crono-mascota--der{
                left: auto;
                right: -20px;
                transform: translateX(120%);
            }
                .crono-mascota--der.is-visible{
                    transform: translateX(-50px) rotate(-25deg);
                }
            .crono-mascota-img{
                display: block;
                width: 100%;
            }
            /* Pálpito: se anima la propiedad `scale` (independiente de
               `transform`) para no pisar el translate/rotate de entrada. */
            .crono-mascota.is-visible .crono-mascota-img,
            .crono-mascota.is-visible .crono-mascota-clic{
                animation: crono-mascota-palpito 1.6s ease-in-out 1s infinite;
            }
            @keyframes crono-mascota-palpito{
                0%, 50%, 100% { scale: 1; }
                15% { scale: 1.08; }
                30% { scale: 1.02; }
                40% { scale: 1.06; }
            }
            /* Nombre de la mascota + cursor: se contra-rota para quedar
               horizontal aunque la mascota esté inclinada. */
            .crono-mascota-clic{
                align-items: flex-end;
                display: flex;
                flex-direction: row;
                gap: 2px;
                left: 50%;
                pointer-events: none;
                position: absolute;
                top: 2%;
                transition: rotate 1s ease;
                translate: -30% 0;
            }
                .crono-mascota-nombre{
                    color: #5254BF;
                    font-family: 'Monigue Regular';
                    font-size: clamp(16px, 1.7vw, 24px);
                    letter-spacing: .01em;
                    line-height: 1;
                    text-transform: uppercase;
                    white-space: nowrap;
                }
                .crono-mascota-cursor{
                    height: clamp(16px, 1.6vw, 22px);
                    width: clamp(16px, 1.6vw, 22px);
                }
                .crono-mascota.is-visible .crono-mascota-clic{
                    rotate: -25deg;
                }
                .crono-mascota--der.is-visible .crono-mascota-clic{
                    rotate: 25deg;
                }
            .crono-mascota-1 .crono-mascota-clic{
                    top: 0;
                    translate: 0 -30px;
            }
            .crono-mascota-2{
                right: -65px;
            }
                .crono-mascota-2 .crono-mascota-clic{
                    top: 0;
                    translate: 50px 65px;
                }
            .crono-mascota-3 .crono-mascota-clic{
                bottom: 0;
                translate: 0 -60px;
            }
            .crono-mascota-4{
                right: -130px;
            }
                .crono-mascota-4 .crono-mascota-clic{
                    bottom: 0;
                    translate: -60px 0;
                }
            .crono-mascota-5{

            }
                .crono-mascota-5 .crono-mascota-clic{
                    bottom: 0;
                    translate: -10px -50px;
                }
            .crono-mascota-6{
                right: -130px;
            }
                .crono-mascota-6 .crono-mascota-clic{
                    bottom: 0;
                    translate: -100px 0;
                }
            .crono-mascota-7{

            }
                .crono-mascota-7 .crono-mascota-clic{
                    bottom: 0;
                    translate: 20px -45px;
                }
            @media (prefers-reduced-motion: reduce){
                .crono-mascota.is-visible .crono-mascota-img,
                .crono-mascota.is-visible .crono-mascota-clic{ animation: none; }
            }
            @media (max-width: 900px){
                .crono-mascota{ max-width: 170px; top: -10px; }
                .crono-mascota-nombre{ font-size: 14px; }
                .crono-mascota-cursor{ height: 16px; width: 16px; }
            }
            @media (max-width: 560px){
                .crono-mascota{ max-width: 120px; }
                .crono-mascota-nombre{ font-size: 12px; }
                .crono-mascota-cursor{ height: 14px; width: 14px; }
            }
        .ctn-box-cronologia{

        }
            .ctn-box-cronologia h5{
                padding: 50px 0;
            }

        /* --- Cronología horizontal con columna de categorías fija --- */
        .crono-wrap{
            -webkit-overflow-scrolling: touch;
            background-color: #fff;
            cursor: grab;
            margin: 40px auto 60px;
            max-width: 1200px;
            overflow-x: auto;
            overflow-y: hidden;
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* IE / Edge legacy */
        }
            .crono-wrap::-webkit-scrollbar{
                display: none; /* Chrome / Safari / Edge */
            }
            .crono-wrap.is-dragging{
                cursor: grabbing;
                scroll-behavior: auto;
                user-select: none;
            }
            .crono-inner{
                align-items: stretch;
                display: flex;
                width: max-content;
            }

            /* Columna fija de categorías */
            .crono-labels{
                background-color: #fff;
                box-shadow: 6px 0 14px rgba(20,18,31,.10);
                display: flex;
                flex: 0 0 190px;
                flex-direction: column;
                left: 0;
                position: sticky;
                text-align: center;
                z-index: 20;
            }
                .crono-label{
                    align-items: center;
                    color: #fff;
                    display: flex;
                    font: 1.5rem/1.2 'Monigue Regular';
                    padding: 14px 18px;
                    text-transform: uppercase;
                    position: relative;
                    justify-content: center;
                }
                .crono-label--musical{ background-color: #D3805B; min-height: 90px; }
                    .crono-label--musical::after{
                        content: '';
                        width: 0; height: 0;
                        border-style: solid;
                        border-width: 10px 0px 10px 15px;
                        border-color: transparent transparent transparent #D3805B;
                        transform: rotate(0deg);
                        position: absolute;
                        right: -15px;
                    }
                .crono-label--bts{ background-color: #5254BF; font-size: 3rem; min-height: 210px; justify-content: center;}
                    .crono-label--bts::after{
                        content: '';
                        width: 0; height: 0;
                        border-style: solid;
                        border-width: 10px 0px 10px 15px;
                        border-color: transparent transparent transparent #5254BF;
                        transform: rotate(0deg);
                        position: absolute;
                        right: -15px;
                    }
                .crono-label--politico{ background-color: #6EDEC9; min-height: 90px; }
                    .crono-label--politico::after{
                        content: '';
                        width: 0; height: 0;
                        border-style: solid;
                        border-width: 10px 0px 10px 15px;
                        border-color: transparent transparent transparent #6EDEC9;
                        transform: rotate(0deg);
                        position: absolute;
                        right: -15px;
                    }
                .crono-label--eje{ min-height: 76px; }

            /* Pista horizontal con los años */
            .crono-track{
                display: flex;
                position: relative;
            }
                .crono-linea{
                    background-color: #5254BF;
                    bottom: 73px;
                    height: 3px;
                    left: 0;
                    position: absolute;
                    right: 0;
                    z-index: 1;
                }

                .crono-col{
                    display: flex;
                    flex: 0 0 390px;
                    flex-direction: column;
                    position: relative;
                    z-index: 2;
                }
                    .crono-cell{
                        padding: 16px 18px;
                    }
                        .crono-cell p{
                            font: .98rem/1.35 'Prelo Book';
                            margin: 0;
                        }
                    .crono-cell--musical,
                    .crono-cell--politico{
                        align-items: center;
                        background-color: #F5F5F5;
                        display: flex;
                        justify-content: center;
                        min-height: 90px;
                        text-align: center;
                    }
                    .crono-cell--bts{
                        align-items: center;
                        background-color: #cfcfeb;
                        display: flex;
                        flex-direction: row;
                        gap: 10px;
                        min-height: 210px;
                    }
                        .crono-cell--bts img{
                            /*border: 2px solid #fff;
                            border-radius: 50%;
                            height: 62px;
                            object-fit: cover;
                            width: 62px;*/
                        }
                    .crono-col:nth-child(even) .crono-cell--musical,
                    .crono-col:nth-child(even) .crono-cell--politico{
                        background-color: #fff;
                    }
                    .crono-col:nth-child(even) .crono-cell--bts{
                        background-color: #c7c7e2;
                    }

                    .crono-eje{
                        align-items: center;
                        display: flex;
                        flex-direction: column;
                        gap: 8px;
                        justify-content: start;
                        min-height: 76px;
                    }
                        .crono-punto{
                            background-color: #5254BF;
                            border: 3px solid #fff;
                            border-radius: 50%;
                            height: 14px;
                            width: 14px;
                        }
                        .crono-eje b{
                            font: 1.5rem/1 'Monigue Regular';
                        }

                /* Imágenes decorativas grandes entre ciertos años */
                .crono-decor{
                    align-items: normal;
                    display: flex;
                    flex: 0 0 200px;
                    justify-content: center;
                    padding: 14px;
                    position: relative;
                }
                    .crono-decor::before{
                        background-color: #cfcfeb;
                        content: '';
                        height: 210px;
                        left: 0;
                        position: absolute;
                        right: 0;
                        top: 90px;
                        z-index: 0;
                    }
                    .crono-decor-2026::before{
                        background-color: #cfcfeb;
                    }
                    .crono-decor img{
                        /*border-radius: 14px;*/
                        max-height: 520px;
                        /*max-width: 100%;*/
                        object-fit: contain;
                        position: relative;
                        z-index: 1;
                    }
                
                .crono-foto-2005{
                    height: 80px;
                    max-width: 80px;
                }
                .crono-foto-2008{
                    height: 110px;
                    max-width: 140px;
                }
                .crono-foto-2010{
                    height: 80px;
                    max-width: 80px;
                }
                .crono-foto-2012{
                    height: 110px;
                    max-width: 140px;
                }
                .crono-decor-1{
                    max-width: 250px;
                }
                .crono-foto-2013{
                    height: 110px;
                    max-width: 140px;
                }
                .crono-foto-2014{
                    height: 110px;
                    max-width: 140px;
                }
                .crono-foto-2015{
                    height: 110px;
                    max-width: 140px;
                }
                .crono-foto-2016{
                    height: 110px;
                    max-width: 140px;
                }
                .crono-decor-2{
                    max-width: 250px;
                }
                .crono-foto-2017{
                    height: 110px;
                    max-width: 140px;
                }
                .crono-foto-2018{
                    height: 110px;
                    max-width: 140px;
                }
                .crono-foto-2019{
                    height: 110px;
                    max-width: 140px;
                }
                .crono-foto-2020{
                    height: 110px;
                    max-width: 140px;
                }
                .crono-decor-3{
                    max-width: 350px;
                }
                .crono-foto-2021{
                    height: 110px;
                    max-width: 140px;
                }
                .crono-foto-2022{
                    height: 80px;
                    max-width: 80px;
                }
                .crono-foto-2023{
                    height: 110px;
                    max-width: 140px;
                }
                .crono-foto-2024{
                    height: 110px;
                    max-width: 140px;
                }
                .crono-foto-2025{
                    height: 110px;
                    max-width: 140px;
                }
                .crono-foto-2026{
                    height: 110px;
                    max-width: 140px;
                }

                @media (max-width: 900px){
                    /* Columna de categorías angosta, con el texto en vertical
                       (igual que en "header-fix-cronologia-movil.png"), para
                       que deje más espacio al contenido en pantallas chicas. */
                    .crono-labels{ flex-basis: 64px; }
                    .crono-label{ font-size: .8rem; padding: 10px 6px; }
                        .crono-label span{
                            transform: rotate(180deg);
                            white-space: nowrap;
                            writing-mode: vertical-rl;
                        }
                    .crono-label--bts{ font-size: 1.1rem; }
                    .crono-col{ flex-basis: 190px; }
                    .crono-cell{ padding: 12px 14px; }
                    .crono-cell p{ font-size: .88rem; }
                    .crono-decor{ flex-basis: 160px; }
                }
                @media (max-width: 560px){
                    .crono-labels{ flex-basis: 54px; }
                    .crono-label{ font-size: 1.1rem; padding: 8px 5px; }
                    .crono-label--bts{ font-size: .85rem; }
                    .crono-label--musical,
                    .crono-label--politico{ min-height: 130px; }
                    .crono-label--musical{
                        height: 130px;
                    }
                    .crono-label span{
                        white-space: normal;
                    }
                    .crono-label--bts{ min-height: 190px; }
                    .crono-col{ flex-basis: 150px; }
                    .crono-cell--musical,
                    .crono-cell--politico{ min-height: 130px; }
                    .crono-cell--bts{ min-height: 190px; }
                    .crono-cell{ padding: 10px 12px; }
                    .crono-cell p{ font-size: .78rem; }
                    .crono-cell--bts img{ height: 48px; width: 48px; }
                    .crono-eje b{ font-size: 1.15rem; }
                    .crono-decor{ flex-basis: 130px; padding: 8px; }
                    .crono-decor::before{ height: 190px; top: 130px; }
                }

.main-protagonistas{
    padding-top: 60px;
}
    .box-siete-voces{
        background-color: #fff;
        margin-top: -80px;
        padding: 0 0 60px;
    }
        .ctn-box-siete-voces h5{
            padding: 100px 0 50px;
        }

        /* --- Selector de integrantes --- */
        .perfiles-selector{
            margin: 30px auto 0;
            max-width: 980px;
            text-align: center;
        }
            .perfiles-hint{
                align-items: center;
                color: #000;
                display: flex;
                font: 600 .95rem/1 'Prelo Semibold';
                gap: 8px;
                justify-content: center;
                margin: 0 auto 22px;
            }
                .perfiles-hint img{
                    height: 18px;
                    width: 15px;
                }

            .perfiles-avatares{
                display: flex;
                flex-wrap: wrap;
                gap: 22px;
                justify-content: center;
            }
                .perfil-avatar-btn{
                    background: none;
                    border: none;
                    cursor: pointer;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 10px;
                    padding: 0;
                }
                    .perfil-avatar-wrap{
                        align-items: center;
                        /*background-color: #F2B9C0;*/
                        /*border-radius: 50%;*/
                        display: flex;
                        height: 110px;
                        justify-content: center;
                        padding: 6px;
                        transition: background-color .25s ease;
                        width: 110px;
                    }
                        .perfil-avatar-wrap img{
                            border-radius: 50%;
                            filter: grayscale(.85);
                            height: 100%;
                            object-fit: cover;
                            opacity: .6;
                            transition: filter .25s ease, opacity .25s ease;
                            width: 100%;
                        }
                    .perfil-avatar-btn.is-active .perfil-avatar-wrap{
                        /*background-color: #F42439;*/
                    }
                    .perfil-avatar-btn.is-active .perfil-avatar-wrap img{
                        filter: none;
                        opacity: 1;
                    }
                    .perfil-avatar-btn:hover .perfil-avatar-wrap img{
                        filter: none;
                        opacity: .9;
                    }
                    .perfil-avatar-name{
                        color: #8a8a8a;
                        font: .95rem/1 'Prelo Bold';
                        letter-spacing: .02em;
                    }
                    .perfil-avatar-btn.is-active .perfil-avatar-name{
                        color: #000;
                    }

        /* --- Ficha de perfil --- */
        .perfil-card{
            background-color: #fff;
            border: 1px solid #707070;
            border-radius: 24px;
            /*box-shadow: 0 10px 30px rgba(20,18,31,.08);*/
            display: flex;
            gap: 40px;
            margin: 40px auto 0;
            max-width: 1100px;
            padding: 40px;
        }
            .perfil-foto{
                flex: 0 0 220px;
            }
                .perfil-foto img{
                    width: 100%;
                }
                /* Mini selector de avatares junto a la ilustración: solo
                   se muestra en móvil (ver media query más abajo), para
                   poder cambiar de integrante sin volver a subir. */
                .perfil-foto-avatares{
                    display: none;
                }

            .perfil-info{
                /*border-right: 2px solid #000;*/
                flex: 1 1 380px;
                padding-right: 30px;
            }
                .perfil-cabecera{
                    border-bottom: 2px solid #000;
                    display: flex;
                    flex-wrap: wrap;
                    align-items: baseline;
                    column-gap: 14px;
                    padding-bottom: 20px;
                    margin-bottom: 20px;
                }
                    .perfil-nombre{
                        color: #000;
                        font: 3.2rem/1 'Monigue Regular';
                        
                        width: 100%;
                    }
                    .perfil-nombre-real{
                        color: #a87fff;
                        font: 700 1.2rem/1 'Prelo Bold';
                    }
                    .perfil-fecha{
                        color: #000;
                        font: 700 1.2rem/1 'Prelo Bold';
                    }

                ul.perfil-ficha{
                    display: flex;
                    flex-direction: column;
                    gap: 18px;
                    list-style: none;
                }
                    ul.perfil-ficha li{
                        align-items: flex-start;
                        display: flex;
                        gap: 14px;
                    }
                        ul.perfil-ficha li img{
                            flex: 0 0 auto;
                            height: 26px;
                            margin-top: 2px;
                            width: 26px;
                        }
                        ul.perfil-ficha li p{
                            font: 1.05rem/1.4 'Prelo Book';
                        }
                            ul.perfil-ficha li p b{
                                font-family: 'Prelo Bold';
                            }

            .perfil-stats{
                display: flex;
                flex: 0 0 320px;
                flex-direction: column;
                gap: 20px;
            }
                .perfil-headline{
                    background-color: #a87fff;
                    border-radius: 30px;
                    color: #fff;
                    font: 700 1.15rem/1.3 'Prelo Bold';
                    padding: 14px 20px;
                    text-align: center;
                }

                .perfil-metrics{
                    border: 1px solid #e0e0e0;
                    border-radius: 16px;
                    padding: 22px 24px;
                    position: relative;
                }
                    .perfil-metrics-info{
                        border: none;
                        background: none;
                        cursor: help;
                        height: 24px;
                        padding: 0;
                        position: absolute;
                        right: -9px;
                        top: -11px;
                        width: 24px;
                        z-index: 2;
                    }
                        .perfil-metrics-info img{
                            display: block;
                            height: 100%;
                            width: 100%;
                        }
                        .perfil-metrics-tooltip{
                            background-color: #000;
                            border-radius: 10px;
                            color: #fff;
                            cursor: auto;
                            font: 400 .85rem/1.35 'Prelo Book';
                            opacity: 0;
                            padding: 12px 14px;
                            pointer-events: none;
                            position: absolute;
                            right: 0;
                            text-align: left;
                            top: calc(100% + 10px);
                            transform: translateY(-4px);
                            transition: opacity .15s ease, transform .15s ease;
                            visibility: hidden;
                            width: 220px;
                            z-index: 3;
                        }
                        .perfil-metrics-info:hover .perfil-metrics-tooltip,
                        .perfil-metrics-info:focus .perfil-metrics-tooltip,
                        .perfil-metrics-info.is-open .perfil-metrics-tooltip{
                            opacity: 1;
                            transform: translateY(0);
                            visibility: visible;
                        }
                    .perfil-metric + .perfil-metric{
                        margin-top: 22px;
                    }
                    .perfil-metric-label{
                        display: block;
                        font: 700 1.05rem/1 'Prelo Bold';
                        margin-bottom: 12px;
                    }
                    .perfil-metric-bar{
                        align-items: center;
                        display: flex;
                        gap: 8px;
                    }
                        .perfil-metric-value{
                            font: 1.05rem/1 'Prelo Book';
                            white-space: nowrap;
                        }
                        .perfil-metric-dot{
                            background-color: #a87fff;
                            border-radius: 50%;
                            flex: 0 0 auto;
                            height: 12px;
                            width: 12px;
                        }
                        .perfil-metric-dot--start{
                            opacity: .45;
                        }
                        .perfil-metric-line{
                            background-color: #a87fff;
                            flex: 1 1 auto;
                            height: 2px;
                            opacity: .45;
                        }
                        .perfil-metric--single .perfil-metric-bar{
                            justify-content: flex-end;
                        }
                    .perfil-nota{
                        color: #8a8a8a;
                        font: italic 400 .85rem/1.35 'Prelo Book';
                        margin-top: 16px;
                    }

                .perfil-quote{
                    border: 2px solid #a87fff;
                    border-radius: 18px;
                    font: 1rem/1.45 'Prelo Bold';
                    margin: 0;
                    padding: 20px 22px 20px;
                    position: relative;
                }
                    .perfil-quote-icon{
                        height: 34px;
                        left: -17px;
                        position: absolute;
                        top: -17px;
                        width: 34px;
                    }

                @media (max-width: 900px){
                    .perfil-card{
                        flex-direction: column;
                        gap: 26px;
                        padding: 26px;
                    }
                        /* Orden en móvil: ficha de texto, luego la
                           ilustración (con su mini selector de avatares
                           al lado) y al final las métricas/cita. El
                           orden en el HTML no cambia, solo el visual. */
                        .perfil-info{ order: 1; }
                        .perfil-foto{ order: 2; }
                        .perfil-stats{ order: 3; }

                        .perfil-foto{
                            align-items: center;
                            display: flex;
                            flex-basis: auto;
                            gap: 14px;
                            justify-content: center;
                            margin: 0 auto;
                            max-width: 280px;
                        }
                            .perfil-foto img{
                                flex: 1 1 auto;
                                max-width: 190px;
                            }
                            .perfil-foto-avatares{
                                display: flex;
                                flex: 0 0 auto;
                                flex-direction: column;
                                gap: 8px;
                            }
                                .perfil-foto-avatar-btn{
                                    background-color: #9C7EFF;
                                    border: none;
                                    border-radius: 50%;
                                    cursor: pointer;
                                    flex-shrink: 0;
                                    height: 42px;
                                    padding: 3px;
                                    width: 42px;
                                }
                                    .perfil-foto-avatar-btn img{
                                        border-radius: 50%;
                                        display: block;
                                        filter: grayscale(.85);
                                        height: 100%;
                                        object-fit: cover;
                                        opacity: .75;
                                        transition: filter .2s ease, opacity .2s ease;
                                        width: 100%;
                                    }
                                    .perfil-foto-avatar-btn.is-active img{
                                        filter: none;
                                        opacity: 1;
                                    }
                        .perfil-info{
                            border-right: none;
                            padding-bottom: 26px;
                            padding-right: 0;
                        }
                        .perfil-nombre{ font-size: 2.4rem; }
                        .perfil-stats{ flex-basis: auto; }
                }
                @media (max-width: 560px){
                    /* En vez de envolver en varias filas, se vuelve una
                       fila con scroll horizontal (con grab, vía la clase
                       "js-drag-scroll" que ya engancha cronologia-drag.js). */
                    .perfiles-avatares{
                        cursor: grab;
                        flex-wrap: nowrap;
                        gap: 14px;
                        justify-content: flex-start;
                        overflow-x: auto;
                        padding: 4px 14px 10px;
                        scrollbar-width: none;
                        -ms-overflow-style: none;
                        -webkit-overflow-scrolling: touch;
                    }
                        .perfiles-avatares::-webkit-scrollbar{ display: none; }
                        .perfiles-avatares.is-dragging{
                            cursor: grabbing;
                            scroll-behavior: auto;
                            user-select: none;
                        }
                        .perfil-avatar-btn{ flex: 0 0 auto; }
                    .perfil-avatar-wrap{ height: 76px; width: 76px; }
                    .perfil-avatar-name{ font-size: .7rem; }
                    .perfil-card{ padding: 20px; }
                    .perfil-nombre{ font-size: 2rem; }
                    ul.perfil-ficha li p{ font-size: .92rem; }
                }
    .box-perfil-radar{
        background-color: #fff;
        padding: 0 0 60px;
    }
        .ctn-box-perfil-radar{
            
        }
            .ctn-box-perfil-radar .box-iframe{
                margin: 40px auto;
            }
    .box-comunidad{
        margin-bottom: 60px;
        overflow: hidden;
        position: relative;
    }
        #comunidadMascota{
            top: 70px;
        }
        .ctn-box-comunidad h5{
            margin-bottom: 40px;
        }
.main-facturando{
    background-color: #fff;
    overflow: hidden;
    position: relative;
}
    #facturandoMascotaDer{
        top: 1000px;
    }
    #facturandoMascotaIzq{
        top: 1650px;
    }
    .ctn-box-facturando{

    }
        .ctn-box-facturando h5{
            margin: 40px auto;
        }

        .impacto-cards{
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin: 40px auto;
        }
        .impacto-card{
            background-color: var(--white);
            border: 1px solid var(--ink);
            border-radius: 18px;
            flex: 1 1 260px;
            padding: 22px 26px;
        }
        .impacto-icono{
            background-color: transparent;
            display: inline-block;
            height: 56px;
            margin-bottom: 16px;
            margin-right: 10px;
            width: 56px;
        }
        .impacto-card img{
            display: inline-block;
            margin: 0 5px 0 0;
            vertical-align: top;
            max-width: 60px;
        }
        .impacto-label{
            color: var(--ink);
            display: inline-block;
            font: 1.3rem/1.35 'Prelo Extrabold' !important;
            margin-bottom: 12px;
            max-width: 310px !important;
            vertical-align: top;
        }
        .impacto-cifra{
            color: var(--red);
            font: 2.6rem/1.05 'Monigue Regular' !important;
            text-transform: uppercase;
        }
        @media (max-width: 900px){
            .impacto-cifra{ font-size: 1.7rem; }
        }
        @media (max-width: 560px){
            .impacto-cards{ flex-direction: column; }
            .impacto-card{ padding: 20px; }
            .impacto-icono{ height: 46px; margin-bottom: 12px; width: 46px; }
            .impacto-label{ font-size: .9rem; }
            .impacto-cifra{ font-size: 1.5rem; }
        }

        /* --- Momentos clave en el mapa diplomático (cronología horizontal) --- */
        .momentos-wrap{
            -webkit-overflow-scrolling: touch;
            cursor: grab;
            margin: 30px auto 20px;
            max-width: 1100px;
            overflow-x: auto;
            overflow-y: hidden;
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* IE / Edge legacy */
            padding-bottom: 90px;
        }
            .momentos-wrap::-webkit-scrollbar{
                display: none; /* Chrome / Safari / Edge */
            }
            .momentos-wrap.is-dragging{
                cursor: grabbing;
                scroll-behavior: auto;
                user-select: none;
            }
            .momentos-track{
                display: flex;
                gap: 42px;
                padding: 10px 20px 20px;
                width: max-content;
            }
                .momento-card{
                    flex: 0 0 260px;
                }
                    .momento-foto{
                        /*aspect-ratio: 4 / 3;*/
                        overflow: hidden;
                        position: relative;
                    }
                        .momento-foto img{
                            display: block;
                            height: 100%;
                            object-fit: cover;
                            pointer-events: none;
                            width: 100%;
                        }
                        .momento-cinta{
                            background-color: var(--red);
                            height: 26px;
                            left: 50%;
                            opacity: .9;
                            position: absolute;
                            top: -6px;
                            transform: translateX(-50%) rotate(-4deg);
                            width: 140px;
                            display: none;
                        }
                    .momento-card span{
                        color: #c0bfbf;
                        font-family: 'Prelo Semibold';
                        text-transform: uppercase;
                    }
                    .momento-card p{
                        font: 1rem/1.4 'Prelo Book';
                        margin: 14px 0 0;
                    }
                        .momento-card p b{
                            color: #5254BF;
                            font-family: 'Prelo Bold';
                        }
        @media (max-width: 900px){
            .momento-card{ flex: 0 0 220px; }
        }
        @media (max-width: 560px){
            .momentos-track{ gap: 16px; padding: 10px 16px 16px; }
            .momento-card{ flex: 0 0 200px; }
            .momento-card p{ font-size: .92rem; }
        }
.main-trivia{
    background-color: #0195ca;
    margin-top: -1px;
    overflow: hidden;
    padding: 40px 0;
    position: relative;
}
    .main-trivia h3{
        line-height: 1;
        margin-bottom: 40px;
    }
        .main-trivia h3 span{
            color: #fff;
            display: block;
        }
    img.corte-celeste{
        display: block;
        margin-top: -50px;
        position: relative;
    }
    img.corte-rosado{
        display: block;
        margin-top: -140px;
        position: relative;
    }
    img.corte-blanco{
        display: block;
        margin-top: -140px;
        position: relative;
    }
    .ctn-box-trivia{
        margin: 0 auto;
        max-width: 900px;
        padding: 0 20px;
        text-align: center;
    }
        .ctn-box-trivia h5{
            color: #fff;
            font: 1rem/1.2 'Prelo Semibold';
            letter-spacing: .5px;
            margin-bottom: 10px;
            text-transform: uppercase;
        }
        .ctn-box-trivia h4{
            color: #fff;
            font: 1.9rem/1.3 'Monigue Regular';
            margin: 0 auto 20px;
            max-width: 600px;
        }
            .ctn-box-trivia h4 i{
                background: url('../img/punto-rojo.png') no-repeat center;
                background-size: 100%;
                display: inline-block;
                height: 10px;
                margin: 0 10px 0 0;
                vertical-align: middle;
                width: 10px;
            }
        .ctn-box-trivia > p{
            color: #fff;
            font: 1.1rem/1.4 'Prelo Book';
            margin: 0 auto 30px;
            max-width: 560px;
        }

        /* --- App de trivia --- */
        .trivia-app{
            margin: 20px auto 0;
            max-width: 640px;
            position: relative;
        }
            .trivia-pantalla[hidden]{ display: none; }

            /* Pantalla de pregunta */
            .trivia-burbuja{
                background-color: var(--ink);
                border-radius: 22px;
                padding: 28px 32px 32px;
                position: relative;
                text-align: left;
            }
                .trivia-burbuja::after{
                    border-color: var(--ink) transparent transparent transparent;
                    border-style: solid;
                    border-width: 22px 22px 0 0;
                    bottom: -20px;
                    content: '';
                    left: 46px;
                    position: absolute;
                }
                .trivia-burbuja-num{
                    color: #fff;
                    font: 2.2rem/1 'Monigue Regular';
                    margin-bottom: 10px;
                    text-transform: uppercase;
                }
                .trivia-burbuja-texto{
                    color: #fff;
                    font: 1.15rem/1.4 'Prelo Bold';
                }

            .trivia-opciones{
                display: flex;
                flex-direction: column;
                gap: 16px;
                margin: 40px 0 30px;
            }
                .trivia-opcion{
                    align-items: center;
                    background-color: #fff;
                    border: none;
                    border-radius: 8px;
                    cursor: pointer;
                    display: flex;
                    gap: 14px;
                    padding: 18px 22px;
                    text-align: left;
                    transition: background-color .15s ease, color .15s ease;
                    width: 100%;
                }
                    .trivia-opcion-num{
                        color: var(--ink);
                        flex: 0 0 auto;
                        font: 2.2rem/1 'Monigue Regular';
                    }
                        .trivia-opcion-num i{ font-style: normal; }
                    .trivia-opcion-texto{
                        color: var(--ink);
                        font: 1.05rem/1.35 'Prelo Semibold';
                    }
                    .trivia-opcion.is-selected{
                        background-color: #9C7EFF;
                    }
                        .trivia-opcion.is-selected .trivia-opcion-num,
                        .trivia-opcion.is-selected .trivia-opcion-texto{
                            color: #fff;
                        }
                    .trivia-opcion:hover:not(.is-selected){
                        background-color: #f0f0f0;
                    }

            .trivia-btn{
                border: none;
                border-radius: 8px;
                cursor: pointer;
                display: block;
                font: 1.1rem/1 'Monigue Regular';
                margin: 0 auto;
                padding: 18px 40px;
                text-transform: uppercase;
                transition: opacity .15s ease, transform .15s ease;
            }
                .trivia-btn--continuar{
                    background-color: var(--ink);
                    color: #fff;
                }
                    .trivia-btn--continuar:disabled{
                        cursor: default;
                        opacity: .4;
                    }
                    .trivia-btn--continuar:hover:not(:disabled){ transform: scale(1.03); }

            /* Pantalla de resultado */
            .trivia-pantalla--resultado{
                padding: 20px 0 10px;
                text-align: center;
            }
                .trivia-eres{
                    color: var(--ink);
                    font: 1.8rem/1 'Monigue Regular';
                    text-transform: uppercase;
                }
                .trivia-nivel-nombre{
                    color: var(--ink);
                    font: 4.5rem/1 'Monigue Regular';
                    margin: 4px auto 20px;
                    text-transform: uppercase;
                }
                .trivia-nivel-img{
                    margin: 0 auto 24px;
                    max-width: 320px;
                    position: relative;
                }
                    .trivia-nivel-img img{
                        display: block;
                        margin: 0 auto;
                        width: 100%;
                    }
                    .trivia-nivel-puntaje{
                        color: var(--ink);
                        font-family: 'Monigue Regular';
                        left: 78.8%;
                        line-height: 1;
                        pointer-events: none;
                        position: absolute;
                        text-align: center;
                        top: 19.5%;
                        transform: translate(-50%, -50%) rotate(-9deg);
                        white-space: nowrap;
                    }
                        .trivia-nivel-puntaje b{
                            display: block;
                            font-size: 1.5rem;
                        }
                        .trivia-nivel-puntaje span{
                            display: block;
                            font-size: .8rem;
                            letter-spacing: .02em;
                            margin-top: -4px;
                            text-transform: uppercase;
                        }
                .trivia-nivel-subtitulo{
                    background-color: var(--ink);
                    color: #9c7dff;
                    display: inline-block;
                    font: 1.3rem/1.3 'Monigue Regular';
                    padding: 16px 28px;
                    text-transform: uppercase;
                    transform: rotate(-2deg);
                }
                .trivia-btn--jugar{
                    background-color: #fff;
                    color: var(--ink);
                    margin-top: 34px;
                }
                    .trivia-btn--jugar:hover{ transform: scale(1.03); }
                .trivia-ver-respuestas{
                    margin: 26px auto 0;
                    max-width: 380px;
                }
                    .trivia-ver-respuestas-label{
                        color: var(--ink);
                        cursor: pointer;
                        display: block;
                        font: 700 1rem/1.3 'Prelo Bold';
                        list-style: none;
                        text-decoration: underline;
                        text-underline-offset: 4px;
                    }
                        .trivia-ver-respuestas-label::-webkit-details-marker{ display: none; }
                        .trivia-ver-respuestas-label::marker{ content: ""; }
                        .trivia-ver-respuestas-label:hover{ opacity: .7; }
                    .trivia-respuestas-lista{
                        color: var(--ink);
                        font: 1.05rem/1.7 'Prelo Semibold';
                        letter-spacing: .02em;
                        margin: 14px 0 0;
                    }

            @media (max-width: 560px){
                .trivia-burbuja{ padding: 22px 22px 26px; }
                .trivia-burbuja-num{ font-size: 1.7rem; }
                .trivia-burbuja-texto{ font-size: 1rem; }
                .trivia-opcion{ padding: 14px 16px; }
                .trivia-opcion-num{ font-size: 1.7rem; }
                .trivia-opcion-texto{ font-size: .95rem; }
                .trivia-nivel-nombre{ font-size: 2.8rem; }
                .trivia-nivel-subtitulo{ font-size: 1rem; padding: 12px 20px; }
                .trivia-nivel-puntaje b{ font-size: 1.5rem; }
                .trivia-nivel-puntaje span{ font-size: .65rem; }
                .trivia-ver-respuestas-label{ font-size: .9rem; }
                .trivia-respuestas-lista{ font-size: .95rem; }
            }

/* ============================================================
   Bloque cortador en degradé (negro -> blanco) entre main-animacion-5
   (video a pantalla completa) y main-deja-tu-mensaje (fondo blanco).
   Al entrar en viewport, se "rompe" con un efecto glitch (jitter +
   franjas rojo/cian superpuestas) y luego se colapsa, revelando la
   siguiente sección sin un corte brusco.
   ============================================================ */
.corte-glitch{
    background: linear-gradient(to bottom, #000 0%, #000000 30%, #0c0c0c 40%, #242424 50%, #333333 60%, #5d5d5d 70%, #a0a0a0 80%, #d5d5d5 90%, #fff 100%);
    height: 500px;
    overflow: hidden;
    position: relative;
}
    .corte-glitch::before,
    .corte-glitch::after{
        content: "";
        inset: 0;
        mix-blend-mode: screen;
        opacity: 0;
        pointer-events: none;
        position: absolute;
    }
    .corte-glitch::before{
        background: repeating-linear-gradient(to bottom, rgba(255,0,90,.55) 0px, rgba(255,0,90,.55) 3px, transparent 3px, transparent 7px);
    }
    .corte-glitch::after{
        background: repeating-linear-gradient(to bottom, rgba(0,225,255,.55) 0px, rgba(0,225,255,.55) 3px, transparent 3px, transparent 7px);
    }
    .corte-glitch.is-glitching{
        animation: corte-glitch-jitter 1.8s steps(1, end) both;
    }
        .corte-glitch.is-glitching::before{
            animation: corte-glitch-tint-1 1.8s steps(1, end) both;
        }
        .corte-glitch.is-glitching::after{
            animation: corte-glitch-tint-2 1.8s steps(1, end) both;
        }
    @keyframes corte-glitch-jitter{
        0%   { clip-path: inset(0 0 0 0); transform: translateX(0); }
        8%   { clip-path: inset(10% 0 55% 0); transform: translateX(-10px); }
        16%  { clip-path: inset(0 0 0 0); transform: translateX(6px); }
        24%  { clip-path: inset(40% 0 20% 0); transform: translateX(-14px); }
        32%  { clip-path: inset(0 0 0 0); transform: translateX(0); }
        40%  { clip-path: inset(65% 0 5% 0); transform: translateX(10px); }
        48%  { clip-path: inset(0 0 0 0); transform: translateX(-6px); }
        60%  { clip-path: inset(15% 0 45% 0); transform: translateX(8px); }
        72%  { clip-path: inset(0 0 0 0); transform: translateX(0); }
        100% { clip-path: inset(0 0 0 0); transform: translateX(0); }
    }
    @keyframes corte-glitch-tint-1{
        0%, 100% { opacity: 0; }
        10%, 25%, 42% { opacity: .55; }
        18%, 33%, 50% { opacity: 0; }
    }
    @keyframes corte-glitch-tint-2{
        0%, 100% { opacity: 0; }
        14%, 29%, 46% { opacity: .5; }
        22%, 37%, 55% { opacity: 0; }
    }
    @media (prefers-reduced-motion: reduce){
        .corte-glitch.is-glitching,
        .corte-glitch.is-glitching::before,
        .corte-glitch.is-glitching::after{
            animation: none;
        }
    }
    @media (max-width: 640px){
        .corte-glitch{ 
            /*height: 140px; */
        }
    }
.main-deja-tu-mensaje{
    background-color: #fff;
    padding-top: 80px;
    position: relative;
}
    .main-deja-tu-mensaje img.sello{
        margin: 0 auto;
        max-width: 650px;
        transform: translate(0, -40%);
    }
    .ctn-box-deja-tu-mensaje{

    }
        .ctn-box-deja-tu-mensaje h3{
            background-color: #000;
            color: #fff;            
            font: 6rem / 1.3 'Monigue Regular';
            margin: 0 auto;
            text-align: center;
            text-transform: uppercase;
            width: fit-content;
        }
            .ctn-box-deja-tu-mensaje h3 span{
                background-color: #F42439;
                color: #000;
                display: block;
                padding: 0 20px;
            }
        .ctn-box-deja-tu-mensaje h4{
            color: #000;
            font: 2rem / 1.2 'Monigue Regular';
            margin: 30px auto;
            max-width: 600px;
        }
            .ctn-box-deja-tu-mensaje h4 a{
                color: #000;
                cursor: pointer;
                text-decoration: underline;
                text-underline-offset: 4px;
            }

        .mensaje-form{
            background-color: #fff;
            border: 1px solid #c2c2c2;
            border-radius: 28px;
            margin: 0 auto;
            max-width: 600px;
            padding: 36px 40px;
        }
            .mensaje-label{
                color: var(--ink);
                display: block;
                font: 1.2rem/1.3 'Monigue Regular';
                margin: 0 0 10px;
            }
            .mensaje-input{
                background-color: #F5AFB4;
                border: none;
                border-radius: 30px;
                color: var(--ink);
                display: block;
                font: 1rem/1.4 'Prelo Book', sans-serif;
                margin: 0 0 26px;
                padding: 16px 24px;
                width: 100%;
            }
                .mensaje-input::placeholder{ color: rgba(20,18,31,.55); }
                .mensaje-textarea{
                    border-radius: 22px;
                    resize: vertical;
                }
            .mensaje-btn-enviar{
                background-color: #000;
                border: none;
                border-radius: 40px;
                color: #fff;
                cursor: pointer;
                display: block;
                font: 1.6rem/1.3 'Monigue Regular';
                margin: 6px auto 0;
                padding: 18px 50px;
                transition: transform .15s ease;
            }
                .mensaje-btn-enviar:hover{ transform: scale(1.03); }
                .mensaje-btn-enviar:disabled{ cursor: wait; opacity: .7; }
            .mensaje-estado{
                color: var(--ink);
                font: 1rem/1.4 'Prelo Semibold', sans-serif;
                margin: 16px 0 0;
                text-align: center;
            }
                .mensaje-estado.is-error{ color: #000; }
            .mensaje-form p{
                color: var(--ink);
                font: 1rem/1.4 'Prelo Book', sans-serif;
                margin: 26px 0;
            }

        .mensaje-aclaracion{
            background: none;
            border: none;
            color: var(--ink);
            cursor: pointer;
            display: block;
            font: 1.5rem/1.3 'Monigue Regular';
            margin: 50px auto 0;
            text-decoration: underline;
            text-underline-offset: 4px;
        }
            .mensaje-aclaracion:hover{ opacity: .7; }

        body.aclaracion-popup-abierto{
            overflow: hidden;
        }
        .ctn-aclaracion-popup{
            align-items: center;
            display: flex;
            inset: 0;
            justify-content: center;
            padding: 40px 24px;
            position: fixed;
            z-index: 999;
        }
            .ctn-aclaracion-popup[hidden]{
                display: none;
            }
            .aclaracion-popup-overlay{
                background-color: rgba(6, 6, 8, 0.9);
                inset: 0;
                position: absolute;
            }
            .aclaracion-popup{
                background-color: #fff;
                border-radius: 5px;
                max-width: 420px;
                padding: 40px 36px;
                position: relative;
                width: 100%;
            }
                .aclaracion-popup-close{
                    align-items: center;
                    background-color: var(--red);
                    border: none;
                    border-radius: 50%;
                    color: #fff;
                    cursor: pointer;
                    display: flex;
                    font: 1.4rem/1 var(--font);
                    height: 42px;
                    justify-content: center;
                    position: absolute;
                    right: -14px;
                    top: -14px;
                    width: 42px;
                }
                .aclaracion-popup p{
                    color: var(--ink);
                    font: 1rem/1.6 'Prelo Medium', sans-serif;
                }
                    .aclaracion-popup p span{
                        font-family: 'Prelo Bold';
                    }

            @media (max-width: 560px){
                .aclaracion-popup{ padding: 32px 26px; }
            }

        .mensaje-btn-ver{
            background-color: #F42439;
            border: none;
            border-radius: 40px;
            color: #000;
            cursor: pointer;
            display: block;
            font: 1.8rem/1.2 'Monigue Regular';
            margin: 50px auto 0;
            padding: 9px 40px;
            text-transform: uppercase;
            transition: transform .15s ease;
        }
            .mensaje-btn-ver:hover{ transform: scale(1.03); }

    .mensaje-mural{
        align-items: center;
        background-image: url('../img/deja-tu-mensaje/bg-deja-tu-mensaje.jpg');
        background-position: center top;
        background-size: cover;
        display: flex;
        gap: 5px;
        justify-content: center;
        margin-top: 60px;
        min-height: 620px;
        padding: 60px 20px;
        height: 1138px;
        position: relative;
    }
        .box-mascota-8{
            position: absolute;
            top: 280px;
            max-width: 100px;
            left: 35%;
        }
            .box-mascota-8 .crono-mascota-img,
            .box-mascota-8 .crono-mascota-clic{
                animation: crono-mascota-palpito 1.6s ease-in-out 1s infinite;
            }
            @media (prefers-reduced-motion: reduce){
                .box-mascota-8 .crono-mascota-img,
                .box-mascota-8 .crono-mascota-clic{ animation: none; }
            }
            .box-mascota-8 .crono-mascota-clic{
                bottom: 6%;
                left: 102%;
                top: auto;
                translate: -50% 0;
                rotate: -35deg;
            }
        .mural-info{
            background: none;
            border: none;
            cursor: pointer;
            height: 25px;
            padding: 0;
            position: absolute;
            left: 61%;
            width: 25px;
            z-index: 4;
            bottom: 23%;
            display: none;
        }
            .mural-info-icon{
                display: block;
                height: 100%;
                width: 100%;
            }
            .mural-info-tip{
                background-color: #000;
                border-radius: 12px;
                color: #fff;
                cursor: auto;
                display: block;
                font: 400 .9rem/1.5 'Prelo Book', sans-serif;
                opacity: 0;
                padding: 16px 18px;
                pointer-events: none;
                position: absolute;
                right: 0;
                text-align: left;
                top: calc(100% + 10px);
                transform: translateY(-4px);
                transition: opacity .15s ease, transform .15s ease;
                visibility: hidden;
                width: 260px;
                z-index: 5;
            }
                .mural-info-tip b{
                    display: block;
                    font-family: 'Prelo Bold';
                    font-size: 1rem;
                    margin-bottom: 6px;
                }
            .mural-info:hover .mural-info-tip,
            .mural-info:focus .mural-info-tip,
            .mural-info.is-open .mural-info-tip{
                opacity: 1;
                transform: translateY(0);
                visibility: visible;
            }
        .mensaje-flecha{
            background: transparent;
            border: none;
            /*border-radius: 50%;*/
            color: #000;
            cursor: pointer;
            flex: 0 0 auto;
            font-size: 3rem;
            height: 48px;
            line-height: 1;
            width: 48px;
        }
            .mensaje-flecha:hover{ transform: scale(1.08); }
        .mensaje-carta{
            /*background-color: #F4EFE3;*/
            border-radius: 6px;
            /*box-shadow: 0 10px 30px rgba(0,0,0,.25);*/
            max-width: 420px;
            padding: 40px 15px;
            text-align: center;
        }
            .mensaje-carta-texto{
                color: var(--ink);
                font: 1.4rem/1.5 'Monigue Regular';
                margin: 0 0 20px;
            }
            .mensaje-carta-autor{
                color: var(--red);
                font: 1.3rem/1.3 'Monigue Regular';
            }

        @media (max-width: 900px){
            .mensaje-form{ padding: 28px 24px; }
            .mensaje-mural{ flex-direction: column; min-height: 480px; }
                .mural-info{ height: 34px; right: 14px; top: 14px; width: 34px; }
                    .mural-info-tip{ width: 200px; }
                .mensaje-flecha{ transform: rotate(90deg); }
                .mensaje-flecha:hover{ /*transform: rotate(90deg) scale(1.08);*/ }
        }
        @media (max-width: 560px){
            .ctn-box-deja-tu-mensaje h3{ font-size: 3.2rem; }
            .ctn-box-deja-tu-mensaje h4{ font-size: 1.4rem; max-width: calc(100% - 40px); }
            .mensaje-form{ border-radius: 20px; padding: 24px 18px; }
            .mensaje-btn-enviar,
            .mensaje-btn-ver{ padding: 16px 32px; width: 100%; }
            .mensaje-carta{ padding: 28px 22px; }
        }

/* ============================================
   FOOTER
   ============================================ */
.footer-section {
    background: #000;
    color: white;
    padding: 50px 0 0;
    text-align: center;
}

.box-metodologia{
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    gap: 16px;
    margin: 0 auto 50px;
    padding: 0 20px;
}
    .box-metodologia:hover{ opacity: .85; }
    .box-metodologia-icono{
        background-color: #fff;
        border-radius: 50%;
        flex-shrink: 0;
        height: 44px;
        overflow: hidden;
        padding: 2px;
        width: 44px;
    }
    .box-metodologia-titulo{
        color: #fff;
        font: 1.2rem/1.3 'Prelo Bold';
        text-decoration: underline;
        text-underline-offset: 4px;
    }
    @media (max-width: 560px){
        .box-metodologia-icono{ height: 40px; width: 40px; }
        .box-metodologia-titulo{ font-size: 1rem; }
    }

body.metodologia-popup-abierto{
    overflow: hidden;
}
.ctn-metodologia-popup{
    align-items: center;
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 40px 24px;
    position: fixed;
    z-index: 999;
}
    .ctn-metodologia-popup[hidden]{
        display: none;
    }
    .metodologia-popup-overlay{
        background-color: rgba(6, 6, 8, 0.9);
        inset: 0;
        position: absolute;
    }
    .metodologia-popup{
        background-color: #fff;
        border-radius: 20px;
        max-height: calc(100vh - 80px);
        max-width: 480px;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 40px 36px;
        position: relative;
        text-align: left;
        width: 100%;
    }
        .metodologia-popup-close{
            align-items: center;
            background-color: var(--red);
            border: none;
            border-radius: 50%;
            color: #fff;
            cursor: pointer;
            display: flex;
            font: 1.4rem/1 var(--font);
            height: 42px;
            justify-content: center;
            position: absolute;
            right: 10px;
            top: 10px;
            width: 42px;
        }
        .metodologia-popup-titulo{
            color: var(--ink);
            font: 1.8rem/1.2 'Monigue Regular';
            margin: 0 0 18px;
            text-transform: uppercase;
        }
        .metodologia-popup p{
            color: var(--ink);
            font: 1rem/1.6 'Prelo Medium', sans-serif;
            margin: 0 0 16px;
        }
            .metodologia-popup p:last-child{ margin-bottom: 0; }
            .metodologia-popup p b{ font-family: 'Prelo Bold'; }

    @media (max-width: 560px){
        .metodologia-popup{ padding: 32px 26px; }
        .metodologia-popup-titulo{ font-size: 1.5rem; }
    }

.footer-content {
    max-width: 100%;
    margin: 0 auto;
}

.logo-comercio-footer{
    display: block;
    margin: 0 auto 40px;
    max-width: 130px;
}

span.separador-logo {
    background-color: white;
    display: block;
    height: 1px;
    margin: 0 auto var(--spacing-md);
    max-width: 600px;
}

.footer-content ul {
    display: inline-block;
    list-style-type: none;
    margin: 0 30px 0;
    padding: 0;
    vertical-align: top;
    text-align: center;
}

.footer-content ul li {
    margin-bottom: 5px;
}

.footer-content ul li h4 {
    display: inline-block;
    font: 1.1rem/1.3 'Prelo Bold';
    margin-bottom: 0;
    vertical-align: bottom;
}

.footer-content ul li p {
    display: inline-block;
    font: 1.1rem/1.3 'Prelo Book';
    margin: 0;
    vertical-align: bottom;
}
img.bg-footer{
    display: block;
    margin: 0 auto;
    max-width: 100%;
}
img.bg-footer-movil{
    display: none;
}


.animacion-video-desktop-1,
.animacion-video-desktop-2,
.animacion-video-desktop-3,
.animacion-video-desktop-4,
.animacion-video-desktop-7,
.animacion-video-desktop-9,
.animacion-video-desktop-10,
.animacion-video-desktop-11,
.animacion-video-desktop-12,
.animacion-video-desktop-13,
.animacion-video-desktop-14,
.bg-cancion-capas-desktop{
    display: block;
}
.animacion-video-movil-1,
.animacion-video-movil-2,
.animacion-video-movil-3,
.animacion-video-movil-4,
.animacion-video-movil-7,
.animacion-video-movil-9,
.animacion-video-movil-10,
.animacion-video-movil-11,
.animacion-video-movil-12,
.animacion-video-movil-13,
.animacion-video-movil-14,
body .bg-cancion-capas-movil{
    display: none;
}

/** laptop Lore **/
@media (max-height: 732px){

    .main-hero{
        height: 125vh;
    }
        .box-botones{
            
        }
    .animacion-texto--2{
        bottom: 130px;
    }

}

/** Móvil **/
@media (max-width: 640px){

    .animacion-video-desktop-1,
    .animacion-video-desktop-2,
    .animacion-video-desktop-3,
    .animacion-video-desktop-4,
    .animacion-video-desktop-7,
    .animacion-video-desktop-9,
    .animacion-video-desktop-10,
    .animacion-video-desktop-11,
    .animacion-video-desktop-12,
    .animacion-video-desktop-13,
    .animacion-video-desktop-14,
    .bg-cancion-capas-desktop,
    .ctn-separador{
        display: none !important;
    }
    .animacion-video-movil-1,
    .animacion-video-movil-2,
    .animacion-video-movil-3,
    .animacion-video-movil-4,
    .animacion-video-movil-7,
    .animacion-video-movil-9,
    .animacion-video-movil-10,
    .animacion-video-movil-11,
    .animacion-video-movil-12,
    .animacion-video-movil-13,
    .animacion-video-movil-14,
    body .bg-cancion-capas-movil{
        display: block;
    }

    .main-hero h1{
        font-size: 3.5rem;
        height: 280px;
        width: 100%;
    }
        .box-titulo a{
            margin: 0 50px;
        }
    .box-bajada .box-botones{
        bottom: inherit;
    }
    .box-bajada h2{
        padding: 0 20px;
    }
    .main-animacion-1 h3{
        font-size: 4rem;
        margin-bottom: 80px;
    }
    .main-animacion-1{
        padding: 45px 0 0;
    }
        .animacion-texto--1 p{
            max-width: 250px;
            margin: 0 auto;
        }
        .main-animacion-1 #animacionCta1{
            position: absolute;
            right: 10px;
            top: 40px;
        }
    .elemento-transicion-2,
    .elemento-transicion-6{
        display: none;
    }
    .main-canciones{
        margin-top: 0;
        overflow: hidden;
    }
        .main-canciones .elemento-transicion-1 {
            max-width: 150px;
            top: 0;
            left: -90px;
        }
        .box-universo-musical{
            margin-top: 0;
            padding: 0 0 60px;
        }
        .desplegables-radiografia{
            gap: 6px;
        }
        .desplegable{
            margin: 0 auto;
        }
            .desplegable summary{
                font-size: 1rem;
            }
            .desplegable-perfiles{
                margin: 0 auto 12px;
                width: 88%;
            }
        .filters-row{
            display: flow;
        }
            .select-wrap{
                margin-bottom: 20px;
            }
            .legend-row{
                justify-content: flex-start;
            }
        .ctn-box-capas .box-disclaimer-lineal p,
        .ctn-box-analisis-cancion .box-disclaimer-lineal p{
            padding: 20px;
        }
    .iframe-brecha{
        height: 600px !important;
    }
    .box-buscador-cancion{
        padding-bottom: 250px;
    }
    #buscadorMascota{
        max-width: inherit;
        top: 850px;
        width: 55%;
    }
    #cronoMascota{
        max-width: inherit;
        top: 0;
        width: 55%;
    }
    #capasMascota{
        max-width: inherit;
        top: 45px;
        width: 55%;
    }
    #comunidadMascota{
        max-width: inherit;
        top: 0;
        width: 55%;
    }
    .box-capas{
        padding-top: 300px;
    }
    .box-comunidad{
        margin-bottom: 0;
        padding-top: 280px;
    }
    .main-animacion-6{
        background-color: transparent !important;
        padding-top: 170px;
    }
    .elemento-transicion-5{
        max-width: 150px;
        left: 0;
        display: none;
    }
    #mainAnimacion6 .animacion-cta--oscuro{
        position: absolute;
        right: 0;
    }
    .animacion-cta--oscuro .animacion-cta-nombre{
        color: #000 !important;
    }
    .crono-mascota-nombre{
        font-size: 20px;
    }
    .ctn-box-cronologia h5{
        margin-bottom: 20px;
    }
    .main-radiografia h3{
        font-size: 3rem;
    }
    .animacion2-fila--llave{
        flex-direction: column-reverse;
        gap: 25px;
        margin-bottom: 30px;
        padding: 40px 20px 0;
    }
    .animacion3-letra{
        max-width: 250px;
        top: 100px;
    }
    .main-animacion-3 .elemento-transicion-4{
        bottom: -4px;
        max-width: 200px;
        right: -55px;
    }
    .box-compara{
        padding-top: 230px;
    }
    #comparaMascota{
        max-width: inherit;
        width: 52%;       
    }
    .clusters_miembro{
        height: 650px !important;
    }
    .box-perfil-radar{
        padding: 0;
    }
    .animacion5-letra{
        max-width: 300px;
    }
    .main-trivia{
        padding: 40px 0 150px;
    }
    #animacionCta4{
        position: absolute;
        right: 10px;
        width: fit-content;
        left: inherit;
        top: 800px;
    }
    .main-deja-tu-mensaje{
        padding-top: 0;
    }
    .main-deja-tu-mensaje .elemento-transicion-10{
        left: 10%;   
        top: -310px;
    }
    .crono-mascota-2 .crono-mascota-clic{
        top: 0;
        translate: -150px 210px;
    }
    .animacion3-letra p{
        font-size: 1.45rem;
    }



    .animacion-cta{
        position: relative;
        top: 20px;
    }
    .animacion-video--full{
        height: 81vh;
    }
    .animacion-texto--2 {
        bottom: 80px;
        left: 50%;
        width: 35%;
    }
    .ctn-box-universo-musical, 
    .ctn-box-canciones, 
    .ctn-box-capas, 
    .ctn-box-analisis-cancion, 
    .ctn-box-buscador-cancion, 
    .ctn-box-arirang, 
    .ctn-box-cronologia, 
    .ctn-box-siete-voces, 
    .ctn-box-compara, 
    .ctn-box-perfil-radar, 
    .ctn-box-comunidad, 
    .ctn-box-facturando{
        padding: 0 20px;
    }
    .carousel-arrow--prev{
        left: 15px;
    }
    .carousel-arrow--next{
        right: 15px;
    }
    .ctn-box-radiografia h4{
        padding: 0 20px;
    }
    .ctn-box-universo-musical p, 
    .ctn-box-radiografia p, 
    .ctn-box-canciones p, 
    .ctn-box-canciones p, 
    .ctn-box-capas p, 
    .ctn-box-analisis-cancion p, 
    .ctn-box-buscador-cancion p, 
    .ctn-box-arirang p, 
    .ctn-box-cronologia p, 
    .ctn-box-siete-voces p, 
    .ctn-box-compara p, 
    .ctn-box-perfil-radar p,
    .ctn-box-comunidad p,
    .ctn-box-facturando p{
        padding: 0 20px;
    }
    .ctn-box-facturando .sub-wrap{
        padding: 0 20px;
    }
    .ctn-box-facturando .impacto-lista{
        padding: 0 20px;
    }
    .ctn-box-facturando .impacto-item p{
        padding: 0;
    }
    .ctn-box-facturando .impacto-icono{
        height: 45px;
        width: 45px;
    }
    .ctn-box-universo-musical h4, 
    .ctn-box-radiografia h4, 
    .ctn-box-canciones h4, 
    .ctn-box-capas h4, 
    .ctn-box-analisis-cancion h4, 
    .ctn-box-buscador-cancion h4, 
    .ctn-box-arirang h4, 
    .ctn-box-cronologia h4, 
    .ctn-box-siete-voces h4, 
    .ctn-box-compara h4, 
    .ctn-box-perfil-radar h4, 
    .ctn-box-comunidad h4, 
    .ctn-box-facturando h4{
        padding: 0 20px;
    }
    .ctn-box-capas h6, 
    .ctn-box-analisis-cancion h6, 
    .ctn-box-buscador-cancion h6, 
    .ctn-box-arirang h6, 
    .ctn-box-radiografia h6{
        font: 1.9rem / 1 'Monigue Regular';
    }
    ul.lectura-grafico{
        padding: 0 20px;
    }
    .ctn-box-radiografia h5, 
    .ctn-box-cronologia h5, 
    .ctn-box-siete-voces h5, 
    .ctn-box-comunidad h5, 
    .ctn-box-facturando h5{
        font: 3rem / 1.2 'Monigue Regular';
        padding: 0 20px;
    }
    span.separador{
        margin-left: 40px;
    }
    .box-disclaimer-rojo p{
        padding: 30px;
    }
    .patron-track{
        max-width: 90%;
    }
    .ctn-box-analisis-cancion .patron-brecha{
        padding: 0;
    }
    .box-arirang iframe{
        height: 1200px !important;
    }
    .crono-mascota{
        /*display: none;*/
    }
    .box-cronologia{
        margin-bottom: 0;
        padding-top: 250px;
    }
    .crono-label{
        font-size: 1.1rem;
    }
    .crono-label--bts span{
        font-size: 1rem;
    }
    .crono-col{
        flex-basis: 210px;
    }
    .crono-cell p{
        font-size: 1rem;
    }
    .animacion2-letra{
        bottom: inherit;
        top: 16%;
        width: 50%;
    }
    .animacion2-letra p{
        font-size: 1.3rem;
    }
    .animacion2-quote{
        transform: translate(0);
    }
    .animacion2-caja-videos{
        height: 420px;
        width: 100%;
    }
    .animacion2-fila--caja{
        margin-top: 0;
        padding: 0;
    }
    #animacionVideo5{
        height: 180px;
        width: 180px;
    }
    #animacionVideo6{
        height: 220px;
        width: 290px;
    }
    .animacion2-fila--caja .animacion-cta{
        /* En vez de "relative" (lo que trae .animacion-cta en este
           breakpoint) la volvemos a anclar arriba a la derecha, junto
           a la foto de la chica con audífonos (#animacionVideo5), como
           en "referencias/posicion-cta.png". */
        justify-content: center;
        position: absolute;
        right: 16px;
        top: 24px;
    }
    .animacion2-video-puerta{
        max-width: 100%;
    }
    .animacion22-letra{
        position: static;
        left: auto;
        top: auto;
        max-width: 250px;
        margin: 0 auto 20px;
        transform: none;
        text-align: center;
    }
    .main-canciones h3, 
    .main-protagonistas h3, 
    .main-facturando h3, 
    .main-trivia h3{
        font: 3rem / 1.1 'Monigue Regular';
        max-width: 300px;
    }
    .perfil-card{
        margin: 20px;
    }
    ul.perfil-ficha li p{
        font-size: 1.1rem;
    }
    .box-siete-voces{
        margin-top: -65px;
        padding-bottom: 0;
    }
    .ctn-box-siete-voces{
        padding-top: 45px;
    }
    .ctn-box-siete-voces h5{
        padding: 0;
    }
    .perfil-avatar-wrap{
        height: 110px;
        width: 110px;
    }
    .perfil-cabecera{
        row-gap: 8px;
    }
    .ctn-box-perfil-radar iframe{
        height: 1200px !important;
    }
    .ind-label{
        font-size: 17px;
    }
    .momento-card{
        flex: 0 0 350px;
    }
    .momento-card p{
        font-size: 1.2rem;
        padding: 0;
        padding-right: 45px;
    }
    .main-animacion-5{
        background-color: #3ea7cc;
        padding-top: 250px;
    }
    .ctn-box-deja-tu-mensaje h3{
        font-size: 3rem;
    }
    .ctn-box-deja-tu-mensaje h4{
        font-size: 1.8rem;
    }
    .mensaje-label{
        font-size: 1.6rem;
    }
    .mensaje-form{
        width: 95%;
    }
    .mensaje-aclaracion{
        font-size: 1.3rem;
        margin: 50px auto 0;
    }
    .mensaje-btn-enviar, .mensaje-btn-ver{
        width: 75%;
    }
    .mensaje-mural{
        flex-direction: inherit;
        background: url('../img/deja-tu-mensaje/bg-deja-tu-mensaje-movil.jpg') no-repeat center;
        background-size: cover;
        padding-top: 375px;
    }
    .mensaje-flecha{
        transform: none;
    }
    .mensaje-carta-texto{
        font-size: 1.6rem;
    }
    .footer-content ul{
        display: block;
        text-align: center;
    }
    .footer-content ul li h4,
    .footer-content ul li p{
        font-size: 1.1rem;
    }
    .footer-content ul li h4{
        display: block;
    }
    .ctn-box-universo-musical h4, .ctn-box-radiografia h4, .ctn-box-canciones h4, .ctn-box-capas h4, .ctn-box-analisis-cancion h4, .ctn-box-buscador-cancion h4, .ctn-box-arirang h4, .ctn-box-cronologia h4, .ctn-box-siete-voces h4, .ctn-box-compara h4, .ctn-box-perfil-radar h4, .ctn-box-comunidad h4, .ctn-box-facturando h4 {
        font-size: 2.4rem;
        line-height: 1.1;
    }
    .main-hero{
        background: url('../img/bg-portada-movil.jpg') no-repeat center center;
        background-size: cover;
        height: 96vh;
    }
    #mainAnimacion6 .animacion6-texto--2{
        max-width: 200px;
        top: 20%;
    }
    .ctn-box-facturando .impacto-item{
        flex-flow: wrap;
    }
    .impacto-lista--shooky{
        margin-bottom: 320px !important;
    }
    .p-chimmy-gap{
        margin-bottom: 320px !important;
    }
    #facturandoMascotaDer{
        top: 2375px;
        right: -1%;
        width: 53.5%;
        max-width: none;
    }
    #facturandoMascotaIzq{
        top: 3770px;
        left: -13.5%;
        width: 55%;
        max-width: none;
    }
    .bodytobody-item img{
        transform: scale(1);
    }
    .mensaje-btn-ver{
        margin: 35px auto 0;
    }
    .box-titulo{
        top: 42%;
    }
    .box-indicacion-desliza{
        bottom: 250px;
    }
    .animacion22-letra p{
        font: 1.3rem / 1.4 'Bray Notes';
    }

    img.bg-footer{
        display: none;
    }
    img.bg-footer-movil{
        display: block;
        margin: 0 auto;
        max-width: 100%;
    }
    .corte-degrade-celeste{
        height: 115px;
        z-index: 20;    
    }
    .ctn-box-deja-tu-mensaje h4 a{
        display: block;
    }

}

@media (max-width: 393px){

    .main-hero h1{
        height: 300px;
    }
    #facturandoMascotaDer{
        top: 2200px;
        right: -81px;
    }
    #facturandoMascotaIzq{
        top: 3530px;
    }
    .box-mascota-8{
        top: 279px;
    }

}




/* ============================================================
   BTS · ctn-body-to-body ("Body to body")
   - Título + botón de play (reutiliza el look del botón verde/rojo
     de .animacion-cta-play, ver ~línea 562) con un pulso llamativo
     ("late") hasta que el usuario lo presiona.
   - La letra ya está toda visible desde que carga la página, en un
     blanco tenue/translúcido (cada letra en su propio .k-char,
     armado por body-to-body.js a partir de data-texto). Al presionar
     play se va "pintando" letra por letra a blanco pleno (.k-char.is-lit),
     efecto karaoke, mientras los 3 elementos gráficos caen desde arriba
     y se acomodan con un pequeño rebote (bodytobody-item.is-visible),
     quedando con un balanceo de rotación suave e infinito
     (bodytobody-item-inner).
   ============================================================ */
.ctn-body-to-body{
    margin: 0 auto;
    max-width: 980px;
    padding: 0 0 110px;
    position: relative;
}
    #ctnBodyToBody{
        
    }
        #ctnBodyToBody iframe{
            height: 1px;
            opacity: 0;
        }
    .bodytobody-header{
        position: relative;
        max-width: 300px;
        margin: 0 auto 40px;
        z-index: 20;
    }
        .bodytobody-titulo{
            color: var(--ink);
            display: inline-block;
            font: 1.8rem/1 'Monigue Regular';
            margin: 0;
            text-transform: uppercase;
            vertical-align: top;
            padding-top: 15px;
        }
        .bodytobody-play-wrap{
            display: inline-block;
            position: relative;
            vertical-align: top;
        }
            .bodytobody-play{
                animation: bodytobodyLatido 1.8s ease-in-out infinite;
                position: relative;
                margin: 0 20px;
            }
                .bodytobody-play::before{
                    animation: bodytobodyOnda 1.8s ease-out infinite;
                    background-color: #3ddc71;
                    border-radius: 50%;
                    content: "";
                    height: 100%;
                    left: 0;
                    position: absolute;
                    top: 0;
                    width: 100%;
                    z-index: -1;
                }
                .bodytobody-play.is-playing{
                    animation: none;
                }
                    .bodytobody-play.is-playing::before{
                        animation: none;
                        display: none;
                    }
            .bodytobody-hint{
                animation: bodytobodyHintPulso 1.8s ease-in-out infinite;
                color: var(--ink);
                font: .95rem/1 'Poppins', sans-serif;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: .03em;
                transition: opacity .4s ease, visibility .4s ease;
                display: none;
            }
            .bodytobody-hint.is-hidden{
                opacity: 0;
                visibility: hidden;
            }
        .bodytobody-embed.bodytobody-embed{
            height: 0;
            left: 0;
            opacity: 0;
            overflow: hidden;
            pointer-events: none;
            position: absolute;
            top: 0;
            width: 0;
        }

    /* Grid de 2 columnas: cada elemento se ubica por grid-row/grid-column
       sin importar el orden real en el HTML (polaroid, lyric1, lyric2,
       linterna, llavero), así el emparejado en filas es explícito y no
       depende de un flex-wrap frágil. */
    .bodytobody-escena{
        align-items: center;
        column-gap: 40px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        row-gap: 70px;
    }

    /* --- Fila 1: polaroid del soldado + primera estrofa --- */
    .bodytobody-item--polaroid{
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        width: min(85%, 340px);
    }
    .bodytobody-lyric--1{
        grid-column: 2;
        grid-row: 1;
        justify-self: start;
        text-align: left;
        width: min(90%, 250px);
    }

    /* --- Fila 2: segunda estrofa + lightstick --- */
    .bodytobody-lyric--2{
        grid-column: 1;
        grid-row: 2;
        justify-self: end;
        text-align: left;
        width: min(90%, 335px);
    }
    .bodytobody-item--linterna{
        grid-column: 2;
        grid-row: 2;
        justify-self: start;
        width: min(80%, 300px);
    }

    /* --- Fila 3: llavero + polaroids del concierto (ocupa ambas columnas) --- */
    .bodytobody-item--llavero{
        grid-column: 1 / -1;
        grid-row: 3;
        justify-self: center;
        width: min(75%, 620px);
    }

    .bodytobody-lyric{
        font: 1.6rem/1.4 'Bray Notes';
        margin: 0;
    }
        /* Efecto karaoke: cada letra vive en su propio <span class="k-char">
           (los arma body-to-body.js con el texto de data-texto). Por
           defecto todas están en un blanco tenue/translúcido -el texto
           completo ya es legible desde que carga la página- y al
           presionar play se les va agregando "is-lit" una por una, con
           una transición de color suave que las deja en blanco pleno:
           el mismo efecto de "pintado" progresivo de un karaoke. */
        .bodytobody-lyric .k-char{
            color: #a87fff;
            transition: color .2s ease;
        }
            .bodytobody-lyric .k-char.is-lit{
                color: #000;
            }

    .bodytobody-item{
        opacity: 0;
        transform: translateY(-900px);
        /* Caída más pausada y sin rebote marcado (ease-out suave); el
           escalonado entre elementos ahora lo maneja body-to-body.js
           agregando "is-visible" uno por uno con su propio setTimeout,
           en vez de transition-delay fijo por elemento. */
        transition: transform 1.6s cubic-bezier(.16, .84, .38, 1), opacity 1.1s ease;
        will-change: transform, opacity;
    }

        .bodytobody-item.is-visible{
            opacity: 1;
            transform: translateY(0);
        }

        .bodytobody-item-inner{
            animation: bodytobodyBalanceo 6s ease-in-out infinite;
            display: block;
        }
            .bodytobody-item--linterna .bodytobody-item-inner{ animation-duration: 5s; animation-delay: -1.5s; }
            .bodytobody-item--llavero .bodytobody-item-inner{ animation-duration: 7s; animation-delay: -3s; }

        .bodytobody-item img{
            display: block;
            width: 100%;
            transform: scale(1.3);
        }
            .bodytobody-item-2{
                transform: scale(.9) !important;
            }
            .bodytobody-item-3{
                transform: scale(.8) !important;
            }

/* --- Keyframes --- */
@keyframes bodytobodyLatido{
    0%, 100%{ transform: scale(1); }
    18%{ transform: scale(1.14); }
    36%{ transform: scale(1); }
    54%{ transform: scale(1.08); }
    100%{ transform: scale(1); }
}
@keyframes bodytobodyOnda{
    0%{ opacity: .55; transform: scale(1); }
    100%{ opacity: 0; transform: scale(1.9); }
}
@keyframes bodytobodyHintPulso{
    0%, 100%{ opacity: .65; }
    50%{ opacity: 1; }
}
@keyframes bodytobodyBalanceo{
    0%, 100%{ transform: rotate(-2deg); }
    50%{ transform: rotate(2deg); }
}

@media (prefers-reduced-motion: reduce){
    .bodytobody-play,
    .bodytobody-play::before,
    .bodytobody-hint,
    .bodytobody-item-inner{
        animation: none;
    }
}

@media (max-width: 900px){
    .ctn-body-to-body{ padding: 50px 20px 80px; }
    .bodytobody-titulo{ font: 2.1rem/1 'Monigue Regular'; }

    /* En una columna, el orden natural del HTML ya es el correcto:
       polaroid -> lyric1 -> lyric2 -> linterna -> llavero. */
    .bodytobody-escena{
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .bodytobody-item--polaroid,
    .bodytobody-lyric--1,
    .bodytobody-lyric--2,
    .bodytobody-item--linterna,
    .bodytobody-item--llavero{
        margin: 0 auto;
        width: 100%;
    }
    .bodytobody-item--polaroid{ max-width: 220px; }
    .bodytobody-item--linterna{ max-width: 260px; }
    .bodytobody-item--llavero{ max-width: 460px; }
    .bodytobody-lyric{
        max-width: 480px;
        text-align: center;
    }
}

@media (max-width: 560px){
    .bodytobody-header{ flex-direction: column; gap: 14px; }
    .bodytobody-titulo{ font: 1.8rem/1 'Monigue Regular'; }
    .bodytobody-lyric{ font-size: 1.3rem;max-width: 250px; }
}

/* ============================================================
   BTS · main-animacion-6 (Black Swan)
   Dos videos a pantalla completa apilados (animacion-13 / animacion-14),
   cada uno con su letra superpuesta en blanco (mismo patrón que
   .animacion3-letra / .animacion5-letra), más el CTA de Spotify fijo
   arriba a la derecha de toda la sección (mismo componente
   .animacion-cta que Whalien 52 / Magic Shop, con una variante
   "oscura" para el nombre de la canción porque el fondo aquí es negro).
   ============================================================ */
.main-animacion-6{
    background-color: #000;
    /*overflow: hidden;*/
    position: relative;
}
    #animacionCta3 iframe{
        height: 1px;
        opacity: 0;
    }
    .animacion-cta--oscuro{
        right: 24px;
        top: 50px;
        z-index: 2;
    }
        .animacion-cta--oscuro .animacion-cta-nombre{
            border-radius: 4px;
            color: #fff;
            padding: 6px 4px;
        }
    /* Misma diagramación que animacionCta3, pero pegado a la izquierda
       (usado por animacionCta4 en main-trivia). */
    .animacion-cta--izq{
        right: 24px;
    }

    .animacion6-fila{
        position: relative;
        z-index: 0;
    }
        .animacion6-fila--2{
            top: -45px;
            z-index: 20;    
        }
        .degrade-baile{
            bottom: -1px;
            height: 250px;
            position: absolute;
        }

    .animacion6-texto{
        left: 50%;
        max-width: 560px;
        position: absolute;
        text-align: center;
        transform: translate(-50%, -50%);
        width: 90%;
    }
        .animacion6-texto p{
            color: #fff;
            font: 1.5rem/1.4 'Bray Notes';
            margin: 0;
        }
        .animacion6-texto--1{
            top: 50%;
            max-width: 500px;
        }
        .animacion6-texto--2{
            top: 48%;
            max-width: 400px;
        }

    @media (max-width: 900px){
        .animacion-cta--oscuro{ top: 16px; right: 16px; }
        .animacion-cta--izq{ left: 16px; right: auto; }
        .animacion6-texto p{ font-size: 1.25rem; }
    }
    @media (max-width: 560px){
        .animacion6-texto{ max-width: 90%; }
        .animacion6-texto p{ font-size: 1.3rem; }
    }

/* ============================================================
   Popup de dato curioso al presionar una mascota
   ============================================================ */
.ctn-mascota-popup{
    align-items: center;
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 40px 24px;
    position: fixed;
    z-index: 999;
}
    .ctn-mascota-popup[hidden]{
        display: none;
    }
    body.mascota-popup-abierto{
        overflow: hidden;
    }
    .mascota-popup-overlay{
        background-color: rgba(6, 6, 8, 0.9);
        inset: 0;
        position: absolute;
    }
    .mascota-popup{
        align-items: center;
        display: flex;
        max-width: 700px;
        position: relative;
        width: 100%;
    }
        .mascota-popup-close{
            align-items: center;
            background-color: var(--red);
            border: none;
            border-radius: 50%;
            color: #fff;
            cursor: pointer;
            display: flex;
            font: 1.4rem/1 var(--font);
            height: 42px;
            justify-content: center;
            left: 50%;
            position: absolute;
            top: -40px;
            transform: translateX(50%);
            width: 42px;
            z-index: 2;
        }
        .mascota-popup-mascota{
            flex: 0 0 auto;
            margin-right: -30px;
            max-width: 150px;
            position: relative;
            z-index: 1;
            rotate: 10deg;
        }
        .mascota-popup-card{
            background-color: #fff;
            flex: 1 1 auto;
            padding: 34px 60px 34px 60px;
            position: relative;
            border-top-right-radius: 20px;
            border-top-left-radius: 20px;
        }
            .mascota-popup-tail{
                border-style: solid;
                border-width: 0 22px 22px 0;
                border-color: transparent var(--red) transparent transparent;
                bottom: 0;
                left: -30px;
                position: absolute;
                transform: rotate(180deg);

                width: 0; height: 0;
                border-style: solid;
                border-width: 30px 0px 0px 30px;
                border-color: #f42439 transparent transparent transparent;
                transform: rotate(0deg);
            }
            .mascota-popup-texto{
                color: var(--ink);
                font: 1.05rem/1.6 'Prelo Medium';
                text-align: center;
            }
                .mascota-popup-titulo{
                    color: #5254BF;
                    font-family: 'Prelo Bold';
                }
            .mascota-popup-texto--mascota{
                font-family: 'Prelo Bold';
                margin-top: 10px;
            }
                .mascota-popup-nombre{
                    color: #5254BF;
                    font-family: 'Prelo Bold';
                }
            .mascota-popup-mano{
                bottom: -30px;
                max-width: 55px;
                position: absolute;
                right: -20px;
            }

    @media (max-width: 900px){
        .mascota-popup-mascota{ max-width: 160px; margin-right: -22px; }
        .mascota-popup-card{ padding: 28px 40px; }
        .mascota-popup-mano{ max-width: 70px; right: -14px; bottom: -24px; }
    }
    @media (max-width: 640px){
        .mascota-popup{ flex-direction: column; }
        .mascota-popup-mascota{ margin: 0 0 -20px; max-width: 130px; z-index: 2; }
        .mascota-popup-card{ padding: 40px 24px 28px; width: 100%; }
        .mascota-popup-tail{ display: none; }
        .mascota-popup-texto{ font-size: .95rem; }
        .mascota-popup-mano{ display: none; }
        .mascota-popup-close{ top: -54px; }
    }

.elemento-transicion-1{
    max-width: 250px;
    position: absolute;
    top: -100px;    
}
.elemento-transicion-2{
    max-width: 250px;
    position: absolute;
    right: 0;
    top: -250px;    
}
.elemento-transicion-3{
    max-width: 450px;
    position: absolute;
    top: -70px;
    left: -177px;
    display: none;
}
.elemento-transicion-4{
    bottom: 0;
    max-width: 250px;
    position: absolute;
    right: 150px;   
    z-index: 10;
}
.elemento-transicion-5{
    max-width: 350px;
    position: absolute;
    right: 0;
    top: -200px;   
    z-index: 10;
}
.elemento-transicion-6{
    max-width: 350px;
    position: absolute;
    bottom: -70px;
    left: 0;
    z-index: 20;
}
.elemento-transicion-7{
    max-width: 350px;
    position: absolute;
    bottom: -10px;
    left: -150px;
    z-index: 20;
}
.elemento-transicion-8{
    max-width: 250px;
    position: absolute;
    left: 50%;
    z-index: 20;
    top: -45px;
    transform: translate(-160%, 0);
}
.elemento-transicion-9{
    max-width: 80px;
    position: absolute;
    right: 50%;
    z-index: 20;
    top: -50px;
    transform: translate(220%, 0);
}
.elemento-transicion-10{
    max-width: 120px;
    position: absolute;
    left: 40%;
    z-index: 20;
    top: -150px;
    rotate: 151deg;
    opacity: 0;
    transform: translateY(0);
    transition: transform 1s ease, opacity 1s ease;
}
    .elemento-transicion-10.en-vista{
        opacity: 1;
        transform: translateY(-110px);
    }
.elemento-transicion-11{
    max-width: 180px;
    position: absolute;
    right: 0;
    z-index: 20;
    top: 60px;
}


/** IPAD **/
@media (max-width: 1024px){

    .box-botones{
        bottom: 40px;
    }

    .carousel-arrow--prev,
    .carousel-arrow--next{
        display: none;
    }

    .crono-mascota--der{
        right: -110px;
    }
    .elemento-transicion-5{
        max-width: 250px;
    }
    #animacionCta3 iframe{
        width: 100px;
    }
    .animacion6-texto--1,
    .animacion6-texto--2{
        max-width: 350px;
    }
    .main-animacion-5{
        background-color: #3ca6cb;
        padding-top: 150px;
        margin-top: -2px;
    }
    .main-deja-tu-mensaje img.sello{
        max-width: 550px;
    }
    img.corte-rosado{
        margin-top: -90px;
    }
    .elemento-transicion-11{
        right: 0;
        max-width: 100px;
    }
    .animacion2-fila .animacion-cta{
        right: 20px;
    }
    .bodytobody-header{
        max-width: 225px;
    }
    #ctnBodyToBody iframe{
        max-width: 200px;
    }

}