/* www.saycusoft.es — Portada "Tu a3ERP, donde tú estés".
   Una pantalla, sin scroll. Relato visual: el a3ERP de la gestoría (ordenador,
   el ORIGEN) → el dato fluye al MÓVIL (a3ERP en la mano) → y a las APPS Saycu.
   Todo sobre fondo claro. Identidad navy del grupo + verde Saycu Soft.
   3 temas: dia (claro, DEFAULT) · noche · marca (navy). */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; scroll-behavior: smooth; background: var(--bg); color: var(--ink); }
html { font: 16px/1.5 'Hanken Grotesk', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
.mono { font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }

/* ===== Paleta ===== */
:root, [data-theme="dia"] {
  --bg: #f6f7f5; --ink: #1a2332; --ink-soft: #54607a; --surface: #ffffff;
  --line: rgba(26,35,50,.12); --ring: #c4cbd8; --head-bg: rgba(246,247,245,.86);
  --foot-bg: #1a2332; --foot-ink: rgba(255,255,255,.72);
  --navy: #1a2332; --navy-2: #232f44; --navy-3: #0e1622;
  --green-lime: #8fd14f; --green: #1f9b53; --green-teal: #0fa085; --green-bright: #38c172;
  --green-grad: linear-gradient(125deg, #8fd14f, #0fa085); --green-soft: rgba(31,155,83,.12);
  --sat-link: #ee7320; /* PRUEBA: color de las líneas de datos a los satélites (naranja) */
  --shadow: 0 28px 70px rgba(10,16,28,.30); --shadow-card: 0 16px 38px rgba(10,16,28,.16);
  --shadow-sm: 0 8px 24px rgba(10,16,28,.12);
  --radius: 16px; --radius-sm: 10px;
  --ease: cubic-bezier(.22,1,.36,1); --ease-bouncy: cubic-bezier(.34,1.56,.64,1);
}
[data-theme="noche"] {
  --bg: #0d1320; --ink: #e6ebf2; --ink-soft: rgba(230,235,242,.66); --surface: #141d2b;
  --line: rgba(255,255,255,.12); --ring: rgba(255,255,255,.24); --head-bg: rgba(13,19,32,.82); --foot-bg: #0a111c; --foot-ink: rgba(255,255,255,.66);
  --shadow-card: 0 16px 40px rgba(0,0,0,.5);
}
[data-theme="marca"] {
  --bg: #1a2332; --ink: #ffffff; --ink-soft: rgba(255,255,255,.72); --surface: #232f44;
  --line: rgba(255,255,255,.14); --ring: rgba(255,255,255,.22); --head-bg: rgba(26,35,50,.82); --foot-bg: #0e1622; --foot-ink: rgba(255,255,255,.7);
  --shadow-card: 0 16px 40px rgba(0,0,0,.45);
}

/* ===== Layout (scroll: hero a pantalla completa + secciones debajo) ===== */
body { min-height: 100dvh; }

/* Cabecera */
.site-head { position: sticky; top: 0; z-index: 30; height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(16px,3vw,36px); background: var(--head-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 6px; }
.brand-bracket { font: 800 30px/1 'Archivo', sans-serif; color: var(--green); margin-top: -4px; }
.wordmark { font: 800 23px/1 'Archivo', sans-serif; letter-spacing: -.01em; }
.wm-1 { color: var(--ink); } .wm-2 { color: var(--green); }
.head-actions { display: inline-flex; align-items: center; gap: clamp(12px,2vw,22px); }
.theme-toggle { display: none; } /* botones de tema ocultos del todo; el tema se cambia con 7 toques en el logo */
.th-dot { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--line); transition: transform .2s var(--ease-bouncy), border-color .2s; }
.th-dot:hover { transform: scale(1.18); }
.th-dia { background: #f6f7f5; } .th-noche { background: #0d1320; } .th-marca { background: linear-gradient(125deg,#8fd14f,#0fa085); }
[data-theme="dia"] .th-dia, [data-theme="noche"] .th-noche, [data-theme="marca"] .th-marca { border-color: var(--green); transform: scale(1.12); }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: 14px; transition: transform .18s var(--ease), box-shadow .2s; white-space: nowrap; }
.btn-solid { background: var(--green-grad); color: #06231a; box-shadow: 0 8px 22px rgba(15,160,133,.34); }
.btn-solid:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15,160,133,.46); }
.btn-ghost { color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--green); color: var(--green); transform: translateY(-2px); }

