/* Web de Gambito Lab: estilos.
   Dirección A, "Noche berenjena" (marca/estilo-gambito-lab.md).
   Pensado primero para el celular: lo de compu va en los @media (min-width: …). */

:root {
  /* Colores de la marca */
  --fondo: #261B2B;
  --superficie: #2F2433;       /* tarjetas */
  --texto: #ECECE0;            /* nunca #fff */
  --texto-suave: #BABAAF;
  --gris-tinta: #84867A;       /* bordes, íconos apagados y texto de 24 px o más */
  --acento: #A7E357;
  --sobre-acento: #261B2B;     /* texto del botón verde */
  --magenta: #D640D8;          /* solo decorativo (el haz de Contacto), nunca texto */
  --borde: rgb(236 236 224 / .14);

  /* Tipografías */
  --fuente-titulos: "Space Grotesk", Arial, sans-serif;
  --fuente-textos: "Inter", Arial, sans-serif;
  --fuente-etiquetas: "JetBrains Mono", ui-monospace, monospace;

  /* Medidas */
  --ancho-max: 72rem;
  --margen: 1rem;
  --redondeo: 1.25rem;         /* 20 px, como las tarjetas del flyer */
  --alto-encabezado: 4rem;

  color-scheme: dark;
}
@media (min-width: 600px) { :root { --margen: 2rem; } }

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--fondo);          /* se ve si la foto del fondo no carga */
  color: var(--texto);
  font-family: var(--fuente-textos);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Fondo de toda la página: la galaxia (prueba del 23/10/2026), quieta detrás del contenido.
   Va en una capa fija y no con background-attachment: fixed, que en iPhone no anda y en el celu da tirones.
   Alto 100lvh: no salta cuando el celu esconde la barra de direcciones.
   El velo berenjena es más denso en el centro, donde está el núcleo brillante: así el gris cálido
   sigue en 5 a 1 o más sobre la parte más clara (medido con contraste.mjs). */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  height: 100vh;
  height: 100lvh;
  background:
    radial-gradient(ellipse 60% 45% at 50% 50%, rgb(38 27 43 / .75), rgb(38 27 43 / .6)),
    url("../img/fondo-800.jpg") center / cover no-repeat;
  pointer-events: none;
}
@media (min-width: 600px), (min-resolution: 2dppx) {
  body::before {
    background:
      radial-gradient(ellipse 60% 45% at 50% 50%, rgb(38 27 43 / .75), rgb(38 27 43 / .6)),
      url("../img/fondo-1400.jpg") center / cover no-repeat;
  }
}

img, svg { display: block; }

/* Los links del menú no quedan debajo del encabezado fijo */
section[id] { scroll-margin-top: var(--alto-encabezado); }

/* Texto solo para lectores de pantalla (por ejemplo, "por WhatsApp" en el botón) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* "Saltar al contenido": aparece solo al navegar con teclado */
.saltar {
  position: absolute;
  top: .75rem;
  left: .75rem;
  z-index: 20;
  padding: .75rem 1rem;
  border-radius: .75rem;
  background: var(--acento);
  color: var(--sobre-acento);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-200%);
}
.saltar:focus-visible { transform: none; outline: 3px solid var(--texto); outline-offset: 2px; }

/* ---------- Encabezado ---------- */

.encabezado {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgb(38 27 43 / .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
}
.encabezado__interior {
  max-width: var(--ancho-max);
  min-height: var(--alto-encabezado);
  margin-inline: auto;
  padding-inline: var(--margen);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 .75rem;
}
.marca {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-right: auto;
  color: var(--texto);
  text-decoration: none;
  font-family: var(--fuente-titulos);
  font-weight: 700;
  letter-spacing: .06em;
}
.marca:focus-visible { outline: 3px solid var(--acento); outline-offset: 4px; border-radius: 2px; }

/* En el celular: marca · Más info · Menú */
.encabezado__interior > .boton { order: 2; }
.navegacion { order: 3; flex-basis: 100%; }

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
  margin: 0;
  padding: 0 0 .5rem;
  list-style: none;
}
.menu a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--texto-suave);
  text-decoration: none;
  transition: color .2s ease;
}
.menu a:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; border-radius: 2px; }
.menu a:active { color: var(--texto); }
@media (hover: hover) and (pointer: fine) {
  .menu a:hover { color: var(--texto); }
}

