/* Fuentes autohospedadas (antes cargadas desde fonts.googleapis.com/fonts.gstatic.com).
     Solo subconjunto "latin": cubre todos los caracteres del español (incl. á é í ó ú ñ ü ¿ ¡). */
  @font-face {
    font-family: 'Fraunces';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/fraunces-400i.woff2') format('woff2');
  }

  @font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('assets/fonts/fraunces-300.woff2') format('woff2');
  }

  @font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('assets/fonts/fraunces-500.woff2') format('woff2');
  }

  @font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('assets/fonts/fraunces-600.woff2') format('woff2');
  }

  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/inter-400.woff2') format('woff2');
  }

  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('assets/fonts/inter-500.woff2') format('woff2');
  }

  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('assets/fonts/inter-600.woff2') format('woff2');
  }

  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('assets/fonts/inter-700.woff2') format('woff2');
  }

  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('assets/fonts/poppins-700.woff2') format('woff2');
  }

  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('assets/fonts/poppins-800.woff2') format('woff2');
  }

  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('assets/fonts/poppins-900.woff2') format('woff2');
  }

  @font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('assets/fonts/space-grotesk-500.woff2') format('woff2');
  }

  @font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('assets/fonts/space-grotesk-700.woff2') format('woff2');
  }

  :root{
    --black: #0a0a0a;
    --near-black: #141414;
    --card: #1b1b1b;
    --white: #fafafa;
    --grey: #8a8a8a;
    --line: #2a2a2a;
    --lime: #d4ff3f;
    --font-serif: 'Fraunces', 'Georgia', serif;
    --type-display: clamp(3.2rem, 11vw, 9.5rem);
    --type-display-2: clamp(2.2rem, 6vw, 4.8rem);
    /* Escala tipográfica cerrada: un solo tamaño por nivel, usado en todo el
       sitio. Antes cada sección tenía su propio clamp() a medida (9 tamaños
       distintos), lo que hacía que la web se viera recargada aunque el texto
       fuera poco. --type-h1 = título de página, --type-h2 = título de sección. */
    --type-h1: clamp(2rem, 5vw, 3.4rem);
    --type-h2: clamp(1.8rem, 4vw, 2.8rem);
    --header-h: 97px;
  }

  *{margin:0;padding:0;box-sizing:border-box;}

  html{scroll-behavior:smooth;}

  body{
    font-family:'Inter', -apple-system, sans-serif;
    background:var(--black);
    color:var(--white);
    -webkit-font-smoothing:antialiased;
  }

  h1,h2,h3,.display{
    font-family:'Space Grotesk', 'Archivo', sans-serif;
    letter-spacing:-0.02em;
    text-transform:uppercase;
    font-weight:700;
  }

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

  /* ===== HEADER ===== */
  header{
    position:sticky; top:0; z-index:100;
    background:var(--black);
    color:var(--white);
    padding:18px 32px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid var(--line);
  }
  .header-left, .header-right{
    display:flex; align-items:center; gap:24px;
    flex:1;
  }
  .header-right{justify-content:flex-end;}
  .logo-mark{
    height:60px;
    display:flex;
    align-items:center;
  }
  .logo-mark img{height:100%;}
  nav{display:flex; gap:32px;}
  /* Centra el nav (Marca/Tienda/Comunidad) en todo el ancho del header, no solo
     dentro de .header-left -- header ya es position:sticky, así que sirve de
     referencia para el position:absolute. No afecta al desplegable móvil
     (.mobile-menu-dropdown), que tiene su propio position:absolute más específico. */
  nav:not(.mobile-menu-dropdown){
    position:absolute; left:50%; top:50%;
    transform:translate(-50%, -50%);
  }
  nav a{
    font-size:13px;
    font-weight:600;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:#aaa;
    transition:color .2s;
    position:relative;
    padding-bottom:4px;
  }
  nav a:hover{color:var(--white);}
  nav a::after{
    content:'';
    position:absolute; left:0; bottom:0;
    width:0; height:2px;
    background:var(--white);
    transition:width .25s;
  }
  nav a:hover::after{width:100%;}
  nav a.active{color:var(--white);}
  nav a.active::after{width:100%;}

  /* Menú desplegable de Marca/Shop/Comunidad para móvil (nav de arriba se oculta
     por debajo de 900px, ver media query) — botón hamburguesa junto al logo. */
  .mobile-menu-toggle{
    display:none;
    flex-direction:column; justify-content:center; gap:5px;
    width:32px; height:32px;
    padding:0;
    border:none; background:none;
    cursor:pointer;
  }
  .mobile-menu-toggle span{
    display:block; width:100%; height:2px;
    background:var(--white);
    transition:transform .25s, opacity .25s;
  }
  header.menu-open .mobile-menu-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  header.menu-open .mobile-menu-toggle span:nth-child(2){ opacity:0; }
  header.menu-open .mobile-menu-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .mobile-menu-dropdown{
    display:none;
    position:absolute; top:100%; left:0; right:0; z-index:99;
    flex-direction:column;
    background:var(--black);
    border-bottom:1px solid var(--line);
    padding:8px 20px 12px;
  }
  .mobile-menu-dropdown a{
    padding:14px 0;
    font-size:14px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
    color:var(--white);
    border-bottom:1px solid var(--line);
  }
  .mobile-menu-dropdown a:last-child{ border-bottom:none; }
  header.menu-open .mobile-menu-dropdown{ display:flex; }

  .btn-login{
    display:inline-flex; align-items:center; justify-content:center;
    font-size:13px; font-weight:600;
    letter-spacing:0.08em;
    text-transform:uppercase;
    padding:10px 22px;
    border:1.5px solid var(--white);
    border-radius:2px;
    transition:all .2s;
    color:var(--white);
  }
  .btn-login:hover{background:var(--white); color:var(--black);}
  /* Icono de usuario (solo botón "Entrar"/Iniciar sesión): en escritorio se ve
     el texto, en móvil solo el icono -- ver media query 900px. */
  .btn-login-icon{ display:none; width:18px; height:18px; }

  .btn-logout{
    font-size:13px; font-weight:600;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:#999;
    transition:color .2s;
  }
  .btn-logout:hover{color:var(--white);}

  /* Menú de cuenta (con sesión iniciada): en escritorio no se usa -- ahí se ven
     los enlaces de texto .header-account-link de siempre. Solo aparece en
     móvil (ver media query 900px), con el mismo icono que el botón de
     "Iniciar sesión" para que el símbolo sea siempre el mismo. */
  .user-menu{ display:none; position:relative; }
  .user-menu-toggle{
    display:flex; align-items:center; justify-content:center;
    width:32px; height:32px; padding:0;
    background:none; border:none; color:var(--white); cursor:pointer;
  }
  .user-menu-toggle .btn-login-icon{ display:block; }
  .user-menu-dropdown{
    position:absolute; top:calc(100% + 12px); right:0; z-index:110;
    min-width:170px;
    display:flex; flex-direction:column;
    background:var(--black);
    border:1px solid var(--line);
    border-radius:4px;
    padding:6px;
  }
  /* Más específico que el display:flex de arriba, para poder ganarle al
     atributo [hidden] que pone/quita el JS al abrir y cerrar el menú. */
  .user-menu-dropdown[hidden]{ display:none; }
  .user-menu-dropdown a{
    padding:11px 14px;
    border-radius:2px;
    font-size:13px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
    color:var(--white);
  }
  .user-menu-dropdown a:hover{ background:rgba(255,255,255,.08); }

  .lang{font-size:12px; font-weight:600; color:#999; letter-spacing:0.05em; white-space:nowrap;}

  /* Botonera de llamada a la acción (marca.html, comunidad.html). El resto del
     antiguo bloque .hero (y el .net-mesh) se borró: era el hero original de la
     home, sustituido por .ed-hero, y ya no lo usaba ninguna página. */
  .hero-cta{
    display:flex; gap:16px; flex-wrap:wrap; justify-content:center;
    animation: fadeUp 0.9s ease-out 0.3s backwards;
  }

  .btn-primary{
    background:var(--lime);
    color:var(--black);
    padding:16px 36px;
    font-size:13px;
    font-weight:700;
    letter-spacing:0.12em;
    text-transform:uppercase;
    border-radius:2px;
    transition:transform .2s, box-shadow .2s;
  }
  .btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(212,255,63,0.25);
  }

  .btn-outline{
    background:transparent;
    color:var(--white);
    padding:16px 36px;
    font-size:13px;
    font-weight:700;
    letter-spacing:0.12em;
    text-transform:uppercase;
    border:1.5px solid var(--line);
    border-radius:2px;
    transition:all .2s;
  }
  .btn-outline:hover{
    border-color:var(--white);
    transform:translateY(-2px);
  }
  .gyro-btn{
    margin-top:14px;
    font-size:11px;
    padding:12px 20px;
  }
  .btn-outline.btn-danger{
    color:#e5484d;
    border-color:#5c2626;
  }
  .btn-outline.btn-danger:hover{
    border-color:#e5484d;
    background:rgba(229,72,77,.08);
  }

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

  /* ===== SECTION SHARED ===== */
  section{
    padding:90px 32px;
    max-width:1280px;
    margin:0 auto;
  }
  .section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    flex-wrap:wrap;
    gap:16px;
    margin-bottom:48px;
  }
  .eyebrow{
    font-size:12px;
    font-weight:700;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--lime);
    margin-bottom:10px;
    display:block;
  }
  .section-head h2{
    font-size:var(--type-h2);
  }
  .section-head .link-all{
    font-size:13px;
    font-weight:600;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--grey);
    border-bottom:1px solid var(--line);
    padding-bottom:4px;
    transition:color .2s, border-color .2s;
  }
  .section-head .link-all:hover{color:var(--white); border-color:var(--white);}

  /* ===== HIGHLIGHTS GRID ===== */
  .highlights-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:20px;
  }
  /* Carrusel horizontal de vídeos (comunidad.html): se ven 3 tarjetas en
     escritorio y 2 en móvil, y al resto se llega deslizando. Se queda en
     una clase aparte de .highlights-grid porque esa la siguen usando
     perfil.html y valorar.html como cuadrícula normal. */
  .hl-carousel{
    display:flex;
    gap:20px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    /* El hover levanta la tarjeta 6px; sin este respiro arriba el
       movimiento se recorta contra el borde del contenedor scrollable. */
    padding:8px 0 10px;
    scrollbar-width:thin;
    scrollbar-color:var(--line) transparent;
  }
  .hl-carousel > *{
    flex:0 0 calc((100% - 2 * 20px) / 3);
    scroll-snap-align:start;
  }
  .hl-carousel::-webkit-scrollbar{ height:6px; }
  .hl-carousel::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }
  .hl-carousel::-webkit-scrollbar-track{ background:transparent; }
  .highlight-card{
    position:relative;
    border-radius:6px;
    overflow:hidden;
    background:linear-gradient(160deg, var(--near-black), #0d0d0d);
    border:1px solid var(--line);
    display:flex;
    flex-direction:column;
    transition:transform .3s, border-color .3s;
    cursor:pointer;
  }
  .highlight-card:hover{
    transform:translateY(-6px);
    border-color:var(--lime);
  }
  /* Zona de vídeo: todo lo que antes vivía suelto en .highlight-card
     (miniatura, badge, play, embed, borrar) ahora va aquí dentro, para
     que el título/autor de .highlight-meta quede SIEMPRE debajo del
     vídeo en vez de superpuesto encima. */
  .hl-media{
    position:relative;
    aspect-ratio:9/16;
    overflow:hidden;
  }
  .hl-media .badge{
    position:absolute; top:14px; left:14px;
    background:var(--lime);
    color:var(--black);
    font-size:10px;
    font-weight:700;
    letter-spacing:0.1em;
    text-transform:uppercase;
    padding:5px 10px;
    border-radius:2px;
  }
  .hl-media .play-icon{
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:54px; height:54px;
    border:2px solid rgba(255,255,255,0.4);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    opacity:0.7;
    transition:opacity .3s, border-color .3s;
  }
  .highlight-card:hover .play-icon{opacity:1; border-color:var(--lime);}
  .play-icon svg{width:18px; height:18px; fill:var(--white); margin-left:2px;}
  .highlight-meta{ padding:14px 16px; }
  .highlight-meta .views{
    font-size:11px;
    color:var(--grey);
    letter-spacing:0.05em;
    margin-bottom:4px;
  }
  .highlight-meta .title{
    font-size:14px;
    font-weight:600;
    line-height:1.3;
  }
  .court-pattern{
    position:absolute; inset:0;
    background:
      repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,255,255,0.02) 18px 19px);
  }
  .highlights-note{
    margin-top:28px;
    font-size:0.9rem;
    color:var(--grey);
    line-height:1.6;
    max-width:640px;
  }

  /* ===== FEED DE COMUNIDAD (extensión de .highlight-card) ===== */
  .hl-media .hl-thumb{
    position:absolute; inset:0; z-index:0;
    width:100%; height:100%;
    object-fit:cover;
  }
  /* Embed en línea, dentro de la tarjeta. Lo usa valorar.html; en
     comunidad.html el clic abre el reproductor grande (.video-lightbox). */
  .hl-media .hl-embed{
    position:absolute; inset:0; z-index:3;
    background:#000;
  }
  .hl-media .hl-embed iframe{
    position:absolute; inset:0;
    width:100%; height:100%;
    border:0;
  }

  /* ===== REPRODUCTOR A PANTALLA CASI COMPLETA (comunidad.html) ===== */
  .video-lightbox{
    --lb-pad:20px;              /* el escenario calcula su tamaño con esto */
    position:fixed; inset:0; z-index:200;
    background:rgba(0,0,0,.94);
    display:flex; align-items:center; justify-content:center;
    padding:var(--lb-pad);
  }
  /* display:flex ganaría al display:none implícito del atributo hidden */
  .video-lightbox[hidden]{ display:none; }
  /* Los vídeos de la comunidad son verticales (shorts/reels): el escenario
     mantiene 9:16 y se limita por la altura de la ventana, así que ocupa
     casi toda la pantalla en móvil sin recortar nada. */
  .video-lightbox-stage{
    position:relative;
    aspect-ratio:9/16;
    height:min(92vh, calc((100vw - 2 * var(--lb-pad)) * 16 / 9));
    max-width:calc(100vw - 2 * var(--lb-pad));
    background:#000;
    border-radius:6px;
    overflow:hidden;
  }
  .video-lightbox-stage iframe{
    position:absolute; inset:0;
    width:100%; height:100%;
    border:0;
  }
  .video-lightbox-close{
    position:absolute; top:14px; right:16px;
    width:40px; height:40px;
    display:flex; align-items:center; justify-content:center;
    font-size:28px; line-height:1;
    color:var(--white);
    background:rgba(0,0,0,.55);
    border:1px solid var(--line);
    border-radius:50%;
    cursor:pointer;
    transition:background .2s, border-color .2s;
  }
  .video-lightbox-close:hover{ background:rgba(0,0,0,.85); border-color:var(--white); }
  /* Evita que la página siga desplazándose por detrás del reproductor */
  body.is-lightbox-open{ overflow:hidden; }
  .hl-delete{
    position:absolute; top:12px; right:12px; z-index:4;
    width:26px; height:26px;
    border-radius:50%;
    border:1px solid var(--line);
    background:rgba(0,0,0,0.6);
    color:var(--white);
    font-size:15px; line-height:1;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    transition:border-color .2s, color .2s;
  }
  .hl-delete:hover{ border-color:var(--lime); color:var(--lime); }

  /* ===== SELECTOR DE TIPO (formulario de publicar) ===== */
  .type-toggle{
    display:flex;
    gap:10px;
    max-width:640px;
    margin:0 auto 16px;
  }
  .type-toggle button{
    flex:1;
    background:transparent;
    color:var(--grey);
    border:1.5px solid var(--line);
    border-radius:2px;
    padding:12px 16px;
    font-size:13px;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    cursor:pointer;
    transition:border-color .2s, color .2s;
  }
  .type-toggle button:hover{ border-color:var(--white); color:var(--white); }
  .type-toggle button.active{ border-color:var(--lime); color:var(--lime); }

  /* ===== BOTÓN DE LIKE (tarjetas de comunidad) ===== */
  .hl-like{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:8px;
    background:transparent;
    border:none;
    padding:0;
    color:var(--grey);
    font-size:12px;
    font-weight:600;
    cursor:pointer;
    transition:color .2s;
  }
  .hl-like svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; transition:fill .2s, stroke .2s; }
  .hl-like:hover{ color:var(--white); }
  .hl-like.is-liked{ color:var(--lime); }
  .hl-like.is-liked svg{ fill:var(--lime); stroke:var(--lime); }

  /* Etiqueta de tipo (solo en "Mejores de la semana", que mezcla ambos).
     En línea dentro de .highlight-meta, no absoluta, para no chocar con
     el badge de plataforma (arriba-izq) ni con el botón de borrar (arriba-der). */
  .hl-type-tag{
    display:inline-block;
    color:var(--grey);
    font-size:10px;
    font-weight:700;
    letter-spacing:0.1em;
    text-transform:uppercase;
    margin-bottom:4px;
  }

  /* ===== FOLLOW STRIP ===== */
  .follow-strip{
    background:var(--near-black);
    padding:80px 32px;
  }
  .follow-inner{
    max-width:1280px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
  }
  .follow-card{
    border:1px solid var(--line);
    border-radius:6px;
    padding:32px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .follow-card h3{
    font-size:1.3rem;
    margin-bottom:4px;
  }
  .follow-card p{
    color:var(--grey);
    font-size:0.9rem;
    line-height:1.6;
    margin-bottom:14px;
    flex:1;
  }
  .follow-card .btn-outline{
    padding:12px 24px;
    text-align:center;
    width:fit-content;
  }

  /* ===== SHOP PREVIEW ===== */
  .shop-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:20px;
  }
  .shop-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:6px;
    overflow:hidden;
    transition:transform .3s, border-color .3s;
    display:block;
    color:var(--white);
  }
  .shop-card:hover{transform:translateY(-6px); border-color:var(--lime);}
  .shop-card .img-area{
    aspect-ratio:1;
    background:linear-gradient(160deg, #222, #111);
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
  }
  .shop-card .img-area img{
    width:60%; opacity:0.9;
  }
  .shop-card .tag{
    position:absolute; top:12px; left:12px;
    font-size:10px; font-weight:700; letter-spacing:0.1em;
    text-transform:uppercase;
    background:var(--black);
    border:1px solid var(--line);
    padding:5px 10px;
    border-radius:2px;
    z-index:2;
  }
  .shop-card .tag-soldout{
    background:#2a2a2a;
    border-color:#3a3a3a;
    color:#ccc;
  }
  .shop-card .img-area.soldout img,
  .shop-card .img-area.soldout video{
    opacity:0.55;
  }
  .shop-card .img-area video{
    width:100%; height:100%; object-fit:cover;
    pointer-events:none;
  }
  .shop-card .info{padding:18px;}
  .shop-card .pname{font-size:14px; font-weight:600; margin-bottom:6px;}
  .shop-card .pprice{font-size:13px; color:var(--grey);}

  /* ===== COMMUNITY CTA ===== */
  .community{
    text-align:center;
    padding:120px 32px;
    position:relative;
    overflow:hidden;
  }
  .community h2, .community p, .community .hero-cta, .community form{
    position:relative;
    z-index:1;
  }
  .community::before{
    content:'';
    position:absolute;
    top:0; left:50%;
    transform:translateX(-50%);
    width:1px; height:100%;
    background:linear-gradient(to bottom, transparent, var(--line) 20%, var(--line) 80%, transparent);
    z-index:0;
  }
  .community h2{
    font-size:var(--type-h2);
    margin-bottom:20px;
    max-width:800px;
    margin-left:auto; margin-right:auto;
  }
  .community h2 .accent{color:var(--lime);}
  .community p{
    color:var(--grey);
    max-width:500px;
    margin:0 auto 36px;
    font-size:1.05rem;
    line-height:1.6;
  }

  /* ===== WAITLIST FORM ===== */
  .waitlist-form{
    display:flex;
    gap:12px;
    justify-content:center;
    flex-wrap:wrap;
    max-width:440px;
    margin:0 auto;
  }
  .waitlist-form input{
    flex:1;
    min-width:220px;
    background:var(--near-black);
    border:1px solid var(--line);
    border-radius:2px;
    padding:16px 18px;
    color:var(--white);
    font-family:'Inter', sans-serif;
    font-size:14px;
  }
  .waitlist-form input:focus{
    outline:none;
    border-color:var(--lime);
  }
  .waitlist-form input::placeholder{color:var(--grey);}
  .waitlist-form .btn-primary{
    border:none;
    cursor:pointer;
    font-family:'Inter', sans-serif;
  }

  /* ===== FOOTER ===== */
  footer{
    border-top:1px solid var(--line);
    padding:48px 32px;
  }
  .footer-inner{
    max-width:1280px;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:24px;
  }
  .footer-logo{display:flex; align-items:center; gap:12px;}
  .footer-logo img{height:36px;}
  .footer-logo span{
    font-family:'Space Grotesk', sans-serif;
    font-weight:700;
    letter-spacing:0.05em;
    font-size:14px;
  }
  .socials{display:flex; gap:18px;}
  .socials a{
    width:38px; height:38px;
    border:1px solid var(--line);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    transition:border-color .2s, transform .2s;
  }
  .socials a:hover{border-color:var(--lime); transform:translateY(-3px);}
  .socials svg{width:16px; height:16px; fill:var(--white);}
  .copyright{
    font-size:12px; color:var(--grey);
    letter-spacing:0.05em;
  }

  /* ===== PAGE HERO (sub-pages) ===== */
  .page-hero{
    padding:80px 32px 60px;
    max-width:900px;
  }
  .page-hero h1{
    font-size:var(--type-h1);
    line-height:1.15;
    margin:14px 0 20px;
  }
  .page-hero .subtitle{
    color:var(--grey);
    font-size:1.05rem;
    line-height:1.7;
    max-width:640px;
  }
  /* Shop no lleva subtítulo: sin él, el padding-bottom pensado para .page-hero
     (que sí lo tiene) deja un hueco enorme antes de la cuadrícula. Se recorta
     tanto el pie del hero como el techo de la sección siguiente. */
  .page-hero--compact{ padding-bottom:24px; }
  .page-hero--compact + section{ padding-top:40px; }

  /* ===== ORIGIN STORY (marca.html) ===== */
  .origin-story{
    max-width:720px;
    padding:20px 32px 90px;
  }
  .origin-story p{
    color:var(--grey);
    font-size:1.05rem;
    line-height:1.8;
    margin-bottom:28px;
  }
  .origin-story .story-line{
    color:var(--white);
    font-size:clamp(1.2rem, 2vw, 1.5rem);
    font-weight:600;
    line-height:1.4;
    margin:44px 0;
  }
  .story-pivot{
    max-width:800px;
    padding:60px 32px;
    text-align:center;
  }
  .story-pivot h2{
    font-size:var(--type-h2);
    line-height:1.2;
  }
  .story-pivot .story-accent{ color:var(--lime); }
  .story-pivot--final p{
    color:var(--grey);
    font-size:1.1rem;
    line-height:1.6;
    max-width:520px;
    margin:20px auto 0;
  }

  /* ===== PRODUCT DETAIL ===== */
  .product-detail{
    max-width:1100px;
    margin:0 auto;
    padding:60px 32px 100px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:flex-start;
  }
  .product-breadcrumb{
    grid-column:1 / -1;
    font-size:12px;
    color:var(--grey);
    letter-spacing:0.05em;
    margin-bottom:10px;
  }
  .product-breadcrumb a{color:var(--grey); transition:color .2s;}
  .product-breadcrumb a:hover{color:var(--white);}
  .product-image{
    position:relative;
    aspect-ratio:1;
    border-radius:8px;
    overflow:hidden;
    background:linear-gradient(160deg, #222, #111);
  }
  .product-image img,
  .product-image video{
    width:100%; height:100%;
    object-fit:cover;
    opacity:0.6;
  }
  .product-image .product-photo{ display:none; }
  .shop-card .img-area .video-fallback{ display:none; }
  .product-image .gallery-next{
    position:absolute; bottom:16px; right:16px; z-index:3;
    display:flex; align-items:center; gap:8px;
    padding:10px 18px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.25);
    background:rgba(255,255,255,0.1);
    color:var(--white);
    font-family:'Space Grotesk', sans-serif;
    font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
    cursor:pointer;
    transition:background .2s, border-color .2s;
  }
  .product-image .gallery-next:hover{ background:rgba(255,255,255,0.18); border-color:var(--lime); }
  .product-image .gallery-next svg{ width:14px; height:14px; flex-shrink:0; }
  .product-image .tag-soldout{
    position:absolute; top:18px; left:18px;
    font-size:11px; font-weight:700; letter-spacing:0.1em;
    text-transform:uppercase;
    background:#2a2a2a;
    border:1px solid #3a3a3a;
    color:#ccc;
    padding:7px 14px;
    border-radius:2px;
    z-index:2;
  }
  .product-info .eyebrow{margin-bottom:14px;}
  .product-info h1{
    font-size:var(--type-h1);
    margin-bottom:14px;
    line-height:1.1;
  }
  .product-price{
    font-size:1.3rem;
    font-weight:700;
    font-family:'Space Grotesk', sans-serif;
    color:var(--grey);
    margin-bottom:24px;
  }
  .product-status{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    font-weight:600;
    color:#e0a030;
    background:rgba(224,160,48,0.08);
    border:1px solid rgba(224,160,48,0.25);
    padding:9px 16px;
    border-radius:4px;
    margin-bottom:28px;
  }
  .product-status::before{
    content:'';
    width:7px; height:7px;
    border-radius:50%;
    background:#e0a030;
  }
  .product-description{
    color:var(--grey);
    font-size:0.98rem;
    line-height:1.75;
    margin-bottom:32px;
    max-width:440px;
  }
  .product-notify h3{
    font-size:1rem;
    margin-bottom:14px;
    font-family:'Inter', sans-serif;
    text-transform:none;
    letter-spacing:0;
    font-weight:700;
  }
  .product-notify .waitlist-form{
    justify-content:flex-start;
    max-width:420px;
    margin:0;
  }
  .product-features{
    list-style:none;
    margin-top:32px;
    padding-top:28px;
    border-top:1px solid var(--line);
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .product-features li{
    font-size:0.88rem;
    color:var(--grey);
    display:flex;
    align-items:baseline;
    gap:10px;
  }
  .product-features li::before{
    content:'—';
    color:var(--lime);
  }

  /* ===== JOIN HERO ===== */
  /* Va DEBAJO de la carta en unete.html (ver orden de secciones en el
     HTML): el padding-top es minimo porque el espaciado con el header
     ya lo pone .card-showcase, que va primero. */
  .join-hero{
    max-width:760px;
    margin:0 auto;
    padding:0 32px 50px;
    text-align:center;
  }
  .join-hero .eyebrow{display:block; text-align:center;}
  .join-hero h1{
    font-size:var(--type-h1);
    line-height:1.1;
    margin:14px 0 20px;
  }
  .join-hero .subtitle{
    color:var(--grey);
    font-size:1.05rem;
    line-height:1.7;
    max-width:560px;
    margin:0 auto 32px;
  }
  .member-counter{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:0.88rem;
    color:var(--grey);
    background:var(--near-black);
    border:1px solid var(--line);
    padding:10px 20px;
    border-radius:30px;
  }
  .member-counter strong{color:var(--white); font-weight:700;}
  .counter-dot{
    width:8px; height:8px;
    border-radius:50%;
    background:var(--lime);
    box-shadow:0 0 0 0 rgba(212,255,63,0.5);
    animation:pulse-dot 2s infinite;
  }
  @keyframes pulse-dot{
    0%{box-shadow:0 0 0 0 rgba(212,255,63,0.4);}
    70%{box-shadow:0 0 0 6px rgba(212,255,63,0);}
    100%{box-shadow:0 0 0 0 rgba(212,255,63,0);}
  }

  /* ===== MEMBER CARD ===== */
  /* En unete.html es la primera seccion de la pagina (antes del titulo),
     asi que lleva ella el espaciado respecto al header. */
  .card-showcase{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:20px 32px 16px;
  }
  .member-card-wrap{
    width:100%;
    max-width:420px;
    perspective:900px;
  }
  .member-card{
    width:100%;
    aspect-ratio:1.58/1;
    background:linear-gradient(135deg, #1a1a1a, #0a0a0a 60%);
    border:1px solid var(--line);
    border-radius:16px;
    padding:28px 30px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    position:relative;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,0.5);
    transform:perspective(900px) rotateX(0deg) rotateY(0deg) scale(1);
    transition:transform .15s ease-out;
    transform-style:preserve-3d;
  }
  .member-card::before{
    content:'';
    position:absolute;
    top:-40%; right:-30%;
    width:70%; height:140%;
    background:radial-gradient(circle, color-mix(in srgb, var(--card-accent, var(--lime)) 9%, transparent), transparent 70%);
    z-index:0;
  }
  .member-card-shine{
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    transition:background .05s ease-out;
  }
  .card-hint{
    margin-top:18px;
    font-size:0.8rem;
    color:#666;
    letter-spacing:0.03em;
  }
  .member-card-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:relative; z-index:1;
  }
  .member-card-logo{
    height:30px;
  }
  .member-card-tier{
    font-family:'Space Grotesk', sans-serif;
    font-size:11px;
    font-weight:700;
    letter-spacing:0.15em;
    color:var(--card-accent, var(--lime));
    border:1px solid color-mix(in srgb, var(--card-accent, var(--lime)) 35%, transparent);
    padding:5px 12px;
    border-radius:20px;
  }
  .member-card-body{position:relative; z-index:1;}
  .member-card-name{
    font-family:'Space Grotesk', sans-serif;
    font-size:1.5rem;
    font-weight:700;
    letter-spacing:0.02em;
    margin-bottom:6px;
  }
  .member-card-id{
    font-size:12px;
    color:var(--grey);
    letter-spacing:0.1em;
  }
  .member-card-bottom{
    display:flex;
    justify-content:space-between;
    font-size:10px;
    letter-spacing:0.12em;
    color:#777;
    position:relative; z-index:2;
  }

  /* ===== TARJETA DE DOS CARAS (flip) ===== */
  /* Capa que recibe el tilt 3D del ratón (no choca con el giro) */
  .member-card-tilt{
    width:100%;
    transform-style:preserve-3d;
    transition:transform .15s ease-out;
  }
  /* Capa que gira al hacer clic */
  .member-card-flip{
    position:relative;
    width:100%;
    aspect-ratio:1.58/1;
    transform-style:preserve-3d;
    transition:transform .6s cubic-bezier(.2,.7,.2,1);
    cursor:pointer;
  }
  .member-card-flip.is-flipped{ transform:rotateY(180deg); }
  /* Cada cara ocupa todo y oculta su reverso */
  .member-card-face{
    position:absolute; inset:0;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }
  .member-card-face--back{ transform:rotateY(180deg); }
  /* Cuando .member-card hace de cara, llena el contenedor */
  .member-card-face.member-card{ width:100%; height:100%; aspect-ratio:auto; }

  /* ===== TEMAS DE FONDO ===== */
  .card-bg-rookie{ background:linear-gradient(135deg, #1a1a1a, #0a0a0a 60%); }
  .card-bg-grafito{ background:linear-gradient(135deg, #34373b, #16181b 65%); }
  .card-bg-verdenoche{ background:linear-gradient(135deg, #11261a, #06120c 65%); }
  .card-bg-carbono{
    background:
      linear-gradient(135deg, #1c1c1c, #0a0a0a 70%),
      repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 2px, transparent 2px 5px),
      repeating-linear-gradient(-45deg, rgba(0,0,0,.4) 0 2px, transparent 2px 5px);
    background-blend-mode:normal, overlay, overlay;
  }
  .card-bg-neon{ background:linear-gradient(135deg, #2a0a3a, #0a1840 55%, #06121f); }
  .card-bg-holo{
    background:linear-gradient(135deg,#1a0f2e,#0a1c2e 40%,#0e2a24 70%,#1a0f2e);
  }

  /* ===== EFECTOS PREMIUM (overlay tras el texto) ===== */
  .member-card.card-fx-metal::after,
  .member-card.card-fx-animated::after,
  .member-card.card-fx-holo::after{
    content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    border-radius:inherit;
  }
  .member-card.card-fx-metal::after{
    background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.14) 48%, transparent 62%);
  }
  .member-card.card-fx-animated::after{
    background:linear-gradient(120deg, transparent 20%, rgba(255,255,255,.16) 50%, transparent 80%);
    background-size:250% 100%;
    animation:cardSheen 3.2s linear infinite;
  }
  .member-card.card-fx-holo::after{
    background:conic-gradient(from 0deg, #ff2d9b55, #00e5ff55, #d4ff3f55, #ff2d9b55);
    mix-blend-mode:screen; opacity:.45;
    animation:cardHolo 6s linear infinite;
  }
  @keyframes cardSheen{ from{background-position:120% 0;} to{background-position:-120% 0;} }
  @keyframes cardHolo{ from{filter:hue-rotate(0deg);} to{filter:hue-rotate(360deg);} }

  /* ===== AVATAR + MARCOS ===== */
  .card-avatar{
    width:46px; height:46px; border-radius:50%;
    object-fit:cover; background:#222; flex-shrink:0;
    display:inline-block;
  }
  .card-avatar-frame--simple{ border:1.5px solid var(--line); }
  .card-avatar-frame--lima{ border:2px solid var(--card-accent, var(--lime)); box-shadow:0 0 0 2px rgba(0,0,0,.4); }
  .card-avatar-frame--dorado{ border:2px solid #f5c542; box-shadow:0 0 8px rgba(245,197,66,.5); }
  .card-avatar-frame--holo{
    border:2px solid transparent;
    background-image:linear-gradient(#111,#111), conic-gradient(from 0deg,#ff2d9b,#00e5ff,#d4ff3f,#ff2d9b);
    background-origin:border-box; background-clip:content-box, border-box;
  }
  .member-card-ident{ display:flex; align-items:center; gap:12px; }

  /* ===== INSIGNIAS EN LA TARJETA ===== */
  .card-badges{ display:flex; gap:6px; position:relative; z-index:2; }
  .card-badge{
    font-size:13px; line-height:1;
    width:24px; height:24px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.06); border:1px solid var(--line);
  }

  /* ===== REVERSO: contenido ===== */
  .member-card-back .member-card-body{ width:100%; }
  .card-back-head{
    display:flex; justify-content:space-between; align-items:center;
    position:relative; z-index:2;
    font-family:'Space Grotesk',sans-serif; font-size:11px; font-weight:700;
    letter-spacing:0.15em; color:var(--card-accent, var(--lime));
  }
  .card-back-stats{
    display:grid; grid-template-columns:1fr 1fr; gap:10px 18px;
    position:relative; z-index:2; margin:6px 0;
  }
  .card-back-stat .v{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1rem; }
  .card-back-stat .l{ font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:#888; }
  .card-back-message{
    position:relative; z-index:2; font-size:12px; color:var(--grey);
    font-style:italic; line-height:1.5; max-height:3em; overflow:hidden;
  }
  .card-back-foot{
    display:flex; justify-content:space-between; align-items:center;
    position:relative; z-index:2;
  }
  .card-back-socials{ display:flex; gap:10px; align-items:center; }
  .card-back-socials a{ color:#aaa; font-size:11px; letter-spacing:.05em; }
  .card-back-socials a:hover{ color:var(--card-accent, var(--lime)); }

  /* Overlay de reverso bloqueado (sin seguimiento mutuo) */
  .card-back-locked{
    position:absolute; inset:0; z-index:5; border-radius:inherit;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:12px; text-align:center; padding:24px;
    background:rgba(8,8,8,.72); backdrop-filter:blur(7px);
  }
  .card-back-locked .lock-ico{ font-size:26px; }
  .card-back-locked p{ font-size:12px; color:var(--grey); max-width:240px; line-height:1.5; }

  /* ===== CARTA DE JUGADOR (frente, estilo FIFA) =====
     El reverso (.member-card-back / card-back-*) no se toca — solo
     cambia de proporción porque comparte el mismo contenedor flip que
     el frente. El frente antiguo (member-card-top/body/bottom) sigue
     usándose tal cual en unete.html, sin la clase .fifa-card-wrap. */
  .fifa-card-wrap{ max-width:300px; }
  /* Exactamente el ratio del viewBox del marco (1054x1492). Con 0.7/1
     redondeado el SVG se centraba con unos 3px de letterbox vertical y todo
     el contenido HTML quedaba desplazado respecto al arte del marco. */
  .fifa-card-wrap .member-card-tilt,
  .fifa-card-wrap .member-card-flip{ aspect-ratio:1054/1492; }

  .fifa-card{
    padding:0; border:none; box-shadow:none; overflow:visible;
    background:transparent;
  }
  .fifa-card::before{ display:none; }

  /* Marco: el contorno vectorial exacto de "PR-CARD-LAST-VERSION prueba.svg"
     (el retoque final de Kilian) — mismo path, sin aproximarlo. El panel
     blanco es un único path con la silueta completa (incluida la
     textura diagonal del borde izquierdo y el hueco octogonal de la
     foto ya recortado dentro de su propio trazado). El contenido
     dinámico (.fifa-inner) se recorta con el mismo clipPath por url(),
     no con una copia aproximada, para que nunca se desalineen. */
  .fifa-frame-svg{
    position:absolute; inset:0; width:100%; height:100%; display:block;
    filter:var(--fifa-frame-shadow);
  }
  /* Sombra base del marco, en variable para que las variantes de pago
     puedan añadir filtros sin tener que repetir los drop-shadow. */
  .fifa-card{ --fifa-frame-shadow:drop-shadow(0 14px 26px rgba(0,0,0,.5)) drop-shadow(0 2px 4px rgba(0,0,0,.35)); }

  /* El marco es metálico POR DEFECTO en todas las cartas. Los degradados
     usan gradientUnits="userSpaceOnUse", así que las 42 piezas del marco
     comparten un único barrido continuo y se leen como una sola pieza de
     metal (con objectBoundingBox cada pieza tenía su propio degradado). */
  .fifa-frame-band{ fill:#0a0a0a; }  /* fallback si el degradado no resuelve */
  #cardFront .fifa-frame-band{ fill:url(#fifaMetalGrad-front); }
  #cardBack  .fifa-frame-band{ fill:url(#fifaMetalGrad-back); }
  .fifa-frame-contour{ fill:none; stroke:#0a0a0a; stroke-width:3; }
  .fifa-frame-gridline{ fill:none; stroke:#c8c8c8; stroke-width:4; }
  .fifa-frame-photo-guide{ fill:none; stroke:rgba(0,0,0,.25); stroke-width:5; }

  #cardFront .fifa-inner{ clip-path:url(#fifaShieldFront); }
  #cardBack .fifa-inner{ clip-path:url(#fifaShieldBack); }
  /* Todas las capas que cubren la carta entera (brillo especular y los
     overlays ::before/::after heredados del diseño anterior) se recortan
     a la silueta real del escudo. Si no, al iluminar cerca de un borde
     se veían las esquinas transparentes del SVG como un rectángulo
     fantasma fuera de la carta. */
  #cardFront .member-card-shine,
  #cardFront.fifa-card::before,
  #cardFront.fifa-card::after{ clip-path:url(#fifaShieldFront); }
  #cardBack .member-card-shine,
  #cardBack.fifa-card::before,
  #cardBack.fifa-card::after{ clip-path:url(#fifaShieldBack); }
  /* Reflejo especular: suma luz sobre el metal en vez de lavarlo de blanco
     plano. Solo en la carta FIFA — unete.html usa la carta antigua. */
  .fifa-card .member-card-shine{ mix-blend-mode:screen; }

  /* background (fondo comprado) tiñe solo el panel plano interior */
  .fifa-frame-panel{ fill:#f2f2f2; }
  .fifa-card.card-bg-rookie .fifa-frame-panel{ fill:#f2f2f2; }
  .fifa-card.card-bg-grafito .fifa-frame-panel{ fill:#e4e4e6; }
  .fifa-card.card-bg-verdenoche .fifa-frame-panel{ fill:#eaf2ec; }
  .fifa-card.card-bg-carbono .fifa-frame-panel{ fill:#dcdcdc; }
  .fifa-card.card-bg-neon .fifa-frame-panel{ fill:#f0e8f7; }
  .fifa-card.card-bg-holo .fifa-frame-panel{ fill:#f7fbff; }

  /* effect (fx-metal/fx-animated/fx-holo): ahora el metal es la base de
     todas las cartas, así que los efectos de pago son refuerzos sobre
     esa base — no la única forma de tener marco metálico. */

  /* Metal: cromado pulido — más contraste y brillo que el metal base. */
  .fifa-card.card-fx-metal{ --fifa-frame-shadow:drop-shadow(0 14px 26px rgba(0,0,0,.55)) drop-shadow(0 2px 4px rgba(0,0,0,.35)) contrast(1.3) brightness(1.1); }
  .fifa-card.card-fx-metal .fifa-frame-contour{ stroke:#000; }

  /* Animado: el metal base con un pulso de luz continuo. */
  .fifa-card.card-fx-animated .fifa-frame-svg{ animation:cardShimmer 3s ease-in-out infinite; }

  /* Holo: cambia el degradado del marco al arcoíris. */
  #cardFront.card-fx-holo .fifa-frame-band{ fill:url(#fifaHoloGrad-front); }
  #cardBack.card-fx-holo .fifa-frame-band{ fill:url(#fifaHoloGrad-back); }

  @keyframes cardShimmer{ 0%,100%{ filter:var(--fifa-frame-shadow) brightness(1); } 50%{ filter:var(--fifa-frame-shadow) brightness(1.28); } }

  .fifa-inner{
    position:absolute; inset:0;
    display:flex; flex-direction:column; align-items:center;
    padding:22px 16px 14px;
    overflow:hidden;
  }
  /* brillo superior sutil, tipo cristal, sobre el panel interior */
  .fifa-inner::before{
    content:''; position:absolute; inset:0 0 auto 0; height:38%;
    background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
    pointer-events:none;
  }

  /* Bajado desde el 6%: arriba se salía del marco, hacia la muesca del
     escudo. Ahora queda dentro, a la altura de la cinta de nivel. */
  .fifa-brand{
    position:absolute; top:10.4%; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center;
  }
  .fifa-brand-logo{ height:24px; width:auto; }

  /* Más pequeña que antes (9px/5-14px de padding): se comía la banda
     diagonal del marco por la esquina superior derecha. */
  .fifa-tier-ribbon{
    position:absolute; top:11.6%; right:15.5%;
    background:#0a0a0a; color:#fff;
    font-family:'Space Grotesk',sans-serif; font-size:7px; font-weight:700; letter-spacing:.09em;
    padding:3px 8px 3px 10px;
    clip-path:polygon(14% 0, 100% 0, 100% 100%, 0 100%);
  }
  .fifa-overall{
    position:absolute; top:15%; left:14%;
    display:flex; flex-direction:column; align-items:center;
  }
  .fifa-overall-num{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.4rem; color:#111; line-height:1; }
  .fifa-overall-label{ font-size:7px; letter-spacing:.14em; color:#666; }

  .fifa-tagline{
    position:absolute; top:52%; right:5px; transform:translateY(-50%);
    writing-mode:vertical-rl; text-orientation:mixed;
    font-size:6.5px; letter-spacing:.22em; color:#999; font-weight:600;
  }
  .fifa-dots{ position:absolute; left:7px; top:60%; display:flex; flex-direction:column; gap:5px; }
  .fifa-dots span{ width:3px; height:3px; border-radius:50%; background:#999; }

  /* Posiciones absolutas calcadas de las guías del SVG real (hueco
     octogonal de la foto, línea de nombre y grid de 8 stats), en vez
     de un flujo flex aproximado — así el contenido dinámico cae
     exactamente donde el diseño lo marca. */
  .fifa-side{
    position:absolute; top:28%; width:26%;
    display:flex; flex-direction:column; gap:12px;
  }
  .fifa-side--left{ left:15%; align-items:flex-start; text-align:left; }
  .fifa-side--right{ right:5%; align-items:flex-end; text-align:right; }
  .fifa-info{ width:100%; }
  .fifa-info-label{ display:block; font-size:6px; letter-spacing:.04em; text-transform:uppercase; color:#777; white-space:nowrap; }
  .fifa-info-value{ display:block; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:10px; color:#111; border-bottom:1px solid #ccc; padding-bottom:2px; min-width:32px; }
  /* Nacionalidad: bandera + código en fila, con el mismo subrayado que
     llevaba .fifa-info-value suelto. La bandera es una <img> (no emoji):
     los emojis de bandera no se ven en muchos Windows/navegadores de
     escritorio, solo en móvil. */
  .fifa-info-row{ display:flex; align-items:center; justify-content:flex-end; gap:3px; border-bottom:1px solid #ccc; padding-bottom:2px; min-width:32px; }
  .fifa-info-row .fifa-info-value{ border-bottom:none; padding-bottom:0; min-width:0; }
  .fifa-flag{ display:block; width:13px; height:auto; border-radius:1px; flex-shrink:0; }
  .fifa-flag:not([src]){ display:none; }

  /* Caja y silueta calculadas desde el subpath del octógono del SVG del
     marco, no a ojo: así la foto encaja clavada en su hueco. */
  .fifa-photo-frame{
    position:absolute; left:28.85%; top:17.80%; width:44.26%; height:48.29%;
    clip-path:polygon(100% 89.7%, 99.3% 11.9%, 83.2% 0%, 16.4% 0%, 0.4% 11.8%, 0% 89.8%, 13.2% 100%, 86.3% 100%);
    background:#dcdcdc; overflow:hidden;
  }
  /* Estado vacío: silueta neutra sobre gris, para que el hueco se lea como
     "falta la foto" y no como un bloque negro. Sin texto, porque la misma
     carta se ve en el carnet público de otro socio. */
  .fifa-photo-empty{
    position:absolute; left:50%; top:52%; transform:translate(-50%,-50%);
    width:56%; fill:#b3b3b3;
  }
  .fifa-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  /* El <img> nace sin src y solo aparece cuando el JS le asigna uno, tapando
     la silueta. Así no hace falta lógica extra para alternar entre ambos. */
  .fifa-photo:not([src]){ display:none; }
  /* avatar_frame sigue aplicándose al bisel de la foto, ahora octogonal */
  .fifa-photo-frame.card-avatar-frame--simple{ border:3px solid #bbb; }
  .fifa-photo-frame.card-avatar-frame--lima{ border:3px solid var(--card-accent, var(--lime)); }
  .fifa-photo-frame.card-avatar-frame--dorado{ border:3px solid #f5c542; }
  .fifa-photo-frame.card-avatar-frame--holo{
    border:3px solid transparent;
    background-image:linear-gradient(#dcdcdc,#dcdcdc), conic-gradient(from 0deg,#ff2d9b,#00e5ff,#d4ff3f,#ff2d9b);
    background-origin:border-box; background-clip:content-box, border-box;
  }

  .fifa-name{
    position:absolute; top:67%; left:50%; transform:translateX(-50%);
    font-family:'Space Grotesk',sans-serif; font-weight:700; text-transform:uppercase;
    font-size:clamp(13px, 3vw, 17px); color:#111; text-align:center;
    padding-bottom:7px; border-bottom:1.5px solid #111;
    width:78%;
  }

  .fifa-stats-grid, .fifa-achievements-grid{
    position:absolute; left:14%; top:76%; width:72%;
    display:grid; grid-template-columns:repeat(4, 1fr); gap:6px 4px;
  }
  .fifa-stat{ display:flex; flex-direction:column; align-items:center; gap:1px; }
  .fifa-stat svg{ width:11px; height:11px; stroke:#111; fill:none; stroke-width:1.8; }
  .fifa-stat-label{ font-size:6px; line-height:1; letter-spacing:.05em; text-transform:uppercase; color:#555; }
  .fifa-stat-value{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:10px; line-height:1.2; color:#111; border-top:1px solid #ccc; padding-top:1px; width:70%; text-align:center; }


  /* El candado tapa SOLO la zona de la rejilla de estadísticas (que es lo
     que realmente está bloqueado), no la carta entera: antes era inset:0
     con un blanco casi opaco y escondía todo el diseño. Se alinea con
     .fifa-stats-grid (left:14% / top:74%). */
  .fifa-locked{
    position:absolute; left:10%; right:10%; top:71%; bottom:7%; z-index:6;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; text-align:center; padding:6px;
    background:rgba(255,255,255,.93);
  }
  .fifa-locked .lock-ico{ font-size:15px; line-height:1; }
  .fifa-locked p{ font-size:8px; color:#444; line-height:1.4; margin:0; }
  .fifa-locked-progress{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:10px; color:#111; }

  /* ===== REVERSO DE LA CARTA DE JUGADOR (mismo marco que el frente) ===== */
  .fifa-back-content{
    position:absolute; top:20%; left:8%; right:8%;
    display:flex; flex-direction:column; align-items:center;
    gap:10px;
  }
  .fifa-bio{
    font-size:9.5px; line-height:1.5; color:#333; text-align:center;
    max-height:5.4em; overflow:hidden;
  }
  .fifa-specialty-tags{ display:flex; flex-wrap:wrap; gap:5px; justify-content:center; }
  .fifa-tag{
    font-size:8px; font-weight:600; color:#111;
    background:rgba(0,0,0,.06); border:1px solid #ccc; border-radius:20px;
    padding:3px 9px; white-space:nowrap;
  }
  .fifa-achievements-grid{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:8px 4px;
    width:100%; margin-top:9px;
  }
  .fifa-achievement{ display:flex; flex-direction:column; align-items:center; gap:2px; }
  .fifa-achievement-icon{ font-size:15px; line-height:1; }
  .fifa-achievement-name{
    font-size:6px; letter-spacing:.03em; text-transform:uppercase; color:#555; text-align:center;
    border-top:1px solid #ccc; padding-top:2px; width:80%;
  }
  .fifa-achievement--empty{ opacity:.25; }

  /* ===== SELECTOR DE ESPECIALIDADES (perfil.html, pestaña Reverso) ===== */
  .tag-picker{ display:flex; flex-wrap:wrap; gap:6px; }
  .tag-picker button{
    background:transparent; color:var(--grey); border:1.5px solid var(--line); border-radius:20px;
    padding:6px 12px; font-size:12px; font-weight:600; cursor:pointer; transition:all .15s;
  }
  .tag-picker button:hover{ color:var(--white); border-color:var(--white); }
  .tag-picker button.active{ border-color:var(--lime); color:var(--lime); }

  /* ===== PANEL EDITOR DE LA TARJETA ===== */
  .credit-chip{
    display:inline-flex; align-items:center; gap:7px;
    background:rgba(212,255,63,.08); border:1px solid color-mix(in srgb, var(--lime) 30%, transparent);
    color:var(--lime); font-weight:700; font-size:13px;
    padding:7px 14px; border-radius:30px;
  }
  .card-editor{
    max-width:560px; margin:18px auto 0; width:100%;
    border:1px solid var(--line); border-radius:14px; padding:18px;
    background:rgba(255,255,255,.015);
  }
  .card-editor-tabs{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
  .card-tab{
    font-size:12px; font-weight:600; letter-spacing:.04em;
    padding:7px 13px; border-radius:30px; cursor:pointer;
    border:1px solid var(--line); color:var(--grey); background:transparent;
    transition:all .15s;
  }
  .card-tab:hover{ color:var(--white); }
  .card-tab.is-active{ background:var(--white); color:var(--black); border-color:var(--white); }
  .card-panel{ display:none; }
  .card-panel.is-active{ display:block; }
  .card-options{ display:grid; grid-template-columns:repeat(auto-fill, minmax(96px,1fr)); gap:10px; }
  .card-option{
    position:relative; cursor:pointer;
    border:1.5px solid var(--line); border-radius:10px; overflow:hidden;
    padding:10px; min-height:62px;
    display:flex; flex-direction:column; justify-content:flex-end; gap:4px;
    transition:border-color .15s, transform .1s;
  }
  .card-option:hover{ transform:translateY(-2px); }
  .card-option.is-active{ border-color:var(--lime); box-shadow:0 0 0 1px var(--lime) inset; }
  .card-option .opt-name{ font-size:11px; font-weight:600; position:relative; z-index:2; }
  .card-option .opt-swatch{ position:absolute; inset:0; z-index:0; opacity:.9; }
  .card-option.is-locked .opt-name{ opacity:.85; }
  .card-cost{
    position:absolute; top:6px; right:6px; z-index:3;
    font-size:10px; font-weight:700; letter-spacing:.03em;
    background:rgba(0,0,0,.65); color:var(--lime);
    border:1px solid color-mix(in srgb, var(--lime) 30%, transparent);
    padding:2px 7px; border-radius:20px;
  }
  .card-option.is-owned .card-cost{ display:none; }
  .card-field{ margin-bottom:12px; }
  .card-field label{ display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#888; margin-bottom:5px; }
  .card-field input, .card-field textarea, .card-field select{
    width:100%; background:#111; border:1px solid var(--line); border-radius:8px;
    color:var(--white); padding:10px 12px; font-family:inherit; font-size:14px;
  }
  .card-field textarea{ resize:vertical; min-height:60px; }
  .card-editor-actions{ display:flex; gap:10px; align-items:center; margin-top:16px; flex-wrap:wrap; }
  .card-share{ font-size:12px; color:var(--grey); }
  .card-share a{ color:var(--lime); text-decoration:underline; cursor:pointer; }

  /* ===== FORMULARIO DE VOTAR (valorar.html) ===== */
  .vote-form{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:8px;
  }
  .vote-field{ margin-bottom:0; }
  .vote-form .btn-primary{ grid-column:1 / -1; }
  .vote-form .form-msg{ grid-column:1 / -1; }

  /* ===== PROGRESSION ===== */
  .progression{padding-top:10px;}
  .progression-intro{
    color:var(--grey);
    font-size:0.98rem;
    line-height:1.7;
    max-width:560px;
    margin-bottom:48px;
  }
  .progression-path{
    display:flex;
    flex-direction:column;
    gap:0;
    max-width:680px;
  }
  .level-item{
    display:flex;
    gap:22px;
    padding:24px 0;
    border-top:1px solid var(--line);
    position:relative;
  }
  .level-item:last-child{border-bottom:1px solid var(--line);}
  .level-marker{
    width:14px; height:14px;
    border-radius:50%;
    border:2px solid var(--line);
    background:var(--black);
    margin-top:3px;
    flex-shrink:0;
  }
  .level-active .level-marker{
    border-color:var(--lime);
    background:var(--lime);
    box-shadow:0 0 0 4px rgba(212,255,63,0.15);
  }
  .level-content{display:flex; flex-direction:column; gap:4px;}
  .level-name{
    font-family:'Space Grotesk', sans-serif;
    font-size:1.15rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.02em;
  }
  .level-active .level-name{color:var(--lime);}
  .level-desc{
    font-size:0.9rem;
    color:var(--grey);
    line-height:1.5;
    max-width:480px;
  }

  /* ===== BENEFITS ===== */
  .benefits{padding-top:30px;}
  .benefits-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:20px;
  }
  .benefit-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:8px;
    padding:32px 28px;
    position:relative;
    transition:border-color .25s, transform .25s;
  }
  .benefit-card:hover{transform:translateY(-4px); border-color:#3a3a3a;}
  .benefit-card-accent{
    border-color:rgba(212,255,63,0.35);
    background:linear-gradient(160deg, rgba(212,255,63,0.05), var(--card) 60%);
  }
  .benefit-card-accent:hover{border-color:var(--lime);}
  .benefit-icon{
    display:inline-flex;
    width:44px; height:44px;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--near-black);
    color:var(--lime);
    margin-bottom:20px;
  }
  .benefit-icon svg{width:22px; height:22px;}
  .benefit-card h3{
    font-size:1.15rem;
    margin-bottom:12px;
    text-transform:none;
    letter-spacing:0;
    font-family:'Inter', sans-serif;
    font-weight:700;
  }
  .benefit-card p{
    color:var(--grey);
    font-size:0.92rem;
    line-height:1.65;
  }
  .benefit-tag{
    display:inline-block;
    margin-top:16px;
    font-size:10px;
    font-weight:700;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:#888;
    border:1px solid var(--line);
    padding:4px 10px;
    border-radius:2px;
  }

  /* ===== JOIN FORM ===== */
  .join-form-section{
    background:var(--near-black);
    padding:100px 32px;
    margin-top:30px;
  }
  .join-form-inner{
    max-width:460px;
    margin:0 auto;
    text-align:center;
  }
  .join-form-inner .eyebrow{display:block;}
  .join-form-inner h2{
    font-size:var(--type-h2);
    margin:14px 0 12px;
  }
  .join-form-inner > p{
    color:var(--grey);
    font-size:0.98rem;
    margin-bottom:36px;
  }
  .join-form{
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .join-form .form-row{
    display:flex;
    gap:14px;
  }
  .join-form input{
    background:var(--black);
    border:1px solid var(--line);
    border-radius:4px;
    padding:15px 16px;
    color:var(--white);
    font-family:'Inter', sans-serif;
    font-size:14px;
    width:100%;
  }
  .join-form input:focus{outline:none; border-color:var(--lime);}
  .join-form input::placeholder{color:#777;}
  .btn-full{
    width:100%;
    border:none;
    cursor:pointer;
    font-family:'Inter', sans-serif;
    margin-top:6px;
    padding:17px 36px;
  }
  .join-disclaimer{
    margin-top:20px;
    font-size:0.8rem;
    color:#666;
  }
  .form-msg{
    padding:12px 16px;
    border-radius:4px;
    font-size:0.9rem;
    line-height:1.5;
    text-align:left;
  }
  .form-msg--error{
    background:rgba(220,50,50,0.1);
    border:1px solid rgba(220,50,50,0.3);
    color:#ff7070;
  }
  .form-msg--success{
    background:rgba(212,255,63,0.08);
    border:1px solid rgba(212,255,63,0.3);
    color:var(--lime);
  }

  /* ===== LOGIN CON GOOGLE ===== */
  .btn-google{
    display:flex; align-items:center; justify-content:center; gap:10px;
    width:100%;
    background:var(--white); color:#1f1f1f;
    padding:14px 20px;
    border:1px solid var(--line); border-radius:4px;
    font-family:'Inter', sans-serif; font-size:14px; font-weight:600;
    cursor:pointer; transition:background .2s, transform .2s;
  }
  .btn-google:hover{ background:#ececec; transform:translateY(-1px); }
  .btn-google svg{ width:18px; height:18px; flex-shrink:0; }
  .form-divider{
    display:flex; align-items:center; gap:12px;
    color:#666; font-size:0.78rem; letter-spacing:.05em; text-transform:uppercase;
    margin:18px 0;
    background:none; border:none; padding:0; width:100%; font-family:inherit;
    cursor:pointer;
  }
  .form-divider::before, .form-divider::after{
    content:''; flex:1; height:1px; background:var(--line);
  }
  .form-divider:hover{ color:var(--white); }
  .form-divider-label{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
  .form-divider .chevron{ flex-shrink:0; transition:transform .2s; }
  .form-divider[aria-expanded="true"] .chevron{ transform:rotate(180deg); }

  /* ===== PROFILE PAGE ===== */
  .profile-page{
    max-width:780px;
    margin:0 auto;
    padding:70px 32px 100px;
  }
  .profile-loading{
    text-align:center;
    padding:80px 0;
    color:var(--grey);
  }
  .profile-page h1{
    font-size:var(--type-h1);
    margin:14px 0 0;
  }
  .profile-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    border-radius:8px;
    overflow:hidden;
    margin-top:12px;
  }
  .stat-item{
    background:var(--card);
    padding:24px 28px;
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .stat-val{
    font-family:'Space Grotesk', sans-serif;
    font-size:1.3rem;
    font-weight:700;
    color:var(--white);
  }
  .stat-label{
    font-size:0.8rem;
    color:var(--grey);
    letter-spacing:0.05em;
    text-transform:uppercase;
  }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 900px){
    :root{ --header-h: 89px; }
    nav{display:none;}
    .ed-hero-link-desc{ display:none; }
    /* Cabecera a 3 columnas en móvil: hamburguesa a la izquierda, logo
       centrado de verdad (no depende del ancho del botón de la derecha),
       y el botón de sesión a la derecha. .header-left pasa a "transparente"
       (display:contents) para que el logo y el botón hamburguesa se
       coloquen directamente como columnas del header. */
    header{
      padding:14px 20px;
      display:grid;
      grid-template-columns:1fr auto 1fr;
    }
    .header-left{ display:contents; }
    .mobile-menu-toggle{ display:flex; grid-column:1; grid-row:1; justify-self:start; }
    .logo-mark{ grid-column:2; grid-row:1; justify-self:center; }
    .header-right{ grid-column:3; grid-row:1; justify-self:end; gap:14px; }
    /* Botón "Entrar": en móvil se queda solo el icono de usuario, suelto,
       sin el recuadro (borde/fondo) pensado para un botón con texto. */
    .btn-login[href="login.html"]{ padding:6px; border:none; }
    .btn-login[href="login.html"]:hover{ background:none; }
    .btn-login[href="login.html"] .btn-login-icon{ display:block; }
    .btn-login[href="login.html"] .btn-login-text{ display:none; }
    /* "Mi perfil" / "Cerrar sesión" (con sesión iniciada) reusan la clase
       .btn-login pero no tienen icono equivalente -- en vez del recuadro de
       botón grande pensado para escritorio, texto compacto sin marco, igual
       de discreto que "Salir" (.btn-logout). */
    .btn-login:not([href="login.html"]){ padding:0; border:none; font-size:11px; }
    .btn-login:not([href="login.html"]):hover{ background:none; }
    /* "Mi perfil"/"Salir" de escritorio se ocultan en móvil: en su lugar,
       el icono de usuario abre el menú (.user-menu, definido junto al resto
       de estilos de cuenta) con las mismas opciones. */
    .header-account-link{ display:none; }
    .user-menu{ display:block; }
    /* Menos aire entre el header y el contenido del perfil en móvil. */
    .profile-page{ padding-top:20px; }
    .profile-loading{ padding:30px 0; }
    .highlights-grid{grid-template-columns:repeat(2, 1fr);}
    /* Carrusel: 2 tarjetas visibles en vez de 3, con menos hueco. */
    .hl-carousel{ gap:12px; }
    .hl-carousel > *{ flex-basis:calc((100% - 12px) / 2); }
    /* "Lo mejor de la semana" es la primera sección de comunidad.html, justo
       bajo el header: en móvil se queda pegada arriba y el título cabe en
       una sola línea (si no, con el --type-h2 normal se ve enorme y parte
       en dos, dejando los vídeos muy abajo). */
    #weekly-best{ padding-top:16px; }
    #weekly-best .section-head{ margin-bottom:16px; }
    #weekly-best h2{ font-size:1.2rem; white-space:nowrap; }
    .follow-inner{grid-template-columns:1fr;}
    .product-detail{grid-template-columns:1fr; gap:32px;}
    .benefits-grid{grid-template-columns:1fr;}
    .join-form .form-row{flex-direction:column;}
    section{padding:60px 20px;}
    /* En la tienda, en móvil, se quieren ver los 5 productos sin hacer scroll:
       hero de texto reducido al mínimo (solo el título, más pequeño) y
       cuadrícula a 3 columnas más compacta (2 filas: 3+2) en vez de 2. */
    .page-hero--compact{padding:20px 20px 8px;}
    .page-hero--compact .eyebrow{display:none;}
    .page-hero--compact h1{font-size:1.5rem; margin:0;}
    .page-hero--compact .subtitle{display:none;}
    .page-hero--compact + section{padding-top:12px;}
    .shop-grid{grid-template-columns:repeat(3, 1fr); gap:10px;}
    .shop-card .info{padding:10px;}
    .shop-card .pname{font-size:11px; margin-bottom:3px;}
    .shop-card .pprice{font-size:10px;}
    .shop-card .tag{font-size:8px; padding:3px 6px; top:6px; left:6px;}
    .footer-inner{flex-direction:column; text-align:center;}
  }
  @media (max-width: 480px){
    .highlights-grid{grid-template-columns:1fr 1fr;}
    .hero-cta{flex-direction:column; width:100%; max-width:280px;}
    .btn-primary,.btn-outline{width:100%; text-align:center;}
  }

  /* ===== EDITORIAL HOME (rediseño index.html) ===== */

  /* Textura fibra de carbono genérica de sistema (no tocar .card-bg-carbono) */
  .carbon-texture{
    background:
      linear-gradient(135deg, #1c1c1c, #0a0a0a 70%),
      repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 2px, transparent 2px 5px),
      repeating-linear-gradient(-45deg, rgba(0,0,0,.4) 0 2px, transparent 2px 5px);
    background-blend-mode:normal, overlay, overlay;
  }

  /* Motivo de marca: la pelota (punto lima) */
  .ball-dot{
    display:inline-block;
    width:.14em; height:.14em;
    background:var(--lime);
    border-radius:50%;
    margin-left:.1em;
    vertical-align:baseline;
  }
  .ball-dot--sm{ width:8px; height:8px; margin-left:0; }
  .ball-word{
    font-style:normal;
    color:var(--lime);
  }

  /* ── Hero editorial ── */
  .ed-hero{
    max-width:none;
    position:relative;
    height:calc(100vh - var(--header-h));
    display:flex; flex-direction:column; justify-content:flex-start;
    overflow:hidden;
    padding:clamp(40px, 6vh, 90px) 32px clamp(28px, 5vh, 70px);
    background:var(--black);
  }
  .ed-hero::before{
    content:"";
    position:fixed; inset:0; z-index:1;
    background:linear-gradient(95deg, rgba(4,5,3,.94) 10%, rgba(4,5,3,.6) 50%, rgba(4,5,3,.3) 100%);
    pointer-events:none;
  }
  .ed-hero-bg{
    position:fixed; inset:0; z-index:0;
    width:100%; height:100%;
    object-fit:cover; object-position:65% 46%;
  }
  .ed-hero-inner{
    position:relative; z-index:2;
    max-width:1280px; margin:0 auto; width:100%;
  }
  html.js-motion .ed-hero-foot,
  html.js-motion .ed-hero-links{
    opacity:0;
    transform:translateY(24px);
  }
  /* La foto estática se ve SIEMPRE desde el primer instante (nunca depende de JS ni de
     ningún CDN, así que no hay pantalla negra posible). El vídeo empieza transparente y
     se funde encima con un fundido CSS en cuanto reproduce de verdad en su punto de
     inicio (clase .is-playing, añadida por el script al final del body). Si el vídeo
     tarda, falla o el autoplay está bloqueado, se sigue viendo la foto tranquilamente:
     es el último fotograma del propio vídeo, así que siempre es un fondo válido por sí solo. */
  #introVideo{
    opacity:0;
    transition:opacity .5s ease;
  }
  #introVideo.is-playing{
    opacity:1;
  }
  .ed-hero-title{
    font-family:'Poppins', sans-serif;
    font-size:clamp(2.2rem, 3vw + 4vh, 6rem);
    font-weight:800;
    line-height:0.98;
    letter-spacing:-0.01em;
    text-transform:uppercase;
    color:var(--white);
    margin:14px 0 0;
  }
  .ed-hero-foot{
    display:flex; justify-content:space-between; align-items:flex-end;
    flex-wrap:wrap; gap:24px;
    margin-top:clamp(18px, 3vh, 40px);
  }
  .ed-hero-sub{
    color:var(--grey);
    font-size:clamp(1rem, 1.6vw, 1.15rem);
    line-height:1.65;
    max-width:440px;
  }
  /* ── Hero links (Marca/Shop/Comunidad: botones compactos traslúcidos, caben
     en la propia pantalla del hero, sin necesidad de hacer scroll) ── */
  .ed-hero-links{
    display:flex; flex-wrap:wrap; gap:12px;
    margin-top:clamp(14px, 2.5vh, 28px);
  }
  .ed-hero-link-item{
    flex:1 1 160px;
    display:flex; flex-direction:column; gap:6px;
    padding:16px 20px;
    text-align:center;
    font-family:'Space Grotesk', sans-serif;
    font-size:14px; font-weight:700;
    letter-spacing:0.08em; text-transform:uppercase;
    color:var(--white);
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.2);
    transition:background .25s, border-color .25s;
  }
  .ed-hero-link-item:hover{ background:rgba(255,255,255,.14); }
  /* Descripción tipo CTA bajo cada botón, solo en escritorio (ver media query
     900px): en móvil no cabe sin forzar scroll en el propio hero. */
  .ed-hero-link-desc{
    font-family:'Inter', sans-serif;
    font-size:12px; font-weight:400;
    letter-spacing:normal; text-transform:none;
    color:var(--grey);
  }
  .ed-hero-link-accent .ed-hero-link-desc{ color:rgba(212,255,63,.7); }
  .ed-hero-link-accent{
    color:var(--lime);
    background:rgba(212,255,63,.07);
    border-color:rgba(212,255,63,.3);
  }
  .ed-hero-link-accent:hover{ background:rgba(212,255,63,.13); }

  /* ── Marquee (banda de texto en movimiento) ── */
  /* position+z-index: el fondo del hero es fixed (no se mueve al hacer scroll),
     así que el marquee necesita quedar explícitamente por encima para taparlo. */
  .marquee{
    position:relative; z-index:5;
    overflow:hidden;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:20px 0;
    background:var(--black);
  }
  .marquee-track{
    display:flex;
    width:max-content;
    animation: marquee 30s linear infinite;
  }
  .marquee-seq{
    font-family:'Space Grotesk', sans-serif;
    font-weight:700;
    font-size:clamp(1.1rem, 2.4vw, 1.8rem);
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:#3d3d3d;
    white-space:nowrap;
    padding-right:32px;
  }
  .marquee-seq em{ font-style:normal; color:var(--lime); }
  @keyframes marquee{ to{ transform:translateX(-50%); } }

  /* ── Footer con filete carbono (solo páginas que lleven la clase) ── */
  /* z-index + background propio: el fondo del hero es fixed, así que el footer
     necesita quedar por encima y ser opaco para taparlo del todo al hacer scroll. */
  .footer-carbon{
    border-top:none;
    position:relative; z-index:5;
    background:var(--black);
  }
  .footer-carbon::before{
    content:'';
    position:absolute; top:0; left:0; right:0;
    height:4px;
    background:
      repeating-linear-gradient(45deg, rgba(255,255,255,.14) 0 2px, transparent 2px 5px),
      repeating-linear-gradient(-45deg, rgba(0,0,0,.6) 0 2px, transparent 2px 5px),
      #141414;
  }

  @media (max-width: 900px){
    .ed-hero{ padding-left:20px; padding-right:20px; }
    .ed-hero-foot{ flex-direction:column; align-items:flex-start; }
    .ed-hero-link-item{ flex:1 1 100px; padding:14px 16px; font-size:13px; }
  }

  /* ===== MOTION SYSTEM (GSAP + ScrollTrigger, ver motion.js) ===== */
  :root{
    --ease-pr: cubic-bezier(.65,0,.35,1);
    --dur-fast: .25s; --dur-base: .5s; --dur-slow: .9s;
  }

  /* Visible por defecto: fallback si GSAP no carga o no hay motion.js */
  [data-reveal]{ opacity:1; transform:none; }
  html.js-motion [data-reveal]{ opacity:0; }
  html.js-motion [data-reveal="up"]{ transform:translateY(28px); }
  html.js-motion [data-reveal="down"]{ transform:translateY(-28px); }
  html.js-motion [data-reveal="left"]{ transform:translateX(28px); }
  html.js-motion [data-reveal="right"]{ transform:translateX(-28px); }
  html.js-motion [data-reveal="scale"]{ transform:scale(.92); }

  /* Spotlight genérico reutilizable (tarjetas con data-spotlight) */
  /* Reveal línea a línea (data-reveal-lines): visible por defecto; solo con
     js-motion se recorta cada línea para que el texto entre desde abajo */
  html.js-motion [data-reveal-lines] [data-line]{ display:block; overflow:hidden; }
  [data-reveal-lines] [data-line]{ display:block; }
  [data-reveal-lines] .line-inner{ display:inline-block; }

  [data-spotlight]{ position:relative; overflow:hidden; }
  [data-spotlight]::after{
    content:'';
    position:absolute; inset:0; z-index:1; pointer-events:none;
    opacity:0; transition:opacity .3s;
    background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(212,255,63,.08), transparent 70%);
  }
  [data-spotlight]:hover::after{ opacity:1; }

  /* reduced motion */
  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important;}
    .shop-card .img-area video{ display:none; }
    .shop-card .img-area .video-fallback{ display:block; }
  }

  /* ===== PÁGINA LEGAL (privacidad.html) ===== */
  .legal-page{
    max-width:760px;
    margin:0 auto;
    padding:64px 32px 100px;
  }
  .legal-page h1{ font-size:var(--type-h1); margin-bottom:8px; }
  .legal-page .legal-updated{
    color:var(--grey);
    font-size:13px;
    letter-spacing:0.04em;
    margin-bottom:40px;
  }
  .legal-page h2{
    font-size:1.25rem;
    margin:40px 0 12px;
  }
  .legal-page p, .legal-page li{
    color:#d0d0d0;
    line-height:1.7;
    margin-bottom:14px;
  }
  .legal-page ul{ padding-left:20px; margin-bottom:14px; }
  .legal-page a{ color:var(--lime); text-decoration:underline; }
  .legal-page strong{ color:var(--white); }

  .copyright a{ color:inherit; }
  .copyright a:hover{ text-decoration:underline; }