/* Realzar — mobile first. Spec 003 (18-10-2026): intermediate redesign with the dark palette layer at the end.
   Realzar — mobile first. Colors come from tokens.css (generated by the marca skill from ../info/marca/marca.json):
   change the palette there, not here. */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* Metric-matched fallback so the swap to Archivo does not shift the layout. */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial");
  size-adjust: 102%;
  ascent-override: 86%;
  descent-override: 21%;
  line-gap-override: 0%;
}

:root {
  --font: "Archivo", "Archivo Fallback", Arial, sans-serif;
  --text: 1.0625rem;
  --gutter: 1.25rem;
  --max: 68rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--font);
  font-size: var(--text);
  font-weight: 400;
  line-height: 1.55;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p {
  margin: 0;
}

a {
  color: inherit;
  /* No grey rectangle on tap in mobile browsers: it ignores the rounded corners. Buttons give their own feedback on :active. */
  -webkit-tap-highlight-color: transparent;
}

/* Focus ring: ink on light backgrounds, highlighter on dark ones. */
:focus-visible {
  outline: 3px solid var(--color-texto);
  outline-offset: 3px;
}

.site-header :focus-visible,
.hero :focus-visible,
#diagnostico :focus-visible,
#como-trabajamos :focus-visible,
.site-footer :focus-visible,
.card--featured :focus-visible {
  outline-color: var(--color-acento);
}

/* --- Header and logo --- */

.site-header,
main > section {
  padding-inline: var(--gutter);
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1rem;
  background: var(--color-texto);
  /* Covers the hairline that subpixel rounding can leave between the header and the first screen. */
  box-shadow: 0 1px 0 var(--color-texto);
  color: var(--color-fondo);
}

.logo {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: 1.625rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  text-decoration: none;
}

/* Highlighter stroke under the wordmark (dark background version of the logo). */
.logo::after {
  content: "";
  position: absolute;
  /* Sits just under the baseline of the word, wherever the box is taller than the text. */
  inset: calc(50% + 0.4em) -0.2rem auto;
  z-index: -1;
  height: 0.28rem;
  background: var(--color-acento);
  transform: skewX(-24deg) rotate(-1deg);
}

.header-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--color-acento);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

