/* AXIO · Digital Solutions Studio: portafolio. Grafito, blanco e índigo (colores de la marca: #4F46E5, #111827, #FFFFFF, #E5E7EB).
   Tipografía: Unbounded (titulares) y Manrope (texto). Primero el teléfono. */

:root {
  --tinta: #0b0f1a;
  --tinta-2: #111827;
  --tinta-3: #1a2233;
  --papel: #f5f6fa;
  --indigo: #4f46e5;
  --acento: #818cf8;
  --gris: #9ca3af;
  --linea: rgb(229 231 235 / .1);
  --r: 22px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --display: "Unbounded", system-ui, sans-serif;
  --sans: "Manrope", system-ui, sans-serif;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; background: var(--tinta); color: var(--papel); font: 400 1rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ol { margin: 0; }
.envoltura { width: min(1200px, 100% - 32px); margin-inline: auto; }
body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

.antetitulo { margin-bottom: 1rem; font-size: .74rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--acento); }
.titulo-sec { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 7.5vw, 4.2rem); line-height: 1.02; letter-spacing: -.03em; }
.titulo-sec em, .titulo em { font-style: normal; color: var(--acento); }
.nota-sec { color: var(--gris); margin-top: 1rem; max-width: 52ch; }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 1.5rem; border-radius: 999px; border: 0; cursor: pointer; font-weight: 800; font-size: .95rem; text-decoration: none;
  transition: transform .35s var(--ease), background-color .25s, box-shadow .25s; }
.btn:active { transform: scale(.97); }
.btn-acento { background: var(--indigo); color: #fff; box-shadow: 0 12px 34px -12px rgb(79 70 229 / .9); }
.btn-acento:hover { background: #5b54f0; }
.btn-borde { box-shadow: inset 0 0 0 1.5px rgb(243 239 230 / .35); }
.btn-borde:hover { box-shadow: inset 0 0 0 1.5px var(--acento); color: var(--acento); }
.btn-sm { height: 40px; padding: 0 1.1rem; font-size: .85rem; }
.btn-lg { height: 60px; padding: 0 2rem; font-size: 1.05rem; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 8px; }

/* Cabecera */
.cab { position: fixed; inset: 0 0 auto; z-index: 50; height: 64px; display: flex; align-items: center; gap: 1rem; padding: 0 16px; transition: background-color .4s; }
.cab.solida { background: rgb(13 13 18 / .8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--linea); }
.marca { display: inline-flex; align-items: center; text-decoration: none; }
.marca img { height: 24px; width: auto; }
.cab-nav { display: none; gap: 2rem; margin-left: auto; }
.cab-nav a { text-decoration: none; font-weight: 600; font-size: .9rem; color: var(--gris); }
.cab-nav a:hover { color: var(--acento); }
.cab .btn { margin-left: auto; }
@media (min-width: 900px) { .cab { padding: 0 32px; } .cab-nav { display: flex; } .cab .btn { margin-left: 1.5rem; } }

/* Inicio con la "A" del logo en 3D */
.inicio { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; padding: 0 16px 9vh; overflow: hidden;
  background: radial-gradient(70% 55% at 70% 30%, rgb(79 70 229 / .18), transparent 70%), var(--tinta); }
.monograma { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.inicio-texto { position: relative; z-index: 2; max-width: 640px; pointer-events: none; }
.inicio-texto a { pointer-events: auto; }
.titulo { font-family: var(--display); font-weight: 800; font-size: clamp(2.9rem, 13vw, 6.6rem); line-height: .96; letter-spacing: -.045em; }
.titulo .linea { display: inline-block; }
.bajada { margin-top: 1.2rem; max-width: 40ch; color: var(--gris); font-size: 1.05rem; }
.acciones { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }
@media (min-width: 900px) { .inicio { padding: 0 6vw 12vh; align-items: center; } }

/* Demos */
.demos { padding: 14vh 0 10vh; }
.tarjetas { display: grid; gap: 1.2rem; margin-top: 2.6rem; }
.tarjeta { position: relative; display: grid; grid-template-columns: 132px 1fr; gap: 1.2rem; align-items: center; padding: 1rem; border-radius: var(--r); text-decoration: none;
  background: linear-gradient(135deg, var(--fondo), var(--tinta-2) 70%); border: 1px solid var(--linea); overflow: hidden; transition: transform .5s var(--ease), border-color .3s; }
a.tarjeta:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--acento) 55%, transparent); }
.tarjeta-tel { aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 0 0 4px #000, 0 0 0 5px rgb(243 239 230 / .15), 0 20px 40px -14px rgb(0 0 0 / .8); }
.tarjeta-tel video { width: 100%; height: 100%; object-fit: cover; }
.tarjeta-tel-vacio { display: grid; place-items: center; background: repeating-linear-gradient(135deg, var(--tinta-2) 0 10px, var(--tinta-3) 10px 20px); }
.tarjeta-tel-vacio span { font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.tarjeta-rubro { font-size: .7rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--acento); }
.tarjeta h3 { font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 5vw, 2.2rem); letter-spacing: -.03em; margin: .2rem 0 .4rem; }
.tarjeta p { color: var(--gris); font-size: .92rem; }
.tarjeta-ir { display: inline-flex; gap: .4rem; margin-top: .8rem; font-weight: 800; color: var(--acento); }
.tarjeta-ir i { font-style: normal; transition: transform .35s var(--ease); }
a.tarjeta:hover .tarjeta-ir i { transform: translateX(6px); }
.tarjeta-pronto { opacity: .7; }
@media (min-width: 900px) {
  .tarjetas { grid-template-columns: repeat(3, 1fr); }
  .tarjeta { grid-template-columns: 1fr; padding: 1.4rem; align-items: start; }
  .tarjeta-tel { width: 62%; margin: .4rem auto 0; }
}
@media (min-width: 1240px) {
  .tarjetas { grid-template-columns: repeat(4, 1fr); }
  .tarjeta-tel { width: 70%; }
}

.filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.8rem; }
.filtro { font: inherit; font-size: .85rem; font-weight: 700; padding: .6rem 1.05rem; border-radius: 99px; cursor: pointer; color: var(--gris);
  background: rgb(255 255 255 / .04); border: 1px solid var(--linea); transition: color .25s, background .25s, border-color .25s; }
.filtro:hover { color: #fff; }
.filtro.activo { color: #fff; background: var(--indigo); border-color: var(--indigo); }
.tarjetas { margin-top: 1.6rem; }
.tarjeta[hidden] { display: none; }

/* Servicios */
.servicios { padding: 10vh 0; background: linear-gradient(180deg, var(--tinta), var(--tinta-2) 40%, var(--tinta)); }
.servicios-grid { display: grid; gap: 1rem; margin-top: 2.4rem; }
.servicio { padding: 1.6rem; border-radius: var(--r); background: var(--tinta-3); border: 1px solid var(--linea); }
.servicio-num { font-family: var(--display); font-size: .9rem; font-weight: 700; color: var(--acento); }
.servicio h3 { font-family: var(--display); font-weight: 600; font-size: 1.25rem; letter-spacing: -.02em; margin: .8rem 0 .5rem; }
.servicio p { color: var(--gris); }
@media (min-width: 900px) { .servicios-grid { grid-template-columns: repeat(3, 1fr); } }

/* Proceso */
.proceso { padding: 10vh 0; }
.pasos { list-style: none; padding: 0; margin-top: 2.4rem; display: grid; gap: 0; counter-reset: paso; }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 3.4rem 1fr; gap: .3rem 1rem; padding: 1.4rem 0; border-top: 1px solid var(--linea); }
.pasos li::before { content: counter(paso, decimal-leading-zero); grid-row: 1 / 3; font-family: var(--display); font-weight: 700; font-size: 1.6rem; color: var(--acento); line-height: 1.1; }
.pasos b { font-family: var(--display); font-weight: 600; font-size: 1.3rem; letter-spacing: -.02em; }
.pasos p { color: var(--gris); max-width: 52ch; }

/* Contacto */
.contacto { padding: 14vh 0; text-align: center; background: radial-gradient(60% 60% at 50% 40%, rgb(79 70 229 / .2), transparent 70%); }
.contacto-in { display: grid; justify-items: center; gap: 1.2rem; }
.contacto-marca { width: 96px; height: 96px; border-radius: 24px; box-shadow: 0 20px 50px -16px rgb(79 70 229 / .7), 0 0 0 1px rgb(129 140 248 / .25); }
.contacto .bajada { margin: 0 auto; }

/* Pie */
.pie { padding: 3rem 0 4rem; border-top: 1px solid var(--linea); }
.pie-in { display: grid; gap: .6rem; }
.pie-logo { height: 30px; width: auto; }
.pie-lema { font-size: .72rem; letter-spacing: .32em; text-transform: uppercase; color: var(--gris); }
.pie-nota { color: var(--gris); font-size: .82rem; max-width: 70ch; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }