/* =====================================================================
   MADIMA · Ingeniería Eléctrica
   Sistema de diseño — 2026/27
   ===================================================================== */

/* ---------------------------------------------------------------
   1 · TOKENS
   --------------------------------------------------------------- */
:root {
  /* Marca */
  --brand:        #E8A334;
  --brand-soft:   #F5C978;
  --brand-deep:   #C1811C;
  --brand-glow:   rgba(232, 163, 52, .34);

  /* Neutros */
  --ink:          #0E1013;
  --ink-2:        #14181E;
  --ink-3:        #1B2028;
  --line:         rgba(255, 255, 255, .09);
  --line-strong:  rgba(255, 255, 255, .16);

  --paper:        #FFFFFF;
  --paper-2:      #F7F6F4;
  --paper-3:      #EFEDE9;
  --paper-line:   rgba(14, 16, 19, .10);

  --text:         #0E1013;
  --text-soft:    #565B63;
  --text-faint:   #8A9099;
  --text-invert:  #FFFFFF;
  --text-invert-soft: rgba(255, 255, 255, .62);

  /* Estado */
  --ok:  #37A169;
  --warn:#E0A030;
  --err: #DC5B4B;

  /* Tipografía */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Rubik', 'Helvetica Neue', Arial, sans-serif;

  /* Escala fluida */
  --fs-xs:   clamp(.72rem, .70rem + .10vw, .78rem);
  --fs-sm:   clamp(.82rem, .79rem + .14vw, .90rem);
  --fs-base: clamp(.95rem, .91rem + .18vw, 1.03rem);
  --fs-md:   clamp(1.05rem, .99rem + .30vw, 1.20rem);
  --fs-lg:   clamp(1.30rem, 1.15rem + .70vw, 1.70rem);
  --fs-xl:   clamp(1.75rem, 1.40rem + 1.60vw, 2.85rem);
  --fs-2xl:  clamp(2.30rem, 1.60rem + 3.10vw, 4.40rem);
  --fs-3xl:  clamp(3.00rem, 1.70rem + 5.60vw, 7.20rem);

  /* Espaciado */
  --gap:      clamp(1rem, .8rem + .9vw, 1.6rem);
  --section:  clamp(4.5rem, 3rem + 6vw, 9.5rem);
  --shell:    min(1320px, 100% - clamp(2rem, 6vw, 7rem));

  /* Formas */
  --r-sm: 6px;
  --r:    12px;
  --r-lg: 20px;
  --r-xl: 30px;

  /* Sombras */
  --sh-sm: 0 1px 2px rgba(14,16,19,.06), 0 4px 12px rgba(14,16,19,.05);
  --sh:    0 2px 6px rgba(14,16,19,.06), 0 18px 45px -18px rgba(14,16,19,.22);
  --sh-lg: 0 40px 90px -34px rgba(14,16,19,.42);
  --sh-brand: 0 22px 50px -22px var(--brand-glow);

  /* Movimiento */
  --ease:      cubic-bezier(.22, 1, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: .22s;
  --t:      .42s;
  --t-slow: .8s;

  --header-h: 84px;
}

/* ---------------------------------------------------------------
   2 · RESET
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.68;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-variant-ligatures: common-ligatures;
}

body.no-scroll { overflow: hidden; }

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

/* Los iconos nunca deben encogerse ni estirarse dentro de un flex.
   Sin esto, flex-shrink los comprime en horizontal y el glifo se deforma. */
.ico {
  flex: none;
  width: 24px;
  height: 24px;
}

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

ul, ol { list-style: none; }

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

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

/* Scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--paper-2); }
::-webkit-scrollbar-thumb {
  background: #C9C6C0;
  border-radius: 20px;
  border: 3px solid var(--paper-2);
}
::-webkit-scrollbar-thumb:hover { background: var(--brand); }

/* ---------------------------------------------------------------
   3 · TIPOGRAFÍA
   --------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.028em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); letter-spacing: -.015em; }

p { text-wrap: pretty; }

.display {
  font-size: var(--fs-3xl);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.042em;
  text-transform: uppercase;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-deep);
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: '';
  width: 26px; height: 2px;
  background: var(--brand);
  flex: none;
}
.on-dark .eyebrow, .sec--dark .eyebrow { color: var(--brand); }

.lead {
  font-size: var(--fs-md);
  color: var(--text-soft);
  max-width: 62ch;
}
.on-dark .lead, .sec--dark .lead { color: var(--text-invert-soft); }

.text-brand { color: var(--brand); }
.text-soft  { color: var(--text-soft); }
.nowrap     { white-space: nowrap; }

/* Título con relleno de contorno (estilo Konstruc) */
.outline-text {
  -webkit-text-stroke: 1.4px currentColor;
  color: transparent;
}

/* Contenido enriquecido del editor */
.rich > * + * { margin-top: 1.15em; }
.rich h2 { font-size: var(--fs-lg); margin-top: 2.2em; }
.rich h3 { font-size: var(--fs-md); margin-top: 2em; font-weight: 700; }
.rich p  { color: var(--text-soft); }
.rich strong { color: var(--text); font-weight: 600; }
.rich a { color: var(--brand-deep); text-decoration: underline; text-underline-offset: 3px; }
.rich a:hover { color: var(--brand); }
.rich ul, .rich ol { padding-left: 1.35rem; color: var(--text-soft); }
.rich ul li { list-style: none; position: relative; padding-left: .35rem; }
.rich ul li + li, .rich ol li + li { margin-top: .5rem; }
.rich ul li::before {
  content: '';
  position: absolute;
  left: -1.15rem; top: .68em;
  width: 7px; height: 7px;
  background: var(--brand);
  transform: rotate(45deg);
}
.rich ol { list-style: decimal; }
.rich ol li::marker { color: var(--brand-deep); font-weight: 600; }
.rich blockquote {
  border-left: 3px solid var(--brand);
  padding: .3rem 0 .3rem 1.5rem;
  font-size: var(--fs-md);
  font-style: italic;
  color: var(--text);
}
.rich img { border-radius: var(--r); margin: 2rem 0; }
.rich hr { border: 0; border-top: 1px solid var(--paper-line); margin: 2.5rem 0; }
.rich code {
  background: var(--paper-3);
  padding: .15em .45em;
  border-radius: 4px;
  font-size: .9em;
}

/* ---------------------------------------------------------------
   4 · LAYOUT
   --------------------------------------------------------------- */
.shell {
  width: var(--shell);
  margin-inline: auto;
}
.shell--narrow { width: min(880px, 100% - clamp(2rem, 6vw, 7rem)); }
.shell--wide   { width: min(1560px, 100% - clamp(1.5rem, 4vw, 4rem)); }

.sec { padding-block: var(--section); position: relative; }
.sec--tight { padding-block: calc(var(--section) * .62); }

/* Primera sección de una página que no lleva cabecera:
   suma la altura de la barra superior fija para que nada quede debajo. */
.sec--first { padding-top: calc(var(--section) + var(--header-h)); }
.sec--dark  { background: var(--ink); color: var(--text-invert); }
.sec--paper { background: var(--paper-2); }

.sec--dark h1, .sec--dark h2, .sec--dark h3, .sec--dark h4 { color: #fff; }
.sec--dark p { color: var(--text-invert-soft); }

.grid { display: grid; gap: var(--gap); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }

.flex { display: flex; }
.between { justify-content: space-between; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.wrap { flex-wrap: wrap; }
.gap-sm { gap: .6rem; }
.gap { gap: var(--gap); }

.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2.5rem;
  margin-bottom: clamp(2.5rem, 4vw, 4.2rem);
}
.sec-head__text { max-width: 62ch; }
.sec-head h2 { margin-bottom: .9rem; }

/* Fondo de retícula técnica (blueprint) */
.blueprint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 90% at 50% 10%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 10%, #000 20%, transparent 78%);
}
.blueprint--light {
  background-image:
    linear-gradient(to right, rgba(14,16,19,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14,16,19,.05) 1px, transparent 1px);
}

/* ---------------------------------------------------------------
   5 · BOTONES
   --------------------------------------------------------------- */
.btn {
  --btn-bg: var(--brand);
  --btn-fg: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .95rem 1.6rem;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border-radius: 100px;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--t) var(--ease), transform var(--t-fast) var(--ease),
              box-shadow var(--t) var(--ease);
  white-space: nowrap;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform var(--t) var(--ease);
}
.btn:hover { color: #fff; transform: translateY(-2px); box-shadow: var(--sh-brand); }
.btn:hover::before { transform: translateY(0); }
.btn:active { transform: translateY(0); }

.btn .ico { width: 18px; height: 18px; transition: transform var(--t) var(--ease); }
.btn:hover .ico { transform: translate(3px, -3px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--paper-line);
}
.btn--ghost::before { background: var(--brand); }
.btn--ghost:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--brand); }

