/* Grupo Albran — hoja de estilo única.
   Tokens tomados tal cual del diseño (Claude Design → "Grupo Albran.dc.html"). */

:root {
  --bg:        #08090A;
  --bg-2:      #0A0C0F;
  --bg-3:      #0D0F12;
  --surface:   #101215;
  --surface-2: #151A1F;
  --surface-form: #12151A;

  --fg:      #EDEFF0;
  --fg-2:    #B9BFC4;
  --fg-3:    #B6BDC3;
  --muted:   #A3AAB0;
  --muted-2: #949BA1;
  --muted-3: #8A9197;

  --acid:     oklch(0.87 0.2 128);
  --acid-hi:  oklch(0.92 0.18 128);
  --acid-rgb: 169, 240, 78;

  --line:      rgba(255, 255, 255, .1);
  --line-2:    rgba(255, 255, 255, .12);
  --line-3:    rgba(255, 255, 255, .15);
  --line-4:    rgba(255, 255, 255, .2);

  --display: 'Space Grotesk', Helvetica, Arial, sans-serif;
  --body:    'IBM Plex Sans', Helvetica, Arial, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1240px;
  --gut: clamp(20px, 4vw, 48px);
  --sec-y: clamp(56px, 7vw, 104px);
  --nav-h: 84px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--fg); text-decoration: none; }
a:hover { color: var(--acid); }

img, video { max-width: 100%; }

input, textarea, select, button { font-family: inherit; }
input::placeholder, textarea::placeholder { color: var(--muted-2); }

::selection { background: var(--acid); color: var(--bg); }

:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--acid);
  color: var(--bg);
  font-family: var(--display);
  font-weight: 600;
  padding: 12px 18px;
  border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; color: var(--bg); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gut); }
.section { padding-block: var(--sec-y); }

.mono { font-family: var(--mono); }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--muted-2);
  text-transform: uppercase;
  margin: 0;
}
.eyebrow--dot {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  margin-bottom: 28px;
}
.dot {
  width: 7px; height: 7px;
  flex: none;
  border-radius: 999px;
  background: var(--acid);
  animation: albranPulse 2.4s ease-in-out infinite;
}

/* ---------- botones ---------- */

.btn {
  display: inline-block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  padding: 15px 26px;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.btn--acid { background: var(--acid); color: var(--bg); }
.btn--acid:hover { background: var(--acid-hi); color: var(--bg); }
.btn--ghost { font-weight: 500; border-color: var(--line-4); color: var(--fg); }
.btn--ghost:hover { border-color: rgba(255, 255, 255, .4); color: var(--fg); }
.btn--sm { font-size: 14px; padding: 10px 18px; border-radius: 8px; }
.btn--block { width: 100%; }

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(8, 9, 10, .78);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background .3s ease, border-color .3s ease;
}
.nav.is-scrolled {
  background: rgba(8, 9, 10, .92);
  border-bottom-color: rgba(255, 255, 255, .16);
}
.nav__inner {
  min-height: 68px;
  padding-block: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  min-width: 0;
}
.nav__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px clamp(14px, 2.4vw, 32px);
  min-width: 0;
}
.nav__links > a:not(.btn) { font-size: 14px; color: var(--fg-2); }
.nav__links > a:not(.btn):hover { color: var(--acid); }

.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand:hover { color: var(--fg); }
.brand__mark { display: flex; flex: none; }
.brand__a, .brand__b {
  width: 30px; height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.06em;
}
.brand__a { background: var(--acid); color: var(--bg); }
.brand__b { border: 1px solid rgba(255, 255, 255, .22); background: var(--bg); margin-left: -7px; }
.brand__name { font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: -.035em; }

.brand--sm { gap: 10px; }
.brand--sm .brand__a, .brand--sm .brand__b { width: 26px; height: 26px; border-radius: 8px; font-size: 14px; }
.brand--sm .brand__b { margin-left: -6px; }
.brand--sm .brand__name { font-size: 16px; }

