/* ==========================================================================
   Megacity — hoja de estilo principal
   Marca: naranja #FD500E · azul #082169 (muestreados del logotipo)
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root {
  /* Marca */
  --naranja:        #FD500E;
  --naranja-fuerte: #D33C05;
  --naranja-suave:  #FF8449;
  --naranja-niebla: rgba(253, 80, 14, .12);
  --azul:           #082169;
  --azul-claro:     #1A3FA8;

  /* Superficies */
  --tinta:          #0A1A33;
  --tinta-honda:    #050E1D;
  --humo:           #F5F7FA;
  --blanco:         #FFFFFF;
  --linea:          #E3E8F0;
  --linea-oscura:   rgba(255, 255, 255, .14);

  /* Texto */
  --texto:          #10203C;
  --texto-suave:    #5B6880;
  --texto-claro:    rgba(255, 255, 255, .78);

  /* Tipografía */
  --display: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --cuerpo:  'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Ritmo */
  --e1: 8px;  --e2: 16px; --e3: 24px; --e4: 32px;
  --e5: 48px; --e6: 64px; --e7: 96px; --e8: 128px;

  --radio:      14px;
  --radio-g:    22px;
  --radio-pill: 999px;

  --sombra-s: 0 2px 8px rgba(16, 32, 60, .06);
  --sombra-m: 0 12px 32px rgba(16, 32, 60, .10);
  --sombra-g: 0 28px 70px rgba(16, 32, 60, .18);

  --ancho: 1200px;
  --trans: 220ms cubic-bezier(.4, 0, .2, 1);
}

/* --- 2. Base ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--cuerpo);
  font-size: 16px;
  line-height: 1.65;
  color: var(--texto);
  background: var(--blanco);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.025em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

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

::selection { background: var(--naranja); color: #fff; }

.saltar-al-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--naranja);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--radio) 0;
  font-weight: 600;
}
.saltar-al-contenido:focus { left: 0; }

/* --- 3. Utilidades ------------------------------------------------------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: 24px;
}

.seccion { padding-block: clamp(64px, 9vw, 112px); }
.seccion--humo { background: var(--humo); }
.seccion--tinta { background: var(--tinta); color: #fff; }

/* Rotulito con guion naranja */
.ojo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--cuerpo);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: var(--e3);
}
.ojo::before {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--naranja);
  flex: none;
}
.seccion--tinta .ojo { color: rgba(255, 255, 255, .62); }

.titulo { font-size: clamp(2rem, 4.4vw, 3.25rem); }
.titulo em { font-style: normal; color: var(--naranja); display: block; }
.titulo .naranja { color: var(--naranja); font-style: normal; }

.entrada {
  font-size: clamp(1rem, 1.3vw, 1.0625rem);
  color: var(--texto-suave);
  max-width: 46ch;
}
.seccion--tinta .entrada { color: var(--texto-claro); }

/* --- 4. Botones ---------------------------------------------------------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 13px 26px;
  border: 2px solid transparent;
  border-radius: var(--radio-pill);
  font-family: var(--cuerpo);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background var(--trans), color var(--trans),
              border-color var(--trans), transform var(--trans),
              box-shadow var(--trans);
  will-change: transform;
}
.boton svg { flex: none; transition: transform var(--trans); }
.boton:hover svg { transform: translateX(4px); }
.boton:active { transform: translateY(1px); }

.boton--naranja {
  background: var(--naranja);
  color: #fff;
  box-shadow: 0 8px 22px rgba(253, 80, 14, .32);
}
.boton--naranja:hover {
  background: var(--naranja-fuerte);
  box-shadow: 0 12px 30px rgba(253, 80, 14, .42);
  transform: translateY(-2px);
}

.boton--fantasma {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .42);
  backdrop-filter: blur(4px);
}
.boton--fantasma:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, .12);
  transform: translateY(-2px);
}

.boton--linea {
  background: transparent;
  color: var(--texto);
  border-color: var(--linea);
}
.boton--linea:hover { border-color: var(--naranja); color: var(--naranja); }

/* Enlace con flecha */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: .9375rem;
  color: var(--naranja);
}
.enlace-flecha svg { transition: transform var(--trans); }
.enlace-flecha:hover svg { transform: translateX(4px); }

