/* =========================================================================
   HOMOLOGAR SRL — Hoja de estilos principal
   Vanilla CSS. Sin frameworks. Mobile-first y responsive con clamp().
   Paleta: azul corporativo refinado + acento teal.
   ========================================================================= */

/* ----- Tokens / variables ----- */
:root {
  /* Marca */
  --brand-900: #0b2440;
  --brand-800: #0f2f54;
  --brand-700: #123a63;
  --brand-600: #15538c;
  --brand-500: #1466b0;
  --brand-400: #3b86cc;
  --accent-600: #008a96;
  --accent-500: #00a8b5;
  --accent-400: #2bc4cf;

  /* Neutros */
  --ink: #0f1b2a;
  --slate: #334155;
  --muted: #5b6b7f;
  --line: #e2e8f0;
  --line-strong: #cbd6e2;
  --bg: #ffffff;
  --bg-soft: #f4f8fc;
  --bg-deep: #0b2440;
  --white: #ffffff;

  /* Tipografía fluida */
  --font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif;
  --fs-900: clamp(2.1rem, 1.4rem + 3.2vw, 3.6rem);
  --fs-800: clamp(1.7rem, 1.2rem + 2.2vw, 2.6rem);
  --fs-700: clamp(1.35rem, 1.1rem + 1.1vw, 1.8rem);
  --fs-600: clamp(1.15rem, 1rem + 0.6vw, 1.35rem);
  --fs-500: clamp(1.02rem, 0.97rem + 0.25vw, 1.13rem);
  --fs-400: 1rem;
  --fs-300: 0.9rem;

  /* Layout */
  --maxw: 1140px;
  --gap: clamp(1rem, 0.6rem + 1.6vw, 2rem);
  --section-y: clamp(3rem, 2rem + 5vw, 6rem);
  --radius: 14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 3px rgba(15, 27, 42, 0.06),
    0 1px 2px rgba(15, 27, 42, 0.08);
  --shadow-md: 0 10px 30px -12px rgba(15, 27, 42, 0.18);
  --shadow-lg: 0 24px 60px -20px rgba(11, 36, 64, 0.35);
  --ring: 0 0 0 3px rgba(20, 102, 176, 0.35);
  --transition: 200ms ease;
}

