body { 
  margin: 0;
  font-family: sans-serif;
  background: #fff;
  overflow: hidden;
}

/* ---------------------------- INTRO ---------------------------- */
.intro {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-direction: column;
  z-index: 2000;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  transition: transform 0.8s ease;
}
.intro.move-up { transform: translateY(-120px); pointer-events: none; }

.intro-logo {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: center;
  position: relative;
  z-index: 3000;
  pointer-events: auto;
  margin-bottom: -20px;
}

.logo-icon { width: 100px; animation: moveCompass 6s ease-out forwards; transition: transform 0.8s ease; }
.logo-text { width: 240px; opacity: 0; animation: fadeInLogoText 1.5s ease 6s forwards; transition: transform 0.8s ease; }

.intro.move-up .logo-icon { transform: scale(0.9); }
.intro.move-up .logo-text { transform: scale(0.95); }

@keyframes moveCompass {
  0% { transform: translateX(-100vw) rotate(-1440deg); opacity: 0; }
  100% { transform: translateX(0) rotate(0deg); opacity: 1; }
}
@keyframes fadeInLogoText { to { opacity: 1; } }

/* Capa de clic inicial */
.click-catcher { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 4000; cursor: pointer; }
.intro.move-up .click-catcher { display: none; }

/* ---------------------------- CONTENIDO ---------------------------- */
.content {
  position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; z-index: 1000;
  background-color: rgba(255, 255, 255, 0.8); backdrop-filter: blur(15px);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  opacity: 0; pointer-events: none; transition: opacity 0.8s ease;
}
.content.show { opacity: 1; pointer-events: auto; }

.content-overlay {
  width: 100%; height: 100%; margin-top: 100px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  position: relative; z-index: 500;
}
.img-description { max-width: 420px; width: 100%; margin-top: 100px; margin-bottom: 40px; }

.opciones-container { display: flex; gap: 80px; justify-content: center; flex-wrap: wrap; margin-top: -10px; }
.opcion-link { text-decoration: none; text-align: center; cursor: pointer; transition: transform 0.3s ease, opacity 0.3s ease; }
.opcion-title { font-size: 1.5rem; font-weight: 700; line-height: 1.3; }
.opcion-sub { font-size: 1rem; font-weight: 500; margin-top: 6px; }

