/* ============================================================
   INSTRUMENTOS ARCHIVÍSTICOS — TEMPLATE
   Hero idéntico al de Firma Electrónica (clases correo-hero__*).
   Cambios propios: color/estilo del botón · hero pegado al menú ·
   fix responsive del hero para que el texto no se recorte.
   ============================================================ */

/* ── HERO pegado al menú — sin espacio entre header e imagen ── */
.page-template-template-instrumentos-archivisticos .andes-main-wrap {
  padding-top: 0 !important;
}

.page-template-template-instrumentos-archivisticos .correo-hero {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ── HERO BOTÓN — hereda tamaño/posición/tipografía de .correo-hero__btn ── */
.inst-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Montserrat", "Poppins", sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  color: #ffffff;
  background: #00c4b5;      /* mismo morado del de hiperautomatización; cámbialo si este lleva otro */
  border-radius: 20px;
  width: 248px;
  height: 33px;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.inst-hero__btn:hover,
.inst-hero__btn:focus {
  opacity: 0.88;
  color: #ffffff;
}

/* ── FIX RESPONSIVE HERO — evitar que el texto se recorte ── */

/* Zona 1025–1200px: el hero de desktop se queda sin alto y el margin
   grande del subtítulo esconde el texto. Se cubre esta franja. */
@media (max-width: 1200px) {
  .correo-hero__imagen {
    min-height: 460px;
  }
  .correo-hero__imagen img {
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }
  .correo-hero__subtitulo {
    margin-bottom: 32px !important;
  }
  .correo-hero__contenido {
    justify-content: center;
    padding-block: 1.5rem;
  }
}

/* Tablet */
@media (max-width: 1024px) {
  .inst-hero__btn { font-size: 14px; width: 186px; height: 44px; }

  .correo-hero__imagen { min-height: 420px; }
  .correo-hero__subtitulo { margin-bottom: 24px !important; }
}

/* Mobile */
@media (max-width: 480px) {
  .inst-hero__btn { font-size: 11px; width: 160px; height: 44px; }

  .correo-hero__imagen { min-height: 520px; }
  .correo-hero__subtitulo { margin-bottom: 16px !important; }
  .correo-hero__contenido { padding-block: 1.5rem; }
}

/* ============================================================
   ¿QUÉ MEJORAS OBTIENES? — CARRUSEL DRAG-TO-SCROLL
   Figma node 303:471 "PUNTOS - FUERTES"
   Card 1391×293 · radio 20px · fondo rgba(0,231,210,0.15)
   Valores EXACTOS del nodo — ver notas de aproximación marcadas.
   ============================================================ */
.inst-mejoras {
  width: 100%;
  box-sizing: border-box;
  padding-block: var(--espacio-xl);
  padding-inline: 24px;
}

.inst-mejoras__card {
  position: relative; /* necesario para el ::before del borde */
  max-width: 1391px; /* ancho real del nodo */
  margin-inline: auto;
  box-sizing: border-box;
  background: rgba(0, 231, 210, 0.15); /* backgroundColor exacto del nodo */
  border-radius: 20px;
  padding: 40px 37px 40px 40px; /* insets medidos entre el contenido y los bordes del nodo */
  display: flex;
  align-items: center;
  gap: 30px; /* gap real medido entre el bloque fijo y el carrusel (398 - 368) */
  flex-wrap: nowrap;
}

.inst-mejoras__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 4px;          /* ← antes 2px; súbelo para borde más ancho */
  background: linear-gradient(
    to right,
    #00e7d2 0%,
    rgba(0, 231, 210, 0.4) 50%,
    rgba(0, 231, 210, 0) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* ── Bloque fijo (no se desliza) ── */
.inst-mejoras__fijo {
  flex: 0 0 auto;
  max-width: 338px; /* ancho real de la caja del párrafo en el nodo */
  box-sizing: border-box;
  text-align: center;
}

.inst-mejoras__titulo {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 36.57px;
  letter-spacing: 0;
  /* Color EXACTO del nodo: rgb(0,148,135) — un verde-azulado oscuro
     ("teal"), no un azul como "azul oscuro" sugería la descripción */
  color: #009487;
  margin: 0 0 22px; /* gap real entre título y párrafo (118 - 96) */
}

.inst-mejoras__parrafo {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 24.38px;
  letter-spacing: 0;
  color: #000000;
  margin: 0;
}

/* ── Carrusel (drag-to-scroll) ── */
.inst-mejoras__col-carrusel {
  flex: 1 1 auto;
  min-width: 0;
}

.inst-mejoras__carrusel-viewport {
  width: 100%;
  max-width: 956px; /* ancho real del frame-viewport (Frame 247) en el nodo */
  box-sizing: border-box;
  padding-block: 8.53px; /* padding real (T/B) del Frame 247 */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}

.inst-mejoras__carrusel-viewport::-webkit-scrollbar {
  display: none;
}

.inst-mejoras__carrusel-viewport--arrastrando {
  cursor: grabbing;
}

.inst-mejoras__track {
  display: flex;
  align-items: stretch;
  user-select: none; /* evita seleccionar texto mientras se arrastra */
}

/* El nodo no reporta color de stroke para las líneas divisorias (son
   VECTOR sin fills/strokes resueltos en la respuesta de la API); se
   usa el navy del proyecto a baja opacidad como aproximación visual. */
.inst-mejoras__divisor {
  flex: 0 0 auto;
  width: 4px;
  align-self: stretch;
  background: none;
  /* verde de la card; sólido arriba y se desvanece hacia abajo */
  background-image: linear-gradient(
    to bottom,
    #00e7d2 0%,
    rgba(0, 231, 210, 0.5) 50%,
    rgba(0, 231, 210, 0) 100%
  );
}

.inst-mejoras__item {
  flex: 0 0 409.21px; /* ancho real del slot (Group 23/24/25/26) */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 23.87px; /* gap real entre ícono y texto */
  padding: 0 25.58px 0 17.9px; /* insets reales medidos dentro del slot */
}

.inst-mejoras__item:last-child {
  flex-basis: 393.86px; /* el nodo reporta el último ítem (Group 27) más angosto */
}

.inst-mejoras__icono {
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}

/* Tamaños de ícono por ítem — cada Mask group del nodo mide distinto */
.inst-mejoras__icono--1 { width: 127.03px; height: 127.03px; }
.inst-mejoras__icono--2 { width: 111.68px; height: 111.68px; }
.inst-mejoras__icono--3 { width: 109.12px; height: 109.12px; }
.inst-mejoras__icono--4 { width: 122.76px; height: 122.76px; }
.inst-mejoras__icono--5 { width: 114.24px; height: 114.24px; }

.inst-mejoras__texto {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 17.05px;
  line-height: 20.63px;
  letter-spacing: 0;
  color: #003d69;
  margin: 0;
}

/* ── Pista "Clic y desliza" ── */
.inst-mejoras__pista {
  display: flex;
  align-items: center;
  gap: 15px; /* medido: texto(492) - (flecha(441) + ancho flecha 36) */
  /* la separación vertical respecto al carrusel no viene de un
     autolayout explícito en el nodo (posición absoluta); se estima
     un valor de aire visual razonable */
  margin-top: 24px;
  padding-left: 43px; /* alineado con el inicio del carrusel (441 - 398) */
}

.inst-mejoras__pista-flecha {
  display: block;
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.inst-mejoras__pista-texto {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 18.28px;
  letter-spacing: 0;
  color: #000000;
  margin: 0;
}

/* ── RESPONSIVE — Tablet ── */
@media (max-width: 1024px) {
  .inst-mejoras { padding-inline: 20px; }

  .inst-mejoras__card {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 32px 24px;
  }

  .inst-mejoras__fijo { max-width: 100%; }

  .inst-mejoras__titulo { font-size: 22px; line-height: 27px; margin-bottom: 16px; }
  .inst-mejoras__parrafo { font-size: 15px; line-height: 18px; }

  .inst-mejoras__carrusel-viewport { max-width: 100%; }

  .inst-mejoras__item { gap: 18px; padding: 0 20px 0 14px; }
  .inst-mejoras__texto { font-size: 13px; line-height: 16px; }

  .inst-mejoras__icono--1 { width: 95px; height: 95px; }
  .inst-mejoras__icono--2 { width: 84px; height: 84px; }
  .inst-mejoras__icono--3 { width: 82px; height: 82px; }
  .inst-mejoras__icono--4 { width: 92px; height: 92px; }
  .inst-mejoras__icono--5 { width: 86px; height: 86px; }

  .inst-mejoras__pista { padding-left: 0; }
  .inst-mejoras__pista-texto { font-size: 11px; line-height: 14px; }
}

/* ── RESPONSIVE — Mobile ── */
@media (max-width: 480px) {
  .inst-mejoras { padding-inline: 1rem; }

  .inst-mejoras__card { padding: 24px 1rem; gap: 20px; }

  .inst-mejoras__titulo { font-size: 19px; line-height: 23px; margin-bottom: 12px; }
  .inst-mejoras__parrafo { font-size: 11px; line-height: 13px; }

  .inst-mejoras__item { gap: 12px; padding: 0 16px 0 10px; }
  .inst-mejoras__texto { font-size: 9px; line-height: 11px; }

  .inst-mejoras__icono--1 { width: 70px; height: 70px; }
  .inst-mejoras__icono--2 { width: 62px; height: 62px; }
  .inst-mejoras__icono--3 { width: 60px; height: 60px; }
  .inst-mejoras__icono--4 { width: 68px; height: 68px; }
  .inst-mejoras__icono--5 { width: 63px; height: 63px; }

  .inst-mejoras__pista-flecha { width: 24px; height: 24px; }
  .inst-mejoras__pista-texto { font-size: 9px; line-height: 11px; }
}

/* Evita que las imágenes del carrusel se arrastren (drag nativo del navegador) */
.inst-mejoras__icono,
.inst-mejoras__track img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  user-drag: none;
  pointer-events: none;   /* la imagen no captura el arrastre; lo maneja el track */
  user-select: none;
}

.inst-mejoras__divisor:last-child {
  display: none;
}

/* ============================================================
   DISEÑO DE INSTRUMENTOS ARCHIVÍSTICOS CON IA
   Figma nodes 305:516 (subtítulo) · 303:515 (párrafo) · 310:406 (imagen)
   El nodo NO es un layout de 2 columnas: los 3 bloques están apilados
   verticalmente y centrados (bboxes: subtítulo x=3948 w=977, párrafo
   x=3968 w=988, imagen x=3905 w=1063 — rangos casi idénticos, uno
   debajo del otro). Ancho de columna/sección basado en el más ancho
   de los 3 (la imagen, 1063px), ya que no hay un nodo de "sección"
   contenedora en el fetch.
   ============================================================ */
.inst-diseno {
  width: 100%;
  box-sizing: border-box;
  padding-block: var(--espacio-xl);
  padding-inline: 24px;
}

.inst-diseno__contenedor {
  max-width: 1063px; /* ancho real de la imagen (el bloque más ancho de los 3) */
  margin-inline: auto;
  text-align: center;
}

.inst-diseno__subtitulo {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 35px;
  line-height: 49px;
  letter-spacing: 0;
  color: #04c9b7; /* color exacto del nodo: rgb(4,201,183) */
  margin: 0; /* el nodo mide 0px de separación entre el subtítulo y el párrafo */
}

.inst-diseno__parrafo {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 30px;
  line-height: 40px;
  letter-spacing: 0;
  color: #000000;
  margin: 0 0 54px; /* gap real medido entre el párrafo y la imagen (2113 - 2059) */
}


/* ── RESPONSIVE — Tablet ── */
@media (max-width: 1024px) {
  .inst-diseno { padding-inline: 20px; }

  .inst-diseno__subtitulo { font-size: 26px; line-height: 37px; }
  .inst-diseno__parrafo { font-size: 22px; line-height: 30px; margin-bottom: 40px; }
  .inst-diseno__imagen { border-radius: 18px; }
}

/* ── RESPONSIVE — Mobile ── */
@media (max-width: 480px) {
  .inst-diseno { padding-inline: 1rem; }

  .inst-diseno__subtitulo { font-size: 19px; line-height: 27px; }
  .inst-diseno__parrafo { font-size: 17px; line-height: 22px; margin-bottom: 24px; }
  .inst-diseno__imagen { border-radius: 14px; }
}

/* ============================================================
   NUESTRO MODELO DE EJECUCIÓN PASO A PASO
   Figma nodes 328:410 (título) · 328:409 (subtítulo)
   313:426, 320:468, 320:458, 320:485, 320:498 (cards)
   Cards 927.625×289.883 · radio 28.28px · fondo #F5F5F5
   Ícono-caja 201×187.487 · radios asimétricos 67.56/16.89/67.56/16.89
   Valores EXACTOS del nodo — ver notas de aproximación marcadas.
   ============================================================ */
.inst-fases {
  width: 100%;
  box-sizing: border-box;
  padding-block: var(--espacio-xl);
  padding-inline: 24px;
}

.inst-fases__contenedor {
  max-width: 1168px; /* ancho real del frame contenedor de cada card en el nodo */
  margin-inline: auto;
}

.inst-fases__titulo {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 35px;
  line-height: 49px;
  letter-spacing: 0;
  color: #04c9b7; /* color exacto del nodo: rgb(4,201,183) */
  text-align: center;
  margin: 0 0 16px; /* gap real entre título y subtítulo (2835 - 2819) */
}

.inst-fases__subtitulo {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 25px;
  line-height: 40px;
  letter-spacing: 0;
  color: #000000;
  text-align: center;
  max-width: 988px; /* ancho real de la caja en el nodo */
  margin: 0 auto 42px; /* gap hacia la 1ª card: promedio medido entre frames (~42px, con variación real de 36–49px) */
}

/* ── Cards: 1 sola columna, tal como están en el nodo (todas
   comparten la misma x) — no es un grid multi-columna. ── */
.inst-fases__lista {
  display: flex;
  flex-direction: column;
  gap: 42px; /* gap promedio real entre cards (variación medida: 36–49px) */
}

.inst-fases__card {
  width: 100%;
  max-width: 927.625px;
  margin-inline: auto;
  min-height: 289.883px;
  box-sizing: border-box;
  /* Fondo gris + resplandores verdes difusos:
     esquina superior izq, esquina superior der y centro inferior */
  background:
    radial-gradient(circle at 0% 0%, rgba(4, 201, 183, 0.25) 0%, rgba(4, 201, 183, 0) 35%),
    radial-gradient(circle at 100% 0%, rgba(4, 201, 183, 0.25) 0%, rgba(4, 201, 183, 0) 35%),
    radial-gradient(circle at 50% 100%, rgba(4, 201, 183, 0.22) 0%, rgba(4, 201, 183, 0) 40%),
    #f5f5f5;
  border-radius: 28.28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  padding: 41.73px 75.83px 41.73px 47.8px;
}

.inst-fases__contenido {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 567px; /* ancho real de la caja de texto en el nodo */
}

/* Título dentro de la card — styleOverrideTable del nodo: Bold 700 + verde-agua.
   (El nodo también marca 1 solo carácter final con Medium/morado —
   se interpreta como error de edición en Figma y se ignora: teñir de
   morado solo la última letra de la palabra no es un estilo intencional.) */
.inst-fases__card-titulo {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 22.625px;
  line-height: 29.7px;
  letter-spacing: 0;
  color: #04c9b7;
  margin: 0 0 12px;
}

.inst-fases__card-texto {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 22.625px;
  line-height: 29.7px;
  letter-spacing: 0;
  color: #000000;
  margin: 0;
}

/* Caja blanca del ícono — el nodo no reporta cornerRadius simple sino
   rectangleCornerRadii (4 radios distintos por esquina) y una
   sombra INNER_SHADOW (no drop-shadow). */
.inst-fases__icono-caja {
  flex: 0 0 auto;
  width: 201px;
  height: 187.487px;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 67.56px 16.89px 67.56px 16.89px; /* TL/TR/BR/BL reales del nodo */
  box-shadow: inset 0 6.76px 10.89px rgba(0, 0, 0, 0.2); /* INNER_SHADOW real del nodo */
  display: flex;
  align-items: center;
  justify-content: center;
}

.inst-fases__icono {
  display: block;
  max-width: 75%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ── RESPONSIVE — Tablet ──
   El nodo ya muestra 1 sola columna en desktop, así que aquí no hay
   un grid de 2 columnas del que colapsar; se escala tipografía/insets. */
@media (max-width: 1024px) {
  .inst-fases { padding-inline: 20px; }

  .inst-fases__titulo { font-size: 26px; line-height: 37px; }
  .inst-fases__subtitulo { font-size: 19px; line-height: 30px; margin-bottom: 32px; }

  .inst-fases__lista { gap: 32px; }

  .inst-fases__card {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 28px 24px;
    min-height: 0;
  }

  .inst-fases__contenido { max-width: 100%; }

  .inst-fases__card-titulo { font-size: 17px; line-height: 22px; margin-bottom: 8px; }
  .inst-fases__card-texto { font-size: 17px; line-height: 22px; }

  .inst-fases__icono-caja { width: 150px; height: 140px; align-self: center; }
}

/* ── RESPONSIVE — Mobile ── */
@media (max-width: 480px) {
  .inst-fases { padding-inline: 1rem; }

  .inst-fases__titulo { font-size: 19px; line-height: 27px; }
  .inst-fases__subtitulo { font-size: 14px; line-height: 20px; margin-bottom: 24px; }

  .inst-fases__lista { gap: 20px; }

  .inst-fases__card { padding: 20px 1rem; gap: 16px; }

  .inst-fases__card-titulo { font-size: 12px; line-height: 16px; }
  .inst-fases__card-texto { font-size: 12px; line-height: 16px; }

  .inst-fases__icono-caja { width: 110px; height: 103px; }
}

/* ============================================================
   HABLEMOS DE TU EMPRESA — FORMULARIO DE CONTACTO
   Figma nodes 445:584 (subtítulo + texto) · 298:712 "Frame 52"
   (logo + formulario). Todo apilado y centrado en 1 sola columna
   — los nodos NO forman un layout de 2 columnas (son piezas
   sueltas, no una sección ya maquetada): el nodo de texto (988px)
   y el frame del formulario (716px) están uno encima del otro,
   ambos centrados horizontalmente.
   Mismo formulario que Hiperautomatización — valores de campos,
   textarea, checkbox y botón confirmados IDÉNTICOS entre ambos
   nodos (mismo componente de diseño compartido); se reutilizan
   tal cual con prefijo inst-formulario__*.
   ============================================================ */
.inst-formulario {
  width: 100%;
  box-sizing: border-box;
  padding-block: var(--espacio-xl);
  padding-inline: 24px;
}

/* Contenedor centrado — ancho basado en el bloque más ancho de los
   2 nodos apilados (el texto, 988px; el frame del formulario mide
   716px y se centra dentro con su propio max-width). */
.inst-formulario__contenedor {
  max-width: 988px;
  margin-inline: auto;
  text-align: center;
}

/* Nodo 445:584 — un solo TEXT node, textAlignHorizontal: CENTER,
   ancho real 988px. Título = 1ª línea con styleOverrideTable
   (SemiBold 600, color rgb(4,201,183)); resto = estilo base del
   nodo (Medium 500, color negro). Ambos: Montserrat 25px/40px. */
.inst-formulario__subtitulo {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 25px;
  line-height: 40px;
  letter-spacing: 0;
  color: #04c9b7;
  margin: 0;
}

.inst-formulario__parrafo {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 25px;
  line-height: 40px;
  letter-spacing: 0;
  color: #000000;
  margin: 0;
}

/* Bloque logo + formulario (nodo 298:712 "Frame 52"): 716px ancho,
   padding 13/34/46/34 (T/L/B/R), itemSpacing:8 entre el logo y la
   card — valores exactos del nodo. Separación respecto al texto
   (margin-top): NO viene del Figma (nodos sueltos, sin frame padre
   que los una) — se usa var(--espacio-md), el mismo token de
   espaciado interno del sistema de diseño del sitio. */
.inst-formulario__bloque {
  width: 100%;
  max-width: 716px;
  margin: var(--espacio-md) auto 0;
  box-sizing: border-box;
  padding: 13px 34px 46px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Isotipo (RECTANGLE 'isotipo-instru-archivisticos 1'): 292×184.905px,
   centrado exacto dentro del ancho de contenido (648px = 716 - 34*2). */
.inst-formulario__logo {
  display: block;
  width: 100%;
  max-width: 292px;
  aspect-ratio: 292 / 184.905;
  object-fit: cover;
  margin: 0 auto;
}

/* Card (Frame 50): 648×1084px, fondo #F5F5F5, radio 20px,
   padding 49px 28px, itemSpacing:40 entre los campos del form. */
.inst-formulario__card {
  width: 100%;
  box-sizing: border-box;
  background: #f5f5f5;
  border-radius: 20px;
  padding: 49px 28px;
}

.inst-formulario__form {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Campos (Component 18/25/19/23/21/22): 592×56px, radio 100px,
   borde 2px #003d69, texto Montserrat 400 25px/30.475px #003d69 —
   valores idénticos a los medidos en el nodo del formulario de
   Hiperautomatización (mismo componente de diseño compartido). */
.inst-formulario__campo {
  width: 100%;
  height: 56px;
  box-sizing: border-box;
  border-radius: 100px;
  border: 2px solid #003d69;
  background: #ffffff;
  padding: 8px 44px 8px 40px;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 25px;
  line-height: 30.475px;
  color: #003d69;
}

.inst-formulario__campo::placeholder {
  color: #003d69;
  opacity: 1;
}

/* Textarea (Component 24): 592×232px, radio 20px, texto centrado
   con padding-top 96px medido exacto entre el borde y el placeholder. */
.inst-formulario__textarea {
  width: 100%;
  height: 232px;
  box-sizing: border-box;
  border-radius: 20px;
  border: 2px solid #003d69;
  background: #ffffff;
  padding: 96px 40px 16px;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 25px;
  line-height: 30.475px;
  color: #003d69;
  text-align: center;
  resize: vertical;
}

.inst-formulario__textarea::placeholder {
  color: #003d69;
  opacity: 1;
}

/* Frame 240: 600×42px, itemSpacing:31 horizontal — valor exacto del nodo. */
.inst-formulario__fila-final {
  display: flex;
  align-items: center;
  gap: 31px;
  flex-wrap: wrap;
}

/* Texto autorizo: Poppins 400 12.41px/18.61px, color #44535f — exacto del nodo. */
.inst-formulario__autorizo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 200px;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 12.41px;
  line-height: 18.61px;
  letter-spacing: 0;
  color: #44535f;
  cursor: pointer;
}

/* Checkbox (instance 'check'): 22×22px, radio 3.55px — exacto del nodo. */
.inst-formulario__autorizo input[type="checkbox"] {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 3.55px;
  accent-color: #0a3c83;
  cursor: pointer;
}

/* Botón (instance 'boton-envio'): 119×31px, radio 20px, fondo #0a3c83,
   texto Poppins 600 13.89px/20.83px blanco — exacto del nodo. */
.inst-formulario__btn {
  flex-shrink: 0;
  width: 119px;
  height: 31px;
  border: none;
  border-radius: 20px;
  background: #0a3c83;
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 13.89px;
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.inst-formulario__btn:hover,
.inst-formulario__btn:focus {
  opacity: 0.88;
}

/* ── RESPONSIVE — Tablet (colapsa a 1 columna, según el MD) ── */
@media (max-width: 1024px) {
  .inst-formulario { padding-inline: 20px; }

  .inst-formulario__contenedor { max-width: 100%; }

  .inst-formulario__subtitulo { font-size: 19px; line-height: 30px; }
  .inst-formulario__parrafo { font-size: 19px; line-height: 30px; }

  .inst-formulario__bloque { max-width: 100%; padding: 10px 25px 35px; }

  .inst-formulario__campo,
  .inst-formulario__textarea { font-size: 19px; line-height: 23px; }

  .inst-formulario__autorizo { font-size: 9px; line-height: 14px; }
  .inst-formulario__btn { font-size: 10px; }
  .inst-formulario__logo { max-width: 220px; }
}

/* ── RESPONSIVE — Mobile ── */
@media (max-width: 480px) {
  .inst-formulario { padding-inline: 1rem; }

  .inst-formulario__subtitulo { font-size: 14px; line-height: 22px; }
  .inst-formulario__parrafo { font-size: 14px; line-height: 22px; }

  .inst-formulario__bloque { padding: 1rem; margin-top: var(--espacio-sm); }

  .inst-formulario__card { padding: 24px 1rem; }
  .inst-formulario__form { gap: 24px; }
  .inst-formulario__logo { max-width: 180px; }

  .inst-formulario__campo,
  .inst-formulario__textarea {
    width: 100% !important;
    font-size: 14px;
    line-height: 17px;
    padding-inline: 20px;
  }

  .inst-formulario__fila-final { flex-direction: column; align-items: stretch; gap: 16px; }

  .inst-formulario__autorizo { font-size: 8px; line-height: 12px; min-width: 0; }

  .inst-formulario__btn {
    width: 100% !important;
    min-height: 44px !important;
    height: auto;
    font-size: 12px;
  }
}

@media (max-width: 1035px) {
  .inst-formulario__logo { max-width: 240px; }
}


/* ── FIX TAMAÑO LOGO FORMULARIO ── */
.inst-formulario__logo {
  display: block;
  width: 100%;
  max-width: 220px;              /* desktop */
  aspect-ratio: 292 / 184.905;
  object-fit: contain;
  margin: 0 auto;
}

@media (max-width: 1035px) {
  .inst-formulario__logo { max-width: 190px; }
}

@media (max-width: 1024px) {
  .inst-formulario__logo { max-width: 180px; }
}

@media (max-width: 480px) {
  .inst-formulario__logo { max-width: 150px; }
}



/* Wrapper que fija el tamaño y apila las dos imágenes */
.inst-diseno__imagen-wrap {
  position: relative;
  display: block;
  width: 100%;
  max-width: 1063px;
  aspect-ratio: 1063 / 592.35;
  margin: 0 auto;
  line-height: 0;
  overflow: hidden;
  border-radius: 24.84px;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
  isolation: isolate;
}

/* Ambas imágenes llenan el wrapper */
.inst-diseno__imagen-wrap .inst-diseno__imagen,
.inst-diseno__imagen--normal,
.inst-diseno__imagen--hover {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  border-radius: 0 !important;
  display: block;
  transform: scale(1.04);          /* empuja el borde verde fuera; recorta con overflow */
  transform-origin: center;
}

.inst-diseno__imagen--normal { opacity: 1; transition: opacity 0.3s ease; }
.inst-diseno__imagen--hover  { opacity: 0; transition: opacity 0.3s ease; }
.inst-diseno__imagen-wrap:hover .inst-diseno__imagen--normal { opacity: 0; }
.inst-diseno__imagen-wrap:hover .inst-diseno__imagen--hover  { opacity: 1; }

/* ===== STACKING CARDS (efecto mazo) — solo desktop ===== */
@media (min-width: 1025px) {
  .inst-fases__card {
    position: sticky;
  }
  .inst-fases__card:nth-child(1) { top: 160px; }
  .inst-fases__card:nth-child(2) { top: 180px; }
  .inst-fases__card:nth-child(3) { top: 200px; }
  .inst-fases__card:nth-child(4) { top: 220px; }
  .inst-fases__card:nth-child(5) { top: 260px; }
}

/* Tablet y móvil: scroll normal, sin sticky (responsive intacto) */
@media (max-width: 1024px) {
  .inst-fases__card {
    position: static;
  }
}

.hiper-formulario__enlace {
  color: #0A3C83;
  text-decoration: underline;
  font-weight: 600;
  cursor: pointer;
}

.hiper-formulario__enlace:hover {
  text-decoration: underline;
  opacity: 0.8;
}