/* === RESET & BASE === */
      *,
      *::before,
      *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      :root {
        --bg: #0a0a0a;
        --bg-light: #111;
        --bg-card: #161616;
        --cyan: #8b00ff;
        --magenta: #ff00ff;
        --green: #00ff88;
        --white: #f0f0f0;
        --gray: #888;
        --purple: #8b00ff;
        --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
        --font-display: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
      }

      html {
        scroll-behavior: smooth;
        overflow-x: hidden;
      }

      body {
        background: var(--bg);
        color: var(--white);
        font-family: var(--font-body);
        line-height: 1.6;
        overflow-x: hidden;
      }

      a {
        color: inherit;
        text-decoration: none;
      }

      section,
      footer,
      nav,
      .marquee-section {
        max-width: 100vw;
      }

      .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 24px;
      }

      /* === SCROLLBAR === */
      ::-webkit-scrollbar {
        width: 6px;
      }
      ::-webkit-scrollbar-track {
        background: var(--bg);
      }
      ::-webkit-scrollbar-thumb {
        background: var(--cyan);
        border-radius: 3px;
      }

      /* === ANIMATIONS === */
      @keyframes glow-pulse {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.6;
        }
      }

      @keyframes float {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-10px);
        }
      }

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

      @keyframes marquee {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(-50%);
        }
      }

      @keyframes fade-in-up {
        from {
          opacity: 0;
          transform: translateY(40px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes scale-in {
        from {
          opacity: 0;
          transform: scale(0.9);
        }
        to {
          opacity: 1;
          transform: scale(1);
        }
      }

      @keyframes line-grow {
        from {
          height: 0;
        }
        to {
          height: 100%;
        }
      }

      .reveal {
        opacity: 0;
        transform: translateY(40px);
        transition:
          opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
          transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .reveal.visible {
        opacity: 1;
        transform: translateY(0);
      }

      .reveal-delay-1 {
        transition-delay: 0.1s;
      }
      .reveal-delay-2 {
        transition-delay: 0.2s;
      }
      .reveal-delay-3 {
        transition-delay: 0.3s;
      }
      .reveal-delay-4 {
        transition-delay: 0.4s;
      }
      .reveal-delay-5 {
        transition-delay: 0.5s;
      }
      .reveal-delay-6 {
        transition-delay: 0.6s;
      }

      /* === NAV === */
      /* Selector por id, no por elemento: las paginas interiores tienen
         tambien <nav> de breadcrumb y de enlaces relacionados, y con el
         selector de elemento quedaban fijos arriba tapando el header. */
      #navbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        padding: 20px 0;
        transition: all 0.4s ease;
      }

      #navbar.scrolled,
      #navbar.navbar-solido {
        background: rgba(10, 10, 10, 0.9);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        padding: 12px 0;
        border-bottom: 1px solid rgba(0, 245, 255, 0.1);
      }

      #navbar .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .logo {
        display: inline-flex;
        align-items: center;
      }

      .logo img {
        height: 36px;
        width: auto;
        transition: opacity 0.3s;
      }

      .logo:hover img {
        opacity: 0.8;
      }

      .nav-links {
        display: flex;
        gap: 32px;
        list-style: none;
        align-items: center;
      }

      .nav-links a {
        font-size: 0.9rem;
        font-weight: 500;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        transition: color 0.3s;
        position: relative;
      }

      .nav-links a::after {
        content: "";
        position: absolute;
        bottom: -4px;
        left: 0;
        width: 0;
        height: 2px;
        background: var(--cyan);
        transition: width 0.3s;
        box-shadow: 0 0 8px var(--cyan);
      }

      .nav-links a:hover {
        color: var(--cyan);
      }
      .nav-links a:hover::after {
        width: 100%;
      }

      .nav-cta:not(.shiny-cta) {
        background: transparent;
        border: 1px solid var(--cyan);
        color: var(--cyan) !important;
        padding: 8px 20px;
        border-radius: 4px;
        font-family: var(--font-body);
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s;
        text-transform: uppercase;
        letter-spacing: 1px;
      }

      .nav-cta:not(.shiny-cta):hover {
        background: var(--cyan);
        color: var(--bg) !important;
        box-shadow: 0 0 20px rgba(0, 245, 255, 0.4);
      }

      /* el botón nav comparte ::after con el subrayado del nav; lo
         suprimimos (alta especificidad) para que no choque con shiny */
      .nav-links a.nav-cta::after {
        display: none !important;
      }

      .hamburger {
        display: none;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        cursor: pointer;
        background: none;
        border: none;
        /* área táctil mínima 44x44 */
        padding: 14px 8px;
        min-width: 44px;
        min-height: 44px;
      }

      .hamburger span {
        width: 28px;
        height: 2px;
        background: var(--white);
        transition: all 0.3s;
      }

      .hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
      }
      .hamburger.active span:nth-child(2) {
        opacity: 0;
      }
      .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
      }

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

      #particles-canvas {
        position: absolute;
        inset: 0;
        z-index: 0;
      }

      .hero-video {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 0;
        overflow: hidden;
      }

      .hero-video video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.4;
      }

      #particles-canvas {
        display: none;
      }

      .hero-gradient {
        position: absolute;
        inset: 0;
        background:
          radial-gradient(
            ellipse at 20% 50%,
            rgba(0, 245, 255, 0.08) 0%,
            transparent 60%
          ),
          radial-gradient(
            ellipse at 80% 50%,
            rgba(255, 0, 255, 0.06) 0%,
            transparent 60%
          ),
          radial-gradient(
            ellipse at 50% 100%,
            rgba(0, 255, 136, 0.04) 0%,
            transparent 40%
          );
        z-index: 1;
      }

      .hero-content {
        position: relative;
        z-index: 2;
        text-align: center;
        max-width: 900px;
        padding: 0 24px;
      }

      .hero-badge {
        display: inline-block;
        padding: 6px 18px;
        border: 1px solid rgba(0, 245, 255, 0.3);
        border-radius: 50px;
        font-size: 0.8rem;
        font-weight: 500;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #c89bff;
        background: rgba(10, 10, 10, 0.55);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-color: rgba(139, 0, 255, 0.6);
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
        margin-bottom: 24px;
        animation: fade-in-up 0.8s ease forwards;
        animation-delay: 0.2s;
        opacity: 0;
      }

      .hero h1 {
        font-family: var(--font-display);
        font-size: clamp(2.8rem, 7vw, 5.5rem);
        font-weight: 800;
        line-height: 1.05;
        letter-spacing: -1px;
        margin-bottom: 24px;
        animation: fade-in-up 0.8s ease forwards;
        animation-delay: 0.4s;
        opacity: 0;
      }

      .hero h1 .highlight {
        background: linear-gradient(135deg, var(--cyan), var(--green));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      .hero p {
        font-size: clamp(1rem, 2.5vw, 1.25rem);
        color: var(--gray);
        max-width: 600px;
        margin: 0 auto 40px;
        line-height: 1.7;
        animation: fade-in-up 0.8s ease forwards;
        animation-delay: 0.6s;
        opacity: 0;
      }

      .hero-buttons {
        display: flex;
        gap: 16px;
        justify-content: center;
        flex-wrap: wrap;
        animation: fade-in-up 0.8s ease forwards;
        animation-delay: 0.8s;
        opacity: 0;
      }

      .btn-primary {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 16px 36px;
        background: linear-gradient(135deg, var(--cyan), #00c8d4);
        color: var(--bg);
        font-family: var(--font-body);
        font-size: 1rem;
        font-weight: 700;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.3s;
        text-transform: uppercase;
        letter-spacing: 1px;
      }

      .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow:
          0 0 30px rgba(0, 245, 255, 0.5),
          0 10px 40px rgba(0, 245, 255, 0.2);
      }

      .btn-secondary {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 16px 36px;
        background: transparent;
        color: var(--white);
        font-family: var(--font-body);
        font-size: 1rem;
        font-weight: 600;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.3s;
        letter-spacing: 0.5px;
      }

      .btn-secondary:hover {
        border-color: var(--cyan);
        color: var(--cyan);
        box-shadow: 0 0 20px rgba(0, 245, 255, 0.15);
      }

      /* === SHINY CTA (estilo global de botones) === */
      @property --gradient-angle {
        syntax: "<angle>";
        initial-value: 0deg;
        inherits: false;
      }
      @property --gradient-angle-offset {
        syntax: "<angle>";
        initial-value: 0deg;
        inherits: false;
      }
      @property --gradient-percent {
        syntax: "<percentage>";
        initial-value: 5%;
        inherits: false;
      }
      @property --gradient-shine {
        syntax: "<color>";
        initial-value: #f0f0f0;
        inherits: false;
      }

      .shiny-cta {
        --shiny-cta-bg: #0a0a0a;
        --shiny-cta-bg-subtle: #1a1622;
        --shiny-cta-fg: #f0f0f0;
        --shiny-cta-highlight: #8b00ff;
        --shiny-cta-highlight-subtle: #b366ff;
        --animation: gradient-angle linear infinite;
        --duration: 3s;
        --shadow-size: 2px;
        --transition: 800ms cubic-bezier(0.25, 1, 0.5, 1);
        isolation: isolate;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        outline-offset: 4px;
        padding: 1rem 2.2rem;
        font-family: var(--font-body);
        font-size: 1rem;
        line-height: 1.2;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        border: 1px solid transparent;
        border-radius: 360px;
        color: var(--shiny-cta-fg);
        background:
          linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg)) padding-box,
          conic-gradient(
              from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
              transparent,
              var(--shiny-cta-highlight) var(--gradient-percent),
              var(--gradient-shine) calc(var(--gradient-percent) * 2),
              var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3),
              transparent calc(var(--gradient-percent) * 4)
            )
            border-box;
        box-shadow: inset 0 0 0 1px var(--shiny-cta-bg-subtle);
        transition: var(--transition);
        transition-property:
          --gradient-angle-offset, --gradient-percent, --gradient-shine;
      }
      .shiny-cta::before,
      .shiny-cta::after,
      .shiny-cta span::before {
        content: "";
        pointer-events: none;
        position: absolute;
        inset-inline-start: 50%;
        inset-block-start: 50%;
        translate: -50% -50%;
        z-index: -1;
      }
      .shiny-cta:active {
        translate: 0 1px;
      }
      .shiny-cta::before {
        --size: calc(100% - var(--shadow-size) * 3);
        --position: 2px;
        --space: calc(var(--position) * 2);
        width: var(--size);
        height: var(--size);
        background: radial-gradient(
            circle at var(--position) var(--position),
            #fff calc(var(--position) / 4),
            transparent 0
          )
          padding-box;
        background-size: var(--space) var(--space);
        background-repeat: space;
        mask-image: conic-gradient(
          from calc(var(--gradient-angle) + 45deg),
          black,
          transparent 10% 90%,
          black
        );
        border-radius: inherit;
        opacity: 0.4;
        z-index: -1;
      }
      .shiny-cta::after {
        --animation: shimmer linear infinite;
        width: 100%;
        aspect-ratio: 1;
        background: linear-gradient(
          -50deg,
          transparent,
          var(--shiny-cta-highlight),
          transparent
        );
        mask-image: radial-gradient(circle at bottom, transparent 40%, black);
        opacity: 0.6;
      }
      .shiny-cta span {
        z-index: 1;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: var(--shiny-cta-fg);
      }
      .shiny-cta span::before {
        --size: calc(100% + 1rem);
        width: var(--size);
        height: var(--size);
        box-shadow: inset 0 -1ex 2rem 4px var(--shiny-cta-highlight);
        opacity: 0;
        transition: opacity var(--transition);
        animation: calc(var(--duration) * 1.5) breathe linear infinite;
      }
      .shiny-cta,
      .shiny-cta::before,
      .shiny-cta::after {
        animation:
          var(--animation) var(--duration),
          var(--animation) calc(var(--duration) / 0.4) reverse paused;
        animation-composition: add;
      }
      .shiny-cta:is(:hover, :focus-visible) {
        --gradient-percent: 20%;
        --gradient-angle-offset: 95deg;
        --gradient-shine: var(--shiny-cta-highlight-subtle);
      }
      .shiny-cta:is(:hover, :focus-visible),
      .shiny-cta:is(:hover, :focus-visible)::before,
      .shiny-cta:is(:hover, :focus-visible)::after {
        animation-play-state: running;
      }
      .shiny-cta:is(:hover, :focus-visible) span::before {
        opacity: 1;
      }
      .shiny-cta.shiny-sm {
        padding: 0.55rem 1.4rem;
        font-size: 0.8rem;
        letter-spacing: 0.5px;
      }
      @media (prefers-reduced-motion: reduce) {
        .shiny-cta,
        .shiny-cta::before,
        .shiny-cta::after {
          animation: none;
        }
      }
      @keyframes gradient-angle {
        to {
          --gradient-angle: 360deg;
        }
      }
      @keyframes shimmer {
        to {
          rotate: 360deg;
        }
      }
      @keyframes breathe {
        from,
        to {
          scale: 1;
        }
        50% {
          scale: 1.2;
        }
      }

      .hero-scroll {
        position: absolute;
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
        animation: float 2s ease-in-out infinite;
      }

      .hero-scroll i {
        font-size: 1.4rem;
        color: rgba(255, 255, 255, 0.3);
      }

      /* === MARQUEE === */
      .marquee-section {
        overflow: hidden;
        max-width: 100vw;
        padding: 20px 0;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        background: var(--bg-light);
      }

      .marquee-track {
        display: flex;
        width: max-content;
        animation: marquee 30s linear infinite;
      }

      .marquee-track span {
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 4px;
        white-space: nowrap;
        padding: 0 40px;
        color: rgba(255, 255, 255, 0.1);
      }

      .marquee-track span .dot {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--cyan);
        margin: 0 30px;
        vertical-align: middle;
        box-shadow: 0 0 10px var(--cyan);
      }

      /* === CLIENTES GRID PIXEL === */
      .clientes-section {
        background: var(--bg-light);
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        position: relative;
      }

      .clientes-label {
        text-align: center;
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 4px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.45);
        margin-bottom: 40px;
      }

      .clientes-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: 128px;
        gap: 1px;
        width: 92%;
        max-width: 1160px;
        margin: 0 auto;
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(255, 255, 255, 0.07);
      }

      .logo-cell {
        position: relative;
        display: grid;
        place-items: center;
        overflow: hidden;
        background: var(--bg-card);
        cursor: pointer;
        user-select: none;
        isolation: isolate;
        transition: box-shadow 0.3s ease;
      }

      .logo-cell:hover {
        z-index: 2;
        box-shadow:
          0 8px 24px -8px rgba(139, 0, 255, 0.3),
          inset 0 0 0 1px rgba(139, 0, 255, 0.45);
      }

      .logo-cell canvas {
        position: absolute;
        inset: 0;
        display: block;
      }

      .logo-cell img {
        position: relative;
        z-index: 1;
        width: auto;
        max-width: 78%;
        max-height: 70px;
        object-fit: contain;
        opacity: 1;
        transition: transform 0.3s ease;
      }

      .logo-cell:hover img {
        transform: scale(1.08);
      }

      .clientes-textblock {
        grid-column: 2 / span 3;
        grid-row: 2 / span 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 18px;
        background: var(--bg-card);
        text-align: center;
        padding: 24px;
      }

      .clientes-textblock .pill {
        display: inline-flex;
        align-items: center;
        padding: 5px 14px;
        font-size: 0.8rem;
        font-weight: 500;
        border-radius: 999px;
        background: var(--bg-light);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.55);
      }

      .clientes-textblock h2 {
        font-family: var(--font-display);
        font-size: 1.6rem;
        font-weight: 600;
        line-height: 1.25;
        letter-spacing: -0.5px;
        color: var(--white);
        max-width: 460px;
      }

      @media (max-width: 768px) {
        .clientes-grid {
          grid-template-columns: repeat(3, 1fr);
          grid-auto-rows: 92px;
        }
        .clientes-textblock {
          grid-column: 1 / -1;
          grid-row: 1;
          padding: 28px 16px;
        }
        .clientes-textblock h2 {
          font-size: 1.25rem;
        }
        .logo-cell img {
          max-width: 80%;
          max-height: 50px;
        }
        .clientes-label {
          font-size: 0.7rem;
          letter-spacing: 3px;
          margin-bottom: 28px;
        }
      }

      /* === SECTION STYLES === */
      section {
        padding: 100px 0;
      }

      .section-label {
        font-size: 0.8rem;
        font-weight: 600;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: var(--cyan);
        margin-bottom: 16px;
      }

      .section-title {
        font-family: var(--font-display);
        font-size: clamp(2rem, 4vw, 3rem);
        font-weight: 800;
        line-height: 1.1;
        margin-bottom: 20px;
      }

      .section-subtitle {
        font-size: 1.1rem;
        color: var(--gray);
        max-width: 600px;
        line-height: 1.7;
      }

      /* === FAQ === */
      .faq {
        background: var(--bg-light);
      }
      .faq-grid {
        max-width: 800px;
        margin: 40px auto 0;
      }
      .faq-item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      }
      .faq-question {
        width: 100%;
        background: none;
        border: none;
        color: var(--white);
        font-family: var(--font-body);
        font-size: 1.1rem;
        font-weight: 600;
        padding: 20px 0;
        text-align: left;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .faq-question i {
        color: var(--cyan);
        transition: transform 0.3s;
        font-size: 0.9rem;
      }
      .faq-question.active i {
        transform: rotate(180deg);
      }
      .faq-answer {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
      }
      .faq-answer p {
        padding: 0 0 20px;
        color: var(--gray);
        line-height: 1.7;
      }

      /* === QUE ES === */
      .que-es {
        background: var(--bg);
        position: relative;
      }

      .que-es-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
        margin-top: 60px;
      }

      .que-es-text p {
        color: var(--gray);
        font-size: 1.05rem;
        line-height: 1.8;
        margin-bottom: 30px;
      }

      .stat-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
      }

      .stat-item {
        padding: 24px;
        background: var(--bg-card);
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.05);
        transition: border-color 0.3s;
      }

      .stat-item:hover {
        border-color: rgba(0, 245, 255, 0.2);
      }

      .stat-number {
        font-family: var(--font-display);
        font-size: 2.2rem;
        font-weight: 800;
        background: linear-gradient(135deg, var(--cyan), var(--green));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      .stat-label {
        font-size: 0.85rem;
        color: var(--gray);
        margin-top: 4px;
      }

      .que-es-visual {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .led-mockup {
        width: 100%;
        max-width: 320px;
        aspect-ratio: 9/16;
        background: linear-gradient(135deg, #1a1a2e, #16213e);
        border-radius: 16px;
        border: 2px solid rgba(139, 0, 255, 0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        margin: 0 auto;
      }

      .led-mockup::before {
        content: "";
        position: absolute;
        inset: -2px;
        background: linear-gradient(
          135deg,
          var(--cyan),
          var(--magenta),
          var(--green)
        );
        border-radius: 18px;
        z-index: -1;
        opacity: 0.3;
        filter: blur(20px);
      }

      .led-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(9, 1fr);
        gap: 4px;
        padding: 16px;
        width: 100%;
        height: 100%;
        align-content: stretch;
      }

      .led-pixel {
        border-radius: 2px;
        animation: pixel-blink 3s ease-in-out infinite;
      }

      @keyframes pixel-blink {
        0%,
        100% {
          opacity: 0.3;
        }
        50% {
          opacity: 1;
        }
      }

      /* === GALERIAS === */
      .galerias {
        background: var(--bg-light);
      }

      .galerias-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
        margin-top: 60px;
      }

      .galeria-card {
        background: var(--bg-card);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 20px;
        overflow: hidden;
        position: relative;
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .galeria-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--cyan), var(--green));
        opacity: 0;
        transition: opacity 0.4s;
        z-index: 2;
      }

      .galeria-card:hover {
        transform: translateY(-8px);
        border-color: rgba(0, 245, 255, 0.15);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
      }

      .galeria-card:hover::before {
        opacity: 1;
      }

      .galeria-card:hover .galeria-photo img,
      .galeria-card:hover .galeria-photo video {
        transform: scale(1.05);
      }

      .galeria-photo {
        width: 100%;
        aspect-ratio: 3/4;
        background: linear-gradient(135deg, #1a1a2e, #16213e, #0f0f23);
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .galeria-photo img,
      .galeria-photo video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .galeria-photo-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        color: rgba(255, 255, 255, 0.15);
      }

      .galeria-photo-placeholder i {
        font-size: 2.5rem;
      }

      .galeria-photo-placeholder span {
        font-size: 0.75rem;
        letter-spacing: 2px;
        text-transform: uppercase;
      }

      .galeria-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 14px;
        font-size: 0.9rem;
        font-weight: 600;
        color: #c58bff;
      }

      .galeria-link i {
        font-size: 0.75rem;
        transition: transform 0.25s ease;
      }

      .galeria-link:hover {
        color: var(--white);
      }

      .galeria-link:hover i {
        transform: translateX(4px);
      }

      .galeria-card-body {
        padding: 24px;
      }

      .galeria-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 12px;
        border-radius: 50px;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        margin-bottom: 24px;
      }

      .badge-active {
        background: rgba(0, 255, 136, 0.1);
        color: var(--green);
        border: 1px solid rgba(0, 255, 136, 0.2);
      }

      .badge-active .pulse {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--green);
        box-shadow: 0 0 8px var(--green);
        animation: glow-pulse 2s infinite;
      }

      .badge-coming {
        background: rgba(139, 0, 255, 0.12);
        color: #c98bff;
        border: 1px solid rgba(139, 0, 255, 0.28);
      }

      .badge-coming .pulse {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--purple);
        box-shadow: 0 0 8px var(--purple);
        animation: glow-pulse 2s infinite;
      }

      .galeria-icon {
        width: 56px;
        height: 56px;
        border-radius: 12px;
        background: rgba(0, 245, 255, 0.08);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
      }

      .galeria-icon i {
        font-size: 1.4rem;
        color: var(--cyan);
      }

      .galeria-card h3 {
        font-family: var(--font-display);
        font-size: 1.25rem;
        font-weight: 700;
        margin-bottom: 8px;
      }

      .galeria-card p {
        font-size: 0.9rem;
        color: var(--gray);
        line-height: 1.6;
      }

      /* === VENTAJAS === */
      .ventajas {
        background: var(--bg);
      }

      .ventajas-header {
        text-align: center;
        margin-bottom: 60px;
      }

      .ventajas-header .section-subtitle {
        margin: 0 auto;
      }

      .ventajas-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        max-width: 1100px;
        margin: 0 auto;
      }

      .ventaja-card {
        padding: 36px 28px;
        border-radius: 16px;
        background: var(--bg-card);
        border: 1px solid rgba(255, 255, 255, 0.05);
        transition: all 0.4s;
        position: relative;
        overflow: hidden;
      }

      .ventaja-card::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, var(--cyan), var(--magenta));
        transform: scaleX(0);
        transition: transform 0.4s;
      }

      .ventaja-card:hover {
        transform: translateY(-4px);
        border-color: rgba(0, 245, 255, 0.1);
      }

      .ventaja-card:hover::after {
        transform: scaleX(1);
      }

      .ventaja-icon {
        width: 52px;
        height: 52px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
        font-size: 1.3rem;
      }

      .ventaja-icon.cyan {
        background: rgba(0, 245, 255, 0.1);
        color: var(--cyan);
      }
      .ventaja-icon.green {
        background: rgba(0, 255, 136, 0.1);
        color: var(--green);
      }
      .ventaja-icon.magenta {
        background: rgba(255, 0, 255, 0.1);
        color: var(--magenta);
      }

      .ventaja-card h3 {
        font-family: var(--font-display);
        font-size: 1.1rem;
        font-weight: 700;
        margin-bottom: 10px;
      }

      .ventaja-card p {
        font-size: 0.9rem;
        color: var(--gray);
        line-height: 1.6;
      }

      /* === ROADMAP === */
      .roadmap {
        background: var(--bg-light);
      }

      .roadmap-header {
        text-align: center;
        margin-bottom: 80px;
      }

      .roadmap-header .section-subtitle {
        margin: 0 auto;
      }

      .timeline {
        position: relative;
        max-width: 800px;
        margin: 0 auto;
      }

      .timeline::before {
        display: none;
      }

      .timeline-phase {
        margin-bottom: 60px;
        position: relative;
      }

      .phase-badge {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-bottom: 32px;
      }

      .phase-badge span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 24px;
        border-radius: 50px;
        font-family: var(--font-display);
        font-size: 0.85rem;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
      }

      .phase-active span {
        background: rgba(0, 255, 136, 0.1);
        color: var(--green);
        border: 1px solid rgba(0, 255, 136, 0.3);
      }

      .phase-coming span {
        background: rgba(0, 245, 255, 0.1);
        color: var(--cyan);
        border: 1px solid rgba(0, 245, 255, 0.3);
      }

      .phase-items {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 16px;
      }

      .phase-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 20px 24px;
        background: var(--bg-card);
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.05);
        transition: all 0.3s;
      }

      .phase-item:hover {
        border-color: rgba(0, 245, 255, 0.15);
        transform: translateX(4px);
      }

      .phase-item .check {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 0.75rem;
      }

      .check-done {
        background: rgba(0, 255, 136, 0.15);
        color: var(--green);
        border: 1px solid rgba(0, 255, 136, 0.3);
      }

      .check-soon {
        background: rgba(0, 245, 255, 0.1);
        color: var(--cyan);
        border: 1px solid rgba(0, 245, 255, 0.2);
      }

      .check-locked {
        background: rgba(255, 255, 255, 0.05);
        color: var(--gray);
        border: 1px solid rgba(255, 255, 255, 0.1);
      }

      .phase-item .item-text {
        font-size: 0.95rem;
        font-weight: 500;
      }

      .phase-item.locked {
        opacity: 0.4;
        filter: blur(0.5px);
      }

      .phase-item.locked .item-text {
        color: var(--gray);
      }

      /* === CONTACTO === */
      .contacto {
        background: var(--bg);
        position: relative;
      }

      .contacto::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 600px;
        height: 600px;
        background: radial-gradient(
          circle,
          rgba(0, 245, 255, 0.05) 0%,
          transparent 70%
        );
        pointer-events: none;
      }

      .contacto-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        margin-top: 60px;
      }

      .contacto-mapa {
        margin-top: 28px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        overflow: hidden;
        line-height: 0;
      }

      .contacto-mapa iframe {
        width: 100%;
        height: 260px;
        border: 0;
        display: block;
        filter: invert(0.92) hue-rotate(180deg) saturate(0.7);
      }

      .contacto-info h3 {
        font-family: var(--font-display);
        font-size: 1.8rem;
        font-weight: 700;
        margin-bottom: 16px;
      }

      .contacto-info > p {
        color: var(--gray);
        font-size: 1.05rem;
        line-height: 1.7;
        margin-bottom: 40px;
      }

      .contact-methods {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }

      .contact-btn {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 18px 24px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: var(--bg-card);
        transition: all 0.3s;
        cursor: pointer;
      }

      .contact-btn:hover {
        border-color: rgba(0, 245, 255, 0.2);
        transform: translateX(4px);
      }

      .contact-btn i {
        font-size: 1.3rem;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .contact-btn.whatsapp i {
        background: rgba(37, 211, 102, 0.15);
        color: #25d366;
      }

      .contact-btn.email i {
        background: rgba(0, 245, 255, 0.1);
        color: var(--cyan);
      }

      .contact-btn-text .label {
        font-size: 0.75rem;
        color: var(--gray);
        text-transform: uppercase;
        letter-spacing: 1px;
      }

      .contact-btn-text .value {
        font-weight: 600;
        font-size: 0.95rem;
      }

      /* Form */
      .contact-form {
        background: var(--bg-card);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 20px;
        padding: 40px;
      }

      .form-group {
        margin-bottom: 20px;
      }

      .form-group label {
        display: block;
        font-size: 0.85rem;
        font-weight: 500;
        margin-bottom: 8px;
        color: var(--gray);
      }

      .form-group label .required {
        color: var(--magenta);
      }

      .form-group input,
      .form-group textarea {
        width: 100%;
        padding: 14px 18px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        color: var(--white);
        font-family: var(--font-body);
        font-size: 0.95rem;
        transition: all 0.3s;
        outline: none;
      }

      .form-group input:focus,
      .form-group textarea:focus {
        border-color: var(--cyan);
        box-shadow: 0 0 0 3px rgba(0, 245, 255, 0.1);
      }

      .form-group input::placeholder,
      .form-group textarea::placeholder {
        color: rgba(255, 255, 255, 0.45);
      }

      .form-group textarea {
        resize: vertical;
        min-height: 100px;
      }

      .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
      }

      .btn-submit {
        width: 100%;
      }

      .captcha-group {
        margin-bottom: 24px;
      }

      .captcha-error {
        display: none;
        color: #ff4466;
        font-size: 0.8rem;
        margin-top: 8px;
      }

      .captcha-error.show {
        display: block;
      }

      .form-success {
        display: none;
        text-align: center;
        padding: 40px 20px;
      }

      .form-success.show {
        display: block;
        animation: scale-in 0.5s ease;
      }

      .form-success i {
        font-size: 3rem;
        color: var(--green);
        margin-bottom: 16px;
      }

      .form-success h3 {
        font-family: var(--font-display);
        font-size: 1.5rem;
        margin-bottom: 8px;
      }

      .form-success p {
        color: var(--gray);
      }

      /* === FOOTER === */
      footer {
        padding: 60px 0 30px;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        background: var(--bg);
      }

      .footer-grid {
        display: grid;
        grid-template-columns: 1.6fr 1fr 1fr 1fr;
        gap: 44px;
        margin-bottom: 40px;
      }

      .footer-brand .logo {
        margin-bottom: 16px;
        display: block;
      }

      .footer-brand p {
        color: var(--gray);
        font-size: 0.95rem;
        line-height: 1.7;
        margin-bottom: 20px;
      }

      .footer-social {
        display: flex;
        gap: 12px;
      }

      .footer-social a {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.05);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;
        color: var(--gray);
      }

      .footer-social a:hover {
        background: rgba(0, 245, 255, 0.1);
        color: var(--cyan);
      }

      .footer-col h3 {
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: 700;
        margin-bottom: 20px;
      }

      .footer-col ul {
        list-style: none;
      }

      .footer-col li {
        margin-bottom: 2px;
      }

      .footer-col a {
        color: var(--gray);
        font-size: 0.9rem;
        transition: color 0.3s;
        /* área táctil más alta sin cambiar el ritmo visual */
        display: inline-block;
        padding: 10px 0;
      }

      .footer-col a:hover {
        color: var(--cyan);
      }

      .footer-bottom {
        padding-top: 30px;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.85rem;
        color: var(--gray);
      }

      .footer-bottom a {
        color: var(--cyan);
      }

      /* === CURSOR GLOW === */
      .cursor-glow {
        position: fixed;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(139, 0, 255, 0.15) 0%,
          rgba(139, 0, 255, 0.05) 40%,
          transparent 70%
        );
        pointer-events: none;
        z-index: 9999;
        transform: translate(-50%, -50%);
        transition: opacity 0.3s;
        opacity: 0;
      }

      .cursor-glow.visible {
        opacity: 1;
      }

      .cursor-dot {
        position: fixed;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--cyan);
        pointer-events: none;
        z-index: 10000;
        transform: translate(-50%, -50%);
        box-shadow:
          0 0 12px var(--cyan),
          0 0 24px rgba(139, 0, 255, 0.4);
        transition:
          transform 0.1s,
          opacity 0.3s;
        opacity: 0;
      }

      .cursor-dot.visible {
        opacity: 1;
      }

      @media (max-width: 768px) {
        .cursor-glow,
        .cursor-dot {
          display: none !important;
        }
      }

      /* === GLITCH TEXT === */
      .glitch {
        position: relative;
        display: inline-block;
        overflow: hidden;
      }

      .glitch::before,
      .glitch::after {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--bg);
      }

      .glitch::before {
        left: 2px;
        text-shadow: -2px 0 var(--magenta);
        clip-path: inset(0 0 0 0);
        animation: glitch-1 3s infinite linear alternate-reverse;
      }

      .glitch::after {
        left: -2px;
        text-shadow: 2px 0 var(--cyan);
        clip-path: inset(0 0 0 0);
        animation: glitch-2 3s infinite linear alternate-reverse;
      }

      @keyframes glitch-1 {
        0% {
          clip-path: inset(40% 0 61% 0);
        }
        5% {
          clip-path: inset(10% 0 85% 0);
        }
        10% {
          clip-path: inset(80% 0 5% 0);
        }
        15% {
          clip-path: inset(0 0 100% 0);
        }
        20% {
          clip-path: inset(55% 0 30% 0);
        }
        25% {
          clip-path: inset(0 0 100% 0);
        }
        30% {
          clip-path: inset(20% 0 65% 0);
        }
        35% {
          clip-path: inset(0 0 100% 0);
        }
        40% {
          clip-path: inset(70% 0 15% 0);
        }
        45% {
          clip-path: inset(0 0 100% 0);
        }
        50% {
          clip-path: inset(0 0 100% 0);
        }
        55% {
          clip-path: inset(0 0 100% 0);
        }
        60% {
          clip-path: inset(35% 0 50% 0);
        }
        65% {
          clip-path: inset(0 0 100% 0);
        }
        70% {
          clip-path: inset(0 0 100% 0);
        }
        75% {
          clip-path: inset(90% 0 2% 0);
        }
        80% {
          clip-path: inset(0 0 100% 0);
        }
        85% {
          clip-path: inset(0 0 100% 0);
        }
        90% {
          clip-path: inset(15% 0 70% 0);
        }
        95% {
          clip-path: inset(0 0 100% 0);
        }
        100% {
          clip-path: inset(0 0 100% 0);
        }
      }

      @keyframes glitch-2 {
        0% {
          clip-path: inset(25% 0 58% 0);
        }
        5% {
          clip-path: inset(0 0 100% 0);
        }
        10% {
          clip-path: inset(65% 0 20% 0);
        }
        15% {
          clip-path: inset(0 0 100% 0);
        }
        20% {
          clip-path: inset(0 0 100% 0);
        }
        25% {
          clip-path: inset(45% 0 40% 0);
        }
        30% {
          clip-path: inset(0 0 100% 0);
        }
        35% {
          clip-path: inset(85% 0 8% 0);
        }
        40% {
          clip-path: inset(0 0 100% 0);
        }
        45% {
          clip-path: inset(30% 0 55% 0);
        }
        50% {
          clip-path: inset(0 0 100% 0);
        }
        55% {
          clip-path: inset(0 0 100% 0);
        }
        60% {
          clip-path: inset(0 0 100% 0);
        }
        65% {
          clip-path: inset(75% 0 12% 0);
        }
        70% {
          clip-path: inset(0 0 100% 0);
        }
        75% {
          clip-path: inset(0 0 100% 0);
        }
        80% {
          clip-path: inset(50% 0 35% 0);
        }
        85% {
          clip-path: inset(0 0 100% 0);
        }
        90% {
          clip-path: inset(0 0 100% 0);
        }
        95% {
          clip-path: inset(5% 0 80% 0);
        }
        100% {
          clip-path: inset(0 0 100% 0);
        }
      }

      /* === COUNTER ANIMATION === */
      .counter {
        display: inline-block;
      }

      /* === RESPONSIVE === */
      @media (max-width: 968px) {
        .que-es-grid {
          grid-template-columns: 1fr;
          gap: 40px;
        }

        .galerias-grid {
          grid-template-columns: 1fr;
          max-width: 360px;
          margin-left: auto;
          margin-right: auto;
        }

        .ventajas-grid {
          grid-template-columns: repeat(2, 1fr);
        }

        .contacto-grid {
          grid-template-columns: 1fr;
        }

        .footer-grid {
          grid-template-columns: 1fr;
          gap: 40px;
        }
      }

      @media (max-width: 768px) {
        section {
          padding: 80px 0;
        }

        .nav-links {
          position: fixed;
          top: 0;
          right: -100%;
          width: 80%;
          max-width: 320px;
          height: 100vh;
          background: rgba(10, 10, 10, 0.98);
          backdrop-filter: blur(20px);
          flex-direction: column;
          justify-content: center;
          padding: 40px;
          gap: 28px;
          transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
          border-left: 1px solid rgba(0, 245, 255, 0.1);
        }

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

        /* área táctil ≥44px en el drawer móvil */
        .nav-links a {
          display: block;
          padding: 12px 0;
        }

        .hamburger {
          display: flex;
        }

        .ventajas-grid {
          grid-template-columns: 1fr;
        }

        .form-row {
          grid-template-columns: 1fr;
        }

        .stat-row {
          grid-template-columns: 1fr;
        }

        .timeline::before {
          left: 20px;
        }

        .footer-bottom {
          flex-direction: column;
          gap: 12px;
          text-align: center;
        }

        .contact-form {
          padding: 28px 20px;
        }
      }

      @media (max-width: 480px) {
        .hero h1 {
          font-size: 2.2rem;
        }

        .hero-buttons {
          flex-direction: column;
          align-items: center;
        }

        .phase-items {
          grid-template-columns: 1fr;
        }
      }

      /* === REDUCED MOTION (global) === */
      @media (prefers-reduced-motion: reduce) {
        html {
          scroll-behavior: auto;
        }
        *,
        *::before,
        *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
        }
        /* el contenido revelado por scroll debe quedar visible */
        .reveal {
          opacity: 1 !important;
          transform: none !important;
        }
      }
