/* =============================================================
   Ludogic — Identidad gráfica oficial
   Fondo azul marino oscuro + acentos en la paleta de marca (azul,
   malva y rojo, tomados del logotipo). Tipografía: Poppins (títulos)
   + Jost (texto). Ver data.js para contenido, render.js/parallax.js
   /hero3d.js para el comportamiento.
   ============================================================= */

:root {
  --navy-deep: #071b33;
  --navy: #0f2c4c;
  --navy-soft: #17395e;
  --red: #d84e4e;
  --red-soft: #e89a9a;
  --white: #f4f8fb;
  --white-dim: rgba(244, 248, 251, 0.72);
  --line: rgba(244, 248, 251, 0.16);
  --focus: #ffd166;
  --void: #030a12;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Jost', Arial, Helvetica, sans-serif;
  /* Azul marino sólido en toda la web: más profesional que un degradado
     que cambia de tono, y evita costuras de color con el fondo del hero. */
  background-color: var(--navy-deep);
  color: var(--white);
  line-height: 1.65;
}

h1, h2, h3 {
  font-family: 'Poppins', 'Jost', Arial, sans-serif;
  line-height: 1.15;
  text-wrap: balance;
  font-weight: 600;
}

a {
  color: var(--red-soft);
  text-decoration: none;
}

img {
  max-width: 100%;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- Partículas ambientales (toda la web) ---------- */

#ambient-particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* ---------- Header / nav ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background-color: rgba(7, 27, 51, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav-wrap {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.75rem;
  padding: 0.9rem 1.5rem;
}

.logo {
  display: flex;
  align-items: center;
  /* Todo lo demás (menú, selector de idioma) se agrupa a la derecha. */
  margin-right: auto;
}

.logo-img {
  display: block;
  height: 26px;
  width: auto;
}

.main-nav ul {
  display: flex;
  gap: 1.9rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav a {
  color: var(--white-dim);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.main-nav a:hover {
  color: var(--red-soft);
}

/* Selector de idioma: los dos botones (EN/ES) siempre visibles, para
   poder cambiar de idioma en cualquier sentido sin tener que adivinar
   qué sigla representa "el otro idioma". El activo es un <span> (no
   navega a ningún sitio); el inactivo es un <a> real al mismo sitio en
   el otro idioma. */
.lang-switch {
  flex: none;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
}

.lang-switch-option {
  padding: 0.3rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--white-dim);
}

.lang-switch-option + .lang-switch-option {
  border-left: 1px solid var(--line);
}

a.lang-switch-option:hover {
  color: var(--red-soft);
}

.lang-switch-option.is-active {
  color: var(--white);
  background-color: rgba(244, 248, 251, 0.08);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
}

.nav-toggle span {
  width: 24px;
  height: 2px;
  background-color: var(--white);
}

/* ---------- Kickers / labels ---------- */

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--white);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.72rem;
  margin: 0 0 1.1rem;
}

.kicker::before,
.kicker::after {
  content: '';
  width: 18px;
  height: 1px;
  background-color: currentColor;
  opacity: 0.6;
}

.kicker-center {
  justify-content: center;
  width: 100%;
}

/* ---------- Hero (puerta 3D) ---------- */

.hero {
  position: relative;
  background: var(--navy-deep);
  /* `main section` (más abajo) pone max-width/margin/padding a todas las
     secciones — el hero necesita ir a sangre completa, sin esa caja. */
  max-width: none;
  margin: 0;
  padding: 0;
}

.hero-scroll {
  position: relative;
  height: 230vh;
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll {
    height: 100vh;
  }

  .hero-sticky {
    position: relative !important;
  }
}

.hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background:
    radial-gradient(60% 55% at 50% 30%, rgba(103, 92, 148, 0.22), transparent 65%),
    radial-gradient(70% 45% at 50% 100%, rgba(103, 92, 148, 0.12), transparent 70%),
    var(--navy-deep);
}

/* Funde el pie del hero con el azul marino sólido del resto de la web,
   para que no se note una costura de color cuando la puerta desaparece. */
.hero-sticky::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22vh;
  background: linear-gradient(180deg, transparent, var(--navy-deep));
  pointer-events: none;
  z-index: 1;
}