.btn--dark { --btn-bg: var(--ink); --btn-fg: #fff; }
.btn--dark::before { background: var(--brand); }
.btn--dark:hover { color: var(--ink); }

.on-dark .btn--ghost, .sec--dark .btn--ghost {
  --btn-fg: #fff;
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}

.btn--sm { padding: .7rem 1.2rem; font-size: var(--fs-xs); }
.btn--lg { padding: 1.15rem 2.1rem; }
.btn--block { display: flex; width: 100%; justify-content: center; }

/* Enlace con subrayado animado */
.link-u {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: .04em;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 4px;
  color: var(--text);
}
.link-u::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: currentColor;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform var(--t) var(--ease);
}
.link-u:hover { color: var(--brand-deep); }
.link-u:hover::after { transform-origin: left; transform: scaleX(1); }
.link-u .ico { width: 16px; height: 16px; transition: transform var(--t) var(--ease); }
.link-u:hover .ico { transform: translate(3px, -3px); }
.on-dark .link-u, .sec--dark .link-u { color: #fff; }
.on-dark .link-u:hover, .sec--dark .link-u:hover { color: var(--brand); }

/* ---------------------------------------------------------------
   6 · CABECERA
   --------------------------------------------------------------- */
.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background var(--t) var(--ease), height var(--t) var(--ease),
              box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.hdr::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--paper-line);
  opacity: 0;
  transition: opacity var(--t) var(--ease);
  z-index: -1;
}
.hdr.is-stuck { height: 68px; }
.hdr.is-stuck::after { opacity: 1; }
.hdr.is-hidden { transform: translateY(-100%); }

.hdr__inner {
  width: min(1560px, 100% - clamp(1.5rem, 4vw, 4rem));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
}

.brand { display: flex; align-items: center; flex: none; }
.brand img {
  height: clamp(30px, 3.2vw, 40px);
  width: auto;
  transition: height var(--t) var(--ease);
}
.hdr.is-stuck .brand img { height: 30px; }
.brand__light { display: none; }

/* Cabecera sobre héroe oscuro */
.hdr--over:not(.is-stuck) .nav__link,
.hdr--over:not(.is-stuck) .hdr__tool { color: #fff; }
.hdr--over:not(.is-stuck) .brand__dark { display: none; }
.hdr--over:not(.is-stuck) .brand__light { display: block; }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(.4rem, 1.4vw, 1.4rem); }
.nav__link {
  position: relative;
  display: block;
  padding: .55rem .3rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--text);
  transition: color var(--t-fast) var(--ease);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: .3rem; right: .3rem; bottom: .28rem;
  height: 1.5px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t) var(--ease);
}
.nav__link:hover::after,
.nav__item.is-active .nav__link::after { transform: scaleX(1); transform-origin: left; }
.nav__item.is-active .nav__link { color: var(--brand-deep); }
.hdr--over:not(.is-stuck) .nav__item.is-active .nav__link { color: var(--brand); }