/* Celular con JS: botón "Menú" y los links en un panel que se despliega.
   Sin JS, los links quedan en una fila debajo de la marca (lo de arriba). */
.js .navegacion { flex-basis: auto; }
.js .menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  padding: .5rem var(--margen) 1.25rem;
  background: var(--fondo);
  border-bottom: 1px solid var(--borde);
}
.js .menu-abierto .menu { display: flex; }
.js .menu a {
  width: 100%;
  min-height: 3.25rem;
  border-bottom: 1px solid var(--borde);
  color: var(--texto);
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: 1.375rem;
}

.boton-menu {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  min-height: 44px;
  margin-right: -.5rem;
  padding: 0 .5rem;
  border: 0;
  border-radius: .5rem;
  background: none;
  color: var(--texto);
  font: 500 .9375rem/1 var(--fuente-textos);
  cursor: pointer;
}
.boton-menu[hidden] { display: none; }
.boton-menu svg { width: 1.375rem; height: 1.375rem; }
.boton-menu__cerrar,
.menu-abierto .boton-menu__abrir { display: none; }
.menu-abierto .boton-menu__cerrar { display: block; }
.boton-menu:active { background: rgb(236 236 224 / .08); }
.boton-menu:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }

/* Compu: el menú va en la misma línea y el botón "Menú" no hace falta */
@media (min-width: 900px) {
  .encabezado__interior { gap: 2rem; }
  .encabezado__interior > .boton,
  .navegacion, .js .navegacion { order: 0; flex-basis: auto; }
  .boton-menu { display: none; }
  .menu, .js .menu {
    display: flex;
    position: static;
    flex-direction: row;
    gap: 2rem;
    padding: 0;
    background: none;
    border: 0;
  }
  .menu a, .js .menu a {
    width: auto;
    min-height: 44px;
    border: 0;
    color: var(--texto-suave);
    font: 400 .9375rem/1.6 var(--fuente-textos);
  }
  @media (hover: hover) and (pointer: fine) {
    .menu a:hover, .js .menu a:hover { color: var(--texto); }
  }
}

/* ---------- Botones ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 3rem;
  padding: .75rem 1.375rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 500 1rem/1.2 var(--fuente-textos);
  text-decoration: none;
  transition: transform .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.boton svg { width: 1.25rem; height: 1.25rem; flex: none; }
.boton--chico { min-height: 2.75rem; padding: .5rem 1.125rem; font-size: .9375rem; }
.boton--principal { background: var(--acento); color: var(--sobre-acento); }
.boton--secundario { color: var(--texto); border-color: var(--gris-tinta); }

/* Solo en compu con mouse: en el celular el "hover" queda pegado después de tocar */
@media (hover: hover) and (pointer: fine) {
  .boton--principal:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--acento) 70%, transparent);
  }
  .boton--secundario:hover {
    transform: translateY(-2px);
    border-color: var(--texto);
    background-color: rgb(236 236 224 / .05);
  }
}
.boton:active { transform: scale(.98); }
.boton:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }

/* ---------- Portada ---------- */

