@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Syne:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;700;800&display=swap');
        
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        
        :root {
          --dark: #232b2b;
          --mint: #ace1af;
          --lavender: #ccccff;
          --steel: #6082b6;
          --gray: #475251;
          --light: #f8f8f8;
        }
        
        /* ===== MERCADO NEGRO — transmisión codificada =====
           Sistema aparte del resto del sitio: negro puro, amarillo señal y
           monoespaciada. Los tokens viven en .mn-page, no en :root, para
           que esta estética no se filtre a ninguna otra sección. */

        .mn-page {
          --mn-black: #000000;
          --mn-surface: #0a0a0a;
          --mn-line: rgba(255, 229, 0, 0.16);
          --mn-yellow: #ffe500;
          --mn-dim: rgba(255, 229, 0, 0.42);
          --mn-text: #d8d8d0;
          /* Canales del glitch. Solo se usan en la separación cromática:
             nunca como color de interfaz, o deja de leerse como falla. */
          --mn-cyan: #00e5ff;
          --mn-magenta: #ff003c;

          position: relative;
          background: var(--mn-black);
          color: var(--mn-text);
          font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular',
                       Menlo, Consolas, monospace;
          padding: 0 0 7rem;
          overflow: hidden;
        }

        /* Líneas de barrido */
        .mn-scan {
          position: absolute;
          inset: 0;
          pointer-events: none;
          z-index: 1;
          background: repeating-linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.035) 0px,
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px,
            transparent 3px
          );
          animation: mnScan 7s linear infinite;
        }

        @keyframes mnScan {
          from { transform: translateY(0); }
          to   { transform: translateY(3px); }
        }

        .mn-vignette {
          position: absolute;
          inset: 0;
          pointer-events: none;
          z-index: 1;
          background: radial-gradient(120% 80% at 50% 0%,
            rgba(255, 229, 0, 0.07) 0%, transparent 55%);
        }

        .mn-wrap {
          position: relative;
          z-index: 2;
          max-width: 1180px;
          margin: 0 auto;
          padding: clamp(7rem, 12vw, 10rem) clamp(1.25rem, 5vw, 3.5rem) 0;
        }

        /* Cabecera de transmisión */
        .mn-head {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 0.75rem 1.25rem;
          padding-bottom: 1.5rem;
          border-bottom: 1px solid var(--mn-line);
        }

        .mn-chip {
          display: inline-flex;
          align-items: center;
          gap: 0.5rem;
          padding: 0.35rem 0.7rem;
          border: 1px solid var(--mn-yellow);
          color: var(--mn-yellow);
          font-size: 0.66rem;
          font-weight: 700;
          letter-spacing: 0.2em;
        }

        .mn-dot {
          width: 6px;
          height: 6px;
          background: var(--mn-yellow);
          animation: mnBlink 1.1s steps(1) infinite;
        }

        @keyframes mnBlink {
          0%, 55% { opacity: 1; }
          56%, 100% { opacity: 0.15; }
        }

        .mn-meta {
          font-size: 0.66rem;
          letter-spacing: 0.2em;
          color: var(--mn-dim);
        }

        .mn-stamp { font-variant-numeric: tabular-nums; margin-left: auto; }

        /* Titular con separación de canales */
        .mn-title {
          position: relative;
          margin-top: clamp(2rem, 5vw, 3.5rem);
          font-family: 'JetBrains Mono', monospace;
          font-weight: 800;
          font-size: clamp(1.9rem, 6.4vw, 5rem);
          line-height: 0.98;
          letter-spacing: -0.045em;
          text-transform: uppercase;
          color: var(--mn-yellow);
          text-wrap: balance;
        }

        /* Los dos canales desplazados. Se recortan por franjas con
           clip-path, que es lo que produce el corte horizontal del glitch;
           un simple desplazamiento se ve a sombra de texto, no a falla. */
        .mn-title::before,
        .mn-title::after {
          content: attr(data-text);
          position: absolute;
          inset: 0;
          pointer-events: none;
        }

        .mn-title::before {
          color: var(--mn-cyan);
          animation: mnGlitchA 3.4s steps(1) infinite;
        }

        .mn-title::after {
          color: var(--mn-magenta);
          animation: mnGlitchB 2.7s steps(1) infinite;
        }

        @keyframes mnGlitchA {
          0%, 88%, 100% { clip-path: inset(100% 0 0 0); transform: none; }
          89% { clip-path: inset(14% 0 62% 0); transform: translate(-4px, 0); }
          91% { clip-path: inset(58% 0 22% 0); transform: translate(3px, 0); }
          93% { clip-path: inset(32% 0 44% 0); transform: translate(-2px, 0); }
          95% { clip-path: inset(100% 0 0 0); }
        }

        @keyframes mnGlitchB {
          0%, 92%, 100% { clip-path: inset(100% 0 0 0); transform: none; }
          93% { clip-path: inset(70% 0 12% 0); transform: translate(4px, 0); }
          95% { clip-path: inset(22% 0 56% 0); transform: translate(-3px, 0); }
          97% { clip-path: inset(100% 0 0 0); }
        }

        .mn-sub {
          margin-top: 1.4rem;
          max-width: 54ch;
          font-size: clamp(0.85rem, 1.2vw, 1rem);
          line-height: 1.7;
          color: var(--mn-text);
          opacity: 0.72;
        }

        /* Llamada */
        .mn-cta {
          display: inline-flex;
          align-items: center;
          gap: 0.65rem;
          margin-top: 2.2rem;
          padding: 0.9rem 1.5rem;
          border: 1px solid var(--mn-yellow);
          background: transparent;
          color: var(--mn-yellow);
          font-size: 0.72rem;
          font-weight: 700;
          letter-spacing: 0.2em;
          text-transform: uppercase;
          text-decoration: none;
          transition: background 0.25s ease, color 0.25s ease,
                      box-shadow 0.35s ease;
        }

        .mn-cta:hover,
        .mn-cta:focus-visible {
          background: var(--mn-yellow);
          color: #000;
          box-shadow: 0 0 30px rgba(255, 229, 0, 0.35);
        }

        .mn-cta-mark { font-size: 0.7em; }
        .mn-cta-lg { padding: 1.1rem 2rem; font-size: 0.8rem; }

        /* Mensajes descifrados */
        .mn-messages {
          margin-top: clamp(4rem, 9vw, 7rem);
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: clamp(1.5rem, 3vw, 2.5rem);
        }

        .mn-msg {
          padding: clamp(1.5rem, 3vw, 2.25rem);
          background: var(--mn-surface);
          border: 1px solid var(--mn-line);
        }

        .mn-msg-tag {
          font-size: 0.62rem;
          font-weight: 700;
          letter-spacing: 0.26em;
          color: var(--mn-yellow);
        }

        .mn-msg-title {
          margin-top: 1rem;
          font-size: clamp(1.1rem, 1.9vw, 1.5rem);
          font-weight: 700;
          line-height: 1.2;
          letter-spacing: -0.02em;
          color: #fff;
          text-transform: uppercase;
        }

        .mn-msg-body {
          margin-top: 1rem;
          font-size: 0.86rem;
          line-height: 1.85;
          color: var(--mn-text);
          opacity: 0.66;
          /* El texto cifrado y el descifrado ocupan lo mismo, así que el
             bloque no cambia de alto mientras se resuelve. */
          word-break: break-word;
        }

        /* Expedientes */
        .mn-files { margin-top: clamp(4rem, 9vw, 7rem); }

        .mn-files-head {
          display: flex;
          align-items: baseline;
          justify-content: space-between;
          gap: 1rem;
          padding-bottom: 1rem;
          border-bottom: 1px solid var(--mn-line);
        }

        .mn-files-title {
          font-size: clamp(1.1rem, 2vw, 1.6rem);
          font-weight: 800;
          letter-spacing: 0.04em;
          text-transform: uppercase;
          color: var(--mn-yellow);
        }

        .mn-list { list-style: none; margin: 0; padding: 0; }

        .mn-row { border-bottom: 1px solid rgba(255, 229, 0, 0.09); }

        .mn-row-link {
          position: relative;
          display: grid;
          grid-template-columns: 3.5rem 1fr auto auto;
          align-items: center;
          gap: 1.25rem;
          padding: 1.15rem 0.9rem;
          text-decoration: none;
          color: inherit;
          transition: background 0.25s ease, color 0.25s ease;
        }

        .mn-row-link:hover,
        .mn-row-link:focus-visible {
          background: rgba(255, 229, 0, 0.07);
        }

        .mn-row-link:focus-visible {
          outline: 1px solid var(--mn-yellow);
          outline-offset: -1px;
        }

        .mn-row-id {
          font-size: 0.72rem;
          font-weight: 700;
          letter-spacing: 0.1em;
          color: var(--mn-yellow);
          font-variant-numeric: tabular-nums;
        }

        .mn-row-main { display: flex; flex-direction: column; gap: 0.3rem; }

        .mn-row-name {
          font-size: 0.98rem;
          font-weight: 700;
          letter-spacing: -0.01em;
          color: #fff;
        }

        .mn-row-theme {
          font-size: 0.76rem;
          color: var(--mn-text);
          opacity: 0.55;
        }

        .mn-row-role {
          font-size: 0.66rem;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: var(--mn-dim);
        }

        .mn-row-go {
          font-size: 0.64rem;
          font-weight: 700;
          letter-spacing: 0.2em;
          color: var(--mn-yellow);
          opacity: 0;
          transform: translateX(-6px);
          transition: opacity 0.25s ease, transform 0.35s ease;
        }

        .mn-row-link:hover .mn-row-go,
        .mn-row-link:focus-visible .mn-row-go {
          opacity: 1;
          transform: translateX(0);
        }

        .mn-foot {
          margin-top: clamp(4rem, 9vw, 6.5rem);
          padding-top: clamp(2rem, 4vw, 3rem);
          border-top: 1px solid var(--mn-line);
          text-align: center;
        }

        .mn-foot-line {
          font-size: 0.78rem;
          letter-spacing: 0.2em;
          text-transform: uppercase;
          color: var(--mn-dim);
        }

        .mn-foot .mn-cta { margin-top: 1.6rem; }

        /* La navegación adopta el amarillo mientras se está en la sección,
           si no la barra mint rompe el clima de la página entera. */
        /* Sin esto queda una franja verde flotando sobre el negro puro y se
           rompe el clima de toda la página. */
        .mn-live .nav {
          background: rgba(0, 0, 0, 0.92);
          border-bottom-color: rgba(255, 229, 0, 0.18);
        }

        .mn-live .nav-link.active,
        .mn-live .nav-link:hover,
        .mn-live .mercado-link { color: #ffe500; }

        .mn-live .nav-link.active::after { background: #ffe500; }
        .mn-live .mercado-link { border-color: rgba(255, 229, 0, 0.55); }
        .mn-live .logo-text { color: #ffe500; }

        .mn-live .lang-toggle {
          border-color: rgba(255, 229, 0, 0.4);
          color: #ffe500;
        }

        /* La transición entre secciones también cambia de color: entrar y
           salir de Mercado Negro se siente como cambiar de frecuencia. */
        .mn-live .star-rain { background: #000; }

        @media (max-width: 780px) {
          .mn-messages { grid-template-columns: 1fr; }
          .mn-row-link {
            grid-template-columns: 2.75rem 1fr;
            gap: 0.85rem 1rem;
          }
          /* En una columna el cargo y el enlace estorban: se ocultan y la
             fila entera sigue siendo clicable. */
          .mn-row-role, .mn-row-go { display: none; }
          .mn-stamp { margin-left: 0; width: 100%; }
        }

        @media (prefers-reduced-motion: reduce) {
          .mn-scan { animation: none; }
          .mn-dot { animation: none; opacity: 1; }
          .mn-title::before,
          .mn-title::after { animation: none; clip-path: inset(100% 0 0 0); }
          .mn-row-go, .mn-cta { transition: none; }
        }

        /* ===== Newsletter ===== */

        .nl-band {
          border-top: 1px solid rgba(245, 245, 245, 0.08);
          background:
            radial-gradient(80% 130% at 15% 0%,
              rgba(172, 225, 175, 0.07) 0%, transparent 60%),
            #1e2625;
        }

        .nl-band-inner {
          max-width: 1560px;
          margin: 0 auto;
          padding: clamp(3rem, 7vw, 5.5rem) clamp(1.25rem, 5vw, 4.5rem);
          display: grid;
          grid-template-columns: 1.1fr 1fr;
          align-items: center;
          gap: clamp(2rem, 5vw, 5rem);
        }

        .nl-eyebrow {
          display: inline-flex;
          align-items: center;
          gap: 0.5rem;
          font-size: 0.68rem;
          letter-spacing: 0.26em;
          text-transform: uppercase;
          color: var(--mint);
        }

        .nl-title {
          margin-top: 0.9rem;
          font-family: 'Syne', sans-serif;
          font-weight: 800;
          font-size: clamp(1.75rem, 3.6vw, 3rem);
          line-height: 1.04;
          letter-spacing: -0.03em;
          color: var(--light);
          text-wrap: balance;
        }

        .nl-text {
          margin-top: 0.9rem;
          max-width: 46ch;
          font-size: clamp(0.92rem, 1.15vw, 1.03rem);
          line-height: 1.65;
          color: var(--light);
          opacity: 0.6;
        }

        .nl-form {
          display: flex;
          align-items: stretch;
          gap: 0;
        }

        /* La etiqueta existe para el lector de pantalla; el placeholder
           solo no es una etiqueta accesible. */
        .nl-label {
          position: absolute;
          width: 1px;
          height: 1px;
          overflow: hidden;
          clip-path: inset(50%);
          white-space: nowrap;
        }

        .nl-input {
          flex: 1;
          min-width: 0;
          padding: 1.05rem 1.15rem;
          background: rgba(15, 20, 20, 0.6);
          border: 1px solid rgba(245, 245, 245, 0.14);
          border-right: none;
          color: var(--light);
          font-family: 'Space Grotesk', sans-serif;
          font-size: 0.95rem;
          transition: border-color 0.3s ease, background 0.3s ease;
        }

        .nl-input::placeholder { color: rgba(245, 245, 245, 0.35); }

        .nl-input:focus {
          outline: none;
          border-color: var(--mint);
          background: rgba(15, 20, 20, 0.85);
        }

        .nl-button {
          display: inline-flex;
          align-items: center;
          gap: 0.55rem;
          padding: 1.05rem 1.5rem;
          background: var(--mint);
          border: 1px solid var(--mint);
          color: #16201f;
          font-family: 'Space Grotesk', sans-serif;
          font-weight: 700;
          font-size: 0.78rem;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          white-space: nowrap;
          cursor: pointer;
          transition: background 0.3s ease, box-shadow 0.4s ease, opacity 0.3s ease;
        }

        .nl-button:hover:not(:disabled) {
          box-shadow: 0 0 26px rgba(172, 225, 175, 0.45);
        }

        .nl-button:disabled { opacity: 0.55; cursor: default; }

        .nl-button:focus-visible {
          outline: 2px solid var(--light);
          outline-offset: 3px;
        }

        .nl-done {
          display: flex;
          align-items: center;
          gap: 0.6rem;
          padding: 1.05rem 0;
          color: var(--mint);
          font-size: 0.98rem;
        }

        .nl-msg {
          margin-top: 0.65rem;
          min-height: 1.2em;
          font-size: 0.82rem;
          line-height: 1.4;
          color: var(--light);
          opacity: 0.6;
        }

        .nl-msg-error { color: #ff8b8b; opacity: 1; }

        /* Trampa antispam y el iframe destino: fuera de vista y fuera del
           flujo, sin display:none (algunos bots ignoran lo que está oculto
           así, y el iframe necesita seguir existiendo para recibir el POST). */
        .nl-trap {
          position: absolute;
          width: 0;
          height: 0;
          opacity: 0;
          border: 0;
          pointer-events: none;
          left: -9999px;
        }

        /* En la página de contacto la franja no aplica: el formulario va
           centrado y más ancho. */
        .nl-page { width: 100%; max-width: 560px; margin: 0 auto; }
        .nl-page .nl-msg { text-align: center; }
        .nl-page .nl-done { justify-content: center; }

        @media (max-width: 900px) {
          .nl-band-inner { grid-template-columns: 1fr; }
        }

        @media (max-width: 560px) {
          /* Apilado: en una fila el campo queda demasiado angosto */
          .nl-form { flex-direction: column; }
          .nl-input { border-right: 1px solid rgba(245, 245, 245, 0.14); }
          .nl-button { justify-content: center; }
        }

        /* ===== Blog ===== */

        .blog-page { padding: 0 0 6rem; }

        .posts {
          max-width: 1560px;
          margin: 0 auto;
          padding: 0 clamp(1.25rem, 5vw, 4.5rem);
          display: flex;
          flex-direction: column;
          gap: clamp(1.5rem, 3vw, 2.75rem);
        }

        .post {
          position: relative;
          /* isolation: el resplandor va en z-index -1 y sin esto se colaría
             detrás del fondo de la página en vez de quedarse en la tarjeta. */
          isolation: isolate;
        }

        /* El resplandor: una mancha del color de la entrada, desenfocada y
           un poco más grande que la tarjeta, que florece al pasar el mouse. */
        .post::before {
          content: '';
          position: absolute;
          inset: -6px;
          z-index: -1;
          background: var(--accent);
          filter: blur(46px);
          opacity: 0;
          transform: scale(0.94);
          transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .post:hover::before,
        .post:focus-within::before {
          opacity: 0.34;
          transform: scale(1);
        }

        .post-open {
          position: relative;
          width: 100%;
          display: grid;
          grid-template-columns: 0.92fr 1fr;
          align-items: stretch;
          gap: 0;
          background: #202827;
          border: 1px solid rgba(245, 245, 245, 0.08);
          padding: 0;
          font: inherit;
          color: inherit;
          text-align: left;
          cursor: pointer;
          overflow: hidden;
          transition: border-color 0.45s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .post:hover .post-open,
        .post:focus-within .post-open {
          border-color: color-mix(in srgb, var(--accent) 55%, transparent);
          transform: translateY(-4px);
        }

        .post-open:focus-visible {
          outline: 2px solid var(--mint);
          outline-offset: 4px;
        }

        /* Alterna el lado de la imagen. Es lo que rompe la lectura de lista:
           el ojo tiene que reencuadrar en cada entrada. */
        .post:nth-child(even) .post-media { order: 2; }

        .post-media {
          position: relative;
          overflow: hidden;
          min-height: 260px;
          background: #1a2120;
        }

        .post-featured .post-media { min-height: 420px; }

        .post-media img,
        .post-placeholder {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          display: grid;
          place-items: center;
          object-fit: cover;
          filter: grayscale(0.35) brightness(0.8);
          transition: filter 0.55s ease, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .post-placeholder {
          background:
            radial-gradient(115% 90% at 26% 14%,
              color-mix(in srgb, var(--accent) 42%, transparent) 0%,
              transparent 60%),
            radial-gradient(90% 80% at 85% 90%,
              color-mix(in srgb, var(--accent) 16%, transparent) 0%,
              transparent 55%),
            linear-gradient(155deg, #2b3534 0%, #171d1d 100%);
        }

        .post:hover .post-media img,
        .post:hover .post-placeholder,
        .post:focus-within .post-media img,
        .post:focus-within .post-placeholder {
          filter: grayscale(0) brightness(1.04);
          transform: scale(1.05);
        }

        .post-body {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 0.9rem;
          padding: clamp(1.5rem, 3.2vw, 3.25rem);
        }

        .post-featured .post-body { justify-content: center; }

        .post-meta {
          display: flex;
          align-items: center;
          gap: 0.7rem;
          font-size: 0.68rem;
          letter-spacing: 0.22em;
          text-transform: uppercase;
        }

        .post-cat { color: var(--accent); }

        .post-dot {
          width: 3px;
          height: 3px;
          border-radius: 50%;
          background: var(--gray);
        }

        .post-date {
          color: var(--light);
          opacity: 0.45;
          letter-spacing: 0.14em;
        }

        .post-title {
          font-family: 'Syne', sans-serif;
          font-weight: 800;
          /* Titulares grandes y apretados. El interlineado corto es lo que
             hace que se lean como portada y no como encabezado de blog. */
          font-size: clamp(1.6rem, 3vw, 2.6rem);
          line-height: 1.02;
          letter-spacing: -0.03em;
          color: var(--light);
          text-wrap: balance;
          transition: color 0.4s ease;
        }

        .post-featured .post-title {
          font-size: clamp(2.1rem, 5vw, 4rem);
        }

        .post:hover .post-title,
        .post:focus-within .post-title { color: var(--accent); }

        .post-excerpt {
          max-width: 52ch;
          font-size: clamp(0.92rem, 1.15vw, 1.05rem);
          line-height: 1.65;
          color: var(--light);
          opacity: 0.62;
        }

        .post-featured .post-excerpt { font-size: clamp(1rem, 1.3vw, 1.18rem); }

        .post-cta {
          margin-top: 0.4rem;
          display: inline-flex;
          align-items: center;
          gap: 0.55rem;
          font-size: 0.8rem;
          letter-spacing: 0.16em;
          text-transform: uppercase;
          color: var(--accent);
        }

        .post-arrow {
          display: inline-block;
          transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .post:hover .post-arrow,
        .post:focus-within .post-arrow { transform: translateX(7px); }

        @media (max-width: 860px) {
          .post-open { grid-template-columns: 1fr; }
          /* En una columna el order alternado dejaría la imagen debajo del
             texto en las pares; aquí siempre va arriba. */
          .post:nth-child(even) .post-media { order: 0; }
          .post-media,
          .post-featured .post-media {
            min-height: 0;
            aspect-ratio: 16 / 9;
          }
          .post-media img,
          .post-placeholder { position: absolute; }
        }

        @media (prefers-reduced-motion: reduce) {
          .post::before,
          .post-open,
          .post-media img,
          .post-placeholder,
          .post-arrow,
          .post-title { transition: none; }
          .post:hover .post-open { transform: none; }
          .post:hover .post-media img,
          .post:hover .post-placeholder { transform: none; }
        }

        /* ===== Mosaico de portafolio ===== */

        .portfolio-page {
          padding: 0 0 6rem;
        }

        .mosaic-header {
          max-width: 1560px;
          margin: 0 auto;
          padding: clamp(7rem, 12vw, 10rem) clamp(1.25rem, 5vw, 4.5rem)
                   clamp(2.5rem, 5vw, 4rem);
        }

        .mosaic-title {
          font-family: 'Syne', sans-serif;
          font-weight: 800;
          /* Titular grande y apretado: el aire lo pone el margen, no el
             interlineado. Es lo que separa lo editorial de lo genérico. */
          font-size: clamp(3rem, 11vw, 8.5rem);
          line-height: 0.88;
          letter-spacing: -0.035em;
          text-wrap: balance;
          color: var(--light);
        }

        .mosaic-sub {
          margin-top: 1.4rem;
          max-width: 46ch;
          font-size: clamp(0.95rem, 1.5vw, 1.1rem);
          line-height: 1.6;
          color: var(--mint);
          opacity: 0.75;
        }

        .mosaic {
          max-width: 1560px;
          margin: 0 auto;
          padding: 0 clamp(1.25rem, 5vw, 4.5rem);
          display: grid;
          grid-template-columns: repeat(12, 1fr);
          grid-auto-rows: clamp(34px, 4.4vw, 68px);
          gap: clamp(0.5rem, 1.1vw, 1.1rem);
          /* Sin dense: las filas ya cierran solas y así ninguna pieza
             se adelanta fuera del orden del portafolio. */
          grid-auto-flow: row;
        }

        .mosaic-tile {
          position: relative;
          grid-column: span var(--col);
          grid-row: span var(--row);
          overflow: hidden;
          /* Sin borde, sin radio, sin sombra: superficie plana de revista.
             Cualquiera de los tres devuelve la lectura de "tarjeta". */
          border: none;
          border-radius: 0;
          padding: 0;
          background: #1b2221;
          cursor: pointer;
          display: block;
          font: inherit;
          color: inherit;
          text-align: left;
        }

        .mosaic-img,
        .mosaic-placeholder {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          display: grid;
          place-items: center;
          object-fit: cover;
          /* En reposo las piezas van apagadas; el color llega con el hover. */
          filter: grayscale(0.42) brightness(0.76);
          transform: scale(1.001);
          transition: filter 0.55s ease, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .mosaic-placeholder {
          background:
            radial-gradient(120% 95% at 28% 12%,
              color-mix(in srgb, var(--accent) 40%, transparent) 0%,
              transparent 60%),
            radial-gradient(90% 80% at 88% 92%,
              color-mix(in srgb, var(--accent) 18%, transparent) 0%,
              transparent 55%),
            linear-gradient(150deg, #2a3433 0%, #191f1f 100%);
        }

        /* Degradado que sostiene el texto sobre imágenes claras */
        .mosaic-veil {
          position: absolute;
          inset: 0;
          background: linear-gradient(to top,
            rgba(20, 26, 26, 0.88) 0%,
            rgba(20, 26, 26, 0.32) 34%,
            rgba(20, 26, 26, 0) 62%);
          opacity: 0;
          transition: opacity 0.45s ease;
        }

        .mosaic-caption {
          position: absolute;
          left: clamp(0.9rem, 1.6vw, 1.6rem);
          right: clamp(0.9rem, 1.6vw, 1.6rem);
          bottom: clamp(0.9rem, 1.6vw, 1.5rem);
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 0.5rem;
          opacity: 0;
          transform: translateY(12px);
          transition: opacity 0.4s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .mosaic-rule {
          width: 34px;
          height: 1px;
          background: var(--accent);
          transform: scaleX(0);
          transform-origin: left center;
          transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) 0.06s;
        }

        .mosaic-name {
          font-family: 'Syne', sans-serif;
          font-weight: 700;
          font-size: clamp(0.95rem, 1.35vw, 1.3rem);
          line-height: 1.15;
          letter-spacing: -0.01em;
          color: var(--light);
          text-wrap: balance;
        }

        .mosaic-year {
          font-size: 0.68rem;
          letter-spacing: 0.24em;
          text-transform: uppercase;
          font-variant-numeric: tabular-nums;
          color: var(--mint);
          opacity: 0.8;
        }

        .mosaic-tile:hover .mosaic-img,
        .mosaic-tile:hover .mosaic-placeholder,
        .mosaic-tile:focus-visible .mosaic-img,
        .mosaic-tile:focus-visible .mosaic-placeholder {
          filter: grayscale(0) brightness(1);
          transform: scale(1.06);
        }

        .mosaic-tile:hover .mosaic-veil,
        .mosaic-tile:focus-visible .mosaic-veil { opacity: 1; }

        .mosaic-tile:hover .mosaic-caption,
        .mosaic-tile:focus-visible .mosaic-caption {
          opacity: 1;
          transform: translateY(0);
        }

        .mosaic-tile:hover .mosaic-rule,
        .mosaic-tile:focus-visible .mosaic-rule { transform: scaleX(1); }

        /* En reposo no hay texto, así que el foco de teclado tiene que
           verse claramente o el mosaico queda inoperable sin mouse. */
        .mosaic-tile:focus-visible {
          outline: 2px solid var(--mint);
          outline-offset: 3px;
        }

        @media (max-width: 900px) {
          .mosaic {
            grid-template-columns: repeat(6, 1fr);
            grid-auto-rows: clamp(40px, 7vw, 70px);
          }
          /* Los formatos de 12 columnas no caben: se reagrupan a mitades
             y anchos completos, alternando para conservar el ritmo. */
          .mosaic-tile { grid-column: span 3; grid-row: span 4; }
          .mosaic-tile:nth-child(4n + 1) { grid-column: span 6; grid-row: span 5; }
        }

        @media (max-width: 560px) {
          .mosaic { grid-template-columns: repeat(2, 1fr); }
          .mosaic-tile,
          .mosaic-tile:nth-child(4n + 1) { grid-column: span 2; grid-row: span 5; }
          /* Sin hover en táctil: el texto se queda visible */
          .mosaic-caption { opacity: 1; transform: none; }
          .mosaic-veil { opacity: 1; }
          .mosaic-rule { transform: scaleX(1); }
          .mosaic-img,
          .mosaic-placeholder { filter: grayscale(0) brightness(0.92); }
        }

        @media (prefers-reduced-motion: reduce) {
          .mosaic-img,
          .mosaic-placeholder,
          .mosaic-caption,
          .mosaic-rule,
          .mosaic-veil { transition: none; }
          .mosaic-tile:hover .mosaic-img,
          .mosaic-tile:hover .mosaic-placeholder { transform: none; }
        }

        /* ===== Lluvia de estrellas (loading) ===== */

        .star-rain {
          position: fixed;
          inset: 0;
          z-index: 99998;
          background: var(--dark);
          display: grid;
          place-items: center;
          pointer-events: all;
          /* Entra con fade: antes aparecía de golpe encima de la página */
          animation: rainVeilIn 0.34s ease-out both;
        }

        .star-rain-transition {
          background: var(--dark);
          animation-duration: 0.22s;
        }

        @keyframes rainVeilIn {
          from { opacity: 0; }
          to   { opacity: 1; }
        }

        /* Salida: el velo se levanta durante --rain-outro, exactamente lo que
           tarda el canvas en vaciarse. La curva sale lenta y termina rápido,
           para que lo último en irse no se sienta como un corte.

           Va como keyframes, no como transition: la entrada usa una animación
           con fill both, y apagarla para fijar la opacidad en el mismo frame
           deja a la transición sin valor inicial estable — el velo brincaba
           a 0 de golpe en vez de desvanecerse. Animación reemplaza animación
           de forma limpia.

           OJO: nada de acentos graves en estos comentarios. Toda esta hoja
           vive dentro de un template literal de JS y un acento grave la
           parte en dos, corrompiendo las reglas de alrededor. */
        .star-rain.rain-out {
          pointer-events: none;
          animation: rainVeilOut var(--rain-outro, 520ms) ease-out both;
        }

        @keyframes rainVeilOut {
          from { opacity: 1; }
          to   { opacity: 0; }
        }

        /* El wordmark se va primero y más rápido que el velo: si todo saliera
           junto, el bloque de texto se vería "pegado" al fondo al desaparecer. */
        .star-rain.rain-out .star-rain-brand {
          animation: rainBrandOut 0.44s cubic-bezier(0.4, 0, 0.2, 1) both;
        }

        @keyframes rainBrandOut {
          from { opacity: 1; transform: none; }
          to   { opacity: 0; transform: translateY(-18px) scale(0.97); }
        }

        /* Entrada de la sección nueva, encadenada con el velo que se levanta.
           Solo opacidad: un transform aquí crearía bloque contenedor y
           rompería el position:fixed de los modales y el popup de la tienda. */
        .page-swap {
          animation: pageSwapIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
        }

        @keyframes pageSwapIn {
          from { opacity: 0; }
          to   { opacity: 1; }
        }

        @media (prefers-reduced-motion: reduce) {
          .star-rain,
          .star-rain.rain-out,
          .star-rain.rain-out .star-rain-brand,
          .page-swap {
            animation: none;
            transition: none;
          }
        }

        .star-rain-canvas {
          position: absolute;
          inset: 0;
          display: block;
        }

        .star-rain-brand {
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 1rem;
          text-align: center;
          padding: 2rem;
        }

        .star-rain-mark {
          animation: rainMarkIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
          filter: drop-shadow(0 0 18px rgba(172, 225, 175, 0.55));
        }

        .star-rain-word {
          font-family: 'Syne', sans-serif;
          font-weight: 800;
          font-size: clamp(2.6rem, 9vw, 4.6rem);
          letter-spacing: 0.16em;
          /* El letter-spacing agrega aire a la derecha; se compensa
             para que el wordmark quede ópticamente centrado. */
          text-indent: 0.16em;
          line-height: 1;
          color: var(--light);
          animation: rainWordIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
        }

        .star-rain-tag {
          font-size: 0.8rem;
          letter-spacing: 0.22em;
          text-transform: uppercase;
          color: var(--mint);
          opacity: 0.85;
          animation: rainWordIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.26s both;
        }

        .star-rain-bar {
          width: min(230px, 60vw);
          height: 2px;
          margin-top: 0.6rem;
          background: rgba(245, 245, 245, 0.14);
          overflow: hidden;
          animation: rainWordIn 0.9s ease 0.4s both;
        }

        .star-rain-fill {
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, var(--mint), var(--lavender));
          transform-origin: left center;
          transform: scaleX(0);
        }

        @keyframes rainMarkIn {
          from { opacity: 0; transform: scale(0.4) rotate(-90deg); }
          to   { opacity: 1; transform: scale(1) rotate(0deg); }
        }

        @keyframes rainWordIn {
          from { opacity: 0; transform: translateY(14px); }
          to   { opacity: 1; transform: translateY(0); }
        }

        @media (prefers-reduced-motion: reduce) {
          .star-rain-mark,
          .star-rain-word,
          .star-rain-tag,
          .star-rain-bar { animation: none; }
        }

        /* ===== Cursor estrella ===== */

        /* Oculta el cursor nativo solo cuando la estrella está activa
           (no en táctil, donde el componente no se monta). */
        body.star-cursor-on,
        body.star-cursor-on * {
          cursor: none !important;
        }

        /* Excepción: en campos de texto sí conviene ver el caret */
        body.star-cursor-on input,
        body.star-cursor-on textarea {
          cursor: text !important;
        }

        .star-cursor {
          position: fixed;
          top: 0;
          left: 0;
          width: 0;
          height: 0;
          z-index: 99999;
          pointer-events: none;
          opacity: 0;
          transition: opacity 0.25s ease;
          will-change: transform;
        }

        .star-cursor-star {
          position: absolute;
          top: -13px;
          left: -13px;
          width: 26px;
          height: 26px;
          will-change: transform, filter;
        }

        .star-cursor-halo {
          position: absolute;
          top: -70px;
          left: -70px;
          width: 140px;
          height: 140px;
          border-radius: 50%;
          background: radial-gradient(
            circle,
            rgba(172, 225, 175, 0.5) 0%,
            rgba(172, 225, 175, 0.14) 38%,
            rgba(172, 225, 175, 0) 68%
          );
          opacity: 0;
          will-change: transform, opacity;
        }

        /* Sin cursor personalizado en táctil */
        @media (pointer: coarse) {
          .star-cursor { display: none; }
        }

        .umvra-app {
          min-height: 100vh;
          background: var(--dark);
          color: var(--light);
          font-family: 'Space Grotesk', sans-serif;
          overflow-x: hidden;
        }
        
        /* Navigation */
        .nav {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          z-index: 1000;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 1.5rem 3rem;
          background: rgba(35, 43, 43, 0.9);
          backdrop-filter: blur(20px);
          border-bottom: 1px solid rgba(172, 225, 175, 0.1);
        }
        
        .nav-logo {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          cursor: pointer;
          transition: transform 0.3s ease;
        }
        
        .nav-logo:hover {
          transform: scale(1.05);
        }
        
        .logo-text {
          font-family: 'Syne', sans-serif;
          font-size: 1.5rem;
          font-weight: 800;
          letter-spacing: 2px;
        }
        
        .nav-links {
          display: flex;
          gap: 2rem;
        }
        
        .nav-link {
          background: none;
          border: none;
          color: var(--light);
          font-family: 'Space Grotesk', sans-serif;
          font-size: 0.9rem;
          cursor: pointer;
          position: relative;
          padding: 0.5rem 0;
          transition: color 0.3s ease;
          display: flex;
          align-items: center;
          gap: 0.4rem;
        }
        
        .nav-link::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 0;
          height: 2px;
          background: var(--mint);
          transition: width 0.3s ease;
        }
        
        .nav-link:hover, .nav-link.active {
          color: var(--mint);
        }
        
        .nav-link:hover::after, .nav-link.active::after {
          width: 100%;
        }
        
        /* Mercado Negro special link */
        .mercado-link {
          color: var(--lavender) !important;
          font-weight: 600;
          padding: 0.5rem 1rem;
          border: 1px solid var(--lavender);
          border-radius: 4px;
          transition: all 0.3s ease;
        }
        
        .mercado-link::after {
          display: none;
        }
        
        .mercado-link:hover, .mercado-link.active {
          background: var(--lavender);
          color: var(--dark) !important;
        }
        
        .lang-toggle {
          background: transparent;
          border: 1px solid var(--mint);
          color: var(--mint);
          padding: 0.5rem 1rem;
          font-family: 'Space Grotesk', sans-serif;
          font-size: 0.8rem;
          cursor: pointer;
          transition: all 0.3s ease;
        }
        
        .lang-toggle:hover {
          background: var(--mint);
          color: var(--dark);
        }
        
        .menu-toggle {
          display: none;
          flex-direction: column;
          gap: 5px;
          background: none;
          border: none;
          cursor: pointer;
          padding: 5px;
        }
        
        .menu-toggle span {
          width: 25px;
          height: 2px;
          background: var(--light);
          transition: all 0.3s ease;
        }
        
        /* Pages */
        .page {
          min-height: 100vh;
          padding: 100px 3rem 3rem;
          position: relative;
        }
        
        .page-header {
          text-align: center;
          margin-bottom: 4rem;
          animation: fadeInUp 0.8s ease;
        }
        
        .page-title {
          font-family: 'Syne', sans-serif;
          font-size: clamp(2.5rem, 8vw, 5rem);
          font-weight: 800;
          margin-bottom: 1rem;
          background: linear-gradient(135deg, var(--mint), var(--lavender), var(--steel));
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }
        
        .page-subtitle {
          color: var(--gray);
          font-size: 1.1rem;
          max-width: 500px;
          margin: 0 auto;
        }
        
        /* Floating Shapes */
        .floating-shapes {
          position: fixed;
          inset: 0;
          pointer-events: none;
          overflow: hidden;
          z-index: 0;
        }
        
        .shape {
          position: absolute;
          border-radius: 50%;
          opacity: 0.15;
          filter: blur(60px);
          animation: float 20s ease-in-out infinite;
        }
        
        .shape-1 { width: 400px; height: 400px; background: var(--mint); top: 10%; left: -100px; animation-delay: 0s; }
        .shape-2 { width: 300px; height: 300px; background: var(--lavender); top: 50%; right: -50px; animation-delay: -5s; }
        .shape-3 { width: 250px; height: 250px; background: var(--steel); bottom: 10%; left: 30%; animation-delay: -10s; }
        .shape-4 { width: 200px; height: 200px; background: var(--mint); top: 30%; right: 20%; animation-delay: -15s; }
        .shape-5 { width: 350px; height: 350px; background: var(--lavender); bottom: 20%; right: 10%; animation-delay: -7s; }
        .shape-6 { width: 180px; height: 180px; background: var(--steel); top: 60%; left: 10%; animation-delay: -12s; }
        
        @keyframes float {
          0%, 100% { transform: translate(0, 0) rotate(0deg); }
          25% { transform: translate(30px, -30px) rotate(5deg); }
          50% { transform: translate(-20px, 20px) rotate(-5deg); }
          75% { transform: translate(20px, 10px) rotate(3deg); }
        }
        
        /* Blog Popup */
        .blog-popup {
          position: fixed;
          bottom: 2rem;
          right: 2rem;
          width: 320px;
          background: rgba(35, 43, 43, 0.95);
          backdrop-filter: blur(20px);
          border: 1px solid rgba(172, 225, 175, 0.2);
          padding: 1.5rem;
          z-index: 100;
          opacity: 0;
          transform: translateY(20px) scale(0.95);
          transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        
        .blog-popup.visible {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
        
        .popup-close {
          position: absolute;
          top: 1rem;
          right: 1rem;
          background: none;
          border: none;
          color: var(--gray);
          cursor: pointer;
          transition: color 0.3s ease;
        }
        
        .popup-close:hover {
          color: var(--light);
        }
        
        .popup-accent {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 3px;
          background: linear-gradient(90deg, var(--mint), var(--lavender));
        }
        
        .popup-label {
          font-size: 0.7rem;
          text-transform: uppercase;
          letter-spacing: 2px;
          color: var(--mint);
          display: block;
          margin-bottom: 0.5rem;
        }
        
        .popup-title {
          font-family: 'Syne', sans-serif;
          font-size: 1.1rem;
          margin-bottom: 0.5rem;
          line-height: 1.3;
        }
        
        .popup-excerpt {
          font-size: 0.85rem;
          color: var(--gray);
          margin-bottom: 1rem;
          line-height: 1.5;
        }
        
        .popup-cta {
          background: none;
          border: none;
          color: var(--mint);
          font-family: 'Space Grotesk', sans-serif;
          font-size: 0.9rem;
          cursor: pointer;
          transition: transform 0.3s ease;
          padding: 0;
        }
        
        .popup-cta:hover {
          transform: translateX(5px);
        }
        
        /* Home Page */
        .home-page {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          min-height: auto;
          padding-top: 100px;
          padding-bottom: 0;
        }
        
        .home-page .hero-content {
          min-height: calc(100vh - 100px);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        }
        
        .hero-content {
          position: relative;
          z-index: 1;
          animation: fadeInUp 1s ease;
          width: 100%;
        }
        
        .hero-star {
          animation: spin 20s linear infinite, pulse 2s ease-in-out infinite;
          margin-bottom: 2rem;
        }
        
        @keyframes spin {
          from { transform: rotate(0deg); }
          to { transform: rotate(360deg); }
        }
        
        @keyframes pulse {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.7; }
        }
        
        .hero-title {
          font-family: 'Syne', sans-serif;
          font-size: clamp(4rem, 15vw, 12rem);
          font-weight: 800;
          line-height: 1;
          margin-bottom: 1.5rem;
          letter-spacing: -2px;
        }
        
        .hero-tagline {
          font-size: clamp(1.2rem, 3vw, 1.8rem);
          color: var(--mint);
          margin-bottom: 1rem;
          font-weight: 500;
        }
        
        .hero-subtitle {
          color: var(--gray);
          font-size: 1rem;
          margin-bottom: 3rem;
          letter-spacing: 2px;
        }
        
        .cta-button {
          background: transparent;
          border: 2px solid var(--mint);
          color: var(--mint);
          padding: 1rem 2.5rem;
          font-family: 'Space Grotesk', sans-serif;
          font-size: 1rem;
          cursor: pointer;
          display: inline-flex;
          align-items: center;
          gap: 0.75rem;
          transition: all 0.4s ease;
          position: relative;
          overflow: hidden;
        }
        
        .cta-button::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: var(--mint);
          transition: left 0.4s ease;
          z-index: -1;
        }
        
        .cta-button:hover {
          color: var(--dark);
        }
        
        .cta-button:hover::before {
          left: 0;
        }
        
        .cta-arrow {
          transition: transform 0.3s ease;
        }
        
        .cta-button:hover .cta-arrow {
          transform: translateX(5px);
        }
        
        .scroll-indicator {
          position: absolute;
          bottom: 2rem;
          animation: bounce 2s ease-in-out infinite;
        }
        
        .mouse {
          width: 26px;
          height: 40px;
          border: 2px solid var(--gray);
          border-radius: 15px;
          position: relative;
        }
        
        .wheel {
          width: 4px;
          height: 8px;
          background: var(--mint);
          border-radius: 2px;
          position: absolute;
          top: 8px;
          left: 50%;
          transform: translateX(-50%);
          animation: scroll 2s ease-in-out infinite;
        }
        
        @keyframes bounce {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(10px); }
        }
        
        @keyframes scroll {
          0%, 100% { opacity: 1; top: 8px; }
          50% { opacity: 0.3; top: 20px; }
        }
        
        @keyframes fadeInUp {
          from {
            opacity: 0;
            transform: translateY(30px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        
        /* UMVRA Origin Section */
        .umvra-origin-section {
          position: relative;
          min-height: 100vh;
          margin-top: 10vh;
          padding: 6rem 0;
          overflow: hidden;
        }
        
        /* Diagonal Split Background */
        .origin-bg-split {
          position: absolute;
          inset: 0;
          pointer-events: none;
        }
        
        .split-left {
          position: absolute;
          top: 0;
          left: 0;
          width: 50%;
          height: 100%;
          background: linear-gradient(135deg, rgba(71, 82, 81, 0.3), transparent);
          clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%);
        }
        
        .split-right {
          position: absolute;
          top: 0;
          right: 0;
          width: 50%;
          height: 100%;
          background: linear-gradient(225deg, rgba(172, 225, 175, 0.15), transparent);
          clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
        }
        
        .split-line {
          position: absolute;
          top: 0;
          left: 50%;
          width: 2px;
          height: 100%;
          background: linear-gradient(to bottom, transparent, var(--mint), var(--lavender), transparent);
          transform: rotate(10deg);
          transform-origin: top center;
          opacity: 0.5;
        }
        
        /* Origin Floating Elements */
        .origin-floating {
          position: absolute;
          inset: 0;
          pointer-events: none;
        }
        
        .origin-star {
          position: absolute;
          animation: originFloat 6s ease-in-out infinite;
        }
        
        .o-star-1 { top: 15%; left: 10%; animation-delay: 0s; }
        .o-star-2 { top: 40%; right: 15%; animation-delay: -2s; }
        .o-star-3 { bottom: 20%; left: 20%; animation-delay: -4s; }
        
        @keyframes originFloat {
          0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.6; }
          50% { transform: translateY(-20px) rotate(180deg); opacity: 1; }
        }
        
        /* Origin Content Layout */
        .origin-content {
          display: grid;
          grid-template-columns: 1fr 2fr 1fr;
          gap: 3rem;
          max-width: 1400px;
          margin: 0 auto;
          padding: 0 2rem;
          align-items: center;
          position: relative;
          z-index: 1;
        }
        
        /* Creator Side */
        .origin-creator {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          gap: 1.5rem;
        }
        
        .creator-label, .umvra-label {
          display: flex;
          align-items: center;
          gap: 1rem;
          font-size: 0.8rem;
          text-transform: uppercase;
          letter-spacing: 3px;
          color: var(--gray);
        }
        
        .label-line {
          width: 40px;
          height: 1px;
          background: var(--gray);
        }
        
        .creator-image-container {
          width: 250px;
          height: 300px;
          position: relative;
        }
        
        .creator-image-placeholder {
          width: 100%;
          height: 100%;
          background: linear-gradient(135deg, var(--gray), var(--dark));
          border: 1px solid rgba(255,255,255,0.1);
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--gray);
          font-size: 0.9rem;
        }
        
        .creator-image {
          width: 100%;
          height: 100%;
          object-fit: cover;
          filter: grayscale(30%);
          transition: filter 0.5s ease;
        }
        
        .creator-image-container:hover .creator-image {
          filter: grayscale(0%);
        }
        
        /* Center - Connection */
        .origin-center {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 3rem;
        }
        
        .connection-visual {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
        }
        
        .connection-circle {
          position: relative;
          width: 100px;
          height: 100px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        .connection-inner {
          width: 80px;
          height: 80px;
          background: rgba(172, 225, 175, 0.1);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          animation: connectionPulse 3s ease-in-out infinite;
          z-index: 2;
        }
        
        @keyframes connectionPulse {
          0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(172, 225, 175, 0.3); }
          50% { transform: scale(1.1); box-shadow: 0 0 30px rgba(172, 225, 175, 0.3); }
        }
        
        .connection-ring {
          position: absolute;
          border-radius: 50%;
          border: 1px solid var(--mint);
          opacity: 0.3;
          animation: ringExpand 3s ease-out infinite;
        }
        
        .ring-1 { width: 100%; height: 100%; animation-delay: 0s; }
        .ring-2 { width: 100%; height: 100%; animation-delay: -1s; }
        .ring-3 { width: 100%; height: 100%; animation-delay: -2s; }
        
        @keyframes ringExpand {
          0% { transform: scale(1); opacity: 0.5; }
          100% { transform: scale(2.5); opacity: 0; }
        }
        
        .connection-line {
          position: absolute;
          top: 50%;
          height: 2px;
          width: calc(50% - 60px);
          transform: translateY(-50%);
        }
        
        .line-left {
          left: 0;
          background: linear-gradient(to right, transparent, var(--gray));
        }
        
        .line-right {
          right: 0;
          background: linear-gradient(to left, transparent, var(--mint));
        }
        
        /* Origin Text */
        .origin-text {
          text-align: center;
          max-width: 600px;
        }
        
        .origin-title {
          margin-bottom: 2rem;
        }
        
        .origin-title .title-small {
          display: block;
          font-family: 'Space Grotesk', sans-serif;
          font-size: 1rem;
          font-weight: 400;
          color: var(--gray);
          letter-spacing: 3px;
          text-transform: uppercase;
          margin-bottom: 0.5rem;
        }
        
        .origin-title .title-large {
          display: block;
          font-family: 'Syne', sans-serif;
          font-size: clamp(2.5rem, 5vw, 4rem);
          font-weight: 800;
          background: linear-gradient(135deg, var(--light), var(--mint));
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }
        
        .origin-narrative {
          margin-bottom: 2rem;
        }
        
        .origin-narrative p {
          color: var(--gray);
          line-height: 1.9;
          margin-bottom: 1.25rem;
          font-size: 1.05rem;
        }
        
        .narrative-intro {
          font-style: italic;
          color: var(--steel) !important;
        }
        
        .narrative-main strong {
          color: var(--mint);
          font-weight: 600;
        }
        
        .narrative-end {
          color: var(--light) !important;
        }
        
        .origin-signature {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 0.75rem;
          font-size: 0.9rem;
          color: var(--gray);
          font-style: italic;
        }
        
        /* UMVRA Side */
        .origin-umvra {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 1.5rem;
        }
        
        .umvra-image-container {
          width: 280px;
          height: 350px;
          position: relative;
        }
        
        .umvra-image-placeholder {
          width: 100%;
          height: 100%;
          background: linear-gradient(135deg, rgba(172, 225, 175, 0.2), rgba(204, 204, 255, 0.1));
          border: 1px solid rgba(172, 225, 175, 0.3);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 1rem;
          color: var(--mint);
          font-family: 'Syne', sans-serif;
          font-size: 1.2rem;
          font-weight: 700;
        }
        
        .umvra-image {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
        
        .umvra-glow {
          position: absolute;
          inset: -20px;
          background: radial-gradient(circle, rgba(172, 225, 175, 0.2), transparent);
          filter: blur(30px);
          z-index: -1;
          animation: umvraGlow 4s ease-in-out infinite;
        }
        
        @keyframes umvraGlow {
          0%, 100% { opacity: 0.5; transform: scale(1); }
          50% { opacity: 0.8; transform: scale(1.1); }
        }
        
        /* Comics Preview Strip */
        .comics-preview {
          margin-top: 5rem;
          padding: 0 2rem;
          max-width: 1200px;
          margin-left: auto;
          margin-right: auto;
          position: relative;
          z-index: 1;
        }
        
        .comics-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 1.5rem;
        }
        
        .comics-label {
          font-family: 'Syne', sans-serif;
          font-size: 1.2rem;
          color: var(--light);
        }
        
        .comics-see-all {
          background: none;
          border: none;
          color: var(--mint);
          font-family: 'Space Grotesk', sans-serif;
          font-size: 0.9rem;
          cursor: pointer;
          transition: transform 0.3s ease;
        }
        
        .comics-see-all:hover {
          transform: translateX(5px);
        }
        
        .comics-strip {
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          gap: 1rem;
        }
        
        .comic-panel {
          aspect-ratio: 3/4;
          background: rgba(255,255,255,0.03);
          border: 1px solid rgba(255,255,255,0.1);
          position: relative;
          overflow: hidden;
          cursor: pointer;
          animation: fadeInUp 0.5s ease var(--delay) both;
          transition: all 0.4s ease;
        }
        
        .comic-panel:hover {
          border-color: var(--mint);
          transform: translateY(-5px);
        }
        
        .panel-content {
          position: absolute;
          inset: 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 0.5rem;
          color: var(--gray);
          font-size: 0.8rem;
        }
        
        .panel-hover {
          position: absolute;
          inset: 0;
          background: rgba(172, 225, 175, 0.9);
          display: flex;
          align-items: center;
          justify-content: center;
          opacity: 0;
          transition: opacity 0.3s ease;
        }
        
        .panel-hover span {
          color: var(--dark);
          font-weight: 600;
          font-size: 0.85rem;
        }
        
        .comic-panel:hover .panel-hover {
          opacity: 1;
        }
        
        /* Origin Section Responsive */
        @media (max-width: 1024px) {
          .origin-content {
            grid-template-columns: 1fr;
            gap: 4rem;
            text-align: center;
          }
          
          .origin-creator, .origin-umvra {
            align-items: center;
          }
          
          .origin-creator {
            order: 1;
          }
          
          .origin-center {
            order: 2;
          }
          
          .origin-umvra {
            order: 3;
          }
          
          .connection-visual {
            display: none;
          }
          
          .creator-label, .umvra-label {
            justify-content: center;
          }
          
          .comics-strip {
            grid-template-columns: repeat(3, 1fr);
          }
        }
        
        @media (max-width: 768px) {
          .umvra-origin-section {
            padding: 4rem 0;
            margin-top: 5vh;
          }
          
          .creator-image-container {
            width: 200px;
            height: 250px;
          }
          
          .umvra-image-container {
            width: 220px;
            height: 280px;
          }
          
          .origin-title .title-large {
            font-size: 2.5rem;
          }
          
          .comics-strip {
            grid-template-columns: repeat(2, 1fr);
          }
          
          .comic-panel:nth-child(5) {
            display: none;
          }
          
          .split-line {
            display: none;
          }
        }
        
        /* Portfolio */
        .filter-tabs {
          display: flex;
          justify-content: center;
          gap: 1rem;
          margin-bottom: 3rem;
          flex-wrap: wrap;
        }
        
        .filter-tab {
          background: transparent;
          border: 1px solid var(--gray);
          color: var(--light);
          padding: 0.6rem 1.5rem;
          font-family: 'Space Grotesk', sans-serif;
          font-size: 0.85rem;
          cursor: pointer;
          transition: all 0.3s ease;
        }
        
        .filter-tab:hover, .filter-tab.active {
          border-color: var(--mint);
          color: var(--mint);
        }
        
        .portfolio-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: 2rem;
          max-width: 1200px;
          margin: 0 auto;
          position: relative;
          z-index: 1;
        }
        
        .portfolio-item {
          aspect-ratio: 4/3;
          position: relative;
          cursor: pointer;
          overflow: hidden;
          animation: fadeInUp 0.6s ease var(--delay) both;
        }
        
        .portfolio-item-bg {
          position: absolute;
          inset: 0;
          background: linear-gradient(135deg, var(--dark), var(--gray));
          border: 1px solid rgba(255,255,255,0.1);
          transition: all 0.5s ease;
        }
        
        .portfolio-item:hover .portfolio-item-bg {
          border-color: var(--accent);
          transform: scale(1.02);
        }
        
        .portfolio-item-content {
          position: absolute;
          inset: 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 1rem;
          padding: 2rem;
          text-align: center;
          z-index: 1;
        }
        
        .portfolio-item-content h3 {
          font-family: 'Syne', sans-serif;
          font-size: 1.3rem;
          font-weight: 600;
        }
        
        .category-tag {
          font-size: 0.75rem;
          color: var(--gray);
          text-transform: uppercase;
          letter-spacing: 2px;
        }
        
        .portfolio-item-overlay {
          position: absolute;
          inset: 0;
          background: rgba(172, 225, 175, 0.9);
          display: flex;
          align-items: center;
          justify-content: center;
          opacity: 0;
          transition: opacity 0.4s ease;
          z-index: 2;
        }
        
        .portfolio-item-overlay span {
          color: var(--dark);
          font-weight: 600;
          transform: translateY(20px);
          transition: transform 0.4s ease;
        }
        
        .portfolio-item:hover .portfolio-item-overlay {
          opacity: 1;
        }
        
        .portfolio-item:hover .portfolio-item-overlay span {
          transform: translateY(0);
        }
        
        /* Project Modal - Full Width */
        .project-modal-overlay {
          position: fixed;
          inset: 0;
          background: rgba(0, 0, 0, 0.95);
          z-index: 2000;
          overflow-y: auto;
          animation: fadeIn 0.3s ease;
        }
        
        @keyframes fadeIn {
          from { opacity: 0; }
          to { opacity: 1; }
        }
        
        .project-modal-fullwidth {
          min-height: 100vh;
          background: var(--dark);
          animation: slideUp 0.4s ease;
        }
        
        @keyframes slideUp {
          from { opacity: 0; transform: translateY(30px); }
          to { opacity: 1; transform: translateY(0); }
        }
        
        /* Volver al catálogo: barra fija arriba a la izquierda, con texto.
           La X sola no dice a dónde lleva. */
        .back-to-catalog {
          position: fixed;
          top: 1.5rem;
          left: 1.5rem;
          z-index: 120;
          display: inline-flex;
          align-items: center;
          gap: 0.6rem;
          padding: 0.75rem 1.25rem;
          background: rgba(35, 43, 43, 0.92);
          backdrop-filter: blur(10px);
          border: 1px solid rgba(245, 245, 245, 0.12);
          color: var(--light);
          font-family: 'Space Grotesk', sans-serif;
          font-size: 0.78rem;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          cursor: pointer;
          transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
        }

        .back-to-catalog:hover,
        .back-to-catalog:focus-visible {
          border-color: var(--mint);
          color: var(--mint);
          background: rgba(35, 43, 43, 0.98);
        }

        .back-arrow {
          display: inline-block;
          transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .back-to-catalog:hover .back-arrow { transform: translateX(-4px); }

        @media (max-width: 640px) {
          /* En móvil solo cabe uno de los dos; queda el que lleva texto. */
          .product-modal .modal-close-float { display: none; }
          .back-to-catalog {
            top: 1rem;
            left: 1rem;
            padding: 0.6rem 0.95rem;
            font-size: 0.7rem;
          }
        }

        @media (prefers-reduced-motion: reduce) {
          .back-to-catalog,
          .back-arrow { transition: none; }
          .back-to-catalog:hover .back-arrow { transform: none; }
        }

        .modal-close-float {
          position: fixed;
          top: 1.5rem;
          right: 1.5rem;
          background: rgba(35, 43, 43, 0.9);
          backdrop-filter: blur(10px);
          border: 1px solid rgba(255,255,255,0.1);
          color: var(--light);
          width: 50px;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          z-index: 100;
          transition: all 0.3s ease;
        }
        
        .modal-close-float:hover {
          background: var(--mint);
          color: var(--dark);
          border-color: var(--mint);
        }
        
        /* Full Width Gallery */
        .gallery-fullwidth {
          position: relative;
          width: 100%;
          height: 70vh;
          min-height: 500px;
          background: linear-gradient(135deg, rgba(0,0,0,0.8), var(--accent));
        }
        
        .gallery-main-fullwidth {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        .gallery-placeholder-full {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 1.5rem;
          color: var(--gray);
          font-size: 1.1rem;
        }
        
        .gallery-nav {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          width: 60px;
          height: 60px;
          background: rgba(35, 43, 43, 0.8);
          backdrop-filter: blur(10px);
          border: 1px solid rgba(255,255,255,0.1);
          color: var(--light);
          font-size: 1.5rem;
          cursor: pointer;
          transition: all 0.3s ease;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        .gallery-nav:hover {
          background: var(--mint);
          color: var(--dark);
        }
        
        .gallery-nav.prev { left: 2rem; }
        .gallery-nav.next { right: 2rem; }
        
        .gallery-dots {
          position: absolute;
          bottom: 2rem;
          left: 50%;
          transform: translateX(-50%);
          display: flex;
          gap: 0.75rem;
        }
        
        .dot {
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background: rgba(255,255,255,0.3);
          border: none;
          cursor: pointer;
          transition: all 0.3s ease;
        }
        
        .dot:hover, .dot.active {
          background: var(--mint);
          transform: scale(1.3);
        }
        
        /* Thumbnails Strip */
        .gallery-thumbs-strip {
          display: flex;
          gap: 0.5rem;
          padding: 1rem 2rem;
          background: rgba(0,0,0,0.5);
          overflow-x: auto;
          justify-content: center;
        }
        
        .thumb-strip {
          width: 80px;
          height: 60px;
          background: rgba(255,255,255,0.05);
          border: 2px solid transparent;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.3s ease;
          flex-shrink: 0;
        }
        
        .thumb-strip:hover, .thumb-strip.active {
          border-color: var(--accent);
          background: rgba(255,255,255,0.1);
        }
        
        /* Project Info Full Width */
        .modal-info-fullwidth {
          padding: 4rem 2rem;
          background: var(--dark);
        }
        
        .info-container {
          max-width: 1200px;
          margin: 0 auto;
        }
        
        .modal-header-full {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          gap: 3rem;
          margin-bottom: 3rem;
          padding-bottom: 2rem;
          border-bottom: 1px solid rgba(255,255,255,0.1);
          flex-wrap: wrap;
        }
        
        .header-left {
          flex: 1;
          min-width: 300px;
        }
        
        .modal-title-full {
          font-family: 'Syne', sans-serif;
          font-size: clamp(2rem, 5vw, 3.5rem);
          font-weight: 700;
          line-height: 1.2;
          margin-top: 0.5rem;
        }
        
        .modal-meta-inline {
          display: flex;
          gap: 2rem;
          flex-wrap: wrap;
        }
        
        .meta-item-inline {
          display: flex;
          flex-direction: column;
          gap: 0.25rem;
        }
        
        .modal-sections-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 3rem;
        }
        
        .modal-section {
          margin-bottom: 0;
        }
        
        .modal-section h3 {
          font-family: 'Syne', sans-serif;
          font-size: 1.2rem;
          margin-bottom: 0.75rem;
          color: var(--mint);
        }
        
        .modal-section p {
          color: var(--gray);
          line-height: 1.7;
        }
        
        .results-list {
          list-style: none;
          display: flex;
          flex-direction: column;
          gap: 0.75rem;
        }
        
        .results-list li {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          color: var(--light);
        }
        
        .modal-category {
          font-size: 0.75rem;
          text-transform: uppercase;
          letter-spacing: 2px;
          color: var(--mint);
          display: block;
        }
        
        .meta-label {
          font-size: 0.75rem;
          text-transform: uppercase;
          letter-spacing: 1px;
          color: var(--gray);
        }
        
        .meta-value {
          font-size: 0.95rem;
        }
        
        /* Mercado Negro Page */
        .mercado-page {
          padding-top: 0;
        }
        
        .mercado-hero {
          min-height: 80vh;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
          position: relative;
          padding-top: 100px;
        }
        
        .mercado-star-bg {
          position: absolute;
          animation: spin 60s linear infinite;
          opacity: 0.5;
        }
        
        .mercado-title {
          font-family: 'Syne', sans-serif;
          font-size: clamp(2.5rem, 8vw, 5rem);
          font-weight: 800;
          margin-bottom: 1rem;
          background: linear-gradient(135deg, var(--lavender), var(--steel));
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          position: relative;
          z-index: 1;
        }
        
        .mercado-subtitle {
          color: var(--gray);
          font-size: 1.2rem;
          margin-bottom: 2rem;
          position: relative;
          z-index: 1;
        }
        
        .mercado-cta {
          display: inline-flex;
          align-items: center;
          gap: 0.75rem;
          background: var(--lavender);
          color: var(--dark);
          padding: 1rem 2rem;
          font-family: 'Space Grotesk', sans-serif;
          font-size: 1rem;
          font-weight: 600;
          text-decoration: none;
          transition: all 0.3s ease;
          position: relative;
          z-index: 1;
        }
        
        .mercado-cta:hover {
          background: var(--steel);
          color: var(--light);
          transform: scale(1.05);
        }
        
        .mercado-cta.large {
          padding: 1.25rem 2.5rem;
          font-size: 1.1rem;
        }
        
        .play-icon {
          font-size: 0.9rem;
        }
        
        .mercado-content {
          max-width: 1000px;
          margin: 0 auto;
          padding: 4rem 0;
          position: relative;
          z-index: 1;
        }
        
        .mercado-section {
          display: grid;
          grid-template-columns: 200px 1fr;
          gap: 3rem;
          margin-bottom: 5rem;
          align-items: center;
        }
        
        .mercado-section.reverse {
          grid-template-columns: 1fr 200px;
        }
        
        .mercado-section.reverse .section-visual {
          order: 2;
        }
        
        .visual-box {
          width: 200px;
          height: 200px;
          background: linear-gradient(135deg, rgba(204, 204, 255, 0.2), rgba(96, 130, 182, 0.2));
          border: 1px solid rgba(204, 204, 255, 0.3);
          display: flex;
          align-items: center;
          justify-content: center;
          animation: pulse 3s ease-in-out infinite;
        }
        
        .visual-box.alt {
          background: linear-gradient(135deg, rgba(96, 130, 182, 0.2), rgba(204, 204, 255, 0.2));
          border-color: rgba(96, 130, 182, 0.3);
        }
        
        .section-text h2 {
          font-family: 'Syne', sans-serif;
          font-size: 1.8rem;
          margin-bottom: 1rem;
          color: var(--lavender);
        }
        
        .section-text p {
          color: var(--gray);
          line-height: 1.8;
          font-size: 1.1rem;
        }
        
        .episodes-section {
          margin-bottom: 5rem;
        }
        
        .episodes-section h2 {
          font-family: 'Syne', sans-serif;
          font-size: 2rem;
          margin-bottom: 2rem;
          text-align: center;
          color: var(--lavender);
        }
        
        .episodes-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
          gap: 1.5rem;
        }
        
        .episode-card {
          background: rgba(204, 204, 255, 0.05);
          border: 1px solid rgba(204, 204, 255, 0.1);
          padding: 1.5rem;
          display: grid;
          grid-template-columns: auto 80px 1fr auto;
          gap: 1rem;
          align-items: center;
          transition: all 0.3s ease;
          animation: fadeInUp 0.5s ease var(--delay) both;
        }
        
        .episode-card:hover {
          border-color: var(--lavender);
          transform: translateX(10px);
        }
        
        .episode-number {
          font-family: 'Syne', sans-serif;
          font-size: 1.5rem;
          font-weight: 800;
          color: var(--lavender);
          opacity: 0.5;
        }
        
        .episode-thumb {
          width: 80px;
          height: 80px;
          background: rgba(204, 204, 255, 0.1);
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        .episode-info h3 {
          font-family: 'Syne', sans-serif;
          font-size: 1.1rem;
          margin-bottom: 0.25rem;
        }
        
        .episode-role {
          font-size: 0.8rem;
          color: var(--gray);
          display: block;
          margin-bottom: 0.5rem;
        }
        
        .episode-theme {
          font-size: 0.9rem;
          color: var(--lavender);
          font-style: italic;
        }
        
        .episode-play {
          width: 50px;
          height: 50px;
          background: var(--lavender);
          border: none;
          color: var(--dark);
          font-size: 1rem;
          cursor: pointer;
          transition: all 0.3s ease;
        }
        
        .episode-play:hover {
          background: var(--steel);
          color: var(--light);
        }
        
        .mercado-cta-section {
          text-align: center;
        }
        
        .mercado-cta-section p {
          color: var(--gray);
          margin-bottom: 1.5rem;
          font-size: 1.1rem;
        }
        
        /* Blog */
        .blog-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
          gap: 2rem;
          max-width: 1000px;
          margin: 0 auto;
          position: relative;
          z-index: 1;
        }
        
        .blog-card {
          background: rgba(255,255,255,0.03);
          border: 1px solid rgba(255,255,255,0.08);
          position: relative;
          overflow: hidden;
          transition: all 0.4s ease;
          animation: fadeInUp 0.6s ease var(--delay) both;
        }
        
        .blog-card:hover {
          border-color: var(--mint);
          transform: translateY(-5px);
        }
        
        .blog-card-accent {
          position: absolute;
          top: 0;
          left: 0;
          width: 4px;
          height: 100%;
          background: linear-gradient(to bottom, var(--mint), var(--lavender));
        }
        
        .blog-card-content {
          padding: 2rem 2rem 2rem 2.5rem;
        }
        
        .blog-category {
          font-size: 0.7rem;
          text-transform: uppercase;
          letter-spacing: 2px;
          color: var(--mint);
          margin-bottom: 1rem;
          display: block;
        }
        
        .blog-title {
          font-family: 'Syne', sans-serif;
          font-size: 1.4rem;
          font-weight: 600;
          margin-bottom: 1rem;
          line-height: 1.3;
        }
        
        .blog-excerpt {
          color: var(--gray);
          font-size: 0.9rem;
          line-height: 1.6;
          margin-bottom: 1.5rem;
        }
        
        .blog-footer {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        
        .blog-date {
          font-size: 0.8rem;
          color: var(--gray);
        }
        
        .blog-link {
          background: none;
          border: none;
          color: var(--mint);
          font-family: 'Space Grotesk', sans-serif;
          cursor: pointer;
          transition: transform 0.3s ease;
        }
        
        .blog-link:hover {
          transform: translateX(5px);
        }
        
        /* Blog Detail Modal */
        .blog-modal-overlay {
          position: fixed;
          inset: 0;
          background: rgba(0, 0, 0, 0.95);
          z-index: 2000;
          overflow-y: auto;
          animation: fadeIn 0.3s ease;
        }
        
        .blog-modal {
          min-height: 100vh;
          background: var(--dark);
          animation: slideUp 0.4s ease;
        }
        
        .blog-header-image {
          position: relative;
          width: 100%;
          height: 60vh;
          min-height: 400px;
          background: linear-gradient(135deg, var(--dark), var(--steel));
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        .blog-header-placeholder {
          opacity: 0.3;
        }
        
        .blog-header-overlay {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          padding: 4rem;
          background: linear-gradient(to top, var(--dark), transparent);
        }
        
        .blog-detail-category {
          font-size: 0.8rem;
          text-transform: uppercase;
          letter-spacing: 3px;
          color: var(--mint);
          margin-bottom: 1rem;
          display: block;
        }
        
        .blog-detail-title {
          font-family: 'Syne', sans-serif;
          font-size: clamp(2.5rem, 6vw, 4rem);
          font-weight: 800;
          line-height: 1.1;
          margin-bottom: 1rem;
          max-width: 800px;
        }
        
        .blog-detail-date {
          color: var(--gray);
          font-size: 0.95rem;
        }
        
        .blog-detail-content {
          padding: 4rem 2rem;
        }
        
        .blog-content-container {
          max-width: 750px;
          margin: 0 auto;
        }
        
        .blog-intro {
          font-size: 1.3rem;
          line-height: 1.7;
          color: var(--light);
          margin-bottom: 2.5rem;
          padding-bottom: 2.5rem;
          border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        
        .blog-body p {
          color: var(--gray);
          font-size: 1.1rem;
          line-height: 1.9;
          margin-bottom: 1.5rem;
        }
        
        .blog-body h2 {
          font-family: 'Syne', sans-serif;
          font-size: 1.8rem;
          color: var(--light);
          margin: 3rem 0 1.5rem;
        }
        
        .blog-body blockquote {
          margin: 2.5rem 0;
          padding: 2rem 2.5rem;
          border-left: 4px solid var(--mint);
          background: rgba(172, 225, 175, 0.05);
          font-size: 1.2rem;
          font-style: italic;
          color: var(--light);
          line-height: 1.7;
        }
        
        .blog-tags {
          display: flex;
          gap: 0.75rem;
          margin: 3rem 0;
          padding-top: 2rem;
          border-top: 1px solid rgba(255,255,255,0.1);
        }
        
        .tag {
          padding: 0.5rem 1rem;
          background: rgba(172, 225, 175, 0.1);
          border: 1px solid rgba(172, 225, 175, 0.2);
          color: var(--mint);
          font-size: 0.85rem;
        }
        
        .blog-share {
          display: flex;
          align-items: center;
          gap: 1.5rem;
          padding: 2rem 0;
        }
        
        .blog-share span {
          color: var(--gray);
        }
        
        .share-buttons {
          display: flex;
          gap: 0.75rem;
        }
        
        .share-btn {
          padding: 0.6rem 1.2rem;
          background: transparent;
          border: 1px solid var(--gray);
          color: var(--light);
          font-family: 'Space Grotesk', sans-serif;
          font-size: 0.85rem;
          cursor: pointer;
          transition: all 0.3s ease;
        }
        
        .share-btn:hover {
          border-color: var(--mint);
          color: var(--mint);
        }
        
        .blog-card {
          cursor: pointer;
        }
        
        /* Shop Page Styles */
        .shop-page {
          padding-bottom: 5rem;
        }
        
        .shop-categories {
          display: flex;
          justify-content: center;
          gap: 1rem;
          margin-bottom: 3rem;
          flex-wrap: wrap;
          position: relative;
          z-index: 1;
        }
        
        .category-btn {
          background: transparent;
          border: 1px solid var(--gray);
          color: var(--light);
          padding: 0.7rem 1.5rem;
          font-family: 'Space Grotesk', sans-serif;
          font-size: 0.9rem;
          cursor: pointer;
          transition: all 0.3s ease;
        }
        
        .category-btn:hover, .category-btn.active {
          border-color: var(--mint);
          color: var(--mint);
          background: rgba(172, 225, 175, 0.1);
        }
        
        /* Products Grid */
        .products-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
          gap: 2rem;
          max-width: 1200px;
          margin: 0 auto;
          position: relative;
          z-index: 1;
        }
        
        .product-card {
          background: rgba(255,255,255,0.02);
          border: 1px solid rgba(255,255,255,0.08);
          cursor: pointer;
          transition: all 0.4s ease;
          animation: fadeInUp 0.5s ease var(--delay) both;
          position: relative;
          overflow: hidden;
        }
        
        .product-card:hover {
          border-color: var(--accent);
          transform: translateY(-5px);
        }
        
        .product-card-image {
          aspect-ratio: 1;
          /* Fondo neutro: el degradado con el acento a full competía con el
             producto. El color ahora solo aparece en el marcador vacío. */
          background: #1c2322;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          overflow: hidden;
        }

        /* El giro llena la tarjeta, sea video, GIF o marcador */
        .product-media {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: grid;
          place-items: center;
          transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .product-media-empty {
          background:
            radial-gradient(115% 90% at 28% 16%,
              color-mix(in srgb, var(--accent) 38%, transparent) 0%,
              transparent 62%),
            linear-gradient(150deg, #29322f 0%, #171d1d 100%);
        }

        .product-card:hover .product-media { transform: scale(1.04); }

        @media (prefers-reduced-motion: reduce) {
          .product-media { transition: none; }
          .product-card:hover .product-media { transform: none; }
        }
        
        .sale-tag {
          position: absolute;
          top: 1rem;
          left: 1rem;
          background: #ff6b6b;
          color: white;
          padding: 0.3rem 0.75rem;
          font-size: 0.7rem;
          font-weight: 600;
          letter-spacing: 1px;
        }
        
        .low-stock-tag {
          position: absolute;
          bottom: 1rem;
          left: 1rem;
          background: rgba(0,0,0,0.7);
          color: var(--mint);
          padding: 0.3rem 0.75rem;
          font-size: 0.7rem;
        }
        
        .product-card-info {
          padding: 1.5rem;
        }
        
        .product-card-category {
          font-size: 0.7rem;
          text-transform: uppercase;
          letter-spacing: 2px;
          color: var(--gray);
        }
        
        .product-card-name {
          font-family: 'Syne', sans-serif;
          font-size: 1.1rem;
          margin: 0.5rem 0;
          line-height: 1.3;
        }
        
        .product-card-price {
          display: flex;
          align-items: baseline;
          gap: 0.5rem;
        }
        
        .product-card-price .current {
          font-size: 1.2rem;
          font-weight: 600;
          color: var(--mint);
        }
        
        .product-card-price .original {
          font-size: 0.9rem;
          color: var(--gray);
          text-decoration: line-through;
        }
        
        .product-card-price .currency {
          font-size: 0.8rem;
          color: var(--gray);
        }
        
        .product-card-overlay {
          position: absolute;
          inset: 0;
          background: rgba(172, 225, 175, 0.9);
          display: flex;
          align-items: center;
          justify-content: center;
          opacity: 0;
          transition: opacity 0.3s ease;
        }
        
        .product-card-overlay span {
          color: var(--dark);
          font-weight: 600;
          transform: translateY(10px);
          transition: transform 0.3s ease;
        }
        
        .product-card:hover .product-card-overlay {
          opacity: 1;
        }
        
        .product-card:hover .product-card-overlay span {
          transform: translateY(0);
        }
        
        /* Floating Cart Button */
        .floating-cart-btn {
          position: fixed;
          bottom: 2rem;
          right: 2rem;
          width: 60px;
          height: 60px;
          background: var(--mint);
          border: none;
          border-radius: 50%;
          color: var(--dark);
          cursor: pointer;
          z-index: 100;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 4px 20px rgba(172, 225, 175, 0.4);
          transition: all 0.3s ease;
        }
        
        .floating-cart-btn:hover {
          transform: scale(1.1);
          box-shadow: 0 6px 30px rgba(172, 225, 175, 0.5);
        }
        
        .cart-icon-wrapper {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        .cart-count {
          position: absolute;
          top: -8px;
          right: -8px;
          background: #ff6b6b;
          color: white;
          font-size: 0.65rem;
          font-weight: 600;
          min-width: 18px;
          height: 18px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        /* Mini Cart */
        .mini-cart-overlay {
          position: fixed;
          inset: 0;
          background: rgba(0,0,0,0.7);
          z-index: 2000;
          opacity: 0;
          pointer-events: none;
          transition: opacity 0.3s ease;
        }
        
        .mini-cart-overlay.open {
          opacity: 1;
          pointer-events: all;
        }
        
        .mini-cart {
          position: fixed;
          top: 0;
          right: 0;
          bottom: 0;
          width: 400px;
          max-width: 100%;
          background: var(--dark);
          border-left: 1px solid rgba(255,255,255,0.1);
          transform: translateX(100%);
          transition: transform 0.4s ease;
          display: flex;
          flex-direction: column;
        }
        
        .mini-cart.open {
          transform: translateX(0);
        }
        
        .mini-cart-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 1.5rem;
          border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        
        .mini-cart-header h3 {
          font-family: 'Syne', sans-serif;
          font-size: 1.3rem;
        }
        
        .cart-close {
          background: none;
          border: none;
          color: var(--gray);
          cursor: pointer;
          transition: color 0.3s ease;
        }
        
        .cart-close:hover {
          color: var(--light);
        }
        
        .cart-empty {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 1rem;
          padding: 2rem;
          text-align: center;
        }
        
        .cart-empty p {
          color: var(--gray);
        }
        
        .continue-btn {
          background: transparent;
          border: 1px solid var(--mint);
          color: var(--mint);
          padding: 0.75rem 1.5rem;
          font-family: 'Space Grotesk', sans-serif;
          cursor: pointer;
          transition: all 0.3s ease;
        }
        
        .continue-btn:hover {
          background: var(--mint);
          color: var(--dark);
        }
        
        .cart-items {
          flex: 1;
          overflow-y: auto;
          padding: 1rem;
        }
        
        .cart-item {
          display: grid;
          grid-template-columns: 70px 1fr auto;
          gap: 1rem;
          padding: 1rem;
          background: rgba(255,255,255,0.03);
          margin-bottom: 0.75rem;
          align-items: center;
        }
        
        .cart-item-image {
          width: 70px;
          height: 70px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        .cart-item-info h4 {
          font-size: 0.95rem;
          margin-bottom: 0.25rem;
        }
        
        .item-variant {
          font-size: 0.75rem;
          color: var(--gray);
          display: block;
        }
        
        .item-price {
          font-size: 0.9rem;
          color: var(--mint);
        }
        
        .cart-item-actions {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          gap: 0.5rem;
        }
        
        .quantity-controls {
          display: flex;
          align-items: center;
          gap: 0.5rem;
        }
        
        .quantity-controls button {
          width: 28px;
          height: 28px;
          background: rgba(255,255,255,0.1);
          border: none;
          color: var(--light);
          cursor: pointer;
          transition: background 0.3s ease;
        }
        
        .quantity-controls button:hover {
          background: var(--mint);
          color: var(--dark);
        }
        
        .quantity-controls span {
          min-width: 20px;
          text-align: center;
        }
        
        .remove-item {
          background: none;
          border: none;
          color: var(--gray);
          font-size: 1.2rem;
          cursor: pointer;
          transition: color 0.3s ease;
        }
        
        .remove-item:hover {
          color: #ff6b6b;
        }
        
        .cart-footer {
          padding: 1.5rem;
          border-top: 1px solid rgba(255,255,255,0.1);
        }
        
        .cart-total {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 1rem;
        }
        
        .total-amount {
          font-family: 'Syne', sans-serif;
          font-size: 1.5rem;
          font-weight: 700;
          color: var(--mint);
        }
        
        .checkout-btn {
          width: 100%;
          background: var(--mint);
          border: none;
          color: var(--dark);
          padding: 1rem 2rem;
          font-family: 'Space Grotesk', sans-serif;
          font-size: 1rem;
          font-weight: 600;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 0.5rem;
          transition: all 0.3s ease;
        }
        
        .checkout-btn:hover {
          background: var(--lavender);
        }
        
        /* Product Detail Modal */
        .product-modal-overlay {
          position: fixed;
          inset: 0;
          background: rgba(0,0,0,0.95);
          z-index: 2000;
          overflow-y: auto;
          animation: fadeIn 0.3s ease;
        }
        
        .product-modal {
          min-height: 100vh;
          background: var(--dark);
          animation: slideUp 0.4s ease;
        }
        
        .product-modal-content {
          display: grid;
          grid-template-columns: 1fr 1fr;
          max-width: 1400px;
          margin: 0 auto;
        }
        
        .product-gallery {
          position: sticky;
          top: 0;
          height: 100vh;
          display: flex;
          flex-direction: column;
        }
        
        .product-main-image {
          flex: 1;
          background: linear-gradient(135deg, rgba(0,0,0,0.5), var(--accent));
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
        }
        
        .product-image-placeholder {
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        .sale-badge {
          position: absolute;
          top: 2rem;
          left: 2rem;
          background: #ff6b6b;
          color: white;
          padding: 0.5rem 1rem;
          font-size: 0.8rem;
          font-weight: 600;
          letter-spacing: 1px;
        }
        
        .product-thumbs {
          display: flex;
          gap: 0.5rem;
          padding: 1rem;
          background: rgba(0,0,0,0.3);
          justify-content: center;
        }
        
        .product-thumb {
          width: 70px;
          height: 70px;
          background: rgba(255,255,255,0.05);
          border: 2px solid transparent;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.3s ease;
        }
        
        .product-thumb:hover, .product-thumb.active {
          border-color: var(--accent);
        }
        
        .product-info {
          padding: 4rem 3rem;
        }
        
        .product-category-tag {
          font-size: 0.75rem;
          text-transform: uppercase;
          letter-spacing: 2px;
          color: var(--mint);
        }
        
        .product-title {
          font-family: 'Syne', sans-serif;
          font-size: 2.5rem;
          font-weight: 700;
          margin: 0.5rem 0 1.5rem;
          line-height: 1.2;
        }
        
        .product-price-block {
          display: flex;
          align-items: baseline;
          gap: 1rem;
          margin-bottom: 1.5rem;
        }
        
        .price-current {
          font-family: 'Syne', sans-serif;
          font-size: 2rem;
          font-weight: 700;
          color: var(--mint);
        }
        
        .price-original {
          font-size: 1.2rem;
          color: var(--gray);
          text-decoration: line-through;
        }
        
        .product-short-desc {
          color: var(--gray);
          line-height: 1.7;
          margin-bottom: 2rem;
        }
        
        .product-option {
          margin-bottom: 1.5rem;
        }
        
        .product-option label {
          display: block;
          font-size: 0.85rem;
          color: var(--gray);
          margin-bottom: 0.75rem;
          text-transform: uppercase;
          letter-spacing: 1px;
        }
        
        .size-options {
          display: flex;
          gap: 0.5rem;
        }
        
        .size-btn {
          min-width: 50px;
          height: 50px;
          background: transparent;
          border: 1px solid var(--gray);
          color: var(--light);
          font-family: 'Space Grotesk', sans-serif;
          cursor: pointer;
          transition: all 0.3s ease;
        }
        
        .size-btn:hover, .size-btn.active {
          border-color: var(--mint);
          color: var(--mint);
        }
        
        .color-options-product {
          display: flex;
          gap: 0.5rem;
        }
        
        .color-option-btn {
          padding: 0.6rem 1.2rem;
          background: transparent;
          border: 1px solid var(--gray);
          color: var(--light);
          font-family: 'Space Grotesk', sans-serif;
          font-size: 0.85rem;
          cursor: pointer;
          transition: all 0.3s ease;
        }
        
        .color-option-btn:hover, .color-option-btn.active {
          border-color: var(--mint);
          color: var(--mint);
        }
        
        .quantity-selector {
          display: flex;
          align-items: center;
          gap: 1rem;
          width: fit-content;
        }
        
        .quantity-selector button {
          width: 45px;
          height: 45px;
          background: transparent;
          border: 1px solid var(--gray);
          color: var(--light);
          font-size: 1.2rem;
          cursor: pointer;
          transition: all 0.3s ease;
        }
        
        .quantity-selector button:hover {
          border-color: var(--mint);
          color: var(--mint);
        }
        
        .quantity-selector span {
          font-size: 1.1rem;
          min-width: 30px;
          text-align: center;
        }
        
        .add-to-cart-btn {
          width: 100%;
          background: var(--mint);
          border: none;
          color: var(--dark);
          padding: 1.2rem 2rem;
          font-family: 'Space Grotesk', sans-serif;
          font-size: 1.1rem;
          font-weight: 600;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 0.75rem;
          margin: 2rem 0;
          transition: all 0.3s ease;
        }
        
        .add-to-cart-btn:hover {
          background: var(--lavender);
        }
        
        .add-to-cart-btn.added {
          background: var(--steel);
          color: var(--light);
        }
        
        .product-details-section {
          border-top: 1px solid rgba(255,255,255,0.1);
          padding-top: 2rem;
          margin-top: 1rem;
        }
        
        .detail-block {
          margin-bottom: 1.5rem;
        }
        
        .detail-block h4 {
          font-size: 0.9rem;
          color: var(--light);
          margin-bottom: 0.5rem;
        }
        
        .detail-block p {
          color: var(--gray);
          line-height: 1.6;
          font-size: 0.95rem;
        }
        
        .product-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 0.5rem;
          margin-top: 2rem;
        }
        
        .product-tag {
          padding: 0.4rem 0.8rem;
          background: rgba(255,255,255,0.05);
          color: var(--gray);
          font-size: 0.8rem;
        }
        
        /* Related Products */
        .related-products {
          border-top: 1px solid rgba(255,255,255,0.1);
          padding: 3rem;
          background: rgba(0,0,0,0.2);
        }
        
        .related-products h3 {
          font-family: 'Syne', sans-serif;
          font-size: 1.5rem;
          margin-bottom: 2rem;
          text-align: center;
        }
        
        .related-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 1.5rem;
          max-width: 900px;
          margin: 0 auto;
        }
        
        .related-item {
          text-align: center;
          padding: 1.5rem;
          background: rgba(255,255,255,0.03);
          border: 1px solid rgba(255,255,255,0.08);
          cursor: pointer;
          transition: all 0.3s ease;
        }
        
        .related-item:hover {
          border-color: var(--accent);
        }
        
        .related-image {
          width: 100%;
          aspect-ratio: 1;
          background: linear-gradient(135deg, rgba(0,0,0,0.3), var(--accent));
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 1rem;
        }
        
        .related-name {
          display: block;
          font-size: 0.9rem;
          margin-bottom: 0.5rem;
        }
        
        .related-price {
          color: var(--mint);
          font-weight: 600;
        }
        
        /* Shop link in nav */
        .shop-link {
          display: flex;
          align-items: center;
          gap: 0.5rem;
        }
        
        /* WooCommerce Note */
        .woo-note {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 0.5rem;
          margin-top: 3rem;
          color: var(--gray);
          font-size: 0.85rem;
          position: relative;
          z-index: 1;
        }
        
        /* Promo Popup Styles */
        .promo-popup-overlay {
          position: fixed;
          inset: 0;
          background: rgba(0, 0, 0, 0);
          z-index: 3000;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 2rem;
          opacity: 0;
          transition: all 0.4s ease;
        }
        
        .promo-popup-overlay.visible {
          background: rgba(0, 0, 0, 0.85);
          opacity: 1;
        }
        
        .promo-popup {
          background: var(--dark);
          max-width: 900px;
          width: 100%;
          max-height: 90vh;
          overflow: hidden;
          position: relative;
          border: 1px solid rgba(172, 225, 175, 0.3);
          box-shadow: 0 0 60px rgba(172, 225, 175, 0.2);
          transform: scale(0.8) translateY(50px);
          opacity: 0;
          transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        
        .promo-popup.visible {
          transform: scale(1) translateY(0);
          opacity: 1;
        }
        
        /* Animated Background Elements */
        .promo-bg-elements {
          position: absolute;
          inset: 0;
          pointer-events: none;
          overflow: hidden;
        }
        
        .promo-star {
          position: absolute;
          animation: promoFloat 4s ease-in-out infinite;
        }
        
        .promo-star.star-1 {
          top: 10%;
          left: 5%;
          animation-delay: 0s;
        }
        
        .promo-star.star-2 {
          top: 20%;
          right: 10%;
          animation-delay: -1s;
        }
        
        .promo-star.star-3 {
          bottom: 15%;
          left: 8%;
          animation-delay: -2s;
        }
        
        .promo-star.star-4 {
          bottom: 25%;
          right: 5%;
          animation-delay: -3s;
        }
        
        @keyframes promoFloat {
          0%, 100% {
            transform: translateY(0) rotate(0deg);
            opacity: 0.6;
          }
          50% {
            transform: translateY(-15px) rotate(180deg);
            opacity: 1;
          }
        }
        
        .promo-circle {
          position: absolute;
          border-radius: 50%;
          animation: promoExpand 3s ease-in-out infinite;
        }
        
        .promo-circle.circle-1 {
          width: 300px;
          height: 300px;
          background: radial-gradient(circle, rgba(172, 225, 175, 0.1), transparent);
          top: -100px;
          right: -100px;
          animation-delay: 0s;
        }
        
        .promo-circle.circle-2 {
          width: 200px;
          height: 200px;
          background: radial-gradient(circle, rgba(204, 204, 255, 0.1), transparent);
          bottom: -50px;
          left: -50px;
          animation-delay: -1.5s;
        }
        
        .promo-circle.circle-3 {
          width: 150px;
          height: 150px;
          background: radial-gradient(circle, rgba(96, 130, 182, 0.1), transparent);
          top: 50%;
          left: 30%;
          animation-delay: -0.75s;
        }
        
        @keyframes promoExpand {
          0%, 100% {
            transform: scale(1);
            opacity: 0.5;
          }
          50% {
            transform: scale(1.2);
            opacity: 0.8;
          }
        }
        
        /* Close Button */
        .promo-close {
          position: absolute;
          top: 1rem;
          right: 1rem;
          background: rgba(255, 255, 255, 0.1);
          border: none;
          color: var(--light);
          width: 45px;
          height: 45px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          z-index: 10;
          transition: all 0.3s ease;
        }
        
        .promo-close:hover {
          background: var(--mint);
          color: var(--dark);
          transform: rotate(90deg);
        }
        
        /* Promo Content */
        .promo-content {
          display: grid;
          grid-template-columns: 1fr 1fr;
          min-height: 500px;
        }
        
        /* Image Section */
        .promo-image-section {
          position: relative;
          background: linear-gradient(135deg, rgba(172, 225, 175, 0.2), rgba(96, 130, 182, 0.2));
          overflow: hidden;
        }
        
        .promo-image-container {
          width: 100%;
          height: 100%;
          position: relative;
          z-index: 1;
        }
        
        .promo-image-placeholder {
          width: 100%;
          height: 100%;
          min-height: 500px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 1rem;
          color: var(--gray);
          background: linear-gradient(135deg, rgba(0,0,0,0.3), rgba(172, 225, 175, 0.1));
        }
        
        .promo-image-placeholder span {
          font-size: 1rem;
        }
        
        .image-size-hint {
          font-size: 0.75rem !important;
          opacity: 0.5;
        }
        
        .promo-image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        
        .promo-image-decoration {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: 150px;
          background: linear-gradient(to top, var(--dark), transparent);
          z-index: 2;
        }
        
        /* Text Section */
        .promo-text-section {
          padding: 3rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
          position: relative;
          z-index: 1;
        }
        
        .promo-badge {
          display: inline-flex;
          align-items: center;
          padding: 0.5rem 1rem;
          background: linear-gradient(90deg, var(--mint), var(--lavender));
          width: fit-content;
          margin-bottom: 1.5rem;
          position: relative;
          overflow: hidden;
        }
        
        .badge-text {
          color: var(--dark);
          font-weight: 600;
          font-size: 0.85rem;
          text-transform: uppercase;
          letter-spacing: 2px;
          position: relative;
          z-index: 1;
        }
        
        .badge-shine {
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
          animation: badgeShine 3s ease-in-out infinite;
        }
        
        @keyframes badgeShine {
          0% { left: -100%; }
          50%, 100% { left: 100%; }
        }
        
        .promo-title {
          font-family: 'Syne', sans-serif;
          font-size: 2.5rem;
          font-weight: 800;
          line-height: 1.1;
          margin-bottom: 1rem;
        }
        
        .title-line {
          display: block;
          color: var(--light);
        }
        
        .title-highlight {
          display: block;
          font-size: 4rem;
          background: linear-gradient(90deg, var(--mint), var(--lavender));
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          animation: titlePulse 2s ease-in-out infinite;
        }
        
        @keyframes titlePulse {
          0%, 100% { transform: scale(1); }
          50% { transform: scale(1.02); }
        }
        
        .promo-description {
          color: var(--gray);
          line-height: 1.7;
          margin-bottom: 1.5rem;
          font-size: 1rem;
        }
        
        /* Countdown */
        .promo-countdown {
          margin-bottom: 1.5rem;
        }
        
        .countdown-label {
          display: block;
          font-size: 0.8rem;
          color: var(--gray);
          margin-bottom: 0.5rem;
          text-transform: uppercase;
          letter-spacing: 1px;
        }
        
        .countdown-timer {
          display: flex;
          align-items: center;
          gap: 0.5rem;
        }
        
        .countdown-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          background: rgba(255,255,255,0.05);
          padding: 0.75rem 1rem;
          min-width: 60px;
        }
        
        .countdown-number {
          font-family: 'Syne', sans-serif;
          font-size: 1.8rem;
          font-weight: 700;
          color: var(--mint);
          animation: countPulse 1s ease-in-out infinite;
        }
        
        @keyframes countPulse {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.7; }
        }
        
        .countdown-unit {
          font-size: 0.7rem;
          color: var(--gray);
          text-transform: uppercase;
        }
        
        .countdown-separator {
          font-size: 1.5rem;
          color: var(--gray);
          animation: countPulse 1s ease-in-out infinite;
        }
        
        /* Promo Code */
        .promo-code {
          margin-bottom: 1.5rem;
        }
        
        .code-label {
          display: block;
          font-size: 0.8rem;
          color: var(--gray);
          margin-bottom: 0.5rem;
        }
        
        .code-box {
          display: flex;
          border: 2px dashed var(--mint);
          background: rgba(172, 225, 175, 0.1);
          overflow: hidden;
        }
        
        .code-text {
          flex: 1;
          padding: 0.75rem 1rem;
          font-family: 'Space Grotesk', monospace;
          font-size: 1.3rem;
          font-weight: 700;
          color: var(--mint);
          letter-spacing: 3px;
        }
        
        .copy-code-btn {
          background: var(--mint);
          border: none;
          color: var(--dark);
          padding: 0.75rem 1.25rem;
          font-family: 'Space Grotesk', sans-serif;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.3s ease;
        }
        
        .copy-code-btn:hover {
          background: var(--lavender);
        }
        
        /* CTA Buttons */
        .promo-cta {
          width: 100%;
          background: var(--mint);
          border: none;
          color: var(--dark);
          padding: 1.1rem 2rem;
          font-family: 'Space Grotesk', sans-serif;
          font-size: 1rem;
          font-weight: 600;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 0.75rem;
          margin-bottom: 1rem;
          transition: all 0.3s ease;
          position: relative;
          overflow: hidden;
        }
        
        .promo-cta::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
          animation: ctaShine 2s ease-in-out infinite;
        }
        
        @keyframes ctaShine {
          0% { left: -100%; }
          50%, 100% { left: 100%; }
        }
        
        .promo-cta:hover {
          background: var(--lavender);
          transform: scale(1.02);
        }
        
        .promo-cta .cta-arrow {
          transition: transform 0.3s ease;
        }
        
        .promo-cta:hover .cta-arrow {
          transform: translateX(5px);
        }
        
        .promo-skip {
          background: none;
          border: none;
          color: var(--gray);
          font-family: 'Space Grotesk', sans-serif;
          font-size: 0.85rem;
          cursor: pointer;
          text-align: center;
          padding: 0.5rem;
          transition: color 0.3s ease;
        }
        
        .promo-skip:hover {
          color: var(--light);
        }
        
        /* Promo Popup Responsive */
        @media (max-width: 768px) {
          .promo-popup {
            max-height: 95vh;
            overflow-y: auto;
          }
          
          .promo-content {
            grid-template-columns: 1fr;
          }
          
          .promo-image-section {
            min-height: 200px;
          }
          
          .promo-image-placeholder {
            min-height: 200px;
          }
          
          .promo-text-section {
            padding: 2rem;
          }
          
          .promo-title {
            font-size: 1.8rem;
          }
          
          .title-highlight {
            font-size: 2.8rem;
          }
          
          .countdown-item {
            padding: 0.5rem 0.75rem;
            min-width: 50px;
          }
          
          .countdown-number {
            font-size: 1.4rem;
          }
          
          .promo-close {
            background: rgba(0,0,0,0.5);
          }
        }
        
        /* Guestbook - New Centered Layout */
        .guestbook-page {
          padding-bottom: 5rem;
        }
        
        .drawing-section-centered {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 2rem;
          margin-bottom: 5rem;
          position: relative;
          z-index: 1;
        }
        
        .canvas-wrapper {
          perspective: 1000px;
        }
        
        .canvas-container-large {
          position: relative;
          background: var(--note-color);
          padding: 20px;
          box-shadow: 
            8px 8px 0 rgba(0,0,0,0.1),
            15px 15px 30px rgba(0,0,0,0.3);
          transform: rotate(-1deg);
          transition: transform 0.4s ease, box-shadow 0.4s ease;
        }
        
        .canvas-container-large:hover {
          transform: rotate(0deg) scale(1.02);
          box-shadow: 
            0 0 0 rgba(0,0,0,0),
            20px 20px 40px rgba(0,0,0,0.4);
        }
        
        .canvas-container-large canvas {
          display: block;
          cursor: crosshair;
          width: 450px;
          height: 450px;
        }
        
        .canvas-tape-large {
          position: absolute;
          top: -20px;
          left: 50%;
          transform: translateX(-50%) rotate(2deg);
          width: 120px;
          height: 40px;
          background: linear-gradient(135deg, rgba(255,255,255,0.6), rgba(255,255,255,0.3));
          box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .canvas-shadow {
          position: absolute;
          bottom: -10px;
          left: 10px;
          right: -10px;
          height: 20px;
          background: linear-gradient(to bottom, rgba(0,0,0,0.1), transparent);
          filter: blur(5px);
          z-index: -1;
        }
        
        .drawing-controls-centered {
          display: flex;
          flex-direction: column;
          gap: 1.5rem;
          max-width: 500px;
          width: 100%;
        }
        
        .controls-row {
          display: flex;
          justify-content: center;
          gap: 2rem;
          flex-wrap: wrap;
        }
        
        .color-picker, .note-color-picker {
          display: flex;
          align-items: center;
          gap: 0.75rem;
        }
        
        .color-picker span, .note-color-picker span {
          font-size: 0.85rem;
          color: var(--gray);
        }
        
        .color-options {
          display: flex;
          gap: 0.5rem;
        }
        
        .color-btn {
          width: 32px;
          height: 32px;
          border: 3px solid transparent;
          border-radius: 50%;
          cursor: pointer;
          transition: all 0.3s ease;
        }
        
        .color-btn:hover {
          transform: scale(1.15);
        }
        
        .color-btn.active {
          transform: scale(1.2);
          border-color: white;
          box-shadow: 0 0 10px rgba(255,255,255,0.3);
        }
        
        .brush-size-wrapper {
          display: flex;
          align-items: center;
          gap: 0.75rem;
        }
        
        .brush-size-wrapper span {
          font-size: 0.85rem;
          color: var(--gray);
        }
        
        .brush-size-wrapper input {
          width: 120px;
          accent-color: var(--mint);
        }
        
        .canvas-actions {
          display: flex;
          gap: 1rem;
        }
        
        .action-btn {
          padding: 0.9rem 2rem;
          font-family: 'Space Grotesk', sans-serif;
          font-size: 0.95rem;
          cursor: pointer;
          transition: all 0.3s ease;
        }
        
        .action-btn.clear {
          background: transparent;
          border: 2px solid var(--gray);
          color: var(--light);
        }
        
        .action-btn.clear:hover {
          border-color: var(--light);
          background: rgba(255,255,255,0.05);
        }
        
        .action-btn.submit {
          background: var(--mint);
          border: 2px solid var(--mint);
          color: var(--dark);
          font-weight: 600;
        }
        
        .action-btn.submit:hover {
          background: var(--lavender);
          border-color: var(--lavender);
        }
        
        .submit-feedback {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 0.75rem;
          color: var(--mint);
          font-size: 1.1rem;
          animation: fadeInUp 0.5s ease;
        }
        
        /* Notes Section */
        .notes-section {
          position: relative;
          z-index: 1;
          max-width: 1200px;
          margin: 0 auto;
        }
        
        .notes-section-header {
          display: flex;
          align-items: center;
          gap: 2rem;
          margin-bottom: 3rem;
        }
        
        .notes-section-header h2 {
          font-family: 'Syne', sans-serif;
          font-size: 1.5rem;
          color: var(--gray);
          white-space: nowrap;
        }
        
        .section-line {
          flex: 1;
          height: 1px;
          background: linear-gradient(90deg, transparent, var(--gray), transparent);
        }
        
        .notes-wall-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
          gap: 2rem;
          justify-items: center;
        }
        
        .sticky-note {
          width: 160px;
          height: 160px;
          padding: 12px;
          position: relative;
          transform: rotate(var(--rotation));
          box-shadow: 
            4px 4px 0 rgba(0,0,0,0.1),
            8px 8px 20px rgba(0,0,0,0.2);
          animation: fadeInUp 0.5s ease var(--delay) both;
          transition: all 0.3s ease;
          cursor: pointer;
        }
        
        .sticky-note:hover {
          transform: rotate(0deg) scale(1.15) translateY(-10px);
          z-index: 10;
          box-shadow: 
            0 0 0 rgba(0,0,0,0),
            15px 15px 30px rgba(0,0,0,0.3);
        }
        
        .sticky-note img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        
        .placeholder-note {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          background: repeating-linear-gradient(
            0deg,
            transparent,
            transparent 28px,
            rgba(0,0,0,0.03) 28px,
            rgba(0,0,0,0.03) 29px
          );
        }
        
        .note-tape {
          position: absolute;
          top: -12px;
          left: 50%;
          transform: translateX(-50%) rotate(-3deg);
          width: 60px;
          height: 24px;
          background: linear-gradient(135deg, rgba(255,255,255,0.5), rgba(255,255,255,0.3));
        }
        
        /* Contact */
        .contact-content {
          max-width: 800px;
          margin: 0 auto;
          display: flex;
          flex-direction: column;
          gap: 4rem;
          position: relative;
          z-index: 1;
        }
        
        .newsletter-section {
          text-align: center;
        }
        
        .newsletter-form {
          max-width: 500px;
          margin: 0 auto;
        }
        
        .input-wrapper {
          display: flex;
          border: 2px solid var(--gray);
          transition: border-color 0.3s ease;
        }
        
        .input-wrapper:focus-within {
          border-color: var(--mint);
        }
        
        .input-wrapper input {
          flex: 1;
          background: transparent;
          border: none;
          padding: 1rem 1.5rem;
          color: var(--light);
          font-family: 'Space Grotesk', sans-serif;
          font-size: 1rem;
          outline: none;
        }
        
        .input-wrapper input::placeholder {
          color: var(--gray);
        }
        
        .input-wrapper button {
          background: var(--mint);
          border: none;
          color: var(--dark);
          padding: 1rem 1.5rem;
          font-family: 'Space Grotesk', sans-serif;
          font-weight: 600;
          cursor: pointer;
          display: flex;
          align-items: center;
          gap: 0.5rem;
          transition: background 0.3s ease;
        }
        
        .input-wrapper button:hover {
          background: var(--lavender);
        }
        
        .subscribed-message {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 1rem;
          animation: fadeInUp 0.5s ease;
        }
        
        .social-section h3 {
          font-family: 'Syne', sans-serif;
          font-size: 1.3rem;
          margin-bottom: 1.5rem;
          color: var(--gray);
        }
        
        .social-links {
          display: flex;
          flex-direction: column;
          gap: 0.5rem;
        }
        
        .social-link {
          display: flex;
          align-items: center;
          padding: 1rem 1.5rem;
          background: rgba(255,255,255,0.03);
          border: 1px solid rgba(255,255,255,0.08);
          color: var(--light);
          text-decoration: none;
          transition: all 0.3s ease;
          animation: fadeInUp 0.5s ease var(--delay) both;
        }
        
        .social-link:hover {
          border-color: var(--mint);
          background: rgba(172, 225, 175, 0.1);
        }
        
        .social-name {
          font-weight: 600;
          min-width: 100px;
        }
        
        .social-handle {
          color: var(--gray);
          flex: 1;
        }
        
        .social-arrow {
          color: var(--mint);
          transition: transform 0.3s ease;
        }
        
        .social-link:hover .social-arrow {
          transform: translateX(5px);
        }
        
        /* Footer */
        .footer {
          padding: 2rem 3rem;
          border-top: 1px solid rgba(255,255,255,0.08);
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 0.85rem;
          color: var(--gray);
          position: relative;
          z-index: 1;
        }
        
        .footer-tagline {
          display: flex;
          align-items: center;
          gap: 0.5rem;
        }
        
        /* Responsive */
        @media (max-width: 1024px) {
          .modal-sections-grid {
            grid-template-columns: 1fr;
            gap: 2rem;
          }
          
          .modal-header-full {
            flex-direction: column;
            gap: 2rem;
          }
          
          .modal-meta-inline {
            width: 100%;
            justify-content: flex-start;
          }
          
          .mercado-section, .mercado-section.reverse {
            grid-template-columns: 1fr;
            text-align: center;
          }
          
          .mercado-section .section-visual,
          .mercado-section.reverse .section-visual {
            order: 0;
            justify-self: center;
          }
          
          .gallery-fullwidth {
            height: 50vh;
            min-height: 350px;
          }
          
          .blog-header-overlay {
            padding: 2rem;
          }
          
          .product-modal-content {
            grid-template-columns: 1fr;
          }
          
          .product-gallery {
            position: relative;
            height: 50vh;
            min-height: 400px;
          }
          
          .product-info {
            padding: 2rem;
          }
          
          .related-grid {
            grid-template-columns: repeat(2, 1fr);
          }
        }
        
        @media (max-width: 900px) {
          .episode-card {
            grid-template-columns: auto 1fr auto;
          }
          
          .episode-thumb {
            display: none;
          }
          
          .canvas-container-large canvas {
            width: 350px;
            height: 350px;
          }
          
          .controls-row {
            flex-direction: column;
            align-items: center;
            gap: 1rem;
          }
        }
        
        @media (max-width: 768px) {
          .nav {
            padding: 1rem 1.5rem;
          }
          
          .menu-toggle {
            display: flex;
          }
          
          .nav-links {
            position: fixed;
            top: 70px;
            left: 0;
            right: 0;
            background: rgba(35, 43, 43, 0.98);
            flex-direction: column;
            padding: 2rem;
            gap: 1rem;
            transform: translateY(-100%);
            opacity: 0;
            transition: all 0.4s ease;
            pointer-events: none;
          }
          
          .nav-links.open {
            transform: translateY(0);
            opacity: 1;
            pointer-events: all;
          }
          
          .mercado-link {
            text-align: center;
            justify-content: center;
          }
          
          .page {
            padding: 100px 1.5rem 2rem;
          }
          
          .hero-title {
            letter-spacing: 0;
          }
          
          .blog-grid {
            grid-template-columns: 1fr;
          }
          
          .input-wrapper {
            flex-direction: column;
          }
          
          .input-wrapper button {
            justify-content: center;
          }
          
          .canvas-container-large {
            padding: 15px;
          }
          
          .canvas-container-large canvas {
            width: 280px;
            height: 280px;
          }
          
          .canvas-tape-large {
            width: 80px;
            height: 30px;
            top: -15px;
          }
          
          .sticky-note {
            width: 130px;
            height: 130px;
          }
          
          .notes-wall-grid {
            grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
            gap: 1.5rem;
          }
          
          .notes-section-header {
            flex-direction: column;
            gap: 1rem;
          }
          
          .notes-section-header h2 {
            order: -1;
          }
          
          .section-line {
            width: 60px;
            flex: none;
          }
          
          .blog-popup {
            bottom: 1rem;
            right: 1rem;
            left: 1rem;
            width: auto;
          }
          
          .footer {
            flex-direction: column;
            gap: 1rem;
            text-align: center;
          }
          
          .gallery-fullwidth {
            height: 40vh;
            min-height: 280px;
          }
          
          .gallery-nav {
            width: 45px;
            height: 45px;
            font-size: 1.2rem;
          }
          
          .gallery-nav.prev { left: 1rem; }
          .gallery-nav.next { right: 1rem; }
          
          .gallery-thumbs-strip {
            padding: 0.75rem 1rem;
            justify-content: flex-start;
          }
          
          .thumb-strip {
            width: 60px;
            height: 45px;
          }
          
          .modal-info-fullwidth {
            padding: 2rem 1.5rem;
          }
          
          .modal-title-full {
            font-size: 1.8rem;
          }
          
          .modal-close-float {
            top: 1rem;
            right: 1rem;
            width: 40px;
            height: 40px;
          }
          
          .blog-header-image {
            height: 45vh;
            min-height: 300px;
          }
          
          .blog-detail-title {
            font-size: 1.8rem;
          }
          
          .blog-detail-content {
            padding: 2rem 1.5rem;
          }
          
          .blog-body p {
            font-size: 1rem;
          }
          
          .blog-intro {
            font-size: 1.1rem;
          }
          
          .blog-share {
            flex-direction: column;
            align-items: flex-start;
            gap: 1rem;
          }
          
          .share-buttons {
            flex-wrap: wrap;
          }
          
          .products-grid {
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 1rem;
          }
          
          .product-card-name {
            font-size: 0.95rem;
          }
          
          .mini-cart {
            width: 100%;
          }
          
          .floating-cart-btn {
            width: 50px;
            height: 50px;
            bottom: 1.5rem;
            right: 1.5rem;
          }
          
          .product-title {
            font-size: 1.8rem;
          }
          
          .product-gallery {
            height: 40vh;
            min-height: 300px;
          }
          
          .related-grid {
            grid-template-columns: 1fr;
          }
          
          .related-products {
            padding: 2rem 1.5rem;
          }
        }

        /* ===========================================
           Añadidos del tema WordPress (el mockup original solo mostraba
           marcadores de color; estas reglas cubren el caso de que ya
           haya una imagen real subida en el admin de WordPress).
           =========================================== */
        .gallery-img-full,
        .blog-header-img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .mosaic-empty {
          grid-column: 1 / -1;
          text-align: center;
          color: var(--gray);
          font-family: 'Space Grotesk', sans-serif;
          padding: 4rem 1.5rem;
        }