.hdr__actions { display: flex; align-items: center; gap: .7rem; flex: none; }
.hdr__tool {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  color: var(--text);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.hdr__tool:hover { background: var(--brand); color: var(--ink); }
.hdr__tool .ico { width: 20px; height: 20px; }

.burger { display: none; }

/* Menú móvil */
.mnav {
  position: fixed;
  inset: 0;
  z-index: 950;
  background: var(--ink);
  color: #fff;
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  clip-path: circle(0% at calc(100% - 46px) 42px);
  transition: clip-path .72s var(--ease-out);
  visibility: hidden;
}
.mnav.is-open { clip-path: circle(150% at calc(100% - 46px) 42px); visibility: visible; }

.mnav__top { display: flex; align-items: center; justify-content: space-between; }
.mnav__top img { height: 32px; }
.mnav__close {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: #fff;
}
.mnav__close .ico { width: 22px; height: 22px; }

.mnav__list {
  margin: auto 0;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.mnav__list a {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 9vw, 3rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.16;
  padding: .18rem 0;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), color var(--t-fast);
}
.mnav.is-open .mnav__list a { opacity: 1; transform: none; }
.mnav__list a:hover { color: var(--brand); }
.mnav__list li:nth-child(1) a { transition-delay: .10s; }
.mnav__list li:nth-child(2) a { transition-delay: .16s; }
.mnav__list li:nth-child(3) a { transition-delay: .22s; }
.mnav__list li:nth-child(4) a { transition-delay: .28s; }
.mnav__list li:nth-child(5) a { transition-delay: .34s; }
.mnav__list li:nth-child(6) a { transition-delay: .40s; }
.mnav__list li:nth-child(7) a { transition-delay: .46s; }

.mnav__foot {
  border-top: 1px solid var(--line);
  padding-top: 1.2rem;
  display: grid;
  gap: .4rem;
  font-size: var(--fs-sm);
  color: var(--text-invert-soft);
}
.mnav__foot a:hover { color: var(--brand); }

/* Barra lateral de contacto (estilo Konstruc) */
.railbar {
  position: fixed;
  top: 50%; right: 0;
  transform: translateY(-50%);
  z-index: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  padding: 1.4rem .55rem;
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-right: 0;
  border-radius: var(--r) 0 0 var(--r);
  box-shadow: var(--sh);
}
.railbar a {
  writing-mode: vertical-rl;
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-soft);
  transition: color var(--t-fast) var(--ease);
}
.railbar a:hover { color: var(--brand-deep); }
.railbar__sep { width: 1px; height: 34px; background: var(--paper-line); }

/* ---------------------------------------------------------------
   7 · HÉROE
   --------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(100svh, 940px);
  display: flex;
  align-items: center;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  padding-top: var(--header-h);
}
.hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .34;
  transform: scale(1.08);
}

/* Video de fondo */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.2s var(--ease);
  pointer-events: none;
}
.hero__video.is-ready { opacity: var(--video-opacity, .38); }

/* Degradado sobre el video, con los mismos tonos del diseño */
.hero__fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, var(--ink) 0%, rgba(14,16,19,.35) 34%, transparent 62%),
    linear-gradient(to right, var(--ink) 4%, rgba(14,16,19,.42) 38%, transparent 72%);
}
.hero__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 70% at 12% 30%, rgba(232,163,52,.13) 0%, transparent 60%),
    linear-gradient(100deg, var(--ink) 22%, rgba(14,16,19,.55) 62%, rgba(14,16,19,.86) 100%);
}
/* Cuña diagonal ámbar */
.hero__wedge {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 46%;
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-deep) 100%);
  clip-path: polygon(38% 0, 100% 0, 100% 100%, 0 100%);
  opacity: .16;
  mix-blend-mode: screen;
}
/* Ojo: no poner width aquí — anularía el ancho de .shell y el texto
   quedaría pegado al borde de la pantalla. */
.hero__inner {
  position: relative;
  z-index: 3;
  padding-block: clamp(3rem, 8vh, 6rem);
  /* Mínimo 20px de aire a la derecha en cualquier pantalla, y bastante
     más en escritorio para no chocar con la barra lateral de contacto. */
  padding-right: max(20px, clamp(1.25rem, 4vw, 5rem));
}
@media (max-width: 1180px) {
  .hero__inner { padding-right: 20px; }
}

/* El contenido del héroe tampoco debe llegar al borde por su cuenta */
.hero__inner > * { max-width: 100%; }
.hero__inner .eyebrow,
.hero__title,
.hero__sub,
.hero__cta { padding-right: 20px; }

.hero__ghost {
  position: absolute;
  left: 50%;
  top: 24%;
  translate: -50% 0;
  font-family: var(--font-display);
  font-size: clamp(5rem, 16vw, 17rem);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,.10);
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
  user-select: none;
}

.hero__title {
  font-size: var(--fs-3xl);
  font-weight: 800;
  line-height: .93;
  letter-spacing: -.045em;
  text-transform: uppercase;
  max-width: 15ch;
}
.hero__title em {
  font-style: normal;
  color: var(--brand);
}
.hero__sub {
  margin-top: 1.7rem;
  max-width: 46ch;
  font-size: var(--fs-md);
  color: rgba(255,255,255,.72);
}
.hero__cta { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: .9rem; }

