/* ARCHIVO GENERADO — no lo edites a mano.
   Lo arma construir-css.mjs uniendo, en este orden:
     assets/css/modulos/base.css
     assets/css/modulos/botones.css
     assets/css/modulos/navegacion.css
     assets/css/modulos/portada.css
     assets/css/modulos/idea.css
     assets/css/modulos/adaptable.css
     assets/css/modulos/conversacion.css
     assets/css/modulos/footer.css
     assets/css/modulos/preguntas.css
     assets/css/modulos/contacto.css
     assets/css/modulos/trabajos.css
     assets/css/modulos/whatsapp.css
     assets/css/modulos/formulario.css
     assets/css/modulos/movil.css
   Para cambiar un estilo, editá el módulo que corresponda y volvé a correr:
     node construir-css.mjs */

/* ATech — BASE — capas, variables (:root), reset, utilidades, .shell, .skip, la biblioteca de símbolos SVG
   y la tipografía de h1/h2/h3. Lo carga toda página del sitio y va siempre primero:
   el orden de @layer y las variables tienen que existir antes que el resto.
   Origen: bloque del antiguo styles.css (líneas 1-232, 475-503). */
/* ATech — estilos del sitio. Sin frameworks: la base y las pocas utilidades están al inicio. */
/* ============================================================
   BASE + UTILIDADES (reemplazan a Tailwind por CDN, que pesaba ~270 KB de JS).
   Son exactamente las reglas de Tailwind v4 que la página usaba, en las mismas capas:
   los estilos de este archivo fuera de capas siguen teniendo prioridad.
   Si agregás una clase utilitaria nueva en el HTML, definila acá en @layer utilities.
   ============================================================ */

/* ── Tipografías, alojadas en el propio sitio ──
   Antes venían de api.fontshare.com: eso agregaba una hoja de estilo bloqueante en otro dominio
   (DNS + TLS + descarga) antes de poder pintar, y los archivos de fuente llegaban después de eso.
   Sirviéndolas desde acá, la conexión ya está abierta y empiezan a bajar apenas se lee este CSS.
   Para actualizarlas: bajá el .woff2 de Fontshare y reemplazá el archivo en assets/fonts/. */
@font-face {
  font-family:"General Sans";
  src:url(/assets/fonts/general-sans-600.woff2) format("woff2");
  font-weight:600; font-style:normal; font-display:swap
}
@font-face {
  font-family:"Synonym";
  src:url(/assets/fonts/synonym-400.woff2) format("woff2");
  font-weight:400; font-style:normal; font-display:swap
}
@font-face {
  font-family:"Tanker";
  src:url(/assets/fonts/tanker-400.woff2) format("woff2");
  font-weight:400; font-style:normal; font-display:swap
}

@layer theme, base, components, utilities;

@layer base {
  *,::after,::before,::backdrop,::file-selector-button {
    box-sizing:border-box;
    margin:0;
    padding:0;
    border:0 solid
  }
  html,:host {
    line-height:1.5;
    -webkit-text-size-adjust:100%;
    tab-size:4;
    font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-feature-settings:normal;
    font-variation-settings:normal;
    -webkit-tap-highlight-color:transparent
  }
  hr {
    height:0;
    color:inherit;
    border-top-width:1px
  }
  abbr:where([title]) {
    -webkit-text-decoration:underline dotted;
    text-decoration:underline dotted
  }
  h1,h2,h3,h4,h5,h6 {
    font-size:inherit;
    font-weight:inherit
  }
  a {
    color:inherit;
    -webkit-text-decoration:inherit;
    text-decoration:inherit
  }
  b,strong {
    font-weight:bolder
  }
  code,kbd,samp,pre {
    font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    font-size:1em
  }
  small {
    font-size:80%
  }
  sub,sup {
    font-size:75%;
    line-height:0;
    position:relative;
    vertical-align:baseline
  }
  sub {
    bottom:-.25em
  }
  sup {
    top:-.5em
  }
  table {
    text-indent:0;
    border-color:inherit;
    border-collapse:collapse
  }
  :-moz-focusring {
    outline:auto
  }
  progress {
    vertical-align:baseline
  }
  summary {
    display:list-item
  }
  ol,ul,menu {
    list-style:none
  }
  img,svg,video,canvas,audio,iframe,embed,object {
    display:block;
    vertical-align:middle
  }
  img,video {
    max-width:100%;
    height:auto
  }
  button,input,select,optgroup,textarea,::file-selector-button {
    font:inherit;
    font-feature-settings:inherit;
    font-variation-settings:inherit;
    letter-spacing:inherit;
    color:inherit;
    border-radius:0;
    background-color:transparent;
    opacity:1
  }
  ::placeholder {
    opacity:1
  }
  @supports (not (-webkit-appearance:-apple-pay-button)) or (contain-intrinsic-size:1px) {
    ::placeholder {
      color:color-mix(in oklab,currentcolor 50%,transparent)
    }
  }
  textarea {
    resize:vertical
  }
  ::-webkit-search-decoration {
    -webkit-appearance:none
  }
  :-moz-ui-invalid {
    box-shadow:none
  }
  button,input:where([type=button],[type=reset],[type=submit]),::file-selector-button {
    appearance:button
  }
  ::-webkit-inner-spin-button,::-webkit-outer-spin-button {
    height:auto
  }
  [hidden]:where(:not([hidden=until-found])) {
    display:none!important
  }
}

@layer utilities {
  .relative { position:relative }
  .isolate { isolation:isolate }
  .flex { display:flex }
  .grid { display:grid }
  .hidden { display:none }
  .grid-cols-1 { grid-template-columns:repeat(1,minmax(0,1fr)) }
  .flex-wrap { flex-wrap:wrap }
  .items-center { align-items:center }
  .gap-2 { gap:.5rem }
  .gap-5 { gap:1.25rem }
  .gap-8 { gap:2rem }
  .antialiased { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale }
  @media (width>=48rem) {
    .md\:flex { display:flex }
    .md\:grid-cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)) }
  }
}

:root {
  --bg:#ffffff;
  --accent:#1747e6;
  --text:#0b1220;
  --muted:#5b6678;
  --line:#0f17291a;
  color-scheme:light;
  font-family:"Synonym",sans-serif;
  color:var(--text);
  background:var(--bg)
}

* {
  box-sizing:border-box
}

body {
  margin:0
}

html {
  scroll-behavior:smooth
}

a {
  color:inherit;
  text-decoration:none
}

button,input,select,textarea {
  font:inherit
}

button {
  color:inherit;
  cursor:pointer
}

button,a {
  -webkit-tap-highlight-color:transparent
}

button:disabled {
  cursor:default;
  opacity:.4
}

button:focus-visible,a:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:6px
}

::selection {
  background:var(--accent);
  color:#ffffff
}

.shell {
  width:min(1440px,90%);
  margin-inline:auto
}

.skip {
  position:fixed;
  top:-80px;
  left:15px;
  padding:16px;
  background:var(--accent);
  color:#ffffff;
  z-index:120
}

.skip:focus {
  top:15px
}

/* Biblioteca de símbolos SVG: no ocupa espacio en la página. */
.svg-library {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
  pointer-events:none
}

h1,h2,h3 {
  font-family:"Tanker",sans-serif;
  font-weight:400;
  font-synthesis:none;
  text-transform:uppercase
}

/* Tanker ya es condensada: los títulos usan espaciado normal (anula el negativo de cada sección). */
h1,h2,h3 {
  letter-spacing:.01em!important
}

/* Subtítulos de sección (h2): General Sans Semibold, en mayúscula y minúscula como en la muestra. */
h2 {
  font-family:"General Sans",sans-serif;
  font-weight:600;
  font-synthesis:none;
  text-transform:none;
  letter-spacing:-.02em!important
}

h1 {
  font-size:clamp(44px,4.6vw,70px);
  font-weight:500;
  letter-spacing:-.025em;
  line-height:1.14;
  margin:0 0 27px
}


/* ATech — BOTONES compartidos — .button, .button-small, .button-primary, .button-arrow y su brillo.
   Los usan la portada, el pie y las páginas legales.
   Origen: bloque del antiguo styles.css (líneas 374-446). */
.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border:1px solid #0f172926;
  padding:10px 11px 10px 23px;
  border-radius:7px;
  font-weight:600;
  font-size:14px;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  transition:background .2s,border-color .2s
}

.button-small {
  padding:9px 15px;
  font-size:13px;
  gap:18px
}

.button-small:hover {
  background:#0f17290a
}

.button-primary {
  background:var(--accent);
  border-color:var(--accent);
  color:#ffffff;
  min-height:56px;
  box-shadow:0 6px 30px #1747e633
}

.button-primary:before {
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-110%) skewX(-15deg);
  background:linear-gradient(90deg,transparent,#ffffff66,transparent);
  pointer-events:none
}

.button-primary:hover:before {
  animation:button-shine .8s ease-out
}

.button-primary:hover {
  background:#0f3bd1
}

.button-arrow {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  background:#ffffff24;
  border-radius:4px;
  font-size:22px;
  font-weight:400;
  transition:transform .3s
}

.button:hover .button-arrow {
  transform:rotate(45deg)
}

@keyframes button-shine {
  to {
    transform:translateX(110%) skewX(-15deg)
  }
}


/* ATech — NAVEGACIÓN — .nav, .brand, .nav-links y .nav-toggle. La marca (.brand) también la usan
   las páginas legales en su cabecera.
   Origen: bloque del antiguo styles.css (líneas 269-373). */
.nav {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  height:88px;
  padding-top:10px;
  gap:22px
}

.brand {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:25px;
  font-weight:700;
  letter-spacing:-1.2px
}

.brand svg {
  width:29px;
  height:29px;
  flex-shrink:0;
  fill:var(--accent)
}

.brand sup {
  font-size:11px;
  align-self:flex-start;
  margin-top:6px;
  letter-spacing:0
}

.nav-links {
  display:flex;
  align-items:center;
  gap:32px;
  font-size:13px;
  color:#3b4658
}

/* Subrayado que crece al pasar por encima y queda fijo en la sección que estás mirando. */
.nav-links a {
  position:relative;
  padding-block:7px;
  transition:color .2s
}

.nav-links a::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  border-radius:2px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease
}

.nav-links a:hover,.nav-links a:focus-visible,.nav-links a[aria-current] {
  color:var(--text)
}

.nav-links a:hover::after,.nav-links a:focus-visible::after,.nav-links a[aria-current]::after {
  transform:scaleX(1)
}

/* Botón del menú: solo aparece cuando los enlaces no entran. */
.nav-toggle {
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid var(--line);
  border-radius:11px;
  background:#ffffff
}

.nav-toggle span {
  display:block;
  width:17px;
  height:2px;
  border-radius:2px;
  background:var(--text);
  transition:transform .25s ease,opacity .2s ease
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform:translateY(7px) rotate(45deg)
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity:0
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform:translateY(-7px) rotate(-45deg)
}


/* ATech — PORTADA (#inicio) — fondo y luz del hero, título rotativo, escena 3D, notificaciones,
   respaldo en CSS si falla WebGL, y la sección del proceso (#enfoque).
   Origen: bloque del antiguo styles.css (líneas 233-268, 447-474, 504-1039). */
/* El hero espera oculto hasta que GSAP aplica el estado inicial de la entrada, así no se ve un
   salto. Lo pone y lo saca hero.js, que además lo destapa a los 4,2 s si la librería no llega. */
