/* ==========================================================================
   5105 Labs
   Landing de servicios. Villa Allende, Cordoba.
   5105 es el codigo postal de Villa Allende: de ahi sale el nombre.

   Diales de diseno: VARIANCE 5 / MOTION 4 / DENSITY 3
   Publico: duenos de comercio no tecnicos, mirando desde un celular.

   LOCKS (no romper sin revisar toda la pagina):
   - Acento unico: --accent. No aparece ningun otro color de marca.
   - El monograma [5105] es la unica pieza con fondo propio fijo (--mark-*):
     no invierte con el tema, para que el logo sea el mismo en los dos.
   - Radios: botones = pastilla (999px). Todo lo demas = --r (14px).
   - Tema: light y dark completos via variables. Ninguna seccion invierte.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */

:root {
  --bg:            #fbfbf9;
  --surface:       #ffffff;
  --surface-2:     #f3f4f0;
  --ink:           #14171a;
  --ink-2:         #4c5359;
  --ink-3:         #696f75;   /* 4.9:1 sobre --bg. No aclarar: por debajo de #6a7177 rompe WCAG AA */
  --line:          #e4e6e1;

  --accent:        #ad5714;   /* 5.06:1 con texto blanco. Es el naranja del logo bajado
                                 para que aguante fondo claro: #e2792e da 3.0:1 y rompe AA */
  --accent-strong: #8f4610;
  --accent-soft:   #fdf3ec;   /* 4.63:1 con --accent encima. No oscurecer */
  --on-accent:     #ffffff;

  /* El monograma [5105] no cambia con el tema: mismo bloque en claro y oscuro. */
  --mark-bg:        #161616;
  --mark-ink:       #f2ede6;
  --mark-accent:    #e2792e;
  --mark-on-accent: #14100a;   /* 6.3:1 sobre --mark-accent */

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;

  --r:    14px;
  --r-sm: 10px;
  --pill: 999px;

  --wrap: 1240px;
  --shadow: 0 1px 2px rgb(20 23 26 / .04), 0 12px 32px -12px rgb(20 23 26 / .10);

  --ease: cubic-bezier(.16, 1, .3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #0f1113;
    --surface:       #16191c;
    --surface-2:     #1b1f22;
    --ink:           #f1f3f1;
    --ink-2:         #a9b1b6;
    --ink-3:         #7d858a;
    --line:          #262b2f;

    --accent:        #e2792e;   /* el naranja de marca, tal cual. 6.3:1 sobre --bg */
    --accent-strong: #ef8a45;
    --accent-soft:   #2a1a0d;
    --on-accent:     #14100a;

    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 12px 32px -12px rgb(0 0 0 / .55);
  }
}

/* ---------- 2. Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* la nav es sticky: sin esto los links del menu dejan el titulo debajo */
  scroll-padding-top: 88px;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Deja aire para la barra fija de WhatsApp en celular. Tiene que incluir el
     safe-area igual que la barra: en un iPhone con notch son 34px mas, y sin
     sumarlos la barra tapa el bloque de creditos del footer. */
  padding-bottom: calc(88px + env(safe-area-inset-bottom));
}

@media (min-width: 768px) {
  body { padding-bottom: 0; }
}

img { max-width: 100%; height: auto; display: block; }

/* Iconos. Son <svg><use> contra el sprite que esta al principio del body, asi
   que heredan el color del texto y escalan con la tipografia igual que antes,
   pero sin traer una familia de iconos entera por CDN. */
.ic {
  width: 1em;
  height: 1em;
  fill: currentColor;
  flex: none;
}

h1, h2, h3 {
  margin: 0;
  letter-spacing: -.028em;
  line-height: 1.1;
  font-weight: 800;
  /* reserva para descendentes (g, j, y) en titulos grandes */
  padding-bottom: .06em;
}

p { margin: 0; }

a { color: inherit; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 20px;
}

