/*
 * Selector de garage360.cl · variante B (diagonal), versión 3.
 * Marco minimalista de la marca madre (barra y pie transparentes, logotipo sin alteraciones). Cada franja es una
 * vertical con su propia identidad; el lado elegido se ve a color y los demás en blanco y negro. El motor
 * (selector.js) reparte N franjas: agregar una vertical nueva es agregar un <section class="slice">.
 */

@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400 700; font-display: swap; src: url("/fonts/inter-variable-latin.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url("/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }

/* Límites de cada franja (en % del ancho, medidos arriba): se animan al elegir una. */
@property --l { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@property --r { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --b { syntax: "<percentage>"; inherits: false; initial-value: 50%; }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body { height: 100%; }
body { background: var(--page); color: var(--fg); transition: background-color 0.3s, color 0.3s; font: 400 1rem/1.6 var(--g360-font-body); -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100dvh; }
main { flex: 1; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--g360-orange); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------ Tema (nocturno por defecto; diurno con data-theme="light")
   Todo el color del marco sale de estas variables. Las vistas previas (.pv-wrap) son pantallas de producto:
   se quedan oscuras en los dos temas. */
:root {
  color-scheme: dark;
  --fg-rgb: 255 255 255;
  --fg: #fff;
  --page: var(--g360-ink);
  --nav-bg: rgb(14 15 17 / 0.78);
  --slice-saas: color-mix(in srgb, var(--g360-orange) 4%, var(--g360-graphite));
  --slice-dev: color-mix(in srgb, var(--g360-dev-violet) 8%, var(--g360-dev-bg));
  --off-filter: grayscale(1) brightness(0.8);
  --card-saas: var(--g360-graphite);
  --card-dev: rgb(15 23 42 / 0.55);
  --accent-text: var(--g360-orange);
  --chip-on-bg: #fff;
  --chip-on-fg: var(--g360-ink);
  --input-bg: rgb(0 0 0 / 0.25);
  --err: #ff8a8a;
  --err-line: #ff6b6b;
  --err-text: #ffb3b3;
}
:root[data-theme="light"] {
  color-scheme: light;
  --fg-rgb: 17 19 21;
  --fg: #111315;
  --page: #F5F5F6;
  --nav-bg: rgb(245 245 246 / 0.82);
  --slice-saas: color-mix(in srgb, var(--g360-orange) 8%, #fff);
  --slice-dev: color-mix(in srgb, var(--g360-dev-violet) 10%, #F7F6FC);
  --off-filter: grayscale(1);
  --card-saas: #fff;
  --card-dev: rgb(139 92 246 / 0.07);
  --accent-text: var(--g360-orange-text);
  --chip-on-bg: var(--g360-ink);
  --chip-on-fg: #fff;
  --input-bg: #fff;
  --err: #B42318;
  --err-line: #B42318;
  --err-text: #B42318;
}
/* Logotipos: cada uno tiene su variante para fondo oscuro y para fondo claro. */
.on-light { display: none; }
:root[data-theme="light"] .on-dark { display: none; }
:root[data-theme="light"] .on-light { display: block; }

/* Botón de tema (esquina superior izquierda). Muestra el modo al que se cambia: sol en la noche, luna de día. */
.brand { display: flex; align-items: center; }
.nav { gap: 0.5rem; }
.nav nav { margin-left: auto; }
.tools { display: flex; align-items: center; margin-left: 0.4rem; }
.theme-toggle { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid rgb(var(--fg-rgb) / 0.28); border-radius: 50%; background: rgb(var(--fg-rgb) / 0.06); color: var(--fg); cursor: pointer; transition: background-color 0.2s, border-color 0.2s; }
.theme-toggle:hover { background: rgb(var(--fg-rgb) / 0.16); border-color: rgb(var(--fg-rgb) / 0.55); }
.theme-toggle svg { width: 1.15rem; height: 1.15rem; }
.theme-toggle .i-moon { display: none; }
:root[data-theme="light"] .theme-toggle .i-sun { display: none; }
:root[data-theme="light"] .theme-toggle .i-moon { display: block; }

/* ------------------------------------------------------------ Barra y pie transparentes */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem clamp(1.25rem, 4vw, 3rem); }
.nav .logo img { height: 28px; width: auto; }
.nav ul { display: flex; gap: 0.1rem; list-style: none; padding: 0; }
.nav .link { display: inline-block; padding: 0.4rem 0.8rem; border-radius: 999px; font-size: 0.88rem; font-weight: 500; transition: background-color 0.2s; }
.nav .link:hover, .nav .link[aria-current="page"] { background: rgb(var(--fg-rgb) / 0.16); }

.foot { z-index: 60; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 2rem; padding: 0.9rem clamp(1.25rem, 4vw, 3rem); font-size: 0.78rem; line-height: 1.4; color: rgb(var(--fg-rgb) / 0.72); }
.foot p { margin: 0; }
.foot a { text-decoration: underline; text-underline-offset: 3px; }
.foot a:hover { color: var(--fg); }
@media (min-width: 64rem) {
  .home .foot { position: fixed; inset: auto 0 0 0; pointer-events: none; }
  .home .foot a { pointer-events: auto; }
}

/* ------------------------------------------------------------ Escena: franjas en diagonal */
.stage { display: block; }
.slice { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 1.5rem; min-height: 50svh; padding: 5.5rem 1.5rem 3rem; }
.slice-saas { background: var(--slice-saas); }
.slice-dev { background: var(--slice-dev); }

/* Con JavaScript y pantalla ancha, las franjas se superponen y se recortan en diagonal. */
@media (min-width: 64rem) {
  .stage.is-split { position: relative; height: 100dvh; min-height: 36rem; overflow: hidden; }
  .is-split .slice { position: absolute; inset: 0; padding: 5.5rem clamp(1.5rem, 5vw, 4.5rem) 4.5rem;
    clip-path: polygon(var(--l) 0, var(--r) 0, calc(var(--r) - 16%) 100%, calc(var(--l) - 16%) 100%);
    transition: --l 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), --r 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.6s ease; }
  .is-split:not(.ready) .slice { transition: none; }
  .is-split .slice:first-of-type { align-items: flex-start; }
  .is-split .slice:last-of-type { align-items: flex-end; }
  .is-split .slice:not(:first-of-type):not(:last-of-type) { align-items: center; }
  .is-split .edge { position: absolute; inset: 0; z-index: 8; pointer-events: none; background: rgb(var(--fg-rgb) / 0.4); transition: --b 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
    clip-path: polygon(calc(var(--b) - 0.07%) 0, calc(var(--b) + 0.07%) 0, calc(var(--b) - 16% + 0.07%) 100%, calc(var(--b) - 16% - 0.07%) 100%); }
  .is-split:not(.ready) .edge { transition: none; }
  .slice.is-off { filter: var(--off-filter); }
}
@media (hover: none) { .slice.is-off { filter: none !important; } }

/* ------------------------------------------------------------ Contenido de cada franja */
.copy { width: 100%; max-width: 24rem; display: grid; gap: 0.85rem; justify-items: start; position: relative; z-index: 2; animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.slice-dev .copy { animation-delay: 0.12s; }
.marks { display: flex; align-items: center; gap: 1rem; min-height: 28px; }
.marks img { height: 26px; width: auto; }
.marks .dev-wordmark, .marks .saas-wordmark { height: 22px; }
.rule { display: block; width: 3rem; height: 2px; }
.slice-saas .rule { background: var(--g360-orange); }
.slice-dev .rule { background: var(--g360-dev-spectrum); }
.title { font: 700 clamp(2rem, 3vw, 2.6rem) / 1 var(--g360-font-display); }
.lead { font-size: 0.96rem; line-height: 1.55; color: rgb(var(--fg-rgb) / 0.8); max-width: 22rem; }
.go { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.92rem; font-weight: 600; padding-bottom: 3px; border-bottom: 1px solid rgb(var(--fg-rgb) / 0.5); width: max-content; transition: border-color 0.2s, gap 0.25s; }
.go::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; }
.slice-saas .go::before { background: var(--g360-orange); }
.slice-dev .go::before { background: var(--g360-dev-violet); }
.slice:hover .go, .slice:focus-within .go { border-color: var(--fg); gap: 0.8rem; }
.stretch::after { content: ""; position: absolute; inset: 0; z-index: 5; }

/* Productos existentes de SaaS, en la parte inferior de su franja. Sus enlaces quedan sobre el enlace general. */
.apps { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.1rem; margin-top: 0.7rem; padding-top: 0.9rem; border-top: 1px solid rgb(var(--fg-rgb) / 0.2); width: 100%; position: relative; z-index: 6; }
.apps span { font-size: 0.72rem; color: rgb(var(--fg-rgb) / 0.6); }
.apps a { display: block; opacity: 0.92; transition: opacity 0.2s; }
.apps a:hover { opacity: 1; }
.apps img { height: 24px; width: auto; }

/* ------------------------------------------------------------ Vistas previas (con el marco de su vertical)
   Todo en em: el tamaño lo fija .pv-wrap (sigue el alto de la pantalla) y la escena escala completa.
   Ciclo de 14 s, igual que la secuencia del carrusel: SaaS mueve la OT, avisa y llega el WhatsApp; Dev arma el chat completo. */
.pv-wrap { --fg-rgb: 255 255 255; --fg: #fff; color: #fff; --t: 14s; position: relative; width: min(38em, 100%); font-size: 13px; pointer-events: none; animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.slice-dev .pv-wrap { animation-delay: 0.18s; }
@media (min-width: 64rem) {
  .is-split .pv-wrap { position: absolute; top: clamp(5.5rem, 13vh, 8.5rem); font-size: clamp(9.5px, 1.62vh, 16px); width: min(38em, 38vw); }
  .is-split .slice:first-of-type .pv-wrap { left: clamp(1.5rem, 5vw, 4.5rem); }
  .is-split .slice:last-of-type .pv-wrap { right: clamp(1.5rem, 5vw, 4.5rem); }
}
.glow { position: absolute; z-index: -1; left: 50%; top: 50%; width: 135%; aspect-ratio: 1.5; transform: translate(-50%, -50%); filter: blur(46px); border-radius: 50%; animation: breathe 9s ease-in-out infinite; }
.glow-saas { background: radial-gradient(ellipse at 40% 45%, rgb(255 90 31 / 0.55), rgb(255 90 31 / 0.18) 50%, transparent 72%); }
.glow-dev { background: radial-gradient(ellipse at 20% 55%, rgb(255 90 31 / 0.4), transparent 50%), radial-gradient(ellipse at 50% 40%, rgb(139 92 246 / 0.5), transparent 55%), radial-gradient(ellipse at 82% 55%, rgb(59 130 246 / 0.45), transparent 52%); }
.pv-bar { display: flex; align-items: center; gap: 0.4em; padding: 0.6em 0.9em; font: 500 0.72em var(--g360-font-mono); color: rgb(255 255 255 / 0.6); }
.pv-bar i { width: 0.55em; height: 0.55em; border-radius: 50%; background: rgb(255 255 255 / 0.16); }
.pv-bar span { margin-left: 0.5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* SaaS: tablero de OT, aviso y WhatsApp */
.pv-board { background: var(--g360-ink); border: 1px solid var(--g360-border-dark); border-radius: var(--g360-radius); }
.pv-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5em; padding: 0.6em; }
.pv-col { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 0.5em; padding: 0.5em; background: rgb(255 255 255 / 0.03); border-radius: var(--g360-radius); }
.pv-col b { display: flex; justify-content: space-between; font: 500 0.72em var(--g360-font-body); color: rgb(255 255 255 / 0.6); }
.pv-col b em { font-style: normal; padding: 0 0.5em; border-radius: 99px; background: rgb(255 255 255 / 0.1); }
.pv-card { position: relative; min-width: 0; overflow: hidden; padding: 0.5em; background: var(--g360-graphite); border: 1px solid var(--g360-border-dark); border-radius: var(--g360-radius); }
.pv-card u { display: block; text-decoration: none; font: 500 0.72em var(--g360-font-mono); }
.pv-card small { display: block; font-size: 0.66em; color: rgb(255 255 255 / 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-slot { height: 3.6em; }
.pv-move { z-index: 2; overflow: visible; border-color: var(--g360-orange); animation: card-move var(--t) cubic-bezier(0.6, 0, 0.3, 1) infinite, card-done var(--t) linear infinite; }
.pv-move s { display: block; height: 3px; margin-top: 0.45em; border-radius: 2px; background: var(--g360-orange); animation: bar-fill var(--t) linear infinite; }
.pv-toast { position: relative; z-index: 3; display: flex; align-items: center; gap: 0.8em; width: 17em; margin: -0.9em 0 0 -0.6em; padding: 0.7em 1.1em 0.7em 0.7em; background: var(--g360-surface-light, #fff); color: var(--g360-ink); border-radius: 14px; box-shadow: 0 14px 34px rgb(0 0 0 / 0.4); opacity: 0; animation: toast-in var(--t) ease infinite; }
.pv-toast .ico { display: grid; place-items: center; flex: none; width: 2.4em; height: 2.4em; border-radius: 10px; background: var(--g360-orange); color: var(--g360-ink); }
.pv-toast .ico svg { width: 55%; height: 55%; }
.pv-toast b { display: block; font: 600 0.82em var(--g360-font-body); }
.pv-toast small { display: block; font-size: 0.72em; color: #5b6168; }
.pv-wa { position: absolute; right: -0.5em; top: calc(100% - 0.2em); z-index: 4; display: grid; gap: 0.45em; width: 17.5em; padding: 0.9em; border-radius: 16px; background: #0b141a; box-shadow: 0 18px 40px rgb(0 0 0 / 0.5); opacity: 0; animation: wa-in var(--t) ease infinite; }
.wa-out, .wa-in { font-size: 0.78em; line-height: 1.4; color: #fff; padding: 0.55em 0.75em; opacity: 0; }
.wa-out { justify-self: end; max-width: 92%; border-radius: 12px 3px 12px 12px; background: #005c4b; animation: wa-b1 var(--t) ease infinite; }
.wa-out a { display: block; margin-top: 0.25em; color: #53bdeb; text-decoration: underline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-out em, .wa-in em { display: block; margin-top: 0.25em; font-style: normal; font-size: 0.78em; text-align: right; color: rgb(255 255 255 / 0.55); }
.wa-in { justify-self: start; max-width: 75%; border-radius: 3px 12px 12px 12px; background: #202c33; animation: wa-b2 var(--t) ease infinite; }

/* Dev: el panel completo (resumen de ventas + asistente IA), como en el inicio de dev.garage360.cl */
.pv-panel { background: rgb(15 23 42 / 0.62); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--g360-dev-border); border-radius: var(--g360-dev-radius-panel); }
.pv-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 0.8em; padding: 0.2em 0.9em 0.9em; }
.pv-sales h4, .pv-ai h4 { display: flex; align-items: center; justify-content: space-between; margin: 0 0 0.55em; font: 600 0.9em var(--g360-font-body); color: #fff; }
.pv-sales h4 span { padding: 0.1em 0.6em; border-radius: 99px; background: rgb(255 255 255 / 0.08); font: 500 0.7em var(--g360-font-body); color: var(--g360-dev-muted); }
.pv-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4em; }
.pv-kpi { padding: 0.45em 0.55em; border: 1px solid var(--g360-dev-border); border-radius: 9px; background: rgb(255 255 255 / 0.03); }
.pv-kpi small { display: block; font-size: 0.64em; color: var(--g360-dev-muted); }
.pv-kpi b { display: block; font: 600 1em var(--g360-font-body); color: #fff; }
.pv-kpi i { display: block; font-style: normal; font-size: 0.6em; color: var(--g360-dev-blue); }
.pv-chart { margin-top: 0.5em; padding: 0.5em; border: 1px solid var(--g360-dev-border); border-radius: 9px; background: rgb(255 255 255 / 0.03); }
.pv-chart svg { display: block; width: 100%; height: 4.4em; overflow: visible; }
.pv-chart .line { stroke-dasharray: 1; animation: draw var(--t) ease-in-out infinite; }
.pv-orders { display: grid; gap: 0.3em; margin-top: 0.5em; }
.pv-orders p { display: flex; align-items: center; gap: 0.6em; margin: 0; padding: 0.4em 0.6em; border-radius: 8px; background: rgb(255 255 255 / 0.04); font-size: 0.7em; color: #fff; }
.pv-orders p span { color: var(--g360-dev-muted); }
.pv-orders p b { margin-left: auto; font-weight: 500; }
.pv-ai { display: flex; flex-direction: column; gap: 0.45em; min-width: 0; }
.pv-ai h4 { justify-content: flex-start; gap: 0.6em; margin-bottom: 0.2em; }
.pv-ai h4 .bot { display: grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: 50%; background: linear-gradient(135deg, var(--g360-orange), var(--g360-dev-violet)); }
.pv-ai h4 .bot svg { width: 55%; height: 55%; }
.pv-ai h4 small { display: block; font: 400 0.72em var(--g360-font-body); color: var(--g360-dev-muted); }
.msg { margin: 0; max-width: 88%; padding: 0.55em 0.8em; font-size: 0.78em; line-height: 1.4; border: 1px solid var(--g360-dev-border); border-radius: 14px; opacity: 0; color: #fff; }
.msg-user { align-self: flex-end; background: rgb(255 255 255 / 0.09); }
.msg-bot { align-self: flex-start; background: rgb(139 92 246 / 0.22); border-color: rgb(139 92 246 / 0.35); }
.m1 { animation: msg-1 var(--t) ease infinite; }
.m2 { animation: msg-2 var(--t) ease infinite; }
.m3 { animation: msg-3 var(--t) ease infinite; }
.m4 { animation: msg-4 var(--t) ease infinite; }
.pv-metric { position: absolute; right: -0.8em; top: -1.6em; z-index: 3; display: grid; place-items: center; width: 5.6em; height: 5.6em; border-radius: 50%; background: rgb(15 23 42 / 0.85); border: 1px solid var(--g360-dev-border); text-align: center; font: 600 1.35em var(--g360-font-body); color: #fff; line-height: 1; }
.pv-metric small { display: block; margin-top: 0.2em; font: 500 0.4em var(--g360-font-body); letter-spacing: 0.06em; color: var(--g360-dev-muted); }

@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes breathe { 0%, 100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes card-move { 0%, 8% { transform: none; } 18%, 28% { transform: translateX(calc(100% + 1em)); } 34%, 90% { transform: translateX(calc(200% + 2em)); } 97%, 100% { transform: translateX(calc(200% + 2em)); opacity: 0; } }
@keyframes card-done { 0%, 32% { border-color: var(--g360-orange); } 38%, 100% { border-color: var(--g360-success); } }
@keyframes bar-fill { 0%, 32% { width: 66%; background: var(--g360-orange); } 38%, 100% { width: 100%; background: var(--g360-success); } }
@keyframes toast-in { 0%, 36% { opacity: 0; transform: translateY(10px) scale(0.97); } 41%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes wa-in { 0%, 44% { opacity: 0; transform: translateX(24px); } 49%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes wa-b1 { 0%, 50% { opacity: 0; transform: translateY(8px); } 55%, 100% { opacity: 1; transform: none; } }
@keyframes wa-b2 { 0%, 64% { opacity: 0; transform: translateY(8px); } 69%, 100% { opacity: 1; transform: none; } }
@keyframes draw { 0% { stroke-dashoffset: 1; } 22%, 88% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes msg-1 { 0%, 8% { opacity: 0; transform: translateY(8px); } 13%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes msg-2 { 0%, 24% { opacity: 0; transform: translateY(8px); } 29%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes msg-3 { 0%, 42% { opacity: 0; transform: translateY(8px); } 47%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes msg-4 { 0%, 58% { opacity: 0; transform: translateY(8px); } 63%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .pv-move { transform: translateX(calc(200% + 2em)); border-color: var(--g360-success); }
  .pv-move s { width: 100%; background: var(--g360-success); }
  .pv-chart .line { stroke-dashoffset: 0; }
  .msg, .pv-toast, .pv-wa, .wa-out, .wa-in { opacity: 1; }
}
}

/* ============================================================ Páginas internas (mobile first)
   Marco común: barra con vidrio al desplazar, portada corta y un bloque por vertical con su propia identidad. */
.inner .nav { background: var(--nav-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgb(var(--fg-rgb) / 0.08); padding-block: 0.7rem; }
.inner main { padding-top: 4rem; }
.wrap { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: 1.25rem; }

.page-hero { width: 100%; max-width: 72rem; margin-inline: auto; padding: 2.5rem 1.25rem 1.75rem; }
.page-hero .eyebrow { font: 500 0.72rem var(--g360-font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 0.6rem; }
.page-hero h1 { font: 700 clamp(2.8rem, 13vw, 4.5rem) / 0.95 var(--g360-font-display); }
.page-hero p:not(.eyebrow) { margin-top: 0.9rem; max-width: 30rem; font-size: 1.05rem; color: rgb(var(--fg-rgb) / 0.78); }

/* Un bloque por vertical: en celular uno bajo el otro; desde 52rem, lado a lado. */
.verticals { width: 100%; max-width: 72rem; margin-inline: auto; padding: 0.5rem 1.25rem 0; display: grid; gap: 0.9rem; }
.vblock { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 0.9rem; align-content: start; padding: 1.5rem 1.25rem 1.6rem; }
.vblock p { font-size: 0.97rem; color: rgb(var(--fg-rgb) / 0.82); }
.vblock .marks { margin-bottom: 0.2rem; }
.vblock .btn-saas, .vblock .btn-dev { margin-top: 0.3rem; width: 100%; justify-content: center; min-height: 3rem; }
/* SaaS: grafito, naranja y Barlow Condensed; esquinas rectas y botón naranja. */
.vblock-saas { background: var(--card-saas); border: 1px solid rgb(var(--fg-rgb) / 0.14); border-radius: var(--g360-radius); border-top: 3px solid var(--g360-orange); }
.vblock-saas h2 { font: 700 2.6rem / 0.95 var(--g360-font-display); }
.btn-saas { display: inline-flex; align-items: center; padding-inline: 1.3rem; background: var(--g360-orange); color: var(--g360-ink); border-radius: var(--g360-radius); font-weight: 600; font-size: 0.95rem; transition: filter 0.2s; }
.btn-saas:hover { filter: brightness(1.08); }
/* Dev: Dev Negro, Inter, brillo violeta, vidrio y botón fantasma. */
.vblock-dev { background: var(--card-dev); border: 1px solid rgb(var(--fg-rgb) / 0.12); border-radius: var(--g360-dev-radius-panel); }
.vblock-dev::before { content: ""; position: absolute; z-index: -1; right: -6rem; top: -7rem; width: 20rem; height: 20rem; background: radial-gradient(circle, rgb(139 92 246 / 0.3), transparent 70%); }
.vblock-dev h2 { font: 700 2.1rem / 1.05 var(--g360-font-body); letter-spacing: -0.02em; }
.btn-dev { display: inline-flex; align-items: center; padding-inline: 1.3rem; border: 1px solid rgb(var(--fg-rgb) / 0.35); border-radius: var(--g360-dev-radius-control); font-weight: 600; font-size: 0.95rem; transition: border-color 0.2s; }
.btn-dev:hover { border-color: var(--g360-dev-violet); }
.vblock .apps { margin-top: 0.4rem; }

/* Contenido de apoyo */
.page-body { width: 100%; max-width: 72rem; margin-inline: auto; padding: 2.25rem 1.25rem 3rem; display: grid; gap: 2rem; }
.section-title { font: 700 1.6rem / 1.1 var(--g360-font-display); margin-bottom: 0.7rem; }
.body-copy { max-width: 38rem; color: rgb(var(--fg-rgb) / 0.8); font-size: 1rem; }
.facts { display: grid; border-top: 1px solid rgb(var(--fg-rgb) / 0.12); font-size: 0.95rem; }
.facts dt { padding-top: 0.8rem; font-size: 0.78rem; color: rgb(var(--fg-rgb) / 0.55); }
.facts dd { margin: 0; padding: 0.15rem 0 0.8rem; border-bottom: 1px solid rgb(var(--fg-rgb) / 0.12); }
.underline { text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 52rem) {
  .inner main { padding-top: 4.5rem; }
  .wrap, .page-hero, .verticals, .page-body { padding-inline: clamp(1.5rem, 5vw, 3rem); }
  .page-hero { padding-top: 4rem; padding-bottom: 2.25rem; }
  .verticals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; padding-top: 0.5rem; }
  .vblock { padding: 2rem 2rem 2.2rem; min-height: 21rem; }
  .vblock .btn-saas, .vblock .btn-dev { width: max-content; }
  .page-body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; padding-block: 3.5rem 4.5rem; }
  .facts { grid-template-columns: 9rem 1fr; }
  .facts dt { padding: 0.8rem 0; font-size: 0.92rem; border-bottom: 1px solid rgb(var(--fg-rgb) / 0.12); }
  .facts dd { padding: 0.8rem 0; }
}

@media (max-width: 63.99rem) { .pv-metric { display: none; } }

/* ============================================================ Transición entre páginas
   Las tres páginas se funden al navegar (View Transitions entre documentos). La barra y el pie se quedan fijos.
   Donde el navegador no lo soporta, la página simplemente carga como siempre (sin efecto). */
@view-transition { navigation: auto; }
.nav { view-transition-name: site-nav; }
.foot { view-transition-name: site-foot; }
::view-transition-group(root) { animation-duration: 0.5s; }
::view-transition-old(root) { animation: vt-out 0.3s cubic-bezier(0.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-in 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) 0.12s both; }
::view-transition-group(site-nav), ::view-transition-group(site-foot) { animation-duration: 0.4s; }
@keyframes vt-out { to { opacity: 0; transform: scale(0.985); filter: blur(4px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(18px) scale(1.01); filter: blur(4px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ============================================================ Nosotros: contenido de apoyo (mobile first) */
.intro-row { padding-block: 0.5rem 1.5rem; }
.lead-copy { max-width: 40rem; font-size: 1.12rem; line-height: 1.55; color: rgb(var(--fg-rgb) / 0.9); }
.principles, .steps { list-style: none; padding: 0; display: grid; gap: 0.7rem; }
.principles li, .steps li { display: grid; gap: 0.25rem; padding: 1rem 1.1rem; border: 1px solid rgb(var(--fg-rgb) / 0.12); border-radius: 12px; background: rgb(var(--fg-rgb) / 0.03); }
.principles b, .steps b { font: 600 1rem var(--g360-font-body); }
.principles span, .steps span { font-size: 0.93rem; color: rgb(var(--fg-rgb) / 0.75); }
.steps { counter-reset: paso; }
.steps li { position: relative; padding-left: 3.4rem; }
.steps li::before { counter-increment: paso; content: counter(paso); position: absolute; left: 1.1rem; top: 1rem; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--g360-orange); color: var(--g360-ink); font: 700 0.85rem var(--g360-font-body); }
.cta-band { display: grid; gap: 0.8rem; justify-items: start; padding: 1.4rem 1.25rem; border-radius: 16px; background: linear-gradient(135deg, rgb(255 90 31 / 0.16), rgb(139 92 246 / 0.16)); border: 1px solid rgb(var(--fg-rgb) / 0.12); }
.cta-band .section-title { margin-bottom: 0; }
.cta-band .btn-saas { min-height: 3rem; }

/* ============================================================ Contacto: formulario (mobile first, campos de 16 px para que iOS no haga zoom) */
.contact { width: 100%; max-width: 72rem; margin-inline: auto; padding: 0.5rem 1.25rem 3rem; display: grid; gap: 2rem; }
.cform { display: grid; gap: 1.1rem; padding: 1.25rem 1.1rem 1.4rem; border: 1px solid rgb(var(--fg-rgb) / 0.12); border-radius: 16px; background: rgb(var(--fg-rgb) / 0.03); align-content: start; }
.cform legend { font: 600 1rem var(--g360-font-body); margin-bottom: 0.4rem; padding: 0; }
.interest { border: 0; padding: 0; margin: 0; min-width: 0; }
.group-label { margin: 0.6rem 0 0.4rem; font: 500 0.72rem var(--g360-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--fg-rgb) / 0.55); }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border: 1px solid rgb(var(--fg-rgb) / 0.25); border-radius: 999px; font-size: 0.93rem; font-weight: 500; transition: border-color 0.2s, background-color 0.2s, color 0.2s; }
.chip:hover span { border-color: rgb(var(--fg-rgb) / 0.6); }
.chip input:focus-visible + span { outline: 2px solid var(--g360-orange); outline-offset: 2px; }
.chip input:checked + span { background: var(--chip-on-bg); border-color: var(--chip-on-bg); color: var(--chip-on-fg); }
.chip-saas input:checked + span { background: var(--g360-orange); border-color: var(--g360-orange); color: var(--g360-ink); }
.chip-dev input:checked + span { background: var(--g360-dev-violet); border-color: var(--g360-dev-violet); color: #fff; }
.grid2 { display: grid; gap: 1.1rem; }
.field { display: grid; gap: 0.4rem; }
.field label:not(.check) { font-size: 0.88rem; font-weight: 500; }
.field input:not([type="checkbox"]), .field textarea { width: 100%; min-height: 3rem; padding: 0.7rem 0.9rem; border: 1px solid rgb(var(--fg-rgb) / 0.25); border-radius: 10px; background: var(--input-bg); color: var(--fg); font: 400 1rem/1.4 var(--g360-font-body); transition: border-color 0.2s; }
.field textarea { resize: vertical; min-height: 8rem; }
.field input::placeholder, .field textarea::placeholder { color: rgb(var(--fg-rgb) / 0.4); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--g360-orange); box-shadow: 0 0 0 3px rgb(255 90 31 / 0.22); }
.field [aria-invalid="true"] { border-color: var(--err-line); }
.err { margin: 0; font-size: 0.82rem; color: var(--err); }
.err:empty { display: none; }
.check { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; font-size: 0.85rem; line-height: 1.5; color: rgb(var(--fg-rgb) / 0.78); cursor: pointer; }
.check input { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; accent-color: var(--g360-orange); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin: 0; font-size: 0.92rem; outline: none; }
.form-status:empty { display: none; }
.form-status.is-error { padding: 0.7rem 0.9rem; border-radius: 10px; background: rgb(255 107 107 / 0.12); border: 1px solid rgb(255 107 107 / 0.4); color: var(--err-text); }
.cform .send { width: 100%; min-height: 3.25rem; border: 0; cursor: pointer; justify-content: center; font-family: inherit; }
.cform .send:disabled { opacity: 0.6; cursor: progress; }
.done { display: grid; gap: 0.6rem; padding: 0.5rem 0; outline: none; }
.done h2 { font: 700 1.7rem / 1.1 var(--g360-font-display); }
.done p { color: rgb(var(--fg-rgb) / 0.8); }
.direct { display: grid; gap: 0.9rem; align-content: start; }
.dcard { display: grid; gap: 0.5rem; padding: 1rem 1.1rem; border-radius: 12px; font-size: 1rem; }
.dcard .marks { margin: 0; }
.dcard-saas { background: var(--card-saas); border: 1px solid rgb(var(--fg-rgb) / 0.14); border-top: 3px solid var(--g360-orange); }
.dcard-dev { background: var(--card-dev); border: 1px solid rgb(var(--fg-rgb) / 0.12); border-radius: 16px; }

@media (min-width: 52rem) {
  .intro-row { padding-block: 1rem 2rem; }
  .principles, .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; }
  .block-wide { grid-column: 1 / -1; }
  .cta-band { grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: center; padding: 1.8rem 2rem; }
  .cta-band .section-title, .cta-band .body-copy { grid-column: 1; }
  .cta-band .btn-saas { grid-column: 2; grid-row: 1 / span 2; }
  .contact { padding-inline: clamp(1.5rem, 5vw, 3rem); grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.5rem; padding-bottom: 4.5rem; align-items: start; }
  .cform { padding: 2rem; }
  .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cform .send { width: max-content; padding-inline: 2rem; }
}

/* Barra en celular: el logotipo no se encoge; los enlaces y el botón se compactan para que quepa todo desde 360 px. */
.brand, .logo { flex: none; }
@media (max-width: 40rem) {
  .nav { padding-inline: 1rem; gap: 0.25rem; }
  .nav .logo img { height: 22px; }
  .nav .link { padding: 0.35rem 0.5rem; font-size: 0.8rem; }
  .tools { margin-left: 0.1rem; }
  .theme-toggle { width: 2.25rem; height: 2.25rem; }
  .theme-toggle svg { width: 1.05rem; height: 1.05rem; }
}
@media (max-width: 23rem) { .nav .link { padding-inline: 0.38rem; font-size: 0.76rem; } }

/* ============================================================ Fondo de las páginas internas: el mismo color del selector
   SaaS a la izquierda (naranja), Dev a la derecha (espectro), con la misma inclinación pero fundidos (sin línea que cruce el texto). Fijo, detrás del contenido. */
.inner::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 42% at 6% 4%, rgb(255 90 31 / var(--glow-a)), transparent 72%),
    radial-gradient(48% 40% at 96% 30%, rgb(139 92 246 / var(--glow-a)), transparent 72%),
    radial-gradient(52% 40% at 84% 98%, rgb(59 130 246 / var(--glow-b)), transparent 72%),
    linear-gradient(104deg, var(--slice-saas) 38%, var(--slice-dev) 66%); }
:root { --glow-a: 0.34; --glow-b: 0.26; }
:root[data-theme="light"] { --glow-a: 0.22; --glow-b: 0.16; }
@media (min-width: 52rem) { .inner::before { background:
    radial-gradient(40% 46% at 8% 6%, rgb(255 90 31 / var(--glow-a)), transparent 72%),
    radial-gradient(36% 44% at 96% 34%, rgb(139 92 246 / var(--glow-a)), transparent 72%),
    radial-gradient(40% 40% at 86% 98%, rgb(59 130 246 / var(--glow-b)), transparent 72%),
    linear-gradient(108deg, var(--slice-saas) 42%, var(--slice-dev) 70%); } }

/* Contacto general de la empresa (contacto@): tarjeta neutra, sin identidad de vertical. */
.dcard-general { background: rgb(var(--fg-rgb) / 0.04); border: 1px solid rgb(var(--fg-rgb) / 0.14); }
.dcard-general .marks img { height: 22px; }
.dcard small { font-size: 0.8rem; color: rgb(var(--fg-rgb) / 0.6); }