/* Landing de Security Continuity (pólizas de mantenimiento). A propósito no
   se parece a las landings de soluciones (capacidad.css): en lugar de
   módulos con monitor y lista numerada, cuenta el servicio como una
   operación: bloques de foto y texto alternados, cada
   póliza con su foto y mosaico de sistemas.
   Toma de base.css las fuentes, el rojo y .contenedor. */
.pagina-continuity {
  --c-fondo: #050a16;
  --c-fondo-2: #08101f;
  --c-panel: #0b1426;
  --c-linea: rgb(255 255 255 / 10%);
  --c-linea-fuerte: rgb(255 255 255 / 18%);
  --c-texto: #d5dae3;
  --c-suave: #9aa3b2;
  --c-acento: var(--rojo);
  /* js/red-nodos.js toma de aquí el color dominante de los nodos. */
  --acento: var(--rojo);
  /* El rojo de marca no llega a 4.5:1 en texto chico sobre el fondo. */
  --c-acento-texto: #ff6b74;
  --c-ok: #4cc38a;
  --c-alto-cab: 72px;

  background: var(--c-fondo);
  color: var(--c-texto);
}

.pagina-continuity :is(h1, h2, h3) {
  color: #fff;
  text-wrap: balance;
}

.pagina-continuity p {
  text-wrap: pretty;
}

.pagina-continuity :is(section, article)[id] {
  scroll-margin-top: calc(var(--c-alto-cab) + 16px);
}

.solo-lectores {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip-path: inset(50%);
  white-space: nowrap;
}

.saltar {
  position: absolute;
  z-index: 40;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  border-radius: 4px;
  background: #fff;
  color: var(--c-fondo);
  font-weight: 600;
  transform: translateY(-160%);
}

.saltar:focus {
  transform: none;
}

.pagina-continuity a:focus-visible,
.pagina-continuity button:focus-visible {
  outline: 2px solid var(--c-acento);
  outline-offset: 3px;
}

.punto {
  color: var(--c-acento);
}

.antetitulo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  color: var(--c-suave);
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.antetitulo::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--c-acento);
}

.encabezado {
  margin-bottom: 40px;
}

.encabezado h2,
.reportes h2,
.empezamos h2,
.preguntas h2 {
  max-width: 22ch;
  margin: 0;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.05;
}

.encabezado-partido {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  align-items: end;
  gap: 32px 64px;
}

.encabezado-detalle {
  max-width: 52ch;
  margin: 0;
  color: var(--c-suave);
  font-size: 1.02rem;
  line-height: 1.7;
}

/* ===== Red de nodos de fondo ===== */
/* La misma red animada de las landings de soluciones (js/red-nodos.js la
   dibuja al tamaño de la sección). Va detrás del contenido y se desvanece
   hacia los bordes para no cortarse en seco entre secciones. */
.pagina-continuity main > section {
  position: relative;
  isolation: isolate;
}

