/* Página provisional «en construcción» de energeaprojects.com: la pieza 404 de Instagram hecha página (24/10/2026).
   Móvil = vertical (como la historia); ordenador = horizontal. Sin JS ni estilos en línea (lo exige la CSP). */
@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url(/fonts/poppins-latin-400.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url(/fonts/poppins-latin-600.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url(/fonts/poppins-latin-700.woff2) format("woff2"); }
:root { --a: #2A8BAF; --b: #2A9A78; --c: #88AE27; --n: #0A0A0B; --blanco: #F5F5F5; --gris: #B4B4BE; --gris-apagado: #8A8A94; }
* { box-sizing: border-box; margin: 0; }
html { background: var(--n); color: var(--blanco); font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; }
body { overflow-x: clip; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

/* Escena: ocupa la pantalla entera */
.escena {
  position: relative; overflow: clip; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: space-between; gap: 4svh;
  padding: max(5svh, env(safe-area-inset-top)) 6vw max(4svh, env(safe-area-inset-bottom));
  container-type: inline-size;
  background-image: linear-gradient(rgb(255 255 255 / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .05) 1px, transparent 1px),
    linear-gradient(rgb(255 255 255 / .022) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .022) 1px, transparent 1px);
  background-size: 108px 108px, 108px 108px, 27px 27px, 27px 27px;
}
.fondo { position: absolute; inset: 0; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; filter: blur(50px); }
.o1 { width: 75vmax; height: 75vmax; left: -25vmax; top: -12vmax; background: radial-gradient(circle, rgb(42 139 175 / .35), transparent 65%); }
.o2 { width: 70vmax; height: 70vmax; right: -25vmax; top: 45%; background: radial-gradient(circle, rgb(136 174 39 / .28), transparent 65%); }
.plano { position: absolute; inset: 0; width: 100%; height: 100%; }
.plano--ancho { display: none; }
.et { font: 15px "JetBrains Mono", ui-monospace, Menlo, monospace; letter-spacing: .1em; fill: var(--gris-apagado); }
.error, .term, .pie { position: relative; }

/* 404 roto */
.error { margin-top: 2svh; padding-bottom: 9svh; }
.g { position: relative; width: max-content; transform: rotate(-6deg); font-weight: 700; font-size: min(52cqi, 30svh); line-height: .82; letter-spacing: -.06em; }
.g span { position: absolute; left: 0; top: 0; white-space: nowrap; }
.g .base { position: relative; background: linear-gradient(100deg, var(--a), var(--b) 45%, var(--c)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.g .ca { color: var(--a); transform: translate(calc(-.029em - var(--px, 0) * .03em), calc(-.011em - var(--py, 0) * .03em)); transition: transform .4s ease-out; opacity: .55; }
.g .cc { color: var(--c); transform: translate(calc(.029em + var(--px, 0) * .03em), calc(.014em + var(--py, 0) * .03em)); transition: transform .4s ease-out; opacity: .5; }
.g .s1 { color: var(--blanco); clip-path: inset(22% 0 70% 0); transform: translateX(.107em); }
.g .s2 { background: linear-gradient(100deg, var(--a), var(--c)); -webkit-background-clip: text; background-clip: text; color: transparent; clip-path: inset(48% 0 41% 0); transform: translateX(-.125em); }
.g .s3 { color: var(--n); -webkit-text-stroke: max(2px, .0054em) var(--c); clip-path: inset(70% 0 22% 0); transform: translateX(.068em); }
.g .s4 { color: var(--blanco); clip-path: inset(8% 0 89% 0); transform: translateX(-.054em); opacity: .85; }

/* cintas de obra: cruzan toda la pantalla */
.cinta {
  position: absolute; left: 50%; width: 220vw; height: 2.4em; display: flex; align-items: center; overflow: hidden; white-space: nowrap;
  font-weight: 700; font-size: clamp(12px, 3.4cqi, 26px); letter-spacing: .16em; box-shadow: 0 14px 40px rgb(0 0 0 / .6);
}
.cinta::before, .cinta::after { content: ""; position: absolute; left: 0; right: 0; height: .35em; background: repeating-linear-gradient(-45deg, var(--n) 0 .46em, transparent .46em .92em); }
.cinta::before { top: 0; } .cinta::after { bottom: 0; }
.cinta span { padding-left: 50vw; }
.c1 { top: 66%; transform: translateX(-50%) rotate(-11deg); background: var(--c); color: var(--n); }
.c2 { top: 78%; transform: translateX(-50%) rotate(7deg); background: var(--a); color: var(--blanco); }

/* terminal */
.term {
  align-self: flex-start; width: 100%; max-width: 660px; margin-top: 6svh; transform: rotate(2.5deg); overflow: hidden; white-space: nowrap;
  background: rgb(16 19 22 / .9); border: 1px solid rgb(255 255 255 / .14); border-radius: 1em; padding: 1em 1.3em 1.2em;
  font-size: clamp(10px, 2.9cqi, 18px); line-height: 1.75; color: var(--gris); box-shadow: 0 30px 60px rgb(0 0 0 / .6);
}
.term .bar { display: flex; gap: .5em; margin-bottom: .5em; align-items: center; font-size: .9em; color: var(--gris-apagado); }
.term .bar i { width: .72em; height: .72em; border-radius: 50%; background: #3a3a40; }
.term .bar i:first-child { background: #e5534b; }
.term b { color: var(--blanco); font-weight: 600; } .term .d { color: #7d8590; letter-spacing: .02em; } .term .e { color: #e5534b; } .term .ok { color: var(--c); } .term .w { color: #E3B341; }
.term.falla { animation: temblor .25s steps(3); }
@keyframes temblor { 33% { translate: -3px 1px; filter: hue-rotate(40deg); } 66% { translate: 4px -2px; } }
.cur { display: inline-block; width: .65em; height: 1.2em; background: var(--c); vertical-align: -.22em; box-shadow: 0 0 12px var(--c); animation: parpadeo 1.1s steps(1) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }

/* pie ordenado */
.pie::before { content: ""; position: absolute; left: -6vw; right: -6vw; top: -18svh; bottom: -4svh; z-index: -1; background: linear-gradient(to bottom, transparent, var(--n) 40%); }
.pie .k { font-size: clamp(13px, 3.4cqi, 24px); color: var(--gris-apagado); transform: rotate(-2deg); transform-origin: left; display: flex; align-items: center; gap: .4em; }
.pie .k .cur { height: 1.1em; }
.rota { position: relative; margin-top: .25em; font-weight: 700; font-size: min(10.2cqi, 7svh); line-height: 1.02; letter-spacing: .01em; height: 2.05em; }
.rota .ly { position: absolute; left: 0; top: 0; white-space: nowrap; }
.rota i { display: inline-block; font-style: normal; }
.rota .l1 { transform: translateY(.122em) rotate(12deg); }
.rota .l2 { transform: translate(.024em, -.098em) rotate(-14deg); }
.rota .l3 { transform: translateY(.098em) rotate(-6deg); }
.rota .l4 { transform: translateY(-.171em) rotate(5deg); }
.rota .base { color: var(--blanco); z-index: 1; }
.rota .base b { background: linear-gradient(90deg, var(--a), var(--c)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rota .ly:not(.base) b { color: inherit; }
.rota .ca { color: var(--a); transform: translate(-.061em, -.024em); opacity: .7; }
.rota .cc { color: var(--c); transform: translate(.061em, .037em); opacity: .6; }
.rota .s1 { color: var(--blanco); clip-path: inset(16% 0 78% 0); transform: translateX(.268em); z-index: 2; }
.rota .s2 { color: var(--c); clip-path: inset(38% 0 57% 0); transform: translateX(-.317em); z-index: 2; }
.rota .s3 { color: var(--blanco); clip-path: inset(72% 0 22% 0); transform: translateX(.22em); z-index: 2; }
.logo { display: block; width: auto; height: clamp(34px, 6cqi, 62px); margin-top: 3svh; padding-top: 3svh; border-top: 1px solid rgb(255 255 255 / .12); box-sizing: content-box; }

/* ordenador / horizontal */
@media (orientation: landscape) and (min-width: 760px) {
  .plano--alto { display: none; } .plano--ancho { display: block; }
  .escena { display: grid; grid-template-columns: 1.15fr .85fr; grid-template-rows: 1fr auto; align-items: center; column-gap: 4vw; padding-inline: 6vw; }
  .error { margin-top: 0; padding-bottom: 0; }
  .c1 { top: 72%; } .c2 { top: 86%; }
  .g { font-size: min(25cqi, 44svh); }
  .cinta { font-size: clamp(13px, 1.6cqi, 26px); }
  .term { margin-top: 0; justify-self: end; font-size: clamp(11px, 1.15cqi, 18px); max-width: none; width: 34em; }
  .pie { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: flex-end; gap: 4vw; }
  .pie .k { font-size: clamp(13px, 1.5cqi, 24px); }
  .rota { font-size: min(4.6cqi, 7.5svh); }
  .logo { margin: 0 0 .6em; padding: 0; border: 0; height: clamp(34px, 3.6cqi, 62px); }
}

/* textos legales */
.legal { max-width: 900px; margin: 0 auto; padding: 28px 16px max(28px, env(safe-area-inset-bottom)); color: var(--gris-apagado); font-size: 0.72rem; line-height: 1.6; text-align: center; display: grid; gap: 4px; }
.legal span { white-space: nowrap; }
@media (min-width: 760px) { .direccion { white-space: nowrap; } }

@media (prefers-reduced-motion: reduce) { .cur { animation: none; } }