/* Anchor menu: only on wide screens (spec 002, RF-38). On phones the header keeps the logo and the button. */
.site-nav {
  display: none;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

.site-nav a:hover {
  text-decoration: underline;
  text-decoration-color: var(--color-acento);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

/* --- Buttons --- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.5rem;
  padding: 0.9rem 1.5rem;
  border-radius: 0.75rem;
  background: var(--color-acento);
  color: var(--color-texto);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  transition: transform 0.15s ease;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 0 -0.25rem color-mix(in srgb, var(--color-acento) 45%, transparent);
}

.button:active {
  transform: translateY(0);
}

.wa-float:active {
  transform: scale(0.94);
}

/* --- First screen --- */

.hero {
  display: grid;
  gap: 3rem;
  padding-block: 2.5rem 4rem;
  background: var(--color-texto);
  color: var(--color-fondo);
}

h1 {
  font-size: clamp(3rem, 15.5vw, 7.5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

/* Hand-drawn highlighter stroke across part of the title: it rises from left to right and does not
   cover the full height. The letters are paper outside the stroke and ink inside it, so both the
   stroke and the text fill use the same shape (--stroke-shape and --stroke-fill). */
h1 {
  isolation: isolate;
}

/* Inline SVG images cannot read CSS variables: the stroke keeps the palette values written in (acento, fondo,
   texto). If the palette changes, update them here too. */
.mark {
  --stroke-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M1,46 C8,44 20,41 34,38 C52,34 78,29 99,24 C100,34 99,46 100,58 C99,66 100,75 98,83 C80,86 62,90 44,93 C28,96 14,98 2,100 C0,88 2,76 1,66 C1,58 0,52 1,46 Z' fill='%23FFD43B'/%3E%3C/svg%3E");
  --stroke-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Crect width='100' height='100' fill='%23F7F6F2'/%3E%3Cpath d='M1,46 C8,44 20,41 34,38 C52,34 78,29 99,24 C100,34 99,46 100,58 C99,66 100,75 98,83 C80,86 62,90 44,93 C28,96 14,98 2,100 C0,88 2,76 1,66 C1,58 0,52 1,46 Z' fill='%2315171C'/%3E%3C/svg%3E");
  position: relative;
  display: inline-block;
  padding-inline: 0.14em;
  margin-inline: -0.07em;
  color: var(--color-fondo);
  white-space: nowrap;
}

.mark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--stroke-shape) center / 100% 100% no-repeat;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .mark {
    background: var(--stroke-fill) center / 100% 100% no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.hero-sub {
  max-width: 26ch;
  margin-top: 1.5rem;
  text-wrap: balance;
  font-size: clamp(1.25rem, 5.4vw, 1.75rem);
  font-weight: 600;
  line-height: 1.25;
}

.hero-promise {
  max-width: 34ch;
  margin-top: 0.75rem;
  color: color-mix(in srgb, var(--color-fondo) 80%, var(--color-texto));
  font-size: 1.0625rem;
  line-height: 1.4;
}

.hero .button {
  margin-top: 2rem;
}

.hero-note {
  margin-top: 0.9rem;
  color: color-mix(in srgb, var(--color-fondo) 72%, var(--color-texto));
  font-size: 0.9375rem;
  font-weight: 600;
}

/* Cards that float around the phone on the first screen. */
.float-card {
  position: absolute;
  z-index: 1;
  display: grid;
  gap: 0.4rem;
  padding: 0.85rem 1rem;
  border-radius: 0.9rem;
  background: var(--color-fondo);
  box-shadow: 0 1.25rem 2.5rem rgb(0 0 0 / 0.5), 0 0 0 1px rgb(0 0 0 / 0.08);
  color: var(--color-texto);
  animation: float 7s ease-in-out infinite alternate;
}

.float-label {
  color: var(--color-secundario);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.float-title {
  font-size: 1.0625rem;
  font-weight: 900;
  line-height: 1.1;
}

.float-stars {
  fill: var(--color-acento);
  stroke: var(--color-texto);
  stroke-width: 0.8;
  stroke-linejoin: round;
}

.float-bars {
  fill: var(--color-texto);
}

.float-bars .on {
  fill: var(--color-acento);
  stroke: var(--color-texto);
  stroke-width: 1.5;
}

@keyframes float {
  to {
    translate: 0 -0.625rem;
  }
}

/* Spec 003: the bars of the "Consultas del mes" card grow once, from the bottom, one after the other. */
.float-bars rect {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: bar-grow 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s both;
}

.float-bars rect:nth-child(2) {
  animation-delay: 0.62s;
}

.float-bars rect:nth-child(3) {
  animation-delay: 0.74s;
}

.float-bars rect:nth-child(4) {
  animation-delay: 0.86s;
}

.float-bars rect:nth-child(5) {
  animation-delay: 1s;
}

@keyframes bar-grow {
  from {
    transform: scaleY(0);
  }
}

/* First-screen visual: a phone built in CSS, tilted in 3D, with cards floating at different depths. */
.hero--depth .hero-stage {
  position: relative;
  display: grid;
  place-items: center;
  height: 27rem;
  perspective: 75rem;
}

.hero-stage::before {
  content: "";
  position: absolute;
  inset: 8% 4%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--color-acento) 34%, transparent), transparent);
  filter: blur(1.5rem);
  animation: glow 4s ease-in-out infinite alternate;
}

/* Spec 003: the glow behind the phone breathes (opacity and scale only). */
@keyframes glow {
  from {
    opacity: 0.6;
    transform: scale(0.92);
  }

  to {
    opacity: 1;
    transform: scale(1.08);
  }
}

.phone3d {
  /* Side of the phone: two shades between the secondary color and the text color. */
  --phone-edge: color-mix(in srgb, var(--color-secundario) 42%, var(--color-texto));
  --phone-edge-dark: color-mix(in srgb, var(--color-secundario) 29%, var(--color-texto));
  position: relative;
  width: 12.5rem;
  height: 25rem;
  padding: 0.55rem;
  border-radius: 2rem;
  background: var(--color-secundario);
  box-shadow:
    -1px 1px 0 var(--phone-edge), -2px 2px 0 var(--phone-edge), -3px 3px 0 var(--phone-edge), -4px 4px 0 var(--phone-edge),
    -5px 5px 0 var(--phone-edge-dark), -6px 6px 0 var(--phone-edge-dark), -7px 7px 0 var(--phone-edge-dark), -8px 8px 0 var(--phone-edge-dark),
    -2.5rem 3rem 4rem rgb(0 0 0 / 0.65);
  /* --tilt-x and --tilt-y come from js/effects.js (pointer or scroll, up to 8deg); without it they are 0. */
  transform: rotateY(calc(-24deg + var(--tilt-y, 0deg))) rotateX(calc(10deg + var(--tilt-x, 0deg))) rotateZ(5deg);
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  animation: float 8s ease-in-out infinite alternate;
}

.phone3d-screen {
  height: 100%;
  overflow: hidden;
  border-radius: 1.5rem;
  background: var(--color-fondo);
}

/* Spec 003: the mini site inside the phone scrolls down and back up by itself, like someone browsing. */
.p-scroll {
  animation: screen-scroll 9s ease-in-out 1.5s infinite alternate;
}

@keyframes screen-scroll {
  0%,
  15% {
    transform: translateY(0);
  }

  85%,
  100% {
    transform: translateY(-38%);
  }
}

.p-hero,
.p-body {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 0.45rem;
  padding: 1rem 0.9rem;
}

.p-hero {
  background: var(--color-texto);
}

.p-logo {
  width: 2.6rem;
  height: 0.45rem;
  margin-bottom: 0.7rem;
  border-bottom: 0.15rem solid var(--color-acento);
  border-radius: 0.1rem;
  background: var(--color-fondo);
}

.p-line {
  width: 100%;
  height: 0.5rem;
  border-radius: 99rem;
  background: var(--color-fondo);
}

.p-line--xl {
  width: 78%;
  height: 1rem;
  border-radius: 0.25rem;
}

.p-line--lg {
  width: 92%;
  height: 1rem;
  border-radius: 0.25rem;
}

.p-mark {
  width: 60%;
  height: 1.1rem;
  border-radius: 0.2rem;
  background: var(--color-acento);
  transform: rotate(-3deg) skewX(-10deg);
}

.p-line--sm {
  width: 68%;
  height: 0.35rem;
  margin-top: 0.3rem;
  opacity: 0.6;
}

.p-button {
  width: 72%;
  height: 1.5rem;
  margin-top: 0.4rem;
  border-radius: 0.4rem;
  background: var(--color-acento);
}

.p-line--dark {
  width: 70%;
  height: 0.7rem;
  border-radius: 0.2rem;
  background: var(--color-texto);
}

.p-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
  width: 100%;
  margin-block: 0.3rem;
}

.p-cards i {
  height: 3.4rem;
  border: 2px solid var(--color-texto);
  border-radius: 0.5rem;
}

.p-cards i:nth-child(2) {
  background: var(--color-texto);
}

.stage-card--listing {
  top: 9%;
  left: 2%;
  transform: rotate(-5deg);
}

.stage-card--report {
  right: 0;
  bottom: 14%;
  transform: rotate(4deg);
  animation-delay: -3s;
}

.stage-card--ad {
  top: 20%;
  right: 3%;
  background: var(--color-acento);
  transform: rotate(6deg);
  animation-delay: -5s;
}

/* --- Sections --- */

main > section:not(.hero) {
  padding-block: 4rem;
}

.eyebrow {
  margin-bottom: 0.75rem;
  color: var(--color-secundario);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h2 {
  max-width: 18ch;
  font-size: clamp(2rem, 8.5vw, 3.5rem);
  letter-spacing: -0.03em;
}

h3 {
  font-size: 1.5rem;
  line-height: 1.1;
}

/* --- Services --- */

h2 {
  isolation: isolate;
}

/* Stroke on a light background: the text stays ink, only the yellow shape shows behind it. */
.mark--light {
  background: none;
  color: var(--color-texto);
  -webkit-text-fill-color: currentColor;
}

/* Stroke that covers the whole phrase: for text with accents and descenders, where a partial stroke
   would cut the letters badly. */
.mark--full {
  background: none;
  color: var(--color-texto);
  -webkit-text-fill-color: currentColor;
}

.mark--full::before {
  inset: -0.02em 0 -0.06em;
  border-radius: 0.06em 0.14em 0.08em 0.16em;
  background: var(--color-acento);
  transform: rotate(-1.5deg) skewX(-8deg);
}

.services {
  display: grid;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  border: 1px solid color-mix(in srgb, var(--color-texto) 15%, transparent);
  border-radius: 1rem;
  background: var(--color-fondo);
  box-shadow: 0 1rem 2.5rem -1.25rem color-mix(in srgb, var(--color-texto) 45%, transparent);
  transition: transform 0.25s ease;
}

.service-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.service-icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 2px solid var(--color-texto);
  border-radius: 0.85rem;
  background: var(--color-acento);
  color: var(--color-texto);
  transform: rotate(-4deg);
}

.service-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Decorative order number: drawn by CSS so it is not announced or read as content. */
.service-number::before {
  content: attr(data-number);
}

.service-number {
  color: var(--color-texto);
  font-size: 2.75rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  opacity: 0.16;
}

.card > p {
  color: var(--color-secundario);
}

.card--featured {
  background: var(--color-texto);
  color: var(--color-fondo);
  border-color: color-mix(in srgb, var(--color-fondo) 20%, transparent);
  box-shadow: 0 1.25rem 3rem -1.25rem color-mix(in srgb, var(--color-acento) 45%, transparent);
}

.card--featured > p {
  color: color-mix(in srgb, var(--color-fondo) 82%, var(--color-texto));
}

.card--featured .service-number {
  color: var(--color-fondo);
  opacity: 0.28;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: auto 0 0;
  padding: 0.75rem 0 0;
  list-style: none;
}

.tags li {
  padding: 0.3rem 0.75rem;
  border: 2px solid var(--color-texto);
  border-radius: 99rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
}

.card--featured .tags li {
  border-color: var(--color-acento);
}

.service-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  min-height: 2.75rem;
  font-weight: 700;
  text-decoration-color: var(--color-acento);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.3em;
}

