/* Kroel Graphics — estilos v3 "Pro": negro, blanco y azul, con liquid glass.
   (assets/css/estilos.css es la versión anterior y ya no se usa.) */
:root {
  --negro: #050507;
  --tinta: #0c0d12;
  --blanco: #f5f6f8;
  --gris: #8d919c;
  --azul: #1f5bff;
  --azul-claro: #8fb6ff;
  --linea: rgba(255, 255, 255, .12);
  --fondo: var(--negro);
  --texto: var(--blanco);
  --tenue: var(--gris);
  --titulo: "Anton", "Impact", "Arial Narrow", sans-serif;
  --cuerpo: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --margen: clamp(20px, 5vw, 72px);
  --ancho: 1320px;
  --suave: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 500 16px/1.65 var(--cuerpo); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
::selection { background: var(--azul); color: #fff; }
:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 3px; border-radius: 6px; }

/* Grano fino sobre toda la página */
body::after { content: ""; position: fixed; inset: 0; z-index: 80; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .6  0 0 0 0 .6  0 0 0 0 .6  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- Liquid glass ---------- */
.vidrio {
  position: relative; isolation: isolate; border-radius: 26px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04) 45%, rgba(31, 91, 255, .1));
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(255, 255, 255, .08), inset 0 0 22px rgba(255, 255, 255, .05), 0 24px 60px -24px rgba(0, 0, 0, .7);
}
.vidrio::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 60% at 20% 0%, rgba(255, 255, 255, .22), transparent 60%); }

