@charset "utf-8";
/* ============================================================================
   SERVIMEC — Centro de Servicio
   Hoja de estilos principal (rediseño 2025)
   ---------------------------------------------------------------------------
   Índice
   01. Tokens de diseño (variables)
   02. Reset y base
   03. Utilidades y layout
   04. Botones
   05. Encabezado / navegación
   06. Hero
   07. Cinta de marcas
   08. Secciones y títulos
   09. Bienvenida
   10. Tarjetas de servicios
   11. Garantía / beneficios
   12. Proceso
   13. Cifras
   14. Ubicación y datos
   15. Llamado a la acción
   16. Formulario de contacto
   17. Pie de página
   18. Animaciones y accesibilidad
   ========================================================================= */

/* ============================ 01. TOKENS ================================= */
:root {
  /* Marca */
  --navy-900: #0b1826;
  --navy-800: #102338;
  --navy-700: #132d4d;
  --navy-600: #1c3c60;
  --steel-500: #5e7086;
  --steel-400: #7d8fa4;
  --steel-300: #a9b6c4;

  /* Acento */
  --accent: #e63946;
  --accent-dark: #c62b38;
  --accent-soft: #ff6b76;

  /* Neutrales */
  --white: #ffffff;
  --gray-50: #f6f8fa;
  --gray-100: #eef1f5;
  --gray-200: #dfe4ea;
  --gray-300: #c6ced8;
  --gray-500: #6b7683;
  --gray-700: #3a4450;

  /* Tipografía */
  --font-display: "Oswald", "Arial Narrow", Impact, sans-serif;
  --font-body: "Barlow", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Medidas */
  --wrap: 1200px;
  --wrap-narrow: 880px;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --header-h: 78px;

  /* Sombras */
  --shadow-sm: 0 2px 8px rgba(11, 24, 38, 0.08);
  --shadow: 0 12px 32px rgba(11, 24, 38, 0.12);
  --shadow-lg: 0 24px 60px rgba(11, 24, 38, 0.18);
  --shadow-accent: 0 12px 28px rgba(230, 57, 70, 0.32);

  /* Transiciones */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 0.18s var(--ease);
  --t: 0.32s var(--ease);
  --t-slow: 0.6s var(--ease);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
  /* "clip" evita el desbordamiento lateral sin crear un contenedor de
     desplazamiento, de modo que la cabecera fija (sticky) sigue funcionando. */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--gray-700);
  background-color: var(--gray-50);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg,
iframe {
  max-width: 100%;
  display: block;
}

img {
  height: auto;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  color: var(--navy-700);
  margin: 0 0 0.5em;
  letter-spacing: 0.01em;
}

h1 {
  font-size: clamp(2.1rem, 5.2vw, 3.85rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.65rem);
  text-transform: uppercase;
}
h3 {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  text-transform: uppercase;
}

p {
  margin: 0 0 1.1em;
}
p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--navy-600);
  text-decoration: none;
  transition: color var(--t-fast);
}
a:hover {
  color: var(--accent);
}

ul,
ol {
  margin: 0 0 1em;
  padding-left: 1.2em;
}

strong {
  color: var(--navy-700);
}

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

/* Barra de desplazamiento */
::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
::-webkit-scrollbar-track {
  background: var(--gray-100);
}
::-webkit-scrollbar-thumb {
  background: var(--steel-500);
  border-radius: 99px;
  border: 3px solid var(--gray-100);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--navy-600);
}

/* ============================ 03. UTILIDADES ============================ */
.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}
.wrap--narrow {
  width: min(100% - 2.5rem, var(--wrap-narrow));
  margin-inline: auto;
}

.section {
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
  position: relative;
}
.section--tint {
  background: var(--gray-100);
}
.section--navy {
  background: var(--navy-800);
  color: var(--steel-300);
}
.section--navy h2,
.section--navy h3 {
  color: var(--white);
}

.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;
  top: -100px;
  left: 1rem;
  z-index: 999;
  background: var(--accent);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 600;
  transition: top var(--t);
}
.skip-link:focus {
  top: 0;
  color: var(--white);
}