.differential {
  display: grid;
  gap: 0.75rem;
  margin-top: 2rem;
  padding: 2rem 1.5rem;
  border: 1px solid color-mix(in srgb, var(--color-texto) 15%, transparent);
  border-radius: 1rem;
  background: var(--color-acento);
  box-shadow: 0 1rem 2.5rem -1.25rem color-mix(in srgb, var(--color-texto) 45%, transparent);
  color: var(--color-texto);
}

.differential h3 {
  font-size: clamp(1.75rem, 6vw, 2.5rem);
}

.differential p {
  max-width: 46ch;
  font-size: 1.125rem;
  font-weight: 600;
}

/* --- Plans --- */

h4 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.group-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 3rem;
}

.group-title::before {
  content: "";
  flex: none;
  width: 0.9rem;
  height: 0.9rem;
  border: 2px solid var(--color-texto);
  border-radius: 50%;
  background: var(--color-acento);
}

.group-sub {
  margin-top: 0.4rem;
  color: var(--color-secundario);
}

.products,
.plans {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

.plans {
  gap: 1.5rem;
}

.product {
  display: grid;
  align-content: start;
  gap: 0.4rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--color-texto) 15%, transparent);
  border-left: 0.35rem solid var(--color-acento);
  border-radius: 1rem;
  background: var(--color-fondo);
  transition: transform 0.25s ease;
}