/* ----- Reset moderado ----- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 90px;
}
body {
  font-family: var(--font-sans);
  font-size: var(--fs-400);
  line-height: 1.65;
  color: var(--slate);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,
svg,
picture {
  max-width: 100%;
  display: block;
}
a {
  color: var(--brand-500);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover {
  color: var(--brand-700);
}
h1,
h2,
h3,
h4 {
  color: var(--ink);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.01em;
}
ul {
  list-style: none;
  padding: 0;
}
:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: 4px;
}

/* Respeta prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ----- Utilidades ----- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 0.6rem + 2vw, 2rem);
}
.section {
  padding-block: var(--section-y);
}
.section--soft {
  background: var(--bg-soft);
}
.section--deep {
  background: linear-gradient(160deg, var(--brand-900), var(--brand-700));
  color: #d7e3f0;
}
.section--deep h2,
.section--deep h3 {
  color: #fff;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-300);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-600);
  margin-bottom: 0.75rem;
}
.section--deep .eyebrow {
  color: var(--accent-400);
}
.section-head {
  max-width: 760px;
  margin-bottom: clamp(2rem, 1.4rem + 2vw, 3rem);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head h2 {
  font-size: var(--fs-800);
}
.section-head p {
  font-size: var(--fs-500);
  color: var(--muted);
  margin-top: 0.85rem;
}
.section--deep .section-head p {
  color: #b9cbe0;
}
.lead {
  font-size: var(--fs-600);
  color: var(--muted);
}
.text-center {
  text-align: center;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: 1rem;
  top: -60px;
  z-index: 1000;
  background: var(--brand-700);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 0 0 8px 8px;
  transition: top var(--transition);
}
.skip-link:focus {
  top: 0;
  color: #fff;
}

/* ----- Botones ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font: inherit;
  font-weight: 600;
  font-size: var(--fs-400);
  line-height: 1;
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition),
    border-color var(--transition), box-shadow var(--transition);
  white-space: nowrap;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0);
}
.btn--primary {
  background: var(--brand-500);
  color: #fff;
  box-shadow: 0 8px 20px -8px rgba(20, 102, 176, 0.7);
}
.btn--primary:hover {
  background: var(--brand-600);
  color: #fff;
}
.btn--accent {
  background: var(--accent-500);
  color: #04282b;
}
.btn--accent:hover {
  background: var(--accent-400);
  color: #04282b;
}
.btn--ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn--ghost:hover {
  border-color: var(--brand-500);
  color: var(--brand-600);
}
.btn--on-dark {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}
.btn--on-dark:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* ----- Header / nav ----- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--transition);
}
.site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 68px;
}
.nav__brand {
  display: inline-flex;
  align-items: center;
}
.nav__brand img {
  height: 30px;
  width: auto;
}
.nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 0.1rem + 1vw, 1.4rem);
}
.nav__link {
  color: var(--slate);
  font-weight: 500;
  font-size: var(--fs-400);
  padding: 0.4rem 0.2rem;
  position: relative;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--accent-500);
  transition: width var(--transition);
}
.nav__link:hover {
  color: var(--brand-700);
}
.nav__link:hover::after {
  width: 100%;
}
.nav__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.lang-switch {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  overflow: hidden;
  font-size: var(--fs-300);
  font-weight: 600;
}
.lang-switch a {
  padding: 0.3rem 0.6rem;
  color: var(--muted);
  background: transparent;
}
.lang-switch a[aria-current="true"] {
  background: var(--brand-500);
  color: #fff;
}
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  margin-inline: auto;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ----- Hero ----- */
.hero {
  position: relative;
  background: radial-gradient(
      1200px 600px at 80% -10%,
      rgba(0, 168, 181, 0.12),
      transparent 60%
    ),
    linear-gradient(165deg, #f7fbff 0%, #eef5fb 60%, #e7f0f8 100%);
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(20, 102, 176, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 102, 176, 0.1) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(
    700px 400px at 75% 0%,
    rgba(0, 0, 0, 0.5),
    transparent 70%
  );
  mask-image: radial-gradient(
    700px 400px at 75% 0%,
    rgba(0, 0, 0, 0.5),
    transparent 70%
  );
  opacity: 0.55;
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  padding-block: clamp(3rem, 2rem + 5vw, 6rem);
}
.hero__title {
  font-size: var(--fs-900);
  letter-spacing: -0.02em;
}
.hero__title .accent {
  color: var(--brand-500);
}
.hero__sub {
  margin-top: 1.25rem;
  font-size: var(--fs-600);
  color: var(--slate);
  max-width: 38ch;
}
.hero__cta {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.hero__panel {
  background: linear-gradient(160deg, var(--brand-800), var(--brand-600));
  color: #eaf2fb;
  border-radius: var(--radius);
  padding: clamp(1.4rem, 1rem + 1.5vw, 2.2rem);
  box-shadow: var(--shadow-lg);
}
.hero__panel h2 {
  color: #fff;
  font-size: var(--fs-600);
  margin-bottom: 1.1rem;
}
.hero__panel ul {
  display: grid;
  gap: 0.85rem;
}
.hero__panel li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: var(--fs-400);
  color: #d7e6f5;
}
.hero__panel li svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--accent-400);
}