/* --- 5. Encabezado ------------------------------------------------------- */
.cabecera {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--trans), border-color var(--trans),
              background var(--trans);
}
.cabecera.esta-pegada {
  box-shadow: var(--sombra-s);
  border-bottom-color: var(--linea);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  min-height: 72px;
}

.marca { display: flex; align-items: center; flex: none; }
.marca img { height: 34px; width: auto; }

.menu { display: flex; align-items: center; gap: 30px; }
.menu a {
  position: relative;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--texto);
  padding-block: 6px;
  transition: color var(--trans);
}
.menu a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--naranja);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--trans);
}
.menu a:hover { color: var(--naranja); }
.menu a:hover::after { transform: scaleX(1); transform-origin: left; }

.cabecera__acciones { display: flex; align-items: center; gap: var(--e2); flex: none; }

.hamburguesa {
  display: none;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 0;
  place-items: center;
}
.hamburguesa span {
  display: block;
  width: 20px; height: 2px;
  background: var(--texto);
  border-radius: 2px;
  transition: transform var(--trans), opacity var(--trans);
}
.hamburguesa span + span { margin-top: 5px; }
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- 6. Hero ------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(94svh, 880px);
  display: flex;
  align-items: stretch;
  padding-top: 132px;
  padding-bottom: 0;
  background: var(--tinta-honda);
  overflow: hidden;
  isolation: isolate;
}

/* 6.1 Foto de fondo con zoom lento */
.hero__fondo {
  position: absolute;
  inset: -4%;
  z-index: 0;
  background-image: url('../img/hero-ciudad.webp');
  background-size: cover;
  background-position: 62% 48%;
  animation: respiraFondo 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes respiraFondo {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.11) translate3d(-1.4%, -1%, 0); }
}

/* 6.2 Velos de color */
.hero__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero__velo--tinta {
  background:
    linear-gradient(100deg,
      rgba(4, 11, 24, .97) 0%,
      rgba(6, 17, 36, .93) 34%,
      rgba(8, 24, 50, .74) 60%,
      rgba(10, 30, 62, .48) 100%),
    linear-gradient(to top, rgba(4, 11, 24, .94) 0%, rgba(4, 11, 24, .35) 34%, transparent 58%),
    rgba(5, 14, 29, .22);
}
.hero__velo--brillo {
  background:
    radial-gradient(52% 44% at 80% 26%, rgba(253, 80, 14, .17) 0%, transparent 70%),
    radial-gradient(42% 42% at 10% 80%, rgba(26, 63, 168, .26) 0%, transparent 74%);
  mix-blend-mode: screen;
  animation: palpitaBrillo 11s ease-in-out infinite alternate;
}
@keyframes palpitaBrillo {
  from { opacity: .72; transform: scale(1); }
  to   { opacity: 1;   transform: scale(1.06); }
}

/* 6.3 Malla de red animada */
.hero__red {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .85;
}
.hero__red .arco {
  fill: none;
  stroke: var(--naranja);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 10 420;
  filter: drop-shadow(0 0 6px rgba(253, 80, 14, .85));
  animation: viajaPulso 4.6s linear infinite;
}
.hero__red .arco--b { animation-duration: 6.2s; animation-delay: .9s; }
.hero__red .arco--c { animation-duration: 5.4s; animation-delay: 2.1s; }
.hero__red .arco--d { animation-duration: 7.1s; animation-delay: 1.4s; }
@keyframes viajaPulso {
  from { stroke-dashoffset: 430; }
  to   { stroke-dashoffset: 0; }
}