/* Ocupa la primera pantalla. En el celular: el cielo arriba y el texto abajo */
.portada {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.portada__interior {
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--alto-encabezado));
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--margen);
}
.portada__texto {
  position: relative;
  z-index: 1;
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

/* Firma: el emblema, como en el flyer.
   Decisión de David del 21/10/2026: 50 % más grande en celu y tablet, el doble en compu. */
.firma { display: flex; align-items: center; gap: 1rem; }
.firma__emblema {
  width: clamp(5.25rem, 3.75rem + 4.5vw, 9rem);
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
}
@media (min-width: 900px) {
  .firma__emblema { width: clamp(7rem, 5rem + 6vw, 12rem); }
}
.firma__nombre {
  margin: 0;
  font-family: var(--fuente-titulos);
  font-weight: 700;
  font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: .06em;
}
.firma__lado-b {
  margin: .25rem 0 0;
  color: var(--texto-suave);
  font-size: clamp(.9375rem, .9rem + .3vw, 1.125rem);
  line-height: 1.3;
}

.etiqueta {
  margin: 0 0 1.25rem;
  color: var(--acento);
  font-family: var(--fuente-etiquetas);
  font-weight: 500;
  font-size: clamp(.75rem, .7rem + .25vw, .875rem);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.portada .etiqueta { margin-top: clamp(2rem, 5vw, 4.5rem); }

.portada__titulo {
  margin: 0;
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: clamp(2.4rem, 1.4rem + 4.6vw, 5.5rem);
  line-height: 1;
  letter-spacing: -.025em;
}
.remate { color: var(--acento); }

.portada__bajada {
  max-width: 44ch;
  margin: 1.5rem 0 0;
  text-wrap: pretty;
  color: var(--texto-suave);
  font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem);
  line-height: 1.45;
}

.botones {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: clamp(2rem, 4vw, 2.75rem);
}
.botones .boton { flex: 1 1 auto; }
@media (min-width: 600px) { .botones .boton { flex: 0 0 auto; } }

/* ---------- El cielo: los meteoritos ---------- */

/* En el celular recorta los meteoritos: así nada pasa por el texto */
.cielo {
  position: relative;
  flex: 1 0 11rem;
  margin-inline: calc(var(--margen) * -1);   /* llega a los bordes de la pantalla */
  overflow: hidden;
  pointer-events: none;
}

/* Compu: el texto a la izquierda y el cielo a la derecha, hasta el borde de la pantalla */
@media (min-width: 900px) {
  .portada__interior {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: clamp(1.5rem, 3vw, 3rem);
    align-items: center;
  }
  .portada__texto {
    grid-column: 1;
    grid-row: 1;
    padding-block: clamp(3rem, min(6vw, 8vh), 6rem);
  }
  /* En notebooks bajas (768 o 720 px de alto) el titular, la bajada y el aire de arriba también
     dependen del alto, así los botones se ven sin bajar. Decisión de David del 21/10/2026 */
  .portada__titulo { font-size: clamp(2.4rem, min(1.4rem + 4.6vw, 9vh), 5.5rem); }
  .portada__bajada { font-size: clamp(1.125rem, min(1rem + .6vw, 2.9vh), 1.5rem); }
  .cielo {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    margin-inline: 0 calc(min(0px, (var(--ancho-max) - 100vw) / 2) - var(--margen));
    /* Ya no recorta: así los meteoritos se ubican en toda la portada (decisión de David del 21/10/2026) */
    position: static;
    overflow: visible;
  }
}

/* Meteoritos: adaptado de "Meteors" de Magic UI (MIT, © Magic UI) — https://magicui.design
   Pasado a CSS puro: sin React ni posiciones al azar. Cada meteorito cruza en
   unos 3 segundos y después descansa.
   En el celular y la tablet llenan el cielo. En compu, toda la portada, siempre detrás del texto. */
.meteoros {
  display: none;
  position: absolute;
  inset: 0;
  /* En el celular se apagan antes de llegar al texto, que está abajo */
  mask-image: linear-gradient(to bottom, #000 40%, transparent 90%);
}
@media (min-width: 900px) {
  /* En compu pasan más tenues (35 %) por la columna del texto, para que el titular se lea limpio.
     El texto empieza en --borde-texto y termina entre el 58 % y el 67 % del ancho. */
  .meteoros {
    --borde-texto: calc(max(0px, (100% - var(--ancho-max)) / 2) + var(--margen));
    mask-image: linear-gradient(to right,
      #000 calc(var(--borde-texto) - 4rem), rgb(0 0 0 / .35) var(--borde-texto),
      rgb(0 0 0 / .35) 58%, #000 72%);
  }
  .meteoro { top: var(--y-compu); left: var(--x-compu); }
}
.meteoro {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--texto);
  box-shadow: 0 0 6px 1px rgb(236 236 224 / .35);
  opacity: 0;
}
/* La cola: una línea que se desvanece detrás de la cabeza (más corta en el celular) */
.meteoro::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 3.5rem;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(to right, rgb(236 236 224 / .55), transparent);
}
@media (min-width: 900px) {
  .meteoro::before { width: 5rem; }
}
@media (max-width: 899px) {
  .meteoro:nth-child(n + 6) { display: none; }
}

/* ---------- Movimiento: solo si no se pidió "reducir movimiento" ---------- */

@keyframes meteoro {
  0%   { transform: rotate(215deg) translateX(0);      opacity: 0; }
  3%   { opacity: 1; }
  24%  { opacity: 1; }
  30%  { transform: rotate(215deg) translateX(-36rem); opacity: 0; }
  100% { transform: rotate(215deg) translateX(-36rem); opacity: 0; }
}
@keyframes subir {
  from { opacity: 0; transform: translateY(1rem); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Meteoritos: todos tardan 12 s y arrancan 2 s después de abrir la página */
  .meteoros { display: block; }
  .meteoro { animation: meteoro 12s linear calc(2s + var(--retraso)) infinite; }
  @media (min-width: 900px) {
    .meteoro { animation-delay: calc(2s + var(--retraso-compu)); }
  }

  /* Entrada: el texto sube de a una pieza.
     Si el JS no carga, no hay clase "animar" y todo se ve quieto desde el principio. */
  .animar .portada__texto > * { animation: subir .8s cubic-bezier(.2, .7, .2, 1) .2s both; }
  .animar .portada__texto > :nth-child(2) { animation-delay: .3s; }
  .animar .portada__texto > :nth-child(3) { animation-delay: .4s; }
  .animar .portada__texto > :nth-child(4) { animation-delay: .5s; }
  .animar .portada__texto > :nth-child(5) { animation-delay: .6s; }

  /* Ahorro de batería: main.js le pone esta clase a la portada cuando sale de pantalla */
  .portada.en-pausa *,
  .portada.en-pausa *::before { animation-play-state: paused; }
}

/* ---------- Secciones ---------- */

/* Una línea fina separa cada sección de la anterior */
.seccion { border-top: 1px solid var(--borde); }
.seccion__interior {
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding: clamp(4rem, 10vw, 8rem) var(--margen);
}
.seccion__titulo {
  margin: 0;
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: clamp(2rem, 1.3rem + 3vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -.025em;
}
.seccion__bajada {
  max-width: 44ch;
  margin: 1.25rem 0 0;
  text-wrap: pretty;
  color: var(--texto-suave);
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem);
}

/* Links dentro del texto: verdes y subrayados, como pide la guía */
.contacto__datos a,
.pie a {
  color: var(--acento);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  border-radius: 2px;
  transition: text-decoration-color .2s ease;
}
.contacto__datos a:focus-visible,
.pie a:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .contacto__datos a:hover,
  .pie a:hover { text-decoration-color: transparent; }
}

/* ---------- Servicios: 4 tarjetas con foto ---------- */

.servicios {
  display: grid;
  gap: 1rem;
  margin: clamp(2.5rem, 6vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 600px) { .servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* La tarjeta, como las del flyer: fondo de tarjeta, borde fino y esquinas de 20 px */
.servicio {
  border: 1px solid var(--borde);
  border-radius: var(--redondeo);
  background: var(--superficie);
}
/* El marco recorta la foto con las esquinas de arriba redondeadas (y la deja moverse adentro, Paso 4.3) */
.servicio__marco {
  overflow: hidden;
  border-radius: calc(var(--redondeo) - 1px) calc(var(--redondeo) - 1px) 0 0;
}
/* Las fotos son verticales: se recortan en 4:3 y cada una se centra en su pantalla */
.servicio__foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--fondo);         /* se ve mientras carga la foto */
}
.servicio__foto--webs { object-position: 50% 30%; }
.servicio__foto--sistemas { object-position: 50% 25%; }
.servicio__foto--automatizaciones { object-position: 50% 25%; }
.servicio__foto--micro-apps { object-position: 50% 70%; }

.servicio__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1rem;
  padding: 1.5rem 1.5rem 1.75rem;
}
.servicio__titulo {
  grid-row: 1;
  margin: 0;
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: clamp(1.375rem, 1.2rem + .6vw, 1.625rem);
  line-height: 1.2;
}
/* El número va arriba a la derecha, en verde y en mono, como en el flyer */
.servicio__numero {
  grid-row: 1;
  grid-column: 2;
  padding-top: .35rem;
  color: var(--acento);
  font-family: var(--fuente-etiquetas);
  font-weight: 500;
  font-size: .875rem;
}
.servicio__linea {
  grid-column: 1 / -1;
  max-width: 44ch;
  margin: .625rem 0 0;
  text-wrap: pretty;
  color: var(--texto-suave);
}

