/* ================================================================
   KRAAKEN · estilos
   Para cambiar colores, tamaños o espacios, edita las variables de :root.
   ================================================================ */

@font-face { font-family: "Quablo"; src: url("fonts/Quablo-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Quablo"; src: url("fonts/Quablo-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Quablo"; src: url("fonts/Quablo-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  /* Marca */
  --naranja: #FB4E02;
  --marron: #2B0D00;
  --gris: #DFDFDF;
  --blanco: #FFFFFF;
  /* Fondo del mar (se ve mientras cargan las imágenes) */
  --abismo: #03111a;

  /* Tipografía: Quablo para títulos, subtítulos y botones; Geist Regular para los textos (SemiBold para el correo) */
  --fuente: "Quablo", "Helvetica Neue", Arial, sans-serif;
  --fuente-texto: "Geist", "Helvetica Neue", Arial, sans-serif;
  --t-hero: clamp(40px, 5vw, 112px);       /* h1 de la portada */
  --t-h2: clamp(32px, 4.4vw, 98px);       /* título de cada sección */
  --t-texto: clamp(16px, 1.27vw, 26px);    /* párrafos y listas */
  --t-etiqueta: clamp(12px, .85vw, 17px);  /* «BRANDING», «ESTUDIO CREATIVO» */
  --t-indice: clamp(12px, .97vw, 19.5px);  /* índice de secciones */
  --t-metros: clamp(13px, 1.1vw, 22px);    /* metros de profundidad */
  --t-pista: clamp(10px, .62vw, 13px);     /* «Desliza para sumergirte» */
  --t-credito: clamp(11px, .8vw, 16px);    /* «Design by tonyhall.co» y línea © */
  --abajo: max(22px, calc(env(safe-area-inset-bottom) + 12px));  /* línea de abajo: ©, crédito y final del índice */
  --t-boton: clamp(14px, 1.1vw, 22px);     /* «Hablemos» */

  /* Espacios */
  --margen: max(20px, 4vw);
  --ancho-texto: max(34rem, 46vw);
  --alto-parada: 190vh;   /* cuánto scroll dura cada parada */
  --hueco: clamp(12px, 1.4vw, 30px);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--abismo); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--abismo);
  color: var(--blanco);
  font-family: var(--fuente-texto);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--naranja); outline-offset: 4px; }

/* ---------- Escena de fondo (lienzo 3D) ---------- */
.escena {
  position: fixed; inset: 0; z-index: 0;
  background: var(--abismo) url("img/01-cala.webp") 22% center / cover no-repeat;
}
.escena canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .8s ease; }
.escena.lista canvas { opacity: 1; }

/* ---------- Barra superior ---------- */
.barra {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: max(22px, env(safe-area-inset-top)) max(var(--margen), env(safe-area-inset-right)) 0 max(var(--margen), env(safe-area-inset-left));
  pointer-events: none;
}
.barra a { pointer-events: auto; }
.marca { justify-self: start; }
.barra-cta { justify-self: end; }
.marca img { height: clamp(20px, 1.6vw, 34px); width: auto; }
.barra-cta {
  font-family: var(--fuente);
  font-size: var(--t-boton); font-weight: 600; text-decoration: none; white-space: nowrap;
  padding: .7em 1.25em; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(3, 17, 26, .25);
  backdrop-filter: blur(10px);
  transition: background .25s, border-color .25s;
}
.barra-cta:hover { background: var(--naranja); border-color: var(--naranja); }

/* ---------- Brújula (arriba, centrada; gira con el scroll) ---------- */
.brujula {
  width: clamp(220px, 18.6vw, 400px);
  display: flex; align-items: center; gap: 4.5%;
}
.brujula-linea { flex: 1; height: 1px; background: rgba(255, 255, 255, .55); position: relative; }
/* La línea izquierda de la brújula también marca la profundidad */
.brujula-marca { position: absolute; left: 0; top: -3px; width: 7px; height: 7px; margin-left: -3px; border-radius: 50%; background: var(--naranja); transform: translateX(var(--x, 0px)); }
.brujula-metros { position: absolute; left: 0; top: 9px; font-size: var(--t-pista); letter-spacing: .14em; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--blanco); }
.brujula-rosa { width: 7.4%; min-width: 22px; height: auto; transform: rotate(var(--giro, 0deg)); will-change: transform; }