.hero__red .trazo {
  fill: none;
  stroke: rgba(253, 80, 14, .28);
  stroke-width: 1.1;
  stroke-dasharray: 4 7;
  animation: corre 2.4s linear infinite;
}
@keyframes corre { to { stroke-dashoffset: -22; } }

.hero__red .nodo {
  fill: var(--naranja);
  transform-box: fill-box;
  transform-origin: center;
  animation: late 2.8s ease-in-out infinite;
}
.hero__red .nodo:nth-of-type(2n) { animation-delay: .6s; }
.hero__red .nodo:nth-of-type(3n) { animation-delay: 1.2s; }
@keyframes late {
  0%, 100% { opacity: .45; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1.35); }
}

.hero__red .aro {
  fill: none;
  stroke: var(--naranja);
  stroke-width: 1.4;
  transform-box: fill-box;
  transform-origin: center;
  animation: expandeAro 3.2s ease-out infinite;
}
.hero__red .aro--b { animation-delay: 1.1s; }
.hero__red .aro--c { animation-delay: 2.2s; }
@keyframes expandeAro {
  0%   { opacity: .9; transform: scale(.35); }
  80%  { opacity: 0;  transform: scale(2.6); }
  100% { opacity: 0;  transform: scale(2.6); }
}

/* 6.4 Chispas flotantes */
.hero__chispas {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}
.chispa {
  position: absolute;
  bottom: -10px;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--naranja-suave);
  box-shadow: 0 0 8px 1px rgba(253, 80, 14, .8);
  opacity: 0;
  animation: sube linear infinite;
}
@keyframes sube {
  0%   { opacity: 0;   transform: translate3d(0, 0, 0) scale(.6); }
  12%  { opacity: .9; }
  75%  { opacity: .55; }
  100% { opacity: 0;   transform: translate3d(var(--deriva, 20px), -84vh, 0) scale(1.25); }
}

/* 6.5 Barrido de luz */
.hero__barrido {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(104deg,
    transparent 38%,
    rgba(255, 255, 255, .055) 48%,
    rgba(253, 80, 14, .07) 52%,
    transparent 62%);
  background-size: 260% 100%;
  animation: barre 9s ease-in-out infinite;
}
@keyframes barre {
  0%, 100% { background-position: 170% 0; }
  55%      { background-position: -60% 0; }
}

/* 6.6 Grano */
.hero__grano {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 6.7 Contenido */
.hero__contenedor {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1;
}

.hero__caja {
  position: relative;
  z-index: 10;
  width: 100%;
  padding-bottom: clamp(40px, 5vw, 64px);
}

.hero__titulo {
  font-size: clamp(2.6rem, 6.4vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  color: #fff;
  max-width: 15ch;
  margin-bottom: var(--e3);
}
.hero__titulo .naranja { color: var(--naranja); }

/* Revelado línea por línea */
.linea-revelada {
  display: block;
  overflow: hidden;
}
.linea-revelada > span {
  display: block;
  transform: translateY(105%);
  animation: revela .95s cubic-bezier(.22, 1, .36, 1) forwards;
}
.linea-revelada:nth-child(1) > span { animation-delay: .15s; }
.linea-revelada:nth-child(2) > span { animation-delay: .30s; }
.linea-revelada:nth-child(3) > span { animation-delay: .45s; }
@keyframes revela { to { transform: translateY(0); } }

.hero__bajada {
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  color: var(--texto-claro);
  max-width: 34ch;
  margin-bottom: var(--e4);
}

.hero__botones { display: flex; flex-wrap: wrap; gap: var(--e2); }

.aparece-suave {
  opacity: 0;
  transform: translateY(22px);
  animation: subeSuave .8s cubic-bezier(.22, 1, .36, 1) forwards;
}
.aparece-suave--1 { animation-delay: .55s; }
.aparece-suave--2 { animation-delay: .70s; }
.aparece-suave--3 { animation-delay: .85s; }
@keyframes subeSuave { to { opacity: 1; transform: translateY(0); } }

/* 6.8 Pie del hero */
.hero__pie {
  position: relative;
  z-index: 10;
  border-top: 1px solid rgba(255, 255, 255, .16);
  padding-block: 20px;
  display: flex;
  align-items: center;
  gap: var(--e3);
  flex-wrap: wrap;
}
.hero__rastro {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
.hero__rastro::before {
  content: '';
  width: 26px; height: 2px;
  background: var(--naranja);
  flex: none;
}
.hero__rastro span { opacity: .55; }
.hero__rastro a { transition: color var(--trans), opacity var(--trans); }
.hero__rastro a:hover { color: var(--naranja); }

/* 6.9 Sello vertical */
.hero__sello {
  position: absolute;
  right: clamp(20px, 4vw, 54px);
  top: 180px;
  z-index: 10;
  display: grid;
  gap: 5px;
  text-align: right;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
  text-shadow: 0 1px 10px rgba(4, 11, 24, .9);
  pointer-events: none;
}
.hero__sello span, .hero__sello b { display: block; }
.hero__sello b { color: var(--naranja); font-weight: 600; }

  60%      { transform: translateY(13px); opacity: 0; }
}

/* --- 7. Soluciones ------------------------------------------------------- */
.encabezado-dos {
  display: grid;
  grid-template-columns: 1.25fr .9fr;
  gap: var(--e5);
  align-items: end;
  margin-bottom: var(--e5);
}

.rejilla-soluciones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e3);
}