/* El cierre: una pregunta y el botón de WhatsApp. En compu, en una sola fila */
.servicios__cierre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: clamp(2rem, 5vw, 3rem);
}
.servicios__cierre p {
  margin: 0;
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem);
}

/* ---------- Cómo trabajamos: 5 pasos en una línea de tiempo ---------- */

.pasos {
  margin: clamp(2.5rem, 6vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
}
/* Cada paso: el número en un círculo a la izquierda, y el título y la línea a la derecha */
.paso {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: 1.25rem;
  padding-bottom: 2.25rem;
}
.paso:last-child { padding-bottom: 0; }
/* La línea que une un círculo con el siguiente */
.paso:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 3.25rem;
  bottom: .5rem;
  left: calc(1.375rem - .5px);
  width: 1px;
  background: var(--borde);
}
.paso__numero {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--gris-tinta);
  border-radius: 50%;
  color: var(--acento);
  font-family: var(--fuente-etiquetas);
  font-weight: 500;
  font-size: .875rem;
}
.paso__titulo {
  margin: .5rem 0 0;
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  line-height: 1.25;
}
.paso__linea {
  grid-column: 2;
  max-width: 52ch;
  margin: .5rem 0 0;
  text-wrap: pretty;
  color: var(--texto-suave);
}
.paso__linea + .paso__linea { margin-top: .25rem; }