.mono { font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.azul { color: var(--azul); }
.orbe { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; background: var(--azul); opacity: .5; }

/* ---------- Intro: el logo se forma ---------- */
.intro { position: fixed; inset: 0; z-index: 100; background: #000; display: grid; place-items: center; transition: opacity .7s, visibility .7s; }
.intro video { width: 100%; height: 100%; object-fit: cover; }
.intro__saltar { position: absolute; right: var(--margen); bottom: 28px; padding: 10px 18px; border-radius: 999px; font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); border: 1px solid var(--linea); }
.intro.fuera { opacity: 0; visibility: hidden; }

.progreso { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; background: var(--azul); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- Navegación en cápsula de vidrio ---------- */
.nav { position: fixed; top: 14px; left: 50%; translate: -50% 0; z-index: 50; width: min(calc(100% - 28px), 1180px); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 10px 8px 18px; border-radius: 999px; }
.nav__marca { display: flex; align-items: center; gap: 10px; font: 400 17px/1 var(--titulo); letter-spacing: .06em; text-transform: uppercase; position: relative; z-index: 2; }
.nav__marca img { width: 26px; }
.nav__links { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); font-size: 14px; font-weight: 600; margin-left: auto; }
.nav__links a:not(.btn) { color: #c9ccd4; transition: color .2s; }
.nav__links a:not(.btn):hover { color: #fff; }
.nav__lado { display: flex; align-items: center; gap: 6px; position: relative; z-index: 2; }
.idioma { display: flex; padding: 3px; border-radius: 999px; background: rgba(0, 0, 0, .35); }
.idioma button { min-width: 36px; height: 30px; border-radius: 999px; font: 500 11px/1 var(--mono); letter-spacing: .06em; color: var(--tenue); transition: background .25s, color .25s; }
.idioma button[aria-pressed="true"] { background: #fff; color: #000; }
.nav__toggle { display: none; width: 42px; height: 42px; position: relative; }
.nav__toggle span { position: absolute; left: 10px; right: 10px; height: 2px; background: #fff; transition: transform .3s var(--suave), top .3s var(--suave); }
.nav__toggle span:first-child { top: 16px; } .nav__toggle span:last-child { top: 25px; }
.nav__toggle[aria-expanded="true"] span:first-child { top: 20px; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child { top: 20px; transform: rotate(-45deg); }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border-radius: 999px; background: var(--azul); color: #fff; font-weight: 800; font-size: 15px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 14px 40px -12px var(--azul); transition: transform .25s var(--suave), box-shadow .25s, background .25s; }
.btn:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 20px 50px -10px var(--azul); }
.btn--vidrio { background: linear-gradient(135deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .05)); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid rgba(255, 255, 255, .24); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.btn--vidrio:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 16px 40px -16px rgba(255, 255, 255, .5); }
.btn--mini { min-height: 38px; padding: 0 18px; font-size: 13px; }
.btn--grande { min-height: 68px; padding: 0 44px; font-size: 18px; }

/* ---------- Inicio ---------- */
.hero { position: relative; min-height: 100svh; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 120px var(--margen) 130px; }
.hero .orbe--a { width: 46vmax; height: 46vmax; right: -8vmax; top: 8%; opacity: .42; animation: deriva 14s ease-in-out infinite alternate; }
.hero .orbe--b { width: 22vmax; height: 22vmax; left: 18%; bottom: -10vmax; opacity: .22; }
@keyframes deriva { to { transform: translate3d(-4vmax, 3vmax, 0) scale(1.1); } }
.hero__rejilla { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(var(--linea) 1px, transparent 1px), linear-gradient(90deg, var(--linea) 1px, transparent 1px); background-size: 88px 88px;
  -webkit-mask-image: radial-gradient(70% 70% at 70% 45%, #000, transparent); mask-image: radial-gradient(70% 70% at 70% 45%, #000, transparent); }
.hero__texto { position: relative; z-index: 2; max-width: min(60vw, 900px); }
.ceja { display: inline-flex; align-items: center; gap: 10px; }
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--azul); box-shadow: 0 0 0 0 rgba(31, 91, 255, .7); animation: pulso 2s infinite; }
@keyframes pulso { to { box-shadow: 0 0 0 12px rgba(31, 91, 255, 0); } }
.hero__titulo { font: 400 clamp(62px, 11.2vw, 186px)/.9 var(--titulo); text-transform: uppercase; margin: 22px 0 26px; }
.linea { display: block; }
/* Efecto de enfoque: el texto llega desenfocado, con halo azul, y se afila */
.linea > span { display: inline-block; opacity: 0; filter: blur(26px); text-shadow: -10px 0 30px rgba(31, 91, 255, .9), 10px 0 30px rgba(143, 182, 255, .7); transform: scale(1.06); transition: opacity .9s, filter 1.3s var(--suave), text-shadow 1.5s, transform 1.3s var(--suave); }
.listo .linea > span { opacity: 1; filter: none; text-shadow: none; transform: none; }
.listo .linea:nth-child(2) > span { transition-delay: .12s; } .listo .linea:nth-child(3) > span { transition-delay: .24s; }
.linea .azul { color: var(--azul); }
.hero__sub { max-width: 30em; font-size: clamp(17px, 1.5vw, 21px); color: #b9bcc6; }
.hero__sub strong { color: #fff; }
.rotador { display: inline-block; color: #fff; border-bottom: 2px solid var(--azul); }
.rotador b { display: inline-block; font-weight: 800; transition: opacity .3s, transform .3s; }
.rotador b.sale { opacity: 0; transform: translateY(8px); }
.hero__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero__texto > :not(.hero__titulo), .hero__arte, .hero__pie { opacity: 0; transition: opacity 1s .5s; }
.listo .hero__texto > *, .listo .hero__arte, .listo .hero__pie { opacity: 1; }

.hero__arte { position: absolute; right: -2%; top: 50%; width: min(54vw, 880px); aspect-ratio: 1; translate: 0 -50%; z-index: 1; pointer-events: none; }
.hero__arte > * { position: absolute; transition: translate .7s var(--suave); }
.hero__logo { inset: 4%; width: 92%; height: 92%; object-fit: contain; filter: drop-shadow(0 0 60px rgba(31, 91, 255, .55)); animation: flota 7s ease-in-out infinite alternate; }
@keyframes flota { from { transform: translateY(-10px) rotate(-1.5deg); } to { transform: translateY(12px) rotate(1.5deg); } }
.ficha { padding: 12px 18px; border-radius: 999px; font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.ficha--a { left: 2%; top: 20%; } .ficha--b { right: 8%; top: 12%; } .ficha--c { left: 10%; bottom: 14%; } .ficha--d { right: 4%; bottom: 22%; }
.hero__pie { position: absolute; left: var(--margen); right: var(--margen); bottom: 26px; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.hero__cifras { display: flex; gap: 10px; }
.hero__cifras li { padding: 12px 20px; border-radius: 18px; }
.hero__cifras b { display: block; font: 400 26px/1 var(--titulo); }
.hero__cifras span { font: 500 10px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #c2c5ce; }

/* ---------- Secciones ---------- */
.seccion { position: relative; max-width: var(--ancho); margin: 0 auto; padding: clamp(84px, 11vw, 160px) var(--margen) 0; }
.seccion--ancha { max-width: none; padding-inline: 0; }
.contenedor { max-width: var(--ancho); margin: 0 auto; padding-inline: var(--margen); }
.etiqueta { font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--azul-claro); margin-bottom: 16px; }
.etiqueta::before { content: "// "; color: var(--azul); }
.titulo { font: 400 clamp(40px, 6.4vw, 96px)/.98 var(--titulo); text-transform: uppercase; text-wrap: balance; }
.bajada { max-width: 34em; margin-top: 16px; color: var(--tenue); font-size: clamp(16px, 1.3vw, 19px); }
.centro { display: flex; justify-content: center; margin-top: 36px; }

.ver { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--suave), transform .8s var(--suave), filter 1.1s var(--suave), text-shadow 1.2s; transition-delay: var(--d, 0s); }
.ver.visto { opacity: 1; transform: none; }
.titulo.ver, .contacto__titulo.ver { filter: blur(18px); transform: none; text-shadow: -8px 0 24px rgba(31, 91, 255, .9), 8px 0 24px rgba(143, 182, 255, .6); }
.titulo.ver.visto, .contacto__titulo.ver.visto { filter: none; text-shadow: none; }

/* ---------- Destacados: el currículum en cinco nombres ---------- */
.destacados__lista { margin-top: 48px; border-top: 1px solid var(--linea); }
.destacado { position: relative; display: grid; grid-template-columns: 5ch minmax(0, 1.5fr) minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: clamp(18px, 2.4vw, 34px) 0; border-bottom: 1px solid var(--linea); transition: padding .5s var(--suave), background .4s; }
.destacado__num { font: 500 13px/1 var(--mono); color: var(--azul-claro); }
.destacado__nombre { font: 400 clamp(34px, 6vw, 92px)/.95 var(--titulo); text-transform: uppercase; transition: color .3s, letter-spacing .5s var(--suave); }
.destacado__rol { color: var(--tenue); font-size: 15px; }
.destacado__tag { padding: 8px 14px; border-radius: 999px; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.destacado__tag--vivo { background: var(--azul); color: #fff; border-color: transparent; }
.destacado__img { position: absolute; right: 16%; top: 50%; z-index: 3; width: clamp(180px, 20vw, 300px); aspect-ratio: 4 / 5; padding: 8px; translate: 0 -50%; rotate: 4deg; scale: .8; opacity: 0; pointer-events: none; transition: opacity .35s, scale .5s var(--suave), rotate .5s var(--suave); }
.destacado__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 18px; }
.destacado__img--logo img { object-fit: contain; background: #f1f2f5; padding: 12%; }
@media (hover: hover) {
  .destacados__lista:hover .destacado { opacity: .35; }
  .destacados__lista .destacado:hover { opacity: 1; padding-left: 22px; }
  .destacado:hover .destacado__nombre { color: var(--azul-claro); }
  .destacado:hover .destacado__img { opacity: 1; scale: 1; rotate: -3deg; }
}
.clientes { margin-top: clamp(40px, 5vw, 70px); overflow: hidden; border-block: 1px solid var(--linea); padding: 16px 0; }
.cinta__pista { display: flex; align-items: center; gap: 24px; width: max-content; animation: correr 60s linear infinite; font: 400 clamp(18px, 2.2vw, 28px)/1 var(--titulo); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; color: var(--tenue); }
.cinta__pista i { font-style: normal; font-size: .6em; color: var(--azul); }
@keyframes correr { to { transform: translateX(-50%); } }

/* ---------- Sobre mí: bloque claro con orbes azules ---------- */
.claro { position: relative; overflow: hidden; margin-top: clamp(84px, 11vw, 160px); padding-bottom: clamp(84px, 10vw, 150px); background: #f3f5fa; color: #0b0c10; border-radius: clamp(28px, 4vw, 56px);
  --texto: #0b0c10; --tenue: #555b6b; --linea: rgba(11, 12, 16, .14); margin-inline: clamp(8px, 1.4vw, 20px); }
.claro .orbe { opacity: .32; }
.claro .orbe--a { width: 44vmax; height: 44vmax; left: -14vmax; top: -10vmax; }
.claro .orbe--b { width: 30vmax; height: 30vmax; right: -8vmax; bottom: -8vmax; background: #6aa0ff; }
.claro .etiqueta { color: var(--azul); }
.claro .vidrio { background: linear-gradient(135deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .45)); border-color: rgba(255, 255, 255, .9); box-shadow: inset 0 1px 0 #fff, 0 24px 60px -30px rgba(31, 91, 255, .45); }
.sobre { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.sobre__foto { position: relative; max-width: 400px; aspect-ratio: 4 / 5.4; border-radius: 999px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(31, 91, 255, .6); }
.sobre__foto img { width: 100%; height: 100%; object-fit: cover; }
.parrafo { margin-top: 20px; color: var(--tenue); font-size: clamp(16px, 1.25vw, 18px); max-width: 38em; }
.parrafo strong { color: var(--texto); }
.cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 40px; }
.cifras li { padding: 20px 18px; border-radius: 22px; }
.cifras b { display: block; font: 400 clamp(34px, 4vw, 56px)/1 var(--titulo); color: var(--azul); }
.cifras span { display: block; margin-top: 8px; font: 500 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); }

/* ---------- Servicios ---------- */
.oficios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 52px; }
.oficio { padding: 28px 26px 34px; overflow: hidden; transition: transform .4s var(--suave), border-color .3s; }
.oficio:hover { transform: translateY(-6px); border-color: rgba(143, 182, 255, .7); }
.oficio > span { font: 500 12px/1 var(--mono); color: var(--azul-claro); letter-spacing: .1em; }
.oficio h3 { font: 400 clamp(24px, 2.4vw, 32px)/1.1 var(--titulo); text-transform: uppercase; margin: 44px 0 12px; }
.oficio p { color: #b3b7c2; font-size: 15px; }

/* ---------- Un logo, varios materiales ---------- */
.materiales { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.materiales__botones { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-top: 30px; padding: 6px; border-radius: 999px; }
.materiales__botones button { min-height: 44px; padding: 0 20px; border-radius: 999px; font-weight: 700; font-size: 14px; transition: background .25s, color .25s; }
.materiales__botones button[aria-pressed="true"] { background: #fff; color: #000; }
.materiales__escena { position: relative; aspect-ratio: 1; max-width: 560px; width: 100%; justify-self: center; }
.materiales__escena .orbe { inset: 14%; opacity: .45; }
.materiales__escena img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; opacity: 0; scale: .82; filter: blur(14px) drop-shadow(0 30px 40px rgba(0, 0, 0, .5)); transition: opacity .5s, scale .7s var(--suave), filter .7s var(--suave); }
.materiales__escena img.activo { opacity: 1; scale: 1; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .5)); }
.materiales__escena [data-m="cromo"] { filter: hue-rotate(-70deg) saturate(.9) blur(14px); }
.materiales__escena [data-m="cromo"].activo { filter: hue-rotate(-70deg) saturate(.9) drop-shadow(0 30px 40px rgba(0, 0, 0, .5)); }
.materiales__escena [data-m="tinta"] { inset: 14%; width: 72%; height: 72%; }

/* ---------- Mesa de trabajo ---------- */
.mesa__cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.solo-tactil { display: none; }
@media (hover: none), (pointer: coarse) { .solo-raton { display: none; } .solo-tactil { display: inline; } }
.mesa { --w: clamp(120px, 15vw, 210px); position: relative; height: clamp(440px, 46vw, 620px); margin-top: 40px; border-radius: 28px; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, #121a3a, var(--tinta) 70%); border: 1px solid var(--linea); }
.carta { position: absolute; width: var(--w); aspect-ratio: 1; left: calc(var(--x, .5) * (100% - var(--w))); top: calc(var(--y, .5) * (100% - var(--w))); rotate: var(--giro, 0deg); border-radius: 12px; overflow: hidden; background: #0d0e13; box-shadow: 0 18px 44px -10px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .16); transition: left .9s var(--suave), top .9s var(--suave), rotate .9s var(--suave), scale .25s var(--suave), box-shadow .25s; touch-action: manipulation; }
.carta img { width: 100%; height: 100%; object-fit: cover; object-position: top; pointer-events: none; }
.carta--logo img { object-fit: contain; padding: 10%; }
.carta--logo[data-tono="light"] { background: #f1f2f5; }
@media (hover: hover) and (pointer: fine) {
  .carta { cursor: grab; } .carta:hover { scale: 1.05; }
  .carta.en-mano { cursor: grabbing; scale: 1.1; rotate: 0deg; box-shadow: 0 40px 80px -10px rgba(0, 0, 0, .9), 0 0 0 2px var(--azul); transition: scale .2s, rotate .2s, box-shadow .2s; }
}

/* ---------- Piezas del portafolio ---------- */
.pieza { position: relative; display: block; overflow: hidden; border-radius: 14px; background: var(--tinta); cursor: zoom-in; }
.pieza img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--suave); }
.pieza:hover img, .pieza:focus-visible img { transform: scale(1.06); }
.pieza__pie { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 10px 14px; border-radius: 12px; text-align: left; background: rgba(8, 9, 14, .6); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .16); opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; pointer-events: none; }
.pieza__pie b { display: block; font-size: 14px; font-weight: 800; line-height: 1.2; }
.pieza__pie span { font-size: 12px; color: #c2c5ce; }
.pieza:hover .pieza__pie, .pieza:focus-visible .pieza__pie { opacity: 1; transform: none; }
.columnas { columns: 4; column-gap: 14px; margin-top: 48px; }
.columnas .pieza { margin-bottom: 14px; break-inside: avoid; }
.columnas .pieza img { height: auto; }
.columnas:not(.todo) .pieza:nth-child(n+13) { display: none; }
.mosaico { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(150px, 21vw, 300px); gap: 12px; margin-top: 48px; }
.mosaico .pieza:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.mosaico .pieza:nth-child(2) { grid-column: span 2; }
.mosaico .pieza:nth-child(1) img { filter: grayscale(1) contrast(1.1); }
.artes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.artes .pieza { aspect-ratio: 1; }

/* Carrusel 3D de portadas */
.flujo { margin-top: 44px; outline-offset: -4px; }
.flujo__escena { --lado: clamp(210px, 30vw, 420px); position: relative; height: calc(var(--lado) + 40px); perspective: 1300px; overflow: hidden; touch-action: pan-y; }
.flujo__item { position: absolute; left: 50%; top: 20px; width: var(--lado); height: var(--lado); margin-left: calc(var(--lado) / -2); border-radius: 16px; overflow: hidden; transition: transform .7s var(--suave), opacity .5s; box-shadow: 0 30px 70px -20px #000; cursor: pointer; }
.flujo__item img { width: 100%; height: 100%; object-fit: cover; }
.flujo__item.es-centro { cursor: zoom-in; box-shadow: 0 30px 90px -20px var(--azul), 0 0 0 1px rgba(255, 255, 255, .25); }
.flujo__pie { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 10px; padding-inline: var(--margen); }
.flujo__titulo { min-width: min(52vw, 340px); text-align: center; }
.flujo__titulo b { display: block; font: 400 clamp(20px, 2.4vw, 30px)/1.1 var(--titulo); text-transform: uppercase; letter-spacing: .02em; }
.flujo__titulo span { font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); }
.flujo__nav { flex: none; width: 50px; height: 50px; border-radius: 50%; font-size: 20px; }
.riel { overflow: hidden; margin-top: 44px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.riel__pista { display: flex; gap: 12px; width: max-content; animation: correr 120s linear infinite reverse; }
.riel:hover .riel__pista, .riel:focus-within .riel__pista { animation-play-state: paused; }
.riel .pieza { width: clamp(110px, 12vw, 170px); aspect-ratio: 1; flex: none; border-radius: 10px; }

/* Muro de logos animados */
.muro { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 48px; }
.logo { position: relative; aspect-ratio: 1; border-radius: 18px; display: grid; place-items: center; overflow: hidden; cursor: zoom-in; transition: transform .4s var(--suave), border-color .3s; }
.logo[data-tono="dark"] { background: linear-gradient(145deg, #14151c, #0a0b0f); border: 1px solid var(--linea); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.logo[data-tono="light"] { background: #f1f2f5; }
.logo img { width: 86%; height: 86%; object-fit: contain; animation: respira 5s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -.7s); transition: transform .5s var(--suave); }
@keyframes respira { from { translate: 0 -3px; scale: .97; } to { translate: 0 3px; scale: 1.03; } }
/* Destello que recorre la forma exacta de cada logo: una copia aclarada que se asoma por una franja */
.logo .logo__brillo { position: absolute; inset: 7%; width: 86%; height: 86%; pointer-events: none; filter: brightness(2.6) saturate(.4) drop-shadow(0 0 6px rgba(143, 182, 255, .9));
  -webkit-mask: linear-gradient(105deg, transparent 43%, #000 50%, transparent 57%) no-repeat; mask: linear-gradient(105deg, transparent 43%, #000 50%, transparent 57%) no-repeat;
  -webkit-mask-size: 280% 100%; mask-size: 280% 100%; -webkit-mask-position: 140% 0; mask-position: 140% 0;
  animation: respira 5s ease-in-out infinite alternate, destello 6s linear infinite; animation-delay: calc(var(--i, 0) * -.7s), calc(var(--i, 0) * .45s); }
.logo[data-tono="light"] .logo__brillo { filter: brightness(1.7) drop-shadow(0 0 6px rgba(31, 91, 255, .9)); }
@keyframes destello { 0%, 62% { -webkit-mask-position: 140% 0; mask-position: 140% 0; } 100% { -webkit-mask-position: -40% 0; mask-position: -40% 0; } }
.logo:hover { transform: translateY(-6px); border-color: var(--azul-claro); }
.logo:hover img { transform: scale(1.1) rotate(-3deg); }
/* Entrada: cada logo se arma desde el desenfoque */
.logo.ver { filter: blur(14px); transform: scale(.7); }
.logo.ver.visto { filter: none; transform: none; }

/* ---------- Proceso ---------- */
.pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 52px; }
.pasos li { padding: 26px 24px 30px; }
.pasos li > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--azul); font: 400 19px/1 var(--titulo); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.pasos h3 { font: 400 clamp(24px, 2.2vw, 30px)/1.1 var(--titulo); text-transform: uppercase; margin: 34px 0 10px; }
.pasos p { color: #b3b7c2; font-size: 15px; }

/* ---------- Trayectoria ---------- */
.linea-tiempo { margin-top: 56px; border-top: 1px solid var(--linea); }
.linea-tiempo li { display: grid; grid-template-columns: minmax(140px, .5fr) 1fr 1.2fr; gap: 24px; align-items: baseline; padding: 30px 0; border-bottom: 1px solid var(--linea); transition: padding .4s var(--suave), background .4s; }
.linea-tiempo li:hover { padding-inline: 18px; background: rgba(31, 91, 255, .08); }
.linea-tiempo time { font: 500 13px/1 var(--mono); letter-spacing: .08em; color: var(--azul-claro); text-transform: uppercase; }
.linea-tiempo h3 { font: 400 clamp(26px, 3vw, 42px)/1.05 var(--titulo); text-transform: uppercase; }
.linea-tiempo p { color: var(--tenue); }

/* ---------- Código ---------- */
.experimentos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 48px; }
.experimento { display: block; padding: 24px 22px 28px; transition: transform .4s var(--suave), border-color .3s; }
.experimento:hover { transform: translateY(-6px); border-color: var(--azul-claro); }
.chip { display: inline-block; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--azul-claro); padding: 7px 10px; border-radius: 999px; background: rgba(31, 91, 255, .2); }
.experimento h3 { font: 400 28px/1.1 var(--titulo); text-transform: uppercase; margin: 44px 0 10px; }
.experimento p { color: #b3b7c2; font-size: 15px; }

/* ---------- Contacto ---------- */
.contacto { position: relative; isolation: isolate; overflow: hidden; margin-top: clamp(84px, 11vw, 160px); padding: clamp(90px, 13vw, 190px) var(--margen); text-align: center; border-top: 1px solid var(--linea); }
.contacto .orbe { width: 60vmax; height: 40vmax; left: 50%; bottom: -24vmax; translate: -50% 0; opacity: .45; z-index: -1; }
.contacto__titulo { font: 400 clamp(46px, 9vw, 150px)/.95 var(--titulo); text-transform: uppercase; }
.contacto .hero__acciones { justify-content: center; margin-top: 44px; }
.contacto__surf { position: absolute; left: clamp(-20px, 3vw, 80px); bottom: 0; width: clamp(180px, 24vw, 400px); filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6)); }
.contacto__cohete { position: absolute; right: clamp(0px, 5vw, 110px); top: 8%; width: clamp(120px, 15vw, 250px); animation: vuelo 5s ease-in-out infinite alternate; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .5)); }
@keyframes vuelo { from { translate: -10px 12px; rotate: -3deg; } to { translate: 10px -14px; rotate: 3deg; } }
.contacto .redes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 46px; }
.contacto .redes a { display: block; padding: 12px 20px; border-radius: 999px; font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; transition: background .25s, color .25s; }
.contacto .redes a:hover { background: #fff; color: #000; }
.pie { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px var(--margen); border-top: 1px solid var(--linea); font: 500 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); }
.pie img { width: 30px; }
.pie a:hover { color: #fff; }

/* ---------- Flotantes ---------- */
.flotante { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 40; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 14px 34px -8px rgba(37, 211, 102, .7); opacity: 0; translate: 0 20px; pointer-events: none; transition: opacity .35s, translate .35s var(--suave), scale .25s var(--suave); }
.flotante.visible { opacity: 1; translate: 0 0; pointer-events: auto; }
.flotante:hover { scale: 1.08; }
.despegue { position: fixed; left: max(14px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom)); z-index: 40; width: 60px; height: 60px; opacity: 0; translate: 0 30px; pointer-events: none; transition: opacity .35s, translate .35s var(--suave), scale .25s var(--suave); }
.despegue img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .6)); }
.despegue.visible { opacity: 1; translate: 0 0; pointer-events: auto; }
.despegue:hover { scale: 1.15; }
.despegue.vuela { transition: translate 1s cubic-bezier(.5, 0, .9, .4), opacity .3s .8s; translate: 60vw -120vh; opacity: 0; }

/* ---------- Visor ---------- */
.visor { position: fixed; inset: 0; z-index: 90; background: rgba(3, 4, 8, .9); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 16px; animation: aparecer .25s both; }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
.visor[hidden] { display: none; }
.visor__figura { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.visor__figura img { max-width: 100%; max-height: calc(100svh - 130px); width: auto; border-radius: 12px; box-shadow: 0 30px 90px rgba(0, 0, 0, .7); }
.visor__figura img.logo-claro { background: #f1f2f5; padding: 5%; }
.visor__figura img.logo-oscuro { background: #0d0e13; padding: 5%; }
.visor figcaption { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; font-size: 14px; text-align: center; }
.visor figcaption span, .visor figcaption em { color: var(--tenue); font-style: normal; font-variant-numeric: tabular-nums; }
.visor__nav, .visor__cerrar { width: 48px; height: 48px; border-radius: 50%; font-size: 20px; display: grid; place-items: center; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); transition: background .2s; }
.visor__nav:hover, .visor__cerrar:hover { background: rgba(255, 255, 255, .25); }
.visor__cerrar { position: absolute; top: 14px; right: 14px; z-index: 2; }

/* ---------- Tableta ---------- */
@media (max-width: 1024px) {
  .oficios { grid-template-columns: repeat(2, 1fr); }
  .muro { grid-template-columns: repeat(4, 1fr); }
  .columnas { columns: 3; }
  .experimentos, .pasos { grid-template-columns: repeat(2, 1fr); }
  .cifras { grid-template-columns: repeat(2, 1fr); }
  .nav__links { gap: 12px; font-size: 13px; }
  .destacado { grid-template-columns: 4ch 1fr auto; }
  .destacado__rol { grid-column: 2; }
  .destacado__tag { grid-column: 3; grid-row: 1 / span 2; }
}

/* ---------- Teléfono ---------- */
@media (max-width: 760px) {
  .nav { padding: 6px 6px 6px 16px; }
  .nav__toggle { display: block; }
  .nav__links { position: fixed; left: 0; right: 0; top: calc(100% + 10px); flex-direction: column; align-items: stretch; gap: 4px; margin: 0; padding: 14px; border-radius: 26px; background: rgba(10, 11, 16, .94); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, .18); font: 400 26px/1 var(--titulo); text-transform: uppercase; opacity: 0; visibility: hidden; translate: 0 -10px; transition: opacity .3s, visibility .3s, translate .3s var(--suave); position: absolute; }
  .nav__links a:not(.btn) { color: #fff; padding: 14px 10px; }
  .nav__links .btn { font: 800 15px/1 var(--cuerpo); text-transform: none; min-height: 50px; margin-top: 6px; }
  .nav.abierta .nav__links { opacity: 1; visibility: visible; translate: 0 0; }

  .hero { justify-content: flex-start; padding: 104px var(--margen) 28px; }
  .hero__texto { max-width: none; }
  .hero__titulo { font-size: clamp(58px, 19.5vw, 120px); margin: 16px 0 20px; }
  .hero__acciones .btn { flex: 1 1 100%; }
  .hero__arte { position: relative; right: auto; top: auto; translate: none; width: 100%; margin-top: 18px; }
  .ficha { font-size: 10px; padding: 9px 13px; }
  .hero__pie { position: static; margin-top: 6px; flex-direction: column; align-items: stretch; }
  .hero__pie > .mono { display: none; }
  .hero__cifras li { flex: 1; padding: 12px 10px; text-align: center; }

  .destacado { grid-template-columns: 1fr 76px; gap: 6px 14px; padding: 18px 0; }
  .destacado__num { display: none; }
  .destacado__nombre { font-size: clamp(30px, 9.6vw, 48px); grid-column: 1; }
  .destacado__rol { grid-column: 1; font-size: 14px; }
  .destacado__tag { grid-column: 1; grid-row: auto; justify-self: start; }
  .destacado__img { position: static; grid-column: 2; grid-row: 1 / span 3; width: 76px; padding: 4px; translate: none; rotate: 0deg; scale: 1; opacity: 1; border-radius: 16px; }
  .destacado__img img { border-radius: 12px; }

  .claro { border-radius: 30px; }
  .sobre { grid-template-columns: 1fr; }
  .sobre__foto { max-width: 250px; margin-inline: auto; }
  .oficios, .experimentos, .pasos { grid-template-columns: 1fr; }
  .oficio h3, .experimento h3 { margin-top: 22px; }
  .pasos li { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; padding: 20px; }
  .pasos li > span { grid-row: span 2; } .pasos h3 { margin: 0 0 6px; }
  .materiales { grid-template-columns: 1fr; }
  .materiales__escena { max-width: 340px; order: -1; }
  .materiales__botones { display: flex; border-radius: 26px; }
  .materiales__botones button { flex: 1 1 40%; }
  .mesa { --w: clamp(96px, 27vw, 130px); height: 470px; margin-top: 28px; border-radius: 22px; }
  .mesa__cabeza .btn { width: 100%; }
  .flujo__escena { --lado: 62vw; }
  .muro { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .logo { border-radius: 14px; }
  .columnas { columns: 2; column-gap: 10px; }
  .columnas .pieza { margin-bottom: 10px; }
  .columnas:not(.todo) .pieza:nth-child(n+9) { display: none; }
  .mosaico { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 44vw; gap: 8px; }
  .artes { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 8px; }
  .artes .pieza:first-child { grid-column: span 2; }
  .linea-tiempo li { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; }
  .linea-tiempo li:hover { padding-inline: 0; background: none; }
  .riel { -webkit-mask-image: none; mask-image: none; }
  .pieza__pie { display: none; }
  .contacto { padding-bottom: 290px; }
  .contacto__surf { left: 50%; translate: -50% 0; width: 220px; }
  .contacto__cohete { width: 92px; top: 3%; right: 2%; }
  .btn--grande { width: 100%; padding: 0 20px; font-size: 17px; }
  .visor { grid-template-columns: 1fr; padding: 12px; }
  .visor__nav { position: absolute; bottom: 16px; }
  .visor__nav--ant { left: calc(50% - 60px); } .visor__nav--sig { right: calc(50% - 60px); }
  .visor__figura { padding-bottom: 70px; }
  .visor__figura img { max-height: calc(100svh - 210px); }
  .pie { flex-direction: column; text-align: center; }
  .despegue { width: 52px; height: 52px; } .flotante { width: 54px; height: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .cinta__pista, .riel__pista { animation: none !important; }
  .riel { overflow-x: auto; }
  .ver, .titulo.ver, .logo.ver { opacity: 1; transform: none; filter: none; text-shadow: none; }
  .logo__brillo { display: none; }
}

/* Ajustes tras revisar capturas */
.nav { background: linear-gradient(135deg, rgba(22, 24, 32, .72), rgba(10, 11, 16, .6) 50%, rgba(18, 34, 90, .6)); }
.hero { padding-top: 104px; padding-bottom: 120px; }
.hero__titulo { font-size: clamp(62px, min(10.4vw, 17.5svh), 176px); margin: 18px 0 22px; }
.hero__acciones { margin-top: 26px; }
@media (max-width: 760px) { .hero { padding-bottom: 28px; } .hero__titulo { font-size: clamp(58px, 19.5vw, 120px); } }

/* La Michoacana Plus: una sola fila, sin tanto protagonismo */
.titulo--chico { font-size: clamp(30px, 3.6vw, 52px); }
.fila-marca { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 30px; }
.fila-marca .pieza { aspect-ratio: 3 / 4; }
.fila-marca .pieza img { object-position: top; }
@media (max-width: 760px) { .fila-marca { grid-template-columns: repeat(3, 1fr); gap: 8px; } }

/* Logos que se arman por franjas (letra por letra) y se desarman cada cierto tiempo */
.logo__armado { position: absolute; inset: 7%; display: flex; }
.logo__armado i { flex: 1; background-repeat: no-repeat; background-size: 700% 100%; background-position: calc(var(--k) * 16.6667%) 0;
  animation: armar 9s var(--suave) infinite; animation-delay: calc(var(--i, 0) * .5s + var(--k) * .07s); }
.logo__armado i:nth-child(even) { animation-name: armar-abajo; }
@keyframes armar { 0% { opacity: 0; transform: translateY(-70%) scaleY(1.4); filter: blur(8px); } 9%, 90% { opacity: 1; transform: none; filter: none; } 100% { opacity: 0; transform: translateY(70%) scaleY(1.4); filter: blur(8px); } }
@keyframes armar-abajo { 0% { opacity: 0; transform: translateY(70%) scaleY(1.4); filter: blur(8px); } 9%, 90% { opacity: 1; transform: none; filter: none; } 100% { opacity: 0; transform: translateY(-70%) scaleY(1.4); filter: blur(8px); } }
.logo.rearma .logo__armado i { animation: rearmar .9s var(--suave) both; animation-delay: calc(var(--k) * .06s); }
@keyframes rearmar { from { opacity: 0; transform: translateY(-80%) rotate(8deg) scale(1.3); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
.logo:hover .logo__armado { scale: 1.08; transition: scale .5s var(--suave); }
@media (prefers-reduced-motion: reduce) { .logo__armado i { animation: none !important; } }

/* Logos con animación propia: grandes, en video; el resto queda quieto (sin efecto de franjas) */
.logo--vivo { grid-column: span 2; grid-row: span 2; border: 1px solid var(--linea); }
.logo--vivo video { width: 100%; height: 100%; object-fit: contain; }
.logo img { animation: none; }
@media (max-width: 760px) { .muro { grid-template-columns: repeat(4, 1fr); } }

/* ================= Ronda 4: ideas elegidas por Luis en el selector ================= */
/* Banderas redondas en el idioma */
.idioma button { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px 0 4px; min-width: 0; }
.bandera { width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); flex: none; }

/* Tus objetos flotando en la portada */
.hero__objetos { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; opacity: 0; transition: opacity 1.6s .6s; animation: flota 12s ease-in-out infinite alternate;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .25), #000 45%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, .25), #000 45%); }
.listo .hero__objetos { opacity: .8; }

/* Mapa de puntos */
.mapa { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 60px); align-items: center; margin-top: clamp(40px, 6vw, 80px); }
.mapa__titulo { font: 400 clamp(26px, 3.4vw, 46px)/1.02 var(--titulo); text-transform: uppercase; text-wrap: balance; }
.mapa__lista { display: grid; gap: 10px; margin-top: 22px; color: var(--blanco); }
.mapa__lista li { display: flex; align-items: center; gap: 10px; }
.pin { width: 10px; height: 10px; border-radius: 50%; background: var(--azul-claro); flex: none; }
.pin--base { background: #fff; box-shadow: 0 0 0 4px rgba(31, 91, 255, .6); }
.mapa__lienzo svg { width: 100%; height: auto; display: block; }
.mapa__lienzo .tierra { color: #3a3f4d; fill: url(#puntos); }
.mapa__lienzo pattern circle { fill: #4a5064; }
.punto-mapa { fill: var(--azul-claro); }
.base .punto-mapa { fill: #fff; }
.onda { fill: none; stroke: var(--azul); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: onda 2.4s ease-out infinite; }
@keyframes onda { from { transform: scale(1); opacity: 1; } to { transform: scale(4.5); opacity: 0; } }

/* Retrato recortado con contorno, saliendo de papel rasgado */
.sobre__recorte { position: relative; max-width: 420px; aspect-ratio: 4 / 5; display: grid; place-items: end center; }
.sobre__recorte img { position: relative; z-index: 1; width: 86%; height: auto; filter: drop-shadow(5px 0 0 var(--azul)) drop-shadow(-5px 0 0 var(--azul)) drop-shadow(0 -5px 0 var(--azul)) drop-shadow(0 5px 0 var(--azul)); }
.sobre__nombre { position: absolute; left: 50%; top: 4%; translate: -50% 0; font: 400 clamp(90px, 13vw, 190px)/.8 var(--titulo); color: #0b0c10; letter-spacing: -.01em; }
.sobre__papel { position: absolute; z-index: 2; left: -8%; right: -8%; bottom: -2%; height: 20%; background: #fff; box-shadow: 0 -10px 24px -14px rgba(0, 0, 0, .4);
  clip-path: polygon(0 28%, 4% 12%, 9% 30%, 15% 8%, 21% 26%, 27% 10%, 33% 30%, 40% 6%, 46% 24%, 52% 12%, 58% 30%, 65% 8%, 71% 26%, 78% 10%, 84% 30%, 90% 12%, 95% 26%, 100% 10%, 100% 100%, 0 100%); }

/* Programas */
.programas { margin-top: 30px; }
.programas ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.programas li { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 12px; background: #fff; box-shadow: 0 6px 18px -10px rgba(31, 91, 255, .5); }
.programas b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: #0b0c10; color: var(--azul-claro); font: 500 13px/1 var(--mono); }
.programas span { font-size: 13px; font-weight: 700; }

/* Teléfono con anotaciones */
.telefono { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.telefono__escena { position: relative; display: grid; place-items: center; padding-block: 20px; }
.movil { position: relative; width: min(64%, 290px); aspect-ratio: 9 / 19; padding: 9px; border-radius: 42px; background: linear-gradient(145deg, #2a2d38, #0a0b0f); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25), 0 50px 90px -30px rgba(31, 91, 255, .7); rotate: 4deg; }
.movil img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 34px; }
.movil__isla { position: absolute; z-index: 2; left: 50%; top: 18px; translate: -50% 0; width: 30%; height: 22px; border-radius: 999px; background: #000; }
.nota { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; color: var(--blanco); white-space: nowrap; }
.nota b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--azul); font-weight: 500; }
.nota::after { content: ""; width: clamp(30px, 6vw, 90px); height: 1px; background: var(--azul-claro); }
.nota--a { left: 0; top: 14%; } .nota--c { left: 0; bottom: 16%; }
.nota--b { right: 0; top: 44%; flex-direction: row-reverse; }

/* Foto con barrido azul */
.barrido { position: relative; overflow: hidden; border-radius: 28px; min-height: clamp(280px, 34vw, 460px); display: flex; align-items: flex-end; padding: clamp(22px, 4vw, 48px); isolation: isolate; }
.barrido img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.barrido::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(5, 5, 7, .85), transparent 65%); }
.barrido .etiqueta { color: #fff; }

/* Proceso: tarjetas de vidrio en abanico */
@media (min-width: 1025px) {
  .pasos--abanico { display: flex; justify-content: center; gap: 0; padding: 50px 0 70px; }
  .pasos--abanico li { flex: 0 0 300px; min-height: 250px; margin-inline: -34px; transform-origin: 50% 130%; transition: transform .5s var(--suave), z-index 0s; }
  .pasos--abanico li:nth-child(1) { transform: rotate(-13deg) translateY(26px); }
  .pasos--abanico li:nth-child(2) { transform: rotate(-4.5deg); }
  .pasos--abanico li:nth-child(3) { transform: rotate(4.5deg); }
  .pasos--abanico li:nth-child(4) { transform: rotate(13deg) translateY(26px); }
  .pasos--abanico li.ver:not(.visto) { transform: rotate(0deg) translateY(60px); }
  .pasos--abanico li:hover { transform: rotate(0deg) translateY(-24px) scale(1.04); z-index: 5; border-color: var(--azul-claro); }
}

/* Trayectoria: línea curva con puntos */
.curva { position: relative; margin-top: 56px; }
.curva__linea { display: none; }
@media (min-width: 1025px) {
  .curva { padding-top: 10px; }
  .curva__linea { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 220px; overflow: visible; }
  .curva__linea path { fill: none; stroke: var(--azul); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 6 8; }
  .linea-tiempo--curva { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; border: 0; margin: 0; }
  .linea-tiempo--curva li { display: block; padding: 0; border: 0; position: relative; }
  .linea-tiempo--curva li:hover { padding: 0; background: none; }
  .linea-tiempo--curva li::before { content: ""; display: block; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(31, 91, 255, .55), 0 0 30px 6px var(--azul); margin-bottom: 26px; }
  .linea-tiempo--curva li:nth-child(1) { margin-top: 52px; }
  .linea-tiempo--curva li:nth-child(2) { margin-top: 150px; }
  .linea-tiempo--curva li:nth-child(3) { margin-top: 62px; }
  .linea-tiempo--curva li:nth-child(4) { margin-top: 150px; }
  .linea-tiempo--curva li:nth-child(5) { margin-top: 48px; }
  .linea-tiempo--curva time { display: block; margin-bottom: 8px; }
  .linea-tiempo--curva h3 { font-size: clamp(22px, 2vw, 30px); margin-bottom: 8px; }
  .linea-tiempo--curva p { font-size: 14px; }
}

@media (max-width: 760px) {
  .idioma button span { display: none; }
  .idioma button { padding: 0 4px; }
  .hero__objetos { opacity: 0 !important; }
  .mapa, .telefono { grid-template-columns: 1fr; }
  .sobre__recorte { max-width: 280px; margin-inline: auto; }
  .nota { position: static; white-space: normal; margin-bottom: 8px; justify-self: start; }
  .nota::after { display: none; }
  .nota--b { flex-direction: row; }
  .telefono__escena { place-items: start; }
  .movil { justify-self: center; margin-top: 14px; }
}

/* ================= Ronda 5 ================= */
/* Sobre mí: retrato de estudio */
.sobre { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.sobre__retrato { position: relative; margin: 0; max-width: 480px; border-radius: 32px; overflow: hidden; box-shadow: 0 50px 110px -40px var(--azul), 0 0 0 1px var(--linea); }
.sobre__retrato img { width: 100%; height: auto; display: block; }
.sobre__retrato figcaption { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 18px; border-radius: 20px; }
.sobre__retrato b { font: 400 30px/1 var(--titulo); text-transform: uppercase; }
.sobre__retrato .mono { color: #dfe3ee; }
.programas li { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px var(--linea); }
.programas b { background: var(--azul); color: #fff; }
.cifras b { color: var(--azul-claro); }
.parrafo { color: #b3b7c2; } .parrafo strong { color: #fff; }

/* HUD de la portada y consola de arranque */
.hud { display: flex; gap: 22px; flex-wrap: wrap; justify-content: flex-end; font-variant-numeric: tabular-nums; }
.intro__consola { position: absolute; left: var(--margen); top: 28px; margin: 0; color: var(--azul-claro); font-size: 12px; line-height: 1.7; text-align: left; white-space: pre; text-shadow: 0 0 12px rgba(31, 91, 255, .9); }
@media (max-width: 760px) { .sobre__retrato { max-width: 320px; margin-inline: auto; } .intro__consola { font-size: 10px; top: 18px; } }

@media (max-width: 760px) { .sobre { grid-template-columns: 1fr; } .sobre__retrato figcaption { flex-direction: column; gap: 4px; } .hud { justify-content: flex-start; } }

/* ================= Ronda 6 ================= */
/* Objetos de la portada más visibles */
.hero__objetos { -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .55), #000 40%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, .55), #000 40%); }
.listo .hero__objetos { opacity: .9; }

/* Título: reflejo abajo y un glitch corto cada pocos segundos en la palabra azul */
.hero__titulo { -webkit-box-reflect: below -.12em linear-gradient(transparent 62%, rgba(255, 255, 255, .16)); }
.listo .linea .azul { animation: glitch 5.5s steps(1) 2.4s infinite; }
@keyframes glitch {
  0%, 91%, 100% { transform: none; text-shadow: none; clip-path: none; }
  92% { transform: translateX(-6px) skewX(-8deg); text-shadow: 7px 0 #fff, -7px 0 #8fb6ff; clip-path: inset(8% 0 52% 0); }
  93.5% { transform: translateX(7px) skewX(6deg); text-shadow: -8px 0 #fff, 8px 0 #0b2a8a; clip-path: inset(48% 0 12% 0); }
  95% { transform: translateX(-3px); text-shadow: 4px 0 #fff, -4px 0 #8fb6ff; clip-path: inset(22% 0 30% 0); }
  96.5% { transform: translateX(2px) skewX(-3deg); text-shadow: -3px 0 #8fb6ff; clip-path: none; }
}

/* Trayectoria animada */
.curva__linea .curva__guia { stroke: rgba(143, 182, 255, .28); }
.curva__linea .curva__trazo { stroke: var(--azul); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 8px var(--azul)); transition: stroke-dashoffset 2.6s cubic-bezier(.4, 0, .2, 1); }
.curva.viva .curva__trazo { stroke-dashoffset: 0; }
.curva__cometa { fill: #fff; filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 20px var(--azul)); opacity: 0; transition: opacity .6s 2.6s; }
.curva.viva .curva__cometa { opacity: 1; }
.linea-tiempo--curva li.ver { transition-delay: calc(var(--n, 0) * .45s + .2s); }
.linea-tiempo--curva li::before { animation: late 2.4s ease-in-out infinite; animation-delay: calc(var(--n, 0) * .45s); }
@keyframes late { 50% { box-shadow: 0 0 0 11px rgba(31, 91, 255, .25), 0 0 44px 12px var(--azul); } }
@media (max-width: 1024px) {
  .linea-tiempo--curva li { position: relative; padding-left: 30px; border-bottom: 0; border-left: 2px solid rgba(143, 182, 255, .3); }
  .linea-tiempo--curva { border-top: 0; }
  .linea-tiempo--curva li::before { content: ""; position: absolute; left: -9px; top: 28px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(31, 91, 255, .55), 0 0 24px 4px var(--azul); }
  .linea-tiempo--curva li:hover { padding-left: 30px; background: none; }
}

/* Cotízame */
.cotiza__form { margin-top: 44px; padding: clamp(20px, 3.4vw, 44px); display: grid; gap: clamp(28px, 4vw, 48px); }
.paso { display: grid; gap: 14px; }
.paso[hidden], .bloque[hidden] { display: none; }
.paso__num { color: var(--azul-claro); }
.paso h3 { font: 400 clamp(26px, 3vw, 40px)/1 var(--titulo); text-transform: uppercase; }
.paso__nota { color: var(--tenue); margin-top: -6px; }
.servicios-op { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.servicio-op input, .chip-op input { position: absolute; opacity: 0; pointer-events: none; }
.servicio-op span { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 12px 16px; border-radius: 18px; border: 1.5px solid var(--linea); background: rgba(255, 255, 255, .04); cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.servicio-op span:hover { transform: translateY(-2px); border-color: var(--azul-claro); }
.servicio-op i { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-style: normal; font-weight: 800; border: 1.5px solid rgba(255, 255, 255, .4); color: transparent; }
.servicio-op b { font-weight: 800; line-height: 1.2; }
.servicio-op input:checked + span { border-color: var(--azul); background: rgba(31, 91, 255, .22); }
.servicio-op input:checked + span i { background: var(--azul); border-color: var(--azul); color: #fff; }
.servicio-op input:focus-visible + span, .chip-op input:focus-visible + span { outline: 2px solid var(--azul-claro); outline-offset: 2px; }
.bloque { padding: 20px; border-radius: 20px; display: grid; gap: 14px; animation: aparecer .35s both; }
.bloque h4 { margin: 0; font: 400 22px/1 var(--titulo); text-transform: uppercase; color: var(--azul-claro); }
.campo { display: grid; gap: 7px; border: 0; padding: 0; margin: 0; min-width: 0; }
.campo > span, .campo > legend { font-size: 14px; font-weight: 700; color: #d5d8e0; padding: 0; }
.campo input[type="text"], .campo input[type="tel"], .campo input[type="email"], .campo input[type="date"], .campo textarea { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--linea); background: rgba(5, 5, 7, .6); color: var(--blanco); font: inherit; color-scheme: dark; }
.campo textarea { resize: vertical; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(31, 91, 255, .3); }
.chips-campo { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 7px; }
.chip-op span { display: block; padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--linea); font-size: 14px; font-weight: 700; cursor: pointer; transition: background .2s, border-color .2s; }
.chip-op input:checked + span { background: #fff; color: #000; border-color: #fff; }
.adjuntos, .dos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.subir, #cz-grabar { justify-self: start; cursor: pointer; }
.miniaturas { display: flex; flex-wrap: wrap; gap: 8px; }
.mini { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; border: 1px solid var(--linea); }
.mini img { width: 100%; height: 100%; object-fit: cover; }
.rec { width: 10px; height: 10px; border-radius: 50%; background: #ff4d4d; }
.grabando { border-color: #ff4d4d; } .grabando .rec { animation: pulso-rojo 1s infinite; }
@keyframes pulso-rojo { 50% { opacity: .2; } }
#cz-audio audio { width: 100%; margin-top: 4px; }
.enviar-zona { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.enviar-zona .estado { flex: 1 1 100%; color: var(--azul-claro); min-height: 1.3em; white-space: pre-wrap; }
@media (max-width: 760px) { .adjuntos, .dos { grid-template-columns: 1fr; } .servicios-op { grid-template-columns: 1fr 1fr; } .servicio-op span { padding: 10px 12px; gap: 9px; font-size: 14px; } .enviar-zona .btn { width: 100%; } }

.destacado__img--cuadro { aspect-ratio: 1; }

/* ================= Ronda 8 ================= */
/* Título de portada: sin reflejo ni recortes (se veía roto); el glitch ahora solo desplaza un halo y nunca corta letras */
.hero__titulo { -webkit-box-reflect: unset; font-size: clamp(60px, min(8.4vw, 16svh), 150px); }
.hero__texto { max-width: min(50vw, 800px); }
.listo .linea .azul { animation: glitch-suave 6s steps(1) 2.4s infinite; }
@keyframes glitch-suave {
  0%, 93%, 100% { transform: none; text-shadow: none; }
  94% { transform: translateX(-3px); text-shadow: 5px 0 rgba(255, 255, 255, .85), -5px 0 rgba(143, 182, 255, .9); }
  95.5% { transform: translateX(3px); text-shadow: -5px 0 rgba(255, 255, 255, .85), 5px 0 rgba(11, 42, 138, .9); }
  97% { transform: none; text-shadow: 2px 0 rgba(143, 182, 255, .8); }
}
.hero__arte { width: min(46vw, 780px); }
/* Objetos detrás del logo: desenfocados como fondo fuera de foco */
.hero__objetos { filter: blur(9px) brightness(.75) saturate(.9); transform: scale(1.04); animation: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 8%, #000 55%); mask-image: linear-gradient(90deg, transparent 8%, #000 55%); }
.listo .hero__objetos { opacity: .7; }
@media (max-width: 760px) { .hero__titulo { font-size: clamp(58px, 19.5vw, 120px); } .hero__texto { max-width: none; } .hero__arte { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .listo .linea .azul { animation: none; } }

/* ================= Ronda 10: mesa de trabajo como fondo de la portada ================= */
.hero__mesa { position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 1.6s .5s; }
.listo .hero__mesa { opacity: 1; }
.hero__mesa img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; filter: brightness(.82); }
.hero__mesa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 5, 7, .96) 4%, rgba(5, 5, 7, .78) 38%, rgba(5, 5, 7, .2) 62%, rgba(5, 5, 7, .35)), linear-gradient(0deg, var(--negro), transparent 24%), linear-gradient(180deg, rgba(5, 5, 7, .8), transparent 18%); }
.hero .hero__rejilla { opacity: .25; }
.hero__logo { filter: drop-shadow(0 0 50px rgba(31, 91, 255, .7)) drop-shadow(0 30px 40px rgba(0, 0, 0, .8)); }
@media (max-width: 760px) { .hero__mesa { opacity: 0; } .listo .hero__mesa { opacity: .5; } .hero__mesa::after { background: linear-gradient(180deg, rgba(5, 5, 7, .92) 30%, rgba(5, 5, 7, .4) 70%, var(--negro)); } }
/* Mesa más visible y logo un poco más chico para que se vean los objetos alrededor */
.hero__mesa img { filter: none; object-position: 82% 50%; }
.hero__mesa::after { background: linear-gradient(90deg, rgba(5, 5, 7, .96) 4%, rgba(5, 5, 7, .7) 36%, rgba(5, 5, 7, .05) 58%, transparent), linear-gradient(0deg, var(--negro), transparent 16%), linear-gradient(180deg, rgba(5, 5, 7, .75), transparent 16%); }
.hero__arte { width: min(40vw, 660px); right: 5%; }
.hero .orbe--a { opacity: .22; }
@media (max-width: 760px) { .hero__arte { width: 100%; right: auto; } }

/* ================= Ronda 11 ================= */
/* Reels */
.reels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 48px; max-width: 980px; }
.reel { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 26px; overflow: hidden; border: 1px solid var(--linea); transition: transform .4s var(--suave), border-color .3s; }
.reel img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--suave); }
.reel:hover { transform: translateY(-8px); border-color: var(--azul-claro); } .reel:hover img { transform: scale(1.05); }
.reel__play { position: absolute; left: 50%; top: 42%; translate: -50% -50%; width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; padding-left: 5px; font-size: 24px; color: #fff; background: rgba(31, 91, 255, .85); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 0 10px rgba(31, 91, 255, .25); }
.reel__pie { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 12px 14px; border-radius: 18px; display: grid; gap: 4px; }
.reel__pie b { font-weight: 800; line-height: 1.2; }
@media (max-width: 760px) { .reels { grid-template-columns: repeat(3, 62vw); overflow-x: auto; margin-inline: calc(var(--margen) * -1); padding-inline: var(--margen); scroll-snap-type: x mandatory; } .reel { scroll-snap-align: center; } }

/* Variantes de portada (solo con ?portada=a|b|c) */
.hero__v { display: none; }
/* A — palabra 3D brillante al centro, texto chico abajo (haoqi.design) */
.portada-a .hero__mesa, .portada-a .hero__arte, .portada-b .hero__mesa, .portada-b .hero__arte, .portada-c .hero__mesa, .portada-c .hero__arte { display: none; }
.portada-a .hero { background: radial-gradient(90% 80% at 50% 45%, #0a2a9c, #04103f 60%, #02071f); justify-content: flex-end; }
.portada-a .hero__v--palabra { display: block; position: absolute; left: 50%; top: 46%; translate: -50% -50%; width: min(78vw, 1250px); mix-blend-mode: screen; z-index: 0; animation: flota 8s ease-in-out infinite alternate; }
.portada-a .hero__rejilla { opacity: .8; -webkit-mask-image: none; mask-image: none; background-size: 25% 34%; }
.portada-a .hero__titulo { font-size: clamp(40px, 5.2vw, 88px); margin: 12px 0 14px; }
.portada-a .hero__texto { max-width: 40vw; margin-bottom: 70px; }
.portada-a .hero .orbe { display: none; }
/* B — título al centro y tus objetos alrededor (Kev Luna) */
.portada-b .hero { align-items: center; text-align: center; }
.portada-b .hero__v--objetos { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; z-index: -1; }
.portada-b .hero__texto { max-width: min(56vw, 860px); }
.portada-b .hero__titulo { font-size: clamp(54px, 7vw, 124px); }
.portada-b .hero__sub { margin-inline: auto; } .portada-b .hero__acciones { justify-content: center; } .portada-b .ceja { justify-content: center; }
/* C — KR[logo]EL gigante (portafolio de Raagav) */
.portada-c .hero { align-items: center; text-align: center; justify-content: center; }
.portada-c .hero__mega { display: flex; align-items: center; justify-content: center; margin: 0; font: 400 clamp(120px, 27vw, 470px)/.8 var(--titulo); letter-spacing: -.01em; order: -1; }
.portada-c .hero__mega img { height: .86em; width: auto; margin: 0 -.02em; filter: drop-shadow(0 0 50px rgba(31, 91, 255, .8)); animation: flota 7s ease-in-out infinite alternate; }
.portada-c .hero__titulo { font-size: clamp(24px, 3vw, 46px); margin: 26px 0 14px; letter-spacing: .04em; }
.portada-c .hero__titulo .linea { display: inline; } .portada-c .hero__titulo .linea::after { content: " "; }
.portada-c .hero__texto { max-width: none; } .portada-c .ceja { display: none; }
.portada-c .hero__sub { margin-inline: auto; } .portada-c .hero__acciones { justify-content: center; margin-top: 20px; }
@media (max-width: 760px) { .portada-a .hero__texto { max-width: none; margin-bottom: 0; } .portada-a .hero__v--palabra { width: 120vw; top: 68%; } .portada-b .hero__texto { max-width: none; } .portada-b .hero__v--objetos { opacity: .45; } }

/* Ronda 12: trayectoria con 6 puntos y variante A sin encimar el texto */
@media (min-width: 1025px) { .linea-tiempo--curva { grid-template-columns: repeat(6, 1fr); gap: 14px; } .linea-tiempo--curva li:nth-child(6) { margin-top: 30px; } .linea-tiempo--curva li:nth-child(5) { margin-top: 110px; } }
.portada-a .hero__v--palabra { left: 60%; top: 40%; width: min(66vw, 1050px); }
.portada-a .hero__texto { margin-bottom: 96px; max-width: 34vw; }
.portada-a .hero__titulo { font-size: clamp(34px, 4vw, 66px); }

/* ================= Ronda 13: portada que cambia de estilo ================= */
.loca .hero__mesa, .loca .hero__arte, .loca .hero__v, .loca .orbe, .loca .hero__rejilla { display: none; }
.loca { --f-tit: var(--titulo); --esc: 1; --fondo-l: #050507; --tinta-l: #f5f6f8; --tenue-l: #b9bcc6; --azul: #1f5bff; --patron: none;
  background: var(--fondo-l); color: var(--tinta-l); cursor: pointer; transition: background .25s; }
.loca__patron { position: absolute; inset: 0; z-index: -1; background: var(--patron); pointer-events: none; }
.loca .hero__titulo { font-family: var(--f-tit); font-size: calc(clamp(60px, min(8.4vw, 16svh), 150px) * var(--esc)); color: var(--tinta-l); }
.loca .hero__sub { color: var(--tenue-l); } .loca .hero__sub strong, .loca .rotador { color: var(--tinta-l); }
.loca .ceja, .loca .hud { color: var(--tenue-l); }
.loca .hero__cifras li, .loca .btn--vidrio, .loca__modo { background: rgba(8, 9, 14, .78); color: #fff; }
.loca .hero__cifras span { color: #c2c5ce; }
.loca .hero__texto { max-width: min(54vw, 860px); }
.loca__logo { position: absolute; right: 5%; top: 50%; translate: 0 -50%; width: min(38vw, 620px); height: auto; z-index: 1; pointer-events: none; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .45)); animation: flota 6s ease-in-out infinite alternate; }
.loca__modo { position: absolute; right: var(--margen); top: 96px; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.loca__modo b { color: var(--azul-claro); font-weight: 500; } .loca__modo i { font-style: normal; opacity: .6; }
/* Corte entre estilos: un parpadeo con barrido */
.loca.cambio .hero__titulo, .loca.cambio .loca__logo { animation: salto .45s cubic-bezier(.2, .7, .1, 1); }
.loca.cambio .loca__logo { animation: salto-logo .55s cubic-bezier(.2, .7, .1, 1), flota 6s ease-in-out .55s infinite alternate; }
@keyframes salto { 0% { transform: translateY(40px) skewY(4deg); opacity: 0; filter: blur(12px); } 100% { transform: none; opacity: 1; filter: none; } }
@keyframes salto-logo { 0% { transform: scale(.5) rotate(-25deg); opacity: 0; } 70% { transform: scale(1.08) rotate(4deg); opacity: 1; } 100% { transform: none; } }
.loca.cambio::after { content: ""; position: absolute; inset: 0; z-index: 4; background: var(--azul); pointer-events: none; animation: barrido .45s cubic-bezier(.7, 0, .2, 1) forwards; }
@keyframes barrido { 0% { clip-path: inset(0 100% 0 0); } 45% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 100%); } }
/* Rastro de portadas */
.loca__rastro { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.loca__rastro img { position: absolute; width: clamp(110px, 12vw, 190px); aspect-ratio: 1; object-fit: cover; border-radius: 10px; translate: -50% -50%; rotate: var(--giro); box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .7); animation: cae 1.1s cubic-bezier(.2, .7, .1, 1) forwards; }
@keyframes cae { 0% { scale: .3; opacity: 0; } 18% { scale: 1; opacity: 1; } 70% { scale: 1; opacity: 1; } 100% { scale: .85; opacity: 0; translate: -50% -20%; } }

/* Los 8 mundos */
.loca[data-escena="0"] { --patron: radial-gradient(70% 70% at 76% 48%, rgba(31, 91, 255, .5), transparent 70%), linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 88px 88px, linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 88px 88px; }
.loca[data-escena="1"] { --fondo-l: #dfe1e8; --tinta-l: #0b0c10; --tenue-l: #3d4150; --azul: #0b0c10; --f-tit: "Archivo Black", var(--titulo); --esc: .8; --patron: linear-gradient(115deg, #fff 0%, #c4c8d3 38%, #f4f5f8 52%, #aab0bf 78%, #e9ebf0 100%); }
.loca[data-escena="2"] { --fondo-l: #ece7dc; --tinta-l: #14120f; --tenue-l: #4a453c; --azul: #ff2d9c; --f-tit: "Permanent Marker", var(--titulo); --esc: .82; --patron: radial-gradient(#ff2d9c 22%, transparent 24%) 70% 20% / 14px 14px, linear-gradient(100deg, transparent 58%, #ffd400 58% 82%, transparent 82%); }
.loca[data-escena="3"] { --fondo-l: #0a0014; --tinta-l: #fff; --tenue-l: #d9c8f0; --azul: #ff2d9c; --f-tit: "Monoton", var(--titulo); --esc: .7; --patron: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 2px, transparent 2px 6px), radial-gradient(60% 60% at 75% 50%, rgba(255, 45, 156, .35), transparent 70%), radial-gradient(40% 50% at 20% 80%, rgba(31, 162, 255, .3), transparent 70%); }
.loca[data-escena="3"] .hero__titulo { text-shadow: 0 0 18px rgba(255, 45, 156, .9), 0 0 50px rgba(255, 45, 156, .6); }
.loca[data-escena="4"] { --fondo-l: #ffd400; --tinta-l: #14120f; --tenue-l: #3b3200; --azul: #1f5bff; --f-tit: "Bungee", var(--titulo); --esc: .72; --patron: radial-gradient(circle at 80% 30%, #ff7ac0 0 18%, transparent 18.5%), radial-gradient(circle at 92% 82%, #1f5bff 0 14%, transparent 14.5%), radial-gradient(circle at 58% 92%, #fff 0 9%, transparent 9.5%); }
.loca[data-escena="5"] { --fondo-l: #2b2b30; --tinta-l: #fff; --tenue-l: #cfd0d6; --azul: #ffd400; --f-tit: "Rubik Spray Paint", var(--titulo); --esc: .82; --patron: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 2px, transparent 2px 46px), repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0 2px, transparent 2px 110px), radial-gradient(50% 60% at 78% 50%, rgba(255, 45, 156, .28), transparent 70%); }
.loca[data-escena="6"] { --fondo-l: #0d0a05; --tinta-l: #f6e7b4; --tenue-l: #c9b98a; --azul: #d9a520; --f-tit: "Playfair Display", Georgia, serif; --esc: .86; --patron: radial-gradient(60% 70% at 76% 48%, rgba(217, 165, 32, .35), transparent 70%); }
.loca[data-escena="6"] .hero__titulo { font-style: italic; text-transform: none; letter-spacing: -.02em; }
.loca[data-escena="7"] { --fondo-l: #1f5bff; --tinta-l: #fff; --tenue-l: #dbe6ff; --azul: #0b0c10; --f-tit: "Press Start 2P", var(--mono); --esc: .42; --patron: linear-gradient(rgba(255,255,255,.14) 2px, transparent 2px) 0 0 / 32px 32px, linear-gradient(90deg, rgba(255,255,255,.14) 2px, transparent 2px) 0 0 / 32px 32px; }
.loca[data-escena="7"] .hero__titulo { line-height: 1.35; } .loca[data-escena="7"] .loca__logo { image-rendering: pixelated; width: min(30vw, 480px); right: 9%; }
.loca[data-escena="7"] .linea .azul { color: #ffd400; }
@media (max-width: 760px) {
  .loca .hero__texto { max-width: none; }
  .loca .hero__titulo { font-size: calc(clamp(58px, 19.5vw, 120px) * var(--esc)); }
  .loca__logo { position: relative; right: auto; top: auto; translate: none; width: 78%; margin: 22px auto 0; }
  .loca__modo { position: static; align-self: flex-start; margin-top: 18px; order: 5; }
  .loca[data-escena="7"] .loca__logo { width: 60%; right: auto; }
}
@media (prefers-reduced-motion: reduce) { .loca.cambio::after { display: none; } }
/* Ajustes de la portada que cambia de estilo */
.loca[data-escena="2"] { --patron: linear-gradient(100deg, transparent 58%, #ffd400 58% 82%, transparent 82%); }
.loca[data-escena="2"] .loca__patron::after { content: ""; position: absolute; inset: 0 0 0 52%; background: radial-gradient(#ff2d9c 22%, transparent 24%) 0 0 / 14px 14px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); }
@media (max-width: 760px) {
  .loca .hero__texto { order: 1; } .loca__logo { order: 3; width: 70%; } .loca__modo { order: 2; } .loca .hero__pie { order: 4; }
  .loca .hero__titulo { font-size: calc(clamp(50px, 17vw, 110px) * var(--esc)); overflow-wrap: anywhere; }
  .loca[data-escena="2"] .loca__patron::after { inset: 55% 0 0 0; }
}
@media (max-width: 760px) {
  .loca .hero__titulo { font-size: calc(clamp(40px, 14vw, 96px) * var(--esc)); overflow-wrap: normal; }
  .loca[data-escena="0"] { --esc: 1.35; } .loca[data-escena="6"] { --esc: 1; } .loca[data-escena="7"] { --esc: .5; }
}

/* ================= Ronda 14 ================= */
/* Estilos nuevos de portada: Holograma, Origami, Bloques (reemplazan Neón, Plastilina, Graffiti) */
.loca[data-escena="3"] { --fondo-l: #07060f; --tinta-l: #fff; --tenue-l: #d5d2ee; --azul: #7df9ff; --f-tit: var(--titulo); --esc: 1; --patron: conic-gradient(from 210deg at 74% 50%, rgba(125, 249, 255, .5), rgba(180, 120, 255, .5), rgba(255, 120, 200, .45), rgba(140, 255, 190, .4), rgba(125, 249, 255, .5)); }
.loca[data-escena="3"] .loca__patron { filter: blur(70px); opacity: .75; }
.loca[data-escena="3"] .hero__titulo { text-shadow: none; }
.loca[data-escena="3"] .linea .azul { background: linear-gradient(90deg, #7df9ff, #b478ff, #ff78c8, #8cffbe); -webkit-background-clip: text; background-clip: text; color: transparent; }
.loca[data-escena="3"] .btn:not(.btn--vidrio) { color: #07060f; }
.loca[data-escena="4"] { --fondo-l: #eef1f8; --tinta-l: #0b0c10; --tenue-l: #454b5c; --azul: #1f5bff; --f-tit: var(--cuerpo); --esc: .78; --patron: linear-gradient(135deg, transparent 49.7%, rgba(31, 91, 255, .16) 50%, transparent 50.3%) 0 0 / 120px 120px, linear-gradient(45deg, transparent 49.7%, rgba(31, 91, 255, .16) 50%, transparent 50.3%) 0 0 / 120px 120px, linear-gradient(115deg, #fff 30%, #dfe6f7); }
.loca[data-escena="4"] .hero__titulo { font-weight: 800; letter-spacing: -.05em; text-transform: none; line-height: .95; }
.loca[data-escena="5"] { --fondo-l: #e3262e; --tinta-l: #fff; --tenue-l: #ffe1e1; --azul: #ffd400; --f-tit: "Bungee", var(--titulo); --esc: .72; --patron: radial-gradient(circle, rgba(0, 0, 0, .16) 0 30%, transparent 32%) 0 0 / 64px 64px, radial-gradient(circle at 46% 42%, rgba(255, 255, 255, .22) 0 24%, transparent 26%) 0 0 / 64px 64px; }
.loca[data-escena="5"] .btn:not(.btn--vidrio) { color: #14120f; }

/* Clientes en paneles */
.destacados__lista { display: none; }
.paneles { display: flex; gap: 10px; height: clamp(380px, 44vw, 560px); margin-top: 44px; }
.panel { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 26px; text-align: left; background: linear-gradient(160deg, #15171f, #0a0b0f); border: 1px solid var(--linea); transition: flex-grow .7s var(--suave), border-color .3s; }
.panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.45); transition: filter .6s, transform 1s var(--suave); }
.panel--logo img { object-fit: contain; padding: 18%; background: #f1f2f5; filter: grayscale(1) brightness(.5); }
.panel--liso { background: linear-gradient(160deg, #1f5bff, #0a1f66); }
.panel__num { position: absolute; left: 18px; top: 18px; color: #fff; }
.panel__nombre { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; writing-mode: vertical-rl; rotate: 180deg; font: 400 clamp(22px, 2.4vw, 34px)/1 var(--titulo); text-transform: uppercase; white-space: nowrap; transition: opacity .3s; }
.panel__info { position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 18px 20px; border-radius: 18px; display: grid; gap: 6px; background: rgba(8, 9, 14, .72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, .18); opacity: 0; transform: translateY(20px); transition: opacity .4s, transform .5s var(--suave); min-width: 260px; }
.panel__info b { font: 400 clamp(28px, 3.4vw, 52px)/1 var(--titulo); text-transform: uppercase; }
.panel__info > span { color: #c9ccd6; font-size: 15px; } .panel__info i { font-style: normal; color: var(--azul-claro); }
.panel.abierto { flex-grow: 4.2; border-color: var(--azul-claro); }
.panel.abierto img { filter: none; transform: scale(1.03); } .panel--logo.abierto img { filter: none; }
.panel.abierto .panel__nombre { opacity: 0; } .panel.abierto .panel__info { opacity: 1; transform: none; transition-delay: .25s; }

/* Programas con su logo */
.programas li { padding: 8px 14px 8px 10px; gap: 10px; }
.programas svg { width: 26px; height: 26px; fill: var(--azul-claro); flex: none; }

/* Teléfonos en 3D */
.escena3d { --rx: 0deg; --ry: 0deg; position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 640px; justify-self: center; perspective: 1400px; touch-action: pan-y; }
.escena3d__mundo { position: absolute; inset: 0; transform-style: preserve-3d; animation: mecer 9s ease-in-out infinite alternate; }
.escena3d.manual .escena3d__mundo { animation: none; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .25s ease-out; }
@keyframes mecer { from { transform: rotateX(6deg) rotateY(-22deg); } to { transform: rotateX(-4deg) rotateY(22deg); } }
.e3 { position: absolute; overflow: hidden; background: #0b0c10; box-shadow: 0 40px 70px -24px rgba(0, 0, 0, .85); }
.e3 img { width: 100%; height: 100%; object-fit: cover; display: block; }
.e3--tel { width: 31%; aspect-ratio: 9 / 19; padding: 1.4%; border-radius: 13% / 6.2%; background: linear-gradient(145deg, #353945, #08090c); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3), 0 50px 80px -24px rgba(31, 91, 255, .65); }
.e3--tel > img, .e3--tel .musica { border-radius: 11% / 5.4%; height: 100%; }
.e3--tel .movil__isla { top: 3.2%; height: 3.4%; }
.e3--tel-a { left: 34.5%; top: 10%; transform: translateZ(150px); }
.e3--tel-b { left: 5%; top: 22%; transform: translateZ(40px) rotateY(24deg) rotateZ(-5deg); }
.e3--tel-c { left: 64%; top: 22%; transform: translateZ(40px) rotateY(-24deg) rotateZ(5deg); }
.musica { display: flex; flex-direction: column; align-items: center; gap: 4%; padding: 22% 9% 0; background: linear-gradient(180deg, #2a2f45, #0b0c10); text-align: center; overflow: hidden; }
.musica img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 8%; box-shadow: 0 14px 30px -8px #000; }
.musica b { font-size: clamp(11px, 1.3vw, 17px); } .musica span { font-size: clamp(9px, 1vw, 13px); color: #aab; margin-top: -3%; }
.musica__barra { width: 100%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #fff 38%, rgba(255, 255, 255, .25) 38%); }
.musica em { font-style: normal; font-size: clamp(10px, 1.2vw, 16px); letter-spacing: .1em; }
.e3--pagina { left: 12%; top: 0; width: 76%; border-radius: 16px; background: #14161d; transform: translateZ(-140px) rotateX(8deg); border: 1px solid rgba(255, 255, 255, .14); }
.pagina__banner { aspect-ratio: 16 / 6.4; overflow: hidden; } .pagina__banner img { object-position: 50% 30%; }
.pagina__fila { display: flex; align-items: center; gap: 12px; padding: 0 16px 14px; margin-top: -22px; position: relative; }
.pagina__avatar { width: 20% !important; height: auto !important; aspect-ratio: 1; border-radius: 50%; border: 4px solid #14161d; flex: none; }
.pagina__fila div { min-width: 0; padding-top: 22px; } .pagina__fila b { display: block; font-size: clamp(12px, 1.4vw, 18px); } .pagina__fila span { font-size: clamp(9px, 1vw, 13px); color: #99a; }
.pagina__fila i { margin-left: auto; margin-top: 22px; padding: 7px 14px; border-radius: 8px; background: var(--azul); font-style: normal; font-weight: 800; font-size: clamp(9px, 1vw, 13px); }
.e3--poster { left: -2%; bottom: 0; width: 30%; aspect-ratio: 2 / 3; border-radius: 6px; transform: translateZ(-60px) rotateZ(-9deg); }
.e3--disco { right: -2%; bottom: 3%; width: 30%; aspect-ratio: 1; border-radius: 8px; overflow: visible; transform: translateZ(90px) rotateZ(7deg); }
.e3--disco img { position: relative; border-radius: 8px; }
.disco { position: absolute; inset: 4% -34% 4% auto; width: 92%; border-radius: 50%; background: repeating-radial-gradient(circle, #111 0 2px, #222 2px 4px); box-shadow: inset 0 0 0 10px #0b0c10, inset 0 0 0 30% #1f5bff; animation: girar-disco 4s linear infinite; }
.disco::after { content: ""; position: absolute; inset: 36%; border-radius: 50%; background: var(--azul); }
@keyframes girar-disco { to { rotate: 360deg; } }
.telefono__escena { display: none; }

/* Reels en abanico */
.reels__cinta { margin: 34px calc(var(--margen) * -1) -30px; overflow: hidden; white-space: nowrap; font: 400 clamp(60px, 11vw, 170px)/1 var(--titulo); color: transparent; -webkit-text-stroke: 1.5px rgba(143, 182, 255, .28); }
.reels__cinta span { display: inline-block; animation: correr 40s linear infinite; }
.reels--abanico { display: flex; justify-content: center; align-items: center; gap: 0; max-width: none; margin-top: 0; padding: 30px 0 50px; perspective: 1500px; }
.reels--abanico .reel { flex: 0 0 clamp(190px, 21vw, 300px); margin-inline: -18px; transition: transform .8s var(--suave), filter .6s, border-color .3s, opacity .8s; }
.reels--abanico .reel[data-pos="c"] { transform: translateZ(120px) scale(1.08); z-index: 3; border-color: var(--azul-claro); box-shadow: 0 50px 100px -30px var(--azul); order: 2; }
.reels--abanico .reel[data-pos="i"] { transform: rotateY(34deg) translateX(8%) scale(.9); filter: brightness(.55); order: 1; }
.reels--abanico .reel[data-pos="d"] { transform: rotateY(-34deg) translateX(-8%) scale(.9); filter: brightness(.55); order: 3; }
.reels--abanico .reel:hover { transform: translateZ(120px) scale(1.08); }

@media (max-width: 760px) {
  .paneles { flex-direction: column; height: auto; }
  .panel { flex: none; height: 76px; transition: height .6s var(--suave); }
  .panel.abierto { height: 330px; }
  .panel__nombre { writing-mode: horizontal-tb; rotate: 0deg; left: 58px; bottom: auto; top: 26px; translate: none; }
  .panel__info { min-width: 0; }
  .escena3d { max-width: 440px; }
  .reels--abanico { overflow: visible; margin-inline: 0; padding-inline: 0; }
  .reels--abanico .reel { flex-basis: 46vw; margin-inline: -9vw; }
  .reels--abanico .reel__pie b { font-size: 12px; } .reels--abanico .reel__pie .mono { display: none; }
}
@media (prefers-reduced-motion: reduce) { .escena3d__mundo, .disco, .reels__cinta span { animation: none; } }

/* Ronda 15: fotos restauradas a color; escena de teléfonos más grande */
.mosaico .pieza:nth-child(1) img { filter: none; }
.escena3d { max-width: 760px; }
.telefono { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }
@media (max-width: 760px) { .telefono { grid-template-columns: 1fr; } }

/* ================= Ronda 16 ================= */
.loca { cursor: auto; }
/* Sello redondo del cliente */
.panel__sello { position: absolute !important; inset: auto !important; right: 14px; top: 14px; width: 54px !important; height: 54px !important; border-radius: 50%; object-fit: cover !important; padding: 0 !important; filter: none !important; transform: none !important; border: 2px solid rgba(255, 255, 255, .85); box-shadow: 0 8px 20px -6px #000; background: #fff; z-index: 2; transition: width .5s var(--suave), height .5s var(--suave); }
.panel.abierto .panel__sello { width: 84px !important; height: 84px !important; }

/* Vitrina del teléfono */
.redes .telefono__escena, .escena3d { display: none; }
.vitrina { display: grid; grid-template-columns: 1.25fr .8fr .8fr; gap: clamp(16px, 2.6vw, 40px); align-items: center; margin-top: 52px; }
.vt { position: relative; }
.vt__rotulo { margin-top: 14px; text-align: center; color: var(--azul-claro); }
.vt--pagina { border-radius: 22px; background: #12141b; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 50px 90px -40px var(--azul); padding-bottom: 14px; transform: perspective(1200px) rotateY(9deg); transition: transform .6s var(--suave); }
.vt--pagina:hover { transform: none; }
.pg__banner { aspect-ratio: 16 / 6.5; overflow: hidden; border-radius: 22px 22px 0 0; } .pg__banner img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.pg__cab { display: flex; align-items: center; gap: 14px; padding: 0 18px; margin-top: -28px; position: relative; }
.pg__avatar { width: 92px; height: 92px; border-radius: 50%; border: 5px solid #12141b; object-fit: cover; flex: none; }
.pg__cab div { min-width: 0; padding-top: 30px; } .pg__cab b { display: block; font-size: 19px; } .pg__cab .mono { font-size: 11px; }
.pg__btn { margin-left: auto; margin-top: 30px; min-height: 40px; padding: 0 20px; border-radius: 10px; background: var(--azul); color: #fff; font-weight: 800; font-size: 14px; transition: background .25s, scale .2s; }
.pg__btn:active { scale: .94; } .pg__btn.si { background: rgba(255, 255, 255, .14); }
.pg__tabs { display: flex; gap: 20px; padding: 16px 18px 0; border-bottom: 1px solid var(--linea); } .pg__tabs span { padding-bottom: 10px; } .pg__tabs .on { color: #fff; border-bottom: 2px solid var(--azul); }
.pg__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 12px 18px 0; } .pg__grid img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: top; border-radius: 8px; }
.vt--pagina .vt__rotulo { margin-bottom: 0; }
.vt--tel { justify-self: center; width: 100%; max-width: 300px; }
.vt--tel > .rp, .vt--tel > .hs { display: block; width: 100%; aspect-ratio: 9 / 18.6; border-radius: 40px; overflow: hidden; border: 9px solid #17191f; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .28), 0 50px 90px -34px var(--azul); background: #0b0c10; }
.vt--tel .movil__isla { top: 20px; height: 22px; z-index: 3; }
.rp { display: flex !important; flex-direction: column; align-items: center; padding: 56px 20px 18px; background: linear-gradient(180deg, #1b2550, #07080c 70%) !important; text-align: center; }
.rp__arriba { margin: 0 0 14px; font-size: 10px; }
.rp__disco { position: relative; width: 88%; aspect-ratio: 1; margin-bottom: 16px; }
.rp__disco img { position: relative; width: 100%; height: 100%; object-fit: cover; border-radius: 14px; box-shadow: 0 20px 40px -10px #000; }
.rp__vinil { position: absolute; inset: 6% -22% 6% auto; width: 88%; border-radius: 50%; background: repeating-radial-gradient(circle, #101014 0 2px, #23232b 2px 4px); animation: girar-disco 3s linear infinite; animation-play-state: paused; transition: translate .6s var(--suave); translate: -30% 0; }
.rp__vinil::after { content: ""; position: absolute; inset: 37%; border-radius: 50%; background: var(--azul); box-shadow: inset 0 0 0 4px #fff; }
.rp.sonando .rp__vinil { animation-play-state: running; translate: 0 0; }
.rp.cambia .rp__disco img { animation: entra-cover .5s var(--suave); }
@keyframes entra-cover { from { scale: .8; opacity: 0; rotate: -8deg; } }
.rp > b { font-size: 18px; line-height: 1.2; } .rp > span { font-size: 13px; color: #a9b0c6; min-height: 1.3em; }
.rp__eq { display: flex; align-items: flex-end; gap: 4px; height: 28px; margin: 12px 0 10px; }
.rp__eq i { width: 4px; height: 20%; border-radius: 2px; background: var(--azul-claro); }
.rp.sonando .rp__eq i { animation: eq .9s ease-in-out infinite alternate; }
.rp__eq i:nth-child(2n) { animation-duration: .6s !important; } .rp__eq i:nth-child(3n) { animation-duration: 1.1s !important; animation-delay: -.4s !important; } .rp__eq i:nth-child(5n) { animation-duration: .75s !important; animation-delay: -.2s !important; }
@keyframes eq { from { height: 15%; } to { height: 100%; } }
.rp__barra { width: 100%; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .2); overflow: hidden; } .rp__barra i { display: block; height: 100%; width: 0; background: #fff; border-radius: 4px; }
.rp__tiempo { width: 100%; display: flex; justify-content: space-between; margin-top: 6px; font-size: 10px; font-variant-numeric: tabular-nums; }
.rp__ctrl { display: flex; align-items: center; gap: 18px; margin-top: auto; padding-top: 8px; }
.rp__ctrl button { width: 44px; height: 44px; border-radius: 50%; font-size: 18px; color: #fff; } .rp__ctrl .rp__play { width: 58px; height: 58px; background: #fff; color: #000; font-size: 18px; transition: scale .2s; } .rp__ctrl button:active { scale: .9; }
.hs { position: relative; padding: 0; cursor: pointer; }
.hs > img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.hs__seg { position: absolute; left: 12px; right: 12px; top: 50px; display: flex; gap: 4px; z-index: 2; }
.hs__seg i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .35); overflow: hidden; } .hs__seg b { display: block; height: 100%; width: 0; background: #fff; }
.hs__seg i.ya b { width: 100%; } .hs__seg i.va b { animation: llenar 3.2s linear forwards; }
@keyframes llenar { to { width: 100%; } }
.hs__cab { position: absolute; left: 14px; top: 62px; z-index: 2; display: flex; align-items: center; gap: 8px; font-size: 13px; text-shadow: 0 1px 6px #000; } .hs__cab img { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; }
.hs::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 26%; background: linear-gradient(rgba(0, 0, 0, .6), transparent); }

/* Arreglos para iPhone */
.loca .hero__titulo { min-height: calc(clamp(60px, min(8.4vw, 16svh), 150px) * 2.8); display: flex; flex-direction: column; justify-content: center; }
img, video { -webkit-user-drag: none; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
input, textarea, select { font-size: 16px !important; }   /* evita el zoom automático de iOS al escribir */
.hero { min-height: 100vh; min-height: 100svh; }
@supports (-webkit-touch-callout: none) { .vidrio { -webkit-backdrop-filter: blur(14px) saturate(160%); } .loca__logo, .hero__logo { will-change: transform; } }
@media (max-width: 1024px) { .panel__info { min-width: 0; } .vitrina { grid-template-columns: 1fr 1fr; } .vt--pagina { grid-column: 1 / -1; transform: none; } }
@media (max-width: 760px) {
  .loca .hero__titulo { min-height: calc(clamp(40px, 14vw, 96px) * 3.9); justify-content: flex-start; }
  .loca__logo { height: 62vw; object-fit: contain; }
  .vitrina { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin-inline: calc(var(--margen) * -1); padding: 4px var(--margen) 20px; -webkit-overflow-scrolling: touch; align-items: flex-start; }
  .vt { flex: 0 0 74vw; scroll-snap-align: center; } .vt--pagina { flex-basis: 84vw; } .vt--tel { max-width: none; }
  .pg__avatar { width: 70px; height: 70px; } .pg__cab b { font-size: 16px; }
  .panel__sello { right: 12px; top: 11px; } .panel.abierto .panel__sello { width: 64px !important; height: 64px !important; }
  .reels--abanico { overflow: hidden; margin-inline: calc(var(--margen) * -1); }
  .hud { display: none; }
}
.panel__sello { inset: 14px 14px auto auto !important; }
@media (max-width: 760px) { .panel__sello { inset: 11px 12px auto auto !important; } }

/* ================= Ronda 17: teléfono a prueba de Safari ================= */
/* Nada puede empujar la página hacia los lados */
html, body { overflow-x: hidden; max-width: 100%; }
main { overflow-x: hidden; }
@supports (overflow: clip) { html, body, main { overflow-x: clip; } }
.nav { top: max(12px, env(safe-area-inset-top)); }
.intro video { background: #000; }

@media (max-width: 760px) {
  /* Efectos caros fuera: el desenfoque de fondo y el grano hacen que Safari se trabe al deslizar */
  body::after { display: none; }
  .vidrio:not(.nav), .btn--vidrio, .panel__info, .pieza__pie, .visor { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .vidrio:not(.nav) { background: linear-gradient(135deg, rgba(38, 41, 54, .96), rgba(17, 19, 27, .96)); }
  .nav { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); background: rgba(12, 13, 19, .86); }
  .btn--vidrio { background: rgba(30, 32, 42, .95); }
  .panel__info { background: rgba(8, 9, 14, .9); }
  .visor { background: rgba(3, 4, 8, .97); }
  .titulo.ver, .contacto__titulo.ver { filter: none; text-shadow: none; transform: translateY(18px); }
  .titulo.ver.visto, .contacto__titulo.ver.visto { transform: none; }
  .logo.ver { filter: none; }
  .orbe { filter: blur(46px); }
  .despegue { display: none; }              /* tapaba texto en pantallas chicas */
  .intro video { object-fit: contain; }     /* el logo completo, sin recortarlo */
  .intro__consola { display: none; }

  /* Ritmo y distribución */
  .seccion { padding-top: 68px; }
  .hero { padding-top: calc(86px + env(safe-area-inset-top)); }
  .titulo { font-size: clamp(34px, 10.5vw, 54px); }
  .bajada { font-size: 16px; }
  .hero__cifras { width: 100%; }
  .loca__logo { height: 56vw; width: 70%; }
  .paneles { gap: 8px; margin-top: 28px; }
  .mapa { margin-top: 36px; }
  .sobre { gap: 26px; }
  .cifras { margin-top: 26px; }
  .oficios, .pasos, .experimentos { margin-top: 30px; gap: 10px; }
  .oficio { padding: 20px 20px 22px; } .oficio h3 { margin: 12px 0 8px; }
  .experimento { padding: 20px; } .experimento h3 { margin: 16px 0 8px; }
  .muro, .columnas, .mosaico { margin-top: 28px; }
  .cotiza__form { padding: 18px 16px; margin-top: 28px; border-radius: 22px; }
  .contacto { padding-top: 72px; }
  .flotante { right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); }

  /* Reels: fila que se desliza con el dedo, sin 3D */
  .reels__cinta { margin-bottom: -14px; font-size: 64px; }
  .reels--abanico { display: flex; justify-content: flex-start; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; perspective: none; margin-inline: calc(var(--margen) * -1); padding: 10px var(--margen) 24px; }
  .reels--abanico .reel, .reels--abanico .reel[data-pos] { flex: 0 0 64vw; margin: 0; transform: none !important; filter: none !important; order: 0 !important; scroll-snap-align: center; box-shadow: none; }
  .reels--abanico .reel__pie .mono { display: block; }

  /* Vitrina y carruseles: que se note que se deslizan */
  .vitrina, .reels--abanico { scrollbar-width: none; } .vitrina::-webkit-scrollbar, .reels--abanico::-webkit-scrollbar { display: none; }
  .flujo__escena { --lado: 66vw; perspective: 900px; }
  .mesa { height: 430px; }
}
@media (max-width: 380px) { .nav__marca span { font-size: 15px; } .hero__cifras b { font-size: 21px; } .servicios-op { grid-template-columns: 1fr; } }

/* ================= Ronda 18: reels en fila limpia ================= */
.reels--fila { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 1180px; margin: 0 auto; padding: 24px 0 10px; position: relative; }
.reels--fila .reel { transition: transform .4s var(--suave), border-color .3s, box-shadow .4s; }
.reels--fila .reel:nth-child(even) { translate: 0 26px; }
.reels--fila .reel:hover { transform: translateY(-10px); border-color: var(--azul-claro); box-shadow: 0 40px 80px -30px var(--azul); }
.reels--fila .reel__pie b { font-size: 14px; }
@media (max-width: 1024px) { .reels--fila { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 620px; } }
@media (max-width: 760px) {
  .reels--fila { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin-inline: calc(var(--margen) * -1); padding: 10px var(--margen) 24px; max-width: none; scrollbar-width: none; }
  .reels--fila::-webkit-scrollbar { display: none; }
  .reels--fila .reel { flex: 0 0 62vw; scroll-snap-align: center; translate: none !important; }
}

/* ================= Ronda 19 ================= */
/* Programas centrados */
.programas { text-align: center; } .programas ul { justify-content: center; }
@media (min-width: 761px) { .programas { text-align: left; } .programas ul { justify-content: flex-start; } }
/* Mesa: se arrastra con el dedo y el botón sacude */
.carta { touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; cursor: grab; }
.carta.en-mano { scale: 1.1; rotate: 0deg; box-shadow: 0 40px 80px -10px rgba(0, 0, 0, .9), 0 0 0 2px var(--azul); transition: scale .2s, rotate .2s, box-shadow .2s; z-index: 99; }
.mesa.sacude { animation: sacude .5s ease; }
@keyframes sacude { 20% { transform: rotate(-1.2deg) scale(.985); } 50% { transform: rotate(1.2deg); } 80% { transform: rotate(-.6deg); } }
.solo-tactil { font-size: 0; } .solo-tactil::after { font-size: 16px; content: "Arrastra las piezas de lado, toca una para abrirla o revuelve la mesa."; }
html[lang="en"] .solo-tactil::after { content: "Drag the pieces sideways, tap one to open it, or shuffle the desk."; }
/* En pantallas táctiles nunca sale el cohete flotante */
@media (hover: none), (pointer: coarse) { .despegue { display: none !important; } }

/* Portada en teléfono: logo arriba, lema abajo, todo centrado */
@media (max-width: 760px) {
  .loca { align-items: center; text-align: center; padding-top: calc(78px + env(safe-area-inset-top)); }
  .loca__logo { order: 0; width: auto; height: 46vw; max-height: 34svh; margin: 0 auto 4px; }
  .loca[data-escena="7"] .loca__logo { width: auto; }
  .loca .hero__texto { order: 1; width: 100%; }
  .loca .ceja { justify-content: center; text-align: center; font-size: 10.5px; }
  .loca .hero__titulo { align-items: center; justify-content: center; margin: 10px 0 14px; min-height: calc(clamp(40px, 14vw, 96px) * 3.75); }
  .loca .hero__sub { margin-inline: auto; }
  .loca .hero__acciones { margin-top: 20px; }
  .loca__modo { order: 2; align-self: center; margin-top: 16px; }
  .loca .hero__pie { order: 3; width: 100%; margin-top: 14px; }
}

@media (max-width: 760px) { .loca[data-escena="2"] .loca__patron::after { display: none; } }

/* ================= Ronda 20: auditoría UX/UI ================= */
/* P0 · El alto de la página ya no cambia al cargar imágenes (los enlaces del menú caían en otra sección) */
.columnas .pieza { width: 100%; } .sobre__retrato { width: 100%; }
/* P1 · Con el visor o el menú abiertos el fondo no se desliza */
html.bloqueado { overflow: hidden !important; }
.visor { overscroll-behavior: contain; }
/* P1 · El botón principal de la portada siempre azul y legible, cambie el estilo que cambie */
.loca .btn:not(.btn--vidrio) { background: #1f5bff; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 14px 40px -12px #1f5bff; }
.loca[data-escena="2"] { --azul: #d6007a; }
.corto { display: none; }
/* P1 · WhatsApp flotante */
.flotante.oculta { opacity: 0 !important; pointer-events: none !important; }
/* P1 · Animaciones baratas y en pausa fuera de vista */
.rp__eq i { height: 100%; transform: scaleY(.18); transform-origin: bottom; }
.rp.sonando .rp__eq i { animation-name: eq2; }
@keyframes eq2 { from { transform: scaleY(.15); } to { transform: scaleY(1); } }
.fuera *, .fuera *::before, .fuera *::after { animation-play-state: paused !important; }
/* P1 · Zonas táctiles de 44 px */
.loca__modo, .intro__saltar, .contacto .redes a, .pg__btn { min-height: 44px; }
.contacto .redes a { display: grid; place-items: center; }
.nav__toggle { width: 44px; height: 44px; }
.pie a { padding: 14px 8px; }
@media (hover: none), (pointer: coarse) { .btn--mini { min-height: 44px; } }
/* Formulario: la numeración no se salta pasos ocultos */
.cotiza__form { counter-reset: paso; } .paso:not([hidden]) { counter-increment: paso; }
.paso__num { font-size: 0; } .paso__num::before { content: "0" counter(paso); font-size: 12px; }
/* Llamado a cotizar a media página */
.cta-medio { max-width: var(--ancho); margin: clamp(50px, 7vw, 90px) auto 0; padding: clamp(26px, 4vw, 44px) var(--margen); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-block: 1px solid var(--linea); }
.cta-medio p { font: 400 clamp(26px, 3.4vw, 46px)/1.05 var(--titulo); text-transform: uppercase; }
.nav__cotiza { display: none; }
/* P2 · Mapa y paneles más claros */
.mapa__lienzo pattern circle { fill: #6b7390; }
.panel--logo:not(.abierto) { background: #15171f; } .panel--logo:not(.abierto) img:not(.panel__sello) { opacity: .25; }
.vitrina { align-items: center; }
/* P2 · Tableta */
@media (min-width: 761px) and (max-width: 1024px) { .loca .hero__texto { max-width: 46vw; } .loca__logo { width: 34vw; } }
@media (max-width: 1024px) and (pointer: coarse) { .vidrio:not(.nav), .btn--vidrio, .panel__info { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } }

@media (max-width: 760px) {
  /* Menú: Cotizar siempre a la mano; una sola bandera (la del otro idioma) */
  .nav__cotiza { display: inline-flex; min-height: 40px; padding: 0 14px; font-size: 13px; }
  .idioma { background: none; padding: 0; } .idioma button { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .idioma button[aria-pressed="true"] { display: none; } .idioma .bandera { width: 26px; height: 26px; }
  .nav__marca span { font-size: 15px; }
  /* Portada: todo lo importante cabe sin deslizar, y nada brinca */
  .loca__logo { height: min(34vw, 22svh); margin: 0 auto 18px; }
  .loca .ceja { letter-spacing: .04em; text-wrap: balance; } .loca .ceja .punto { display: none; }
  .loca .hero__sub { min-height: calc(1.65em * 3); }
  .loca .hero__acciones { margin-top: 14px; flex-wrap: nowrap; gap: 8px; width: 100%; }
  .loca .hero__acciones .btn { flex: 1 1 0; padding: 0 12px; font-size: 14px; min-height: 50px; white-space: nowrap; }
  .largo { display: none; } .corto { display: inline; }
  .loca[data-escena="2"] { --patron: none; }
  .loca[data-escena="1"] { --esc: 1.05; } .loca[data-escena="2"] { --esc: 1.1; } .loca[data-escena="4"] { --esc: 1.15; } .loca[data-escena="7"] { --esc: .62; }
  .flotante { width: 48px; height: 48px; } .flotante svg { width: 22px; height: 22px; }
  .panel--liso.abierto { height: 210px; }
  .cta-medio { flex-direction: column; align-items: stretch; text-align: center; } .cta-medio .btn { width: 100%; }
}
@media (max-width: 380px) { .loca .hero__sub { min-height: calc(1.65em * 4); } .nav__marca span { display: none; } }

@media (max-width: 760px) { .loca[data-escena="1"] { --esc: .8; } .loca[data-escena="2"] { --esc: .9; } .loca[data-escena="7"] { --esc: .55; } }