.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio-g);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--trans), box-shadow var(--trans),
              border-color var(--trans);
}
.tarjeta:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra-m);
  border-color: rgba(253, 80, 14, .35);
}

.tarjeta__foto {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--humo);
}
.tarjeta__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(.22, 1, .36, 1);
}
.tarjeta:hover .tarjeta__foto img { transform: scale(1.07); }

.tarjeta__cuerpo {
  padding: var(--e3);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.tarjeta__cuerpo .enlace-flecha { margin-top: auto; padding-top: 4px; }

.tarjeta__fila {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tarjeta__icono {
  width: 26px; height: 26px;
  flex: none;
  color: var(--naranja);
}
.tarjeta__fila h3 {
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -.01em;
  flex: 1;
}
.tarjeta__flecha {
  color: var(--naranja);
  flex: none;
  transition: transform var(--trans);
}
.tarjeta:hover .tarjeta__flecha { transform: translateX(5px); }

.tarjeta__cuerpo p {
  font-size: .9375rem;
  color: var(--texto-suave);
  line-height: 1.55;
}

/* --- 8. Bloque partido (texto + figura) ---------------------------------- */
.partido {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
}
.partido--figura-ancha { grid-template-columns: .92fr 1.3fr; }
.partido {
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.partido--invertido .partido__texto { order: 2; }
.partido--invertido .partido__figura { order: 1; }

.partido__texto > * + * { margin-top: var(--e3); }

.partido__figura { position: relative; }
.partido__figura img { border-radius: var(--radio-g); width: 100%; }
/* Estas dos figuras son recortes con transparencia y ya traen su propia
   sombra en el render: una drop-shadow encima dibujaría el rectángulo del
   blanco que queda opaco alrededor del objeto. */
.partido__figura--limpia img {
  border-radius: 0;
}

/* 8.1 Pastillas de servicio */
.servicios {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e3);
  margin-block: var(--e4) !important;
}
.servicio { display: grid; gap: 10px; }
.servicio__icono {
  width: 34px; height: 34px;
  color: var(--naranja);
}
.servicio p {
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--texto-suave);
}
.seccion--tinta .servicio p { color: var(--texto-claro); }

/* 8.2 Etiquetas sueltas */
.etiquetas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: .8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .62);
}
.etiquetas span::after {
  content: '·';
  margin-left: 10px;
  opacity: .5;
}
.etiquetas span:last-child::after { content: ''; }

