/* ───── Contact: «Hablemos de negocios» (designer's animation guide, p. 3) ─────
   The designer's title image over a background that zooms slowly and drifts with the pointer, the finger
   and the scroll (js/hablemos.js). The copy, the button and the icons are real text and links.
   Like the rest of the site, the motion runs whatever the system's reduced-motion setting. */

.hablemos {
  /* The title keeps the size it has on a 1920 screen (73 % of the width) and never grows past its file */
  --title-w: min(1402px, 73vw, calc(100vw - 2 * var(--gutter)));
  --white: #fff;
}
/* Phones: the title takes the whole width between the gutters */
@media (max-width: 760px) {
  .hablemos { --title-w: calc(100vw - 2 * var(--gutter)); }
}

/* One full screen; the footer follows below it, on black */
.hablemos__stage {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  /* More room on top: the fixed header sits there */
  padding: clamp(6rem, 20vh, 14rem) var(--gutter) clamp(2.5rem, 6vh, 5rem);
}

/* ───── Background: one layer per motion, so they never fight over a transform ───── */

.hablemos__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--void);
}
/* Scroll (js): taller than the screen, so the parallax never shows an edge */
.hablemos__depth {
  position: absolute;
  inset: -6% 0;
  will-change: transform;
}
/* Pointer or finger (js) */
.hablemos__drift {
  position: absolute;
  inset: 0;
  will-change: translate;
}
/* Slow zoom; it only runs while the section is on screen (js adds .is-live) */
.hablemos__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 40%;
  scale: 1.08;
  animation: hablemos-zoom 26s ease-in-out infinite alternate;
}
.js .hablemos:not(.is-live) .hablemos__img,
.js .hablemos:not(.is-live) .hablemos__scan::after { animation-play-state: paused; }
@keyframes hablemos-zoom {
  to { scale: 1.18; }
}

/* Shade for reading: darker behind the words and toward the footer, so the screen ends in black. At the top it
   starts from black and eases out, so the image comes out of the black of Servicios instead of on a hard line */
.hablemos__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 62% 42% at 50% 62%, rgba(0, 0, 0, 0.42), transparent 72%),
    linear-gradient(180deg, #000, rgba(0, 0, 0, 0.9) 5%, rgba(0, 0, 0, 0.65) 10%, rgba(0, 0, 0, 0.35) 14%, rgba(0, 0, 0, 0.1) 19%, transparent 24%, transparent 70%, #000);
}

/* Thin scan lines in the image's own tones, and a faint band of light that rolls down, like an old monitor */
.hablemos__scan {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0 1px, transparent 1px 3px);
}
.hablemos__scan::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 24%;
  background: linear-gradient(180deg, transparent, rgba(255, 34, 0, 0.07) 55%, transparent);
  mix-blend-mode: screen;
  translate: 0 -100%;
  animation: hablemos-roll 11s linear infinite;
}
@keyframes hablemos-roll {
  to { translate: 0 420%; }
}

/* ───── Content ───── */

.hablemos__content {
  display: grid;
  justify-items: center;
  width: 100%;
  text-align: center;
}

/* The title: the file carries a wide halo of dots around the words, and the negative margins give that
   empty space back so the words sit where the mockup puts them. The box stays the image's own box
   (position: relative), ready for an effect drawn on top of it; the copy and links below paint above the halo */
.hablemos__title {
  position: relative;
  width: var(--title-w);
  margin: calc(var(--title-w) * -0.16) 0 calc(var(--title-w) * -0.17);
}
.hablemos__title-img {
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}
/* The dotted blur drawn over the title by js/dither.js; once it is ready it replaces the image */
.hablemos__fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hablemos__title.is-gl .hablemos__title-img { visibility: hidden; }

/* Mortend in capitals with 0.06em tracking, as the guide asks; each sentence on its own line */
.hablemos__text,
.hablemos__cta {
  font-family: var(--font);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hablemos__text {
  position: relative;
  z-index: 1;
  margin-top: clamp(1.25rem, 3.9vw, 4.75rem);
  color: var(--white);
  font-size: clamp(0.75rem, 1.3vw, 1.5625rem);
  line-height: 1.35;
}
.hablemos__line {
  display: block;
  text-wrap: balance;
}
.hablemos__accent { color: var(--signal); }

/* «¡Contáctanos!»: a small slanted tag in the brand orange, as in the mockup */
.hablemos__cta {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-top: clamp(1.75rem, 3.8vw, 4.5rem);
  padding: 0.6em 1.25em;
  color: var(--white);
  font-size: clamp(0.8125rem, 1.05vw, 1.25rem);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}
.hablemos__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--signal);
  transform: skewX(-10deg);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s;
}
/* A bigger tap area than the tag itself */
.hablemos__cta::after {
  content: '';
  position: absolute;
  inset: -0.5rem -0.25rem;
}

/* WhatsApp, Instagram and email, in a row */
.hablemos__channels {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: clamp(1.25rem, 3.8vw, 4.5rem);
  margin: clamp(0.75rem, 1.2vw, 1.5rem) 0 0;
  padding: 0;
  list-style: none;
}
.hablemos__channel {
  display: grid;
  place-items: center;
  width: clamp(2.75rem, 3.2vw, 3.75rem);
  aspect-ratio: 1;
  color: var(--white);
  transition: color 0.2s, translate 0.35s var(--ease-out);
}
.hablemos__channel svg {
  width: clamp(1.75rem, 2.6vw, 3.1rem);
  height: auto;
  aspect-ratio: 1;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hablemos__channel .is-solid { fill: currentColor; stroke-width: 0.6; }

/* Only a real pointer hovers: on a touch screen a tapped link would stay lit */
@media (hover: hover) {
  .hablemos__cta:hover::before { transform: skewX(-14deg) scale(1.05); box-shadow: 0 0 1.75rem rgba(255, 34, 0, 0.55); }
  .hablemos__channel:hover { color: var(--signal); translate: 0 -3px; }
}
.hablemos__cta:focus-visible::before { box-shadow: 0 0 1.75rem rgba(255, 34, 0, 0.55); }
.hablemos__channel:focus-visible { color: var(--signal); }