.langswitch {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 3px;
}
.langswitch button {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  padding: 6px 11px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.langswitch button[aria-pressed="true"] { background: var(--acid); color: var(--bg); }

/* ---------- hero ---------- */

.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 80% at 20% 0%, #000 20%, transparent 75%);
}
.hero__spot {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
  background: radial-gradient(320px circle at 50% 50%, rgba(var(--acid-rgb), .13), transparent 70%);
}
.hero__inner {
  position: relative;
  padding-block: clamp(64px, 9vw, 120px) clamp(56px, 7vw, 96px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: end;
}

.hero__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(40px, 6.2vw, 82px);
  line-height: 1;
  letter-spacing: -.035em;
  margin: 0 0 26px;
  text-wrap: balance;
}
/* máscaras por palabra — las inserta app.js */
.hero__title .w { display: inline-block; overflow: hidden; padding-bottom: .18em; margin-bottom: -.18em; }
.hero__title .w > span { display: inline-block; transform: translateY(108%); }
.hero__title.is-in .w > span { transform: none; }

.hero__lead {
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.55;
  color: var(--fg-3);
  margin: 0 0 36px;
  max-width: 60ch;
  text-wrap: pretty;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__aside { display: grid; gap: 16px; }

.stage {
  position: relative;
  aspect-ratio: 1 / 1;
  max-height: min(84vw, 560px);
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: var(--bg-3);
  overflow: hidden;
  mask-image: radial-gradient(125% 125% at 50% 45%, #000 60%, rgba(0, 0, 0, .35) 88%, transparent 100%);
}
.stage__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s ease;
}
.stage__empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .04em;
  transition: opacity .5s ease;
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 8px, transparent 8px 16px);
}
.stage__specs { font-size: 11px; color: var(--muted-3); line-height: 1.7; max-width: 30ch; }

.term {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 8px 20px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted);
}
.term b { font-weight: 400; color: var(--fg); }
.term__arrow { color: var(--acid); }

/* ---------- bandas y encabezados de sección ---------- */

.band { border-bottom: 1px solid var(--line); }
.band--2 { background: var(--bg-2); }
.band--3 { background: var(--bg-3); }
.band[id] { scroll-margin-top: var(--nav-h); }
#contacto { border-bottom: none; }

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.section__head h2,
.section__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.05;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.section__head h2 { margin: 0; max-width: 22ch; }
.section__title { margin: 16px 0 clamp(36px, 4vw, 60px); max-width: 26ch; }
.section__title--tight { margin: 16px 0 0; }
.section__note { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; max-width: 38ch; text-wrap: pretty; }

/* ---------- servicios ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 1px;
}
.card {
  background: var(--surface);
  padding: clamp(26px, 3vw, 38px);
  border-radius: 14px;
  box-shadow: 0 0 0 1px var(--line-2);
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.card:hover {
  background: var(--surface-2);
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px var(--line-4);
}
.card__num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--acid);
  letter-spacing: .18em;
  margin: 0 0 26px;
}
.card h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -.02em;
  margin: 0 0 12px;
}
.card__copy { font-size: 15px; line-height: 1.6; color: var(--fg-3); margin: 0 0 22px; text-wrap: pretty; }
.card__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.card__list li { font-family: var(--mono); font-size: 12px; color: var(--muted-2); }

/* ---------- prueba (lo que ya está corriendo) ---------- */

.proof {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(24px, 3vw, 40px);
}
.proof__item { border-top: 1px solid var(--line-2); padding-top: 20px; }
.proof__dot {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--acid);
  margin-bottom: 16px;
  box-shadow: 0 0 0 4px rgba(var(--acid-rgb), .14);
}
.proof__item h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -.015em;
  margin: 0 0 10px;
  text-wrap: balance;
}
.proof__item p { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0; text-wrap: pretty; }

/* ---------- nota destacada (capacidad) ---------- */

.note {
  margin-top: clamp(36px, 4vw, 56px);
  border: 1px solid var(--line-2);
  border-left: 2px solid var(--acid);
  border-radius: 12px;
  background: rgba(255, 255, 255, .02);
  padding: clamp(22px, 3vw, 30px);
  max-width: 70ch;
}
.note h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -.02em;
  margin: 0 0 10px;
  text-wrap: balance;
}
.note p { font-size: 15px; line-height: 1.65; color: var(--fg-3); margin: 0; text-wrap: pretty; }