#hero-3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero-inner {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 1.5rem;
  padding-top: clamp(4.5rem, 14vh, 8rem);
  text-align: center;
  z-index: 2;
}

.hero-panel {
  background-color: rgba(4, 12, 24, 0.5);
  backdrop-filter: blur(3px);
  border-top: 1px solid rgba(244, 248, 251, 0.22);
  border-bottom: 1px solid rgba(244, 248, 251, 0.22);
  padding: 2.25rem 1.75rem;
}

.hero h1 {
  font-size: clamp(2.1rem, 5.2vw, 3.4rem);
  color: var(--white);
  margin: 0 0 1.1rem;
}

.hero-text {
  font-size: 1.08rem;
  color: var(--white-dim);
  max-width: 520px;
  margin: 0 auto;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 2.2rem;
  flex-wrap: wrap;
}

.scroll-hint {
  margin: 3rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white-dim);
  animation: bob 2.2s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(6px); opacity: 1; }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.85rem;
  border-radius: 2px;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.btn-primary {
  background-color: var(--red);
  color: var(--navy-deep);
}

.btn-primary:hover {
  background-color: var(--red-soft);
  transform: translateY(-2px);
}

.btn-outline {
  background-color: transparent;
  border-color: var(--line);
  color: var(--white);
}

.btn-outline:hover {
  border-color: var(--red-soft);
  color: var(--red-soft);
}

/* Mientras dura el tour automático (tour.js), el botón invierte su
   estilo para que quede claro que hay algo en marcha (deja de verse
   como el botón de reposo, sea cual sea su estilo base). */
.btn.is-touring {
  background-color: transparent;
  border-color: var(--red-soft);
  color: var(--red-soft);
}

/* ---------- Sections ---------- */

main section {
  max-width: 1120px;
  margin: 0 auto;
  padding: 6rem 1.5rem;
}

main section,
.hero {
  scroll-margin-top: 4.5rem;
}

.section-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 4rem;
}

main section h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  color: var(--white);
  margin: 0.4rem 0 0.8rem;
}

.section-intro {
  max-width: 600px;
  margin: 0 auto;
  color: var(--white-dim);
}

/* ---------- Floors (servicios: edificio 3D real, building3d.js) ---------- */

.floors {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* `main section` (más arriba) limita el ancho a 1120px y lo centra — el
   lienzo 3D necesita ir a sangre completa, así que se "escapa" de esa
   caja con el truco clásico de full-bleed dentro de un contenedor
   centrado, en vez de quitarle el max-width a toda la sección (que
   descentraría la cabecera de texto). */
.building-scroll {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  /* Ojo: valores muy altos aquí (probado: 620vh) provocan que el
     navegador deje de pintar contenido cercano — parece un límite de
     tamaño de capa compuesta. 300vh queda con margen de sobra. */
  height: 300vh;
}

@media (prefers-reduced-motion: reduce) {
  .building-scroll {
    height: 100vh;
  }

  .building-sticky {
    position: relative !important;
  }
}

.building-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background-color: var(--navy-deep);
}

#building-3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.building-hint {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  margin: 0;
}

.floor-panels {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

/* Un panel por planta, superpuesto al lienzo 3D: building3d.js decide
   cuál se ve según en qué planta está la cámara en ese momento. */
/* Por defecto TODOS los paneles están visibles (apilados) — así, si
   building3d.js no llega a arrancar (Three.js no carga), sigue habiendo
   contenido en pantalla en vez de una sección vacía. En cuanto arranca,
   solo oculta con .building-hidden los que no tocan mostrarse. */
.floor-panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
  opacity: 1;
  transition: opacity 0.25s linear;
}

.floor-panel.building-hidden {
  opacity: 0;
  pointer-events: none;
}

.floor-panel-inner {
  position: relative;
  max-width: 460px;
  width: 100%;
  background-color: rgba(15, 44, 76, 0.85);
  backdrop-filter: blur(4px);
  border: 1px solid var(--line);
  padding: 1.75rem 2rem;
  text-align: left;
}

.floor-panel-inner::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  border: 1px solid var(--line);
  pointer-events: none;
}