.hero__scroll {
  position: absolute;
  left: 50%; bottom: 26px;
  translate: -50% 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  font-size: var(--fs-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.hero__scroll span {
  width: 1px; height: 46px;
  background: linear-gradient(to bottom, var(--brand), transparent);
  animation: railDrop 2s var(--ease-in-out) infinite;
}
@keyframes railDrop {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* Héroe interno de página */
.phero {
  position: relative;
  background: var(--ink);
  color: #fff;
  padding-top: calc(var(--header-h) + clamp(3.5rem, 8vw, 7rem));
  padding-bottom: clamp(3rem, 6vw, 5.5rem);
  overflow: hidden;
}
.phero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .26; }
.phero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(110deg, var(--ink) 30%, rgba(14,16,19,.6) 100%);
}
.phero__inner { position: relative; z-index: 2; }
.phero h1 { font-size: var(--fs-2xl); text-transform: uppercase; letter-spacing: -.038em; max-width: 18ch; }
.phero .lead { margin-top: 1.3rem; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  margin-top: 2rem;
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.crumbs a:hover { color: var(--brand); }
.crumbs span { color: var(--brand); }

/* ---------------------------------------------------------------
   8 · CONTADORES
   --------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--paper-line);
}
.stat {
  padding: clamp(2rem, 3.4vw, 3.2rem) clamp(1rem, 2.2vw, 2.2rem);
  border-right: 1px solid var(--paper-line);
  position: relative;
}
.stat:last-child { border-right: 0; }
.stat__n {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.045em;
  color: var(--brand);
  display: flex;
  align-items: baseline;
}
.stat:nth-child(n+2) .stat__n {
  color: transparent;
  -webkit-text-stroke: 1.4px var(--brand);
  transition: color .5s var(--ease), -webkit-text-stroke-color .5s var(--ease);
}
.stat:nth-child(n+2):hover .stat__n { color: var(--brand); }
.stat__label {
  margin-top: 1.1rem;
  font-weight: 600;
  font-size: var(--fs-base);
}
.stat__desc { margin-top: .45rem; font-size: var(--fs-sm); color: var(--text-soft); }

/* ---------------------------------------------------------------
   9 · TARJETAS DE SERVICIO
   --------------------------------------------------------------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--paper-line); border: 1px solid var(--paper-line); }
.sec--dark .svc-grid { background: var(--line); border-color: var(--line); }

.svc {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: clamp(1.8rem, 3vw, 2.8rem);
  background: var(--paper);
  isolation: isolate;
  overflow: hidden;
  transition: color var(--t) var(--ease);
}
.sec--dark .svc { background: var(--ink); }
.svc::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  transform: translateY(100%);
  transition: transform .6s var(--ease-out);
}
.sec--dark .svc::before { background: var(--brand); }
.svc:hover::before { transform: translateY(0); }
.svc:hover { color: #fff; }
.sec--dark .svc:hover { color: var(--ink); }

.svc__ico {
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: var(--ink);
  flex: none;
  transition: transform .55s var(--ease), background var(--t) var(--ease);
}
.svc__ico .ico { width: 26px; height: 26px; stroke-width: 1.6; }
.svc:hover .svc__ico { transform: rotate(-8deg) scale(1.06); }
.sec--dark .svc:hover .svc__ico { background: var(--ink); color: var(--brand); }

.svc__n {
  position: absolute;
  top: clamp(1.2rem, 2vw, 1.8rem);
  right: clamp(1.4rem, 2.4vw, 2.2rem);
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.4vw, 3.6rem);
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--paper-line);
  transition: -webkit-text-stroke-color var(--t) var(--ease);
  pointer-events: none;
}
.svc:hover .svc__n { -webkit-text-stroke-color: rgba(255,255,255,.22); }

.svc h3 { font-size: var(--fs-md); font-weight: 700; letter-spacing: -.02em; }
.svc p { font-size: var(--fs-sm); color: var(--text-soft); transition: color var(--t) var(--ease); }
.svc:hover p { color: rgba(255,255,255,.66); }
.sec--dark .svc:hover p { color: rgba(14,16,19,.72); }
.svc__more { margin-top: auto; padding-top: .4rem; }
.svc__more .ico { width: 17px; height: 17px; transition: transform var(--t) var(--ease); }
.svc:hover .svc__more .ico { transform: translate(4px, -4px); }
.svc__link { position: absolute; inset: 0; z-index: 5; }

/* ---------------------------------------------------------------
   10 · PROYECTOS
   --------------------------------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 2.5rem;
}
.filters button, .filters a {
  padding: .6rem 1.15rem;
  border-radius: 100px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-soft);
  box-shadow: inset 0 0 0 1px var(--paper-line);
  transition: all var(--t-fast) var(--ease);
}
.filters button:hover, .filters a:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.filters .is-on { background: var(--ink); color: #fff; box-shadow: none; }

.proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }

.proj {
  position: relative;
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink-2);
  aspect-ratio: 4 / 4.7;
  isolation: isolate;
}
.proj__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 1.1s var(--ease-out), filter .6s var(--ease);
}
.proj:hover .proj__img { transform: scale(1.07); }
.proj__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,11,13,.94) 6%, rgba(10,11,13,.42) 46%, rgba(10,11,13,.12) 100%);
  transition: opacity var(--t) var(--ease);
}
.proj__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(1.3rem, 2.4vw, 2rem);
  color: #fff;
  z-index: 2;
}
.proj__cat {
  display: inline-block;
  padding: .32rem .8rem;
  border-radius: 100px;
  background: var(--brand);
  color: var(--ink);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: .8rem;
}
.proj h3 {
  font-size: var(--fs-md);
  letter-spacing: -.02em;
  line-height: 1.2;
}
.proj__meta {
  margin-top: .55rem;
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.6);
  display: flex; flex-wrap: wrap; gap: .3rem .9rem;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .5s var(--ease), opacity .4s var(--ease), margin .5s var(--ease);
}
.proj:hover .proj__meta { max-height: 90px; opacity: 1; }

.proj__go {
  position: absolute;
  top: clamp(1rem, 2vw, 1.5rem);
  right: clamp(1rem, 2vw, 1.5rem);
  z-index: 3;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(8px);
  color: #fff;
  transform: scale(.6) rotate(-30deg);
  opacity: 0;
  transition: all .5s var(--ease);
}
.proj:hover .proj__go {
  transform: none; opacity: 1;
  background: var(--brand); color: var(--ink);
}
.proj__go .ico { width: 19px; height: 19px; }

/* Proyecto destacado a doble ancho */
.proj--wide { grid-column: span 2; aspect-ratio: 8.5 / 4.7; }

/* ---------------------------------------------------------------
   11 · SPLIT / IMAGEN + TEXTO
   --------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: center;
}
.split--wide-left { grid-template-columns: 1.15fr 1fr; }

.figure {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 4.4;
  background: var(--ink-2);
}
.figure__img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.figure--flat { aspect-ratio: 16 / 10; }

.figure__badge {
  position: absolute;
  left: clamp(1rem, 2vw, 1.6rem);
  bottom: clamp(1rem, 2vw, 1.6rem);
  z-index: 2;
  background: var(--brand);
  color: var(--ink);
  padding: 1.2rem 1.5rem;
  border-radius: var(--r);
  max-width: 240px;
  box-shadow: var(--sh);
}
.figure__badge strong {
  display: block;
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: -.04em;
}
.figure__badge span { font-size: var(--fs-sm); font-weight: 500; }

/* Lista con check */
.checks { display: grid; gap: .85rem; margin-top: 1.9rem; }
.checks li {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  font-size: var(--fs-sm);
  color: var(--text-soft);
}
.sec--dark .checks li { color: var(--text-invert-soft); }
.checks .ico {
  flex: none;
  width: 21px; height: 21px;
  padding: 3px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--ink);
  stroke-width: 2.6;
  margin-top: 2px;
}

/* ---------------------------------------------------------------
   12 · PROCESO
   --------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.8rem); }
.step {
  position: relative;
  padding-top: 2.6rem;
  border-top: 1.5px solid var(--line);
}
.sec:not(.sec--dark) .step { border-top-color: var(--paper-line); }
.step::before {
  content: '';
  position: absolute;
  top: -1.5px; left: 0;
  width: 0; height: 1.5px;
  background: var(--brand);
  transition: width .9s var(--ease-out);
}
.step.is-in::before { width: 100%; }
.step__n {
  position: absolute;
  top: 1.5rem; right: 0;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--line-strong);
}
.sec:not(.sec--dark) .step__n { -webkit-text-stroke-color: var(--paper-line); }
.step__ico {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: rgba(232,163,52,.14);
  color: var(--brand);
  margin-bottom: 1.2rem;
}
.step h3 { font-size: var(--fs-md); margin-bottom: .7rem; }
.step p { font-size: var(--fs-sm); }

/* ---------------------------------------------------------------
   13 · VENTAJAS / ICON BOX
   --------------------------------------------------------------- */
.adv { display: flex; gap: 1.3rem; padding: clamp(1.4rem,2.4vw,2rem) 0; }
.adv__ico {
  flex: none;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--brand);
  color: var(--ink);
  transition: transform .5s var(--ease);
}
.adv:hover .adv__ico { transform: translateY(-4px) rotate(-6deg); }
.adv h3 { font-size: var(--fs-md); margin-bottom: .55rem; }
.adv p { font-size: var(--fs-sm); }