/* ---------- marquee ---------- */

.marquee { overflow: hidden; padding-block: 22px; border-bottom: 1px solid var(--line); }
.marquee__track { display: flex; width: max-content; animation: albranMarquee 26s linear infinite; }
.marquee__row {
  display: flex;
  gap: 32px;
  padding-right: 32px;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(18px, 2vw, 26px);
  letter-spacing: -.02em;
  color: var(--muted-3);
  white-space: nowrap;
}
.marquee .sep { color: var(--acid); }

/* ---------- proceso ---------- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: clamp(24px, 3vw, 40px);
}
.step { border-top: 1px solid rgba(255, 255, 255, .18); padding-top: 20px; }
.step--first { border-top-color: var(--acid); }
.step--first .step__num { color: var(--acid); }
.step__num { font-family: var(--mono); font-size: 11px; color: var(--muted-2); letter-spacing: .18em; margin: 0 0 14px; }
.step h3 { font-family: var(--display); font-weight: 600; font-size: 18px; margin: 0 0 10px; }
.step p { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0; text-wrap: pretty; }

/* ---------- trabajo ---------- */

/* Trabajo publicado. Reusa la retícula de .proof; aquí sólo va lo propio del bloque. */
/* Lleva id="trabajo" y es destino del botón del hero, pero no es .band, así que la
   regla de arriba no lo cubre: sin esto la barra pegajosa le tapa el encabezado. */
.work[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }
.work__list { margin-top: 16px; }
.work__link { color: inherit; }
.work__link:hover { color: var(--acid); }
.work__url {
  display: block;
  margin-top: 12px;
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--muted-3);
}

.stack {
  margin-top: clamp(36px, 4vw, 56px);
  border-top: 1px solid var(--line-2);
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
/* sin el portafolio arriba, el stack no necesita línea ni aire de separación */
.stack--bare { margin-top: 0; border-top: none; padding-top: 0; }
.stack__label { letter-spacing: .18em; margin-right: 8px; }

/* ---------- preguntas frecuentes ---------- */

.faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(24px, 3vw, 40px) clamp(28px, 4vw, 64px);
}
.faq__item { border-top: 1px solid var(--line-2); padding-top: 20px; }
.faq__item h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -.015em;
  margin: 0 0 10px;
  text-wrap: balance;
}
.faq__item p { font-size: 14.5px; line-height: 1.65; color: var(--muted); margin: 0; text-wrap: pretty; }
.chip {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-3);
  border: 1px solid var(--line-3);
  border-radius: 999px;
  padding: 7px 14px;
}

/* ---------- contacto ---------- */

.contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(36px, 5vw, 72px);
}
.contact__title { margin: 16px 0 20px; max-width: 20ch; }
.contact__lead { font-size: 16px; line-height: 1.6; color: var(--fg-3); margin: 0 0 32px; max-width: 44ch; text-wrap: pretty; }
.contact__area {
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted-2);
  margin: 0 0 22px;
  max-width: 46ch;
  text-wrap: pretty;
}
.contact__links { display: grid; gap: 14px; }

.linkrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--line-3);
  border-radius: 12px;
  padding: 16px 18px;
  transition: border-color .2s ease;
}
.linkrow:hover { border-color: var(--acid); color: var(--fg); }
.linkrow__val { font-family: var(--display); font-weight: 500; font-size: 16px; }

.form {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-form);
  padding: clamp(22px, 3vw, 34px);
  display: grid;
  gap: 18px;
  align-content: start;
}
.field { display: grid; gap: 8px; }
.field .eyebrow { letter-spacing: .16em; color: var(--muted); }
.form input, .form select, .form textarea {
  background: var(--bg);
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 9px;
  padding: 13px 14px;
  color: var(--fg);
  font-size: 15px;
  transition: border-color .2s ease;
}
.form textarea { resize: vertical; }
/* "(opcional)": tiene que leerse como aclaración, no como parte de la etiqueta.
   Sin esto el campo se ve igual de obligatorio que los demás y la gente lo llena
   por inercia — o peor, se frena porque cree que le falta un dato. */