/* Capas decorativas del hero (blueprint: malla de red + señal RF + sello) */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero__bg > * {
  position: absolute;
}
.hero__mesh {
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
}
.hero__seal {
  right: -3%;
  bottom: -8%;
  width: min(46vmin, 400px);
  height: auto;
  opacity: 0.1;
}
.hero__waves {
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__waves .wave {
  opacity: 0.14;
  animation: sig 5s ease-in-out infinite;
}
.hero__waves .wave:nth-child(2) { animation-delay: 0.55s; }
.hero__waves .wave:nth-child(3) { animation-delay: 1.1s; }
.hero__waves .wave:nth-child(4) { animation-delay: 1.65s; }
@keyframes sig {
  0%, 100% { opacity: 0.06; }
  50% { opacity: 0.42; }
}

/* Fondo decorativo "blueprint" reutilizable para secciones claras
   (malla de red + ondas de señal + sello de certificación + grilla),
   todo vectorial vía data-URI: se define una sola vez y se aplica por clase. */
.section--has-deco {
  position: relative;
  isolation: isolate;
}
.section--has-deco > .container {
  position: relative;
  z-index: 1;
}
.section__deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='rgba(21,83,140,0.14)' stroke-width='3'%3E%3Ccircle cx='100' cy='100' r='80'/%3E%3Ccircle cx='100' cy='100' r='66' stroke-dasharray='3 7'/%3E%3C/g%3E%3Cpath d='M68 102 l20 20 l44 -50' fill='none' stroke='rgba(0,168,181,0.2)' stroke-width='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='rgba(0,168,181,0.16)' stroke-width='2'%3E%3Ccircle cx='600' cy='0' r='160'/%3E%3Ccircle cx='600' cy='0' r='270'/%3E%3Ccircle cx='600' cy='0' r='380'/%3E%3Ccircle cx='600' cy='0' r='490'/%3E%3C/g%3E%3Ccircle cx='600' cy='0' r='6' fill='rgba(0,168,181,0.45)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 760' preserveAspectRatio='xMidYMid slice'%3E%3Cg stroke='rgba(20,102,176,0.13)' stroke-width='1' fill='none'%3E%3Cpath d='M90 150 L330 250 L250 470 M330 250 L585 165 L840 300 M585 165 L660 430 M840 300 L1095 215 L1300 360 M840 300 L915 540 M1095 215 L1210 110 M250 470 L660 430 L915 540 L1230 610 M915 540 L1300 360 M660 430 L585 165 M1230 610 L1300 360'/%3E%3C/g%3E%3Cg fill='rgba(59,134,204,0.4)'%3E%3Ccircle cx='90' cy='150' r='3'/%3E%3Ccircle cx='330' cy='250' r='3'/%3E%3Ccircle cx='250' cy='470' r='3'/%3E%3Ccircle cx='660' cy='430' r='3'/%3E%3Ccircle cx='840' cy='300' r='3'/%3E%3Ccircle cx='1210' cy='110' r='3'/%3E%3Ccircle cx='1300' cy='360' r='3'/%3E%3Ccircle cx='1230' cy='610' r='3'/%3E%3C/g%3E%3Cg fill='rgba(0,168,181,0.45)'%3E%3Ccircle cx='585' cy='165' r='5'/%3E%3Ccircle cx='915' cy='540' r='5'/%3E%3Ccircle cx='1095' cy='215' r='4.5'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(rgba(20, 102, 176, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 102, 176, 0.045) 1px, transparent 1px);
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
  background-position:
    right -28px bottom -28px,
    right -55px top -55px,
    center,
    top left,
    top left;
  background-size:
    300px 300px,
    520px 520px,
    cover,
    52px 52px,
    52px 52px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
}

/* ----- Trust / stats ----- */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  text-align: center;
}
.stat {
  padding: 1rem;
}
.stat__num {
  font-size: var(--fs-800);
  font-weight: 800;
  color: var(--brand-500);
  letter-spacing: -0.02em;
}
.stat__label {
  font-size: var(--fs-400);
  color: var(--muted);
  margin-top: 0.3rem;
}

/* ----- Grids genéricos ----- */
.grid {
  display: grid;
  gap: var(--gap);
}
.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

/* ----- Pilares ----- */
.pillar {
  text-align: center;
  padding: 1.4rem;
}
.pillar__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(160deg, #e7f3f5, #d2ecef);
  color: var(--accent-600);
}
.pillar h3 {
  font-size: var(--fs-600);
  margin-bottom: 0.4rem;
}

/* ----- Cards de servicio ----- */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.3rem, 1rem + 1vw, 1.9rem);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition),
    border-color var(--transition);
  height: 100%;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}
.card__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(160deg, var(--brand-500), var(--brand-700));
  color: #fff;
  margin-bottom: 1.1rem;
}
.card h3 {
  font-size: var(--fs-600);
  margin-bottom: 0.6rem;
}
.card p {
  color: var(--muted);
}
.card ul {
  margin-top: 0.9rem;
  display: grid;
  gap: 0.5rem;
}
.card ul li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--slate);
  font-size: var(--fs-400);
}
.card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-500);
}

/* Tarjeta destacada con dato estadístico */
.highlight {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 0.5rem + 2vw, 2.4rem);
  align-items: center;
  background: linear-gradient(160deg, var(--brand-900), var(--brand-700));
  color: #dce7f3;
  border-radius: var(--radius);
  padding: clamp(1.6rem, 1.2rem + 2vw, 2.8rem);
  box-shadow: var(--shadow-lg);
}
.highlight__big {
  font-size: clamp(3rem, 2rem + 5vw, 5rem);
  font-weight: 800;
  color: var(--accent-400);
  line-height: 1;
  letter-spacing: -0.03em;
}
.highlight h3 {
  color: #fff;
  font-size: var(--fs-700);
  margin-bottom: 0.6rem;
}

/* ----- "Por qué nosotros" lista ----- */
.checklist {
  display: grid;
  gap: 1rem;
}
.checklist li {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
}
.checklist li svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--accent-600);
}
.checklist li strong {
  color: var(--ink);
}

/* ----- FAQ (acordeón con <details>) ----- */
.faq {
  display: grid;
  gap: 0.8rem;
  max-width: 820px;
  margin-inline: auto;
}
.faq details {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color var(--transition);
}
.faq details[open] {
  border-color: var(--brand-400);
  box-shadow: var(--shadow-sm);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 1.3rem;
  font-weight: 600;
  color: var(--ink);
  font-size: var(--fs-500);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--brand-500);
  transition: transform var(--transition);
  line-height: 1;
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}
.faq details p {
  padding: 0 1.3rem 1.2rem;
  color: var(--muted);
  margin: 0;
}