/* ============================ 04. BOTONES =============================== */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.9rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 2px solid var(--btn-bg);
  border-radius: 99px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t), box-shadow var(--t), background var(--t),
    border-color var(--t), color var(--t);
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.18);
  transform: translateX(-101%) skewX(-18deg);
  transition: transform 0.5s var(--ease);
}
.btn:hover::after {
  transform: translateX(101%) skewX(-18deg);
}
.btn:hover {
  transform: translateY(-3px);
  color: var(--btn-fg);
}
.btn--primary {
  box-shadow: var(--shadow-accent);
}
.btn--primary:hover {
  --btn-bg: var(--accent-dark);
  --btn-fg: var(--white);
  border-color: var(--accent-dark);
  box-shadow: 0 18px 38px rgba(230, 57, 70, 0.42);
}
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--white);
  border-color: rgba(255, 255, 255, 0.55);
}
.btn--ghost:hover {
  --btn-bg: var(--white);
  --btn-fg: var(--navy-700);
  border-color: var(--white);
}
.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--navy-700);
  border-color: var(--gray-300);
}
.btn--outline:hover {
  --btn-bg: var(--navy-700);
  --btn-fg: var(--white);
  border-color: var(--navy-700);
}
.btn--sm {
  padding: 0.7rem 1.35rem;
  font-size: 0.85rem;
}
.btn--block {
  width: 100%;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.btn-row--center {
  justify-content: center;
}

/* Enlace con flecha */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--accent);
}
.link-arrow svg {
  transition: transform var(--t);
}
.link-arrow:hover svg {
  transform: translateX(5px);
}

/* ============================ 05. ENCABEZADO ============================ */
.topbar {
  background: var(--navy-900);
  color: var(--steel-300);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 40px;
  padding-block: 0.35rem;
}
.topbar__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.topbar__list li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.topbar__list svg {
  flex: none;
  color: var(--steel-400);
}
.topbar a {
  color: var(--steel-300);
}
.topbar a:hover {
  color: var(--white);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(19, 45, 77, 0.92);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background var(--t), box-shadow var(--t);
}
.site-header.is-stuck {
  background: rgba(11, 24, 38, 0.97);
  box-shadow: 0 10px 30px rgba(11, 24, 38, 0.35);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex: none;
}
.brand img {
  width: auto;
  height: 46px;
  filter: brightness(0) invert(1);
  opacity: 0.96;
  transition: opacity var(--t);
}
.brand:hover img {
  opacity: 1;
}
.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.brand__name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--white);
  text-transform: uppercase;
}
.brand__tag {
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--steel-400);
}

.nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}
.nav__link {
  position: relative;
  padding: 0.6rem 1.05rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  border-radius: 99px;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.28rem;
  width: 0;
  height: 2px;
  background: var(--accent);
  transform: translateX(-50%);
  transition: width var(--t);
}
.nav__link:hover {
  color: var(--white);
}
.nav__link:hover::after {
  width: 42%;
}
.nav__link.is-active {
  color: var(--white);
}
.nav__link.is-active::after {
  width: 42%;
}

.header__cta {
  flex: none;
  margin-left: 0.75rem;
}

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-sm);
  cursor: pointer;
  position: relative;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: transform var(--t), opacity var(--t), top var(--t);
}
.nav-toggle span {
  top: 50%;
  margin-top: -1px;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  left: 0;
  transform: none;
}
.nav-toggle span::before {
  top: -7px;
}
.nav-toggle span::after {
  top: 7px;
}
.nav-toggle.is-open span {
  background: transparent;
}
.nav-toggle.is-open span::before {
  top: 0;
  transform: rotate(45deg);
}
.nav-toggle.is-open span::after {
  top: 0;
  transform: rotate(-45deg);
}