@media (min-width: 768px) {
  .wrap { padding-inline: 32px; }
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--on-accent);
  padding: 12px 18px;
  border-radius: 0 0 var(--r) 0;
  z-index: 100;
  font-weight: 600;
}
.skip:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- 3. Botones ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  white-space: nowrap;              /* nunca partir la etiqueta en 2 lineas */
  text-decoration: none;
  font-weight: 600;
  border-radius: var(--pill);
  border: 1.5px solid transparent;
  background: var(--accent);
  color: var(--on-accent);
  padding: 11px 20px;
  font-size: 15px;
  min-height: 44px;                 /* minimo tactil, incluso en .btn--sm */
  transition: background .2s var(--ease), transform .12s var(--ease),
              border-color .2s var(--ease), color .2s var(--ease);
}

.btn .ic { width: 1.25em; height: 1.25em; }

.btn:hover  { background: var(--accent-strong); }
.btn:active { transform: scale(.975); }

.btn--sm { padding: 9px 16px; font-size: 14px; }

.btn--lg {
  padding: 15px 26px;
  font-size: 16.5px;
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover {
  background: var(--surface-2);
  border-color: var(--ink-3);
}

/* Variantes sobre la banda de acento: el texto siempre contra fondo solido */
/* Botones de la banda de contacto. Van contra --mark-bg, que es oscuro en los
   dos temas, asi que usan los colores fijos de la marca y no los del tema:
   en claro, --accent (#ad5714) sobre ese fondo queda barroso. */
.btn--onaccent {
  background: var(--mark-accent);
  color: var(--mark-on-accent);
}
.btn--onaccent:hover { background: #f08c48; }

.btn--onaccent-ghost {
  background: transparent;
  color: var(--mark-ink);
  border-color: color-mix(in srgb, var(--mark-ink) 34%, transparent);
}
.btn--onaccent-ghost:hover {
  background: color-mix(in srgb, var(--mark-ink) 10%, transparent);
  border-color: var(--mark-ink);
}

/* ---------- 4. Nav (una sola linea, max 72px) ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.nav__inner {
  height: 66px;
  display: flex;
  align-items: center;
  gap: 24px;
}

@media (min-width: 768px) {
  .nav__inner { height: 72px; }
}

.logo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-right: auto;
}

/* El monograma mide 38px porque visualmente es lo que corresponde al lado del
   boton. El area tocable la estira este pseudo hasta 44x44, sin mover nada. */
.logo::after {
  content: "";
  position: absolute;
  inset: -3px;
}

/* El monograma. Los corchetes van en naranja y los digitos en crema, siempre
   sobre el mismo bloque oscuro: es la unica pieza que no sigue el tema.

   No es un cuadrado. "[5105]" son seis caracteres de ancho fijo y a 38px de alto
   un cuadrado los deja en 9px, ilegibles. La caja se estira a lo que mide el
   texto. En 200px (favicon, avatar, og:image) si cierra cuadrada. */
.logo__mark {
  display: inline-grid;             /* "grid" a secas lo estira al ancho del padre
                                       cuando no esta dentro de un flex (footer) */
  grid-auto-flow: column;
  place-items: center;
  height: 38px;
  padding-inline: 9px;
  border-radius: var(--r-sm);
  background: var(--mark-bg);
  color: var(--mark-ink);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: -.02em;
  box-shadow: inset 0 0 0 1px rgb(242 237 230 / .09);
  flex: none;
}

/* los corchetes, la parte que hace de marca */
.logo__mark b {
  color: var(--mark-accent);
  font-weight: inherit;
}

.logo__mark--sm { height: 34px; padding-inline: 8px; font-size: 11.5px; }

.logo__text {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 15.5px;
  letter-spacing: -.02em;
}

/* el numero en mono, "Labs" en la tipografia de la pagina: el contraste entre
   las dos familias es lo que separa la marca del sustantivo */
.logo__num {
  font-family: var(--mono);
  font-weight: 700;
}

.logo__labs {
  font-weight: 500;
  color: var(--accent);
}

/* en celular el nombre largo compite con el boton: queda solo el monograma */
@media (max-width: 599px) {
  .logo__text { display: none; }
}

.nav__links { display: none; }

@media (min-width: 900px) {
  .nav__links {
    display: flex;
    gap: 28px;
    font-size: 15px;
    font-weight: 500;
    color: var(--ink-2);
  }
  .nav__links a {
    display: flex;
    align-items: center;
    min-height: 44px;               /* el texto mide 24px: el area tocable no */
    text-decoration: none;
    transition: color .18s var(--ease);
  }
  .nav__links a:hover { color: var(--ink); }
}

/* ---------- 5. Hero (split asimetrico 6/5) ---------- */

.hero {
  position: relative;
  /* recorta el lavado de ::before, que se extiende fuera de la caja a proposito.
     Sin esto la pagina scrollea de costado. */
  overflow: hidden;
  padding-top: 44px;
  padding-bottom: 56px;
}

/* Lavado suave detras del hero. Le saca el blanco plano de fondo sin
   competir con el texto. */
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% 30% -30%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    55% 60% at 25% 35%,
    color-mix(in srgb, var(--accent) 12%, transparent),
    transparent 70%
  );
}

