/* ==========================================================================
   Oceans Away — landing one-page
   Paleta de marca: azul #2526b5 · cian #0aa7e3 · sol #ffd33d
   Temas: claro (día, por defecto) y oscuro (noche) vía [data-theme]
   ========================================================================== */

:root {
  color-scheme: light;

  /* Marca */
  --blue-brand: #2526b5;
  --blue-sea: #1b2f96;
  --cyan-brand: #0aa7e3;
  --cyan-light: #8edcf8;

  /* Fondo y cielo (día) */
  --bg: #f7fbff;
  --sky-g1: #f7fbff;
  --sky-g2: #e9f5fd;
  --sky-g3: #cdeafa;
  --sky-g4: #a6ddf4;

  /* Tinta */
  --ink: #14267a;
  --ink-soft: rgba(20, 38, 122, 0.68);

  /* Sol */
  --sun-surface: radial-gradient(circle at 38% 34%, #ffe98a, #ffd33d 55%, #ffb347 100%);
  --glow-a: rgba(255, 211, 61, 0.55);
  --glow-b: rgba(255, 211, 61, 0.35);
  --glow-c: rgba(255, 179, 71, 0.25);
  --halo: rgba(255, 211, 61, 0.28);

  /* Olas */
  --wave-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 220' preserveAspectRatio='none'%3E%3Cpath fill='%230aa7e3' fill-opacity='0.35' d='M0,90 C240,120 480,60 720,90 C960,120 1200,60 1440,90 L1440,220 L0,220 Z'/%3E%3C/svg%3E");
  --wave-mid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 220' preserveAspectRatio='none'%3E%3Cpath fill='%232526b5' fill-opacity='0.55' d='M0,100 C240,40 480,160 720,100 C960,40 1200,160 1440,100 L1440,220 L0,220 Z'/%3E%3C/svg%3E");
  --wave-front: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 220' preserveAspectRatio='none'%3E%3Cpath fill='%231b2f96' d='M0,120 C240,180 480,60 720,120 C960,180 1200,60 1440,120 L1440,220 L0,220 Z'/%3E%3C/svg%3E");

  /* Estrellas (solo de noche) */
  --stars-display: none;

  /* Botón secundario */
  --ghost-bg: rgba(37, 38, 181, 0.05);
  --ghost-line: rgba(27, 47, 150, 0.4);
  --ghost-bg-h: rgba(37, 38, 181, 0.12);
  --ghost-line-h: rgba(27, 47, 150, 0.75);
}

/* Tema oscuro (noche) */
[data-theme="dark"] {
  color-scheme: dark;

  --bg: #040b26;
  --sky-g1: #040b26;
  --sky-g2: #0d1b5e;
  --sky-g3: #2526b5;
  --sky-g4: #0aa7e3;

  --ink: #f4f9ff;
  --ink-soft: rgba(244, 249, 255, 0.72);

  /* Luna */
  --sun-surface: radial-gradient(circle at 40% 35%, #ffffff, #e7edf8 55%, #b6c4dd 100%);
  --glow-a: rgba(226, 236, 255, 0.5);
  --glow-b: rgba(196, 214, 255, 0.3);
  --glow-c: rgba(160, 190, 255, 0.2);
  --halo: rgba(214, 228, 255, 0.22);

  --wave-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 220' preserveAspectRatio='none'%3E%3Cpath fill='%230aa7e3' fill-opacity='0.3' d='M0,90 C240,120 480,60 720,90 C960,120 1200,60 1440,90 L1440,220 L0,220 Z'/%3E%3C/svg%3E");
  --wave-mid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 220' preserveAspectRatio='none'%3E%3Cpath fill='%232526b5' fill-opacity='0.5' d='M0,100 C240,40 480,160 720,100 C960,40 1200,160 1440,100 L1440,220 L0,220 Z'/%3E%3C/svg%3E");
  --wave-front: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 220' preserveAspectRatio='none'%3E%3Cpath fill='%23050e2e' d='M0,120 C240,180 480,60 720,120 C960,180 1200,60 1440,120 L1440,220 L0,220 Z'/%3E%3C/svg%3E");

  --stars-display: block;

  --ghost-bg: rgba(244, 249, 255, 0.06);
  --ghost-line: rgba(244, 249, 255, 0.45);
  --ghost-bg-h: rgba(244, 249, 255, 0.14);
  --ghost-line-h: rgba(244, 249, 255, 0.8);
}

/* Transición día/noche: fundido largo tipo amanecer/anochecer */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 1.6s;
  animation-timing-function: ease-in-out;
}

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

html, body {
  height: 100%;
  overflow: clip;               /* one-page, sin scroll */
}

body {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ==========================================================================
   Escena de fondo
   ========================================================================== */

.scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

/* Degradado oceánico en movimiento */
.sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--sky-g1) 0%,
    var(--sky-g2) 40%,
    var(--sky-g3) 70%,
    var(--sky-g4) 100%
  );
  background-size: 100% 135%;
  animation: sky-drift 36s ease-in-out infinite alternate;
}