/* --- 9. Videos verticales ------------------------------------------------ */
.rejilla-videos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e2);
}

.clip {
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
  background: #0b1628;
  aspect-ratio: 9 / 15;
  cursor: pointer;
  transition: transform var(--trans), box-shadow var(--trans);
}
.clip:hover { transform: translateY(-5px); box-shadow: var(--sombra-g); }
.clip img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(.22, 1, .36, 1);
}
.clip:hover img { transform: scale(1.06); }
.clip::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(5, 14, 29, .86) 0%,
    rgba(5, 14, 29, .12) 46%,
    rgba(5, 14, 29, .3) 100%);
}

.clip__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255, 255, 255, .6);
  display: grid;
  place-items: center;
  color: #fff;
  transition: background var(--trans), transform var(--trans);
}
.clip__play::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .34);
  animation: expandeAro 2.8s ease-out infinite;
}
.clip:hover .clip__play {
  background: var(--naranja);
  border-color: var(--naranja);
  transform: translate(-50%, -50%) scale(1.1);
}
.clip__play svg { margin-left: 3px; }

.clip__barra {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, .9);
}
.clip__barra i {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .3);
  position: relative;
  overflow: hidden;
}
.clip__barra i::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 26%;
  background: var(--naranja);
  border-radius: 2px;
  animation: avanzaBarra 6s ease-in-out infinite;
}
@keyframes avanzaBarra {
  0%   { width: 6%; }
  70%  { width: 82%; }
  100% { width: 6%; }
}

.pie-clip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: 38px;
  margin-top: 12px;
  font-size: .8125rem;
  color: var(--texto-claro);
}
.pie-clip svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--naranja); }

/* --- 10. Metodología ----------------------------------------------------- */
.pasos { display: grid; }
.paso {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: var(--e2);
  padding-block: var(--e3);
  border-top: 1px solid var(--linea);
  align-items: start;
}
.paso:last-child { border-bottom: 1px solid var(--linea); }
.paso__num {
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--naranja);
  line-height: 1.2;
}
.paso h3 { font-size: 1.0625rem; font-weight: 600; margin-bottom: 4px; }
.paso p { font-size: .9375rem; color: var(--texto-suave); line-height: 1.55; }

/* --- 11. Banda de ciudad ------------------------------------------------- */
.banda {
  position: relative;
  min-height: clamp(220px, 28vw, 340px);
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--tinta);
}
.banda img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.banda::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(4, 11, 24, .93) 0%,
    rgba(4, 11, 24, .76) 24%,
    rgba(4, 11, 24, .34) 54%,
    rgba(4, 11, 24, .06) 100%);
}
.banda__texto {
  position: relative;
  z-index: 2;
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.6vw, 2rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
  max-width: 13ch;
}
.banda__texto b { color: var(--naranja); font-weight: 700; }