/* ============================== 06. HERO =============================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: radial-gradient(
      120% 120% at 12% 0%,
      var(--navy-700) 0%,
      var(--navy-800) 42%,
      var(--navy-900) 100%
    );
  color: var(--white);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
      70% 90% at 88% 22%,
      rgba(94, 112, 134, 0.32),
      transparent 62%
    ),
    radial-gradient(
      46% 70% at 96% 88%,
      rgba(230, 57, 70, 0.22),
      transparent 66%
    );
}
.hero__inner {
  position: relative;
  z-index: 2;
  /* El ancho lo aporta .wrap; no fijar width:100% aquí, porque anularía
     el ancho máximo y el relleno lateral de .wrap. */
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
.hero__content {
  max-width: 40rem;
}
.hero__art {
  position: relative;
  margin: 0;
}
.hero__art img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 70px rgba(4, 12, 22, 0.55);
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.4rem;
  padding: 0.5rem 1.1rem 0.5rem 0.55rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 99px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel-300);
  backdrop-filter: blur(6px);
}
.hero__eyebrow b {
  display: inline-grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 600;
}
.hero h1 {
  color: var(--white);
  margin-bottom: 0.55rem;
  text-wrap: balance;
}
.hero h1 em {
  font-style: normal;
  display: block;
  color: var(--accent-soft);
}
.hero__lead {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  color: rgba(255, 255, 255, 0.82);
  max-width: 38rem;
  margin-bottom: 2rem;
}
.hero__points {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.9rem;
  margin: 0 0 2.2rem;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.9);
}
.hero__points li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.hero__points svg {
  flex: none;
  color: var(--accent-soft);
}

/* ========================= 07. CINTA DE MARCAS ========================= */
.marquee {
  background: var(--navy-900);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding: 1.1rem 0;
  overflow: hidden;
  position: relative;
  max-width: 100%;
  contain: paint;
}
.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 90px;
  z-index: 2;
  pointer-events: none;
}
.marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--navy-900), transparent);
}
.marquee::after {
  right: 0;
  background: linear-gradient(270deg, var(--navy-900), transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: 3.5rem;
  animation: marquee 34s linear infinite;
}
.marquee:hover .marquee__track {
  animation-play-state: paused;
}
.marquee__item {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.34);
  white-space: nowrap;
  transition: color var(--t);
}
.marquee__item:hover {
  color: var(--white);
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* ====================== 08. SECCIONES Y TÍTULOS ======================== */
.section-head {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.9rem;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--accent);
}
.section-head--center .eyebrow::after {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--accent);
}
.section-head p {
  font-size: 1.06rem;
  color: var(--gray-500);
}
.section--navy .section-head p {
  color: var(--steel-300);
}

/* ========================== 09. BIENVENIDA ============================= */
.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split--reverse .split__media {
  order: -1;
}

.split__media {
  position: relative;
}
.split__frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.split__frame img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--t-slow);
}
/* Marco para ilustraciones: fondo claro y la ilustración completa */
.split__frame--art {
  background: linear-gradient(155deg, var(--gray-100), var(--gray-200));
  padding: clamp(0.75rem, 2vw, 1.5rem);
}
.split__frame--art img {
  aspect-ratio: auto;
  object-fit: contain;
}
.split__media:hover .split__frame img {
  transform: scale(1.04);
}
.split__media::before {
  content: "";
  position: absolute;
  inset: auto -1.1rem -1.1rem auto;
  width: 58%;
  height: 58%;
  border: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  z-index: -1;
}
.split__badge {
  position: absolute;
  left: -1rem;
  bottom: -1.2rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.4rem;
  background: var(--navy-700);
  color: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.split__badge strong {
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--accent-soft);
}
.split__badge span {
  font-size: 0.78rem;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel-300);
}

.checklist {
  display: grid;
  gap: 0.7rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}
.checklist li {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  font-size: 1rem;
}
.checklist svg {
  flex: none;
  margin-top: 0.28rem;
  color: var(--accent);
}

/* ====================== 10. TARJETAS DE SERVICIOS ====================== */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 1.6rem;
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--steel-500));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t);
  z-index: 2;
}
.card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.card:hover::before {
  transform: scaleX(1);
}