@media (min-width: 900px) {
  .hero {
    padding-top: 80px;    /* tope duro: el contenido no flota a media pantalla */
    padding-bottom: 96px;
  }
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
}

/* El hero usa el mismo canal que el resto de la pagina: .wrap ya se lo da y
   aca solo se define la proporcion de las dos columnas (6/5).

   Antes la foto salia del contenedor hasta el borde de la ventana. En teoria
   rompia la simetria; en la practica el borde derecho la cortaba al medio sin
   ningun remate y quedaba 124px pasada de donde termina todo lo demas, asi que
   leia como un error de maquetado y no como una decision.

   El padding-left tampoco puede volver: usaba 100vw, que incluye la barra de
   scroll, y dejaba el titulo 7px corrido respecto del resto de la pagina. */
@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: 6fr 5fr;
    gap: 56px;
  }
}

.hero h1 {
  font-size: clamp(2.15rem, 5.6vw, 3.3rem);
}

.lede {
  margin-top: 20px;
  font-size: clamp(1.02rem, 2.4vw, 1.2rem);
  color: var(--ink-2);
  max-width: 46ch;
}

.hero__cta {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* en celular la barra fija ya ofrece WhatsApp: no repetir el boton */
@media (max-width: 767px) {
  .hero__cta .btn:first-child { display: none; }
  .hero__cta .btn--ghost { width: 100%; }
}

/* La foto es un plano abierto: el cartel ocupa una franja fina en el medio y el
   resto es asfalto y cielo. En celular, a 16/11, entra casi entera y se lee.
   En desktop la caja es mas cuadrada y ese mismo encuadre deja el cartel chico
   entre dos vacios grises. Por eso aca la foto se recorta al cartel en vez de
   mostrarse completa: el contenedor clipea y la imagen se escala adentro. */
.hero__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

.hero__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
}

@media (min-width: 900px) {
  .hero__media img {
    aspect-ratio: 5 / 4;
    object-position: 47% 48%;
    transform: scale(1.3);          /* acerca el cartel y saca calle y cielo */
    transform-origin: 47% 48%;
    filter: saturate(.9) contrast(1.03);
  }

  /* Apaga la calle del borde inferior, que es la unica zona muerta que queda
     del encuadre original. El degrade de la izquierda se fue con la sangria:
     dentro de una tarjeta cerrada era una mancha, no una transicion. */
  .hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top,
      color-mix(in srgb, var(--bg) 55%, transparent),
      transparent 24%);
  }
}

/* ---------- 6. Secciones ---------- */

.section { padding-block: 64px; }

@media (min-width: 900px) {
  .section { padding-block: 104px; }
}

.section--alt {
  background: var(--surface-2);
  border-block: 1px solid var(--line);
}