.red-nodos {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-image: radial-gradient(ellipse 90% 85% at 50% 50%, #000 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 90% 85% at 50% 50%, #000 45%, transparent 100%);
  opacity: 0.75;
  pointer-events: none;
}

/* ===== Cabecera ===== */
.cab {
  /* La luz del botón de cristal desborda 24 px; sin esto, en el teléfono
     la página se desliza de lado. */
  overflow-x: clip;
  position: sticky;
  z-index: 30;
  top: 0;
  border-bottom: 1px solid var(--c-linea);
  background: rgb(5 10 22 / 86%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.cab-fila {
  display: flex;
  width: min(100% - 48px, 1280px);
  height: var(--c-alto-cab);
  align-items: center;
  gap: 32px;
  margin: auto;
}

.cab-marca img {
  width: 132px;
  height: auto;
}

/* Menú de secciones y botón de regreso con el mismo estilo que las
   landings de soluciones (copiado de capacidad.css, que esta página no
   carga): cápsulas sueltas, un círculo rojo que sube y gira el rótulo al
   pasar el cursor, y un punto rojo bajo la sección que se está leyendo
   (js/continuity.js pone aria-current). */
.cab-indice {
  display: flex;
  flex: 1;
  justify-content: center;
  gap: 6px;
}

.cab-indice a {
  --giro: 360ms cubic-bezier(.22, 1, .36, 1);
  position: relative;
  display: flex;
  align-items: center;
  padding: 10px 17px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 999px;
  background: rgb(12 12 16 / 62%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%);
  color: var(--texto-suave);
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  transition: color var(--giro), background 300ms ease, border-color 300ms ease, transform 160ms ease;
  isolation: isolate;
}

.cab-indice a::before {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 50%;
  width: calc(100% + 48px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--rojo);
  transform: translate(-50%, 50%) scale(0);
  transition: transform var(--giro);
}

.cab-indice a::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--rojo);
  transform: translateX(-50%) scale(0);
  transition: transform 300ms cubic-bezier(.22, 1, .36, 1), background 200ms ease;
}

.cab-indice .rotulo {
  position: relative;
  display: block;
  transition: transform var(--giro);
}

.cab-indice .rotulo > span + span {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
}

.cab-indice a[aria-current] {
  border-color: rgb(255 255 255 / 14%);
  background: rgb(255 255 255 / 12%);
  color: #fff;
}

.cab-indice a[aria-current]::after {
  transform: translateX(-50%) scale(1);
}

.cab-indice a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
  color: #fff;
}

.cab-indice a:active {
  color: #fff;
  transform: scale(.97);
}

.cab-indice a:is(:active, :focus-visible)::before {
  transform: translate(-50%, 50%) scale(1);
}

.cab-indice a:focus-visible .rotulo {
  transform: translateY(calc(-100% - 12px));
}

.cab-indice a:is(:active, :focus-visible)::after {
  background: #fff;
}

/* Botón de cristal: js/boton-especular.js le pinta la luz que recorre el
   borde (busca .barra-capacidad .volver). Sin el script queda un borde fino. */
.cab .volver {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 999px;
  background: rgb(255 255 255 / 4%);
  box-shadow: 0 10px 24px -14px rgb(0 0 0 / 45%);
  color: #f5f5f5;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  isolation: isolate;
  transition: transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cab .volver:not(.con-especular) {
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 22%),
    0 10px 24px -14px rgb(0 0 0 / 45%);
}

.cab .volver:active {
  transform: scale(0.97);
}

.luz-especular {
  position: absolute;
  z-index: -1;
  display: block;
  width: calc(100% + 48px);
  height: calc(100% + 48px);
  inset: -24px;
  filter: drop-shadow(0 0 3px rgb(255 255 255 / 55%));
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .cab-indice a:hover {
    border-color: transparent;
    color: #fff;
  }

  .cab-indice a:hover::before {
    transform: translate(-50%, 50%) scale(1);
  }

  .cab-indice a:hover .rotulo {
    transform: translateY(calc(-100% - 12px));
  }

  .cab-indice a:hover::after {
    background: #fff;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cab-indice a::before {
    opacity: 0;
    transform: translate(-50%, 50%) scale(1);
    transition: opacity 200ms ease;
  }

  .cab-indice a:is(:hover, :active, :focus-visible)::before {
    opacity: 1;
  }

  .cab-indice a:is(:hover, :focus-visible) .rotulo {
    transform: none;
  }
}

@media (max-width: 1180px) {
  .cab-indice {
    display: none;
  }

  .cab-fila {
    justify-content: space-between;
  }
}

/* ===== Portada ===== */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* La portada cabe completa en la primera pantalla, con la franja de
     datos abajo, aunque la ventana sea baja (laptop con barras del
     navegador). */
  display: flex;
  min-height: calc(100svh - var(--c-alto-cab));
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(28px, 5vh, 48px);
  padding: clamp(24px, 5vh, 72px) 0 clamp(24px, 4vh, 48px);
}