/* ----- Contacto ----- */
.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: start;
}
.contact__cards {
  display: grid;
  gap: 1rem;
}
.contact__item {
  display: flex;
  gap: 1rem;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.2rem;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), transform var(--transition);
}
.contact__item:hover {
  border-color: var(--brand-400);
  transform: translateY(-2px);
}
.contact__ic {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(160deg, #e7f3f5, #d2ecef);
  color: var(--accent-600);
}
.contact__item .label {
  font-size: var(--fs-300);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.contact__item .value {
  font-size: var(--fs-500);
  font-weight: 600;
  color: var(--ink);
  word-break: break-word;
}
.contact__item a.value:hover {
  color: var(--brand-600);
}
.contact__aside {
  background: linear-gradient(160deg, var(--brand-800), var(--brand-600));
  color: #e6eff8;
  border-radius: var(--radius);
  padding: clamp(1.4rem, 1rem + 1.5vw, 2.2rem);
  box-shadow: var(--shadow-md);
}
.contact__aside h3 {
  color: #fff;
  font-size: var(--fs-700);
  margin-bottom: 0.7rem;
}
.contact__aside .btn {
  margin-top: 1.2rem;
  width: 100%;
}
.contact__address {
  font-style: normal;
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: var(--fs-400);
  color: #cfe0f1;
}

/* Formulario (preparado para activar en Hostinger) */
.contact-form {
  display: grid;
  gap: 0.9rem;
}
.contact-form label {
  font-weight: 600;
  font-size: var(--fs-300);
  color: var(--ink);
  display: block;
  margin-bottom: 0.3rem;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  font: inherit;
  padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: var(--ring);
}
.hp {
  position: absolute;
  left: -9999px;
}

/* ----- Botón flotante: volver arriba ----- */
.to-top {
  position: fixed;
  right: clamp(1rem, 0.5rem + 1vw, 1.6rem);
  bottom: clamp(1rem, 0.5rem + 1vw, 1.6rem);
  z-index: 90;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--brand-600);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transition), transform var(--transition),
    visibility var(--transition);
}
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ----- Footer ----- */
.site-footer {
  background: var(--bg-deep);
  color: #aebfd2;
  padding-block: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer__brand img {
  height: 28px;
  filter: brightness(0) invert(1);
  opacity: 0.92;
  margin-bottom: 1rem;
}
.footer__brand p {
  max-width: 36ch;
  font-size: var(--fs-400);
}
.footer h4 {
  color: #fff;
  font-size: var(--fs-400);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
}
.footer ul {
  display: grid;
  gap: 0.6rem;
}
.footer a {
  color: #aebfd2;
}
.footer a:hover {
  color: #fff;
}
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem;
  padding-top: 1.5rem;
  font-size: var(--fs-300);
  color: #8499b2;
}

/* ----- Animaciones on-scroll (progresivas) ----- */
/* Solo se ocultan si hay JS (clase .js en <html>); sin JS, todo visible. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 960px) {
  .hero__inner {
    grid-template-columns: 1fr;
  }
  .hero__sub {
    max-width: 52ch;
  }
  .footer__top {
    grid-template-columns: 1fr 1fr;
  }
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 820px) {
  .nav__menu {
    position: fixed;
    inset: 68px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    padding: 0.5rem 1.1rem 1.1rem;
    transform: translateY(-130%);
    transition: transform 280ms ease;
    max-height: calc(100dvh - 68px);
    overflow-y: auto;
  }
  .nav__menu.is-open {
    transform: translateY(0);
  }
  .nav__link {
    padding: 0.85rem 0.2rem;
    border-bottom: 1px solid var(--line);
    font-size: 1.05rem;
  }
  .nav__link::after {
    display: none;
  }
  .nav__toggle {
    display: flex;
  }
  .contact {
    grid-template-columns: 1fr;
  }
  .highlight {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

@media (max-width: 680px) {
  .grid--3,
  .grid--2,
  .grid--4 {
    grid-template-columns: 1fr;
  }
  .stats {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .stat {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.6rem;
  }
  .footer__top {
    grid-template-columns: 1fr;
  }
  .hero__cta .btn {
    width: 100%;
  }
}

/* Pantallas muy grandes: limitar ancho de lectura y agrandar */
@media (min-width: 1600px) {
  :root {
    --maxw: 1280px;
  }
}