/* ---------------------------------------------------------------
   14 · MARQUEE
   --------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  background: var(--brand);
  color: var(--ink);
  padding: 1.1rem 0;
  border-block: 1px solid rgba(14,16,19,.14);
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: 3rem;
  animation: mq 34s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: flex;
  align-items: center;
  gap: 3rem;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee__item::after {
  content: '';
  width: 9px; height: 9px;
  background: var(--ink);
  transform: rotate(45deg);
  flex: none;
}
@keyframes mq { to { transform: translateX(-50%); } }

.marquee--dark { background: var(--ink); color: #fff; border-color: var(--line); }
.marquee--dark .marquee__item::after { background: var(--brand); }
.marquee--outline .marquee__item {
  color: transparent;
  -webkit-text-stroke: 1px currentColor;
}

/* ---------------------------------------------------------------
   15 · TESTIMONIOS
   --------------------------------------------------------------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
.quote {
  position: relative;
  padding: clamp(1.8rem, 3vw, 2.4rem);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--sh-sm);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.sec--dark .quote { background: var(--ink-2); box-shadow: none; border: 1px solid var(--line); }
.quote:hover { transform: translateY(-6px); box-shadow: var(--sh); }
.quote__stars { display: flex; gap: .2rem; color: var(--brand); }
.quote__stars .ico { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.quote p { font-size: var(--fs-base); color: var(--text); line-height: 1.62; }
.sec--dark .quote p { color: rgba(255,255,255,.86); }
.quote__who { margin-top: auto; display: flex; align-items: center; gap: .85rem; padding-top: .6rem; border-top: 1px solid var(--paper-line); }
.sec--dark .quote__who { border-top-color: var(--line); }
.quote__av {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--ink);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  flex: none;
  overflow: hidden;
}
.quote__av img { width: 100%; height: 100%; object-fit: cover; }
.quote__who strong { display: block; font-size: var(--fs-sm); font-weight: 600; }
.quote__who span { font-size: var(--fs-xs); color: var(--text-faint); }

/* ---------------------------------------------------------------
   15b · CARRUSEL DE LOGOS DE CLIENTES
   --------------------------------------------------------------- */
.logos {
  position: relative;
  overflow: hidden;
  padding-block: clamp(1rem, 2vw, 1.8rem);
  /* Difuminado corto en los extremos: lo justo para que los logos entren y
     salgan con suavidad, sin llegar a tapar los que están a la vista. */
  mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}

.logos__track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: clamp(2.5rem, 6vw, 6rem);
  /* La duración la calcula el JS según el ancho real, para que la
     velocidad sea la misma con 3 logos o con 20. */
  animation: logosScroll var(--logos-duration, 40s) linear infinite;
  will-change: transform;
}
.logos:hover .logos__track,
.logos:focus-within .logos__track { animation-play-state: paused; }

/* El desplazamiento va en píxeles exactos (ancho de una repetición + su
   separación). En porcentaje quedaría un pequeño salto en cada vuelta,
   porque los gaps no se reparten por igual entre las copias. */
@keyframes logosScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--logos-shift, -50%), 0, 0); }
}

.logo-item {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(80px, 9vw, 108px);
  padding-inline: .5rem;
}

/* Los límites van en píxeles, NO en porcentaje: dentro de un contenedor de
   altura automática, un max-height:100% se resuelve contra la propia imagen
   y no la limita, así que el logo desborda y se ve cortado. */
.logo-item img {
  max-height: clamp(42px, 5.2vw, 64px);
  max-width: clamp(130px, 17vw, 210px);
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .5;
  transition: filter var(--t) var(--ease), opacity var(--t) var(--ease),
              transform var(--t) var(--ease);
}
.logo-item:hover img { filter: none; opacity: 1; transform: scale(1.06); }
.sec--dark .logo-item img { filter: grayscale(1) brightness(2.6); opacity: .42; }
.sec--dark .logo-item:hover img { filter: none; opacity: 1; }

/* Cliente sin logo cargado: se muestra su nombre */
.logo-item__name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: -.02em;
  white-space: nowrap;
  color: var(--text-faint);
  transition: color var(--t) var(--ease);
}
.logo-item:hover .logo-item__name { color: var(--brand-deep); }

/* Pocos logos: caben en pantalla, así que se muestran quietos y centrados */
.logos--static { mask-image: none; -webkit-mask-image: none; }
.logos--static .logos__track {
  animation: none;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
}