.hero-foto {
  position: absolute;
  z-index: -3;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

/* Oscurece la foto hacia la izquierda (donde va el título) y hacia abajo,
   donde entra la franja de datos. */
.hero::after {
  content: "";
  position: absolute;
  z-index: -2;
  /* La ciudad como en el cierre de Continuity de la portada
     (.cuerpo-continuidad en contenido.css): foto completa, tinte azul leve y
     un velo sólo del lado del título para que se lea sobre las luces. */
  background:
    linear-gradient(90deg, rgb(3 8 22 / 78%) 0%, rgb(3 8 22 / 45%) 38%, transparent 68%),
    linear-gradient(180deg, rgb(6 20 47 / 35%), rgb(6 20 47 / 10%) 60%, rgb(2 6 16 / 35%)),
    linear-gradient(to bottom, transparent 78%, var(--c-fondo) 100%);
  inset: 0;
}

.hero-rejilla {
  display: grid;
  width: min(100% - 48px, 1280px);
  grid-template-columns: minmax(0, 1fr);
  margin: auto;
}

.hero h1 {
  margin: 0;
  /* También limitado por la altura, para que una ventana baja no empuje
     la franja de datos fuera de la pantalla. */
  font-size: clamp(2.3rem, min(6.4vw, 9.5vh), 5.6rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.hero-marca {
  display: block;
  margin-bottom: 22px;
  color: var(--c-acento);
  font-family: var(--titulos);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.hero-tipo {
  color: var(--c-suave);
  font-weight: 400;
}

.hero-detalle {
  max-width: 54ch;
  margin: clamp(16px, 3vh, 28px) 0 0;
  color: var(--c-texto);
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.7;
}

/* Franja de cifras con el mismo estilo que las métricas de la portada del
   inicio (encabezado-portada.css, .metricas-portada): filete arriba,
   separadores finos, cifra grande en color y etiqueta mono en mayúsculas. */
.hero-datos {
  display: grid;
  /* Del ancho de su contenido y alineado con el título. */
  width: fit-content;
  max-width: calc(100% - 48px);
  align-self: flex-start;
  align-items: start;
  justify-content: start;
  grid-template-columns: repeat(4, auto);
  margin: 0 0 0 max(24px, calc((100% - 1280px) / 2));
  /* Idéntico a la portada del inicio: sólo el filete de arriba, sin caja. */
  padding-top: 20px;
  border-top: 1px solid rgb(255 255 255 / 14%);
}

.metrica {
  padding: 0 22px;
  border-left: 1px solid rgb(255 255 255 / 15%);
}

.metrica:first-child {
  padding-left: 0;
  border-left: 0;
}

.cifra {
  display: block;
  color: #fff;
  font-family: var(--titulos);
  font-size: 1.65rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.cifra.rojo {
  color: var(--rojo);
  text-shadow: 0 0 12px rgb(225 29 42 / 40%);
}

.cifra.azul {
  color: var(--azul);
  text-shadow: 0 0 12px rgb(59 130 246 / 40%);
}

.detalle {
  display: block;
  margin-top: 6px;
  color: var(--texto-suave);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ===== Prevenimos y respondemos: foto y texto alternados ===== */
.servicio {
  padding: clamp(56px, 6vw, 88px) 0 0;
}

.servicio-invertido {
  padding-bottom: clamp(56px, 6vw, 88px);
}

.bloque {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: 48px clamp(48px, 6vw, 96px);
}

.servicio-invertido .bloque-foto {
  order: 2;
}

.bloque-foto {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: 12px;
  aspect-ratio: 4 / 3.4;
  background: var(--c-panel);
}

.bloque-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Las fotos de portada traen el motivo a la derecha y la izquierda en
     sombra (eran fondo de texto): se recortan desde la derecha. */
  object-position: right center;
}

.bloque-foto::after {
  content: "";
  position: absolute;
  background: linear-gradient(to top, rgb(5 10 22 / 60%), transparent 45%);
  inset: 0;
}

.bloque-sello {
  position: absolute;
  z-index: 1;
  bottom: 18px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 999px;
  background: rgb(5 10 22 / 72%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.78rem;
}

.bloque-sello::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-ok);
}

.bloque-sello-rojo::before {
  background: var(--c-acento);
}

.bloque-texto h2 {
  margin: 0;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.08;
}

.bloque-detalle {
  max-width: 50ch;
  margin: 18px 0 28px;
  color: var(--c-suave);
  font-size: 1.02rem;
  line-height: 1.7;
}

.puntos {
  margin: 0;
  padding: 0;
  list-style: none;
}

.puntos li {
  position: relative;
  padding: 14px 0 14px 30px;
  border-top: 1px solid var(--c-linea);
  color: var(--c-suave);
  font-size: 0.95rem;
  line-height: 1.6;
}

.puntos li::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 2px;
  width: 12px;
  height: 2px;
  background: var(--c-acento);
}

.puntos strong {
  color: #fff;
  font-weight: 500;
}

/* ===== Tipos de póliza (informativo) ===== */
.polizas {
  padding: clamp(56px, 6vw, 88px) 0;
  border-top: 1px solid var(--c-linea);
  background: var(--c-fondo);
}

.polizas-lista {
  display: grid;
  gap: 20px;
}

.poliza {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  overflow: hidden;
  border: 1px solid var(--c-linea);
  border-radius: 12px;
  background: var(--c-fondo);
}

.poliza-foto {
  min-height: 260px;
}

.poliza-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.poliza-texto {
  align-self: center;
  padding: clamp(28px, 4vw, 48px);
}

.poliza-num {
  margin: 0 0 8px;
  color: var(--c-acento-texto);
  font-family: var(--mono);
  font-size: 0.8rem;
}

.poliza h3 {
  margin: 0;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  line-height: 1.1;
}

.poliza-texto > p:not(.poliza-num) {
  max-width: 52ch;
  margin: 14px 0 22px;
  color: var(--c-suave);
  line-height: 1.7;
}

.etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.etiquetas li {
  padding: 8px 14px;
  border: 1px solid var(--c-linea-fuerte);
  border-radius: 6px;
  color: var(--c-texto);
  font-size: 0.86rem;
}

/* ===== Mosaico de sistemas ===== */
.sistemas {
  padding: clamp(56px, 6vw, 88px) 0;
}

.mosaico {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: clamp(200px, 20vw, 260px);
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pieza {
  position: relative;
  overflow: hidden;
  grid-column: span 2;
  border-radius: 10px;
  background: var(--c-panel);
}

.pieza-grande {
  grid-column: span 4;
  grid-row: span 2;
}

.pieza-ancha {
  grid-column: span 3;
}

.pieza img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out);
}

.pieza::after {
  content: "";
  position: absolute;
  background: linear-gradient(to top, rgb(5 10 22 / 92%) 0%, rgb(5 10 22 / 40%) 45%, transparent 75%);
  inset: 0;
}

.pieza-texto {
  position: absolute;
  z-index: 1;
  right: 22px;
  bottom: 20px;
  left: 22px;
}

.pieza h3 {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.2;
}

.pieza-grande h3 {
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
}

.pieza p {
  max-width: 40ch;
  margin: 6px 0 0;
  color: var(--c-texto);
  font-size: 0.9rem;
  line-height: 1.5;
}

@media (hover: hover) and (pointer: fine) {
  .pieza:hover img {
    transform: scale(1.04);
  }
}

/* ===== Monitoreo y reportes ===== */
.reportes {
  padding: clamp(56px, 6vw, 88px) 0;
  border-top: 1px solid var(--c-linea);
  background: var(--c-fondo);
}

.reportes-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: 64px 96px;
}

.reportes .encabezado-detalle {
  margin-top: 20px;
}

.recibes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 32px;
  margin: 44px 0 0;
}