.section__title {
  font-size: clamp(1.75rem, 4.6vw, 2.65rem);
  max-width: 20ch;
  margin-bottom: 36px;
}

.section__note {
  margin-top: 28px;
  color: var(--ink-2);
  font-size: 16px;
  max-width: 58ch;
}

/* ---------- 7. Servicios: bento de exactamente 3 celdas ---------- */

.bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 900px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  /* la celda ancha ocupa la fila entera: 3 items, 3 celdas, sin huecos */
  .bento__cell--wide { grid-column: 1 / -1; }
}

.bento__cell {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 30px 26px;
}

.bento__cell--wide {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  padding: 0;
  overflow: hidden;
}

@media (min-width: 900px) {
  .bento__cell--wide {
    grid-template-columns: 1.05fr .95fr;
    gap: 0;
    align-items: stretch;
  }
}

.bento__body { padding: 30px 26px; }

@media (min-width: 900px) {
  .bento__body {
    padding: 44px 40px;
    align-self: center;
  }
}

.bento__media { min-height: 200px; }

.bento__media img {
  width: 100%;
  height: 100%;
  min-height: 200px;
  object-fit: cover;
}

@media (max-width: 899px) {
  .bento__media { order: -1; }
  .bento__media img { aspect-ratio: 16 / 9; min-height: 0; }
}

/* celda con fondo de acento: da variedad visual al grid */
.bento__cell--accent {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
}

.bento__icon {
  width: 30px;
  height: 30px;
  fill: var(--accent);
  display: block;
  margin-bottom: 16px;
}

.bento__cell h3 {
  font-size: 1.32rem;
  margin-bottom: 12px;
}

.bento__cell--wide h3 { font-size: 1.55rem; }

.bento__cell p {
  color: var(--ink-2);
  font-size: 16px;
  max-width: 52ch;
}

/* ---------- 8. Proceso: lista escalonada con guia vertical ---------- */

.proceso {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 900px) {
  .proceso {
    grid-template-columns: 5fr 7fr;
    gap: 72px;
    align-items: start;
  }
  .proceso__head { position: sticky; top: 108px; }
}

.proceso__head h2 {
  font-size: clamp(1.75rem, 4.6vw, 2.65rem);
}

.proceso__head p {
  margin-top: 16px;
  color: var(--ink-2);
  max-width: 34ch;
}

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.steps__item {
  position: relative;
  padding: 0 0 34px 30px;
  border-left: 2px solid var(--line);
}

.steps__item:last-child { padding-bottom: 0; border-left-color: transparent; }

.steps__item::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: var(--pill);
  background: var(--accent);
}

.steps__item h3 {
  font-size: 1.28rem;
  margin-bottom: 10px;
}

.steps__item p {
  color: var(--ink-2);
  font-size: 16px;
  max-width: 54ch;
}

/* ---------- 9. Nosotros: split con foto ---------- */

.nosotros {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
}

@media (min-width: 900px) {
  .nosotros {
    grid-template-columns: 5fr 6fr;
    gap: 64px;
  }
}

.nosotros__media img {
  width: 100%;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

@media (max-width: 899px) {
  .nosotros__media img { aspect-ratio: 4 / 3; }
}

.nosotros__copy h2 {
  font-size: clamp(1.75rem, 4.6vw, 2.65rem);
  margin-bottom: 22px;
}

.nosotros__copy p {
  color: var(--ink-2);
  max-width: 54ch;
}

.nosotros__copy p + p { margin-top: 16px; }

.marks {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  font-size: 15.5px;
  font-weight: 500;
}

.marks li {
  display: flex;
  align-items: center;
  gap: 11px;
}

.marks .ic {
  width: 21px;
  height: 21px;
  fill: var(--accent);
}

/* ---------- 10. Contacto: banda de acento ---------- */

/* La banda va oscura, no en naranja pleno, y en los dos temas. A este tamano
   una masa de #e2792e o de #ad5714 tapa todo lo que tiene alrededor. La marca
   es oscuro con naranja de acento -- el mismo par que el monograma -- asi que
   la banda repite ese par y el CTA se queda con el unico naranja de la pantalla,
   que es donde tiene que ir el ojo. */
.contacto {
  background: var(--mark-bg);
  color: var(--mark-ink);
  padding-block: 68px;
}

@media (min-width: 900px) {
  .contacto { padding-block: 104px; }
}

.contacto__inner {
  text-align: center;
  display: grid;
  justify-items: center;
}

.contacto h2 {
  font-size: clamp(1.9rem, 5.2vw, 3rem);
  max-width: 16ch;
}

.contacto p {
  margin-top: 18px;
  max-width: 48ch;
  font-size: 17px;
  color: color-mix(in srgb, var(--mark-ink) 72%, transparent);
}

.contacto__cta {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

@media (max-width: 559px) {
  .contacto__cta { width: 100%; }
  .contacto__cta .btn { width: 100%; }
}

/* ---------- 11. Footer ---------- */

.footer {
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding-block: 44px;
}

.footer__inner {
  display: grid;
  gap: 28px;
}

@media (min-width: 768px) {
  .footer__inner {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}

.footer__name {
  margin-top: 14px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.footer__meta {
  margin-top: 4px;
  color: var(--ink-3);
  font-size: 15px;
}

.footer__links {
  display: grid;
  gap: 0;
  font-size: 15px;
  color: var(--ink-2);
}

/* Son los dos links de contacto reales del pie: el area tocable la da el
   min-height, no el alto del texto (que son 24px). El gap pasa a 0 porque el
   aire ahora lo aporta el propio alto de cada link. */
.footer__links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  transition: color .18s var(--ease);
}

.footer__links a:hover { color: var(--accent); }

@media (min-width: 768px) {
  .footer__links { justify-items: end; }
}

/* ---------- 12. Barra fija de contacto (solo celular) ---------- */

.stickybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}

.stickybar .btn { width: 100%; }

@media (min-width: 768px) {
  .stickybar { display: none; }
}

/* ---------- 13. Movimiento (MOTION_INTENSITY 4) ---------- */

/* Solo se ocultan si el JS esta vivo. Sin JS la pagina se lee entera. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* si el usuario pidio menos movimiento, todo entra estatico y visible */
@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .reveal.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .btn { transition: none; }
  .btn:active { transform: none; }
}

/* ---------- 14. Grano ---------- */

/* Textura muy sutil sobre toda la pagina. Va en un pseudo fijo y sin eventos
   de puntero: si se aplicara a un contenedor que scrollea, el navegador
   repinta en cada frame y en celular se cae el rendimiento. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  body::after { opacity: .055; }
}

/* ---------- 15. Cobertura ---------- */

.cobertura {
  border-block: 1px solid var(--line);
  background: var(--surface);
  padding-block: 22px;
}

.cobertura__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
}

.cobertura__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  flex: none;
}

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

.cobertura__list li {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: var(--pill);
  padding: 5px 13px;
}

/* ---------- 16. Tarjeta de marca (en lugar de la foto) ---------- */

/* Ocupa el lugar de la foto de los dos hasta que exista. Usa los colores fijos
   del monograma, igual que la banda de contacto: es oscura en los dos temas.
   Cuando llegue la foto, esta seccion entera se puede borrar. */
.marca-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 5 / 6;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 22px;
  padding: 32px 24px;
  border-radius: var(--r);
  background: var(--mark-bg);
  color: var(--mark-ink);
  box-shadow: inset 0 0 0 1px rgb(242 237 230 / .08), var(--shadow);
}

/* brillo naranja muy tenue detras del numero */
.marca-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 45% at 50% 45%,
    color-mix(in srgb, var(--mark-accent) 16%, transparent), transparent 70%);
}

.marca-card__mono {
  position: relative;
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 4.4rem);
  letter-spacing: -.02em;
  line-height: 1;
}

.marca-card__mono b {
  color: var(--mark-accent);
  font-weight: inherit;
}

