/* =============================================================
   Aresan - styles.css
   Un solo sistema de tokens. Sin capas sobreescribiendo capas.

   Sistema de forma (documentado y respetado en todo el sitio):
     - Superficies y medios .... 16px
     - Controles (botones, inputs) 10px
     - Nada es pill, nada es 0
   Acento unico: verde esmeralda de marca. No hay segundo acento.
   Tema: oscuro bloqueado. Ninguna seccion se invierte.
   ============================================================= */

/* =============================================================
   1. TOKENS
   ============================================================= */
:root {
  /* Neutros: escala carbon calido, coherente de punta a punta */
  --bg:        #171614;
  --surface:   #1E1C19;
  --surface-2: #26231F;
  --surface-3: #302C27;

  --ink:       #F5F2ED;
  --ink-2:     #C6BFB5;
  /* Aclarado hasta pasar AA (4.5) sobre la superficie mas clara,
     que es --surface-2, el fondo de las celdas del bento. */
  --ink-3:     #A79F93;

  /* Acento de marca preservado del sitio en produccion */
  --accent:      #63C48A;
  --accent-soft: #7FD9A2;
  --accent-ink:  #0C1A12;
  --accent-wash: rgba(99,196,138,.10);

  --line:   rgba(245,242,237,.09);
  --line-2: rgba(245,242,237,.16);

  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --sans:    "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Forma */
  --r-surface: 16px;
  --r-control: 10px;

  /* Ritmo */
  --nav-h:  68px;
  --gutter: clamp(1.15rem, 4vw, 3.5rem);
  --maxw:   1280px;
  --section-y: clamp(4.5rem, 11vw, 9rem);

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

/* =============================================================
   2. RESET Y BASE
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sans);
  font-size: clamp(15px, .35vw + 14px, 16.5px);
  line-height: 1.62;
  color: var(--ink-2);
  background: var(--bg);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
[hidden] { display: none !important; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

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

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

.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;
}

.skip-link {
  position: absolute; top: -100px; left: 12px; z-index: 200;
  padding: .7rem 1.1rem; background: var(--accent); color: var(--accent-ink);
  border-radius: var(--r-control); font-weight: 600;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: 12px; }

/* =============================================================
   3. UTILIDADES
   ============================================================= */
.wrap {
  width: 100%; max-width: var(--maxw);
  margin-inline: auto; padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); position: relative; }

h1, h2, h3 {
  font-family: var(--display);
  color: var(--ink);
  line-height: 1.06;
  letter-spacing: -.025em;
  font-weight: 600;
  text-wrap: balance;
}

h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
h3 { font-size: clamp(1.1rem, 1.6vw, 1.32rem); line-height: 1.24; letter-spacing: -.015em; }

p { text-wrap: pretty; }
.lede { font-size: clamp(1.02rem, 1.4vw, 1.18rem); color: var(--ink-2); max-width: 62ch; }

/* Revelado al hacer scroll. Sin JS queda visible (ver <noscript>). */
.reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* =============================================================
   4. BOTONES
   Un solo estilo por intencion. Etiqueta unica por intencion.
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; white-space: nowrap;
  padding: .78rem 1.35rem;
  border-radius: var(--r-control);
  font-weight: 600; font-size: .93rem; letter-spacing: -.005em;
  border: 1px solid transparent;
  transition: transform .18s var(--ease), background .18s var(--ease),
              border-color .18s var(--ease), color .18s var(--ease);
}
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-accent:hover { background: var(--accent-soft); transform: translateY(-1px); }
.btn-accent:active { transform: scale(.985); }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover, .btn:active { transform: none; }
}

/* =============================================================
   5. NAV
   Una sola linea en escritorio. Altura 68px.
   ============================================================= */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(23,22,20,.86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}