.card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--navy-800);
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.card:hover .card__media img {
  transform: scale(1.08);
}
/* Tarjetas con ilustración: fondo claro y la ilustración completa (sin recorte) */
.card--art .card__media {
  aspect-ratio: 4 / 3;
  background: linear-gradient(160deg, var(--gray-100), var(--gray-200));
  padding: 0.75rem;
}
.card--art .card__media img {
  object-fit: contain;
}
.card:hover.card--art .card__media img {
  transform: scale(1.04);
}
.card--art .card__media::after {
  background: none;
}
.card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(11, 24, 38, 0.75),
    rgba(11, 24, 38, 0) 62%
  );
}

.card__body {
  padding: 1.6rem 1.5rem 1.7rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card__body h3 {
  margin-bottom: 0.55rem;
  font-size: 1.2rem;
}
.card__body p {
  color: var(--gray-500);
  font-size: 0.97rem;
  margin-bottom: 1.2rem;
}
.card__list {
  margin: 0 0 1.4rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.4rem;
  font-size: 0.92rem;
  color: var(--gray-700);
}
.card__list li {
  position: relative;
  padding-left: 1.3rem;
}
.card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--steel-400);
}
.card__foot {
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid var(--gray-200);
}

/* ====================== 11. GARANTÍA / BENEFICIOS ===================== */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}
.feature {
  padding: 1.9rem 1.6rem;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  transition: background var(--t), transform var(--t), border-color var(--t);
}
.feature:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(230, 57, 70, 0.5);
  transform: translateY(-6px);
}
.feature__icon {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  margin-bottom: 1.2rem;
  border-radius: 13px;
  background: rgba(230, 57, 70, 0.16);
  color: var(--accent-soft);
  transition: background var(--t), color var(--t);
}
.feature:hover .feature__icon {
  background: var(--accent);
  color: var(--white);
}
.feature h3 {
  font-size: 1.12rem;
  margin-bottom: 0.5rem;
}
.feature p {
  font-size: 0.95rem;
  color: var(--steel-300);
  margin: 0;
}

/* ============================ 12. PROCESO ============================== */
.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem;
  position: relative;
}
.step {
  position: relative;
  padding: 2.1rem 1.5rem 1.6rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), box-shadow var(--t);
}
.step:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  position: absolute;
  top: -1.35rem;
  left: 1.5rem;
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  background: var(--navy-700);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  box-shadow: var(--shadow-sm);
  transition: background var(--t);
}
.step:hover::before {
  background: var(--accent);
}
.step h3 {
  font-size: 1.05rem;
  margin-bottom: 0.45rem;
}
.step p {
  font-size: 0.94rem;
  color: var(--gray-500);
  margin: 0;
}

/* ============================= 13. CIFRAS ============================== */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  text-align: center;
}
.stat {
  padding: 1.4rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
  background: var(--white);
}
.section--navy .stat {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}
.stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.5vw, 3.1rem);
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
}
.stat__label {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.83rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.section--navy .stat__label {
  color: var(--steel-300);
}

/* ======================= 14. UBICACIÓN Y DATOS ========================= */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: stretch;
}
.map-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  min-height: 380px;
  background: var(--gray-200);
}
.map-frame iframe {
  width: 100%;
  height: 100%;
  min-height: 380px;
  border: 0;
  filter: saturate(0.92);
}