.recibes dt {
  color: #fff;
  font-weight: 500;
}

.recibes dd {
  margin: 6px 0 0;
  color: var(--c-suave);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* ===== Cómo empezamos ===== */
.empezamos {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(56px, 6vw, 88px) 0 clamp(56px, 6vw, 88px);
}

.empezamos-foto {
  position: absolute;
  z-index: -3;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.empezamos::after {
  content: "";
  position: absolute;
  z-index: -2;
  background:
    linear-gradient(90deg, var(--c-fondo) 0%, rgb(5 10 22 / 92%) 48%, rgb(5 10 22 / 45%) 78%, rgb(5 10 22 / 55%) 100%),
    linear-gradient(to bottom, var(--c-fondo) 0%, transparent 18%, transparent 70%, var(--c-fondo) 100%);
  inset: 0;
}

.empezamos-encabezado .encabezado-detalle {
  margin-top: 22px;
}

.pasos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 860px;
  gap: 0;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}

.pasos li {
  position: relative;
  padding: 28px 32px 0 0;
  border-top: 1px solid var(--c-linea-fuerte);
}

/* El tramo del paso se pinta de rojo, como una barra de avance. */
.pasos li::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 56px;
  height: 3px;
  background: var(--c-acento);
}

.paso-num {
  color: var(--c-acento-texto);
  font-family: var(--mono);
  font-size: 0.8rem;
}