.marca-card__lugar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .02em;
  color: color-mix(in srgb, var(--mark-ink) 70%, transparent);
}

.marca-card__lugar .ic {
  width: 16px;
  height: 16px;
  fill: var(--mark-accent);
}

@media (max-width: 899px) {
  .marca-card { aspect-ratio: 16 / 10; }
}

/* ---------- 17. Creditos de fotos ---------- */

.footer__credits {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.footer__credits p {
  font-size: 13px;
  color: var(--ink-3);
}

.footer__credits a { color: var(--ink-2); }

/* La linea que explica el nombre. Sin esto "5105" es un numero cualquiera:
   el sentido de la marca vive en esta frase, no en el logo. */
.lead-mark {
  margin-bottom: 18px;
  padding-left: 14px;
  border-left: 2px solid var(--accent);
  color: var(--ink-2);
}

.lead-mark strong {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--accent);
}

/* ---------- 18. Plan B del mail ---------- */

/* Aparece solo si al tocar un link de mail no se abrio ninguna app.
   Lo crea main.js; sin JS no existe. */
.mail-aviso {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 80;
  width: min(500px, calc(100% - 32px));
  padding: 18px 44px 16px 18px;
  border-radius: var(--r);
  background: var(--mark-bg);
  color: var(--mark-ink);
  box-shadow: inset 0 0 0 1px rgb(242 237 230 / .1), 0 18px 48px -12px rgb(0 0 0 / .55);
  transform: translate(-50%, 16px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s .25s;
}

.mail-aviso.is-open {
  transform: translate(-50%, 0);
  opacity: 1;
  visibility: visible;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}

/* en celular la barra fija de WhatsApp ocupa el pie: el aviso va arriba de ella */
@media (max-width: 767px) {
  .mail-aviso { bottom: calc(96px + env(safe-area-inset-bottom)); }
}

.mail-aviso__txt {
  font-size: 15px;
  font-weight: 600;
}

.mail-aviso__acciones {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mail-aviso__btn {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--pill);
  border: 1px solid color-mix(in srgb, var(--mark-ink) 30%, transparent);
  background: transparent;
  color: var(--mark-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.mail-aviso__btn:hover { border-color: var(--mark-ink); }

.mail-aviso__btn[data-k="gmail"] {
  background: var(--mark-accent);
  border-color: var(--mark-accent);
  color: var(--mark-on-accent);
}

.mail-aviso__dir {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 13px;
  color: color-mix(in srgb, var(--mark-ink) 70%, transparent);
  user-select: all;
}

.mail-aviso__x {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--pill);
  background: transparent;
  color: var(--mark-ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .mail-aviso, .mail-aviso.is-open { transition: none; }
}

/* ---------- 19. Intro de carga ---------- */

/* Overlay de pantalla completa con el monograma en grande. Usa el mismo bloque
   oscuro fijo que el logo (--mark-*), asi que se ve igual en claro y oscuro.
   Secuencia, manejada por main.js con clases en <html>:
     .intro              overlay visible: el contorno se dibuja y lo cruza el brillo
     .intro.intro-listo  cargo todo: el monograma se rellena con sus colores
     .intro.intro-sale   el overlay se desvanece y entra la pagina
   Sin la clase .intro (segunda visita, movimiento reducido, JS caido) el
   overlay no existe. */

.intro-ol { display: none; }

.intro { overflow: hidden; }

.intro .intro-ol {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background:
    radial-gradient(60% 50% at 50% 45%, rgb(226 121 46 / .07), transparent 70%),
    var(--mark-bg);
  transition: opacity .6s var(--ease), visibility 0s linear .6s;
}

.intro-ol__box {
  display: grid;
  justify-items: center;
  gap: 28px;
  width: clamp(200px, 28vw, 340px);
  transition: transform .7s var(--ease);
}

.intro-ol__logo {
  width: 100%;
  height: auto;
  overflow: visible;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 64px;
  animation: intro-halo 2.6s ease-in-out infinite;
}

.intro-ol__logo text {
  fill: transparent;
  stroke-linejoin: round;
}

/* 1. Contorno tenue que se dibuja una vez */
.intro-ol__trazo {
  stroke: rgb(242 237 230 / .32);
  stroke-width: 1;
  stroke-dasharray: 190;
  stroke-dashoffset: 190;
  animation: intro-dibujo 2s cubic-bezier(.65, 0, .35, 1) .1s forwards;
}
.intro-ol__trazo .b { stroke: rgb(226 121 46 / .55); }

/* 2. Brillo naranja: el mismo texto, recortado por la banda que cruza */
.intro-ol__brillo {
  stroke: var(--mark-accent);
  stroke-width: 1.6;
  filter: drop-shadow(0 0 3px rgb(226 121 46 / .9));
}

.intro-ol__banda {
  transform-box: fill-box;
  transform-origin: center;
  animation: intro-barrido 1.7s cubic-bezier(.77, 0, .175, 1) .3s infinite both;
}

/* 3. Relleno final */
.intro-ol__logo .intro-ol__relleno {
  fill: var(--mark-ink);
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.intro-ol__relleno .b { fill: var(--mark-accent); }

.intro-listo .intro-ol__relleno { opacity: 1; }
.intro-listo .intro-ol__trazo,
.intro-listo .intro-ol__brillo {
  opacity: 0;
  transition: opacity .3s;
}

/* Barra de progreso: linea de 1px con la punta encendida */
.intro-ol__barra {
  position: relative;
  width: 88%;
  height: 1px;
  border-radius: 2px;
  background: rgb(242 237 230 / .1);
}

/* La linea mide siempre el ancho completo y se desliza desde la izquierda con
   transform (no con width, que recalcula layout en cada frame). El clip-path
   corta lo que queda afuera a la izquierda sin recortar el brillo vertical. */
.intro-ol__barra { clip-path: inset(-24px -24px -24px 0); }

.intro-ol__barra span {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to right, transparent, rgb(226 121 46 / .45) 40%, var(--mark-accent));
  box-shadow: 0 0 6px rgb(226 121 46 / .5), 0 0 14px rgb(226 121 46 / .25);
  transform: translateX(calc(var(--intro-p, 0%) - 100%));
  transition: transform .25s ease-out;
}

.intro-ol__barra span::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffb27a;
  transform: translateY(-50%);
  box-shadow: 0 0 4px #ffb27a, 0 0 10px rgb(226 121 46 / .7), 0 0 22px rgb(226 121 46 / .4);
}

/* Salida */
.intro-sale .intro-ol {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.intro-sale .intro-ol__box { transform: scale(1.06); }

/* La nav entra desde arriba cuando se va el overlay */
.nav { transition: transform .8s var(--ease), opacity .8s var(--ease); }
.intro:not(.intro-sale) .nav {
  opacity: 0;
  transform: translateY(-100%);
}

/* Nav que se esconde al bajar (main.js). Solo transform: no mueve el layout. */
.nav.nav--oculta { transform: translateY(-100%); }

@media (prefers-reduced-motion: reduce) {
  .nav { transition: none; }
}

/* En el hero, la foto entra un poco despues que el texto */
.hero .reveal + .reveal { transition-delay: .12s; }

@keyframes intro-dibujo {
  to { stroke-dashoffset: 0; }
}

@keyframes intro-barrido {
  from { transform: translateX(-40px) rotate(22deg); }
  to   { transform: translateX(380px) rotate(22deg); }
}

@keyframes intro-halo {
  0%, 100% { filter: drop-shadow(0 0 0 rgb(226 121 46 / 0)); }
  50%      { filter: drop-shadow(0 0 14px rgb(226 121 46 / .28)); }
}

@media (prefers-reduced-motion: reduce) {
  .intro:not(.intro-forzada) .intro-ol { display: none; }
  .intro:not(.intro-forzada) { overflow: auto; }
}