.info-list {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.info-item {
  display: flex;
  gap: 1rem;
  padding: 1.15rem 1.3rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.info-item:hover {
  transform: translateX(6px);
  border-color: var(--steel-400);
  box-shadow: var(--shadow);
}
.info-item__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 11px;
  background: var(--navy-700);
  color: var(--white);
}
.info-item h3 {
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  color: var(--gray-500);
  margin-bottom: 0.15rem;
}
.info-item p {
  margin: 0;
  font-size: 1.02rem;
  color: var(--navy-700);
  font-weight: 500;
}
.info-item a {
  color: inherit;
}
.info-item a:hover {
  color: var(--accent);
}

/* Horarios */
.schedule {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.97rem;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.schedule caption {
  caption-side: top;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--navy-700);
  padding-bottom: 0.8rem;
}
.schedule th,
.schedule td {
  padding: 0.72rem 1.1rem;
  text-align: left;
  border-bottom: 1px solid var(--gray-200);
}
.schedule th {
  font-weight: 500;
  color: var(--gray-700);
}
.schedule td {
  text-align: right;
  font-weight: 600;
  color: var(--navy-700);
}
.schedule tr:last-child th,
.schedule tr:last-child td {
  border-bottom: 0;
}
.schedule tr.is-today th,
.schedule tr.is-today td {
  background: rgba(230, 57, 70, 0.07);
}
.schedule tr.is-today th::after {
  content: "hoy";
  margin-left: 0.6rem;
  padding: 0.1rem 0.5rem;
  border-radius: 99px;
  background: var(--accent);
  color: var(--white);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: middle;
}
.schedule .is-closed {
  color: var(--accent);
}

/* ========================== 15. LLAMADO A LA ACCIÓN ==================== */
.cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(115deg, var(--navy-700), var(--navy-900) 62%);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(2.2rem, 5vw, 3.6rem);
  box-shadow: var(--shadow-lg);
}
.cta::before {
  content: "";
  position: absolute;
  top: -60%;
  right: -12%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(230, 57, 70, 0.36),
    transparent 68%
  );
  pointer-events: none;
}
.cta__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 2rem;
  align-items: center;
}
.cta h2 {
  color: var(--white);
  margin-bottom: 0.5rem;
}
.cta p {
  color: var(--steel-300);
  max-width: 40rem;
  margin: 0;
}

/* ========================= 16. FORMULARIO ============================= */
.form-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 4vw, 2.8rem);
  box-shadow: var(--shadow);
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.15rem 1.3rem;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.field--full {
  grid-column: 1 / -1;
}
.field label {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-700);
}
.field label .req {
  color: var(--accent);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.85rem 1.05rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--navy-700);
  background: var(--gray-50);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-sm);
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.field textarea {
  min-height: 158px;
  resize: vertical;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--gray-300);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: var(--white);
  border-color: var(--steel-500);
  box-shadow: 0 0 0 4px rgba(94, 112, 134, 0.16);
}
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea {
  border-color: var(--accent);
  background: rgba(230, 57, 70, 0.04);
}
.field__error {
  min-height: 1.1em;
  font-size: 0.8rem;
  color: var(--accent);
  letter-spacing: 0.02em;
}
.form-note {
  margin-top: 1.2rem;
  font-size: 0.85rem;
  color: var(--gray-500);
}
.form-alert {
  display: none;
  align-items: flex-start;
  gap: 0.8rem;
  margin-bottom: 1.5rem;
  padding: 1rem 1.2rem;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  border: 1px solid transparent;
}
.form-alert.is-visible {
  display: flex;
}
.form-alert--ok {
  background: #e8f6ee;
  border-color: #b6e2c8;
  color: #1c6b3f;
}
.form-alert--error {
  background: #fdeced;
  border-color: #f6c3c8;
  color: #a3222e;
}

/* ========================= 17. PIE DE PÁGINA =========================== */
.site-footer {
  background: var(--navy-900);
  color: var(--steel-300);
  padding-top: clamp(2.8rem, 6vw, 4.5rem);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 2rem;
  padding-bottom: 2.5rem;
}
.footer-brand img {
  height: 58px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.94;
  margin-bottom: 1rem;
}
.footer-brand p {
  font-size: 0.93rem;
  color: var(--steel-400);
  max-width: 24rem;
}
.footer-col h3 {
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  color: var(--white);
  margin-bottom: 1rem;
}
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  font-size: 0.93rem;
}
.footer-col a {
  color: var(--steel-300);
}
.footer-col a:hover {
  color: var(--white);
  padding-left: 4px;
}
.footer-col a {
  transition: color var(--t-fast), padding-left var(--t-fast);
}
.footer-social {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.1rem;
}
.footer-social a {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--steel-300);
  transition: background var(--t), color var(--t), transform var(--t);
}
.footer-social a:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
  transform: translateY(-3px);
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding: 1.3rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.6rem;
  justify-content: space-between;
  font-size: 0.84rem;
  color: var(--steel-400);
}
.footer-bottom nav {
  display: flex;
  gap: 1.3rem;
  flex-wrap: wrap;
}
.footer-bottom a {
  color: var(--steel-400);
}
.footer-bottom a:hover {
  color: var(--white);
}

