/*
 * Copyright 2026 Akutangulo - navarr0
 * Proprietary software of Akutangulo.com
 * https://akutangulo.com
 *
 * Diseñado y creado con todo el amor del mundo por navarr0 de Akutangulo.com.
 */

/***************************************************
 * Estilos generales de la página FerVoz.com *
 ***************************************************/
 
    @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");

    @import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&family=Titan+One&display=swap");

    @font-face {
      font-family: "bauhouse_akutangulo";
      src: url("/assets/bauhouse_akutangulo.eot");
      /* archivo EOT para IE */
      src:
        url("/assets/bauhouse_akutangulo.eot?#iefix") format("embedded-opentype"),
        url("/assets/bauhouse_akutangulo.ttf") format("truetype");
      /* archivo TTF para navegadores CSS3 */
    }

    /* Tema Claro */
    :root {
      --font-weight: 600;
      --color-fervoz: #ba55d3;
      /* Color primario, MediumOrchid */
      --color-secundario: #9300d3;
      /* Color secundario --color-akutangulo*/

      --color-texto-primario: #1e1e1e;
      /* Color de texto primario */
      --color-fondo-primario: #f6f4f6;
      /* Color de fondo primario */
      --color-texto-secundario: #5d5d5d;
      /* Color de texto secundario */
      --color-fondo-secundario: #e0dfe4;
      /* Color de fondo secundario */

      --color-fondo-transparente: rgba(255,
          255,
          255,
          0.8);
      /* Color de fondo semi-transparente */
      --sombra-texto: rgba(0, 0, 0, 0.5);
      --menu-fervoz: rgb(241, 240, 240);
      --texto-menu: rgba(43, 43, 43, 1);
      --hover-menu: rgba(255, 182, 255, 0.1);
      --enlaces-fervoz: #9300d3;
      --color-puntuacion-opinion: red;
      --gradient: linear-gradient(45deg, #ff3366, #ff6b6b, #4834d4, #686de0);
      --glass-bg: rgba(255, 255, 255, 0.05);
      --border: 1px solid rgba(255, 255, 255, 0.1);
      --shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
      --section-bg: rgba(255, 255, 255, 0.02);
      --hero-bg: linear-gradient(180deg, rgba(249, 249, 250, 0.95), rgba(233, 231, 236, 0.8));
      --mobile-menu-bg: linear-gradient(135deg,
          rgba(248, 248, 249, 0.95),
          rgba(238, 238, 241, 0.9));
      --toggle-bg: rgba(255, 255, 255, 0.75);
      --toggle-track: rgba(255, 255, 255, 0.35);
      --toggle-thumb: #fff;
      --toggle-icon: #ba55d3;
      --toggle-border: rgba(34, 34, 34, 0.65);
    }

    /* Tema Oscuro */
    .tema-oscuro {
      --font-weight: 400;
      --color-texto-primario: #e0e0e0;
      /* Color de texto primario */
      --color-fondo-primario: #1e1e1e;
      /* Color de fondo primario */
      --color-texto-secundario: #a8a8a8;
      /* Color de texto secundario */
      --color-fondo-secundario: #2b2b2b;
      /* Color de fondo secundario */

      --color-fondo-transparente: rgba(30,
          30,
          30,
          0.8);
      /* Color de fondo semi-transparente */
      --sombra-texto: rgba(255, 255, 255, 0.5);
      --menu-fervoz: rgba(13, 13, 13, 1);
      --texto-menu: rgba(255, 255, 255, 1);
      --hover-menu: rgba(186, 85, 211, 0.5);
      --enlaces-fervoz: #ba55d3;
      --color-puntuacion-opinion: yellow;
      --mobile-menu-bg: rgba(15, 15, 15, 0.95);
      --hero-bg: linear-gradient(180deg, rgba(15, 15, 15, 0.95), rgba(25, 25, 25, 0.6));
      --toggle-bg: rgba(255, 255, 255, 0.25);
      --toggle-track: rgba(255, 255, 255, 0.2);
      --toggle-thumb: #fff;
      --toggle-icon: #ffffb3;
      --toggle-border: rgba(255, 255, 255, 0.65);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
      font-size: 22px;
      font-optical-sizing: auto;
      margin: 0;
      overflow-x: hidden;
      min-height: 100dvh;

      background-color: var(--color-fondo-primario);
      color: var(--color-texto-primario);

      font-family: "Montserrat", sans-serif;
      font-optical-sizing: auto;
      font-weight: var(--font-weight);
      font-style: normal;
    }

    html {
      scroll-behavior: smooth;
    }

    .fa {
      font-size: 2rem;
      color: var(--color-fervoz);
    }

    .fab {
      font-size: 2rem;
      color: var(--color-fervoz);
    }

    .fa-brands {
      font-size: 2rem;
      color: var(--color-fervoz);
    }

    .tema-fervoz {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.2rem 0.55rem;
      border-radius: 999px;
      background: var(--toggle-bg);
      border: 1px solid var(--toggle-border);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    }

    #tema-fervoz {
      display: none;
    }

    .tema-fervoz label {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 24px;
      border-radius: 999px;
      background-color: var(--toggle-track);
      position: relative;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .tema-fervoz label::before {
      content: "";
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: var(--toggle-thumb);
      position: absolute;
      top: 2px;
      left: 3px;
      transition: transform 0.3s ease;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
    }

    #tema-fervoz:checked+label::before {
      transform: translateX(18px);
    }

    .tema-fervoz i {
      font-size: 1.4rem;
      color: var(--toggle-icon);
      line-height: 1;
      display: none;
    }

    #tema-fervoz:checked~.fa-sun-o {
      display: inline-flex;
    }

    #tema-fervoz:not(:checked)~.fa-moon-o {
      display: inline-flex;
    }

    /**************************************************
 * Back to top Button de la página FerVoz.com *
 ***************************************************/

    #back-to-top-btn {
      display: none;
      /* Inicialmente oculto */
      position: fixed;
      bottom: 2vw;
      /* Ajustado con vw para tamaños relativos */
      right: 2vw;
      /* Ajustado con vw para tamaños relativos */
      z-index: 9999;
      /* Asegura que esté por encima de otros elementos */
      background-color: var(--color-fervoz);
      color: var(--color-texto-primario);
      border: none;
      border-radius: 50%;
      padding: 1rem 1.3rem;
      /* Unidades em para padding relativo */
      font-size: 1rem;
      /* Unidades em para tamaño de fuente relativo */
      cursor: pointer;
      box-shadow: 0px 0.4em 0.6em rgba(0, 0, 0, 0.1);
      /* Unidades em para sombra relativa */
      transition:
        transform 0.3s ease,
        background-color 0.3s ease;
    }

    #back-to-top-btn:hover {
      background-color: var(--sombra-texto);
      transform: scale(1.1);
    }

    /*********************************************************************
  * Botones de contacto con efecto flip de la página FerVoz.com *
  *********************************************************************/

    .contenedor-centrado-akutangulo {
      margin: 0 auto;
      padding: 20px;
      text-align: center;
      /* Centrar contenido */
    }

    /*** Botones de contacto con efecto flip ***/
    .boton-contacto {
      border-radius: 3px;
      backface-visibility: hidden;
      position: absolute;
      display: flex;
      flex-direction: column;
      justify-content: center;
      -webkit-box-shadow: 1px 2px 4px -1px rgba(60, 60, 60, 0.64);
      box-shadow: 1px 2px 4px -1px rgba(60, 60, 60, 0.64);
      height: 64px;
      width: 256px;
    }

    .contenedor-boton-flip-contacto {
      position: relative;
      display: inline-block;
      font-weight: 400;
      letter-spacing: 2px;
      height: 64px;
      width: 256px;
      margin: 3em 1em;
    }

    .contact-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 1rem;
      margin-top: 2rem;
    }

    .boton-flip-contacto {
      transform-origin: 100% 30px;
      transition: all 0.5s ease-in-out;
      -webkit-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
      transform-style: preserve-3d;
      position: relative;
    }

    .contenedor-boton-flip-contacto .front {
      transform: translateZ(30px);
      background-image: linear-gradient(90deg, #921dc4, #d272fb);
      align-items: center;
      /* Centrar contenido */
      z-index: 10;
    }

    .contenedor-boton-flip-contacto .back {
      transform: rotateX(90deg) translateZ(30px);
      align-items: center;
      color: black;
      font-size: 1rem;
      text-transform: uppercase;
      --k: 0;
      background: linear-gradient(90deg,
          hsl(calc(var(--k) * 1turn), 95%, 65%),
          hsl(calc(var(--k) * 1turn + 90deg), 95%, 65%));
      filter: url(#f);
      animation: k 4s linear infinite;
    }

    .contenedor-boton-flip-contacto:hover .boton-flip-contacto {
      transform: rotateX(-90deg);
    }

    .boton-contacto i.fab {
      font-size: 8em;
      color: var(--texto-menu);
    }

    .boton-contacto i.fas {
      font-size: 8em;
      color: var(--texto-menu);
    }

    .boton-contacto i.fa {
      font-size: 8em;
      color: var(--texto-menu);
    }

    .boton-contacto i.fa-brands {
      font-size: 8em;
      color: var(--texto-menu);
    }

    /****************************************************
  * Estilos del footer de Akutangulo para FerVoz.com *
  ****************************************************/

    .akutangulo-diseño-web-seo {
      font-family: "bauhouse_akutangulo";
      color: #9400d3;
      animation: glow 10s ease-in-out infinite;
    }

    @keyframes glow {

      0%,
      100% {
        text-shadow: 0 0 30px DeepPink;
      }

      25% {
        text-shadow: 0 0 30px Lime;
      }

      50% {
        text-shadow: 0 0 30px Magenta;
      }

      75% {
        text-shadow: 0 0 30px MediumSlateBlue;
      }
    }

    .footer-aku {
      padding: 20px;
      text-align: center;
    }

    .footer-logo {
      margin: 15px auto;
      width: 76px;
    }

    .copyright {
      color: #cccccc;
      font-size: 1rem;
    }

    .copyright a {
      text-decoration: none;
      transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -webkit-transition: all 0.3s ease-in-out;
    }

    .copyright a:hover {
      font-size: larger;
    }

    /* Estilo base para el trazado del logo Akutangulo en svg*/
    .animacion-logo-svg {
      fill: none;
      stroke: #9300d3;
      /* Color del trazado */
      stroke-width: 5;
      /* Ancho del trazado */
      stroke-dasharray: 3000;
      /* Longitud total del trazado */
      stroke-dashoffset: 3000;
      /* Desplazamiento inicial, oculta el trazado */
      animation:
        draw 5s ease-in-out forwards,
        fillLogo 2s ease-in-out forwards 3s,
        glow 10s ease-in-out infinite;
    }

    /* Animación para dibujar el trazado del logo Akutangulo */
    @keyframes draw {
      0% {
        stroke-dashoffset: 3000;
        /* Comienza con el trazado completamente oculto */
      }

      100% {
        stroke-dashoffset: 0;
        /* Desplazamiento final, muestra todo el trazado */
      }
    }

    /* Animación para rellenar el logo con color */
    @keyframes fillLogo {
      0% {
        fill: transparent;
        /* Comienza con el relleno transparente */
      }

      50% {
        fill: #fbf8fb;
        /* Termina con el color de relleno */
      }

      100% {
        fill: #9300d3;
        /* Termina con el color de relleno */
      }
    }

    .fervoz {
      font-family: "Titan One", sans-serif;
      font-family: "Orbitron", sans-serif;
    }

    .navbar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      padding: 1.2rem 5%;
      backdrop-filter: blur(12px);
      background: var(--menu-fervoz);
      border-bottom: var(--border);
      z-index: 1000;
      transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: var(--shadow);
    }

    .navbar.scrolled {
      padding: 0.8rem 5%;
      background: var(--menu-fervoz);
    }

    .navbar-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      max-width: 1400px;
      margin: 0 auto;
    }

    .hero {
      padding: 8rem 5% 6rem;
      min-height: 70vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      margin-top: 80px;
      background: var(--hero-bg);
    }

    /* Tarjetas de cantantes (Hero) */

    /* Tarjetas de cantantes (Hero) */
    .hero-cards {
      margin-top: 2.5rem;
      display: flex;
      gap: 1.5rem;
      justify-content: center;
      align-items: stretch;
      flex-wrap: wrap;
    }

    .performer-card {
      max-width: 480px;
      min-width: 260px;
      text-align: left;
      border-radius: 18px;
      background: var(--section-bg);
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
      backdrop-filter: blur(10px);
      overflow: hidden;
      transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    }

    body.tema-oscuro .performer-card {
      border-color: rgba(255, 255, 255, 0.16);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    }

    .performer-card:hover {
      transform: translateY(-4px);
      border-color: rgba(186, 85, 211, 0.55);
      box-shadow: 0 16px 40px rgba(186, 85, 211, 0.18);
    }

    .performer-card__media {
      width: 100%;
      height: clamp(175px, 22vw, 250px);
      background: rgba(255, 255, 255, 0.03);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .performer-card__media img {
      width: clamp(120px, 22vw, 175px);
      height: clamp(120px, 22vw, 175px);
      object-fit: cover;
      border-radius: 50%;
      display: block;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .performer-card:hover .performer-card__media img {
      transform: scale(1.07);
      box-shadow: 0 18px 45px rgba(186, 85, 211, 0.22);
    }

    .performer-card__body {
      padding: 1.1rem 1.15rem 1.3rem;
    }

    .performer-card__title {
      font-size: clamp(1.15rem, 2.1vw, 1.35rem);
      line-height: 1.2;
      margin-bottom: 0.6rem;
      color: var(--color-texto-primario);
      font-weight: 800;
    }

    .performer-card__desc {
      font-size: 1rem;
      line-height: 1.6;
      margin-bottom: 0;
      color: var(--color-texto-secundario);
    }

    .performer-card__list {
      margin: 0.75rem 0 0;
      padding-left: 1.1rem;
      color: var(--color-texto-secundario);
      font-size: 0.98rem;
      line-height: 1.6;
    }

    .performer-card__list li {
      margin: 0.25rem 0;
    }

    @media (max-width: 768px) {
      #home.hero {
        min-height: auto;
      }

      .hero-cards {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        margin-top: 1.7rem;
      }

      .performer-card {
        max-width: 520px;
        width: 100%;
      }
    }

    .logo {
      font-size: 1.8rem;
      font-weight: 700;
      background: var(--gradient);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: gradient 8s linear infinite;
      background-size: 300%;
      letter-spacing: -0.5px;
      padding: 0.5rem 1rem;
    }

    .nav-links {
      display: flex;
      gap: 1rem;
      list-style: none;
      flex: 1 1 auto;
      justify-content: flex-end;
      align-items: center;
      margin: 0;
      padding: 0;
    }

    /* --- NUEVOS ESTILOS PARA LA NUBE MUSICAL --- */
    .nav-links a {
      color: var(--texto-menu);
      text-decoration: none;
      font-weight: 500;
      position: relative;
      padding: 0.5rem;
      transition: all 0.3s ease;
      font-size: 1.05rem;
      letter-spacing: 0.2px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    /* Contenedor de notas */
    .music-cloud {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .nav-links a:hover .music-cloud {
      opacity: 1;
    }

    .nav-links a:hover {
      color: var(--enlaces-fervoz);
      /* Color de acento al hover */
    }

    /* Estilo base para cada nota SVG */
    .note {
      position: absolute;
      fill: url(#music-gradient);
      /* Usaremos un gradiente SVG */
      filter: drop-shadow(0 0 2px rgba(255, 107, 107, 0.5));
      opacity: 0;
      transform: translateY(0);
    }

    /* Animación individual de las notas */
    .nav-links a:hover .note {
      animation: floatNote 2s infinite ease-in-out;
    }

    @keyframes floatNote {
      0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
      }

      20% {
        opacity: 1;
      }

      80% {
        opacity: 0.8;
      }

      100% {
        transform: translateY(-20px) rotate(20deg);
        opacity: 0;
      }
    }

    /* Notas de la parte inferior (caen un poco) */
    .nav-links a:hover .note.bottom {
      animation: floatNoteBottom 2.5s infinite ease-in-out;
    }

    @keyframes floatNoteBottom {
      0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
      }

      20% {
        opacity: 1;
      }

      100% {
        transform: translateY(20px) rotate(-20deg);
        opacity: 0;
      }
    }

    /* Posicionamiento aleatorio de las notas */
    .n1 {
      top: -10px;
      left: 10%;
      width: 12px;
      animation-delay: 0.1s !important;
    }

    .n2 {
      top: -15px;
      left: 40%;
      width: 15px;
      animation-delay: 0.5s !important;
    }

    .n3 {
      top: -10px;
      left: 70%;
      width: 10px;
      animation-delay: 0.3s !important;
    }

    .n4 {
      bottom: -10px;
      left: 20%;
      width: 14px;
      animation-delay: 0.7s !important;
    }

    .n5 {
      bottom: -15px;
      left: 50%;
      width: 11px;
      animation-delay: 0.2s !important;
    }

    .n6 {
      bottom: -10px;
      left: 80%;
      width: 13px;
      animation-delay: 0.9s !important;
    }

    /* Eliminamos las líneas antiguas */
    .nav-links a::before,
    .nav-links a::after {
      display: none;
    }

    .mobile-nav-toggle {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      width: 40px;
      height: 40px;
      position: relative;
      z-index: 1001;
      border-radius: 50%;
      transition: background-color 0.3s ease;
    }

    .mobile-nav-toggle:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }

    .mobile-nav-toggle .bar {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 20px;
      height: 2px;
      background: var(--texto-menu);
      transition: all 0.4s ease;
    }

    .mobile-nav-toggle .bar:nth-child(1) {
      top: 14px;
    }

    .mobile-nav-toggle .bar:nth-child(2) {
      top: 19px;
    }

    .mobile-nav-toggle .bar:nth-child(3) {
      top: 24px;
    }

    @keyframes gradient {
      0% {
        background-position: 0% 50%;
      }

      50% {
        background-position: 100% 50%;
      }

      100% {
        background-position: 0% 50%;
      }
    }

    @media (max-width: 768px) {
      .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        height: 100vh;
        width: 80%;
        max-width: 400px;
        background: var(--mobile-menu-bg);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
        padding: 2rem;
        backdrop-filter: blur(10px);
      }

      .theme-switch-item {
        margin-left: 0;
        width: 100%;
        display: flex;
        justify-content: center;
      }

      .nav-links::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(45deg,
            transparent,
            rgba(255, 255, 255, 0.03));
        pointer-events: none;
      }

      .nav-links.active {
        right: 0;
      }

      .nav-links a {
        font-size: 1.2rem;
        opacity: 0;
        transform: translateX(20px);
        transition: all 0.4s ease;
      }

      .nav-links.active a {
        opacity: 1;
        transform: translateX(0);
      }

      .nav-links a:nth-child(1) {
        transition-delay: 0.1s;
      }

      .nav-links a:nth-child(2) {
        transition-delay: 0.2s;
      }

      .nav-links a:nth-child(3) {
        transition-delay: 0.3s;
      }

      .nav-links a:nth-child(4) {
        transition-delay: 0.4s;
      }

      .nav-links a:nth-child(5) {
        transition-delay: 0.5s;
      }

      .mobile-nav-toggle {
        display: block;
      }

      .mobile-nav-toggle.active .bar:nth-child(1) {
        transform: translate(-50%, 5px) rotate(45deg);
        width: 24px;
      }

      .mobile-nav-toggle.active .bar:nth-child(2) {
        opacity: 0;
      }

      .mobile-nav-toggle.active .bar:nth-child(3) {
        transform: translate(-50%, -5px) rotate(-45deg);
        width: 24px;
      }

      .navbar-container {
        flex-wrap: wrap;
      }

      .fervoz-logo {
        flex-direction: column;
        align-items: center;
        margin-bottom: 0.5rem;
      }

      .fervoz-logo__fer,
      .fervoz-logo__voz,
      .fervoz-logo__com {
        font-size: clamp(1.5rem, 4vw, 1.9rem);
      }

      .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s ease;
        backdrop-filter: blur(4px);
      }

      .overlay.active {
        opacity: 1;
        visibility: visible;
      }
    }

    .hero {
      padding: 8rem 5% 6rem;
      min-height: 70vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      margin-top: 80px;
      background: var(--hero-bg);
    }

    .section-title {
      font-size: 3rem;
    }

    .section-description {
      font-size: 1rem;
      padding: 0 1rem;
    }

    section {
      min-height: 100vh;
      padding: 120px 5% 80px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      overflow: visible;
    }

    @media (max-width: 768px) {
      section {
        min-height: auto;
        padding: 90px 5% 45px;
        align-items: flex-start;
      }
    }

    section:nth-child(even) {
      background: var(--section-bg);
    }

    /* Hero: en móviles evita centrado vertical/padding excesivo */
    section#home.hero {
      min-height: auto;
      padding: 8rem 5% 4rem;
      justify-content: flex-start;
      align-items: flex-start;
    }

    .section-content {
      max-width: 1400px;
      width: 100%;
      text-align: center;
      position: relative;
      z-index: 1;
    }

    /* Layout 2 columnas para vídeos verticales (Bares/Eventos) */
    .split-content {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2rem;
    }

    .split-content__text {
      flex: 1 1 50%;
      text-align: left;
    }

    .split-content__media {
      flex: 0 1 45%;
      display: flex;
      justify-content: center;
    }

    .split-video-viewport {
      width: 100%;
      max-width: 420px;
      aspect-ratio: 9 / 16;
      border-radius: 18px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.12);
      background: rgba(255, 255, 255, 0.03);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
      position: relative;
    }

    .split-video-viewport__sound-btn {
      position: absolute;
      left: 1rem;
      bottom: 1rem;
      z-index: 3;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      background: rgba(255, 255, 255, 0.12);
      color: var(--color-texto-primario);
      backdrop-filter: blur(10px);
      padding: 0.6rem 0.9rem;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      font-weight: 700;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
      transition: transform 0.2s ease, background-color 0.2s ease;
      user-select: none;
    }

    .split-video-viewport__sound-btn:hover {
      transform: translateY(-2px);
      background: rgba(186, 85, 211, 0.18);
    }

    .split-video-viewport__sound-icon {
      width: 1.1rem;
      height: 1.1rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--color-fervoz);
    }

    body.tema-oscuro .split-video-viewport__sound-btn {
      background: rgba(0, 0, 0, 0.25);
      border-color: rgba(255, 255, 255, 0.22);
    }

    .split-video-viewport video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    @media (max-width: 768px) {
      .split-content {
        flex-direction: column;
        gap: 1.25rem;
      }

      .split-content__text {
        text-align: center;
      }

      .split-content__media {
        width: 100%;
      }

      .split-video-viewport {
        max-width: 520px;
        border-radius: 16px;
      }

    }

    .section-title {
      font-size: 6vw;
      font-weight: 800;
      margin-bottom: 2rem;
      background: var(--gradient);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: gradient 8s linear infinite;
      background-size: 300%;
      line-height: 1.1;
      text-transform: uppercase;
      letter-spacing: -2px;
    }

    @media (max-width: 1024px) {
      .section-title {
        font-size: 8vw;
      }
    }

    .section-title.fer,
    .section-title.voz {
      font-family: "Titan One", sans-serif;
    }

    .logo-fervoz {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 0;
      line-height: 1;
    }

    .logo-fervoz--row {
      flex-direction: row;
    }

    .logo-fervoz--stack {
      flex-direction: column;
      align-items: center;
      line-height: 1.1;
    }

    .logo-fervoz .section-title {
      margin-bottom: 0;
    }

    .logo-fervoz__com {
      color: var(--enlaces-fervoz);
      font-size: 7rem;
      font-family: "Orbitron", sans-serif;
      padding: 0;
      margin: 0;
    }

    .logo-fervoz--stack .logo-fervoz__fer {
      font-size: 4rem;
      padding: 0;
      margin: 0;
    }

    .logo-fervoz--stack .logo-fervoz__voz {
      font-size: 3.5rem;
      padding: 0;
      margin: -1.05rem 0 -0.65rem 0;
    }

    .logo-fervoz--stack .logo-fervoz__com {
      font-size: 3rem;
      padding: 0;
      margin: -0.7rem 0 0 0;
    }

    .section-description {
      font-size: 1.2rem;
      max-width: 800px;
      margin: 0 auto;
      line-height: 1.6;
      opacity: 0.8;
      color: var(--color-texto-primario);
    }

    .voz {
      background: linear-gradient(to bottom, #00ff88, #0099ff, #ff0080);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: gradient-voz 8s linear infinite;
      background-size: 100% 300%;
    }

    @keyframes gradient-voz {
      0% {
        background-position: 0% 0%;
      }

      50% {
        background-position: 0% 100%;
      }

      100% {
        background-position: 0% 0%;
      }
    }

    /* COMPONENTE FERVOZ-LOGO */
    .fervoz-logo {
      --fervoz-logo-scale: 1;
      display: flex;
      justify-content: center;
      align-items: baseline;
      gap: 0.2rem;
      line-height: 1;
      font-family: sans-serif;
    }

    .fervoz-logo--row {
      flex-direction: row;
      align-items: baseline;
    }

    .fervoz-logo--stack {
      flex-direction: column;
      align-items: center;
      line-height: 1.1;
    }

    .fervoz-logo__fer {
      font-family: "Titan One", sans-serif;
      font-size: calc(4rem * var(--fervoz-logo-scale));
      background: var(--gradient);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: gradient 8s linear infinite;
      background-size: 300%;
      text-transform: uppercase;
    }

    .fervoz-logo__voz {
      font-family: "Titan One", sans-serif;
      font-size: calc(3.8rem * var(--fervoz-logo-scale));
      background: linear-gradient(to bottom, #00ff88, #0099ff, #ff0080);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: gradient-voz 8s linear infinite;
      background-size: 100% 300%;
      text-transform: uppercase;
    }

    .fervoz-logo__com {
      color: var(--enlaces-fervoz);
      font-size: calc(3rem * var(--fervoz-logo-scale));
      font-family: "Orbitron", sans-serif;
    }

    .fervoz-logo--stack .fervoz-logo__voz {
      margin: calc(-1.05rem * var(--fervoz-logo-scale)) 0 calc(-0.65rem * var(--fervoz-logo-scale)) 0;
    }

    .fervoz-logo--stack .fervoz-logo__com {
      margin: calc(-0.7rem * var(--fervoz-logo-scale)) 0 0 0;
    }