.product p {
  color: var(--color-secundario);
  font-size: 1rem;
}

.plan h4 {
  font-size: 1.75rem;
}

.plan-level rect {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.plan-level .on {
  fill: var(--color-acento);
}

.checks {
  display: grid;
  gap: 0.45rem;
  margin: auto 0 0;
  padding: 0.75rem 0 0;
  list-style: none;
  font-weight: 600;
}

.checks li {
  display: flex;
  gap: 0.6rem;
}

.checks li::before {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  margin-top: 0.5em;
  border-radius: 50%;
  background: var(--color-acento);
  box-shadow: 0 0 0 2px var(--color-texto);
}

.card--featured .checks li::before {
  box-shadow: none;
}

.plans-footer {
  display: grid;
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.note {
  padding: 1rem 1.25rem;
  border: 2px dashed var(--color-texto);
  border-radius: 0.85rem;
  color: var(--color-secundario);
}

.note strong {
  color: var(--color-texto);
}

/* On paper sections the yellow button needs an ink edge to stand out. */
.button--dark {
  border: 2px solid var(--color-texto);
  box-shadow: 0 1rem 2.5rem -1.25rem color-mix(in srgb, var(--color-texto) 45%, transparent);
}

.button--dark:hover {
  transform: translateY(-2px);
}

/* --- Free diagnostic --- */

#diagnostico {
  display: grid;
  gap: 3rem;
  background: var(--color-texto);
  color: var(--color-fondo);
}

#diagnostico .eyebrow {
  color: var(--color-acento);
}