/* Compu: el título a la izquierda, que queda fijo mientras se leen los pasos */
@media (min-width: 900px) {
  .pasos-y-titulo {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
  }
  .pasos-y-titulo__encabezado {
    position: sticky;
    top: calc(var(--alto-encabezado) + 3rem);
  }
  .pasos { margin-top: 0; }
}

/* Fotos que solo se ven en compu (desde 900 px). En el celular ni se descargan: el <source> del HTML
   solo vale desde 900 px y, debajo, el <img> es un punto transparente que además queda oculto */
.solo-compu { display: none; }
@media (min-width: 900px) {
  .solo-compu { display: block; }
  .solo-compu img { display: block; width: 100%; height: auto; }

  /* Cómo trabajamos: la foto, debajo del título y fija con él. Mismo borde y esquinas que las tarjetas */
  .pasos-y-titulo__foto {
    margin-top: clamp(2rem, 4vw, 3rem);
    overflow: hidden;
    border: 1px solid var(--borde);
    border-radius: var(--redondeo);
    background: var(--superficie);   /* se ve mientras carga la foto */
  }
}

/* ---------- Sobre mí: foto y texto en primera persona ---------- */

/* El marco recorta la foto (para la máscara y el parallax del Paso 4.3) */
.sobre-mi__marco {
  max-width: 28rem;
  margin-top: clamp(2rem, 5vw, 3rem);
  overflow: hidden;
  border-radius: var(--redondeo);
  background: var(--superficie);   /* se ve mientras carga la foto */
}
.sobre-mi__foto {
  display: block;
  width: 100%;
  height: auto;
}
.sobre-mi__texto {
  max-width: 62ch;
  margin-top: clamp(2rem, 5vw, 3rem);
  color: var(--texto-suave);
}
.sobre-mi__texto p { margin: 0 0 1.125em; text-wrap: pretty; }
.sobre-mi__texto p:last-child { margin-bottom: 0; }
/* La idea central, en hueso. El verde queda para el titular */
.sobre-mi__texto strong { color: var(--texto); font-weight: 500; }

/* Compu: la foto a la izquierda y, a la derecha, el título y el texto */
@media (min-width: 900px) {
  .sobre-mi {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "foto encabezado" "foto texto";
    grid-template-rows: auto 1fr;
    column-gap: clamp(2rem, 5vw, 5rem);
  }
  .sobre-mi__encabezado { grid-area: encabezado; }
  .sobre-mi__marco { grid-area: foto; align-self: start; max-width: none; margin-top: 0; }
  .sobre-mi__texto { grid-area: texto; }
}