/* Botón volver arriba */
.to-top {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  cursor: pointer;
  box-shadow: var(--shadow-accent);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity var(--t), visibility var(--t), transform var(--t),
    background var(--t);
}
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.to-top:hover {
  background: var(--navy-700);
}

/* Barra de progreso de lectura */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-soft));
  transition: width 0.12s linear;
}

/* ================ 18. ANIMACIONES Y RESPONSIVIDAD ===================== */
/* El estado oculto solo se aplica cuando JavaScript está activo (la clase
   "js" la añade app.js en cuanto se ejecuta). Así, si el script no carga,
   todo el contenido queda visible en lugar de invisible. */
.reveal {
  opacity: 1;
  transform: none;
}
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
  will-change: opacity, transform;
}
/* Los desplazamientos son solo verticales: un desplazamiento horizontal
   sacaría el elemento del área visible antes de revelarse. */
.js .reveal--left,
.js .reveal--right {
  transform: translateY(34px);
}
.js .reveal--zoom {
  transform: translateY(20px) scale(0.96);
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Puntos de quiebre ---------- */
@media (max-width: 1150px) {
  /* En pantallas medianas la ilustración pasa debajo del texto */
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    justify-items: center;
    text-align: center;
  }
  .hero__content {
    max-width: 44rem;
    margin-inline: auto;
  }
  .hero__eyebrow,
  .hero__points {
    justify-content: center;
  }
  .hero__lead {
    margin-inline: auto;
  }
  .hero .btn-row {
    justify-content: center;
  }
  .hero__art {
    width: min(100%, 46rem);
  }
}

@media (max-width: 980px) {
  :root {
    --header-h: 68px;
  }
  .nav-toggle {
    display: block;
  }
  .header__cta {
    display: none;
  }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 1rem 1.25rem 1.75rem;
    background: rgba(11, 24, 38, 0.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-lg);
    transform: translateY(-130%);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--t), opacity var(--t), visibility var(--t);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  .nav__link {
    padding: 0.95rem 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    font-size: 1.05rem;
  }
  .nav__link::after {
    display: none;
  }
  .nav__link.is-active {
    color: var(--accent-soft);
  }
  .nav .btn {
    margin-top: 1.1rem;
  }

  .split,
  .contact-grid,
  .cta__inner {
    grid-template-columns: 1fr;
  }
  .split--reverse .split__media {
    order: 0;
  }
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .topbar__inner {
    justify-content: center;
  }
  .topbar__inner > *:last-child {
    display: none;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .brand img {
    height: 38px;
  }
  .brand__name {
    font-size: 1.15rem;
  }
  .brand__tag {
    font-size: 0.55rem;
  }
  .hero {
    min-height: auto;
  }
  .hero__points {
    gap: 0.5rem 1.2rem;
    font-size: 0.9rem;
  }
  .btn {
    width: 100%;
  }
  .btn-row {
    flex-direction: column;
    align-items: stretch;
  }
  /* El contenido de .wrap ya aporta el margen lateral: se evita que el
     botón a ancho completo se desborde por el relleno del contenedor. */
  .btn-row .btn {
    width: auto;
    max-width: 100%;
  }
  /* Los adornos con desplazamiento negativo se recortan en pantallas angostas */
  .split__badge {
    left: 0.5rem;
    bottom: -0.9rem;
    padding: 0.85rem 1.1rem;
  }
  .split__media::before {
    inset: auto -0.5rem -0.5rem auto;
  }
  .to-top {
    right: 1rem;
    bottom: 1rem;
  }
  .eyebrow {
    flex-wrap: wrap;
    row-gap: 0.4rem;
  }
  .topbar__list {
    gap: 0.9rem;
    font-size: 0.78rem;
  }
  /* Las tarjetas de cifras se ven mejor en dos columnas que en cuatro apiladas */
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 981px) {
  .nav .btn {
    display: none;
  }
}