/* Sin animación: los logos se ven igual, sólo que quietos y centrados */
@media (prefers-reduced-motion: reduce) {
  .logos { mask-image: none; -webkit-mask-image: none; }
  .logos__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    gap: clamp(1.5rem, 4vw, 3rem);
  }
  .logos__track > .logo-item:nth-child(n + 13) { display: none; }
}
body.no-anim .logos__track { animation: none; }

/* ---------------------------------------------------------------
   16 · ACORDEÓN (FAQ)
   --------------------------------------------------------------- */
.acc { border-top: 1px solid var(--paper-line); }
.sec--dark .acc { border-top-color: var(--line); }
.acc__item { border-bottom: 1px solid var(--paper-line); }
.sec--dark .acc__item { border-bottom-color: var(--line); }
.acc__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -.015em;
  transition: color var(--t-fast) var(--ease);
}
.acc__head:hover { color: var(--brand-deep); }
.sec--dark .acc__head:hover { color: var(--brand); }
.acc__sign {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--paper-3);
  color: var(--text);
  transition: all var(--t) var(--ease);
}
.sec--dark .acc__sign { background: rgba(255,255,255,.08); color: #fff; }
.acc__sign .ico { width: 18px; height: 18px; }
.acc__item.is-open .acc__sign { background: var(--brand); color: var(--ink); transform: rotate(180deg); }
.acc__item.is-open .acc__head { color: var(--brand-deep); }
.sec--dark .acc__item.is-open .acc__head { color: var(--brand); }
.acc__body {
  overflow: hidden;
  height: 0;
  transition: height .45s var(--ease);
}
.acc__body > div { padding-bottom: 1.6rem; max-width: 78ch; color: var(--text-soft); font-size: var(--fs-sm); }
.sec--dark .acc__body > div { color: var(--text-invert-soft); }

/* ---------------------------------------------------------------
   17 · BLOG
   --------------------------------------------------------------- */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.4vw, 2rem); }

.post { display: flex; flex-direction: column; gap: 1.1rem; }
.post__img {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16 / 11;
  background: var(--ink-2);
}
.post__img > div {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 1s var(--ease-out);
}
.post:hover .post__img > div { transform: scale(1.06); }
.post__date {
  position: absolute;
  left: 1rem; bottom: 1rem;
  z-index: 2;
  background: var(--brand);
  color: var(--ink);
  padding: .4rem .85rem;
  border-radius: 100px;
  font-size: var(--fs-xs);
  font-weight: 600;
}
.post__cat { font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--brand-deep); font-weight: 600; }
.post h3 { font-size: var(--fs-md); letter-spacing: -.02em; line-height: 1.25; transition: color var(--t-fast) var(--ease); }
.post:hover h3 { color: var(--brand-deep); }
.post p { font-size: var(--fs-sm); color: var(--text-soft); }
.post__foot { margin-top: auto; padding-top: .3rem; }

/* Artículo */
.article { max-width: 78ch; margin-inline: auto; }
.article__meta {
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
  font-size: var(--fs-sm);
  color: var(--text-faint);
  padding-bottom: 1.6rem;
  margin-bottom: 2.4rem;
  border-bottom: 1px solid var(--paper-line);
}
.article__cover { border-radius: var(--r-lg); overflow: hidden; margin-bottom: 3rem; aspect-ratio: 16/8; background: var(--ink-2); }
.article__cover > div { width: 100%; height: 100%; background-size: cover; background-position: center; }

.tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2.5rem; }
.tags a, .tags span {
  padding: .4rem .9rem;
  border-radius: 100px;
  background: var(--paper-2);
  font-size: var(--fs-xs);
  color: var(--text-soft);
  transition: all var(--t-fast) var(--ease);
}
.tags a:hover { background: var(--brand); color: var(--ink); }

/* Paginación */
.pager { display: flex; justify-content: center; gap: .4rem; margin-top: 3.5rem; }
.pager a, .pager span {
  min-width: 44px; height: 44px;
  display: grid; place-items: center;
  padding-inline: .7rem;
  border-radius: 50px;
  font-size: var(--fs-sm);
  font-weight: 500;
  box-shadow: inset 0 0 0 1px var(--paper-line);
  transition: all var(--t-fast) var(--ease);
}
.pager a:hover { background: var(--ink); color: #fff; box-shadow: none; }
.pager .is-on { background: var(--brand); color: var(--ink); box-shadow: none; }

/* ---------------------------------------------------------------
   18 · CTA
   --------------------------------------------------------------- */
.cta {
  position: relative;
  background: var(--brand);
  color: var(--ink);
  overflow: hidden;
}

/* Imagen de fondo opcional (se administra desde el panel) */
.cta__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .22;
  mix-blend-mode: multiply;
}
.cta--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, var(--brand) 8%, rgba(232,163,52,.72) 52%, rgba(232,163,52,.42) 100%);
}
.cta--photo .cta__inner { z-index: 3; }
.cta__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  flex-wrap: wrap;
  padding-block: clamp(3rem, 6vw, 5.5rem);
}
.cta h2 { font-size: var(--fs-xl); text-transform: uppercase; letter-spacing: -.035em; max-width: 20ch; }
.cta p { margin-top: 1rem; max-width: 52ch; color: rgba(14,16,19,.72); }
.cta__deco {
  position: absolute;
  right: -6%; top: 50%;
  translate: 0 -50%;
  width: 44vw; max-width: 640px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.42), transparent 62%);
  pointer-events: none;
}
.cta .btn { --btn-bg: var(--ink); --btn-fg: #fff; }
.cta .btn::before { background: #fff; }
.cta .btn:hover { color: var(--ink); }

/* Botón secundario del CTA: contorno sobre el ámbar, no negro sobre negro */
.cta .btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  box-shadow: inset 0 0 0 1.5px rgba(14, 16, 19, .32);
}
.cta .btn--ghost::before { background: var(--ink); }
.cta .btn--ghost:hover { color: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }

/* ---------------------------------------------------------------
   19 · FORMULARIOS
   --------------------------------------------------------------- */
.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

.field { display: grid; gap: .45rem; }
.field label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.sec--dark .field label { color: rgba(255,255,255,.55); }
.field label .req { color: var(--brand); }

.field input, .field select, .field textarea {
  width: 100%;
  padding: .95rem 1.1rem;
  background: var(--paper);
  border: 1.5px solid var(--paper-line);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.sec--dark .field input, .sec--dark .field select, .sec--dark .field textarea {
  background: rgba(255,255,255,.05);
  border-color: var(--line);
  color: #fff;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(232,163,52,.16);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 17px;
  padding-right: 2.6rem;
}
.field .err-msg { font-size: var(--fs-xs); color: var(--err); }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--err); }