.floor-flag {
  display: inline-block;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-deep);
  background-color: var(--red);
  padding: 0.25rem 0.6rem;
  margin-bottom: 0.75rem;
}

.floor-code {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red-soft);
  margin-bottom: 0.5rem;
}

.floor-panel-inner h3 {
  margin: 0 0 0.5rem;
  font-size: 1.3rem;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.floor-panel-inner .icon {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--red-soft);
}

.floor-panel-inner p {
  margin: 0;
  color: var(--white-dim);
  font-size: 0.94rem;
}

/* ---------- Portfolio ---------- */

.portfolio-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.showcase {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 2.5rem;
  align-items: center;
  background-color: var(--navy);
  border: 1px solid var(--line);
  padding: 2rem;
  text-align: left;
}

.showcase-media {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
}

.showcase-media img {
  width: 100%;
  display: block;
}

.showcase-ribbon {
  position: absolute;
  top: 14px;
  left: 14px;
  background-color: var(--navy-deep);
  border: 1px solid var(--red);
  color: var(--red-soft);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4rem 0.65rem;
}

.showcase-body h3 {
  font-size: 1.55rem;
  margin: 0 0 0.7rem;
  color: var(--white);
}

.showcase-body p {
  color: var(--white-dim);
  margin: 0 0 1.2rem;
}

.tag-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.tag {
  background-color: var(--navy-deep);
  border: 1px solid var(--line);
  color: var(--white-dim);
  font-size: 0.7rem;
  padding: 0.35rem 0.7rem;
}

@media (max-width: 720px) {
  .showcase {
    grid-template-columns: 1fr;
  }
}

/* ---------- Contact: sección normal a pantalla completa, sin
   scroll-jacking — se llega a ella siguiendo el scroll hacia abajo,
   igual en escritorio que en móvil. ---------- */

.contact-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--navy);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.contact-panel {
  position: relative;
  width: 100%;
  max-width: 460px;
  padding: 2.25rem 2rem;
  text-align: center;
  background-color: rgba(15, 44, 76, 0.85);
  backdrop-filter: blur(4px);
  border: 1px solid var(--line);
}

.contact-panel::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  border: 1px solid var(--line);
  pointer-events: none;
}

.contact-form {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  text-align: left;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-field label {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white-dim);
}

.form-field input,
.form-field textarea {
  font: inherit;
  color: var(--white);
  background-color: rgba(4, 12, 24, 0.45);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.75rem 0.9rem;
}

.form-field textarea {
  resize: vertical;
  min-height: 7rem;
}

.contact-form .btn {
  align-self: center;
  margin-top: 0.4rem;
  border: none;
  cursor: pointer;
}

.contact-form .btn:disabled {
  opacity: 0.65;
  cursor: default;
  transform: none;
}

/* Trampa anti-spam de Web3Forms: existe en el DOM (para que los bots la
   rellenen) pero invisible y fuera del flujo de tabulación para personas. */
.botcheck-field {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.contact-form-status {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  text-align: center;
  min-height: 1.2em;
}

.contact-form-status.is-success {
  color: var(--red-soft);
}

.contact-form-status.is-error {
  color: var(--focus);
}

.contact-form-note {
  margin: 0.9rem 0 0;
  font-size: 0.8rem;
  color: var(--white-dim);
  text-align: center;
}

/* ---------- Footer ---------- */

.site-footer {
  text-align: center;
  padding: 2.5rem 1.5rem;
  color: var(--white-dim);
  font-size: 0.85rem;
  border-top: 1px solid var(--line);
  background-color: rgba(4, 12, 24, 0.35);
}

/* ---------- Fade-in on scroll ---------- */

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Responsive nav ---------- */

@media (max-width: 720px) {
  .nav-toggle {
    display: flex;
  }

  .main-nav {
    display: none;
    width: 100%;
    order: 3;
  }

  .main-nav.open {
    display: block;
  }

  .main-nav ul {
    flex-direction: column;
    gap: 0;
    padding: 1rem 0;
  }

  .main-nav li {
    border-top: 1px solid var(--line);
  }

  .main-nav a {
    display: block;
    padding: 0.75rem 1.5rem;
  }

  .nav-wrap {
    flex-wrap: wrap;
  }
}