/* === PAGINAS INTERIORES === */
.pagina-hero {
  padding: 160px 0 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background:
    radial-gradient(
      ellipse at 20% 0%,
      rgba(139, 0, 255, 0.16),
      transparent 60%
    ),
    var(--bg);
}
.pagina-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -1.5px;
  max-width: 18ch;
}
.pagina-hero .bajada {
  margin-top: 22px;
  font-size: 1.12rem;
  color: rgba(255, 255, 255, 0.62);
  max-width: 62ch;
}
.breadcrumb {
  font-size: 0.85rem;
  color: var(--gray);
  margin-bottom: 26px;
}
.breadcrumb a:hover {
  color: var(--white);
}
.breadcrumb span {
  margin: 0 8px;
  opacity: 0.5;
}
.prosa {
  padding: 70px 0 90px;
}
.prosa .container {
  max-width: 780px;
}
.prosa h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.8px;
  line-height: 1.2;
  margin: 54px 0 18px;
}
.prosa h3 {
  font-size: 1.18rem;
  font-weight: 600;
  margin: 34px 0 12px;
  color: var(--white);
}
.prosa p {
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 18px;
  font-size: 1.02rem;
}
.prosa ul,
.prosa ol {
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 22px 22px;
}
.prosa li {
  margin-bottom: 10px;
}
.prosa strong {
  color: var(--white);
  font-weight: 600;
}
.prosa a:not(.shiny-cta) {
  color: #c58bff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prosa a:not(.shiny-cta):hover {
  color: var(--white);
}
.dato-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  margin: 30px 0;
}
.dato-item {
  background: var(--bg-card);
  padding: 22px 18px;
  text-align: center;
}
.dato-item .n {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -1px;
}
.dato-item .l {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--gray);
  margin-top: 6px;
}
.tabla-wrap {
  overflow-x: auto;
  margin: 26px 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}