.consent { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--fs-xs); color: var(--text-soft); }
.consent input { width: 18px; height: 18px; flex: none; margin-top: 2px; accent-color: var(--brand); }
.sec--dark .consent { color: rgba(255,255,255,.55); }

/* Honeypot */
.hp { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; }

.alert {
  display: flex;
  gap: .85rem;
  padding: 1.05rem 1.3rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  border-left: 3px solid;
}
.alert .ico { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.alert--ok  { background: rgba(55,161,105,.10); border-color: var(--ok); color: #1F6B45; }
.alert--err { background: rgba(220,91,75,.10); border-color: var(--err); color: #9E3729; }
.sec--dark .alert--ok  { color: #8FE0B4; }
.sec--dark .alert--err { color: #F3A79B; }

/* Tarjetas de contacto */
.cinfo { display: grid; gap: 1px; background: var(--paper-line); border: 1px solid var(--paper-line); border-radius: var(--r); overflow: hidden; }
.cinfo__item { display: flex; gap: 1.1rem; padding: 1.5rem; background: var(--paper); transition: background var(--t-fast) var(--ease); }
.cinfo__item:hover { background: var(--paper-2); }
.cinfo__ico { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(232,163,52,.16); color: var(--brand-deep); }
.cinfo__item h4 { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; margin-bottom: .3rem; font-family: var(--font-body); }
.cinfo__item p, .cinfo__item a { font-size: var(--fs-base); font-weight: 500; }
.cinfo__item a:hover { color: var(--brand-deep); }

.map { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16/9; background: var(--paper-3); }
.map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(1) contrast(1.05); transition: filter var(--t) var(--ease); }
.map:hover iframe { filter: none; }

/* ---------------------------------------------------------------
   20 · PIE
   --------------------------------------------------------------- */
.ftr { background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.ftr__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
  gap: clamp(2rem, 4vw, 4rem);
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
}
.ftr__brand img { height: 42px; margin-bottom: 1.5rem; }
.ftr__brand p { font-size: var(--fs-sm); color: var(--text-invert-soft); max-width: 40ch; }

.ftr h4 {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 1.5rem;
  font-weight: 600;
}
.ftr__links { display: grid; gap: .8rem; }
.ftr__links a {
  font-size: var(--fs-sm);
  color: var(--text-invert-soft);
  display: inline-flex; align-items: center; gap: .55rem;
  transition: color var(--t-fast) var(--ease), gap var(--t-fast) var(--ease);
}
.ftr__links a::before {
  content: '';
  width: 5px; height: 5px;
  background: var(--brand);
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}
.ftr__links a:hover { color: #fff; gap: .75rem; }
.ftr__links a:hover::before { opacity: 1; }

.ftr__contact { display: grid; gap: 1rem; }
.ftr__contact div { display: flex; gap: .8rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--text-invert-soft); }
.ftr__contact .ico { width: 18px; height: 18px; color: var(--brand); flex: none; margin-top: 3px; }
.ftr__contact a:hover { color: #fff; }

.socials { display: flex; gap: .5rem; margin-top: 1.8rem; }
.socials a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  color: #fff;
  transition: all var(--t-fast) var(--ease);
}
.socials a:hover { background: var(--brand); color: var(--ink); transform: translateY(-3px); }
.socials .ico { width: 18px; height: 18px; }

.ftr__bot {
  border-top: 1px solid var(--line);
  padding-block: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.45);
}
.ftr__bot nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.ftr__bot a:hover { color: var(--brand); }

.ftr__credit { display: inline-flex; align-items: center; gap: .3rem; margin-left: .6rem; }
.ftr__credit::before { content: '·'; margin-right: .5rem; opacity: .5; }
.ftr__credit a { color: rgba(255,255,255,.62); transition: color var(--t-fast) var(--ease); }
.ftr__credit a:hover { color: var(--brand); }
.ftr__heart {
  color: #E0574B;
  font-size: 1.05em;
  line-height: 1;
  display: inline-block;
  animation: heartBeat 2.4s var(--ease-in-out) infinite;
}
@keyframes heartBeat {
  0%, 72%, 100% { transform: scale(1); }
  78%           { transform: scale(1.24); }
  84%           { transform: scale(1); }
  90%           { transform: scale(1.16); }
}
@media (max-width: 720px) {
  .ftr__credit { margin-left: 0; display: flex; margin-top: .3rem; }
  .ftr__credit::before { content: none; }
}

/* ---------------------------------------------------------------
   21 · FLOTANTES
   --------------------------------------------------------------- */
.totop {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 800;
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: all var(--t) var(--ease);
  box-shadow: var(--sh);
}
.totop.is-on { opacity: 1; visibility: visible; transform: none; }
.totop:hover { background: var(--brand); color: var(--ink); }
.totop .ico { width: 20px; height: 20px; transform: rotate(-90deg); }
.totop svg.ring { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); transform: rotate(-90deg); }
.totop .ring circle { fill: none; stroke: var(--brand); stroke-width: 2; }

/* Botón de WhatsApp: glifo blanco sobre verde de marca, como el oficial */
.wa {
  position: fixed;
  left: 22px; bottom: 22px;
  z-index: 800;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 14px 34px -12px rgba(37, 211, 102, .65);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.wa:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 18px 40px -12px rgba(37, 211, 102, .8);
}
.wa .ico { width: 30px; height: 30px; }
.wa span { display: none; }

/* Cursor personalizado */
.cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 9999;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brand);
  pointer-events: none;
  mix-blend-mode: difference;
  transition: width .3s var(--ease), height .3s var(--ease), opacity .3s;
  will-change: transform;
}
.cursor--ring {
  width: 38px; height: 38px;
  background: transparent;
  border: 1.5px solid var(--brand);
  mix-blend-mode: normal;
  opacity: .55;
}
.cursor.is-hot { width: 56px; height: 56px; opacity: .9; background: rgba(232,163,52,.15); }
@media (hover: none) { .cursor { display: none; } }