/* ===== Lienzo (hero) ===== */
.stage { position: relative; overflow: hidden; min-height: calc(100dvh - 60px); }

/* Mensaje superpuesto (esquina superior izquierda) */
.copy { position: absolute; z-index: 8; top: clamp(18px,4vh,52px); left: clamp(20px,5vw,72px); max-width: min(46%, 460px); }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; font: 600 12px/1.3 'JetBrains Mono', monospace; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 18px; }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); flex: none; }
.headline { font: 800 clamp(34px,4.6vw,60px)/1.03 'Archivo', sans-serif; letter-spacing: -.025em; margin: 0 0 18px; }
.headline .hl { color: var(--green); white-space: nowrap; }
.lede { font-size: clamp(14px,1.25vw,17px); line-height: 1.6; color: var(--ink-soft); margin: 0 0 16px; max-width: 420px; }
.claim { font: 700 clamp(16px,1.7vw,20px)/1.2 'Archivo', sans-serif; margin: 0 0 24px; }
.claim::before { content: "“"; color: var(--green); } .claim::after { content: "”"; color: var(--green); }

/* Sello "Adaptado a Veri*Factu" — distintivo de cumplimiento, destacado en el hero */
.vf-seal { display: inline-flex; align-items: center; gap: 12px; margin-top: 6px; text-align: left; max-width: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 9px 16px 9px 11px; box-shadow: var(--shadow-card);
  opacity: 0; animation: up .7s var(--ease) .62s forwards;
  transition: transform .18s var(--ease), box-shadow .2s, border-color .2s; }
.vf-seal:hover { transform: translateY(-2px); border-color: var(--green); box-shadow: 0 20px 44px rgba(31,155,83,.22); }
.vf-shield { position: relative; width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border-radius: 11px; background: var(--green-grad); box-shadow: 0 6px 16px rgba(15,160,133,.34); }
.vf-shield svg { width: 23px; height: 23px; }
.vf-shield::after { content: ""; position: absolute; inset: 0; border-radius: 11px;
  box-shadow: 0 0 0 0 rgba(31,155,83,.5); animation: vfpulse 2.6s var(--ease) infinite; }
@keyframes vfpulse { 0% { box-shadow: 0 0 0 0 rgba(31,155,83,.45); } 70% { box-shadow: 0 0 0 11px rgba(31,155,83,0); } 100% { box-shadow: 0 0 0 0 rgba(31,155,83,0); } }
.vf-text { display: flex; flex-direction: column; line-height: 1.12; min-width: 0; }
.vf-kicker { font: 600 9.5px/1 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-soft); }
.vf-name { font: 800 18px/1.08 'Archivo', sans-serif; letter-spacing: -.01em; color: var(--ink); margin-top: 3px; }
.vf-name b { color: var(--green); font-weight: 800; }
.vf-sub { font: 500 10.5px/1.25 'Hanken Grotesk', sans-serif; color: var(--ink-soft); margin-top: 3px; }

