/* Apps FP Studio — diseño propio del estudio (independiente de Velora) */
:root {
  --fondo: #FFFFFF;
  --gris: #F5F5F7;
  --gris-2: #E8E8ED;
  --tinta: #1D1D1F;
  --suave: #6E6E73;
  --coral: #FF5B2E;
  --ambar: #FFB547;
  --baya: #B4235E;
  --menta: #19C39B;
  --noche: #000000;
  --titulo: "Inter Tight", -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  --cuerpo: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  --curva: cubic-bezier(.2, .7, .1, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 48px; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 400 17px/1.5 var(--cuerpo); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--titulo); letter-spacing: -0.025em; }
a { color: inherit; text-decoration: none; }
img { display: block; }

/* ── Menú superior (estilo Apple) ───────────────── */
.nav { position: fixed; inset: 0 0 auto; z-index: 30; background: rgba(251, 251, 253, 0.8); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
/* Menú abierto: color niebla de la marca, translúcido como vidrio. */
.nav.abierto { background: linear-gradient(rgba(245, 245, 247, 0.5), rgba(232, 232, 237, 0.38)); backdrop-filter: saturate(200%) blur(26px); -webkit-backdrop-filter: saturate(200%) blur(26px); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.6), 0 24px 60px -30px rgba(0, 0, 0, 0.25); }
.nav-fila { width: min(1024px, 100% - 32px); margin: 0 auto; height: 48px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.logo { justify-self: start; display: inline-flex; align-items: center; gap: 6px; color: var(--tinta); }
.logo-iso { width: auto; height: 21px; }
.logo-texto { font: 800 16px var(--titulo); letter-spacing: -0.02em; white-space: nowrap; }
.logo-cursor { animation: parpadeo 1.1s steps(1) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }
.nav-lista { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.nav-item { display: block; padding: 0 12px; line-height: 48px; font-size: 12.5px; color: rgba(0, 0, 0, 0.8); transition: color .2s; }
.nav-item:hover, .nav-item.activo { color: #000; }
.nav-derecha { justify-self: end; display: flex; align-items: center; gap: 4px; }
.nav-icono { display: grid; place-items: center; width: 36px; height: 36px; color: rgba(0, 0, 0, 0.8); border-radius: 50%; }
.nav-icono:hover { color: #000; }
.nav-icono svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.nav-hamburguesa { display: none; width: 40px; height: 40px; border: 0; background: none; cursor: pointer; position: relative; }
.nav-hamburguesa i { position: absolute; left: 11px; width: 18px; height: 1.5px; background: var(--tinta); border-radius: 1px; transition: transform .35s var(--curva), top .35s var(--curva); }
.nav-hamburguesa i:first-child { top: 16px; } .nav-hamburguesa i:last-child { top: 23px; }
.nav-hamburguesa[aria-expanded="true"] i:first-child { top: 19.5px; transform: rotate(45deg); }
.nav-hamburguesa[aria-expanded="true"] i:last-child { top: 19.5px; transform: rotate(-45deg); }

/* Submenús desplegables */
.nav-panel { overflow: hidden; height: 0; transition: height .45s var(--curva); background: transparent; }
.panel { width: min(1024px, 100% - 32px); margin: 0 auto; padding: 36px 0 76px 0; display: none; gap: 64px; }
.panel.visible { display: flex; }
.col { display: grid; align-content: start; gap: 6px; min-width: 150px; }
.col-titulo { font-size: 12px; color: var(--suave); margin-bottom: 8px; }
.col a { font-size: 12.5px; font-weight: 600; color: #333336; padding: 3px 0; opacity: 0; translate: 0 -6px; transition: opacity .3s, translate .3s var(--curva), color .2s; }
.col a.grande { font: 600 24px/1.25 var(--titulo); letter-spacing: -0.02em; color: var(--tinta); }
.col a:hover { color: var(--coral); }
.nav.abierto .panel.visible .col a { opacity: 1; translate: 0 0; }
.panel .col:nth-child(2) a { transition-delay: .04s; } .panel .col:nth-child(3) a { transition-delay: .08s; }
.nav-velo { position: fixed; inset: 0; z-index: 25; background: rgba(232, 232, 237, 0.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.nav-velo.visible { opacity: 1; visibility: visible; }

/* Menú en celular: hoja a pantalla completa */
.menu-movil { position: fixed; inset: 48px 0 0; z-index: 29; background: rgba(245, 245, 247, 0.6); backdrop-filter: saturate(200%) blur(26px); -webkit-backdrop-filter: saturate(180%) blur(28px); padding: 24px 32px 40px; overflow-y: auto; }
.menu-movil[hidden], .mm-vista[hidden] { display: none; }
.mm-principal { display: grid; gap: 2px; }
.mm-principal button, .mm-principal a { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 6px 0; border: 0; background: none; text-align: left; font: 600 28px/1.3 var(--titulo); letter-spacing: -0.02em; color: var(--tinta); cursor: pointer; }
.mm-principal button::after { content: "›"; font-weight: 400; color: var(--suave); }
.mm-atras { border: 0; background: none; font-size: 32px; line-height: 1; color: var(--suave); padding: 0 0 12px; cursor: pointer; }
.mm-contenido .col { margin-bottom: 26px; }
.mm-contenido .col a { opacity: 1; translate: none; font-size: 16px; }
.mm-contenido .col a.grande { font-size: 26px; }
.mm-vista { animation: entrar .4s var(--curva); }
@keyframes entrar { from { opacity: 0; translate: 16px 0; } }

/* ── Botones y enlaces ──────────────────────────── */
.boton { display: inline-flex; align-items: center; min-height: 44px; padding: 11px 22px; border-radius: 999px; background: var(--coral); color: #fff; font: 500 17px var(--cuerpo); transition: transform .3s var(--curva), background .2s; }
.boton:hover { background: #F24A1C; transform: translateY(-1px); }
.enlace { color: var(--coral); font-size: 17px; }
.enlace:hover { text-decoration: underline; }
.enlace.apagado { color: rgba(255, 255, 255, 0.85); }
a:focus-visible { outline: 3px solid rgba(255, 91, 46, 0.45); outline-offset: 3px; border-radius: 8px; }

.sobretitulo { font: 600 17px var(--titulo); color: var(--coral); letter-spacing: -0.01em; }
.sobretitulo.claro { color: var(--ambar); }
.bajada { font-size: clamp(19px, 2.2vw, 24px); line-height: 1.35; color: var(--suave); font-weight: 400; max-width: 680px; }

/* ── Portada ─────────────────────────────────────── */
.portada { padding: 120px 16px 60px; text-align: center; overflow: hidden; background: linear-gradient(#fff 55%, var(--gris)); }
.portada-texto { display: grid; justify-items: center; gap: 14px; position: relative; z-index: 2; }
h1 { font-size: clamp(46px, 8.4vw, 96px); font-weight: 800; line-height: 1.02; letter-spacing: -0.045em; }
.portada .bajada { margin-top: 4px; }
.enlaces { display: flex; align-items: center; justify-content: center; gap: 26px; flex-wrap: wrap; margin-top: 12px; }

/* Escena 3D */
.escena { --rx: -6deg; --ry: 0deg; --giro: 0deg; --escala: 1; height: 560px; margin-top: 20px; perspective: 1600px; perspective-origin: 50% 30%; }
.mundo { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: scale(var(--escala)) rotateX(var(--rx)) rotateY(calc(var(--ry) + var(--giro))); transition: transform .9s var(--curva); }
.disp { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; }
.flota { transform-style: preserve-3d; animation: flotar 7s ease-in-out infinite; }
.disp:nth-child(2) .flota { animation-delay: -1.5s; }
.disp:nth-child(3) .flota { animation-delay: -3s; }
.disp:nth-child(4) .flota { animation-delay: -4.5s; }
.disp:nth-child(5) .flota { animation-delay: -6s; }
@keyframes flotar { 50% { translate: 0 -12px; } }

.marco { position: relative; background: #111114; border-radius: 18px; padding: 9px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.pantalla { width: 100%; height: 100%; border-radius: 10px; overflow: hidden; position: relative; }

/* Televisor (al fondo) */
.tele { width: 560px; margin: -200px 0 0 -280px; transform: translate3d(-30px, -40px, -320px); }
.tele .marco { height: 320px; border-radius: 8px; padding: 5px; background: #0A0A0B; }
.pie-tele { position: relative; width: 40px; height: 34px; margin: 0 auto; background: linear-gradient(90deg, #1C1C20, #3A3A40 50%, #1C1C20); }
.pie-tele::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 240px; height: 9px; translate: -50% 0; border-radius: 5px; background: linear-gradient(#45454B, #1A1A1E); box-shadow: 0 18px 30px -10px rgba(0, 0, 0, 0.45); }
.p-tele { background: #0E0E10; padding: 14px 18px 18px; display: grid; grid-template-rows: auto 1fr auto; gap: 12px; border-radius: 4px; }
.t-menu { display: flex; gap: 12px; } .t-menu i { width: 42px; height: 7px; border-radius: 4px; background: #3A3A40; } .t-menu i.activo { background: #fff; width: 30px; }
.t-banner { display: grid; align-content: end; justify-items: start; gap: 8px; padding: 20px; border-radius: 10px; background: radial-gradient(120% 140% at 80% 20%, var(--ambar), var(--coral) 45%, var(--baya) 80%); }
.t-banner b { width: 45%; height: 16px; border-radius: 8px; background: #fff; }
.t-banner span { width: 30%; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.75); }
.t-banner em { width: 90px; height: 22px; margin-top: 4px; border-radius: 11px; background: #fff; }
.t-fila { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.t-fila i { height: 54px; border-radius: 8px; background: #26262B; }
.t-fila i:first-child { background: #3A3A40; box-shadow: 0 0 0 2px #fff; }

/* Laptop (izquierda) */
.laptop { width: 460px; margin: -150px 0 0 -230px; transform: translate3d(-290px, 40px, 0) rotateY(22deg); }
.laptop .marco { height: 290px; border-radius: 16px 16px 4px 4px; padding: 14px 9px 9px; }
.laptop .marco::before { content: ""; position: absolute; left: 50%; top: 5px; width: 5px; height: 5px; translate: -50% 0; border-radius: 50%; background: #2A2A30; }
.teclado { position: relative; height: 13px; margin: 0 -38px; background: linear-gradient(#E4E4E8, #B9B9C0 60%, #8E8E95); border-radius: 2px 2px 16px 16px; box-shadow: 0 30px 40px -20px rgba(0, 0, 0, 0.4); }
.teclado::after { content: ""; position: absolute; left: 50%; top: 0; width: 80px; height: 5px; translate: -50% 0; border-radius: 0 0 6px 6px; background: linear-gradient(#A2A2A9, #C9C9CF); }
.p-laptop { background: linear-gradient(135deg, #FFD9C9, #F5C2D6 50%, #CFE3FF); border-radius: 4px; }
.l-menu { display: flex; align-items: center; gap: 10px; height: 14px; padding: 0 10px; background: rgba(255, 255, 255, 0.6); }
.l-menu i { width: 26px; height: 4px; border-radius: 2px; background: rgba(29, 29, 31, 0.45); } .l-menu i:first-child { width: 8px; height: 8px; border-radius: 2px; background: var(--tinta); }
.l-menu span { margin-left: auto; width: 34px; height: 4px; border-radius: 2px; background: rgba(29, 29, 31, 0.45); }
.l-ventana { position: absolute; left: 16px; right: 16px; top: 24px; bottom: 44px; display: grid; grid-template-columns: 90px 1fr; border-radius: 9px; overflow: hidden; background: #F7F7F9; box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.35); }
.semaforo { display: flex; gap: 5px; margin-bottom: 4px; } .semaforo i { width: 8px; height: 8px; border-radius: 50%; background: #FF5F57; } .semaforo i:nth-child(2) { background: #FEBC2E; } .semaforo i:nth-child(3) { background: #28C840; }
.l-dock { position: absolute; left: 50%; bottom: 6px; translate: -50% 0; display: flex; gap: 6px; padding: 5px 7px; border-radius: 10px; background: rgba(255, 255, 255, 0.55); }
.l-dock i { width: 20px; height: 20px; border-radius: 5px; background: linear-gradient(135deg, var(--ambar), var(--coral)); } .l-dock i:nth-child(2) { background: linear-gradient(135deg, #5FE0C0, var(--menta)); } .l-dock i:nth-child(3) { background: linear-gradient(135deg, #8FB8FF, #3D7BFF); } .l-dock i:nth-child(4) { background: var(--tinta); } .l-dock i:nth-child(5) { background: linear-gradient(135deg, #D9548A, var(--baya)); } .l-dock i:nth-child(6) { background: #fff; }
.l-lado { background: #ECECF0; padding: 16px 12px; display: grid; align-content: start; gap: 10px; }
.l-lado > i { height: 10px; border-radius: 5px; background: #D2D2D8; }
.l-lado > i:nth-child(2) { background: var(--coral); width: 70%; }
.l-rejilla { padding: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.l-rejilla i { border-radius: 10px; background: linear-gradient(150deg, #FFD9C9, #FFB8A1); }
.l-rejilla i:nth-child(2) { background: linear-gradient(150deg, #FFE7B8, var(--ambar)); }
.l-rejilla i:nth-child(3) { background: linear-gradient(150deg, #F5C2D6, #E07AA3); }
.l-rejilla i:nth-child(4) { background: linear-gradient(150deg, #C9F1E6, #7FDCC2); }
.l-rejilla i:nth-child(5) { background: linear-gradient(150deg, #E2E2E8, #C8C8D0); }
.l-rejilla i:nth-child(6) { background: linear-gradient(150deg, #FFC9B5, var(--coral)); }

/* Pantalla del auto (derecha, arriba) */
.auto { width: 330px; margin: -75px 0 0 -165px; transform: translate3d(330px, -150px, -140px) rotateY(-24deg); }
.auto .marco { height: 150px; border-radius: 22px; padding: 8px; }
.p-auto { background: #0B0B0D; display: grid; grid-template-columns: 34px 70px 1fr; gap: 14px; align-items: center; padding: 10px 18px 10px 8px; border-radius: 15px; }
.a-lado { align-self: stretch; display: grid; justify-items: center; align-content: space-between; padding: 4px 0; border-radius: 10px; background: #1C1C20; }
.a-lado b { font: 700 9px var(--titulo); color: #fff; } .a-lado i { width: 18px; height: 18px; border-radius: 5px; background: linear-gradient(135deg, #5FE0C0, var(--menta)); } .a-lado i:nth-of-type(2) { background: linear-gradient(135deg, var(--ambar), var(--coral)); } .a-lado i:nth-of-type(3) { background: linear-gradient(135deg, #8FB8FF, #3D7BFF); }
.a-avance { height: 3px; margin-top: 4px; border-radius: 2px; background: #2E2E33; } .a-avance span { display: block; width: 45%; height: 100%; border-radius: inherit; background: var(--coral); }
.tablero { position: relative; height: 26px; margin: -4px -26px 0; border-radius: 0 0 26px 26px; background: linear-gradient(#2A2A2E, #141416); box-shadow: 0 30px 40px -20px rgba(0, 0, 0, 0.45); }
.tablero::before, .tablero::after { content: ""; position: absolute; top: 8px; width: 70px; height: 10px; border-radius: 5px; background: repeating-linear-gradient(90deg, #0A0A0B 0 3px, #3A3A40 3px 6px); }
.tablero::before { left: 30px; } .tablero::after { right: 30px; }
.a-icono { width: 70px; height: 70px; border-radius: 14px; background: linear-gradient(135deg, var(--ambar), var(--coral)); }
.a-letra { display: grid; gap: 9px; }
.a-letra i { height: 8px; border-radius: 4px; background: #2E2E33; }
.a-letra i:nth-child(1) { width: 70%; }
.a-letra i.activa { height: 11px; width: 92%; background: #fff; }
.a-letra i:nth-child(3) { width: 80%; }
.a-letra i:nth-child(4) { width: 55%; }

/* Tableta (derecha) */
.tableta { width: 250px; margin: -165px 0 0 -125px; transform: translate3d(280px, 40px, 70px) rotateY(-20deg); }
.tableta .marco { height: 330px; border-radius: 24px; padding: 11px; }
.tableta .marco::before { content: ""; position: absolute; left: 50%; top: 4px; width: 4px; height: 4px; translate: -50% 0; border-radius: 50%; background: #2A2A30; }
.p-tableta { background: #fff; padding: 26px 14px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border-radius: 13px; }
.p-tableta i { border-radius: 10px; background: var(--gris); }
.p-tableta i:nth-child(1) { grid-column: span 2; background: linear-gradient(135deg, var(--menta), #0E8F73); }
.p-tableta i:nth-child(4) { background: linear-gradient(135deg, #FFE1D5, #FFB8A1); }

/* Teléfono (al frente) */
.telefono { width: 150px; margin: -150px 0 0 -75px; transform: translate3d(40px, 50px, 220px) rotateY(-8deg); }
.telefono .marco { height: 300px; border-radius: 32px; padding: 7px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 0 1.5px #3A3A40; }
.telefono .marco::before { content: ""; position: absolute; right: -3.5px; top: 86px; width: 3px; height: 46px; border-radius: 0 2px 2px 0; background: #3A3A40; }
.telefono .marco::after { content: ""; position: absolute; left: -3.5px; top: 70px; width: 3px; height: 70px; border-radius: 2px 0 0 2px; background: linear-gradient(#3A3A40 0 40%, transparent 40% 55%, #3A3A40 55%); }
.p-telefono { background: #fff; border-radius: 26px; padding: 36px 12px 18px; display: grid; grid-template-rows: 70px repeat(3, 34px) 1fr; gap: 9px; }
.f-cabeza { border-radius: 14px; background: linear-gradient(135deg, var(--coral), var(--baya)); }
.f-fila { border-radius: 9px; background: var(--gris); }
.f-barra { align-self: end; height: 40px; border-radius: 14px; background: var(--tinta); }

.isla { position: absolute; left: 50%; top: 8px; width: 48px; height: 15px; translate: -50% 0; border-radius: 8px; background: #000; z-index: 2; }
.estado { position: absolute; left: 14px; right: 14px; top: 10px; display: flex; justify-content: space-between; align-items: center; z-index: 1; }
.estado b { font: 700 9px/1 var(--titulo); color: var(--tinta); }
.estado span { display: flex; gap: 3px; align-items: center; } .estado span i { width: 8px; height: 5px; border-radius: 1.5px; background: var(--tinta); } .estado span i:last-child { width: 14px; height: 7px; border-radius: 2px; }
.p-telefono .estado { left: 18px; right: 18px; top: 12px; }
.indicador { position: absolute; left: 50%; bottom: 6px; width: 48px; height: 4px; translate: -50% 0; border-radius: 2px; background: var(--tinta); }

/* ── Plataformas (fondo negro, se encienden al bajar) ── */
.plataformas { background: var(--noche); color: #fff; height: 230vh; position: relative; }
.plataformas-fijo { position: sticky; top: 0; height: 100vh; display: grid; place-content: center; justify-items: center; text-align: center; gap: 28px; padding: 0 16px; }
.lista-plataformas { max-width: 980px; font: 700 clamp(38px, 7vw, 84px)/1.08 var(--titulo); letter-spacing: -0.04em; }
.lista-plataformas span { color: #2C2C2E; transition: color .5s var(--curva); }
.lista-plataformas span.activa { color: #F5F5F7; }
.lista-plataformas span.activa:last-child, .lista-plataformas span.activa.resalta { color: var(--ambar); }
.plataformas-pie { font-size: clamp(17px, 2vw, 21px); color: #86868B; }
.plataformas-pie strong { display: inline-block; margin-top: 10px; color: #F5F5F7; font-weight: 600; }

/* ── Secciones ───────────────────────────────────── */
.seccion { width: min(1080px, 100% - 32px); margin: 0 auto; padding: 120px 0 40px; }
.encabezado { display: grid; gap: 10px; margin-bottom: 40px; }
h2 { font-size: clamp(38px, 5.6vw, 64px); font-weight: 800; line-height: 1.04; letter-spacing: -0.04em; }
h3 { font-size: 26px; font-weight: 700; line-height: 1.15; }

/* Mosaico de servicios */
.mosaico { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; perspective: 1200px; }
.baldosa { position: relative; min-height: 330px; padding: 34px; border-radius: 28px; background: var(--gris); overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; transition: transform .6s var(--curva); }
.baldosa:hover { transform: scale(1.012); }
.baldosa.grande { grid-column: span 2; }
.baldosa p { color: var(--suave); margin-top: 8px; max-width: 420px; }
.baldosa-texto { position: relative; z-index: 1; }
.figura { position: relative; height: 120px; }
.figura i { position: absolute; display: block; }

.figura svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.figura svg g, .figura svg rect { transform-box: fill-box; }
.f-apple { height: 160px; }
.f-multi, .f-tv, .f-diseno { height: 130px; }
.aparato { filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.16)); }
.flota-a { animation: flotar 6s ease-in-out infinite; }
.flota-b { animation: flotar 6s ease-in-out -2s infinite; }
.flota-c { animation: flotar 6s ease-in-out -4s infinite; }
@keyframes flotar { 50% { transform: translateY(-5px); } }
.f-tv .foco { animation: foco 8s ease-in-out infinite; }
@keyframes foco { 0%, 16% { transform: translateX(0); } 22%, 38% { transform: translateX(46px); } 44%, 60% { transform: translateX(92px); } 66%, 82% { transform: translateX(138px); } 88%, 100% { transform: translateX(0); } }
.f-diseno .puntero { animation: puntero 7s ease-in-out infinite; }
@keyframes puntero { 0%, 12% { transform: translate(206px, 34px); } 30%, 42% { transform: translate(150px, 40px); } 60%, 72% { transform: translate(268px, 40px); } 88%, 100% { transform: translate(206px, 34px); } }
.f-diseno .seleccion { stroke-dasharray: 4 3; animation: hormigas 1.2s linear infinite; }
@keyframes hormigas { to { stroke-dashoffset: -14; } }
.f-nube .enlace-linea { fill: none; stroke: #C7C7CC; stroke-width: 2; stroke-dasharray: 3 5; stroke-linecap: round; }
.f-nube .paquete { fill: var(--coral); }
.f-nube .luz { animation: luz 2.4s ease-in-out infinite; }
.f-nube .l2 { animation-delay: .8s; } .f-nube .l3 { animation-delay: 1.6s; }
@keyframes luz { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* Trabajos */
.trabajos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.trabajo { position: relative; min-height: 520px; border-radius: 32px; padding: 44px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; color: #fff; transition: transform .6s var(--curva); }
.trabajo:hover { transform: scale(1.012); }
.trabajo-texto { display: grid; gap: 12px; justify-items: start; max-width: 420px; }
.trabajo-texto p { color: rgba(255, 255, 255, 0.78); font-size: 19px; line-height: 1.4; }
.trabajo h3 { font-size: clamp(32px, 3.6vw, 44px); letter-spacing: -0.035em; }
.trabajo img { width: 72px; height: 72px; border-radius: 18px; box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.6); }
.t-velora { background: radial-gradient(120% 90% at 100% 100%, #2B2B30, #0B0B0D 60%); }
.t-velora .enlace { color: var(--ambar); }
.trabajo-dato { font: 600 18px var(--titulo); color: rgba(255, 255, 255, 0.6); }
.trabajo-dato b { display: block; font-size: 120px; line-height: 0.9; letter-spacing: -0.06em; color: #fff; }
.t-lyrics { background: linear-gradient(150deg, var(--ambar), var(--coral) 45%, var(--baya)); }
.insignia { font: 600 13px var(--cuerpo); background: rgba(255, 255, 255, 0.22); padding: 5px 12px; border-radius: 999px; backdrop-filter: blur(6px); }
.musica { display: grid; gap: 12px; }
.eq { display: flex; align-items: flex-end; gap: 4px; height: 130px; }
.eq i { flex: 1; height: 100%; border-radius: 4px 4px 2px 2px; background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0.55)); transform-origin: bottom; transform: scaleY(var(--a)); animation: eq var(--t) ease-in-out var(--d) infinite alternate; }
@keyframes eq { to { transform: scaleY(var(--b)); } }
.avance { position: relative; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.3); }
.avance span { position: absolute; inset: 0 auto 0 0; width: 38%; border-radius: inherit; background: #fff; animation: avance 30s linear infinite; }
.avance span::after { content: ""; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #fff; }
@keyframes avance { from { width: 38%; } to { width: 100%; } }
.tiempos { display: flex; justify-content: space-between; font: 600 13px var(--titulo); color: rgba(255, 255, 255, 0.75); font-variant-numeric: tabular-nums; }

/* Globos de tecnologías */
.globos { position: relative; height: 680px; border-radius: 32px; background: var(--gris); overflow: hidden; touch-action: pan-y; }
.globo { position: absolute; left: 0; top: 0; display: grid; place-items: center; text-align: center; border-radius: 50%; font: 700 15px/1.1 var(--titulo); letter-spacing: -0.01em; padding: 10px; user-select: none; -webkit-user-select: none; touch-action: none; cursor: grab; will-change: transform; isolation: isolate; overflow: hidden;
  box-shadow: 0 22px 40px -20px rgba(0, 0, 0, 0.45), inset 0 -10px 18px rgba(0, 0, 0, 0.12), inset 0 8px 16px rgba(255, 255, 255, 0.28); transition: box-shadow .3s, scale .3s var(--curva); }
.globo span { position: relative; z-index: 2; pointer-events: none; }
/* Textura: grano fino encima y un brillo de luz arriba a la izquierda */
.globo::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
.globo::after { content: ""; position: absolute; z-index: 1; left: 14%; top: 9%; width: 42%; height: 30%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0)); filter: blur(2px); transform: rotate(-25deg); }
.globo.agarrado { cursor: grabbing; scale: 1.08; box-shadow: 0 34px 60px -24px rgba(0, 0, 0, 0.55), inset 0 -10px 18px rgba(0, 0, 0, 0.12), inset 0 8px 16px rgba(255, 255, 255, 0.28); z-index: 5; }
/* Acabados distintos según el color */
.globo.tinta::before, .globo.frambuesa::before { opacity: .7; }
.globo.tinta::after { opacity: .35; }
.globo.blanco::before { opacity: .25; mix-blend-mode: multiply; }
.globo.blanco { background: radial-gradient(circle at 35% 30%, #fff, #EDEDF2 60%, #DCDCE3) !important; }
.globo.blanco::after { opacity: .9; }
.globo.xl { width: 156px; height: 156px; font-size: 19px; }
.globo.l { width: 124px; height: 124px; font-size: 17px; }
.globo.m { width: 100px; height: 100px; font-size: 14.5px; }
.globo.s { width: 78px; height: 78px; font-size: 13.5px; }
.globo.tinta { background: radial-gradient(circle at 35% 30%, #3A3A3E, var(--tinta) 70%); color: #fff; }
.globo.coral { background: radial-gradient(circle at 35% 30%, #FF8A66, var(--coral) 70%); color: #fff; }
.globo.ambar { background: radial-gradient(circle at 35% 30%, #FFD08A, var(--ambar) 70%); color: var(--tinta); }
.globo.menta { background: radial-gradient(circle at 35% 30%, #5FE0C0, var(--menta) 70%); color: #fff; }
.globo.frambuesa { background: radial-gradient(circle at 35% 30%, #D9548A, var(--baya) 70%); color: #fff; }
.globo.blanco { background: radial-gradient(circle at 35% 30%, #fff, #ECECF0 75%); color: var(--tinta); }
.globos.quieto { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 12px; padding: 24px; height: auto; }
.globos.quieto .globo { position: static; }

/* Sobre nosotros */
.valores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.valor { display: grid; align-content: start; gap: 12px; padding: 32px; border-radius: 28px; background: var(--gris); }
.valor-num { font: 800 15px var(--titulo); color: var(--coral); }
.valor p { color: var(--suave); }

/* Contacto */
.contacto { text-align: center; padding: 160px 16px 140px; display: grid; justify-items: center; gap: 22px; }
.contacto h2 { font-size: clamp(46px, 8vw, 96px); }
.acento { color: var(--coral); }
.correo { font: 700 clamp(22px, 3.4vw, 38px) var(--titulo); letter-spacing: -0.02em; color: var(--tinta); border-bottom: 3px solid var(--coral); padding-bottom: 4px; transition: color .2s; }
.correo:hover { color: var(--coral); }

/* Pie */
.pie { background: var(--gris); color: var(--suave); font-size: 12.5px; }
.pie-fila { width: min(1024px, 100% - 32px); margin: 0 auto; padding: 22px 0 30px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pie a:hover { color: var(--tinta); text-decoration: underline; }

/* ── Aparición al bajar ──────────────────────────── */
.aparece { opacity: 0; translate: 0 40px; transition: opacity 1s var(--curva), translate 1s var(--curva); }
.aparece.visible { opacity: 1; translate: 0 0; }
.mosaico .aparece:nth-child(2), .trabajos .aparece:nth-child(2) { transition-delay: .08s; }
.mosaico .aparece:nth-child(3) { transition-delay: .04s; }
.mosaico .aparece:nth-child(4) { transition-delay: .1s; }
.mosaico .aparece:nth-child(5) { transition-delay: .16s; }

/* ── Pantallas medianas y chicas ─────────────────── */
@media (max-width: 860px) {
  .nav-lista, .nav-panel { display: none; }
  .nav-hamburguesa { display: block; }
  .nav-fila { grid-template-columns: 1fr auto; }
}
@media (max-width: 900px) {
  .escena { --escala: 0.72; height: 440px; }
  .mosaico { grid-template-columns: 1fr 1fr; }
  .trabajos { grid-template-columns: 1fr; }
  .valores { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .portada { padding-top: 96px; }
  .escena { --escala: 0.4; height: 290px; margin-top: 0; }
  .portada { padding-bottom: 30px; }
  .mosaico { grid-template-columns: 1fr; }
  .baldosa.grande { grid-column: auto; }
  .baldosa { min-height: 280px; padding: 28px; }
  .seccion { padding-top: 90px; }
  .trabajo { min-height: 440px; padding: 30px; }
  .trabajo-dato b { font-size: 88px; }
  .globos { height: 760px; }
  .globo.xl { width: 124px; height: 124px; font-size: 16px; }
  .globo.l { width: 100px; height: 100px; font-size: 15px; }
  .globo.m { width: 84px; height: 84px; font-size: 13px; }
  .globo.s { width: 66px; height: 66px; font-size: 12.5px; }
  .contacto { padding: 110px 16px 100px; }
}

@media (prefers-reduced-motion: reduce) {
  .f-nube .paquete { display: none; } .f-nube .luz { animation: none; }
  html { scroll-behavior: auto; }
  .flota, .logo-cursor, .flota-a, .flota-b, .flota-c, .f-tv .foco, .f-diseno .puntero, .f-diseno .seleccion, .eq i, .avance span { animation: none; }
  .f-diseno .puntero { transform: translate(206px, 34px); }
  .aparece { opacity: 1; translate: none; transition: none; }
  .mundo, .baldosa, .trabajo { transition: none; }
}

/* ── Entrada: el logo crece desde el centro y la cámara lo atraviesa ── */
.intro { display: none; }
.con-intro .intro { display: grid; place-items: center; position: fixed; inset: 0; z-index: 100; background: #fff; color: var(--tinta); animation: intro-fondo 2.2s linear forwards; pointer-events: none; }
.intro-logo { width: 150px; height: auto; animation: intro-logo 2.2s linear forwards; will-change: transform, opacity, filter; transform: scale(.35); opacity: 0; }
.intro-logo .logo-cursor { animation: parpadeo .5s steps(1) infinite; }
@keyframes intro-logo {
  0% { transform: scale(0.350); opacity: 0.00; filter: blur(6.0px); }
  5% { transform: scale(0.364); opacity: 0.42; filter: blur(3.5px); }
  10% { transform: scale(0.396); opacity: 0.83; filter: blur(1.0px); }
  15% { transform: scale(0.442); opacity: 1.00; filter: blur(0.0px); }
  20% { transform: scale(0.507); opacity: 1.00; filter: blur(0.0px); }
  25% { transform: scale(0.594); opacity: 1.00; filter: blur(0.0px); }
  30% { transform: scale(0.711); opacity: 1.00; filter: blur(0.0px); }
  35% { transform: scale(0.867); opacity: 1.00; filter: blur(0.0px); }
  40% { transform: scale(1.077); opacity: 1.00; filter: blur(0.0px); }
  45% { transform: scale(1.359); opacity: 1.00; filter: blur(0.0px); }
  50% { transform: scale(1.743); opacity: 1.00; filter: blur(0.0px); }
  55% { transform: scale(2.271); opacity: 1.00; filter: blur(0.0px); }
  60% { transform: scale(3.003); opacity: 1.00; filter: blur(0.0px); }
  65% { transform: scale(4.029); opacity: 1.00; filter: blur(0.6px); }
  70% { transform: scale(5.480); opacity: 1.00; filter: blur(1.7px); }
  75% { transform: scale(7.554); opacity: 0.89; filter: blur(2.8px); }
  80% { transform: scale(10.551); opacity: 0.71; filter: blur(3.8px); }
  85% { transform: scale(14.927); opacity: 0.54; filter: blur(4.8px); }
  90% { transform: scale(21.383); opacity: 0.36; filter: blur(5.9px); }
  95% { transform: scale(31.006); opacity: 0.18; filter: blur(6.9px); }
  100% { transform: scale(45.500); opacity: 0.00; filter: blur(8.0px); }
}
@keyframes intro-fondo { 0%, 66% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
/* El contenido de la portada aparece cuando termina la entrada */
.con-intro .portada .aparece { transition-delay: 1.55s; }
.con-intro .portada .aparece:nth-child(2) { transition-delay: 1.65s; }
.con-intro .portada .aparece:nth-child(3) { transition-delay: 1.75s; }
.con-intro .escena { animation: intro-escena 1.6s var(--curva) 1.5s both; }
@keyframes intro-escena { from { opacity: 0; translate: 0 60px; } }

/* ── Tecnología por plataforma ── */
/* 6 tarjetas en 2 columnas × 3 filas. */
.pilas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.pila { display: flex; flex-direction: column; gap: 10px; padding: 26px 22px 24px; border-radius: 24px; background: var(--gris); transition: transform .6s var(--curva); }
.pila:hover { transform: scale(1.012); }
.pila-icono { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: #fff; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.25); margin-bottom: 6px; }
.pila-icono svg { width: 24px; height: 24px; fill: none; stroke: var(--coral); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pila h3 { font-size: 21px; letter-spacing: -0.02em; }
.pila p { color: var(--suave); font-size: 15px; line-height: 1.4; }
.etiquetas { list-style: none; margin: 0; padding: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.etiquetas li { font: 600 13px var(--cuerpo); padding: 6px 11px; border-radius: 999px; background: #fff; color: var(--tinta); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
@media (max-width: 640px) {
  .pilas { grid-template-columns: minmax(0, 1fr); }
}