.hero-entering .hero-title,
.hero-entering .hero-reveal,
.hero-entering .notification {
  opacity:0
}

/* Luz ambiental. Sin blur en el texto ni en el canvas 3D. */
.hero {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:radial-gradient(ellipse at 78% 45%,#e5edfe 0%,transparent 55%),linear-gradient(125deg,#ffffff,#f4f7fd)
}

.hero-gridlines {
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:linear-gradient(90deg,#1747e60a 1px,transparent 1px);
  background-size:16.6667% 100%;
  mask-image:linear-gradient(transparent,#000000 40%,transparent)
}

.ambient-light {
  position:absolute;
  left:28%;
  top:8%;
  width:850px;
  height:850px;
  z-index:-1;
  background:radial-gradient(circle,#1747e612,transparent 65%);
  pointer-events:none
}

.hero-layout {
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.15fr);
  align-items:center;
  min-height:660px;
  gap:10px;
  padding-block:0 30px
}

.hero-copy {
  position:relative;
  z-index:4;
  padding-bottom:22px
}

.eyebrow {
  font:11px/1.8 "Synonym",sans-serif;
  letter-spacing:1.6px;
  color:#5b6678;
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 0 24px
}


/* Títulos: Tanker (Fontshare). El texto general usa Synonym Regular. */
/* Títulos en mayúscula negrita. El texto del HTML queda en minúscula (mejor para buscadores y lectores de pantalla). */
/* Título del hero: "Dejá de" fijo + frase rotativa (hero-typewriter.js).
   El alto de la rotativa está reservado para que el layout no salte mientras escribe. */
.hero-title {
  font-size:clamp(2.1rem,11.8vw,5.5rem);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-.035em;
  margin:0 0 20px
}

.hero-rot {
  display:block;
  color:var(--accent);
  min-height:2.12em
}

/* Cada frase se corta en dos renglones donde marca el "\n" de hero-typewriter.js. */
#rot {
  white-space:pre-line
}

/* Desde 801px el hero va en dos columnas: el tamaño sale del ancho de la columna de texto,
   para que el renglón más largo ("explicar lo mismo", ~7em con el cursor) entre sin tocar la tarjeta "Nuevo pedido". */
@media(min-width:801px) {
  .hero-title {
    font-size:5.2vw
  }
}

@media(min-width:1151px) {
  .hero-title {
    font-size:min(4.9vw,80px)
  }
}

.hero-caret {
  display:inline-block;
  width:.055em;
  height:.84em;
  background:currentColor;
  vertical-align:-.07em;
  margin-left:.05em;
  animation:caret-blink .9s step-end infinite
}

.hero-caret.is-typing {
  animation:none;
  opacity:1
}

@keyframes caret-blink {
  0%,100% {
    opacity:1
  }
  50% {
    opacity:0
  }
}

.intro {
  font-size:16px;
  line-height:1.8;
  color:#4a5568;
  max-width:420px;
  margin:0 0 30px
}

.hero-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:22px
}


/* Escena: dimensiones estables; ningún escalado CSS que amplíe sus píxeles. */
.visual-area {
  min-width:0;
  position:relative;
  margin-left:-38px
}

.visual {
  height:590px;
  position:relative
}

.scene-glow {
  position:absolute;
  inset:12% 0 0;
  background:radial-gradient(ellipse at center,#1747e61a 0%,transparent 67%)
}

.orbital {
  position:absolute;
  width:83%;
  height:80%;
  left:10%;
  top:8%;
  border:1px solid #1747e61f;
  border-radius:50%;
  transform:rotate(-23deg)
}

.orbital-two {
  width:109%;
  height:68%;
  left:-2%;
  top:17%;
  border-style:dashed;
  border-color:#1747e624;
  transform:rotate(-35deg)
}

.orbital i {
  position:absolute;
  width:4px;
  height:4px;
  background:#1747e699;
  border-radius:50%;
  top:50%;
  left:-2px;
  box-shadow:0 0 8px #1747e666
}

.orbital-two i {
  left:auto;
  right:-2px
}

.stage-shadow {
  position:absolute;
  left:16%;
  right:9%;
  height:21%;
  bottom:4%;
  background:radial-gradient(ellipse,#0f172940 0%,transparent 67%);
  transform:rotate(-8deg)
}

#scene {
  position:absolute;
  inset:0;
  z-index:1
}

#scene canvas {
  display:block;
  width:100%;
  height:100%
}

.notification {
  position:absolute;
  z-index:2;
  pointer-events:none
}

.card-inner {
  position:relative;
  border:1px solid #ffffffcc;
  border-radius:13px;
  background:linear-gradient(115deg,#ffffffeb,#f1f5fde0);
  box-shadow:0 18px 40px #0f172924,inset 0 1px #ffffff;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  padding:16px
}

.order {
  top:30%;
  left:-1%;
  transform:rotate(-7deg)
}

.order .card-inner,.message .card-inner {
  display:flex;
  align-items:center;
  gap:12px
}

.card-icon {
  display:grid;
  place-items:center;
  width:37px;
  height:37px;
  background:#1747e614;
  border:1px solid #1747e62b;
  border-radius:10px
}

.card-icon svg {
  width:19px;
  height:19px;
  fill:none;
  stroke:#1747e6;
  stroke-width:1.4
}

.notification small {
  display:block;
  font:7px "Synonym",sans-serif;
  letter-spacing:1.05px;
  color:#6b7688
}

.notification small i {
  font-size:7px;
  letter-spacing:0;
  font-style:normal;
  margin-left:10px;
  opacity:.65
}

.notification strong {
  display:block;
  font-size:13px;
  font-weight:500;
  margin:7px 0;
  letter-spacing:-.15px
}

.notification p {
  font-size:9px;
  color:#5b6678;
  margin:0
}

.card-text p span {
  color:#1747e6
}

.message {
  top:10%;
  right:1%;
  transform:rotate(5deg)
}

.message .card-inner {
  padding:17px
}

.avatar {
  width:33px;
  height:33px;
  border-radius:50%;
  background:linear-gradient(130deg,#3f6ef0,#1747e6);
  color:#ffffff;
  display:grid;
  place-items:center;
  font-size:13px;
  position:relative
}

.avatar span {
  position:absolute;
  bottom:0;
  right:0;
  width:8px;
  height:8px;
  border:2px solid #ffffff;
  border-radius:50%;
  background:#22c55e
}

.unread {
  height:5px;
  width:5px;
  background:var(--accent);
  border-radius:50%
}

.sales {
  right:0;
  bottom:15%;
  width:184px;
  transform:rotate(7deg)
}

.sales small>span {
  float:right;
  font-size:12px;
  color:#1747e6
}

.sales-value {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:6px
}

.sales-value strong {
  font-size:44px;
  letter-spacing:-2px;
  font-weight:500
}

.sales-value em {
  font-style:normal;
  font-size:27px
}

.sales-badge {
  display:grid;
  place-items:center;
  background:#1747e614;
  border:1px solid #1747e622;
  color:#1747e6;
  border-radius:50%;
  width:24px;
  height:24px
}

.sales p {
  font-size:8px
}

.sales-chart {
  width:100%;
  height:42px;
  margin-top:8px;
  overflow:visible
}

.chart-area {
  fill:url(#chart-fill)
}

.chart-line {
  fill:none;
  stroke:#1747e6;
  stroke-width:1.7
}

/* Respaldo visible sin JS, sin WebGL o si falla Three.js. */
.fallback {
  position:absolute;
  width:69%;
  left:17%;
  top:29%;
  transform:perspective(1000px) rotateY(-16deg) rotateZ(-6deg)
}

.fallback-screen {
  aspect-ratio:1.57;
  padding:18px;
  background:#e8ecf2;
  border:9px solid #21262e;
  border-radius:12px;
  color:#1d1a22;
  display:flex;
  align-items:center;
  flex-direction:column;
  justify-content:space-between;
  box-shadow:2px 2px 0 #8d9aac
}

.fallback-screen small {
  font:7px "Synonym",sans-serif;
  width:100%;
  display:flex;
  justify-content:space-between
}

.fallback-screen strong {
  font-size:clamp(16px,2.5vw,35px);
  letter-spacing:-1px;
  text-align:center;
  line-height:1.05
}

.fallback-screen strong span {
  color:#718aac
}

.fallback-screen p {
  font-size:9px;
  margin:0
}

.fallback-screen b {
  background:var(--accent);
  padding:7px 13px;
  font-size:8px;
  border-radius:20px
}

.fallback-base {
  height:55px;
  margin:0 -30px;
  background:linear-gradient(#64748a,#323a45);
  clip-path:polygon(7% 0,93% 0,100% 87%,96% 100%,4% 100%,0 87%)
}

.fallback-phone {
  position:absolute;
  left:-7%;
  top:30%;
  width:24%;
  height:83%;
  border:5px solid #20252c;
  border-radius:14px;
  background:#e8ecf2;
  color:#202833;
  padding:12px 7px;
  box-shadow:2px 2px 0 #9ca7b7;
  transform:rotate(-7deg)
}

.fallback-phone small {
  font-size:7px
}

.fallback-phone strong {
  display:block;
  font-size:14px;
  line-height:1.05;
  margin-top:20px
}

.fallback-phone i {
  display:block;
  margin:18px auto;
  background:linear-gradient(45deg,#566e8f,#adc4e5);
  width:75%;
  aspect-ratio:1;
  border-radius:50%
}

.visual.ready .fallback {
  display:none
}

/* Columnas de contenido y objetos CSS 3D, animados al hacer scroll. */
.approach-inner {
  position:relative;
  z-index:1;
  padding-block:105px 90px
}

.section-heading {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:0 50px;
  align-items:end
}

.section-heading h2 {
  font-size:clamp(28px,3.2vw,46px);
  letter-spacing:-.02em;
  font-weight:500;
  line-height:1.2;
  margin:0
}

.section-heading h2 {
  color:#ffffff
}

.section-heading h2 span {
  color:#0b1220
}

.feature-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  margin-top:55px;
  perspective:1600px
}

.feature-card {
  border:1px solid var(--line);
  border-radius:13px;
  background:linear-gradient(150deg,#ffffff,#f5f8fe);
  box-shadow:0 30px 60px -32px #06206fcc;
  color:#0b1220;
  overflow:hidden;
  transform-origin:50% 100%
}

.feature-art {
  height:240px;
  position:relative;
  overflow:hidden;
  background:#eef2fb
}

/* Fotos del proceso: se recortan sin deformarse; cada una encuadra lo importante. */
.feature-art img {
  display:block;
  width:100%;
  height:100%
}

.feature-art img {
  object-fit:cover;
  object-position:50% 18%;
  transition:transform .9s cubic-bezier(.2,.8,.2,1)
}

.art-design img {
  object-position:60% 22%
}

.feature-card:hover .feature-art img {
  transform:scale(1.04)
}

.feature-content {
  padding:26px;
  border-top:1px solid var(--line)
}

.feature-index {
  font:10px "Synonym",sans-serif;
  color:#1747e6;
  letter-spacing:1.3px
}

.feature-content h3 {
  font-size:20px;
  font-weight:500;
  letter-spacing:-.01em;
  margin:14px 0 12px
}

.feature-content p {
  font-size:14px;
  color:#4a5568;
  line-height:1.85;
  max-width:290px;
  margin:0
}


/* ATech — SECCIÓN #idea — el título sobre el video y el diálogo "Tu idea, en palabras".
   El video en sí se estiliza en contacto.css.
   Origen: bloque del antiguo styles.css (líneas 1040-1152). */
.contact {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:0;
  display:grid;
  align-content:center;
  /* Mismo formato que el video (16:9): se ve el cuadro completo, sin recortes arriba ni abajo. */
  min-height:56.25vw
}

.contact h2 {
  font-size:clamp(38px,5vw,66px);
  font-weight:500;
  letter-spacing:-.025em;
  line-height:1.14;
  margin:0
}

.contact h2 em {
  font-style:normal;
  color:var(--accent)
}

.contact .button {
  position:relative;
  z-index:1
}

dialog {
  width:min(510px,90vw);
  max-height:90svh;
  overflow:auto;
  border:1px solid #1747e633;
  border-radius:15px;
  padding:34px;
  background:#ffffff;
  color:var(--text);
  box-shadow:0 30px 100px #0f172940;
  margin:auto
}

dialog::backdrop {
  background:#0b122066;
  backdrop-filter:blur(5px)
}

dialog h2 {
  font-size:26px;
  letter-spacing:-.01em;
  margin:0 0 14px
}

dialog .eyebrow {
  margin-bottom:15px
}

.dialog-description {
  font-size:14px;
  line-height:1.8;
  color:#4a5568;
  margin-bottom:24px
}

.dialog-close {
  position:absolute;
  right:12px;
  top:9px;
  font-size:25px;
  background:none;
  border:none;
  padding:5px 10px
}

dialog label {
  display:block;
  font-size:13px;
  color:#1c2433;
  margin:18px 0 8px
}

dialog input,dialog select,dialog textarea {
  width:100%;
  background:#f5f7fb;
  border:1px solid #0f172926;
  border-radius:6px;
  color:#0b1220;
  padding:12px;
  font-size:16px;
  resize:vertical
}

dialog input:focus,dialog select:focus,dialog textarea:focus {
  outline:1px solid var(--accent)
}

dialog select option {
  background:#ffffff
}

dialog .button {
  margin-top:22px;
  width:100%
}

.brief-status {
  min-height:16px;
  font-size:12px;
  line-height:1.6;
  color:#4a5568;
  margin-bottom:0
}


/* ATech — ADAPTABLE — las consultas de tamaño que ajustan portada, menú e #idea, más el bloque
   global de movimiento reducido. Va después de esos módulos porque los sobrescribe.
   Origen: bloque del antiguo styles.css (líneas 1153-1479). */
@media(min-width:1600px) {
  .hero-layout {
    min-height:740px
  }
  .visual {
    height:650px
  }
}

@media(max-width:1150px) {
  .hero-layout {
    min-height:600px;
    grid-template-columns:1fr 1.15fr
  }
  h1 {
    font-size:clamp(40px,5vw,52px)
  }
  .visual {
    height:530px
  }
  .visual-area {
    margin-left:-15px
  }
  .notification .card-inner {
    padding:12px
  }
  .order {
    left:-4%;
    top:31%
  }
  .message {
    right:-2%;
    top:12%
  }
  .notification strong {
    font-size:11px
  }
  .notification small {
    font-size:6px
  }
  .notification p {
    font-size:8px
  }
  .sales {
    width:156px;
    bottom:17%
  }
  .sales-value strong {
    font-size:37px
  }
  .hero-actions {
    gap:16px
  }
  .feature-content {
    padding:21px
  }
  .feature-content h3 {
    font-size:18px
  }
}

@media(max-width:800px) {
  .nav {
    height:70px;
    padding-top:6px
  }
  .nav {
    display:flex;
    position:relative;
    justify-content:flex-start;
    gap:12px
  }
  .nav-toggle {
    display:flex;
    margin-left:auto
  }
  /* En celular los enlaces bajan en un panel bajo el menú. */
  .nav-links {
    position:absolute;
    left:0;
    right:0;
    top:calc(100% - 2px);
    display:grid;
    gap:2px;
    padding:7px;
    font-size:15px;
    background:#ffffff;
    border:1px solid var(--line);
    border-radius:15px;
    box-shadow:0 26px 54px -26px #0f172959;
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:opacity .2s ease,transform .2s ease,visibility .2s;
    z-index:30
  }
  .nav-links[data-open="true"] {
    opacity:1;
    visibility:visible;
    transform:none
  }
  .nav-links a {
    padding:13px 14px;
    border-radius:10px
  }
  .nav-links a:hover,.nav-links a:focus-visible,.nav-links a[aria-current] {
    background:#f3f6fd
  }
  .nav-links a::after {
    left:14px;
    right:auto;
    bottom:9px;
    width:18px
  }
  .brand {
    font-size:23px
  }
  .hero-layout {
    grid-template-columns:1fr;
    padding-top:16px;
    gap:0
  }
  .hero-copy {
    padding-bottom:0
  }
  h1 {
    font-size:clamp(38px,9.6vw,62px)
  }
  .intro {
    max-width:430px;
    font-size:14px
  }
  .visual-area {
    margin:25px -2% 0
  }
  .visual {
    height:550px
  }
  .message {
    top:8%;
    right:3%
  }
  .order {
    top:29%;
    left:3%
  }
  .sales {
    width:175px;
    bottom:11%;
    right:4%
  }
  .notification small {
    font-size:7px
  }
  .notification strong {
    font-size:13px
  }
  .notification p {
    font-size:9px
  }
  .notification .card-inner {
    padding:15px
  }
  .approach-inner {
    padding-block:70px
  }
  .section-heading {
    grid-template-columns:1fr;
    gap:0
  }
  .feature-grid {
    grid-template-columns:1fr;
    margin-top:35px
  }
  .feature-card {
    display:grid;
    grid-template-columns:1fr 1fr
  }
  .feature-content {
    border-left:1px solid var(--line);
    border-top:0;
    display:flex;
    justify-content:center;
    flex-direction:column
  }
  .feature-art {
    height:auto;
    min-height:260px
  }

  .contact h2 {
    letter-spacing:-.02em
  }
}

@media(max-width:500px) {
  .shell {
    width:89%
  }
  .visual {
    height:430px
  }
  .message {
    top:7%;
    right:0
  }
  .order {
    top:31%;
    left:-1%
  }
  .sales {
    bottom:10%;
    right:0;
    width:144px
  }
  .notification .card-inner {
    padding:11px
  }
  .notification strong {
    font-size:11px
  }
  .notification small {
    font-size:6px
  }
  .notification p {
    font-size:8px
  }
  .card-icon {
    width:27px;
    height:30px
  }
  .avatar {
    width:28px;
    height:28px
  }
  .message .card-inner {
    gap:9px
  }
  .sales-value strong {
    font-size:37px
  }
  .sales p {
    font-size:7px
  }
  .sales-chart {
    height:30px
  }
  .feature-card {
    grid-template-columns:1fr
  }
  .feature-art {
    height:240px;
    min-height:0
  }
  .feature-content {
    border-left:0;
    border-top:1px solid var(--line);
    padding:25px
  }
  .feature-content p {
    max-width:none
  }
  .fallback {
    top:30%
  }
  .fallback-screen {
    padding:11px;
    border-width:7px
  }
  .fallback-screen p {
    font-size:7px
  }
  .fallback-screen small {
    font-size:5px
  }
  .fallback-screen strong {
    font-size:24px
  }
  .fallback-phone strong {
    font-size:11px
  }
  .fallback-phone {
    padding:9px 5px
  }
  .fallback-phone i {
    margin-top:9px
  }
  .fallback-base {
    height:40px
  }
}

@media(max-width:360px) {
  h1 {
    font-size:34px
  }
  .visual {
    height:395px
  }
  .hero-actions {
    gap:15px
  }
  .order .card-inner {
    gap:7px
  }
  .message strong {
    font-size:10px
  }
  .sales {
    width:130px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
}

/* CONVERSACIÓN: celular real (assets/phone.webp) con un chat encima. Los globos desbordan el marco a propósito.
   La pantalla se ubica por porcentaje sobre la imagen (795×1639): x 6.16% · y 2.56% · 87.7% × 94.9%.
   Las unidades cqw escalan tipografía y radios con el ancho del celular.
   La sección ocupa todo el ancho (es la que se fija con ScrollTrigger); el contenido va en .conversation-inner. */

/* ATech — SECCIÓN #conversacion — el celular y los globos del chat, con sus estados sin GSAP.
   Origen: bloque del antiguo styles.css (líneas 1480-1828). */
.conversation {
  --chat-blue:#1747e6;
  --chat-blue-deep:#0f3bd1;
  --chat-ink:#0f1729;
  position:relative;
  overflow-x:clip;
  background:radial-gradient(ellipse 55% 60% at 72% 50%,#1747e60a,transparent 70%)
}

.conversation-inner {
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:center;
  gap:40px;
  min-height:100vh;
  min-height:100svh;
  padding-block:56px
}

.conversation-copy {
  position:relative;
  z-index:2;
  max-width:460px
}

.conversation-copy h2 {
  font-size:clamp(30px,3.4vw,48px);
  letter-spacing:-.02em;
  font-weight:500;
  line-height:1.2;
  margin:0 0 24px
}

.conversation-copy h2 span {
  color:var(--accent)
}

.conversation-copy>p:not(.eyebrow) {
  font-size:16px;
  line-height:1.8;
  color:#4a5568;
  margin:0
}

.conversation-stage {
  position:relative;
  display:grid;
  place-items:center;
  min-height:0
}

.phone-glow {
  position:absolute;
  width:min(70vh,640px);
  height:min(70vh,640px);
  border-radius:50%;
  background:radial-gradient(circle,#1747e62e 0%,#1747e610 38%,transparent 66%);
  pointer-events:none;
  z-index:0
}

.phone {
  position:relative;
  z-index:1;
  margin:0;
  height:min(calc(100vh - 150px),760px);
  height:min(calc(100svh - 150px),760px);
  aspect-ratio:795/1639;
  container-type:inline-size;
  will-change:transform
}

.phone img {
  display:block;
  width:100%;
  height:100%
}

.phone img {
  filter:drop-shadow(0 40px 60px #0f172940) drop-shadow(0 0 1px #0f172933)
}

.phone img {
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none
}

.phone-screen {
  position:absolute;
  left:6.16%;
  top:2.56%;
  width:87.7%;
  height:94.9%;
  display:flex;
  flex-direction:column;
  color:var(--chat-ink);
  z-index:2
}

.chat-header {
  display:flex;
  align-items:center;
  gap:3.4cqw;
  margin:12.5cqw 6cqw 0;
  padding-bottom:4cqw;
  border-bottom:1px solid #0f172914
}

.chat-avatar {
  display:grid;
  place-items:center;
  width:11cqw;
  height:11cqw;
  border-radius:50%;
  background:linear-gradient(150deg,#3f6ef0,var(--chat-blue-deep));
  flex-shrink:0
}

.chat-avatar svg {
  width:6.6cqw;
  height:6.6cqw;
  fill:#ffffff
}

.chat-header strong {
  display:block;
  font-size:4.4cqw;
  letter-spacing:-.2cqw;
  line-height:1.15
}

.chat-header small {
  display:block;
  font-size:3cqw;
  color:#6d7788;
  margin-top:.6cqw
}

.chat {
  list-style:none;
  margin:0;
  padding:6.5cqw 4.5cqw 0;
  display:flex;
  flex-direction:column;
  gap:5cqw
}

.chat-message {
  position:relative;
  max-width:84%
}

.chat-message p {
  position:relative;
  margin:0;
  padding:3.8cqw 4.6cqw;
  font-size:4.1cqw;
  line-height:1.42;
  border-radius:4.6cqw;
  transform-origin:0 100%
}

.chat-message p:after {
  content:"";
  position:absolute;
  bottom:-3.3cqw;
  width:3.6cqw;
  height:3.6cqw;
  background:inherit
}

/* Clienta: blanco, sale por la izquierda del marco. */
.from-client {
  align-self:flex-start;
  margin-left:-11cqw
}

.from-client p {
  background:#ffffff;
  border-bottom-left-radius:0;
  box-shadow:0 10px 30px #0f172926,0 0 0 1px #0f172914
}

.from-client p:after {
  left:0;
  clip-path:polygon(0 0,100% 0,0 100%)
}

/* ATech: azul, sale por la derecha del marco. */
.from-atech {
  align-self:flex-end;
  margin-right:-11cqw
}

.from-atech p {
  color:#ffffff;
  background:linear-gradient(160deg,#2f5ff0,var(--chat-blue-deep));
  border-bottom-right-radius:0;
  box-shadow:0 12px 32px #1747e655;
  transform-origin:100% 100%
}

.from-atech p:after {
  right:0;
  background:var(--chat-blue-deep);
  clip-path:polygon(0 0,100% 0,100% 100%)
}

/* Indicador de escritura: aparece donde nacerá la respuesta. Sólo lo muestra la coreografía. */
.typing {
  position:absolute;
  right:0;
  bottom:0;
  z-index:1;
  display:flex;
  gap:1.4cqw;
  padding:3.4cqw 3.8cqw;
  border-radius:4.6cqw 4.6cqw 0 4.6cqw;
  background:#e9eef7;
  box-shadow:0 6px 18px #0f172926;
  opacity:0;
  visibility:hidden;
  transform-origin:100% 100%;
  pointer-events:none
}

.typing i {
  width:1.9cqw;
  height:1.9cqw;
  border-radius:50%;
  background:#6d7788;
  animation:typing-dot 1s infinite ease-in-out
}

.typing i:nth-child(2) {
  animation-delay:.15s
}

.typing i:nth-child(3) {
  animation-delay:.3s
}

@keyframes typing-dot {
  0%,60%,100% {
    transform:translateY(0);
    opacity:.45
  }
  30% {
    transform:translateY(-1.4cqw);
    opacity:1
  }
}

/* Mientras llega GSAP no mostramos la secuencia completa. */
.is-pending .phone,.is-pending .phone-glow {
  visibility:hidden
}

/* Salida sin GSAP: el mismo orden (celular, luego globos) con transiciones CSS. */
.css-reveal .phone,.css-reveal .phone-glow {
  opacity:0;
  transform:translateY(70px);
  transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)
}

.css-reveal .chat-message {
  opacity:0;
  transform:translateY(16px) scale(.92);
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(.8s + var(--i) * .45s)
}

.css-reveal.in-view .phone,.css-reveal.in-view .phone-glow,.css-reveal.in-view .chat-message {
  opacity:1;
  transform:none
}

@media(max-width:1150px) {
  .conversation-inner {
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    gap:24px
  }
  .phone {
    height:min(calc(100vh - 130px),680px);
    height:min(calc(100svh - 130px),680px)
  }
}

@media(max-width:800px) {
  .conversation-inner {
    grid-template-columns:1fr;
    min-height:0;
    gap:36px;
    padding-block:72px 40px
  }
  .conversation-copy {
    max-width:none
  }
  .conversation-copy>p:not(.eyebrow) {
    font-size:15px
  }
  .conversation-stage {
    padding:10px 0 20px
  }
  .phone {
    height:auto;
    width:min(72vw,340px)
  }
  .phone-glow {
    width:110vw;
    height:110vw;
    max-width:560px;
    max-height:560px
  }
  .from-client {
    margin-left:-9cqw
  }
  .from-atech {
    margin-right:-9cqw
  }
}

@media(max-width:500px) {
  .phone {
    width:76vw
  }
  .chat-message {
    max-width:86%
  }
}

/* Ventanas de escritorio bajas: la sección no se fija, así que el celular no necesita llenar la altura. */
@media(min-width:801px) and (max-height:559px) {
  .phone {
    height:520px
  }
}

@media(prefers-reduced-motion:reduce) {
  .css-reveal .phone,.css-reveal .phone-glow,.css-reveal .chat-message {
    opacity:1;
    transform:none
  }
  .is-pending .phone,.is-pending .phone-glow {
    visibility:visible
  }
}


/* ATech — PIE DEL SITIO — columnas, contactos y barra legal. La clase .footer-legal también aparece
   en el pie de las páginas legales.
   Origen: bloque del antiguo styles.css (líneas 1829-2049). */
/* FOOTER: marca + cuatro columnas (explorar, horarios, contacto, ubicación) y barra legal. */
.site-footer {
  background:linear-gradient(180deg,#1747e6,#1239c4)
}

.footer-main {
  display:grid;
  grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));
  gap:40px 32px;
  padding-block:80px 64px
}

.footer-logo {
  display:inline-block;
  font:400 30px/1 "Tanker",sans-serif;
  font-synthesis:none;
  letter-spacing:-.02em;
  color:#ffffff
}

.footer-logo span {
  color:#bcd0ff
}

.footer-brand p {
  margin:22px 0 0;
  max-width:310px;
  font-size:14px;
  line-height:1.7;
  color:#dbe5ff
}

.footer-social {
  list-style:none;
  display:flex;
  gap:10px;
  margin:28px 0 0;
  padding:0
}

.footer-social a {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border:1px solid #ffffff47;
  border-radius:50%;
  color:#ffffff;
  transition:color .2s,border-color .2s,background .2s
}

.footer-social a:hover {
  color:#1747e6;
  border-color:#ffffff;
  background:#ffffff
}

.footer-social svg {
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round
}

.footer-heading {
  margin:6px 0 22px;
  font-size:11px;
  font-weight:700;
  letter-spacing:2.4px;
  text-transform:uppercase;
  color:#bcd0ff
}

.footer-col ul {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:14px
}

.footer-col li,.footer-col a {
  font-size:14px;
  line-height:1.5;
  color:#e6edff;
  overflow-wrap:break-word
}

.footer-col a {
  transition:color .2s
}

.footer-col a:hover {
  color:#ffffff
}

.footer-col .footer-accent {
  display:inline-block;
  margin-top:6px;
  color:#ffffff
}

.footer-col a.footer-accent:hover {
  color:#dbe5ff
}

.footer-bottom {
  border-top:1px solid #ffffff26;
  background:#0f33b3
}

.footer-bottom-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px 32px;
  padding-block:24px
}

.footer-bottom p {
  margin:0;
  font-size:13px;
  line-height:1.6;
  color:#c9d6ff
}

.footer-bottom strong {
  font-weight:600;
  color:#ffffff
}

.footer-legal {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 0;
  font-size:13px
}

.footer-legal a {
  color:#e6edff;
  transition:color .2s
}

.footer-legal a:hover {
  color:#ffffff
}

.footer-legal a+a:before {
  content:"·";
  display:inline-block;
  margin:0 12px;
  color:#ffffff66
}

@media(max-width:1150px) {
  .footer-main {
    grid-template-columns:repeat(4,minmax(0,1fr))
  }
  .footer-brand {
    grid-column:1/-1
  }
  .footer-brand p {
    max-width:480px
  }
}

@media(max-width:800px) {
  .footer-main {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:40px 24px;
    padding-block:64px 48px
  }
  .footer-bottom-inner {
    flex-direction:column;
    align-items:flex-start
  }
}

@media(max-width:360px) {
  .footer-main {
    grid-template-columns:1fr;
    gap:36px
  }
}

@media(max-width:800px) {
  .footer-legal {
    gap:10px 22px
  }
  .footer-legal a+a:before {
    content:none
  }
}

.nowrap {
  white-space:nowrap
}

@media(max-width:500px) {
  .footer-main {
    column-gap:16px
  }
  .footer-col li,.footer-col a {
    font-size:13px
  }
}

/* Footer azul: foco visible en blanco y acentos con más peso. */
.site-footer a:focus-visible {
  outline-color:#ffffff
}

.site-footer .footer-accent {
  font-weight:600
}


/* ATech — SECCIÓN #preguntas — banda azul, medidor de la izquierda y acordeón.
   Origen: bloque del antiguo styles.css (líneas 2050-2431). */
/* PREGUNTAS FRECUENTES: banda azul. Izquierda: título, "?" y medidor; derecha: acordeón.
   La sección no tiene animaciones de entrada ni de fondo: lo único que se anima es la apertura
   de cada pregunta (el <details> nativo, más abajo). faq.js solo actualiza el medidor. */
.faq,.approach {
  position:relative;
  isolation:isolate;
  overflow:clip;
  background:linear-gradient(160deg,#1a4cf0 0%,#1747e6 45%,#1036c2 100%);
  color:#ffffff
}

/* Retícula fina, como en el hero. */
.faq:before,.approach:before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:linear-gradient(90deg,#ffffff0d 1px,transparent 1px);
  background-size:16.6667% 100%;
  mask-image:linear-gradient(transparent,#000000 30%,#000000 70%,transparent);
  pointer-events:none
}

.faq-orb {
  position:absolute;
  z-index:0;
  border-radius:50%;
  pointer-events:none
}

.faq-orb-a {
  width:680px;
  height:680px;
  left:-200px;
  top:-220px;
  background:radial-gradient(circle,#6f97ff70,transparent 68%)
}

.faq-orb-b {
  width:760px;
  height:760px;
  right:-240px;
  bottom:-300px;
  background:radial-gradient(circle,#0a2a9e80,transparent 70%)
}

.faq-inner {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  align-items:start;
  gap:48px 80px;
  padding-block:120px
}

/* Columna izquierda: sin sticky (nada se desplaza con el scroll) y alineada arriba (no salta al abrir respuestas). */
.faq-intro {
  position:relative;
  isolation:isolate
}

.faq-mark {
  position:absolute;
  right:4%;
  top:-90px;
  z-index:-1;
  pointer-events:none;
  font:400 clamp(240px,25vw,400px)/1 "Tanker",sans-serif;
  font-synthesis:none;
  color:transparent;
  -webkit-text-stroke:1px #ffffff1c
}

.faq-mark span {
  display:block
}

.faq-kicker {
  margin:0 0 18px;
  font-size:11px;
  font-weight:700;
  letter-spacing:2.4px;
  text-transform:uppercase;
  color:#bcd0ff
}

.faq-intro h2 {
  margin:0;
  font-size:clamp(36px,4.3vw,62px);
  font-weight:500;
  letter-spacing:-.025em;
  line-height:1.1;
  color:#ffffff
}

.faq-lead {
  max-width:340px;
  margin:22px 0 0;
  font-size:16px;
  line-height:1.7;
  color:#dbe5ff
}

/* Medidor: número, barra de progreso y tema de la pregunta activa. Cambian al instante. */
.faq-meter {
  display:flex;
  align-items:center;
  gap:24px;
  max-width:400px;
  margin-top:52px;
  padding-top:28px;
  border-top:1px solid #ffffff2e
}

.faq-count {
  display:flex;
  align-items:flex-start;
  font:400 68px/1 "Tanker",sans-serif;
  font-synthesis:none;
  letter-spacing:-.02em;
  color:#ffffff
}

.faq-digit {
  display:inline-block;
  height:1em;
  overflow:hidden
}

.faq-strip {
  display:block;
  transform:translateY(calc(var(--faq-digit,5) * -1em))
}

.faq-strip span {
  display:block;
  height:1em
}

.faq-count small {
  margin:8px 0 0 8px;
  font:700 12px/1 "Synonym",sans-serif;
  letter-spacing:1.5px;
  color:#bcd0ff
}

.faq-meter-info {
  flex:1;
  min-width:0;
  display:grid;
  gap:14px
}

.faq-bar {
  display:block;
  height:3px;
  border-radius:3px;
  background:#ffffff2e;
  overflow:hidden
}

.faq-bar i {
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#bcd0ff,#ffffff);
  transform-origin:0 50%;
  transform:scaleX(var(--faq-progress,0))
}

.faq-topic {
  position:relative;
  display:block;
  height:1.5em;
  overflow:hidden;
  font-size:16px;
  line-height:1.5
}

.faq-topic b {
  position:absolute;
  left:0;
  top:0;
  white-space:nowrap;
  font-weight:600;
  color:#ffffff
}

/* Columna derecha: acordeón. */
.faq-list {
  position:relative
}

.faq-rule {
  display:block;
  height:1px;
  background:#ffffff;
  transform-origin:0 50%
}

.faq-item {
  border-bottom:1px solid #ffffff33;
  interpolate-size:allow-keywords
}

.faq-item summary {
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  gap:18px;
  padding:26px 4px;
  list-style:none;
  cursor:pointer;
  font-size:18px;
  font-weight:600;
  line-height:1.4;
  color:#ffffff
}

.faq-item summary>span {
  flex:1;
  transition:transform .35s cubic-bezier(.2,.8,.2,1)
}

.faq-item summary::-webkit-details-marker {
  display:none
}

/* Resaltado al pasar el mouse. */
.faq-item summary:before {
  content:"";
  position:absolute;
  inset:6px -18px;
  z-index:-1;
  border-radius:16px;
  background:#ffffff14;
  opacity:0;
  transform:scale(.96,.7);
  transition:opacity .3s,transform .4s cubic-bezier(.2,.8,.2,1)
}

.faq-item summary:hover:before,.faq-item[open] summary:before {
  opacity:1;
  transform:none
}

.faq-item[open] summary:before {
  background:#ffffff0d
}

.faq-item summary:hover>span {
  transform:translateX(6px)
}

.faq-item summary:focus-visible {
  outline:2px solid #ffffff;
  outline-offset:4px;
  border-radius:10px
}

.faq-num {
  flex-shrink:0;
  width:30px;
  font:700 12px/1 "Synonym",sans-serif;
  letter-spacing:1px;
  color:#bcd0ff;
  transition:color .3s
}

.faq-item summary:hover .faq-num,.faq-item[open] .faq-num {
  color:#ffffff
}

/* Ícono: "+" que se convierte en "−" y se rellena de blanco al abrir. */
.faq-icon {
  position:relative;
  flex-shrink:0;
  width:42px;
  height:42px;
  border:1px solid #ffffff66;
  border-radius:50%;
  color:#ffffff;
  transition:background .3s,border-color .3s,color .3s,box-shadow .3s
}

.faq-icon:before,.faq-icon:after {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:13px;
  height:1.7px;
  margin:-.85px 0 0 -6.5px;
  border-radius:2px;
  background:currentColor;
  transition:transform .35s ease
}

.faq-icon:after {
  transform:rotate(90deg)
}

.faq-item summary:hover .faq-icon {
  border-color:#ffffff;
  background:#ffffff1f;
  box-shadow:0 0 0 6px #ffffff12
}

.faq-item[open] .faq-icon {
  background:#ffffff;
  border-color:#ffffff;
  color:#1747e6;
  box-shadow:0 10px 30px #0a2a9e66
}

.faq-item[open] .faq-icon:after {
  transform:rotate(0deg)
}

/* Apertura suave en navegadores que lo soportan; en el resto abre al instante. */
.faq-item::details-content {
  block-size:0;
  overflow:hidden;
  transition:block-size .45s cubic-bezier(.2,.8,.2,1),content-visibility .45s allow-discrete
}

.faq-item[open]::details-content {
  block-size:auto
}

.faq-answer p {
  max-width:620px;
  margin:0;
  padding:0 64px 30px 52px;
  font-size:16px;
  line-height:1.75;
  color:#dbe5ff
}

@media(max-width:800px) {
  .faq-inner {
    grid-template-columns:1fr;
    gap:40px;
    padding-block:80px
  }
  .faq-mark {
    right:0;
    top:-50px;
    font-size:200px
  }
  .faq-meter {
    gap:18px;
    margin-top:36px;
    padding-top:22px
  }
  .faq-count {
    font-size:52px
  }
  .faq-item summary {
    gap:12px;
    padding:20px 2px;
    font-size:16px
  }
  .faq-item summary:before {
    inset:4px -10px
  }
  .faq-num {
    width:24px
  }
  .faq-icon {
    width:38px;
    height:38px
  }
  .faq-answer p {
    padding:0 8px 24px 38px;
    font-size:15px
  }
}



/* ATech — VIDEO de #idea y SECCIÓN #contacto — el video del avatar a pantalla completa y los datos
   directos (mail, WhatsApp, horarios, ubicación).
   Origen: bloque del antiguo styles.css (líneas 2432-2744). */
/* ============================================================
   CONTACTO: el video del avatar 3D ocupa toda la sección y el texto va encima.
   Video: assets/yovideo.mp4 (1280×720) · estático: assets/yovideo-poster.webp
   object-fit:cover recorta sin deformar; el velo blanco mantiene legible el texto oscuro.
   ============================================================ */
.contact-media {
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none
}

.contact-still {
  filter:saturate(1.06) contrast(1.05)
}

.contact-still,.contact-video {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:74% 34%;
  user-select:none;
  -webkit-user-drag:none
}

.contact-video {
  opacity:0;
  filter:saturate(1.06) contrast(1.05);
  transition:opacity .6s cubic-bezier(.2,.7,.2,1)
}

.contact-media.is-playing .contact-video {
  opacity:1
}

.contact-inner {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding:72px 0 80px
}

/* En celular el título no se superpone a la cara: va arriba, sobre blanco, y el avatar
   queda debajo en su propia franja. El fondo del video es blanco, así que se funden. */
@media(max-width:800px) {
  .contact {
    min-height:0;
    display:flex;
    flex-direction:column
  }
  .contact-inner {
    order:0;
    align-items:flex-start;
    flex-direction:column;
    padding:64px 0 6px
  }
  .contact-media {
    order:1;
    position:relative;
    inset:auto;
    height:min(66vw,280px)
  }
  .contact-still,.contact-video {
    object-position:center 38%
  }
}

@media(prefers-reduced-motion:reduce) {
  .contact-video {
    display:none
  }
}

/* ============================================================
   CONTACTO: va debajo del video, con el mismo fondo blanco.
   Izquierda: título y acciones. Derecha: contactos directos y datos.
   ============================================================ */
/* Texto solo para lectores de pantalla. */
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0
}

.reach {
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  align-items:start;
  gap:56px 72px;
  padding-block:104px 112px
}

.reach-intro h2 {
  margin:0;
  font-size:clamp(32px,3.6vw,50px);
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.14
}

.reach-lead {
  max-width:420px;
  margin:20px 0 0;
  font-size:16px;
  line-height:1.75;
  color:#4a5568
}

.reach-actions {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:34px
}

.button-ghost {
  padding:10px 24px;
  gap:0;
  min-height:56px;
  border-color:#0f172929;
  background:#ffffff;
  transition:border-color .25s,background-color .25s,color .25s
}

.button-ghost:hover {
  border-color:var(--accent);
  background:#1747e60a;
  color:var(--accent)
}

.reach-note {
  display:flex;
  align-items:center;
  gap:9px;
  margin:26px 0 0;
  font-size:14px;
  color:#5b6678
}

.reach-note svg {
  width:16px;
  height:16px;
  flex-shrink:0;
  fill:none;
  stroke:var(--accent);
  stroke-width:1.6;
  stroke-linecap:round
}

/* Contactos directos */
.reach-list {
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--line)
}

.reach-list li {
  border-bottom:1px solid var(--line)
}

.reach-list a {
  display:grid;
  grid-template-columns:46px minmax(0,1fr) 18px;
  align-items:center;
  gap:16px;
  padding:18px 4px;
  transition:padding-left .3s cubic-bezier(.2,.8,.2,1)
}

.reach-icon {
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border:1px solid #0f17291f;
  border-radius:50%;
  color:var(--accent);
  transition:background-color .25s,border-color .25s,color .25s
}

.reach-icon svg {
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round
}

.reach-list li:first-child .reach-icon svg {
  fill:currentColor;
  stroke:none
}

.reach-text {
  min-width:0
}

.reach-text small {
  display:block;
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#7b879a
}

.reach-text strong {
  display:block;
  margin-top:3px;
  font-size:17px;
  font-weight:600;
  letter-spacing:-.01em;
  overflow-wrap:anywhere
}

.reach-go {
  width:18px;
  height:18px;
  fill:none;
  stroke:#94a0b3;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),stroke .25s
}

.reach-list a:hover .reach-icon {
  background:var(--accent);
  border-color:var(--accent);
  color:#ffffff
}

.reach-list a:hover .reach-go {
  transform:translateX(5px);
  stroke:var(--accent)
}

.reach-list a:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:12px
}

/* Horarios y ubicación */
.reach-meta {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin:26px 0 0
}

.reach-meta>div {
  padding:18px 20px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#f6f8fd
}

.reach-meta dt {
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#7b879a
}

.reach-meta dd {
  margin:8px 0 0;
  font-size:14.5px;
  line-height:1.6;
  color:#1c2433
}

@media(max-width:1000px) {
  .reach {
    grid-template-columns:1fr;
    gap:40px;
    padding-block:76px 84px
  }
  .reach-lead {
    max-width:none
  }
}

@media(max-width:500px) {
  .reach-actions .button {
    width:100%
  }
  .reach-meta {
    grid-template-columns:1fr
  }
  .reach-text strong {
    font-size:16px
  }
}


/* ATech — BANDAS AZULES con esquinas curvas (las comparten #preguntas y #enfoque) y la SECCIÓN #trabajos.
   Origen: bloque del antiguo styles.css (líneas 2745-2982). */
/* BANDAS AZULES CON ESQUINAS CURVAS (Preguntas frecuentes y Cómo seguimos).
   Dos franjas blancas con bordes elípticos tapan el azul salvo en los costados,
   así la banda "sube" y "baja" por los lados en curva. */
.faq,.approach {
  --curve-x:clamp(70px,12vw,190px);
  --curve-y:clamp(40px,6.5vw,104px);
  padding-block:var(--curve-y)
}

.curve-edge {
  position:absolute;
  left:0;
  right:0;
  z-index:2;
  height:var(--curve-y);
  background:#ffffff;
  pointer-events:none
}

.curve-edge-top {
  top:-1px;
  border-radius:0 0 var(--curve-x) var(--curve-x)/0 0 var(--curve-y) var(--curve-y)
}

.curve-edge-bottom {
  bottom:-1px;
  border-radius:var(--curve-x) var(--curve-x) 0 0/var(--curve-y) var(--curve-y) 0 0
}

/* ============================================================
   TRABAJOS RECIENTES: banda azul (fondo, retícula, luces y curvas compartidos con .faq)
   con tarjetas blancas. Imágenes: assets/trabajos/*.webp (16:9, capturas de 1280 × 720).
   ============================================================ */
.works-inner {
  position:relative;
  z-index:1;
  padding-block:120px
}

.works-head {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px 48px;
  margin-bottom:56px
}


.works-head h2 {
  margin:0;
  font-size:clamp(38px,4.6vw,66px);
  font-weight:500;
  letter-spacing:-.025em;
  line-height:1.08;
  color:#0b1220
}

.works-lead {
  max-width:380px;
  margin:0;
  font-size:16px;
  line-height:1.7;
  color:#4a5568
}

.works-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  margin:0;
  padding:0;
  list-style:none
}

.work-card {
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:hidden;
  border-radius:20px;
  background:#ffffff;
  color:#0b1220;
  border:1px solid var(--line);
  box-shadow:0 1px 2px #0f17290a,0 22px 44px -28px #0f172940;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s cubic-bezier(.2,.8,.2,1)
}

.work-card:hover {
  transform:translateY(-6px);
  box-shadow:0 1px 2px #0f17290a,0 30px 54px -26px #0f172952
}

/* Imagen con respaldo: si la captura todavía no está, se ve el nombre sobre azul. */
.work-media {
  position:relative;
  display:grid;
  place-items:center;
  aspect-ratio:16/9;
  overflow:hidden;
  background:linear-gradient(140deg,#0c1a52 0%,#1747e6 58%,#6f97ff 100%)
}

.work-media span {
  padding:0 24px;
  font:400 clamp(22px,2.1vw,30px)/1.15 "Tanker",sans-serif;
  font-synthesis:none;
  text-align:center;
  color:#ffffffe0
}

.work-media img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  transition:transform .9s cubic-bezier(.2,.8,.2,1)
}

.work-card:hover .work-media img {
  transform:scale(1.04)
}

.work-body {
  display:flex;
  flex:1;
  flex-direction:column;
  padding:26px 26px 28px
}

.work-title {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px
}

.work-title h3 {
  margin:0;
  font-size:22px;
  font-weight:500;
  line-height:1.25;
  letter-spacing:-.01em
}

.work-year {
  flex-shrink:0;
  font-size:13px;
  color:#7b879a;
  font-variant-numeric:tabular-nums
}

.work-body>p {
  margin:12px 0 0;
  font-size:15px;
  line-height:1.65;
  color:#4a5568
}

.work-tags {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:18px 0 0;
  padding:0;
  list-style:none
}

.work-tags li {
  padding:6px 12px;
  border:1px solid #0f172926;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#334055
}

.work-actions {
  margin-top:auto;
  padding-top:24px
}

.work-cta {
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:46px;
  padding:0 20px;
  border-radius:999px;
  background:#1747e6;
  font-size:14.5px;
  font-weight:650;
  color:#ffffff;
  transition:background-color .25s,transform .25s
}

.work-cta span {
  transition:transform .3s cubic-bezier(.2,.8,.2,1)
}

.work-cta[href]:hover {
  background:#0f3bd1
}

.work-cta[href]:hover span {
  transform:translate(2px,-2px)
}

/* Sin enlace todavía: se ve desactivado y no se puede tocar. */
.work-cta:not([href]) {
  background:#eef2fb;
  color:#7b879a;
  cursor:default
}

@media(max-width:1000px) {
  .works-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media(max-width:700px) {
  .works-inner {
    padding-block:80px
  }
  .works-head {
    margin-bottom:36px
  }
  .works-grid {
    grid-template-columns:1fr;
    gap:20px
  }
}


/* ATech — BOTÓN FLOTANTE DE WHATSAPP — aparece en la portada y en las cuatro páginas legales.
   Origen: bloque del antiguo styles.css (líneas 2983-3104). */
/* ============================================================
   BOTÓN FLOTANTE DE WHATSAPP
   Verde de WhatsApp para que se reconozca al instante. Queda debajo de la intro (z-index 90)
   y del formulario (capa superior del navegador). Respeta el notch y la barra del iPhone.
   ============================================================ */
.wa-float {
  position:fixed;
  right:max(20px,env(safe-area-inset-right));
  bottom:calc(20px + env(safe-area-inset-bottom));
  z-index:80;
  display:flex;
  align-items:center;
  gap:12px;
  animation:wa-float-in .7s cubic-bezier(.2,.8,.2,1) 1.4s both
}

.wa-float-icon {
  position:relative;
  display:grid;
  place-items:center;
  width:60px;
  height:60px;
  border-radius:50%;
  background:#25d366;
  color:#ffffff;
  box-shadow:0 14px 30px -10px #128c7e99,0 2px 6px #0f172926;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s
}

.wa-float-icon svg {
  width:30px;
  height:30px;
  fill:currentColor
}

/* Pulso breve al aparecer (dos veces, no infinito). */
.wa-float-icon:before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  border:2px solid #25d366;
  opacity:0;
  animation:wa-float-ring 1.6s cubic-bezier(.2,.8,.2,1) 2.2s 2;
  pointer-events:none
}

.wa-float-label {
  padding:10px 16px;
  border:1px solid #0f17291a;
  border-radius:999px;
  background:#ffffff;
  box-shadow:0 12px 28px -12px #0f172940;
  font-size:14px;
  font-weight:650;
  color:#0b1220;
  white-space:nowrap;
  opacity:0;
  transform:translateX(8px);
  pointer-events:none;
  transition:opacity .3s,transform .35s cubic-bezier(.2,.8,.2,1)
}

.wa-float:hover .wa-float-icon,.wa-float:focus-visible .wa-float-icon {
  transform:scale(1.07);
  box-shadow:0 18px 36px -10px #128c7ecc,0 2px 6px #0f172926
}

.wa-float:hover .wa-float-label,.wa-float:focus-visible .wa-float-label {
  opacity:1;
  transform:none
}

.wa-float:focus-visible {
  outline:none
}

.wa-float:focus-visible .wa-float-icon {
  outline:3px solid #1747e6;
  outline-offset:3px
}

@keyframes wa-float-in {
  from {
    opacity:0;
    transform:translateY(24px) scale(.8)
  }
}

@keyframes wa-float-ring {
  0% {
    opacity:.8;
    transform:scale(1)
  }
  100% {
    opacity:0;
    transform:scale(1.55)
  }
}

@media(max-width:800px) {
  .wa-float {
    right:max(16px,env(safe-area-inset-right));
    bottom:calc(16px + env(safe-area-inset-bottom))
  }
  .wa-float-icon {
    width:56px;
    height:56px
  }
  .wa-float-icon svg {
    width:28px;
    height:28px
  }
  .wa-float-label {
    display:none
  }
  /* Que el botón no tape los enlaces legales al final de la página. */
  .footer-bottom-inner {
    padding-bottom:calc(24px + 72px)
  }
}


/* ATech — FORMULARIO DE CONSULTA (#project-inquiry) — la laptop que lo contiene, los cinco pasos,
   validaciones, presupuesto, resumen y la tarjeta de WhatsApp.
   Origen: bloque del antiguo styles.css (líneas 3426-3597). */
/* ═══════════════════════════════════════════════════════════════════════════════
   HABLEMOS DE TU PROYECTO (#project-inquiry)
   Formulario por pasos dentro de una laptop que se abre y se cierra con el scroll.
   Los estilos del formulario vienen del paquete entregado y están acotados a la
   sección. Después van los agregados de integración: tramo fijo, canvas de la
   secuencia y contención del scroll interno.
   Coordenadas calibradas contra el fotograma 143 (assets/laptop/frames.json):
   recorte 880 × 580 desde (140, 70) y pantalla al 13.75% / 9.14% / 72.95% / 69.14%.
   El controlador vive en laptop.js; el formulario, en formulario.js.
   ═══════════════════════════════════════════════════════════════════════════════ */
#project-inquiry{--ink:#191b1e;--muted:#696e74;--line:#dfe2e5;--accent:#1747e6;--accent-claro:#6889f5;--panel:#25282c;--error:#b3261e;color:var(--ink);font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:16px;line-height:1.5;width:100%;max-width:1152px;margin:auto;text-align:left;color-scheme:light}
#project-inquiry *,#project-inquiry *::before,#project-inquiry *::after{box-sizing:border-box}
#project-inquiry [hidden]{display:none!important}
#project-inquiry h1,#project-inquiry h2,#project-inquiry h3,#project-inquiry p{margin:0}
#project-inquiry button,#project-inquiry input,#project-inquiry select,#project-inquiry textarea{font:inherit}
#project-inquiry button{cursor:pointer}#project-inquiry button:disabled{cursor:wait;opacity:.65}
#project-inquiry button:focus-visible,#project-inquiry a:focus-visible{outline:3px solid #1747e6;outline-offset:4px}
#project-inquiry .pi-shell{display:grid;grid-template-columns:minmax(0,1fr);border-radius:24px;overflow:hidden;background:#fff;border:1px solid #dddfe2;box-shadow:0 14px 45px #1d243008}
#project-inquiry .pi-main{padding:35px 42px 28px;min-width:0;display:flex;flex-direction:column;min-height:664px}
#project-inquiry .pi-progress-meta{flex:none;display:flex;justify-content:space-between;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:11px}
#project-inquiry .pi-progress-meta strong{color:var(--ink);font-weight:650;letter-spacing:0}
#project-inquiry .pi-progress{flex:none;height:4px;background:#eef0f1;border-radius:3px;overflow:hidden;margin-bottom:30px}
#project-inquiry .pi-progress-bar{width:20%;height:100%;background:#1747e6;transition:width .25s}
#project-inquiry .pi-title{font-size:29px;line-height:1.2;letter-spacing:-.04em;font-weight:650;margin-bottom:9px;outline:none}
#project-inquiry .pi-subtitle{color:var(--muted);font-size:15px;line-height:1.6;margin-bottom:27px}
#project-inquiry .pi-form{display:flex;flex-direction:column;flex:1;min-width:0}
#project-inquiry .pi-panel{animation:pi-in .2s ease-out}
#project-inquiry .pi-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 18px}
#project-inquiry .pi-wide{grid-column:1/-1}
#project-inquiry .pi-field label{font-size:14px;font-weight:600;display:block;margin-bottom:8px}
#project-inquiry .pi-optional{font-size:12px;font-weight:400;color:var(--muted);margin-left:4px}
#project-inquiry .pi-field input,#project-inquiry .pi-field select,#project-inquiry .pi-field textarea{border:1px solid #d9dde1;border-radius:9px;min-height:48px;padding:12px 13px;width:100%;color:var(--ink);background:#fff;outline:none;transition:border .15s,box-shadow .15s}
#project-inquiry .pi-field input::placeholder,#project-inquiry .pi-field textarea::placeholder{color:#959ba2}
#project-inquiry .pi-field input:focus,#project-inquiry .pi-field select:focus,#project-inquiry .pi-field textarea:focus{border-color:#1747e6;box-shadow:0 0 0 3px #798bc825}
#project-inquiry .pi-field [aria-invalid="true"]{border-color:var(--error)}
#project-inquiry .pi-help{font-size:13px;color:#5b6068;margin-top:7px;line-height:1.6}
#project-inquiry .pi-error{color:var(--error);font-size:13px;margin-top:6px;min-height:0}
#project-inquiry .pi-note{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--muted);margin-top:24px}
#project-inquiry svg{width:18px;height:18px;flex:none;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#project-inquiry fieldset{border:0;padding:0;margin:0;min-width:0}
#project-inquiry .pi-sr{position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#project-inquiry .pi-services{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px}
#project-inquiry .pi-service{position:relative;cursor:pointer;display:block}
#project-inquiry .pi-service input{position:absolute;opacity:0;width:1px;height:1px}
#project-inquiry .pi-service-body{padding:17px 16px;border:1px solid var(--line);border-radius:12px;min-height:125px;display:block;transition:background .15s,border .15s}
#project-inquiry .pi-service input:checked+.pi-service-body{background:#e9edf9;border-color:#1747e6;box-shadow:inset 0 0 0 1px #1747e6}
#project-inquiry .pi-service input:focus-visible+.pi-service-body{outline:3px solid #1747e6;outline-offset:3px}
#project-inquiry .pi-service:hover .pi-service-body{border-color:#818991}
#project-inquiry .pi-service-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
#project-inquiry .pi-service-top svg{width:22px;height:22px}
#project-inquiry .pi-radio-dot{height:17px;width:17px;border:1px solid #bcc2c7;border-radius:50%;display:grid;place-items:center}
#project-inquiry input:checked+.pi-service-body .pi-radio-dot{border:5px solid #1747e6;background:#fff}
#project-inquiry .pi-service-name{display:block;font-size:15px;font-weight:600;margin-bottom:3px}
#project-inquiry .pi-service-description{display:block;font-size:12px;color:var(--muted);line-height:1.5}
#project-inquiry textarea{resize:vertical;min-height:88px!important}
#project-inquiry .pi-budget-display{padding:24px;border-radius:14px;background:#f0f1f6;margin:5px 0 28px;border:1px solid #dde0eb}
#project-inquiry .pi-budget-caption{font-size:12px;color:#545a6d;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
#project-inquiry .pi-budget-total{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:35px;font-weight:600;letter-spacing:-.055em;line-height:1.3}
#project-inquiry .pi-budget-total small{font-size:14px;font-weight:500;letter-spacing:0;color:#545a6d;margin-right:4px}
#project-inquiry .pi-budget-total .pi-dash{font-weight:300;color:#798098}
#project-inquiry .pi-range-wrap{position:relative;margin:0 12px 44px;height:48px;touch-action:pan-y}
#project-inquiry .pi-range-track{position:absolute;top:18px;left:0;right:0;height:6px;background:#e0e2e7;border-radius:6px;cursor:pointer}
#project-inquiry .pi-range-fill{height:100%;position:absolute;background:#1747e6;border-radius:6px}
#project-inquiry .pi-range{position:absolute;left:-12px;top:7px;width:calc(100% + 24px);height:28px;margin:0;background:transparent;pointer-events:none;appearance:none;-webkit-appearance:none;outline:none;border:0}
#project-inquiry .pi-range::-webkit-slider-runnable-track{height:6px;background:transparent}
#project-inquiry .pi-range::-moz-range-track{height:6px;background:transparent}
#project-inquiry .pi-range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--ink);border:5px solid var(--accent);box-shadow:0 1px 4px #0002;margin-top:-9px;pointer-events:auto;cursor:grab}
#project-inquiry .pi-range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--ink);border:5px solid var(--accent);box-shadow:0 1px 4px #0002;pointer-events:auto;cursor:grab}
#project-inquiry .pi-range:focus-visible::-webkit-slider-thumb{outline:3px solid #1747e6;outline-offset:3px}
#project-inquiry .pi-range:focus-visible::-moz-range-thumb{outline:3px solid #1747e6;outline-offset:3px}
#project-inquiry .pi-ticks{position:absolute;left:0;right:0;top:33px;height:34px;font-size:12px;color:var(--muted);pointer-events:none}
#project-inquiry .pi-ticks span{position:absolute;transform:translateX(-50%);white-space:nowrap}
#project-inquiry .pi-ticks span::before{content:"";display:block;width:1px;height:5px;background:#c2c5ce;margin:0 auto 6px}
#project-inquiry .pi-ticks span:first-child{transform:none}#project-inquiry .pi-ticks span:first-child::before{margin-left:0}
#project-inquiry .pi-ticks span:last-child{transform:translateX(-100%)}#project-inquiry .pi-ticks span:last-child::before{margin-right:0}
#project-inquiry .pi-money-field{position:relative}#project-inquiry .pi-money-field span{position:absolute;left:14px;top:13px;color:var(--muted);font-size:14px}#project-inquiry .pi-money-field input{padding-left:55px}
#project-inquiry .pi-budget-explainer{font-size:13px;color:var(--muted);margin-top:23px;border-left:2px solid #8e9ed3;padding-left:12px}
#project-inquiry .pi-recurring{border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:16px}
#project-inquiry .pi-recurring-heading{display:flex;align-items:center;gap:9px;font-weight:600;font-size:16px;margin-bottom:7px}
#project-inquiry .pi-recurring p{color:var(--muted);font-size:14px;line-height:1.55;margin-bottom:16px}
#project-inquiry .pi-choices{display:flex;gap:7px;flex-wrap:wrap}
#project-inquiry .pi-choice{position:relative;cursor:pointer}
#project-inquiry .pi-choice input{position:absolute;opacity:0;width:1px;height:1px}
#project-inquiry .pi-choice span{display:block;border:1px solid #d8dce0;border-radius:7px;padding:9px 11px;font-size:13px;background:#fff}
#project-inquiry .pi-choice input:checked+span{background:var(--ink);color:#fff;border-color:var(--ink)}
#project-inquiry .pi-choice input:focus-visible+span{outline:3px solid #1747e6;outline-offset:3px}
#project-inquiry .pi-summary{border:1px solid var(--line);border-radius:12px;overflow:hidden}
#project-inquiry .pi-summary-row{padding:15px 18px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:12px}
#project-inquiry .pi-summary-row:last-child{border-bottom:0}
#project-inquiry .pi-summary-row h3{font-size:12px;font-weight:500;color:var(--muted);margin-bottom:4px}
#project-inquiry .pi-summary-row p{font-size:14px;overflow-wrap:anywhere;white-space:pre-line}
#project-inquiry .pi-summary-row strong{font-size:18px;font-weight:600;letter-spacing:-.02em}
#project-inquiry .pi-edit{background:none;border:0;text-decoration:underline;text-underline-offset:3px;font-size:12px;color:var(--muted);padding:3px;align-self:start}
#project-inquiry #pi-delivery-note{margin-top:18px;margin-bottom:4px}
#project-inquiry .pi-consent{display:flex;align-items:flex-start;gap:10px;margin-top:20px;font-size:13px;color:var(--muted);cursor:pointer}
#project-inquiry .pi-consent input{accent-color:#1747e6;width:17px;height:17px;flex:none;margin:2px 0}
#project-inquiry .pi-actions{margin-top:auto;padding-top:30px;display:flex;align-items:center;justify-content:space-between;gap:15px}
#project-inquiry .pi-back{background:transparent;border:0;color:var(--muted);padding:10px 0;display:flex;align-items:center;gap:8px;font-size:14px}
#project-inquiry .pi-step-hint{font-size:12px;color:var(--muted)}
#project-inquiry .pi-primary{border:1px solid var(--ink);background:var(--ink);border-radius:9px;color:#fff;font-weight:550;font-size:14px;padding:14px 19px;min-height:49px;display:inline-flex;align-items:center;justify-content:center;gap:24px;transition:background .15s;line-height:1.4;text-decoration:none}
#project-inquiry .pi-primary:hover{background:#383e44}
#project-inquiry .pi-primary svg{width:17px;height:17px}
#project-inquiry .pi-secondary{border:1px solid #d6dadf;border-radius:9px;background:#fff;color:var(--ink);padding:13px 17px;font-size:14px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
#project-inquiry .pi-success{padding-top:30px}
#project-inquiry .pi-success-icon{width:64px;height:64px;display:grid;place-items:center;background:var(--accent);border-radius:50%;color:#fff;margin-bottom:25px}
#project-inquiry .pi-success-icon svg{width:30px;height:30px}
#project-inquiry .pi-success-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:27px}
#project-inquiry .pi-success-box{margin-top:25px;background:#f5f6f7;border-radius:10px;padding:18px;font-size:14px;color:var(--muted)}
#project-inquiry .pi-modal{border:0;border-radius:22px;padding:30px;max-width:440px;width:calc(100% - 36px);max-height:calc(100svh - 36px);overflow:auto;color:var(--ink);background:#fff;box-shadow:0 22px 100px #0003;margin:auto}
#project-inquiry .pi-modal::backdrop{background:#101517aa;backdrop-filter:blur(4px)}
#project-inquiry .pi-modal-icon{width:56px;height:56px;display:grid;place-items:center;background:var(--accent);border-radius:16px;margin-bottom:21px;color:#fff}
#project-inquiry .pi-modal-icon svg{width:28px;height:28px}
#project-inquiry .pi-modal h2{font-size:25px;line-height:1.2;letter-spacing:-.035em;margin-bottom:12px}
#project-inquiry .pi-modal p{color:var(--muted);font-size:15px;line-height:1.65}
#project-inquiry .pi-modal-destination{border:1px solid var(--line);border-radius:10px;padding:13px 15px;margin:20px 0;font-size:14px}
#project-inquiry .pi-modal-destination strong{display:block;font-size:15px;font-weight:600}
#project-inquiry .pi-modal-destination span{font-size:13px;color:var(--muted)}
#project-inquiry .pi-modal-actions{display:grid;gap:9px;margin-top:22px}
#project-inquiry .pi-modal .pi-help{font-size:12px;margin-top:14px;text-align:center}
@keyframes pi-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1000px){#project-inquiry .pi-panel[data-panel="1"] .pi-note{margin-top:30px}}
@media(max-width:900px){#project-inquiry .pi-main{padding:30px 28px}#project-inquiry .pi-grid{grid-template-columns:1fr}#project-inquiry .pi-grid.pi-budget-fields{grid-template-columns:1fr 1fr}#project-inquiry .pi-services{gap:10px}#project-inquiry .pi-title{font-size:27px}}
@media(max-width:680px){#project-inquiry .pi-shell{display:block;border-radius:18px}#project-inquiry .pi-main{padding:25px 23px;min-height:560px}#project-inquiry .pi-progress{margin-bottom:24px}#project-inquiry .pi-title{font-size:26px}#project-inquiry .pi-subtitle{font-size:14px;margin-bottom:22px}#project-inquiry .pi-grid{gap:16px}#project-inquiry .pi-field input{min-height:49px}#project-inquiry .pi-services{grid-template-columns:1fr 1fr}#project-inquiry .pi-service-body{padding:14px 12px;min-height:141px}#project-inquiry .pi-service-name{font-size:14px}#project-inquiry .pi-budget-display{padding:20px 17px}#project-inquiry .pi-budget-total{font-size:30px;gap:7px}#project-inquiry .pi-budget-total small{font-size:12px}#project-inquiry .pi-recurring{padding:16px}#project-inquiry .pi-choices{gap:6px}#project-inquiry .pi-choice span{padding:9px;font-size:12px}#project-inquiry .pi-actions{padding-top:25px}#project-inquiry .pi-step-hint{font-size:11px}#project-inquiry .pi-primary{gap:15px;padding:13px 16px}#project-inquiry .pi-note{margin-top:20px}}
@media(max-width:680px){#project-inquiry .pi-ticks span:nth-child(4){display:none}}
@media(max-width:360px){#project-inquiry .pi-main{padding:23px 17px}#project-inquiry .pi-budget-total{font-size:27px}#project-inquiry .pi-budget-fields{gap:10px}#project-inquiry .pi-money-field span{left:10px;font-size:12px}#project-inquiry .pi-money-field input{padding-left:43px}#project-inquiry .pi-ticks span:nth-child(2),#project-inquiry .pi-ticks span:nth-child(4){display:none}}
@media(prefers-reduced-motion:reduce){#project-inquiry *,#project-inquiry *::before,#project-inquiry *::after{animation:none!important;transition:none!important}}
/* La pantalla se alinea con el fotograma de la laptop abierta. */
#project-inquiry{max-width:1760px}
#project-inquiry .pi-laptop-stage{position:relative;max-width:1152px;margin:auto}
#project-inquiry .pi-laptop-art{display:none}
#project-inquiry .pi-screen{position:relative}
#project-inquiry.pi-laptop-mode .pi-laptop-stage{max-width:none;aspect-ratio:836/547;isolation:isolate}
#project-inquiry.pi-laptop-mode .pi-laptop-art{display:block;position:absolute;inset:0;overflow:hidden;pointer-events:none;background:#fff}
#project-inquiry .pi-laptop-image{position:absolute;width:153.110048%;height:131.627057%;max-width:none;left:-18.421053%;top:-18.464351%;object-fit:fill;display:block}
#project-inquiry.pi-laptop-mode .pi-screen{position:absolute;left:12.799043%;top:4.021938%;width:76.794258%;height:73.308958%;border-radius:4px;overflow:hidden;background:#fff}
#project-inquiry.pi-laptop-mode .pi-shell{height:100%;min-height:0;grid-template-columns:minmax(0,1fr);border:0;border-radius:0;box-shadow:none}
#project-inquiry.pi-laptop-mode .pi-main{min-height:0;height:100%;padding:30px clamp(30px,5vw,80px) 26px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#c3c6d2 #fff;scroll-padding-top:20px}
#project-inquiry.pi-laptop-mode .pi-form{flex:1 0 auto}
#project-inquiry.pi-laptop-mode .pi-title{font-size:clamp(26px,2.3vw,34px)}
/* El formulario ya no comparte la pantalla con el panel: se centra para que los renglones no queden larguísimos. */
#project-inquiry.pi-laptop-mode .pi-form,#project-inquiry.pi-laptop-mode .pi-success,#project-inquiry.pi-laptop-mode .pi-progress-meta,#project-inquiry.pi-laptop-mode .pi-progress{width:100%;max-width:980px;margin-inline:auto}
#project-inquiry.pi-laptop-mode .pi-progress{margin-bottom:22px}
#project-inquiry.pi-laptop-mode .pi-subtitle{margin-bottom:22px;font-size:14px}
#project-inquiry.pi-laptop-mode .pi-grid{gap:16px 18px}
/* La barra de botones ya no flota sobre el contenido: va al final del paso, así aparece recién
   cuando terminaste de bajar todo. Vale para los cinco pasos, que comparten esta misma barra. */
#project-inquiry.pi-laptop-mode .pi-actions{padding:22px 0 6px;border-top:1px solid var(--line);transition:opacity .25s}
/* Hasta que no bajás del todo, la barra queda invisible pero sigue ocupando su lugar:
   así no hay saltos de maquetación cuando aparece. La clase la pone formulario.js. */
#project-inquiry.pi-laptop-mode.pi-acciones-ocultas .pi-actions{opacity:0;visibility:hidden}
#project-inquiry.pi-laptop-mode .pi-note{margin:20px 0 16px}
#project-inquiry.pi-laptop-mode .pi-service-body{min-height:112px;padding:14px}
#project-inquiry.pi-laptop-mode .pi-service-top{margin-bottom:8px}
#project-inquiry.pi-laptop-mode .pi-services{margin-bottom:18px}
@media(max-width:1200px){#project-inquiry.pi-laptop-mode .pi-main{padding-left:24px;padding-right:24px}}
/* ── Integración con el sitio ── */
/* Los títulos del sitio van en Tanker y mayúscula: adentro del formulario, no. */
#project-inquiry h1,#project-inquiry h2,#project-inquiry h3{font-family:inherit;text-transform:none;font-synthesis:auto;letter-spacing:-.035em!important}
#project-inquiry .pi-summary-row h3,#project-inquiry .pi-recurring-heading{letter-spacing:.005em!important}

/* La laptop ya no reserva tramo de scroll: es un bloque normal. El ancho se limita para que
   la laptop abierta entre completa en la ventana y el formulario no quede recortado. */
#project-inquiry{max-width:none;padding:clamp(56px,9vh,120px) clamp(16px,4vw,40px)}
#project-inquiry .pi-track{max-width:1760px;margin-inline:auto}
#project-inquiry.pi-laptop-mode{padding-block:clamp(16px,2vh,32px)}
#project-inquiry.pi-laptop-mode .pi-sticky{display:flex;flex-direction:column;justify-content:center}
#project-inquiry.pi-laptop-mode .pi-laptop-stage{flex:none;margin-inline:auto;width:max(660px,min(100%,calc((100svh - 80px) * 836 / 547),1760px))}

/* El scroll de adentro del formulario se queda adentro y no cierra la laptop. */
#project-inquiry .pi-screen,#project-inquiry .pi-main,#project-inquiry .pi-modal{overscroll-behavior:contain}



/* ATech — CELULAR — ajustes globales de tamaño de letra y zonas cómodas para tocar. Toca varias
   secciones a la vez, así que va último en todas las páginas.
   Origen: bloque del antiguo styles.css (líneas 3598-3773). */
/* ============================================================
   CELULAR: letra legible y zonas cómodas para tocar.
   Los enlaces de listas ya tenían aire entre ellos; acá ese aire pasa a
   formar parte del área que responde al dedo. Nada de esto cambia el
   escritorio: todo vive dentro de la consulta de ancho.
   ============================================================ */
@media(max-width:800px) {
  /* Etiquetas en versalita: 11 px es el mínimo con este interletrado. */
  .eyebrow {
    font-size:11.5px;
    letter-spacing:1.4px;
    align-items:flex-start
  }
  .work-tags li {
    font-size:12px
  }
  .faq-kicker {
    font-size:12px;
    letter-spacing:2px
  }
  .feature-index {
    font-size:12px;
    letter-spacing:1.4px
  }
  .footer-heading {
    font-size:12px
  }
  #project-inquiry .pi-step-hint {
    font-size:12px
  }
  /* Índice lateral y datos de las páginas legales. */
  .legal-nav p {
    font-size:12px
  }
  .legal-nav a {
    display:flex;
    align-items:center;
    min-height:44px
  }
  .legal-doc dd a {
    display:inline-flex;
    align-items:center;
    min-height:36px
  }
  .legal-top .button-small {
    min-height:44px
  }

  /* Marca. */
  .brand {
    padding-block:6px
  }
  .footer-logo {
    padding-block:8px
  }

  /* Listas del pie: el hueco entre enlaces pasa a ser parte del enlace. */
  .footer-col ul {
    gap:0
  }
  .footer-col ul a {
    display:inline-flex;
    align-items:center;
    min-height:44px
  }
  .footer-col li {
    min-height:22px
  }
  .footer-accent {
    display:inline-flex;
    align-items:center;
    min-height:44px
  }
  .footer-legal a {
    display:inline-flex;
    align-items:center;
    min-height:44px
  }

  /* Páginas legales: índice y enlaces del texto. */
  .legal-kicker,.legal-toc p {
    font-size:12px
  }
  .legal-toc ol {
    gap:0
  }
  .legal-toc a {
    display:inline-flex;
    align-items:center;
    min-height:44px
  }
  .legal-doc p a,.legal-doc li a {
    padding-block:6px
  }
  .legal-foot .footer-legal a {
    min-height:40px
  }
}

/* ── Selector de código de país (telefono.js) ──
   El cuadro de la izquierda solo muestra bandera y código. El <select> real va encima,
   transparente y del tamaño del cuadro: así el control queda chico pero la lista
   desplegable sigue trayendo el nombre completo de cada país. */
/* La fuente "Banderas" (77 KB) la agrega telefono.js, y solo en Windows, que es el único
   sistema que no dibuja las banderas por su cuenta. En el resto no se descarga nunca. */
#project-inquiry .pi-tel {
  display:flex;
  align-items:stretch;
  gap:8px
}
#project-inquiry .pi-tel input {
  flex:1;
  min-width:0
}
#project-inquiry .pi-dial-box {
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:7px;
  flex:none;
  padding:0 9px 0 12px;
  border:1px solid #d9dde1;
  border-radius:9px;
  background:#ffffff;
  line-height:1
}
#project-inquiry .pi-dial-flag {
  font-family:"Banderas","Apple Color Emoji","Segoe UI Emoji",sans-serif;
  font-size:19px
}
#project-inquiry .pi-dial-code {
  font-size:15px;
  font-variant-numeric:tabular-nums
}
#project-inquiry .pi-dial-caret {
  width:15px;
  height:15px;
  stroke:var(--muted);
  opacity:.8
}
#project-inquiry .pi-dial {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  border:0;
  padding:0;
  margin:0;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none
}
#project-inquiry .pi-dial-box:hover {
  border-color:#818991
}
#project-inquiry .pi-dial-box:has(.pi-dial:focus-visible) {
  border-color:var(--accent);
  outline:3px solid var(--accent);
  outline-offset:3px
}
/* La lista desplegable la dibuja el sistema: acá solo se asegura que se lea. */
#project-inquiry .pi-dial option {
  font-size:15px;
  color:var(--ink);
  background:#ffffff
}
@media(max-width:680px) {
  #project-inquiry .pi-dial-box {
    padding:0 7px 0 10px;
    gap:5px
  }
  #project-inquiry .pi-dial-code {
    font-size:14px
  }
}

/* ── Saltar el dibujado de lo que está lejos de la pantalla ──
   En celular la página mide más de 10.000 px: maquetar y pintar todo de una en un teléfono cuesta
   cientos de milisegundos de hilo principal antes de que la portada quede utilizable.
   `content-visibility:auto` deja que el navegador postergue ese trabajo hasta que la sección se
   acerca. Solo se aplica a las secciones que NO tienen animaciones atadas al scroll (ahí las
   mediciones de ScrollTrigger se romperían) y con un alto estimado, para que la barra de
   desplazamiento no pegue saltos. El contenido sigue en el DOM: los enlaces del menú, el buscador
   del navegador y los lectores de pantalla lo encuentran igual. */
@media(max-width:800px) {
  #trabajos, #preguntas, .site-footer {
    content-visibility:auto
  }
  #trabajos { contain-intrinsic-size:auto 1977px }
  #preguntas { contain-intrinsic-size:auto 939px }
  .site-footer { contain-intrinsic-size:auto 1235px }
}