/* ---------- Contacto: un panel con los botones y los datos ---------- */

.contacto {
  padding: clamp(2rem, 6vw, 4.5rem) clamp(1.25rem, 5vw, 4.5rem);
  border: 1px solid var(--borde);
  border-radius: var(--redondeo);
  background: var(--superficie);
}
.contacto__datos {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .75rem;
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  color: var(--texto-suave);
  font-size: .9375rem;
}
/* En el celular, cada dato en su renglón: el punto del medio sobra */
@media (max-width: 599px) {
  .contacto__datos { flex-direction: column; }
  .contacto__datos > [aria-hidden] { display: none; }
}

/* Compu: el texto a la izquierda y la lamparita a la derecha (20rem, así el título sigue en 2 renglones).
   La foto se recorta en cuadrado, centrada en la lamparita. Su fondo negro se funde con el panel:
   "lighten" deja ver solo lo que es más claro que el panel (la luz roja) y la máscara apaga los bordes */
@media (min-width: 900px) {
  .contacto {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    column-gap: clamp(1.5rem, 3vw, 3rem);
    align-items: center;
  }
  .contacto__foto img {
    aspect-ratio: 1;
    object-fit: cover;
    object-position: 42% 50%;
    mix-blend-mode: lighten;
    -webkit-mask-image: radial-gradient(closest-side, #000 85%, transparent);
    mask-image: radial-gradient(closest-side, #000 85%, transparent);
  }
}

/* ---------- Pie ---------- */

.pie { border-top: 1px solid var(--borde); }
.pie__interior {
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 4rem) var(--margen) 2rem;
  display: grid;
  gap: 1.5rem;
}
.pie p { margin: 0; }
.pie__diferencial { font-size: 1.0625rem; line-height: 1.5; }
.pie__derecha { display: grid; gap: .25rem; color: var(--texto-suave); font-size: .9375rem; }
.pie__dominio {
  color: var(--texto);
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: 1.25rem;
}
.pie__final {
  padding-top: 1.5rem;
  border-top: 1px solid var(--borde);
  color: var(--texto-suave);
  font-size: .875rem;
}

/* Desde la tablet: el diferencial a la izquierda y el dominio a la derecha, como el flyer */
@media (min-width: 600px) {
  .pie__interior { grid-template-columns: 1fr auto; align-items: end; }
  .pie__derecha { justify-items: end; text-align: right; }
  .pie__final { grid-column: 1 / -1; }
}

/* ---------- Efectos premium (Paso 4.3) ----------
   Los mueve main.js con GSAP y Lenis. Acá no se esconde nada: si el JS no carga,
   o si se pidió "reducir movimiento", todo se ve quieto y completo. */

/* Scroll suave en compu: reglas de lenis.css (MIT, © darkroom.engineering), copiadas para no sumar otro archivo.
   Con Lenis prendido, el scroll suave del CSS se apaga: los dos juntos se pelean. */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }

/* Barra de progreso: una línea verde de 2 px en el borde de abajo del encabezado */
.progreso {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--acento);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}
.animar .progreso { display: block; }

/* Títulos por líneas: cada línea sube desde atrás de una máscara.
   La máscara deja aire abajo para que no se corten la g, la j ni la p. */
.linea-mask { padding-bottom: .12em; margin-bottom: -.12em; }

/* Servicios: tarjetas que se inclinan y con luz que sigue al mouse (solo en compu).
   main.js guarda dónde está el mouse en --x y --y, y gira la tarjeta. */
.servicio { position: relative; isolation: isolate; }
@media (hover: hover) and (pointer: fine) {
  /* Borde que se ilumina donde está el mouse: va justo encima del borde de la tarjeta, y 1 px más adentro */
  .servicio::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 2;
    border-radius: inherit;
    padding: 2px;
    background: radial-gradient(260px circle at var(--x, 50%) var(--y, 50%), var(--acento), transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
  }
  /* Resplandor suave detrás del texto de la tarjeta */
  .servicio::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(360px circle at var(--x, 50%) var(--y, 50%), color-mix(in srgb, var(--acento) 12%, transparent), transparent 70%);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
  }
  .servicio:hover::before,
  .servicio:hover::after { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .servicio::before, .servicio::after { display: none; }
}