@media (prefers-reduced-transparency: reduce) {
  .nav.is-stuck { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.nav-inner {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; gap: 1.5rem;
}

.brand { display: inline-flex; align-items: center; gap: .6rem; margin-right: auto; }
.brand-mark { width: 26px; height: 26px; color: var(--accent); flex: none; }
.brand-mark svg { width: 100%; height: 100%; }
.brand-text b {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: 1.02rem; letter-spacing: .01em; color: var(--ink); line-height: 1;
}
.brand-text small {
  display: block; font-size: .64rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3); margin-top: 3px;
}

.nav-links { display: none; gap: 2.1rem; }
.nav-links a {
  font-size: .73rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2); position: relative;
  transition: color .18s var(--ease);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -5px;
  height: 1.5px; background: var(--accent);
  transition: right .28s var(--ease-out);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { right: 0; }

.nav-cta {
  display: none;
  padding: .66rem 1.25rem;
  font-size: .71rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
}

.nav-toggle {
  display: inline-grid; place-items: center; gap: 5px;
  width: 42px; height: 42px; margin-right: -8px;
  border-radius: var(--r-control);
}
.nav-toggle span {
  display: block; width: 19px; height: 1.6px; background: var(--ink);
  transition: transform .28s var(--ease), opacity .2s linear;
}
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.3px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child  { transform: translateY(-3.3px) rotate(-45deg); }

.nav-mobile {
  position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 99;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 1rem var(--gutter) 1.6rem;
  display: grid; gap: .15rem;
}
.nav-mobile a {
  padding: .82rem .2rem; font-size: 1.06rem; color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.nav-mobile a:last-of-type { border-bottom: 0; }
.nav-mobile .nav-mobile-cta {
  margin-top: .9rem; border-bottom: 0;
  background: var(--accent); color: var(--accent-ink);
  border-radius: var(--r-control); text-align: center;
  font-weight: 600; padding: .85rem;
}

/* Tres columnas para que los enlaces queden centrados de verdad
   respecto a la ventana, no respecto al hueco que sobra. */
@media (min-width: 900px) {
  .nav-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1.5rem;
  }
  /* Enlaces a la izquierda, logo al centro, acción a la derecha.
     El grid-row explícito es obligatorio: sin él, la colocación
     automática empuja a una segunda fila al asignar columnas
     en desorden respecto al HTML. */
  .nav-links { display: flex; grid-area: 1 / 1; justify-self: start; }
  .brand     { margin-right: 0; grid-area: 1 / 2; justify-self: center; }
  .nav-cta   { display: inline-flex; grid-area: 1 / 3; justify-self: end; }
  .nav-toggle { display: none; }
  .nav-mobile { display: none !important; }
}

/* =============================================================
   6. HERO - marca gigante con la laptop encima
   El nombre ocupa el ancho completo y la laptop se le monta
   delante. Nada de foto de fondo: el color solido deja que la
   pieza central sea la unica que pide atencion.
   ============================================================= */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}

/* Halo verde detras de la laptop: da profundidad sin meter otra
   imagen y ata la portada al acento de marca. */
.hero-glow {
  position: absolute; left: 50%; top: 52%;
  width: min(120vw, 1100px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(99,196,138,.15), transparent 62%);
  pointer-events: none;
}

.hero-stage {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  padding: calc(var(--nav-h) + 1.5rem) var(--gutter) 0;
  min-height: 0;
}

/* Marca a sangre. Se estrecha con el eje wdth para que quepan las
   seis letras sin dejar los margenes ahogados. */
.hero-word {
  grid-area: 1 / 1;
  align-self: center;
  justify-self: center;
  font-family: var(--display);
  font-variation-settings: "opsz" 96, "wdth" 84, "wght" 800;
  font-size: min(32vw, 34rem);
  line-height: .8;
  letter-spacing: -.045em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  user-select: none;
  transform: translateY(-14%);
}

/* --------------------- LAPTOP DIBUJADA --------------------- */
.laptop {
  grid-area: 1 / 1;
  align-self: center;
  justify-self: center;
  position: relative;
  width: min(72vw, 500px);
  transform: translateY(16%);
}