@keyframes sky-drift {
  from { background-position: 50% 0%; }
  to   { background-position: 50% 100%; }
}

/* Estrellas tenues (solo tema oscuro) */
.stars {
  display: var(--stars-display);
  position: absolute;
  inset: 0 0 45% 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 24%, rgba(255,255,255,.95), transparent 100%),
    radial-gradient(1px 1px at 28% 12%, rgba(255,255,255,.8), transparent 100%),
    radial-gradient(2px 2px at 41% 31%, rgba(255,255,255,.9), transparent 100%),
    radial-gradient(1px 1px at 57% 9%,  rgba(255,255,255,.75), transparent 100%),
    radial-gradient(1.5px 1.5px at 68% 26%, rgba(255,255,255,.9), transparent 100%),
    radial-gradient(2px 2px at 81% 15%, rgba(255,255,255,.8), transparent 100%),
    radial-gradient(1px 1px at 92% 33%, rgba(255,255,255,.7), transparent 100%),
    radial-gradient(1px 1px at 22% 52%, rgba(255,255,255,.7), transparent 100%),
    radial-gradient(1.5px 1.5px at 76% 48%, rgba(255,255,255,.65), transparent 100%);
  animation: twinkle 7s ease-in-out infinite alternate;
}

@keyframes twinkle {
  from { opacity: .55; }
  to   { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Olas SVG en primer plano (tres capas con deriva y parallax distintos)
   -------------------------------------------------------------------------- */

.wave {
  position: absolute;
  left: -40px;
  right: -40px;
  bottom: 0;
  background-repeat: repeat-x;
  background-size: 1440px 100%;
  background-position: 0 bottom;
}

.wave--back {
  height: 34vh;
  opacity: .8;
  background-image: var(--wave-back);
  animation: wave-drift 34s linear infinite;
  transform: translate3d(calc(var(--mx, 0) * 8px), calc(var(--my, 0) * 4px), 0);
}

.wave--mid {
  height: 28vh;
  background-image: var(--wave-mid);
  animation: wave-drift-reverse 26s linear infinite;
  transform: translate3d(calc(var(--mx, 0) * 14px), calc(var(--my, 0) * 7px), 0);
}

.wave--front {
  height: 22vh;
  background-image: var(--wave-front);
  animation: wave-drift 18s linear infinite;
  transform: translate3d(calc(var(--mx, 0) * 22px), calc(var(--my, 0) * 11px), 0);
}

@keyframes wave-drift {
  from { background-position-x: 0; }
  to   { background-position-x: -1440px; }
}

@keyframes wave-drift-reverse {
  from { background-position-x: 0; }
  to   { background-position-x: 1440px; }
}

/* Textura granular casi imperceptible */
.grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .05;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ==========================================================================
   Sol / Luna — también es el interruptor de tema
   ========================================================================== */

.sun {
  position: fixed;
  z-index: 2;
  top: clamp(2.5rem, 9vh, 6rem);
  left: clamp(1.8rem, 9vw, 9rem);
  width: clamp(110px, 18vmin, 180px);
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  background: var(--sun-surface);
  box-shadow:
    0 0 40px  var(--glow-a),
    0 0 110px var(--glow-b),
    0 0 220px var(--glow-c);
  animation: sun-breathe 7s ease-in-out infinite alternate;
}

/* Halo amplio */
.sun::before {
  content: "";
  position: absolute;
  inset: -85%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--halo) 0%, transparent 65%);
  animation: halo-breathe 7s ease-in-out infinite alternate;
  pointer-events: none;
}