/* --- 12. Llamado final --------------------------------------------------- */
.cierre {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(90% 140% at 86% 18%, rgba(253, 80, 14, .3) 0%, transparent 58%),
    linear-gradient(118deg, var(--azul) 0%, #10307F 52%, #19409E 100%);
  color: #fff;
  padding-block: clamp(56px, 7vw, 86px);
}
.cierre::before {
  content: '';
  position: absolute;
  right: -4%;
  top: -34%;
  width: 40%;
  height: 168%;
  background: linear-gradient(126deg,
    transparent 44.6%,
    rgba(255, 255, 255, .5) 44.6%,
    rgba(255, 255, 255, .5) 45.5%,
    transparent 45.5%,
    transparent 48.4%,
    var(--naranja) 48.4%,
    var(--naranja) 53.4%,
    transparent 53.4%,
    transparent 56.2%,
    rgba(255, 255, 255, .28) 56.2%,
    rgba(255, 255, 255, .28) 56.8%,
    transparent 56.8%);
  transform: rotate(-7deg);
  pointer-events: none;
}
.cierre::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(70% 70% at 30% 50%, #000 0%, transparent 72%);
  pointer-events: none;
}
.cierre .contenedor { position: relative; z-index: 2; }

.cierre__fila {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--e5);
  align-items: center;
}
.cierre__titulo {
  font-size: clamp(2.25rem, 5.2vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -.035em;
}
.cierre__titulo em { font-style: normal; color: var(--naranja); display: block; }
.cierre__lado { display: grid; gap: var(--e3); justify-items: start; }
.cierre__lado p { color: rgba(255, 255, 255, .84); max-width: 34ch; }

/* --- 13. Pie ------------------------------------------------------------- */
.pie { background: var(--blanco); border-top: 1px solid var(--linea); }
.pie__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  flex-wrap: wrap;
  padding-block: var(--e3);
  min-height: 76px;
}
.pie__legal {
  border-top: 1px solid var(--linea);
  padding-block: 18px;
  display: flex;
  justify-content: space-between;
  gap: var(--e2);
  flex-wrap: wrap;
  font-size: .8125rem;
  color: var(--texto-suave);
}
.pie__legal a:hover { color: var(--naranja); }

/* --- 14. Formulario / modal --------------------------------------------- */
.velo-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(5, 14, 29, .62);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--trans), visibility var(--trans);
  overflow-y: auto;
}
.velo-modal.abierto { opacity: 1; visibility: visible; }

.modal {
  width: min(560px, 100%);
  background: #fff;
  border-radius: var(--radio-g);
  box-shadow: var(--sombra-g);
  padding: clamp(24px, 4vw, 40px);
  transform: translateY(22px) scale(.97);
  transition: transform 300ms cubic-bezier(.22, 1, .36, 1);
  margin: auto;
}
.velo-modal.abierto .modal { transform: translateY(0) scale(1); }

.modal__cerrar {
  position: absolute;
  top: 16px; right: 16px;
  width: 40px; height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--humo);
  display: grid;
  place-items: center;
  color: var(--texto-suave);
  transition: background var(--trans), color var(--trans);
}
.modal__cerrar:hover { background: var(--naranja); color: #fff; }
.modal { position: relative; }

.modal h2 { font-size: 1.75rem; margin-bottom: 6px; }
.modal > p { color: var(--texto-suave); font-size: .9375rem; margin-bottom: var(--e3); }

.formulario { display: grid; gap: var(--e2); }
.campos-dos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); }