.lead {
  max-width: 34ch;
  margin-top: 1.5rem;
  font-size: 1.25rem;
  line-height: 1.4;
}

.lead--strong {
  margin-top: 0.75rem;
  font-weight: 800;
}

#diagnostico .button {
  margin-top: 2rem;
}

/* Trade picker: rewrites the diagnostic message (js/rubro.js). */
.rubro {
  display: grid;
  gap: 0.5rem;
  max-width: 26rem;
  margin-top: 2rem;
}

.rubro label {
  font-weight: 700;
}

/* The arrow is an inline SVG with the accent color written in: update it if the palette changes. */
.rubro select {
  min-height: 3rem;
  padding: 0 2.75rem 0 1rem;
  border: 2px solid var(--color-fondo);
  border-radius: 0.75rem;
  background: var(--color-texto) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23FFD43B' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 1rem center;
  color: var(--color-fondo);
  font: inherit;
  font-weight: 600;
  appearance: none;
}

.rubro-preview {
  color: color-mix(in srgb, var(--color-fondo) 78%, var(--color-texto));
  font-size: 0.9375rem;
}

.rubro-preview q {
  color: var(--color-fondo);
  font-style: normal;
}

.steps {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step {
  position: relative;
  display: grid;
  gap: 0.4rem;
  padding: 1.25rem 1.25rem 1.25rem 4.75rem;
  border: 1px solid color-mix(in srgb, var(--color-fondo) 22%, transparent);
  border-radius: 1rem;
  counter-increment: step;
  transition: transform 0.25s ease;
}

.step::before {
  content: counter(step);
  position: absolute;
  top: 1.1rem;
  left: 1.1rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--color-acento);
  color: var(--color-texto);
  font-size: 1.375rem;
  font-weight: 900;
}

.step h3 {
  font-size: 1.25rem;
}

.step p {
  color: color-mix(in srgb, var(--color-fondo) 78%, var(--color-texto));
}

/* --- How we work (spec 003): dark band with the 4 steps --- */

#como-trabajamos {
  display: grid;
  gap: 2rem;
  justify-items: start;
  background: var(--color-texto);
  color: var(--color-fondo);
}

#como-trabajamos .eyebrow {
  margin-bottom: -1.25rem;
  color: var(--color-acento);
}

#como-trabajamos .steps {
  width: 100%;
}

/* --- Frequently asked questions --- */

.faq {
  display: grid;
  gap: 1rem;
  margin-top: 2.5rem;
}

.faq-item {
  display: grid;
  gap: 0.5rem;
  padding: 1.25rem 1.5rem;
  border: 2px solid var(--color-texto);
  border-radius: 1rem;
}