.field__opt { color: var(--muted-3); text-transform: none; letter-spacing: .04em; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--acid); outline: none; }
.form input:user-invalid, .form textarea:user-invalid { border-color: #E0655A; }
.form__status { font-size: 12px; color: var(--acid); margin: 0; text-align: center; }
.form__status[data-state="error"] { color: #E0655A; }

/* ---------- pie ---------- */

.foot { border-top: 1px solid var(--line); }
.foot__inner {
  padding-block: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}
.foot__meta { font-size: 11.5px; color: var(--muted-2); margin: 0; }

/* ---------- WhatsApp flotante ---------- */

.wa-float {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--acid);
  color: var(--bg);
  border-radius: 999px;
  padding: 14px 20px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  animation: albranFloat 3s ease-in-out infinite alternate;
  transition: background .2s ease;
}
.wa-float:hover { background: var(--acid-hi); color: var(--bg); }
.wa-float__dot { width: 9px; height: 9px; flex: none; border-radius: 999px; background: var(--bg); }

/* ---------- animaciones ---------- */

@keyframes albranFloat   { from { transform: translateY(0); } to { transform: translateY(-4px); } }
@keyframes albranMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes albranPulse   { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* revelado al hacer scroll — lo activa app.js añadiendo .reveal-ready */
/* Sin opacity: el texto ya se pintó cuando el JS añade .reveal-ready, así que
   apagarlo lo hacía parpadear en teléfonos lentos (aparece, desaparece, vuelve).
   Con sólo el desplazamiento el efecto se ve igual y el texto nunca se va. */
.reveal-ready [data-reveal] {
  transform: translateY(16px);
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
.reveal-ready [data-reveal].is-in { transform: none; }

.reveal-ready [data-term] li { opacity: 0; transition: opacity .35s ease; }
.reveal-ready [data-term].is-in li { opacity: 1; }

/* ---------- móvil ---------- */

/* El layout es fluido y no se desborda, así que abajo de 760px sólo hay que
   corregir cuatro cosas concretas que sí rompían en el teléfono. */

@media (max-width: 760px) {
  /* 1. La barra de arriba se escalonaba en tres pisos y comía 152px de pantalla.
        En una página de una sola pantalla se navega con scroll, así que el menú
        de texto se va y se queda lo que convierte: marca, idioma y Cotizar. */
  .nav__inner { flex-wrap: nowrap; gap: 12px; }
  .nav__links { flex: none; gap: 10px; }
  .nav__links > a:not(.btn) { display: none; }
  .nav__links .btn { padding: 13px 17px; font-size: 14px; }

  /* 2. Se toca con el dedo, no con el cursor. */
  .langswitch button { display: flex; align-items: center; min-height: 38px; padding: 0 12px; }

  /* 3. iOS hace zoom al tocar un campo de menos de 16px y ya no regresa solo. */
  .form input, .form select, .form textarea { font-size: 16px; }

  /* 4. El botón flotante tapaba los títulos al pasar por encima. */
  .wa-float { padding: 13px 17px; font-size: 13px; gap: 8px; }
  .foot { padding-bottom: 76px; }   /* y tapaba la última línea del pie */

  .eyebrow { letter-spacing: .14em; }
}

@media (max-width: 480px) {
  /* Sólo "WhatsApp": el botón baja de 58% del ancho a menos de un tercio. */
  .wa-float__pre { display: none; }
}

@media (max-width: 360px) {
  /* Pantallas muy chicas: se queda la marca AB sin el nombre, para que la fila no se rompa. */
  .brand__name { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__track,
  .wa-float,
  .dot { animation: none; }
  .hero__title .w > span { transform: none; }
  .reveal-ready [data-reveal],
  .reveal-ready [data-term] li { opacity: 1; transform: none; transition: none; }
}