/* ===== Escena ===== */
.scene { position: absolute; inset: 0; z-index: 2; }
.scene-glow { position: absolute; left: 58%; top: 52%; width: 52%; height: 70%; transform: translate(-50%,-50%); background: radial-gradient(circle, var(--green-soft), transparent 68%); filter: blur(26px); pointer-events: none; }
.links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; overflow: visible; }
.link { fill: none; stroke: var(--green); stroke-width: 2.5; stroke-linecap: round; opacity: .8; stroke-dasharray: 3 9; animation: flow 1s linear infinite; filter: drop-shadow(0 0 3px rgba(31,155,83,.4)); }
.pkt { fill: var(--green-bright); filter: drop-shadow(0 0 5px rgba(56,193,114,.9)); }
@keyframes flow { to { stroke-dashoffset: -24; } }
/* Líneas de datos móvil → satélites (dinámicas, posicionadas por escena.js)
   + bolitas que viajan en AMBOS sentidos (ida y vuelta). */
.sat-link { fill: none; stroke: var(--sat-link); stroke-width: 2; stroke-dasharray: 3 9; stroke-linecap: round; opacity: .72; animation: flow 1s linear infinite; }
.sat-pkt { fill: var(--sat-link); filter: drop-shadow(0 0 5px rgba(238,115,32,.85)); }