.faq-item h3 {
  font-size: 1.1875rem;
}

.faq-item p {
  color: var(--color-secundario);
}

/* --- Closing call to action --- */

.closing {
  display: grid;
  justify-items: start;
  gap: 1.25rem;
  padding: 2.5rem 1.5rem;
  border: 1px solid color-mix(in srgb, var(--color-texto) 15%, transparent);
  border-radius: 1.25rem;
  background: var(--color-acento);
  box-shadow: 0 1rem 2.5rem -1.25rem color-mix(in srgb, var(--color-texto) 45%, transparent);
}

.closing h2 {
  max-width: 16ch;
}

.closing p {
  max-width: 40ch;
  font-size: 1.125rem;
  font-weight: 600;
}

.button--ink {
  background: var(--color-texto);
  color: var(--color-fondo);
}

.button--ink:hover {
  box-shadow: 0 0.5rem 0 -0.25rem color-mix(in srgb, var(--color-texto) 35%, transparent);
}

/* --- Footer --- */

.site-footer {
  display: grid;
  gap: 2rem;
  /* Bottom space so the fixed WhatsApp button never covers the last lines. */
  padding: 3.5rem var(--gutter) 6.5rem;
  background: var(--color-texto);
  color: var(--color-fondo);
}

.footer-brand {
  display: grid;
  justify-items: start;
  gap: 0.75rem;
}

.footer-brand p:not(.logo) {
  max-width: 28ch;
  color: color-mix(in srgb, var(--color-fondo) 78%, var(--color-texto));
}

.footer-contact {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-contact li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.75rem;
  min-height: 2.75rem;
}

.footer-contact a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 600;
  text-decoration-color: var(--color-acento);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

.footer-label {
  min-width: 6.75rem;
  color: var(--color-acento);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Unconfirmed data stays visible on purpose (see docs/constitution.md). */
.pending {
  padding: 0.1rem 0.5rem;
  border: 2px dashed var(--color-acento);
  border-radius: 0.4rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.footer-legal {
  color: color-mix(in srgb, var(--color-fondo) 62%, var(--color-texto));
  font-size: 0.875rem;
}

.footer-legal a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--color-fondo);
  text-decoration-color: var(--color-acento);
  text-underline-offset: 0.3em;
}

/* --- Legal page (/privacidad) --- */

.legal {
  display: grid;
  gap: 1rem;
  max-width: 44rem;
}

.legal h1 {
  font-size: clamp(2.25rem, 10vw, 3.5rem);
}

.legal h2 {
  max-width: none;
  margin-top: 1.5rem;
  font-size: 1.5rem;
}

.legal p,
.legal li {
  max-width: 62ch;
}

.legal ul {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding-left: 1.25rem;
}