.campo { display: grid; gap: 6px; }
.campo label {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--texto);
}
.campo label .req { color: var(--naranja); }
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font: inherit;
  font-size: .9375rem;
  color: var(--texto);
  background: var(--humo);
  border: 1.5px solid var(--linea);
  border-radius: 12px;
  transition: border-color var(--trans), background var(--trans),
              box-shadow var(--trans);
}
.campo textarea { min-height: 104px; resize: vertical; line-height: 1.55; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--naranja);
  box-shadow: 0 0 0 4px var(--naranja-niebla);
}
.campo.tiene-error input,
.campo.tiene-error select,
.campo.tiene-error textarea { border-color: #D92D20; }

.campo__ayuda { font-size: .75rem; color: var(--texto-suave); }
.campo__error {
  font-size: .75rem;
  color: #D92D20;
  font-weight: 500;
  min-height: 0;
}

.trampa { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.aviso {
  padding: 14px 16px;
  border-radius: 12px;
  font-size: .875rem;
  font-weight: 500;
  display: none;
}
.aviso.se-ve { display: block; }
.aviso--bien { background: #ECFDF3; color: #05603A; border: 1px solid #ABEFC6; }
.aviso--mal  { background: #FEF3F2; color: #912018; border: 1px solid #FECDCA; }

.boton[aria-busy="true"] { pointer-events: none; opacity: .75; }
.boton[aria-busy="true"] .girando { display: inline-block; }
.girando {
  display: none;
  width: 16px; height: 16px;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: gira .7s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

/* --- 15. Flotante de WhatsApp ------------------------------------------- */
.flotante {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 80;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 10px 26px rgba(37, 211, 102, .42);
  transition: transform var(--trans), box-shadow var(--trans);
}
.flotante:hover { transform: scale(1.08); box-shadow: 0 14px 34px rgba(37, 211, 102, .55); }

/* --- 16. Revelado al hacer scroll --------------------------------------- */
.revelar {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 620ms cubic-bezier(.22, 1, .36, 1),
              transform 620ms cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}
.revelar.visible { opacity: 1; transform: none; }
.revelar[data-retraso="1"] { transition-delay: 90ms; }
.revelar[data-retraso="2"] { transition-delay: 180ms; }
.revelar[data-retraso="3"] { transition-delay: 270ms; }

/* --- 17. Adaptable ------------------------------------------------------- */
@media (max-width: 1024px) {
  .rejilla-soluciones { grid-template-columns: repeat(2, 1fr); }
  .encabezado-dos { grid-template-columns: 1fr; gap: var(--e3); align-items: start; }
  .partido { grid-template-columns: 1fr; gap: var(--e4); }
  .partido--invertido .partido__texto { order: 1; }
  .partido--invertido .partido__figura { order: 2; }
  .cierre__fila { grid-template-columns: 1fr; gap: var(--e4); }
  .hero__sello { display: none; }
}

@media (max-width: 860px) {
  .menu {
    position: fixed;
    inset: 72px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--linea);
    box-shadow: var(--sombra-m);
    padding: var(--e2) 24px var(--e3);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--trans), transform var(--trans), visibility var(--trans);
  }
  .menu.abierto { opacity: 1; visibility: visible; transform: none; }
  .menu a { padding-block: 14px; border-bottom: 1px solid var(--linea); font-size: 1rem; }
  .menu a::after { display: none; }
  .hamburguesa { display: grid; }
  .cabecera__acciones .boton--naranja { display: none; }
}

@media (max-width: 680px) {
  .rejilla-soluciones { grid-template-columns: 1fr; }
  .rejilla-videos { grid-template-columns: 1fr; gap: var(--e3); }
  .clip { aspect-ratio: 16 / 11; }
  .servicios { grid-template-columns: repeat(2, 1fr); }
  .campos-dos { grid-template-columns: 1fr; }
  .hero { min-height: auto; padding-top: 124px; }
  .hero__caja { padding-bottom: var(--e5); }
  .hero__titulo { max-width: 100%; }
  .hero__botones .boton { width: 100%; }
  .hero__pie { padding-block: 16px; }
  .hero__rastro { font-size: 10px; letter-spacing: .14em; }
  .pie__fila { flex-direction: column; align-items: flex-start; }
  .banda__texto { max-width: 100%; }
}

/* --- 18. Menos movimiento ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .linea-revelada > span { transform: none; }
  .aparece-suave { opacity: 1; transform: none; }
  .revelar { opacity: 1; transform: none; }
  .hero__fondo { animation: none; transform: scale(1.04); }
}

/* --- 19. Impresión ------------------------------------------------------- */
@media print {
  .cabecera, .flotante, .velo-modal { display: none !important; }
  .hero { min-height: auto; color: #000; }
}

/* --- 20. Piezas que antes iban con estilo en línea ---------------------- */
.seccion--sin-pie { padding-bottom: 0; }
.partido--arriba { align-items: start; }
.banda { margin-top: clamp(48px, 6vw, 80px); }
.boton--bloque { width: 100%; }

.menu--pie {
  position: static;
  flex-direction: row;
  opacity: 1;
  visibility: visible;
  transform: none;
  box-shadow: none;
  border: 0;
  background: none;
  padding: 0;
}
@media (max-width: 860px) {
  .menu--pie { gap: var(--e3); flex-wrap: wrap; }
  .menu--pie a { padding-block: 4px; border: 0; font-size: .9375rem; }
}