/* --- ORDENADOR (a3ERP de la gestoría) — más a la izquierda, separado del móvil --- */
.desktop { position: absolute; left: 17%; top: 48%; transform: translate(-50%,-50%); width: clamp(260px, 25vw, 380px); z-index: 4; opacity: 0; animation: up .7s var(--ease) .2s forwards; }
.monitor { background: linear-gradient(160deg,#39445a,#222c3e); border-radius: 12px; padding: 8px 8px 10px; box-shadow: var(--shadow-card); }
/* La pantalla del ordenador es una imagen real de a3ERP (ver .m-shot). */
.m-screen { background: #f3f7fc; border-radius: 5px; overflow: hidden; aspect-ratio: 2360 / 1520; border: 1px solid rgba(0,0,0,.14); }
.m-shot { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-neck { width: 11%; height: 15px; margin: -1px auto 0; background: linear-gradient(#2a3346,#39445a); }
.m-foot { width: 30%; height: 8px; margin: 0 auto; border-radius: 0 0 7px 7px; background: #39445a; box-shadow: var(--shadow-sm); }
.keyboard { width: 66%; height: 42px; margin: 16px auto 0; border-radius: 8px;
  background: linear-gradient(#dde3ee,#a9b5c9); border: 1px solid #8d9bb1;
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.65);
  transform: perspective(380px) rotateX(40deg); transform-origin: center top;
  background-image: repeating-linear-gradient(90deg, rgba(58,70,94,.5) 0 1.5px, transparent 1.5px 8.5%), repeating-linear-gradient(180deg, rgba(58,70,94,.45) 0 1.5px, transparent 1.5px 25%); }
.dt-caption { display: block; text-align: center; margin-top: 15px; font-size: 11px; letter-spacing: .04em; color: var(--ink-soft); }
.dt-caption::first-letter { color: var(--green); }

/* --- MÓVIL --- */
.phone { position: absolute; left: 67%; top: 47%; transform: translate(-50%,-50%); height: clamp(360px, 56vh, 480px); aspect-ratio: 1 / 2.02; z-index: 6; opacity: 0; animation: rise .8s var(--ease) .7s forwards; }
.phone-frame { height: 100%; border-radius: 34px; padding: 9px; background: linear-gradient(160deg,#2a3650,#0c1320); box-shadow: var(--shadow), inset 0 0 0 1.5px rgba(255,255,255,.10); position: relative; }
.phone-notch { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 32%; height: 18px; background: #0c1320; border-radius: 0 0 12px 12px; z-index: 3; }
.phone-screen { height: 100%; border-radius: 26px; overflow: hidden; background: #ffffff; display: flex; flex-direction: column; color: #1a2332; padding: 22px 14px 14px; }
.appbar { padding-top: 10px; }
.appbar-top { display: flex; align-items: baseline; justify-content: space-between; }
.app-name { font: 800 clamp(24px,3.1vh,30px)/1 'Archivo', sans-serif; letter-spacing: -.02em; color: #1a2332; }
.app-name::first-letter { color: var(--green); }
.app-live { display: inline-flex; align-items: center; gap: 6px; font: 600 10.5px/1 'JetBrains Mono', monospace; color: var(--green); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(31,155,83,.5);} 50%{opacity:.55;box-shadow:0 0 0 6px rgba(31,155,83,0);} }
.app-sub { font: 500 11.5px/1 'Hanken Grotesk'; color: #8a93a3; }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 15px 0 12px; }
.kpi { background: #f1f5f9; border: 1px solid #e4eaf1; border-radius: 12px; padding: 10px 11px; }
.kpi-label { display: block; font-size: 10.5px; color: #7a8597; margin-bottom: 4px; }
.kpi-val { font-size: clamp(15px,2vh,19px); font-weight: 700; color: #1a2332; white-space: nowrap; }
.rows { display: flex; flex-direction: column; gap: 7px; }
.row { display: flex; align-items: center; gap: 9px; background: #f4f7fb; border-radius: 10px; padding: 9px 11px; font-size: 12.5px; opacity: 0; transform: translateY(6px); animation: rowin .5s var(--ease) forwards; }
.rows .row:nth-child(1){animation-delay:1.1s;} .rows .row:nth-child(2){animation-delay:1.22s;} .rows .row:nth-child(3){animation-delay:1.34s;} .rows .row:nth-child(4){animation-delay:1.46s;}
@keyframes rowin { to { opacity:1; transform:none; } }
.row-ico { width: 20px; text-align: center; color: var(--green); }
.row-txt { flex: 1; color: #46506a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-amt { color: #1a2332; font-size: 12px; }
.sync-bar { margin-top: auto; padding-top: 10px; display: flex; align-items: center; gap: 7px; font-size: 10px; color: #8a93a3; }
.sync-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }

/* --- Apps en ÓRBITA alrededor del móvil (posición/escala las pone escena.js) --- */
.app-node { position: absolute; left: 0; top: 0; z-index: 5;
  width: 122px; aspect-ratio: 1 / 1;
  background: var(--surface); border: 1.5px solid var(--ring); border-radius: 50%;
  padding: 14px 12px; color: var(--ink); text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  box-shadow: var(--shadow-card); will-change: transform, opacity;
  transition: box-shadow .3s var(--ease), border-color .5s, width .84s var(--ease), gap .7s var(--ease), padding .7s var(--ease); }
.node-thumb { display: block; width: 100%; height: 0; opacity: 0; overflow: hidden; background: #0e1726; transition: height .84s var(--ease), opacity .7s; }
.node-thumb img { width: 100%; aspect-ratio: 1280 / 800; object-fit: cover; display: block; }
.node-label { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.node-ico { width: 48px; height: 48px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 30px; }
.node-ico img { width: 100%; height: 100%; object-fit: contain; display: block; }
.node-text { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.node-name { font: 700 13px/1.12 'Archivo', sans-serif; }
.node-tag { font: 500 10px/1.25 'JetBrains Mono', monospace; color: var(--green); }
/* Al desplegarse NO se vuelve cuadrado: el círculo CRECE y muestra la info dentro */
.app-node.is-front { border-color: var(--green); box-shadow: 0 26px 54px rgba(31,155,83,.36); width: 244px; overflow: hidden; padding: 0 0 6px; gap: 4px; }
.app-node.is-front .node-thumb { height: 151px; opacity: 1; }
.app-node.is-front .node-label { padding: 0 14px; }
/* Badge "Veri*Factu" asomando del satélite a3factura (es la solución de facturación
   adaptada a VeriFactu). Mismo escudo verde que el sello del hero, por coherencia.
   El .app-node base no recorta (overflow visible) → el badge asoma sobre el borde
   del círculo. Al desplegarse (is-front) el nodo recorta con overflow:hidden y ahí
   se ve el thumbnail, así que el badge se oculta en ese estado. */
.vf-badge { position: absolute; top: 6%; right: 6%; z-index: 7;
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 9px; background: var(--green-grad);
  box-shadow: 0 4px 12px rgba(15,160,133,.42), 0 0 0 2px var(--surface); }
.vf-badge svg { width: 18px; height: 18px; }
.app-node.is-front .vf-badge { display: none; }

/* ===== Sección: Soluciones Wolters Kluwer / a3 ===== */
.sol-section { background: var(--surface); width: calc(100% - 40px); max-width: 1240px; margin: 0 auto clamp(40px, 6vh, 80px); border-radius: 14px; box-shadow: 0 22px 54px rgba(10,16,28,.20); }
/* La sección Soluciones a3 es la última antes del footer: necesita separación para
   que se vea su sombra. La regla .apps-section (más abajo, margin: 0 auto) le anulaba
   el margin-bottom por cascada; este selector de 2 clases gana y lo restituye con aire. */
.apps-section.sol-section { margin-bottom: clamp(52px, 7vh, 92px); }
.sol-section .section-head, .sol-grid, .sol-note { max-width: 1180px; margin-left: auto; margin-right: auto; }
.sol-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: clamp(16px, 1.8vw, 24px); }
.sol-card { display: flex; flex-direction: column; gap: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: clamp(20px, 2vw, 26px); box-shadow: var(--shadow-card); transition: transform .22s var(--ease), box-shadow .22s, border-color .22s; }
.sol-card:hover { transform: translateY(-5px); border-color: var(--green); box-shadow: 0 26px 52px rgba(31,155,83,.22); }
.sol-ico { font-size: 26px; }
.sol-kicker { font: 600 11px/1 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .04em; color: var(--green); }
.sol-card h3 { font: 800 19px/1.15 'Archivo', sans-serif; letter-spacing: -.01em; margin: 0; }
.sol-card p { color: var(--ink-soft); font-size: 14px; line-height: 1.55; margin: 0; }
.sol-note { text-align: center; color: var(--ink-soft); font-size: 14px; margin-top: clamp(28px, 4vh, 44px); }

/* ===== Pie ===== */
.site-foot { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; background: var(--foot-bg); color: var(--foot-ink); font-size: 11.5px; padding: 16px; z-index: 9; }

/* Flecha flotante "hay más abajo" */
.scroll-hint { position: fixed; right: clamp(16px,3vw,30px); bottom: clamp(16px,3vh,30px); z-index: 25;
  width: 50px; height: 50px; border-radius: 50%; background: var(--surface); color: var(--green);
  border: 1.5px solid var(--ring); box-shadow: 0 10px 28px rgba(10,16,28,.18);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s, opacity .3s; animation: hintbob 1.8s ease-in-out infinite; }
.scroll-hint svg { width: 24px; height: 24px; }
.scroll-hint:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 14px 34px rgba(10,16,28,.24); border-color: var(--green); }
@keyframes hintbob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .scroll-hint { animation: none; } }
.foot-item { color: var(--foot-ink); } a.foot-item:hover { color: var(--green-bright); } .foot-sep { opacity: .4; }

/* ===== Panel lateral ===== */
.backdrop { position: fixed; inset: 0; background: rgba(8,12,20,.5); backdrop-filter: blur(3px); z-index: 40; opacity: 0; transition: opacity .25s; }
.backdrop.show { opacity: 1; }
.panel { position: fixed; top: 0; right: 0; height: 100dvh; width: min(440px,92vw); background: var(--surface); color: var(--ink); z-index: 50; transform: translateX(102%); transition: transform .32s var(--ease); box-shadow: -20px 0 60px rgba(0,0,0,.3); padding: 28px clamp(20px,3vw,32px); overflow-y: auto; }
.panel.show { transform: none; }
.panel-close { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-soft); border: 1px solid var(--line); }
.panel-close:hover { color: var(--green); border-color: var(--green); }
.panel-eyebrow { font: 600 12px/1 'JetBrains Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--green); margin: 8px 0 10px; }
.panel-title { font: 800 28px/1.1 'Archivo', sans-serif; letter-spacing: -.02em; margin: 0 0 14px; }
.panel-text { color: var(--ink-soft); line-height: 1.62; margin: 0 0 16px; }
.panel-mini { height: 150px; border-radius: 14px; margin: 0 0 18px; background: linear-gradient(125deg,#1c2740,#0e1726); position: relative; overflow: hidden; display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.panel-mini .mini-ico { font-size: 54px; filter: drop-shadow(0 6px 16px rgba(0,0,0,.4)); }
.panel-mini .mini-logo { width: 120px; height: 120px; object-fit: contain; filter: drop-shadow(0 6px 16px rgba(0,0,0,.45)); }
.panel-mini::after { content: ""; position: absolute; left: -40%; top: 0; width: 40%; height: 100%; background: linear-gradient(90deg,transparent,rgba(56,193,114,.18),transparent); animation: sweep 3.2s ease-in-out infinite; }
@keyframes sweep { 0%{left:-40%;} 60%,100%{left:120%;} }
.panel ul.feats { margin: 0 0 18px; display: flex; flex-direction: column; gap: 9px; }
.panel ul.feats li { display: flex; gap: 9px; color: var(--ink-soft); font-size: 14.5px; }
.panel ul.feats li::before { content: "▹"; color: var(--green); }

/* ===== Entradas ===== */
.copy > * { opacity: 0; animation: up .7s var(--ease) forwards; }
.copy .eyebrow{animation-delay:.05s;} .copy .headline{animation-delay:.15s;} .copy .lede{animation-delay:.28s;} .copy .claim{animation-delay:.4s;} .copy .copy-actions{animation-delay:.52s;}
@keyframes up { from{opacity:0;transform:translateY(16px);} to{opacity:1;transform:none;} }
@keyframes rise { from{opacity:0;transform:translate(-50%,-44%) scale(.96);} to{opacity:1;transform:translate(-50%,-50%) scale(1);} }
@media (prefers-reduced-motion: reduce) { *{animation:none!important;} .copy>*,.row,.phone,.desktop{opacity:1!important;} .phone,.desktop{transform:translate(-50%,-50%)!important;} }

/* ===== Sección: Nuestras aplicaciones ===== */
.apps-section { max-width: 1240px; margin: 0 auto; padding: clamp(64px,9vh,120px) clamp(20px,5vw,72px); }
.section-head { text-align: center; max-width: 640px; margin: 0 auto clamp(34px,5vh,54px); }
.section-head .eyebrow { justify-content: center; }
.section-title { font: 800 clamp(30px,4vw,46px)/1.05 'Archivo', sans-serif; letter-spacing: -.02em; margin: 8px 0 14px; }
.section-lede { color: var(--ink-soft); font-size: clamp(15px,1.3vw,18px); line-height: 1.6; }
.apps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(18px,2vw,28px); }
.app-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-card); transition: transform .25s var(--ease), box-shadow .25s; color: var(--ink); }
.app-card:hover { transform: translateY(-6px); box-shadow: 0 30px 58px rgba(10,16,28,.22); }
.app-card-shot { aspect-ratio: 1280/800; overflow: hidden; background: #0e1726; }
.app-card-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s var(--ease); }
.app-card:hover .app-card-shot img { transform: scale(1.05); }
.app-card-body { padding: clamp(18px,2vw,24px); display: flex; flex-direction: column; gap: 9px; flex: 1; }
.app-card-body h3 { font: 800 20px/1.1 'Archivo', sans-serif; display: flex; align-items: center; gap: 10px; margin: 0; }
.app-card-tag { font: 600 11px/1 'JetBrains Mono', monospace; color: var(--green); background: var(--green-soft); padding: 4px 8px; border-radius: 6px; }
.app-card-body p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.55; margin: 0; flex: 1; }
.app-card-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--green); margin-top: 4px; transition: gap .2s var(--ease); }
.app-card:hover .app-card-link { gap: 12px; }

/* ===== Responsive: pila vertical (mismo relato, de arriba a abajo).
   El "abanico" solo se usa por encima de 1200px (es donde tiene sitio);
   por debajo, pila vertical limpia. ===== */
@media (max-width: 1200px) {
  html, body { overflow-x: hidden; overflow-y: auto; height: auto; }
  body { display: block; min-height: 100dvh; }

  .site-head { position: sticky; top: 0; gap: 10px; padding: 0 16px; height: 56px; }
  .wordmark { font-size: 19px; } .brand-bracket { font-size: 26px; }
  .head-actions { gap: 12px; }
  #cta-contacto { padding: 9px 14px; font-size: 13px; }

  .stage { position: static; overflow: visible; display: block; min-height: auto; }
  .copy { position: static; max-width: 620px; margin: 0 auto; padding: 30px 22px 4px; text-align: center; }
  .eyebrow { justify-content: center; flex-wrap: wrap; white-space: normal; font-size: 11px; }
  .lede { margin-left: auto; margin-right: auto; }
  .claim { text-align: center; }
  .copy-actions { justify-content: center; }
  .vf-seal { margin-top: 14px; }
  .headline { font-size: clamp(32px, 7.5vw, 50px); }

  .scene { position: static; height: auto; display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 14px 22px 44px; }
  .links, .scene-glow { display: none; }
  .desktop, .phone, .app-node { position: static; left: auto; top: auto; transform: none; opacity: 1; animation: none; }
  .desktop { width: min(440px, 90vw); }
  .phone { width: min(230px, 62vw); height: auto; }
  .app-node { position: relative; width: min(320px, 86vw); transform: none; }
  .app-node:hover { transform: translateY(-3px) scale(1.02); }
  /* Conector vertical entre bloques (sustituye a las líneas en pila) */
  .desktop::after, .phone::after { content: ""; display: block; width: 2px; height: 26px; margin: 14px auto -8px; background: repeating-linear-gradient(180deg, var(--green) 0 5px, transparent 5px 11px); }
}
@media (max-width: 560px) {
  .theme-toggle { display: none; }     /* el tema sigue disponible con 7 toques en el logo */
}
@media (max-width: 430px) {
  .headline { font-size: clamp(29px, 8.5vw, 42px); }
}

/* ===== Efecto cilíndrico al hacer scroll (punto 4 del N1) =====
   Cada sección que entra desde abajo aparece pequeña y "tumbada" y, al subir
   hacia el centro, crece y se endereza: como la cara de un cilindro que gira
   para encararte. Hecho con scroll-driven animations (animation-timeline: view).
   Envuelto en @supports: el navegador que NO lo soporta no aplica nada y ve el
   scroll normal (sin romper). Respeta prefers-reduced-motion. Para quitarlo:
   borrar este bloque y bajar el cache-buster del css.
   El easing del proyecto var(--ease) hace que el giro ACELERE al entrar y se
   ASIENTE al llegar al centro (la sensación de "gira para centrarse"). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .apps-section {
      animation-name: sec-cilindro;
      animation-duration: auto;
      animation-timing-function: var(--ease);
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: cover 3% cover 46%;
      transform-origin: 50% 86%;
      backface-visibility: hidden;
      will-change: transform, opacity;
    }
    @keyframes sec-cilindro {
      from { opacity: .42; transform: perspective(1600px) rotateX(22deg) scale(.90); }
      to   { opacity: 1;   transform: perspective(1600px) rotateX(0deg)  scale(1); }
    }
  }
}