.legal a {
  font-weight: 600;
  text-decoration-color: var(--color-acento);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

.legal-date {
  color: var(--color-secundario);
  font-size: 0.9375rem;
}

/* --- Fixed WhatsApp button --- */

.wa-float {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 10;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 2px solid var(--color-texto);
  border-radius: 50%;
  background: var(--color-acento);
  box-shadow: 0 1rem 2.5rem -1.25rem color-mix(in srgb, var(--color-texto) 45%, transparent), 0 0 0 2px var(--color-fondo);
  color: var(--color-texto);
  transition: transform 0.15s ease;
}

.wa-float:hover {
  transform: scale(1.06);
}

.wa-bubble {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.wa-phone {
  fill: currentColor;
}

@media (max-width: 22.5rem) {
  .button {
    width: 100%;
    padding-inline: 1rem;
  }
}

@media (min-width: 48rem) {
  #como-trabajamos .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :root {
    --gutter: max(2.5rem, (100vw - var(--max)) / 2);
  }

  .site-header {
    padding-block: 1.5rem;
  }

  .hero {
    align-items: center;
    padding-block: 4rem 6rem;
  }

  .hero--depth {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }

  .hero--depth h1 {
    font-size: clamp(3.5rem, 8.2vw, 6rem);
  }

  .hero--depth .hero-stage {
    height: 33rem;
  }

  .phone3d {
    width: 15rem;
    height: 30rem;
  }

  main > section:not(.hero) {
    padding-block: 6rem;
  }

  .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .closing {
    padding: 4rem 3rem;
  }

  .site-footer {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-block: 4.5rem;
  }

  .footer-legal {
    grid-column: 1 / -1;
  }

  .wa-float {
    right: 1.5rem;
    bottom: 1.5rem;
  }

  .plans-footer {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .differential {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: 2rem;
    padding: 2.5rem;
  }
}

@media (min-width: 60rem) {
  .site-nav {
    display: flex;
    gap: 1.75rem;
    margin-left: auto;
  }

  .site-header {
    gap: 2.5rem;
  }

  .faq {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .services,
  .plans {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Spec 003: the steps moved to #como-trabajamos, so the intro gets the whole row (the form joins it later). */
  .diagnostic-intro {
    max-width: 46rem;
  }

  #como-trabajamos .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #como-trabajamos .step {
    align-content: start;
    padding: 4.75rem 1.25rem 1.5rem;
  }

  .products {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .product {
    grid-column: span 2;
  }

  /* Five products: three on the first row, two wider ones on the second. */
  .product:nth-child(n + 4) {
    grid-column: span 3;
  }

  .card {
    padding: 2rem;
  }
}

@media (orientation: landscape) and (max-height: 30rem) {
  .hero {
    padding-block: 1.5rem 3rem;
  }

  h1 {
    font-size: clamp(2.25rem, 7vw, 3.5rem);
  }

  .hero-sub {
    max-width: none;
    margin-top: 0.75rem;
    font-size: 1.125rem;
  }

  .hero .button {
    margin-top: 1rem;
  }
}

/* Spec 003: scroll reveal (js/effects.js). Every hiding rule needs html.fx, which only the script sets,
   so without JavaScript or with reduced motion everything is visible from the start. */
.fx .is-hidden > * {
  opacity: 0;
  transform: translateY(24px);
}

.is-shown > * {
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.is-shown > :nth-child(2) {
  transition-delay: 0.08s;
}

.is-shown > :nth-child(3) {
  transition-delay: 0.16s;
}

.is-shown > :nth-child(n + 4) {
  transition-delay: 0.24s;
}

/* The highlighter of a section title draws itself from the left once its section appears.
   The one in the main title (h1) never moves. */
h2 .mark::before {
  transform-origin: left center;
}

.fx .is-hidden h2 .mark::before {
  scale: 0 1;
}

.is-shown h2 .mark::before {
  transition: scale 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s;
}

/* Spec 003: cards lift and take the accent edge only on devices with a real pointer
   (on touch screens a tapped card would stay "lifted"). The color changes without a transition. */
@media (hover: hover) {
  .card:hover,
  .product:hover,
  .step:hover {
    transform: translateY(-6px);
    border-color: var(--color-acento);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* --- Spec 003: texture and diagonal cuts --- */

/* Dark sections: a fine grain (static SVG noise, white at low opacity: not a brand color) so they read less flat.
   The yellow light in the corner was removed by Raúl on 18-10-2026. */
.hero,
#como-trabajamos,
#diagnostico {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--color-texto);
}

/* Diagonal cuts between dark and light sections (static clip-path; the extra padding keeps the content clear). */
main {
  --cut: 2.5rem;
}

.hero {
  padding-bottom: calc(4rem + var(--cut));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 0 100%);
}

#como-trabajamos,
#diagnostico {
  padding-block: calc(4rem + var(--cut));
  clip-path: polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%);
}

@media (min-width: 60rem) {
  main {
    --cut: 4rem;
  }
}


/* --- Spec 003: glass and pointer light --- */

/* Glass steps over the light of the dark band. */
#como-trabajamos .step {
  background: color-mix(in srgb, var(--color-fondo) 6%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* On computers the header stays on top and turns into glass once the page scrolls (js/effects.js adds
   .is-scrolled). On phones it stays solid: the blur is the most expensive effect. */
@media (min-width: 60rem) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 20;
  }

  .site-header.is-scrolled {
    background: color-mix(in srgb, var(--color-texto) 72%, transparent);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--color-fondo) 10%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
  }

  main > section {
    scroll-margin-top: 5rem;
  }
}

/* --- Dark palette (spec 003, chosen by Raúl on 18-10-2026): a layer that only changes colors. ---
   Instead of rewriting every rule, each area redefines the semantic tokens that styles-003.css uses:
   in the dark bands "texto" (used there as background) becomes noche; in the areas that were paper,
   "fondo" becomes carbon (cards), "texto" becomes papel and "secundario" becomes niebla.
   Colors only come from tokens-oscura.css. */

/* Base tone tinta: the diagonal cuts of the noche bands show it, so every cut sits between two tones. */
body {
  background: var(--color-tinta);
  color: var(--color-papel);
}

/* Dark bands: same look, one step deeper. Text over the highlighter stays dark. */
.site-header,
.hero,
#como-trabajamos,
#diagnostico {
  --color-texto: var(--color-noche);
  --color-fondo: var(--color-papel);
}