.sun:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 6px;
}

@keyframes sun-breathe {
  from {
    box-shadow:
      0 0 40px  var(--glow-a),
      0 0 110px var(--glow-b),
      0 0 220px var(--glow-c);
  }
  to {
    box-shadow:
      0 0 55px  var(--glow-a),
      0 0 150px var(--glow-b),
      0 0 280px var(--glow-c);
  }
}

@keyframes halo-breathe {
  from { transform: scale(1);    opacity: .85; }
  to   { transform: scale(1.12); opacity: 1; }
}

/* ==========================================================================
   Contenido
   ========================================================================== */

/* Móvil: marca y hero concentrados al centro de la página */
.content {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.3rem, 3.6vh, 2.2rem);
  width: 100%;
  padding: 0 1.5rem;
}

.brand {
  text-align: center;
}

.brand__icon {
  width: clamp(96px, 17vmin, 148px);
  height: auto;
}

.brand__name {
  margin-top: .9rem;
  font-family: inherit;
  font-size: clamp(2.4rem, 5.8vmin, 3.6rem);
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.1;
}

.brand__tag {
  margin-top: .5rem;
  font-size: clamp(.95rem, 2.4vmin, 1.25rem);
  letter-spacing: .45em;
  text-indent: .45em;           /* compensa el tracking en texto centrado */
  text-transform: uppercase;
  color: var(--ink-soft);
}

.hero {
  text-align: center;
}

/* Botones — transición suave */
.actions {
  margin-top: clamp(.4rem, 1.5vh, .9rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .8rem 1rem;
}

.cta {
  display: inline-block;
  padding: .95em 2.4em;
  border-radius: 999px;
  font-size: clamp(.95rem, 2vmin, 1.1rem);
  font-weight: 600;
  letter-spacing: .05em;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(120deg, var(--cyan-brand), var(--blue-brand) 60%, var(--cyan-brand));
  background-size: 220% 100%;
  background-position: 0% 50%;
  box-shadow:
    0 8px 28px rgba(10, 167, 227, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition:
    background-position .55s ease,
    transform .35s cubic-bezier(.16, 1, .3, 1),
    box-shadow .35s ease;
}

.cta:hover,
.cta:focus-visible {
  background-position: 100% 50%;
  transform: translateY(-3px);
  box-shadow:
    0 14px 38px rgba(10, 167, 227, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.cta:active { transform: translateY(-1px); }

.cta:focus-visible {
  outline: 2px solid var(--sun-focus, #ffd33d);
  outline-offset: 4px;
}

/* Variante secundaria (contorno) */
.cta--ghost {
  background: var(--ghost-bg);
  box-shadow: inset 0 0 0 1px var(--ghost-line);
  color: var(--ink);
}

.cta--ghost:hover,
.cta--ghost:focus-visible {
  background: var(--ghost-bg-h);
  box-shadow: inset 0 0 0 1px var(--ghost-line-h);
  transform: translateY(-3px);
}

/* ==========================================================================
   Pie discreto
   ========================================================================== */

.footer {
  padding: 0 1rem clamp(.9rem, 2.5vh, 1.4rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem .6rem;
  font-size: .74rem;
  letter-spacing: .03em;
  color: rgba(244, 249, 255, 0.55);
}

.footer a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .3s ease, border-color .3s ease;
}

.footer a:hover,
.footer a:focus-visible {
  color: #fff;
  border-bottom-color: rgba(244, 249, 255, 0.5);
}

.footer__sep { opacity: .5; }

/* ==========================================================================
   Entrada cinematográfica
   ========================================================================== */

.reveal {
  opacity: 0;
  animation: reveal 1.2s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: var(--d, 0s);
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(26px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* ==========================================================================
   Accesibilidad — movimiento reducido
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .sky, .stars,
  .sun, .sun::before,
  .wave--back, .wave--mid, .wave--front,
  .reveal {
    animation: none;
  }
  .reveal { opacity: 1; }
  .cta { transition: none; }
  .wave { transform: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 0s; }
}

/* Pantallas muy bajas (móvil horizontal): compactar */
@media (max-height: 480px) {
  .brand__icon { width: 56px; }
  .sun { top: 1.2rem; width: 90px; }
}