/* ─────────────────────────────────────────────────────────────
   1) BASE / RESET / VARIABLES
   ───────────────────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
:root{
  --header-h: 90px;
  --accent:   #8c52ff;
  --ink:      #0b0b0f;
  --paper:    #ffffff;
  --tab-ink:  #121212;
  --tab-active:#e11d2e;
  --news-mobile-pos:center 25%; /* fallback foco mobile */
}
html,body{overflow-x:hidden}
body{
  font-family:'Arial',sans-serif;
  background:var(--ink); color:#fff;
  display:flex; flex-direction:column; min-height:100vh;
}

/* Global scroll behavior */
html, body{ overscroll-behavior-x: none; }


/* ─────────────────────────────────────────────────────────────
   2) HEADER / NAV
   ───────────────────────────────────────────────────────────── */
header{
  position:fixed;top:0;left:0;width:100%;z-index:1000;
  background:#8c52ff;box-shadow:0 4px 8px rgba(0,0,0,.1);padding:15px 20px
}
nav{display:flex;justify-content:space-between;align-items:center;max-width:100vw}

/* Logo */
.logo{display:flex;align-items:center;gap:10px}
.logo img{height:60px;transition:transform .6s ease;transform-style:preserve-3d}
.logo img:hover{transform:rotateY(360deg)}