/* ---------- Indicador de profundidad ---------- */
.profundidad {
  position: fixed; z-index: 9;
  right: max(var(--margen), env(safe-area-inset-right));
  top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  font-size: var(--t-metros); letter-spacing: .14em; font-variant-numeric: tabular-nums;
  color: var(--blanco);
}
.profundidad-linea { position: relative; width: 1px; height: 26vh; background: rgba(255, 255, 255, .25); }
/* ---------- Índice de secciones (abajo a la derecha) ---------- */
.indice {
  position: fixed; z-index: 9;
  right: max(var(--margen), env(safe-area-inset-right));
  /* el último enlace queda en la misma línea que el © y el crédito */
  bottom: calc(var(--abajo) + (var(--t-credito) - var(--t-indice)) * .5);
  display: flex; flex-direction: column; align-items: flex-end;
  font-size: var(--t-indice); line-height: 1.6;
  opacity: 0; visibility: hidden; transition: opacity .6s, visibility .6s;
}
.indice.visible { opacity: 1; visibility: visible; }
.indice a { text-decoration: none; color: rgba(255, 255, 255, .7); transition: color .3s; }
.indice a:hover, .indice a.activo { color: var(--blanco); }
.indice a.activo span { color: var(--naranja); }

.profundidad-marca { position: absolute; left: -3px; top: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--naranja); transform: translateY(var(--y, 0px)); }

/* ---------- Paradas (secciones) ---------- */
main { position: relative; z-index: 2; }
.parada { position: relative; height: var(--alto-parada); }
.parada--inicio { height: calc(var(--alto-parada) * .8); }
.contenido {
  position: sticky; top: 0;
  height: 100svh;
  /* el texto de cada sección queda en el centro de la pantalla: mismo margen arriba y abajo */
  display: flex; flex-direction: column; justify-content: center; gap: var(--hueco);
  padding: max(110px, 13vh) max(var(--margen), env(safe-area-inset-right)) max(110px, 13vh) max(var(--margen), env(safe-area-inset-left));
  max-width: calc(var(--ancho-texto) + 2 * var(--margen));
}
.parada[data-lado="derecha"] .contenido { margin-left: auto; padding-right: calc(var(--margen) + 64px); }
.parada--inicio .contenido { max-width: calc(max(52rem, 64vw) + 2 * var(--margen)); justify-content: flex-start; padding-top: max(110px, 17vh); padding-bottom: max(64px, 9vh); }

.etiqueta {
  margin: 0; font-size: var(--t-etiqueta);
  letter-spacing: .06em; text-transform: uppercase; color: var(--naranja);
}
h1, h2 { margin: 0; font-family: var(--fuente); font-weight: 700; line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: var(--t-hero); max-width: 11em; }
h2 { font-size: var(--t-h2); max-width: 12em; }
.contenido p:not(.etiqueta) { margin: 0; font-size: var(--t-texto); line-height: 1.4; color: var(--blanco); max-width: 22em; }
.servicios { list-style: none; margin: .4em 0 0; padding: 0; font-size: var(--t-texto); line-height: 1.4; }
.servicios li { display: flex; gap: .55em; }
.servicios li::before { content: "-"; }
.entradilla { color: var(--blanco) !important; }
/* En la portada, el titular arriba y la entradilla abajo, para dejar ver al kraken en el horizonte */
.parada--inicio .entradilla { margin-top: auto !important; }

.pista { font-size: var(--t-pista) !important; letter-spacing: .04em; text-transform: uppercase; color: var(--blanco) !important; margin-top: 18px !important; display: flex; align-items: center; gap: 12px; }
.pista::before { content: ""; width: 1px; height: 36px; background: rgba(255, 255, 255, .7); transform-origin: top; animation: pista 2.2s ease-in-out infinite; }
@keyframes pista { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }

.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 8px !important; }
.boton {
  display: inline-block; white-space: nowrap; text-decoration: none; font-family: var(--fuente);
  background: var(--naranja); color: var(--blanco);
  font-weight: 700; font-size: 16px; padding: 15px 28px; border-radius: 999px;
  transition: transform .2s, background .2s;
}
.boton:hover { transform: translateY(-2px); background: #ff6420; }
.correo { user-select: all; color: var(--blanco); font-weight: 600; text-decoration: none; }
.correo:hover { color: var(--naranja); }

/* ---------- Crédito (abajo, centrado) ---------- */
.credito {
  position: fixed; z-index: 9; left: 50%; transform: translateX(-50%);
  bottom: var(--abajo);
  margin: 0; font-size: var(--t-credito); line-height: 1.6; white-space: nowrap; color: var(--blanco);
}
.credito a { text-decoration: none; }
.credito a:hover { color: var(--naranja); }

/* ---------- Línea © (abajo a la izquierda, alineada con el crédito y el índice) ---------- */
.pie {
  position: fixed; z-index: 9;
  left: max(var(--margen), env(safe-area-inset-left));
  bottom: var(--abajo);
  font-size: var(--t-credito); line-height: 1.6; white-space: nowrap; color: var(--blanco);
}
.pie p { margin: 0; }
.pie a { text-decoration: none; }
.pie a:hover { color: var(--naranja); }

/* ---------- Móvil ---------- */
@media (max-width: 700px) {
  .profundidad { top: max(70px, calc(env(safe-area-inset-top) + 56px)); transform: none; flex-direction: row; align-items: center; }
  .profundidad-linea { display: none; }
  .parada[data-lado="derecha"] .contenido { margin-left: 0; padding-right: var(--margen); }
  .contenido { padding-top: max(104px, 14vh); padding-bottom: max(104px, 14vh); }
  .parada--inicio .contenido { padding-top: max(104px, 14vh); padding-bottom: max(104px, 14vh); }
  /* en móvil no caben en una línea: © encima del crédito, los dos centrados */
  .pie { left: 50%; transform: translateX(-50%); bottom: calc(var(--abajo) + var(--t-credito) * 1.6); }
  .indice { display: none; }
  .brujula { width: 26px; }
  .brujula-linea { display: none; }
  .brujula-rosa { width: 26px; min-width: 0; }
}

/* ---------- Sin 3D (sin WebGL o con "reducir movimiento") ---------- */
.sin-3d .escena canvas { display: none; }
.sin-3d .parada { background: var(--fondo, none) center / cover no-repeat; height: auto; min-height: 100svh; }
.sin-3d .contenido { position: relative; min-height: 100svh; }
.sin-3d .escena { background-image: none; }

@media (prefers-reduced-motion: reduce) {
  .pista::before { animation: none; }
  .boton, .barra-cta { transition: none; }
}
.sin-3d .contenido { max-width: none; }
.sin-3d .parada[data-lado="derecha"] .contenido { padding-right: max(var(--margen), env(safe-area-inset-right)); }

/* Móvil y tableta: imagen de portada más ligera mientras carga el vídeo */
@media (max-width: 900px) {
  .escena { background-image: url("img/01-cala-m.webp"); }
}

/* ---------- Página 404 ---------- */
.pagina-404 { background: var(--abismo) url("img/05-ruinas-m.webp") center / cover no-repeat; }
.error-404 {
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: var(--hueco);
  padding: 120px max(var(--margen), env(safe-area-inset-right)) 80px max(var(--margen), env(safe-area-inset-left));
  max-width: calc(var(--ancho-texto) + 2 * var(--margen));
}
.error-404 .marca { position: absolute; top: max(22px, env(safe-area-inset-top)); left: var(--margen); }
.error-404 h1 { font-size: var(--t-h2); }
.error-404 p:not(.etiqueta) { margin: 0; font-size: var(--t-texto); line-height: 1.4; max-width: 22em; }