/* Cómo trabajamos: la jugada se dibuja.
   Una línea verde une el centro del primer círculo con el del último y crece al bajar (--avance, de 0 a 1).
   En la punta va una pieza que brilla. main.js mide --avance-arriba y --avance-alto y le pone "con-avance". */
.pasos { position: relative; --avance: 0; }
.paso__numero {
  position: relative;
  z-index: 2;                       /* la línea pasa por detrás de los círculos */
  background: var(--fondo);
  transition: border-color .4s ease, background-color .4s ease, box-shadow .4s ease;
}
.pasos.con-avance::before,
.pasos.con-avance::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: var(--avance-arriba, 0);
  pointer-events: none;
}
.pasos.con-avance::before {
  left: calc(1.375rem - 1px);
  width: 2px;
  height: var(--avance-alto, 0);
  background: var(--acento);
  transform: scaleY(var(--avance));
  transform-origin: top;
}
.pasos.con-avance::after {
  left: calc(1.375rem - 4px);
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--acento);
  box-shadow: 0 0 12px 3px color-mix(in srgb, var(--acento) 55%, transparent);
  transform: translateY(calc(var(--avance-alto, 0px) * var(--avance)));
}
/* El círculo encendido: borde verde, fondo apenas verde (verde sobre ese fondo: 7,8 a 1) y un halo */
.paso__numero.encendido {
  border-color: var(--acento);
  background-color: color-mix(in srgb, var(--acento) 14%, var(--fondo));
  box-shadow:
    0 0 0 6px color-mix(in srgb, var(--acento) 10%, transparent),
    0 0 28px color-mix(in srgb, var(--acento) 40%, transparent);
}

/* ---------- Efectos premium, tanda 2: Sobre mí, Contacto y la portada al bajar ---------- */

/* Sobre mí: la idea central arranca en este gris y main.js la enciende palabra por palabra hasta el hueso.
   Es la mitad entre el gris tinta y el gris cálido: 6,2 a 1 sobre berenjena, se lee aunque quede a medias */
:root { --frase-apagada: #9FA095; }

/* Contacto: un haz de luz recorre el borde del panel, de verde a magenta.
   Adaptado de "Border Beam" de Magic UI (MIT, © Magic UI) — https://magicui.design
   Pasado a CSS puro: un cuadrado con degradé viaja por el borde (offset-path) y una máscara deja ver solo el borde.
   Si el navegador no sabe hacer el recorrido o se pidió "reducir movimiento", no se ve. */
.contacto { position: relative; }
.haz { display: none; }
@supports (offset-path: rect(0 auto auto 0)) {
  @media (prefers-reduced-motion: no-preference) {
    .animar .haz {
      display: block;
      position: absolute;
      inset: -1px;                     /* justo encima del borde del panel */
      padding: 2px;                    /* el grosor de la luz */
      border-radius: inherit;
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
      pointer-events: none;
    }
    .animar .haz::after {
      content: "";
      position: absolute;
      width: 12rem;
      aspect-ratio: 1;
      background: linear-gradient(to left, var(--acento), var(--magenta), transparent);
      offset-path: rect(0 auto auto 0 round 12rem);
      offset-anchor: 90% 50%;
      animation: haz 9s linear infinite;
    }
  }
}
@keyframes haz {
  to { offset-distance: 100%; }
}

/* Contacto: el botón de WhatsApp tiene un destello color hueso cada 4 s (pasa en 1 s y descansa 3).
   Va entre el fondo verde y el texto: el texto berenjena se sigue leyendo igual */
@media (prefers-reduced-motion: no-preference) {
  .animar .contacto .boton--principal {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  .animar .contacto .boton--principal::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 30%, rgb(236 236 224 / .65) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: destello 4s ease-in-out 1s infinite;
    pointer-events: none;
  }

  /* Ahorro de batería: main.js le pone "en-pausa" al panel cuando sale de pantalla */
  .contacto.en-pausa .haz::after,
  .contacto.en-pausa .boton--principal::after { animation-play-state: paused; }
}
@keyframes destello {
  0%        { transform: translateX(-100%); }
  25%, 100% { transform: translateX(100%); }
}