/* Menú principal */
.menu{display:flex;align-items:center;gap:30px}
.nav-links{list-style:none;display:flex;gap:20px;position:relative}
.nav-links li{position:relative}
.nav-links li a{
  padding:8px 15px;text-decoration:none;color:#fff;font-weight:bold;border-radius:5px;
  transition:background-color .3s ease,color .3s ease
}
.nav-links li a:hover:not(.logo-item){background:#fff;color:#8c52ff}

/* Dropdowns */
.dropdown-menu,.dropdown-submenu{
  display:none;position:absolute;background:#ffffff;border-radius:5px;
  box-shadow:0 4px 6px rgba(0,0,0,.1);top:100%;left:0;list-style:none;padding:5px 0;z-index:10
}
.dropdown:hover>.dropdown-menu{display:block}
.dropdown-menu li:hover>.dropdown-submenu{display:block}
.dropdown-menu li{padding:5px 20px}
.dropdown-submenu{top:0;left:100%}
.dropdown-menu li a{text-decoration:none;color:#333;display:block;padding:8px 15px;border-radius:5px}
.dropdown-menu li a:hover{background:#8c52ff;color:white}

/* Logos de plataforma */
.menu-logo{
  height:40px;width:auto;margin:5px;transition:transform .3s ease,box-shadow .3s ease;border-radius:5px
}
.submenu-logo{
  height:30px;width:auto;margin:5px;transition:transform .3s ease,box-shadow .3s ease;border-radius:5px
}
.menu-logo:hover,.submenu-logo:hover{transform:scale(1.05);box-shadow:0 0 8px #8c52ff}
.nav-links li a.logo-item:hover,.dropdown-menu li a.logo-item:hover{background:transparent}
.dropdown-menu img,.dropdown-submenu img{margin:5px auto;display:block}

/* Buscador */
.search-bar{position:relative;display:flex;align-items:center;width:200px}
.search-bar input{
  display:block;width:100%;height:40px;padding:8px;border:2px solid #ccc;outline:none;border-radius:5px
}
.search-bar input:focus{border-color:#8c52ff}

/* Selector de idioma */
.language-selector{position:relative;display:inline-block}
#lang-btn{border:none;background:none;font-weight:bold;font-size:14px;color:#fff;cursor:pointer;padding:5px}
.lang-menu{
  display:none;position:absolute;right:50%;transform:translateX(50%);
  background:white;box-shadow:0 2px 4px rgba(0,0,0,.1);border-radius:5px;padding:5px
}
.lang-menu li{list-style:none;padding:5px}
.lang-menu li a{text-decoration:none;font-size:14px;font-weight:bold;color:#333;padding:5px;display:block}
.lang-menu li a:hover{color:#8c52ff}
.language-selector:hover .lang-menu{display:block}

/* Hamburguesa */
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer}
.hamburger .bar{width:25px;height:4px;background-color:#fff}


/* ─────────────────────────────────────────────────────────────
   3) LAYOUT PRINCIPAL
   ───────────────────────────────────────────────────────────── */
main{flex:1}
section{margin:0}
/* Compensar el header solo a la primera sección (permite invertir el orden libremente) */
main > section:first-of-type{ margin-top: var(--header-h); }


/* ─────────────────────────────────────────────────────────────
   4) HERO NOTICIAS (ahora abajo)
   ───────────────────────────────────────────────────────────── */
.news-hero{
  position:relative;background:#101018;
  height:calc(100vh - var(--header-h));
  /* sin margin-top aquí, lo gestiona la regla first-of-type */
}
.news-hero__track{position:absolute;inset:0;max-width:100vw}
.news-hero__slide{
  position:absolute;inset:0;opacity:0;transform:scale(1.02);
  transition:opacity .6s ease,transform .8s ease;
}
.news-hero__slide.is-active{opacity:1;transform:scale(1)}
.news-hero__bg{position:absolute;inset:0;display:block;background-size:cover;background-position:center;pointer-events:none}
.news-hero__content{position:absolute;left:5%;bottom:20%;max-width:min(760px,92%)}
.news-hero__content h1{font-size:clamp(24px,4.4vw,48px);line-height:1.05;margin-bottom:.35rem}
.news-hero__content p{margin-bottom:1rem;opacity:1;color:#e9e9f1}

/* Botones */
.btn{display:inline-block;padding:.85rem 1.25rem;border-radius:999px;font-weight:700;text-decoration:none}
.btn--light{background:#fff;color:#111}
.btn--accent{background:var(--accent);color:#fff}

/* Tabs de noticias */
.news-hero__tabs{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:12px;display:flex;gap:10px;max-width:min(1200px,94%);padding:0 10px;z-index:2;
  overflow:auto;scrollbar-width:none;-ms-overflow-style:none;touch-action:pan-x;
}
.news-hero__tabs::-webkit-scrollbar{height:0}
.news-tab{
  background:var(--paper);color:var(--tab-ink);border:0;cursor:pointer;padding:.8rem 1.1rem;border-radius:10px;
  font-weight:800;white-space:nowrap;position:relative;box-shadow:0 6px 18px rgba(0,0,0,.18);opacity:.85;transition:.2s
}
.news-tab:hover{transform:translateY(-1px);opacity:1}
.news-tab.is-active{opacity:1}
.news-tab.is-active::after{
  content:"";position:absolute;left:10px;right:10px;bottom:-6px;height:5px;background:var(--tab-active);border-radius:6px
}


/* ─────────────────────────────────────────────────────────────
   5) HERO RESEÑAS (ahora arriba)
   ───────────────────────────────────────────────────────────── */
.reviews-hero{position:relative;background:#0f0f15;margin:0}
.reviews-hero__stage{
  position:relative;height:calc(100vh - var(--header-h));
  background-size:cover;background-position:center;display:flex;align-items:flex-end;
  overflow:hidden;padding-bottom:30px;
}
.reviews-hero__stage::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.55) 60%,rgba(0,0,0,.88) 100%)
}
.reviews-hero__content{position:relative;z-index:3;margin:0 5% clamp(160px, 28vh, 360px);max-width:min(760px,92%)}
.kicker{text-transform:uppercase;letter-spacing:.2em;font-size:.75rem;opacity:.8;color:#fff}
.reviews-hero__content h2{font-size:clamp(24px,4.2vw,46px);margin:.35rem 0}
.reviews-hero__content p{margin:.3rem 0 1rem;color:#e6e6f2}

/* Cards reseñas */
.reviews-hero__cards{
  position:absolute;left:50%;transform:translateX(-50%);bottom:20px;
  display:flex;gap:16px;padding:0 14px;max-width:min(1200px,96%);
  overflow-x:auto;
  overflow-y:visible; /* ✅ evita que se “corte” el borde superior */
  scroll-snap-type:x mandatory;scroll-snap-stop:always;z-index:5;touch-action:pan-x;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;
  overscroll-behavior-x:contain;
}
.reviews-hero__cards::-webkit-scrollbar{height:0}
.r-card{
  width:200px;min-width:200px;background:#171722;border-radius:16px;overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.35);transform:translateY(0);transition:transform .25s,border-color .25s;
  cursor:pointer;border:2px solid transparent;scroll-snap-align:start
}
.r-card.is-active{transform:translateY(-6px);border-color:var(--accent)}
.r-card img{width:100%;height:130px;object-fit:cover;display:block}
.r-card h3{font-size:15px;padding:9px 10px}


/* ─────────────────────────────────────────────────────────────
   6) DETALLES TIPOGRAFÍA (borde negro SOLO títulos de héroes)
   ───────────────────────────────────────────────────────────── */
.news-hero__content h1,
.reviews-hero__content h2{
  color:#fff;
  -webkit-text-stroke: 1px #000;
  -webkit-text-fill-color: #fff;
  text-shadow:
    0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000,
    1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000,
    0 2px 4px rgba(0,0,0,.5);
  font-weight:900;
}


/* ─────────────────────────────────────────────────────────────
   7) FOOTER
   ───────────────────────────────────────────────────────────── */
footer{
  background-color:#8c52ff;color:white;padding:40px 20px;text-align:center;
  font-family:'Arial',sans-serif;box-shadow:0px -5px 10px rgba(0,0,0,.2);margin-top:auto
}
footer a{color:#f4f4f9;text-decoration:dotted}
.footer-content{display:flex;flex-direction:column;align-items:center}
.footer-logo img{height:60px;margin-bottom:15px;opacity:.9}
.footer-socials{display:flex;gap:15px;justify-content:center;margin-bottom:25px}
.footer-socials img{width:30px;transition:transform .1s ease,opacity .3s ease}
.footer-socials a:hover img{transform:scale(1.2);opacity:.7}
.footer-bottom{font-size:14px;opacity:.8}


/* ─────────────────────────────────────────────────────────────
   8) RESPONSIVE
   ───────────────────────────────────────────────────────────── */

/* Desktop (>= 992px) */
@media (min-width: 992px){
  .news-hero__tabs{
    overflow:visible;
    flex-wrap:wrap; row-gap:10px; justify-content:center;
    touch-action:none; overscroll-behavior:none;
  }
  .news-tab{white-space:normal}

  .reviews-hero__cards{
    position:absolute;left:50%;transform:translateX(-50%);bottom:24px;
    display:grid;grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
    gap:16px;max-width:min(1200px,92%);padding:0 14px;
    overflow:visible; /* ✅ desktop también visible */
    touch-action:none; overscroll-behavior:none;
  }
  .r-card{width:auto;min-width:0}
  .r-card img{height:120px}
}

/* Tablet pequeña (<= 992px) */
@media (max-width:992px){
  .news-hero__content{bottom:22%}
}

/* Mobile (<= 768px) */
@media (max-width:768px){
  .menu{
    display:none;flex-direction:column;align-items:flex-start;gap:15px;width:100%;
    background:#fff;position:absolute;top:70px;left:0;padding:20px;box-shadow:0 4px 6px rgba(0,0,0,.1)
  }
  .menu.active{display:flex}
  .hamburger{display:flex}
  .nav-links{flex-direction:column;gap:10px;width:100%}
  .nav-links li{width:100%}
  .nav-links li a{display:block;padding:10px;text-align:left;width:100%;color:#333;background:#fff;border-radius:5px;margin-bottom:5px}
  .dropdown-menu,.dropdown-submenu{position:static;background:#f9f9f9;margin-left:20px;padding:0;box-shadow:none}
  .dropdown-submenu{margin-left:30px;background:#d0d0d0}
  .menu-logo,.submenu-logo{height:25px}

  /* Reseñas mobile */
  .reviews-hero__stage{
    background-size:cover;background-position:var(--review-mobile-pos, center 35%);background-repeat:no-repeat;
  }

  .news-hero{
    height:auto;aspect-ratio: 15 / 9;min-height:240px;overflow:hidden;touch-action:pan-y;
  }
  .news-hero__bg{background-size:cover;background-position:var(--mpos, var(--news-mobile-pos));background-repeat:no-repeat;}
  .news-hero__track{ touch-action:pan-y; }
  .news-hero__content{ left:5%; bottom:26%; }
  .news-hero__tabs{
    left:0; right:0; transform:none; max-width:100%; padding:0 10px; bottom:8px;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
  .news-hero__tabs::-webkit-scrollbar{height:0}

  /* ✅ más espacio entre botón y cards */
  .reviews-hero__content{margin-bottom:48%}
  .reviews-hero__cards{
    bottom:14px;gap:12px;max-width:96%;
    padding-top:8px; /* ✅ holgura para no ocultar borde al elevarse */
  }
  .r-card{width:56vw;min-width:56vw}
  .r-card img{height:115px}
  .r-card h3{font-size:14px}
}

/* Mobile (<= 768px): altura reseñas */
@media (max-width: 768px){
  .reviews-hero__stage{
    height: calc(95vh - var(--header-h));
  }
}


/* ─────────────────────────────────────────────────────────────
   9) ACCESIBILIDAD
   ───────────────────────────────────────────────────────────── */
.btn:focus,.r-card:focus,.news-tab:focus{outline:2px solid #fff;outline-offset:2px}


/* ─────────────────────────────────────────────────────────────
   10) UTILIDADES / OVERRIDES
   ───────────────────────────────────────────────────────────── */
.reviews-hero__stage{ opacity: 0; transition: opacity .18s ease; }
.reviews-hero__stage.is-ready{ opacity: 1; }

.news-hero__content .news-title,
.news-hero__content .news-desc{ display: none !important; }
.news-hero__content .news-cta{ margin-top: 0; }

.news-hero__slide{ pointer-events: none; z-index: 0; }
.news-hero__slide.is-active{ pointer-events: auto; z-index: 2; }