.pasos h3 {
  margin: 10px 0 10px;
  font-size: 1.5rem;
}

.pasos p {
  max-width: 34ch;
  margin: 0;
  color: var(--c-suave);
  line-height: 1.65;
}

.lema {
  max-width: 30ch;
  margin: 48px 0 0;
  padding-left: 20px;
  border-left: 2px solid var(--c-acento);
  color: #fff;
  font-family: var(--titulos);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

/* ===== Preguntas frecuentes ===== */
.preguntas {
  padding: clamp(56px, 6vw, 88px) 0 clamp(56px, 6vw, 88px);
  border-top: 1px solid var(--c-linea);
}

.preguntas-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  align-items: start;
  gap: 48px 96px;
}

.preguntas-encabezado {
  position: sticky;
  top: calc(var(--c-alto-cab) + 40px);
}

.preguntas-lista article {
  padding: 28px 0;
  border-top: 1px solid var(--c-linea);
}

.preguntas-lista article:last-child {
  border-bottom: 1px solid var(--c-linea);
}

.preguntas-lista h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.35;
}

.preguntas-lista p {
  max-width: 64ch;
  margin: 12px 0 0;
  color: var(--c-suave);
  line-height: 1.7;
}

/* ===== Pantallas medianas ===== */
@media (max-width: 960px) {
  .hero-rejilla,
  .encabezado-partido,
  .reportes-rejilla,
  .preguntas-rejilla {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-datos {
    grid-template-columns: repeat(2, auto);
    row-gap: 22px;
  }

  .metrica:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .bloque,
  .poliza {
    grid-template-columns: minmax(0, 1fr);
  }

  .servicio-invertido .bloque-foto {
    order: 0;
  }

  .bloque-foto {
    aspect-ratio: 16 / 10;
  }

  .poliza-foto {
    min-height: 0;
    aspect-ratio: 16 / 8;
  }

  .mosaico {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 220px;
  }

  .pieza,
  .pieza-ancha {
    grid-column: span 1;
  }

  .pieza-grande {
    grid-column: span 2;
    grid-row: span 1;
  }

  .preguntas-encabezado {
    position: static;
  }
}

/* ===== Teléfono ===== */
@media (max-width: 620px) {
  .cab-fila,
  .hero-rejilla {
    width: min(100% - 32px, 1280px);
  }

  .hero-datos {
    max-width: calc(100% - 32px);
    margin-left: 16px;
  }

  .cab-marca img {
    width: 112px;
  }

  .hero h1 {
    font-size: clamp(2.3rem, 11vw, 3rem);
  }

  .cifra {
    font-size: 1.4rem;
  }

  .recibes,
  .pasos {
    grid-template-columns: minmax(0, 1fr);
  }

  .pasos {
    gap: 32px;
  }

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

  .pieza-grande {
    grid-column: span 1;
  }

}

@media (prefers-reduced-motion: reduce) {
  .pieza img {
    transition: none;
  }
}