.laptop-lid {
  position: relative;
  padding: 9px 9px 11px;
  border-radius: 13px 13px 5px 5px;
  background: linear-gradient(162deg, #46423C 0%, #2C2925 42%, #1F1D1A 100%);
  box-shadow:
    0 0 0 1px rgba(245,242,237,.09) inset,
    0 36px 70px -28px rgba(0,0,0,.95);
}
.laptop-cam {
  position: absolute; top: 4px; left: 50%;
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(245,242,237,.22);
  transform: translateX(-50%);
}
.laptop-screen {
  aspect-ratio: 16 / 10.2;
  border-radius: 4px;
  overflow: hidden;
  background: #100F0E;
  box-shadow: 0 0 0 1px rgba(0,0,0,.6) inset;
}

/* La base se ve mas ancha que la tapa, como en una portatil real */
.laptop-base {
  position: relative;
  width: 113%; margin-left: -6.5%;
  height: 13px;
  border-radius: 0 0 11px 11px;
  background: linear-gradient(180deg, #4B463F 0%, #36322D 38%, #211F1C 100%);
  box-shadow: 0 14px 26px -12px rgba(0,0,0,.9);
}
.laptop-notch {
  position: absolute; left: 50%; top: 0;
  width: 13%; height: 4px;
  border-radius: 0 0 5px 5px;
  background: rgba(0,0,0,.45);
  transform: translateX(-50%);
}
.laptop-shadow {
  position: absolute; left: 50%; bottom: -34px;
  width: 78%; height: 34px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0,0,0,.6), transparent 70%);
  filter: blur(9px);
  pointer-events: none;
}

/* ------------- Mini sitio dentro de la pantalla ------------- */
.mini {
  height: 100%;
  padding: 5.5% 6% 6%;
  display: flex; flex-direction: column; gap: 4.5%;
  background:
    radial-gradient(90% 70% at 78% 8%, rgba(99,196,138,.16), transparent 62%),
    linear-gradient(170deg, #1B1917, #131211);
}
.mini-nav { display: flex; align-items: center; gap: 4%; }
.mini-nav b { width: 13%; height: 6px; border-radius: 2px; background: var(--ink); }
.mini-nav i { width: 7%; height: 4px; border-radius: 2px; background: rgba(245,242,237,.3); }
.mini-nav u { margin-left: auto; width: 17%; height: 11px; border-radius: 3px; background: var(--accent); }

.mini-hero { display: flex; flex-direction: column; gap: 5%; }
.mini-hero em {
  display: block; height: 13px; border-radius: 3px;
  background: rgba(245,242,237,.86);
}
.mini-hero em.w60 { width: 58%; background: rgba(245,242,237,.5); }
.mini-btn {
  display: block; width: 26%; height: 12px;
  border-radius: 3px; background: var(--accent); margin-top: 2%;
}

.mini-row { display: flex; gap: 4%; flex: 1; min-height: 0; margin-top: 1%; }
.mini-row div {
  flex: 1; border-radius: 4px;
  background: rgba(245,242,237,.07);
  box-shadow: 0 0 0 1px rgba(245,242,237,.06) inset;
}

/* --------------------- FILA INFERIOR ----------------------- */
.hero-bottom {
  position: relative; z-index: 3;
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding: 0 var(--gutter) clamp(1.5rem, 4vh, 2.6rem);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
}

.hero-down {
  display: grid; place-items: center;
  width: 46px; height: 46px; flex: none;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  color: var(--ink); font-size: 1.05rem;
  transition: border-color .2s var(--ease), color .2s var(--ease),
              background .2s var(--ease);
}
.hero-down:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-wash); }

/* El <h1> real. Discreto a proposito: la jerarquia visual ya la
   lleva la marca, pero esta es la frase que importa en buscadores. */
.hero-claim {
  justify-self: center; text-align: center;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(.95rem, 1.5vw, 1.18rem);
  letter-spacing: -.015em;
  color: var(--ink-2);
  margin: 0;
}
.hero-claim .dot { color: var(--accent); }