.site-footer {
  --color-texto: var(--color-tinta);
  --color-fondo: var(--color-papel);
  --color-secundario: var(--color-niebla);
  border-top: 1px solid var(--color-borde);
}

/* Areas that were paper: now tinta or carbon, with light text. */
#servicios,
#planes,
#preguntas,
#contacto,
.legal,
.not-found {
  --color-fondo: var(--color-carbon);
  --color-texto: var(--color-papel);
  --color-secundario: var(--color-niebla);
  color: var(--color-papel);
}

#servicios,
#planes,
#preguntas,
.legal,
.not-found {
  background: var(--color-tinta);
}

#contacto {
  background: var(--color-noche);
}

/* Cards: carbon with a fine border. */
/* Every box gets the soft light shadow that "Todo en un solo paquete" had (Raúl, 18-10-2026): depth on dark. */
.card,
.product,
.faq-item,
.step,
.differential,
.closing {
  box-shadow: 0 1rem 2.5rem -1.25rem color-mix(in srgb, var(--color-papel) 45%, transparent);
}

.card,
.product,
.faq-item {
  border: 1px solid var(--color-borde);
  background: var(--color-carbon);
}

.product {
  border-left: 0.35rem solid var(--color-resaltador);
}

/* Same border as the others: the yellow edge is only the hover (on phones there is no hover, so all look alike). */
.card--featured {
  border-color: var(--color-borde);
  background: var(--color-carbon);
  color: var(--color-papel);
}

.card--featured > p {
  color: var(--color-niebla);
}

.card--featured .service-number {
  color: var(--color-papel);
}

.tags li {
  border-width: 1px;
  border-color: var(--color-borde);
}

/* The featured card's tags look like the others (Raúl, 18-10-2026). */
.card--featured .tags li {
  border-color: var(--color-borde);
}

.checks li::before {
  box-shadow: none;
}

.group-title::before {
  border-color: var(--color-noche);
}

/* Text that sits on the highlighter stays dark everywhere. */
.button,
.service-icon,
.mark--full,
.mark--light {
  color: var(--color-tinta);
  -webkit-text-fill-color: currentColor;
}

.service-icon {
  border-color: var(--color-tinta);
}

.button--dark {
  border-color: transparent;
}

/* Section-title highlighter: on dark it covers the whole phrase so the dark letters always sit on yellow. */
.mark--light::before {
  inset: -0.02em 0 -0.06em;
  border-radius: 0.06em 0.14em 0.08em 0.16em;
  background: var(--color-resaltador);
  transform: rotate(-1.5deg) skewX(-8deg);
}

/* The two yellow blocks become carbon panels with a highlighter edge: yellow stays an accent (RF-80). */
.differential,
.closing {
  border: 1px solid var(--color-borde);
  border-left: 0.35rem solid var(--color-resaltador);
  background: var(--color-carbon);
  color: var(--color-papel);
}

.closing .button--ink {
  background: var(--color-resaltador);
  color: var(--color-tinta);
}