.prosa table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
  min-width: 460px;
}
.prosa th,
.prosa td {
  padding: 13px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.prosa th {
  background: var(--bg-light);
  color: var(--white);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.prosa td {
  color: rgba(255, 255, 255, 0.72);
}
.prosa tr:last-child td {
  border-bottom: 0;
}
.nota {
  border-left: 2px solid var(--purple);
  background: rgba(139, 0, 255, 0.07);
  padding: 18px 22px;
  border-radius: 0 10px 10px 0;
  margin: 28px 0;
}
.nota p:last-child {
  margin-bottom: 0;
}
.cierre {
  margin-top: 56px;
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  background: var(--bg-card);
  text-align: center;
}
.cierre h2 {
  margin-top: 0;
  font-size: 1.45rem;
}
.cierre p {
  max-width: 46ch;
  margin: 0 auto 24px;
}
.enlaces-relacionados {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.enlaces-relacionados h2 {
  font-size: 1.1rem;
  margin: 0 0 14px;
}
.enlaces-relacionados ul {
  margin-left: 20px;
}
.pagina-video {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin: 28px 0;
  display: block;
}
@media (max-width: 768px) {
  .pagina-hero {
    padding: 130px 0 44px;
  }
  .prosa {
    padding: 46px 0 64px;
  }
  .cierre {
    padding: 26px 20px;
  }
}