.hero-cta {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .82rem 1.4rem;
  border-radius: var(--r-control);
  background: var(--ink); color: var(--bg);
  font-weight: 600; font-size: .9rem; white-space: nowrap;
  transition: transform .18s var(--ease), background .18s var(--ease);
}
.hero-cta:hover { background: #FFFFFF; transform: translateY(-1px); }
.hero-cta .arrow { transition: transform .25s var(--ease-out); }
.hero-cta:hover .arrow { transform: translateX(3px); }

/* ENTRADA — el estado en reposo es VISIBLE.
   La animación solo se añade cuando el JS pone .anima en <html>, y
   se retira sola a los 2.5 s. Motivo: con `animation-fill-mode: both`
   y `from { opacity: 0 }`, cualquier navegador que congele las
   animaciones (pestaña restaurada, ahorro de batería, motores de
   captura) deja la portada en blanco para siempre. Así el peor caso
   es quedarse sin animación, nunca sin contenido. */
@keyframes hero-in {
  from { opacity: 0; transform: translateY(24px); }
}
@keyframes hero-word-in {
  from { opacity: 0; transform: translateY(-14%) scale(.96); }
}
@keyframes hero-laptop-in {
  from { opacity: 0; transform: translateY(24%); }
}
html.anima .hero-word       { animation: hero-word-in .9s var(--ease-out) backwards; }
html.anima .laptop          { animation: hero-laptop-in 1s .12s var(--ease-out) backwards; }
html.anima .hero-bottom > * { animation: hero-in .8s .34s var(--ease-out) backwards; }

@media (prefers-reduced-motion: reduce) {
  html.anima .hero-word,
  html.anima .laptop,
  html.anima .hero-bottom > * { animation: none; }
}

/* En móvil NO se superponen: con ese ancho la laptop tapaba la marca
   entera y no se leía nada. Se apilan, casi tocándose, que conserva
   la idea sin sacrificar la legibilidad. La fila inferior también
   pasa a columna. */
@media (max-width: 720px) {
  .hero-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
  }
  .hero-word { transform: none; margin-bottom: -1.5%; }
  .laptop    { width: 76vw; transform: none; }

  .hero-bottom {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 1.1rem;
    text-align: center;
  }
  .hero-claim { order: 1; }
  .hero-cta   { order: 2; }
  .hero-down  { order: 3; }
}

/* =============================================================
   7. NOSOTROS - familia de layout: editorial apilado
   Declaracion grande arriba, cuerpo debajo. Sin split-header.
   ============================================================= */
.about { background: var(--bg); }

.about-head { max-width: 26ch; }
.about-body {
  margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
  display: grid; gap: 1.1rem;
  max-width: 66ch;
  font-size: clamp(1rem, 1.2vw, 1.08rem);
}
.about-body p { color: var(--ink-2); }
.about-body strong { color: var(--ink); font-weight: 600; }

@media (min-width: 900px) {
  .about-grid {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }
  .about-body { margin-top: .5rem; }
}

/* Compromisos: sin tarjetas, agrupados por espacio y filetes.
   Cuatro promesas verificables. Nunca cifras inventadas. */
.promises {
  margin-top: clamp(3rem, 7vw, 5rem);
  display: grid; gap: 0;
  border-top: 1px solid var(--line);
}
.promise {
  padding-block: clamp(1.5rem, 3vw, 2rem);
  border-bottom: 1px solid var(--line);
  display: grid; gap: .4rem;
}
.promise b {
  font-family: var(--display); font-weight: 600;
  font-size: 1.06rem; color: var(--ink); letter-spacing: -.015em;
}
.promise span { font-size: .93rem; color: var(--ink-3); max-width: 46ch; }

@media (min-width: 720px) {
  .promises { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 4vw, 4rem); }
}

/* =============================================================
   8. SERVICIOS - familia de layout: bento con ritmo
   Seis servicios, seis celdas exactas. Tamanos variados.
   Dos celdas llevan medio real, no solo texto sobre texto.
   ============================================================= */
.services { background: var(--surface); }

.services-head {
  display: grid; gap: 1rem;
  max-width: 52ch;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

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

.cell {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  background: var(--surface-2);
  padding: clamp(1.5rem, 2.6vw, 2rem);
  display: grid; align-content: end; gap: .55rem;
  min-height: 190px;
  overflow: hidden;
  transition: border-color .28s var(--ease), transform .28s var(--ease-out),
              background .28s var(--ease);
}
.cell:hover {
  border-color: var(--line-2);
  background: var(--surface-3);
  transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) { .cell:hover { transform: none; } }

.cell h3 { color: var(--ink); }
.cell p { font-size: .93rem; color: var(--ink-3); max-width: 40ch; }

/* Celdas con medio real: la foto vive detras del texto */
.cell--media { border-color: transparent; background: var(--surface-3); }
.cell--media img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) brightness(.55) contrast(1.05);
  transition: transform .6s var(--ease-out);
}
.cell--media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(23,22,20,.15) 30%, rgba(23,22,20,.9));
}
.cell--media > * { position: relative; z-index: 2; }
.cell--media:hover img { transform: scale(1.045); }
@media (prefers-reduced-motion: reduce) { .cell--media:hover img { transform: none; } }