/* Preloader */
.preload {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: var(--ink);
  display: grid;
  place-items: center;
  transition: opacity .6s var(--ease), visibility .6s;
}
.preload.is-done { opacity: 0; visibility: hidden; }
.preload__logo { width: min(220px, 52vw); opacity: .96; }
.preload__bar {
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: 0;
  background: var(--brand);
  transition: width .3s linear;
}

/* Barra de progreso de lectura */
.rprog {
  position: fixed;
  top: 0; left: 0;
  z-index: 950;
  height: 3px;
  width: 0;
  background: var(--brand);
  transition: width .1s linear;
}

/* ---------------------------------------------------------------
   22 · ANIMACIONES DE ENTRADA
   --------------------------------------------------------------- */
[data-anim] {
  opacity: 0;
  transition: opacity .85s var(--ease-out), transform .85s var(--ease-out);
  will-change: opacity, transform;
}
[data-anim="up"]    { transform: translateY(38px); }
[data-anim="down"]  { transform: translateY(-30px); }
[data-anim="left"]  { transform: translateX(-46px); }
[data-anim="right"] { transform: translateX(46px); }
[data-anim="zoom"]  { transform: scale(.93); }
[data-anim="fade"]  { transform: none; }
[data-anim="clip"]  { clip-path: inset(0 0 100% 0); opacity: 1; transform: none;
                      transition: clip-path 1.1s var(--ease-out); }

[data-anim].is-in {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}

/* Revelado de texto por línea */
.reveal-line { display: block; overflow: hidden; }
.reveal-line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1s var(--ease-out);
}
.is-in .reveal-line > span,
.reveal-line.is-in > span { transform: none; }
.reveal-line:nth-child(2) > span { transition-delay: .09s; }
.reveal-line:nth-child(3) > span { transition-delay: .18s; }
.reveal-line:nth-child(4) > span { transition-delay: .27s; }

/* Retardos escalonados */
[data-delay="1"] { transition-delay: .09s; }
[data-delay="2"] { transition-delay: .18s; }
[data-delay="3"] { transition-delay: .27s; }
[data-delay="4"] { transition-delay: .36s; }
[data-delay="5"] { transition-delay: .45s; }
[data-delay="6"] { transition-delay: .54s; }

/* Parallax suave */
[data-parallax] { will-change: transform; }

/* ---------------------------------------------------------------
   23 · UTILIDADES
   --------------------------------------------------------------- */
.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;
}
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: .6rem; }
.mt-2 { margin-top: 1.2rem; }
.mt-3 { margin-top: 2rem; }
.mt-4 { margin-top: 3rem; }
.mb-2 { margin-bottom: 1.2rem; }
.mb-3 { margin-bottom: 2rem; }
.tc { text-align: center; }
.mx-auto { margin-inline: auto; }
.rel { position: relative; }

.divider { height: 1px; background: var(--paper-line); }
.sec--dark .divider { background: var(--line); }

/* Estado vacío */
.empty {
  padding: clamp(3rem, 6vw, 5rem);
  text-align: center;
  border: 1.5px dashed var(--paper-line);
  border-radius: var(--r-lg);
  color: var(--text-faint);
}
.empty .ico { width: 40px; height: 40px; margin: 0 auto 1rem; opacity: .5; }

/* ---------------------------------------------------------------
   24 · RESPONSIVE
   --------------------------------------------------------------- */
@media (max-width: 1180px) {
  .railbar { display: none; }
  .ftr__top { grid-template-columns: 1.4fr 1fr 1.3fr; }
  .ftr__brand { grid-column: 1 / -1; }
  .proj--wide { grid-column: span 2; }
}

@media (max-width: 1024px) {
  :root { --header-h: 74px; }
  .nav { display: none; }
  .burger { display: grid; }
  .svc-grid, .proj-grid, .posts, .quotes { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--paper-line); }
  .split { grid-template-columns: 1fr; gap: 2.5rem; }
  .split--rev .figure { order: -1; }
  .figure { aspect-ratio: 16/10; }
  .g-4 { grid-template-columns: repeat(2, 1fr); }
  .g-3 { grid-template-columns: repeat(2, 1fr); }
  .hero__ghost { display: none; }
  .cursor { display: none; }
}

@media (max-width: 720px) {
  :root { --header-h: 66px; --section: clamp(3.5rem, 12vw, 5rem); }
  .svc-grid, .proj-grid, .posts, .quotes,
  .steps, .stats, .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-top: 1px solid var(--paper-line); }
  .stat:first-child { border-top: 0; }
  .proj--wide { grid-column: span 1; aspect-ratio: 4/4.2; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
  .form__row { grid-template-columns: 1fr; }
  .cta__inner { flex-direction: column; align-items: flex-start; }
  .ftr__top { grid-template-columns: 1fr; }
  .ftr__bot { flex-direction: column; align-items: flex-start; text-align: left; }
  .hero { min-height: 88svh; }
  .hero__title { font-size: clamp(2.4rem, 12vw, 3.6rem); }
  .article__meta { gap: .4rem 1rem; }
  .totop { right: 14px; bottom: 14px; width: 44px; height: 44px; }
  .wa { left: 14px; bottom: 14px; width: 50px; height: 50px; }
  .wa .ico { width: 27px; height: 27px; }
}

@media (max-width: 420px) {
  .btn { padding: .85rem 1.2rem; font-size: var(--fs-xs); }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { justify-content: center; }
}

/* ---------------------------------------------------------------
   25 · ACCESIBILIDAD Y PREFERENCIAS
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-anim] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .reveal-line > span { transform: none !important; }
  .cursor, .preload { display: none !important; }
}

body.no-anim [data-anim] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
body.no-anim .reveal-line > span { transform: none !important; }

/* ---------------------------------------------------------------
   26 · IMPRESIÓN
   --------------------------------------------------------------- */
@media print {
  .hdr, .ftr, .railbar, .totop, .wa, .cursor, .preload, .cta { display: none !important; }
  body { background: #fff; color: #000; }
  .sec { padding-block: 1.5rem; }
  a::after { content: ' (' attr(href) ')'; font-size: .8em; color: #666; }
}