.opcion-link.clasica { color: #7da4cc; }
.opcion-link.inmersiva { color: #1c1647; position: relative; display: inline-block; animation: pulseGlow 2s infinite ease-in-out; }
@keyframes pulseGlow { 0%,100%{ text-shadow:0 0 0 transparent } 50%{ text-shadow:0 0 10px rgba(21,15,76,.4) } }
.opcion-link.inmersiva::after {
  content:""; position:absolute; left:0; bottom:-4px; width:100%; height:3px;
  background: linear-gradient(90deg,#1c1647,#3e39a2); transform:scaleX(0); transform-origin:left; transition:transform .4s ease;
}
.opcion-link.inmersiva:hover::after { transform: scaleX(1); }
.opcion-link:hover { transform: translateY(-4px); opacity: .9; }

/* ---------------------------- CIERRE ---------------------------- */
.close-btn { position: absolute; top: 20px; right: 30px; font-size: 30px; color: #1c1647; cursor: pointer; z-index: 1001; transition: transform .2s ease; }
.close-btn:hover { transform: scale(1.2); }

.fade-up { opacity: 0; transform: translateY(30px); transition: opacity .6s ease, transform .6s ease; }
.fade-up.show { opacity: 1; transform: translateY(0); }

/* Enlace del banner sin fondo */
.an-cookies .an-link{
  appearance:none; background:transparent!important; border:none!important; padding:0; margin:0;
  color:var(--an-text); font:inherit; cursor:pointer; text-decoration:underline dotted; text-underline-offset:3px;
}
.an-cookies .an-link:hover{ color:#fff; }
.an-cookies .an-link:focus-visible{ outline:2px solid var(--an-focus); outline-offset:2px; border-radius:6px; }

/* ===== COOKIE FAB: ghost -> color ===== */
.cookie-fab{
  --size:72px;
  position:fixed; right:18px; bottom:18px; z-index:99997;
  width:var(--size); height:var(--size);
  background:transparent !important; border:0 !important; padding:0 !important; box-shadow:none !important;
  cursor:grab; user-select:none; -webkit-user-drag:none; touch-action:none;
}
.cookie-fab:active{ cursor:grabbing; }
.cookie-fab::before{
  content:""; position:absolute; left:50%; top:50%;
  width:160%; height:160%; transform:translate(-50%,-35%);
  background:radial-gradient(ellipse at center, rgba(0,0,0,.14) 0%, rgba(0,0,0,0) 60%);
  filter:blur(4px); opacity:.35; pointer-events:none;
}
.cookie-layer{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; transition:opacity .22s ease; }
.cookie-ghost{ opacity:1; }
.cookie-color{ opacity:0; }
.cookie-fab:hover .cookie-ghost, .cookie-fab:focus-visible .cookie-ghost{ opacity:0; }
.cookie-fab:hover .cookie-color, .cookie-fab:focus-visible .cookie-color{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .cookie-layer{ transition:none; }
  .cookie-fab::before{ filter:none; }
}

/* Kill-switch ajustado: solo al contenedor, no a las capas */
.cookie-fab{ transition:none !important; }
.cookie-fab.is-big { width: var(--size) !important; height: var(--size) !important; }
.cookie-fab:hover .an-fab__img--lg { opacity: 0 !important; }

/* ---------------------------- COOKIE MODAL HEADER ---------------------------- */
.cookie-modal-header { text-align:center; margin:6px 0 18px; }
.cookie-title { font-size:22px; font-weight:800; letter-spacing:.3px; margin:6px 0 10px; }
.cookie-desc { font-size:14px; line-height:1.7; color:var(--an-muted); margin:0 auto; max-width:62ch; }

.cookie-desc a {
  color: var(--cookie-link, #f5c542);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cookie-desc a:hover{ opacity:.9; }
.cookie-desc a:focus-visible{
  outline:2px solid var(--an-focus);
  outline-offset:2px;
  border-radius:4px;
}

/* Colores modo claro */
@media (prefers-color-scheme: light){
  :root{ --cookie-link:#c18a00; }
  .cookie-desc{ color: var(--an-muted); }
}
@media (max-width: 600px) {
  .intro-logo {
    transform: scale(0.7);
    flex-direction: column;
    gap: 0;
  }

  .logo-icon {
    width: 0px;
  }

  .logo-text {
    width: 200px;
    margin-top: 12px;
  }

  .intro {
    padding-top: 40px;
    align-items: center;
  }
}
/* ==== CORRECCIÓN MÓVIL SIN ROMPER DISEÑO HORIZONTAL ==== */
@media (max-width: 600px) {
  .intro-logo {
    flex-direction: row;      /* Mantiene la brújula a la izquierda y el texto a la derecha */
    align-items: center;
    justify-content: center;
    gap: 12px;
    transform: scale(0.85);   /* Escala todo el conjunto */
    flex-wrap: nowrap;        /*  Evita que se salte de línea */
  }

  .logo-icon {
    width: 60px;              /*Brújula más pequeña pero visible */
  }

  .logo-text {
    width: 160px;             /*Texto más pequeño */
    margin-top: 0;
  }

  .intro {
    padding-top: 30px;
    align-items: center;
  }

  .img-description {
    max-width: 90%;
    margin-bottom: -5px;
  }

  .opciones-container {
    gap: 40px;
    flex-direction: column;
  }

  .opcion-title {
    font-size: 1.2rem;
  }
}
/* ============================= */
/* MODO OSCURO - COOKIE MODAL    */
/* ============================= */
@media (prefers-color-scheme: dark) {
  body {
    background: #ffffff; /* Fondo general */
    color: #f5f5f5;      /* Texto base claro */
  }

  .cookie-modal-header,
  .cookie-title,
  .cookie-desc,
  .cookie-desc a,
  .cookie-popup p,
  .cookie-popup label,
  .cookie-popup span {
    color: #f0f0f0 !important; /* Texto claro legible */
  }

  .cookie-title {
    color: #ffffff !important; /* Título más visible */
    font-weight: 800;
  }

  .cookie-desc a {
    color: #ffd166 !important; /* Enlaces destacados en oscuro */
  }

  /* Botones en modo oscuro */
  .cookie-popup button {
    background: #1e1e1e;
    color: #f5f5f5;
    border: 1px solid #444;
  }
  .cookie-popup button:hover {
    background: #2a2a2a;
  }
}