/* Celda de acento: una sola, ancla visual del bloque */
.cell--accent {
  background: var(--accent-wash);
  border-color: rgba(99,196,138,.3);
}
.cell--accent h3 { color: var(--accent); }
.cell--accent:hover { background: rgba(99,196,138,.15); border-color: var(--accent); }

/* Dos columnas: seis celdas iguales en tres filas. Encaja exacto,
   asi que aqui no se aplica ningun span. */
@media (min-width: 680px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
}

/* Tres columnas: 1 alta (col 1, filas 1-2) + 4 normales + 1 banda
   a lo ancho. Seis contenidos, seis celdas, cero huecos. */
@media (min-width: 1000px) {
  .bento {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(190px, auto);
  }
  .cell--tall { grid-column: 1; grid-row: 1 / span 2; }
  /* La banda necesita alto propio: con min-height 0 quedaba en 190px
     y, al ser tan ancha, la foto se recortaba al 35% de su altura y
     parecía ampliada. Con ~300px se ve la mitad de la imagen. */
  .cell--full { grid-column: 1 / -1; min-height: clamp(240px, 21vw, 320px); }
  .cell--full p { max-width: 58ch; }
}

/* =============================================================
   9. PROCESO - familia de layout: banda a sangre + riel de pasos
   La numeracion se conserva SOLO aqui: el proceso es
   genuinamente secuencial, asi que el numero informa.
   ============================================================= */
.process { background: var(--bg); padding-top: 0; }

.process-band {
  position: relative;
  height: clamp(220px, 34vw, 380px);
  overflow: hidden;
}
.process-band img {
  width: 100%; height: 120%; object-fit: cover;
  filter: grayscale(1) brightness(.5) contrast(1.08);
  will-change: transform;
}
.process-band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23,22,20,.55), var(--bg));
}

.process-inner { margin-top: clamp(-4rem, -6vw, -3rem); position: relative; z-index: 2; }
.process-head { max-width: 40ch; }
.process-head .lede { margin-top: 1.1rem; }

.steps {
  margin-top: clamp(2.8rem, 5vw, 4rem);
  display: grid; gap: 0;
  counter-reset: step;
}
.step {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 0 1.2rem;
  padding-block: clamp(1.4rem, 2.8vw, 1.9rem);
  border-top: 1px solid var(--line);
  align-items: start;
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step-num {
  font-family: var(--display); font-weight: 700;
  font-size: .95rem; color: var(--accent);
  padding-top: .18rem;
  font-variant-numeric: tabular-nums;
}
.step h3 { color: var(--ink); }
.step p { grid-column: 2; margin-top: .4rem; font-size: .94rem; color: var(--ink-3); max-width: 56ch; }

@media (min-width: 900px) {
  .step {
    grid-template-columns: 2.8rem minmax(0, 15rem) minmax(0, 1fr);
    align-items: baseline;
    gap: 0 2rem;
  }
  .step p { grid-column: 3; margin-top: 0; }
}

/* =============================================================
   10. CONTACTO - familia de layout: division con formulario dominante
   ============================================================= */
.contact { background: var(--surface); }

.contact-head { max-width: 30ch; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }

.contact-grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }

.field { display: grid; gap: .45rem; margin-bottom: 1.1rem; }
.field > span { font-size: .85rem; font-weight: 500; color: var(--ink-2); }
.field input, .field textarea {
  width: 100%;
  padding: .82rem .95rem;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r-control);
  color: var(--ink);
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
/* Contraste AA: el marcador de posicion es legible sobre --bg */
.field input::placeholder, .field textarea::placeholder { color: #8B8378; }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); background: var(--surface-2);
}
.field textarea { resize: vertical; min-height: 120px; }
.field.has-error input, .field.has-error textarea { border-color: #E8846B; }
.field-error { font-size: .82rem; color: #F0A08C; min-height: 1.2em; }

.form-row { display: grid; gap: 0; }
@media (min-width: 560px) { .form-row { grid-template-columns: 1fr 1fr; gap: 0 1rem; } }

.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: .4rem; }
.form-note { font-size: .88rem; color: var(--ink-3); }
.form-note[data-state="ok"]  { color: var(--accent); }
.form-note[data-state="bad"] { color: #F0A08C; }

.contact-aside { display: grid; gap: 1.6rem; align-content: start; }
.contact-photo {
  border-radius: var(--r-surface); overflow: hidden;
  aspect-ratio: 5 / 3;
}
.contact-photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) brightness(.72) contrast(1.05);
}
.card-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.card-list li {
  padding-block: .95rem;
  border-bottom: 1px solid var(--line);
  display: grid; gap: .2rem;
}
.card-key { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.card-val { color: var(--ink); font-size: .98rem; }
.card-val a { border-bottom: 1px solid var(--line-2); transition: border-color .18s var(--ease), color .18s var(--ease); }
.card-val a:hover { color: var(--accent); border-color: var(--accent); }

@media (min-width: 900px) {
  .contact-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
}

/* =============================================================
   11. FOOTER
   ============================================================= */
.footer { background: var(--bg); border-top: 1px solid var(--line); padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.footer-inner {
  display: flex; flex-wrap: wrap; gap: 1.2rem 2rem;
  align-items: center; justify-content: space-between;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 1.3rem; }
.footer-links a, .footer-copy { font-size: .88rem; color: var(--ink-3); }
.footer-links a { transition: color .18s var(--ease); }
.footer-links a:hover { color: var(--accent); }

/* Creditos de fotografia: obligatorios por licencia CC BY-SA.
   No son decoracion, son atribucion real y no se pueden quitar
   mientras las fotos sigan siendo de Wikimedia Commons. */
.footer-credits {
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.footer-credits p { font-size: .78rem; color: var(--ink-3); line-height: 1.7; max-width: 90ch; }
.footer-credits a { border-bottom: 1px solid var(--line-2); }
.footer-credits a:hover { color: var(--accent); }

/* =============================================================
   12. MOVIMIENTO REDUCIDO - barrido final
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================================
   13. BOTÓN FLOTANTE DE WHATSAPP
   Radio de control (10px) como el resto de botones: el sistema
   de forma del sitio no admite círculos ni pills.
   Aparece al dejar atrás la portada, no de entrada: en el hero
   ya hay un CTA y dos acciones compitiendo se anulan.
   ============================================================= */
.wa-float {
  position: fixed; z-index: 90;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem;
  border-radius: var(--r-control);
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 12px 32px -14px rgba(0,0,0,.8);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease),
              visibility 0s .3s, background .18s var(--ease);
}
.wa-float.is-in {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out),
              visibility 0s, background .18s var(--ease);
}
.wa-float:hover { background: var(--accent-soft); }

.wa-float-icon { display: grid; place-items: center; width: 26px; height: 26px; flex: none; }
.wa-float-icon svg { width: 100%; height: 100%; }

/* La etiqueta se despliega solo con ratón: en táctil no hay hover
   y un botón ancho fijo taparía contenido. */
.wa-float-label {
  max-width: 0; overflow: hidden; white-space: nowrap;
  font-size: .84rem; font-weight: 600; letter-spacing: -.005em;
  transition: max-width .3s var(--ease-out), margin-right .3s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .wa-float:hover .wa-float-label,
  .wa-float:focus-visible .wa-float-label { max-width: 9rem; margin-right: .25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float, .wa-float.is-in { transform: none; }
}

/* Hueco para que el botón no tape los créditos en pantallas chicas */
@media (max-width: 700px) {
  .footer { padding-bottom: 6rem; }
}

/* Icono dentro de un botón: hereda el color del texto y se alinea
   con la mayúscula, no con la caja. */
.btn-ico { width: 18px; height: 18px; flex: none; }