:root {
  --naranja-starmix:#f49230;
  --blanco:#ffffff;    
  --negro:#060606;
  --gris:#6c6a6a;
  --gris-bajo:#987448;
  --naranja-fuerte: #fa7f03;
  --_typography---font-family--body: Geist, sans-serif;  
  --_typography---body--line-height: 1.3em;  /* Espaciado entre líneas de párrafos (1.3 veces el tamaño) */
    --_typography---body--font-weight-500: 500;  /* Grosor de letra medio para el cuerpo */
  --_typography---font-family--heading: "Mona Sans", sans-serif;  /* Fuente para títulos (H1, H2, etc.) */ 


 
  --_typography---h3--line-height: 1.1em;  /* Altura de línea compacta para H3 */
  --_typography---h3--font-weight-600: 600;  /* Título 3 en negrita */
  --_typography---h4--h4: 2.5rem;  /* Título nivel 4 (40px) */
  --_typography---h4--line-height: 1.1em;  /* Altura de línea para H4 */
  --_typography---h4--font-weight-600: 600;  /* Título 4 en negrita */
  --_typography---h5--h5: 2rem;  /* Título nivel 5 (32px) */
  --_typography---h5--line-height: 1.1em;  /* Altura de línea para H5 */
  --_typography---h5--font-weight-600: 600;  /* Título 5 en negrita */
  --_typography---h6--h6: 1.75rem;  /* Título nivel 6 (28px) */
  --_typography---h6--line-height: 1.1em;  /* Altura de línea para H6 */
  --_typography---h6--font-weight-600: 600;  /* Título 6 en negrita */


  /* --- LAYOUT Y CONTENEDORES --- */
  --_layout---container-max-width: 1360px;  /* Ancho máximo de la web en monitores grandes */
  --_layout---container-gutter: 1.875rem;  /* Margen interno de seguridad a los lados (30px) */
  --border-radius--form-input: .313rem;  /* Esquinas redondeadas para cajas de texto (5px) */
  --color--dark: #151515;  /* Negro elegante para interfaces */
  --color--primary-1: #f66234;  /* Naranja principal (repetida para consistencia) */
  --border-radius--md: .625rem;  /* Redondeado estándar moderno (10px) */
  --color--gray-3: #a7a3a2;  /* Gris medio para iconos o textos secundarios */
  --color--gray-4: #d1d1d1;  /* Gris claro para líneas divisorias o bordes */
  --color--gray-5: #f6f6f6;  /* Gris muy claro para fondos de secciones */
  --_layout---inner-container-max-width: 750px;  /* Ancho máximo para bloques de texto de lectura */
  --_layout---inner-container-gutter: 1.875rem;  /* Margen interno para el contenedor estrecho */
  --_color---border-color:rgb(135, 88, 96)  ;  /* Color por defecto para todos los bordes */
  --border-radius--sm: .313rem;  /* Redondeado pequeño (5px) */
  --_layout---container-medium-max-width: 1160px;  /* Ancho máximo para tablets/laptops */
  --_layout---container-medium-gutter: 1.875rem;  /* Margen para el contenedor mediano */
  --_typography---body--body-xs: .875rem;  /* Texto extra pequeño (14px) para pies de página */

  /* --- SISTEMA DE ESPACIADO (GAPS) --- */
  --gap--gap-5: 15px;  /* Espacio pequeño entre elementos */
  --gap--gap-12: 80px;  /* Espacio grande entre bloques */
  --gap--gap-8: 30px;  /* Espacio estándar entre tarjetas */
  --gap--gap-9: 40px;  /* Espacio generoso para layouts */
  --gap--gap-13: 100px;  /* Espacio máximo para separar secciones */
  --gap--gap-2: 5px;  /* Espacio mínimo para iconos/texto */
  --_layout---container-small-max-width: 860px;  /* Ancho máximo para móviles grandes/tablets */
  --_layout---container-small-gutter: 1.875rem;  /* Margen para contenedor pequeño */
  --base-font-size--base-small: 1rem;  /* Base tipográfica de 16px */
  --color--transparent: #0000;  /* Transparencia total */
  --_typography---body--line-height-0: 0em;  /* Elimina el interlineado (usado en iconos) */
  --gap--gap-3: 7px;  /* Espacio sutil */
  --_layout---spacing--section-spacing: 12.5rem;  /* Separación gigante entre secciones (200px) */
  --_layout---spacing--section-spacing-bottom: 12.5rem;  /* Margen inferior de secciones (200px) */
  --gap--gap-7: 24px;  /* Espacio común en formularios */
  --border-radius--xl: 6.25rem;  /* Esquinas tipo "pastilla" totalmente redondas (100px) */
  --color--gray-2: #5c5c5c;  /* Gris estándar para texto de párrafo */
  --border-radius--lg: .938rem;  /* Redondeado grande para tarjetas (15px) */
  --_typography---body--font-weight-600: 600;  /* Grosor de letra Semi-bold */
  --color--primary-3: #9e3211;  /* Naranja oscuro para botones al pasar el mouse (Hover) */

  /* --- SECCIONES Y CONTENEDORES FULL --- */
  --_layout---container-full-max-width: 100%;  /* Ocupa todo el ancho disponible */
  --_layout---container-full-gutter: 3.125rem;  /* Margen lateral para secciones que tocan los bordes */
  --gap--gap-6: 20px;  /* Espacio estándar de rejilla */
  --_typography---body--letter-spacing: -.32px;  /* Letras un poco más juntas para estilo moderno */
  --gap--gap-10: 50px;  /* Espacio amplio de separación */
  --_typography---h1--font-weight-700: 700;  /* H1 extra negrita */
  --gap--gap-4: 10px;  /* Espacio pequeño estándar */
  --gap--gap-1: 2px;  /* Espacio mínimo entre líneas */
  --gap--gap-11: 70px;  /* Espacio amplio para secciones medianas */
  --base-font-size--base: 1.125rem;  /* Tamaño base global de 18px */
  --border-radius--0: 0rem;  /* Quita el redondeado (esquinas rectas) */
  --_color---noice-bg:rgba(175, 188, 175, 0.133);  /* Color de fondo suave para secciones de contenido */
  --_typography---body--line-height-1-2: 1.2em;  /* Interlineado medio (1.2 veces) */
--topbar-h: 54px; /* alto top-bar desktop */
--nav-h: 64px;    /* alto navbar real (ajustable) */
}




body {

  background-color: #ececec;  
  font-family: Geist, sans-serif;  
  font-size: 1.125rem;
  line-height: 1.3em;
  font-weight: 500;
}


h1 {/*utilizado*/
   font-family: "Mona Sans", sans-serif;
  color: #ffffff;
  font-size: clamp(2rem, 3vw, 4.5rem);
  line-height: 1.1em;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: .625rem;
  -webkit-text-stroke: 1px rgba(212, 114, 17, 0.5); /* Línea gris oscuro de 1px */
  text-shadow: 3px 3px 5px rgba(232, 147, 10, 0.668); /* Combinado con sombra para profundidad */    
}


h2 { /*utilizada*/
  font-family: "Mona Sans", sans-serif;  
  color: #101010;  
  font-size: 3.625rem;
  line-height: 1.1em;  
  font-weight: 600;  
  margin-top: 0;  
  margin-bottom: .625rem;
  
}


h3 {/*utilizado en las series*/
  font-family: "Mona Sans", sans-serif; 
  color: var(--negro);  
  font-size: 2.625rem;  
  line-height: 1.1em;  
  font-weight: 600;  
  margin-top: 0;  
}

h4 {
  font-family: "Mona Sans", sans-serif;  /* Tipografía del título  */
  color: var(--naranja-starmix);  /* Color del texto del H4  */
  font-size: 1rem;  /* Tamaño del H4  */
  line-height: 1.1em;  /* Altura de línea del H4     */
  font-weight: 500;  /* Grosor del texto */
  margin-top: 0;  /* Elimina el margen superior por defecto del navegador */
  margin-bottom: .625rem;  /* Margen inferior → 0.625rem (10px aprox.) */
}


h5 {
  font-family: "Mona Sans", sans-serif;
  color: #984d4d33;
  font-size: var(--_typography---h5--h5);
  line-height: var(--_typography---h5--line-height);
  font-weight: var(--_typography---h5--font-weight-600);
  margin-top: 0;
  margin-bottom: .625rem;
}

h6 {
  font-family: "Mona Sans", sans-serif;
  color: #1d92c0;
  font-size: var(--_typography---h6--h6);
  line-height: var(--_typography---h6--line-height);
  font-weight: 600;
  margin-top: 0;
  margin-bottom: .625rem;
}

p {
  margin-bottom: .625rem;
}

a {
  color: var(--naranja-fuerte);  /* Color del enlace →     - */
  text-decoration: none;  /* Elimina el subrayado por defecto de los enlaces */
  transition: color .3s ease-in-out;  /* Transición suave del color:   */
}


ul,
ol {
  margin-top: 0;
  margin-bottom: .625rem;
  padding-left: 1.25rem;
}

li {
  margin-bottom: .625rem;
}

img {
  max-width: 100%;  /* Evita que la imagen se salga de su contenedor   La imagen nunca será más ancha que el elemento padre */
  display: inline-block;  /* Permite que la imagen se comporte como un elemento en línea,     pero aceptando ancho y alto */
}

label {
  margin-bottom: .3125rem;  /* Espacio inferior entre el label y el campo de formulario     0.3125rem ≈ 5px */
  font-weight: 400;  /* Grosor normal del texto (regular)     Valor estándar para textos de formulario */
  display: block;  /* Hace que el label ocupe toda la línea,     colocando el input debajo */
}


strong {
  font-weight: bold;
}

.text-linear-gradient {/*REMARCAR ELEMENTOS DE TEXTO COLOR NARANJA*/
  color: var(--naranja-starmix);
}


.service-info-link .service-image,
.service-info-link .service-icon-01,
.service-info-link .service-hover-icon {
  transition: transform 300ms ease, opacity 300ms ease;
  will-change: transform, opacity;
}


.about-content-description {
  font-size: 1rem;  /* Se usa para textos secundarios, descripciones o apoyos visuales. */
  width: 230px;  /* Ancho fijo del bloque de texto.  */
}

.about-info-text {
  margin-bottom: 2rem;
}


.about-rating-text {
  color: var(--negro);  /* Se usa para textos importantes pero que no son títulos principales. */
  font-size: 1.75rem;  /* Tamaño correspondiente a un H6 según tu sistema. */
  font-weight: 600;  /* =  (Semi-bold) para números, puntuaciones o textos que deben “resaltar”  */
}


.about-info-description {
  color: #50b5d1;
  /* = Se usa principalmente para fondos suaves, pero aquí funciona como texto claro sobre fondos oscuros o de color fuerte.*/
  margin-bottom: 0;
  /* Elimina el margen inferior por defecto (especialmente si es <p>).*/
  padding-left: 1.25rem;
  /*Añade respiración interna a la izquierda. mejora la legibilidad. */
  padding-right: 1.25rem;
  /* Mismo espacio que a la izquierda para mantener simetría. */
}


.product-description1 {
  color: #8a9366;  /* texto secundario o descriptivo.  Ideal para descripciones de producto, detalles técnicos o texto de apoyo. */
  margin-bottom: 1.875rem;  /* Espacio inferior cómodo entre esta descripción  y el siguiente elemento (botón, lista, imagen, etc.). */
}


.pre-section-title-wrap {
  display: inline-block;  /* Permite que el contenedor se ajuste al contenido Ideal para pretítulos o chips de sección. */
  padding: .313rem .875rem;  /*izquierda/derecha    Da una sensación de etiqueta cómoda,     sin verse pesada ni apretada. */
  background: #5d2222b3;  /*  Fondo limpio y neutro.    Hace que el pretítulo destaque sin ser agresivo. */
  border: 1px solid #433885;  /* =      Línea sutil que define el badge     sin endurecer el diseño. */
  border-radius: 6.25rem;  /* =  (100px)     Bordes tipo “pastilla”.     Aporta un look moderno, amable y elegante. */

}

.pre-section-title-inner {
  display: inline-flex;  /* El ancho se ajusta al contenido, pero permite alinear elementos internamente.  Ideal para texto + icono en una sola línea. */
  align-items: center;  /* Centra verticalmente todos los elementos internos     (texto, iconos, bullets, líneas).     Evita desalineaciones visuales. */
  gap: 7px;  /* Perfecto para separar icono y texto     sin que se vean pegados ni demasiado separados. */

}


.pre-section-title-square {
  width: 8px;  /* Crea un pequeño elemento decorativo (bullet / marcador). */
  height: 8px;  /*  Al ser igual al ancho, forma un cuadrado perfecto. Ideal para indicadores visuales modernos. */
  background-image: linear-gradient(-45deg, var(--negro), var(--gris));  /* Aunque hoy ambos colores son iguales, el gradiente queda preparado para:*/
}


/*.pre-section-title {
  font-size: .875rem;
  /* Tamaño de letra pequeño para pretítulos.  */
  /*color: #16d826;
  /* Color oscuro principal.   Aporta alta legibilidad sobre fondo claro  y mantiene una estética elegante y profesional. */
/*}*/

.section-title-wrap {

  grid-column-gap: 15px;
  /* Espacio horizontal entre columnas del grid. Mantiene separación limpia entre el título y el contenido lateral     sin que se vea apretado. */
  grid-row-gap: 15px;  /* Espacio vertical entre filas del grid.  aire si los elementos bajan de línea (responsive). */
  grid-template-rows: auto;  /* Las filas se ajustan automáticamente al contenido.  permite que el texto crezca naturalmente. */
  grid-template-columns: 1fr .7fr;  /* Dos columnas */
  grid-auto-columns: 1fr;  /* Las columnas que se creen automáticamente     tomarán el mismo ancho base (1fr),. */
  align-items: center;  /* Alinea verticalmente los elementos al centro. Muy útil cuando hay títulos + iconos o textos de distinta altura. */
  margin-top:.938rem;  /* Separación superior respecto al bloque anterior.    Da respiro visual antes del título de sección. */
  display: grid;  /* Activa CSS Grid.     Permite control preciso de columnas y filas     (mejor que flex para títulos compuestos). */
  overflow: hidden;  /* Oculta cualquier desbordamiento.     Útil si hay animaciones, líneas decorativas     o efectos que no deben salirse del contenedor. */
}

.section-title-wrap.two {
  grid-template-columns: 1fr .8fr;
  /* Define dos columnas en el grid: columna principal (título de sección)o, badge, etc.)   */

}

.section-title-wrap.one {
  grid-template-columns: 1fr 1fr;
  /* Define dos columnas exactamente iguales: - 1fr → primera columna   - 1fr → segunda columna */
}

.section-title-wrap._01 {
  grid-column-gap: 40px;
  /* Espacio horizontal entre columnas del grid    Separa visualmente el título del contenido lateral */
  grid-row-gap: 40px;
  /* Espacio vertical entre filas del grid       Mantiene aire cuando el layout baja a varias filas */
  grid-template-columns: 1fr 1.1fr;
  /* Define dos columnas:- 1fr   → columna izquierda (título)  (contenido/descripción)La columna derecha es ligeramente más ancha,   ideal cuando el texto explicativo necesita más espacio */
}



.section-title-center {
  grid-column-gap: 20px;  /* Espacio horizontal entre columnas (si fuera grid) */
  grid-row-gap: 20px;  /* Espacio vertical entre filas (si fuera grid)*/
  flex-flow: column;  /* Flexbox en columna:  - Los elementos se apilan verticalmente */
  grid-template-rows: auto;  /* Definición de fila para grid No aplica porque el contenedor es flex */
  grid-template-columns: .6fr;  /* Definición de columnas para grid No aplica en flexbox */
  grid-auto-columns: 1fr;  /* Columnas automáticas en grid No tiene efecto aquí */
  justify-content: center;  /* Centra los elementos verticalmente  dentro del eje principal (column) */
  place-items: center;  /* Centra horizontal y verticalmente (propiedad de grid) En flex solo actúa parcialmente */
  padding-left: 12.8rem;  /* Padding izquierdo muy amplio   Limita el ancho visual del contenido y lo centra */
  padding-right: 12.8rem;  /* Padding derecho igual al izquierdo    Mantiene el bloque centrado y limpio */
  display: flex;  /* Define el contenedor como flexbox */
}

.section-title-center.one {
  padding-left: 0;
  /* Elimina el padding izquierdo     Permite que el contenido ocupe todo el ancho disponible */
  padding-right: 0;
  /* Elimina el padding derecho   Mantiene simetría horizontal     Ideal para layouts más amplios o centrados por grid */
}


/*==================================================================================================================================
                                                                                                                         BOTONES                                       
=====================================================================================================================================*/



.about-button-wrap {
  grid-column-gap: 30px;  /* Valor real:  → Espacio horizontal entre los botones o elementos hijos dentro del contenedor */
  grid-row-gap: var(--gap--gap-8);  /* Valor real: 30px → Espacio vertical entre elementos si se envuelven en varias líneas (wrap) */
  justify-content: flex-start;  /* Alinea los elementos al inicio horizontalmente (a la izquierda en LTR) */
  align-items: center;  /* Centra los elementos verticalmente dentro del contenedor flex */
  display: flex;  /* Activa Flexbox para organizar los elementos en fila */
}

p, .about-description {
  font-family: var(--_typography---font-family--body);
  font-weight: 400;
  line-height: 1.6;
  text-align: justify; /* Esto hace que se vea como un bloque limpio */
  color: #333;        /* Un gris muy oscuro es más fácil de leer que el negro puro */
  margin-bottom: 1.5rem;
}

/* En celular quitamos el justificado para evitar espacios raros */
@media (max-width: 479px) {
  p, .about-description {
    text-align: left;
    font-size: 16px;
  }
}

.primary-button {
  border-radius: .313rem .313rem .938rem;  /* Redondea las esquinas:  */
  background-color: var(--naranja-starmix);  /* botones principales */
  font-family: Geist, sans-serif;  /* Tipografía del botón:     -      → Mantiene coherencia con el texto general del sitio */
  color: var(--blanco);  /* Color del texto: - Blanco puro (white)     → Máximo contraste con el fondo oscuro */
  font-size: 1.125rem;  /* Tamaño del texto:     -  (18px)     → Tamaño legible y consistente con el cuerpo */
  line-height: 1.3em;  /*  Permite buena respiración vertical dentro del botón */
  font-weight: 600;  /*      → Hace que el botón se vea firme y accionable */
  text-transform: capitalize;  /* Convierte la primera letra de cada palabra en mayúscula     → Estilo limpio y uniforme para los CTA */
  text-decoration: none;  /* Elimina subrayado por defecto (especialmente en <a>)     → Apariencia de botón real */
  transition-property: all;  /* Aplica transición a cualquier propiedad animable     → Permite animaciones suaves en hover/focus */
  position: relative;  /* Define contexto de posicionamiento     → Necesario para efectos internos (pseudo-elementos, overlays) */
  overflow: hidden;  /* Oculta cualquier elemento que sobresalga del botón     → Ideal para animaciones internas tipo ripple o slide */
}



.primary-button:where(.w-variant-5ae0b7d1-2e18-9989-4375-c73c98041680) {
  background-image: linear-gradient(-45deg, #deb2a4, var(--naranja-starmix));  /*   Qué hace realmente:     Está creando un gradiente a -45 grados,     pero como ambos colores son iguales (#f66234),     visualmente se ve como un color sólido naranja  */
  color: var(--blanco);  /* Valor real: white     Texto blanco para mantener contraste     contra el naranja .  */
}

.primary-button:where(.w-variant-e5ebfb29-ba2d-88c3-9b4e-1bbc038e3a15) {
  background-color: var(--naranja-fuerte);  /*   Está anulando el fondo oscuro base del .primary-button.  */
  color: var(blanco);  /* Valor real:      Texto negro elegante.     Mantiene buen contraste sobre blanco.  */
}




.button-primary-inner {

  grid-column-gap: 24px;  /* Espacio horizontal entre elementos hijos.  En este caso separa icono + texto (si los hay).  */
  grid-row-gap: 24px;  /*    Espacio vertical si los elementos hacen wrap. En flex moderno podrías usar simplemente:  */
  border-top-left-radius: .313rem;  /*      --border-radius--sm =  (5px)     Esquina superior izquierda con 5px.  */
  border-top-right-radius: 5px;  /*          Esquina superior derecha.  */
  border-bottom-left-radius: 5px;  /*         Esquina inferior izquierda.       */
  justify-content: flex-start;  /* Alinea los elementos horizontalmente al inicio.     Icono y texto quedan pegados a la izquierda.  */
  align-items: center;  /* Centra verticalmente el contenido dentro del botón.  */
  display: flex;  /* Activa Flexbox para organizar contenido interno.     Normalmente texto + icono.  */
  position: relative;  /* Permite usar pseudo-elementos (::before / ::after)     o overlays animados dentro del botón.  */
  overflow: hidden;  /* Oculta cualquier animación que sobresalga.     Muy típico para efectos de hover deslizantes.  */
}


.button-primary-inner1 {

  grid-column-gap: 24px;  /*     Espacio horizontal entre elementos hijos    */
  grid-row-gap: 24px;  /*     Espacio vertical si el contenido hace wrap.     En flex moderno podría simplificarse con:     gap: 24px;  */
  border-top-left-radius: .313rem;  /*      --border-radius--sm =  (5px)     Esquina superior izquierda suavizada.  */
  border-top-right-radius: 5px;  /* Valor real:        Esquina superior derecha.  */
  border-bottom-left-radius: .313rem;  /* Valor real:     5px     Esquina inferior izquierda.     (No define la inferior derecha)  */
  justify-content: flex-start;  /* Alinea el contenido al inicio horizontalmente.  */
  align-items: center;  /* Centra verticalmente iconos y texto.  */
  display: flex;  /* Activa Flexbox para organizar el contenido interno.  */
  position: relative;  /* Permite overlays o animaciones con position:absolute.  */
  overflow: hidden;  /* Recorta animaciones internas.  */
}



/* ====== IGUALAR estilos a versiones "1" ====== */
.button-text-wrap1 {
  padding-top: .938rem;
  padding-bottom: .938rem;
  padding-left: 1.5rem;
  position: relative;
  overflow: hidden;
}

.button-text-inner1 {
  position: relative;
  overflow: hidden;
}

.button-text1,
.button-hover-text1 {

  font-size: 1rem;
  /* Tamaño del texto:         → Texto equilibrado y legible dentro del botón */
  font-weight: 500;
  /* Grosor del texto:     -(medium)     → Peso intermedio: más fuerte que normal, menos que bold */
  flex: none;
  /* Evita que el texto crezca o se encoja     → Mantiene tamaño fijo dentro de contenedores flex */
}

.button-hover-text1 {
  position: absolute;
}

/* si tus iconos usan clases 1, igualarlas */
.button-icon1 {
  flex: none;
  width: 13px;
  height: 13px;
}

.button-icon-hover1 {
  flex: none;
  width: 13px;
  height: 13px;
  position: absolute;
}



.button-text-wrap {
  padding-top: .938rem;
  padding-bottom: .938rem;
  padding-left: 1.5rem;
  position: relative;
  overflow: hidden;
}



.button-text-inner {
  position: relative;
  overflow: hidden;
}

.button-text {

  font-size: 1rem;  /* Tamaño del texto:     -  = 16px (base-font-size--base-small)     → Texto compacto y legible dentro del botón */
  font-weight: 500;  /* Grosor del texto:     -  (medium)     → Aporta presencia sin verse pesado */
  flex: none;  /* Evita que el texto crezca o se encoja en un contenedor flex     → Mantiene el tamaño estable durante hover o animaciones */
}

.button-hover-text {
  font-size: 1rem;
  font-weight:500;
  flex: none;
  position: absolute;
}



.button-icon-hover {
  flex: none;
  width: 13px;
  height: 13px;
  position: absolute;
}

.button-icon-bg {

  border-radius:3px  10px 10px;  /* Redondea las esquinas:*/
  background-image: linear-gradient(-45deg, #bda39b, #766e6b);  /* Fondo con degradado diagonal: */
  flex: none;  /* Evita que el contenedor del icono se estire o encoja     → Mantiene tamaño fijo dentro de layouts flex */
  justify-content: center;  /* Centra horizontalmente el icono */
  align-items: center;  /* Centra verticalmente el icono */
  width: 40px;
  height: 40px;
  margin-top: .313rem;
  margin-bottom: .313rem;
  margin-right: .313rem;  
  display: flex;
  position: relative;
  overflow: hidden;  /* Oculta elementos que sobresalgan     → Ideal para efectos hover o animaciones internas */
}


.button-icon-bg:where(.w-variant-5ae0b7d1-2e18-9989-4375-c73c98041680) {

  background-color: var(--gris);  /* Color de fondo sólido:      → Reemplaza el degradado por un fondo negro elegante */
  background-image: none;  /* Elimina cualquier imagen de fondo (gradiente incluido)     → Garantiza que solo se muestre el color sólido */
}



.button-icon {
  flex: none;
  width: 13px;
  height: 13px;
}


/**/

.cps-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  padding: 14px 16px;
  border-radius: 12px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  user-select: none;
  white-space: nowrap;
}

.cps-btn:focus {
  outline: 2px solid rgba(243, 106, 31, .55);
  outline-offset: 3px;
}

.cps-btn--primary {
  background: var(--cps-accent);
  color: #111;
  box-shadow: 0 10px 26px rgba(243, 106, 31, .18);
}

.cps-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(243, 106, 31, .22);
}

.cps-btn--ghost {
  background: transparent;
  color: var(--cps-text);
  border-color: var(--cps-border);
}

.cps-btn--ghost:hover {
  transform: translateY(-1px);
  border-color: rgba(243, 106, 31, .35);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .25);
}

.cps-btn__icon {
  display: inline-flex;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .22);
}


/* --------------------------
   Tipografía del menú
-------------------------- */
.navbar.w-nav,
.navbar.w-nav .nav-link,
.navbar.w-nav .dropdown-toggle,
.navbar.w-nav .dropdown-link{
  font-family: "Geist", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  letter-spacing: 0.02em;
    color: var(--naranja-starmix);
}
/* Hover */
.navbar.w-nav .nav-link:hover,
.navbar.w-nav .dropdown-toggle:hover,
.navbar.w-nav .dropdown-link:hover{
  color: var(negro);
}
/* --------------------------
   TOP BAR (arriba)
-------------------------- */
.top-bar{
  background: #ffffff;
  color: #111;
  font-size: 14px;

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;

  height: var(--topbar-h);
  display: flex;
  align-items: center;
}



.top-bar-inner{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 44px;
}

/* Logo top-bar */
.top-bar-left{
  display: flex;
  align-items: center;
}

.top-bar-logo img{
  height: 40px;
  width: auto;
  display: block;
}


.top-bar-right{
  display: flex;
  align-items: center;
  gap: 15px;

  background: var(--naranja-starmix);
  padding: 6px 24px;

  /* Forma diagonal izquierda */
  clip-path: polygon(
    12px 0,
    100% 0,
    100% 100%,
    0 100%
  );
}


.top-bar a{
  color:var(--blanco);
  text-decoration: none;
  opacity: 0.85;
}
.top-bar a:hover{
  opacity: 1;
}

.top-bar-right .divider{
  width: 1px;
  height: 14px;
  background: #f7f8f6;
  margin: 0 6px;
}

.top-bar-right .lang{
  font-weight: 600;
}
.top-bar-right .lang.active{
  color: #ff6a2a;
}


.navbar.w-nav{
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9999;
  background-color: #ffffff;
  border-bottom: 1px solid rgba(0,0,0,.08);
  overflow: visible; /* para dropdowns */
  display: block;
  font-family: Geist, sans-serif;
  
}



/********************************************************************************fixer*/

.phone-text{
  font-weight: 500;
}
/* Email */
.mail-link{
  text-decoration: none;
  color: #fff;
}

/* Separador */
.divider{
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,.3);
}

/* Idioma */
.lang{
  text-decoration: none;
  color: #fff;
  opacity: .7;
  font-weight: 500;
}

/* Social */
.follow-text{
  font-size: 13px;
  opacity: .8;
}

.social-icon img{
  width: 16px;
  height: 16px;
}

/* Navbar general */
.navbar{
  width: 100%;
  background: #ffffff;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

/* Links principales */
.grid-nav{
  display: grid;
  grid-template-columns: auto 1fr auto; /* logo | menú (elástico) | botón */
  align-items: center;
  column-gap: 20px;
   grid-template-rows: auto; /* 👈 evita que haya 2 filas */
}
.nav-link:hover{
  color: #c8102e;
}
.grid-nav.w-layout-grid{
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto;  /* 👈 CLAVE */
  align-items: center;
  column-gap: 20px;
}
.dropdown-icon{
  font-size: 12px;
}
/* Enlaces internos del dropdown */
.dropdown-link{
  display: block;
  text-decoration: none;
  color: #111;
  padding: 6px 0;
  font-size: 14px;
}


.nav-link{
  text-decoration: none;
  color: #111;
  font-weight: 500;
  padding: 0.5rem 0.6rem;   /* unificado (antes estaba duplicado) */
  display: inline-flex;
  align-items: center;
  transition: color .3s ease;
  white-space: nowrap;
}


.dropdown-link:hover{
  color: #c8102e;
}

/* Grid interno dropdown */
.grid-dropdown{
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.right-nav{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  align-self: center;
}


.nav-button-wrap{
  display: flex;
  align-items: center;
}

.nav-menu.w-nav-menu{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  min-width: 0;
}



/* Asegura que el dropdown se comporte como un link normal */
.dropdown{position: relative;
  flex: 0 0 auto;
}

.dropdown-toggle.nav-link{
  white-space: nowrap;}
/* Dropdown toggle: texto + flecha bien alineados */
.navbar.w-nav .dropdown-toggle{
  display: inline-flex;
  align-items: center;
  gap: 6px;            /* espacio entre texto y flecha */
  
  line-height: 1;
}



/* Por si el dropdown trae margen propio */
.nav-menu.w-nav-menu .w-dropdown,
.nav-menu.w-nav-menu .dropdown{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* --- FIX: dropdown visible (Service & Support) --- */

/* que el nav no recorte el dropdown */
.navbar.w-nav,
.nav-menu.w-nav-menu{
  overflow: visible !important;
}

/* el contenedor del dropdown debe ser referencia */
.w-dropdown{
  position: relative !important;
}

/* la lista del dropdown debe flotar encima */
.w-dropdown-list{
  position: absolute !important;
  top: 100% !important;     /* 👈 antes calc(100% + 10px) */
  left: 0 !important;
  z-index: 99999 !important;

  background: #fff;
  min-width: 240px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  border-radius: 10px;
  padding: 10px 0;
}
.dropdown-list-inne
/* links dentro del dropdown */
.w-dropdown-list a{
  display: block;
  padding: 10px 14px;
  color: #111;
  white-space: nowrap;
}
.w-dropdown-list a:hover{
  background: rgba(0,0,0,.04);
}

/* Toggle correcto: deja espacio para la flecha Webflow */
.dropdown-toggle.w-dropdown-toggle{
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-right: 28px !important; /* 👈 espacio real */
  gap: 8px;
  line-height: 1;
}

/* Flecha Webflow */
.dropdown-toggle.w-dropdown-toggle .w-icon-dropdown-toggle{
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}

/* ===== Ajuste espacio botón CONTACT (derecha) ===== */
.right-nav{
  padding-right: 24px;  /* separa del borde derecho */
}

.right-nav .primary-button{
  margin-left: 18px;    /* separa del menú (WHY US) */
}
/* El body deja espacio para top-bar + navbar */
body{
  padding-top: calc(var(--topbar-h) + var(--nav-h));
}

/* --------------------------
   Layout / Grid nav (tu estructura)
-------------------------- */


.w-layout-grid{
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}


.brand{
  padding-left: 0;
}



.nav-link:hover,
 .dropdown-link:hover{
  color: #4514e9;
}

/* Evita saltos de línea en items */
.navbar.w-nav .nav-link,
.navbar.w-nav .dropdown-toggle{
  white-space: nowrap;
  line-height: 1;
}



/* Dropdown */
.w-dropdown,
.dropdown{
  position: relative; /* ancla */
}

.dropdown-toggle{
  grid-column-gap: var(--gap--gap-2);
  grid-row-gap: var(--gap--gap-2);
  font-size: var(--base-font-size--base-small);
  font-weight: var(--_typography---body--font-weight-500);
  justify-content: flex-start;
  align-items: center;
  padding-right: 1.25rem;
}



.dropdown-link:hover,
.dropdown-link.w--current{
  color: #344839;
}

.navbar.w-nav { z-index: 9999; }          /* ya lo tienes */
.navbar.w-nav .dropdown-list { z-index: 10001; }



  
.nav-text-color-white {
    color:#a51688;
    transition: color .3s cubic-bezier(.455, .03, .515, .955);
  }

  .nav-text-color-white:hover {
    color: #3c6e49;
  }


.social-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(67, 36, 152, 0.06);
  color: #152258;
  font-size: 12px;
  transition: all .25s ease;
}

.social-icon:hover{
  background: #5f5b59;
  color: #ae7070;
  transform: translateY(-2px);
}

/* ===============================
   TOP BAR – SOCIAL & MOBILE FIX
================================ */

/* Social icons */
.social-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}


/* ===== DROPDOWN WEBFLOW (LIMPIO) ===== */

.w-dropdown{ position: relative; }

.w-dropdown-toggle{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-right: 28px;  /* espacio reservado para la flecha */
  line-height: 1;
}

/* Flecha real de Webflow */
.w-icon-dropdown-toggle{
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}

/* Panel */
.w-dropdown-list{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 10001;

  background: #fff;
  border: 1px solid var(--naranja-starmix);
  border-radius: 12px;
  min-width: 320px;
  padding: 14px 16px;
  box-shadow: 0 14px 34px rgba(0,0,0,.12);
}

/* Links */
.w-dropdown-list .dropdown-link,
.w-dropdown-list a{
  display: block;
  padding: 10px 0;
  color: var(--naranja-starmix);
  white-space: nowrap;
}



/* 1. ESTILOS GENERALES (Mobile First o Base) 
   Se colocan siempre fuera y arriba de los media queries */
.section-title-wrap {
  margin-top: .938rem; 
  display: grid; /* Definimos el comportamiento base aquí */

}


/*hero                     hero                            hero*/
.hero-section {
  min-height: 100vh;
  height: 100vh;       /* opcional */
  position: relative;
  overflow: hidden;
}
.hero-video-wrap {
  /*z-index: 1;
  position: relative;
  overflow: hidden;*/
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-content-text {
  color: #124584;
  font-size: .875rem;
  letter-spacing: var(--_typography---body--letter-spacing);
  margin-bottom: .625rem;
}



.hero-description {
  margin-bottom: 1.875rem;
  color: #ffffff !important;
  font-weight: 400;
  line-height: 1.6em;
  /* Sombra Proyectada (Evita el efecto sucio del contorno en texto pequeño) */
  text-shadow: 0px 2px 8px rgba(12, 12, 12, 0.382), 
               0px 1px 3px rgba(5, 5, 5, 0.661) !important;
}


.hero-button {
  line-height: var(--_typography---body--line-height-0);
}

.hero-bottom-wrap {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  place-items: center;
  display: grid;
  overflow: hidden;
}

.hero-bottom-text {
  color:var(--blanco);
  font-size: .975rem;
}

.hero-bottom-link {
  color:#233a29;
  font-size: .875rem;
}

.hero-bottom-link:hover {
  color: #3c3e3d;
}

.hero-background-video {
  width: 100%;
  height: 1000px;
}



.hero-video-wrap video{
  object-fit: cover;
}



.hero-bottom-wrap {
    grid-column-gap: var(--gap--gap-4);
    grid-row-gap: var(--gap--gap-4);
    flex-flow: wrap;
    display: flex;
  }

  .hero-quote-wrap {
    padding-bottom: 4rem;
  }

/* 6) Quita el alto fijo que rompe el layout */
.hero-background-video{
  height: 100% !important;
}
.hero-background-video,
.hero-video-wrap .w-background-video,
.hero-video-wrap .w-background-video-atom,
.hero-video-wrap video{
  width: 100%;
  height: 100%;
}

.hero-quote-wrap {
  background-color: #0f0f0f75;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 6.25rem;
  display: flex;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}

.hero-quote-info {
  z-index: 3;
  grid-column-gap: var(--gap--gap-6);
  grid-row-gap: var(--gap--gap-6);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: auto;
  display: flex;
}
.hero-quote-card {
  grid-column-gap: var(--gap--gap-5);
  grid-row-gap: var(--gap--gap-5);
  border-radius: .313rem;
  background-color: #603a3a33;
  border: 1px solid #ffffff1a;
  flex-flow: column;
  width: 240px;
  padding: .625rem;
  display: flex;
}
.hero-quote-image {
  border-radius: .313rem;
  width: 100%;
  height: 100%;
}



.hero-title-wrap {
  margin-top: .938rem;
}


.hero-title-wrap {
  margin-top: .938rem;
}

.hero-title {
  font-weight: var(--_typography---h1--font-weight-700);
  margin-bottom: 0;
}

.quote-founder-info {
  grid-column-gap: var(--gap--gap-2);
  grid-row-gap: var(--gap--gap-2);
  text-align: center;
  flex-flow: column;
  display: flex;
}
.quote-founder-name {
  color:#404842;
  font-size: 1.125rem;
}

.quote-founder-job {
  color: #2e4132;
  font-size: var(--base-font-size--base-small);
}

.quote-description {
  color:var(--negro);
  text-align: center;
  width: 385px;
  margin-bottom: 0;
}


.hero-wrap {

   position: relative;
  z-index: 2;
  margin-bottom: 0; /* esto evitó que baje el bloque */
}
.grid-hero {
  grid-column-gap: var(--gap--gap-10);
  grid-row-gap: var(--gap--gap-10);
  grid-template-rows: auto;
  grid-template-columns: 1.8fr 1fr;
  margin-bottom: 8.125rem;
}

.hero-left-wrap {
  position: relative;
}

.hero-left-inner {
  grid-column-gap: var(--gap--gap-5);
  grid-row-gap: var(--gap--gap-5);
}
.hero-inner-section{
  padding-top: 0;
}
.hero-section::before{
   content:"";
  position:absolute;
  inset:0;
  z-index:0;              /* antes 1 */
  background: rgba(0,0,0,0.35);
  pointer-events:none;    /* clave */
}

.section-spacing-top {
  padding-top: 12.5rem;
}


  .video-button {
  z-index: 2;
}

.play-state {
  border-radius: var(--border-radius--xl);
  background-color: #103a3d;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  display: flex;
}

.play-state {
  background-color: #0d0d0d;
}


.about-main{
  position: relative;
  z-index: 2;

}


/* ---------- Top content ---------- */
.about-info{
 /* margin-bottom: 6.25rem;*/
  position: relative;
  z-index: 1;
}

.w-layout-blockcontainer{
  max-width: 940px;
  margin: 0 auto;
}

.container{
  max-width: 1360px;
  padding: 0 1.875rem;
  margin: 0 auto;}

/* ---------- Grid ---------- */
.grid-about{
  display: grid;
  grid-template-columns: .4fr 1fr;
  gap: var(--gap--gap-10);}


/* ---------- Avatar ---------- */
.avatar{
  display: flex;
  margin: 1.875rem 0 .625rem;
}

.avatar-box{
  background: var(--naranja-starmix);
  padding: .125rem;
  border-radius:.313rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar-box.one{
  margin-left: -1.188rem;
}

.avatar-image{
  width: 50px;
  height: 50px;
  border-radius:.313rem;
}

.avatar-icon-box{
  width: 50px;
  height: 50px;
  background: #393a39;
  border-radius: .313rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar-icon{
  width: 12px;
  height: 12px;
}

.avatar-info{
  font-size: .875rem;
  color: var(--negro);
}

/* ---------- Bottom circles container ---------- */
.about-info-inner{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

/* =========================================================
   INFO BOX (BASE)
   ========================================================= */
.about-info-box{/*define el tamaño “normal” del círculo y centra el contenido*/
  width: 290px;
  height: 290px;
  border-radius: 50%;
  background: #5b615e;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* ---------- Variants ---------- */
.about-info-box.box-bg-dark{
  background: linear-gradient( 135deg, var(--naranja-fuerte) 0%,   var(--blanco) 40%  );
  
}

.about-info-box.box-bg-white{
  background: linear-gradient( 180deg, var(--naranja-starmix) 0%, var(--blanco) 100% );
}

/* =========================================================
   BOX 1 – 20+
   ========================================================= */
.about-info-inner-wrap{
  margin-bottom: 1.25rem;
}

.about-content{
  color:var(--negro);
  margin-bottom: 1.25rem;
}

.about-content-description{
  font-size: var(--base-font-size--base-small);
  width: 230px;
}

/* Counter */
.about-info-box .inner-number{
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: 4.5;
  font-weight: var(--_typography---body--font-weight-600);
  line-height: 1;
  margin-bottom: .625rem;
}

.about-info-box .count,
.about-info-box .counter-symbol-text{
  margin: 0;
  padding: 0;
  line-height: 1;
}

.about-info-box.box-bg-white .count,
.about-info-box.box-bg-white .counter-symbol-text{
  color:var(--negro);
}

.about-info-box.box-bg-dark .count,
.about-info-box.box-bg-dark .counter-symbol-text{
  color:#58e09c;
}

/* Vector image */
.about-box-vector{
  height: 70px;
}

/* =========================================================
   BOX 2 – MAP (Across the U.S.)
   ========================================================= */
.about-info-box.box-bg-white{
  justify-content: flex-start;
  padding: 2.2rem 1.75rem 1.75rem;
}

.about-info-box.box-bg-white .counter-run{
  display: flex;
  justify-content: center;
  margin-bottom: .5rem;
}

.about-info-box.box-bg-white .about-info-text{
  margin: .25rem 0 .5rem;
  font-size: .875rem;
}

.about-info-box.box-bg-white .about-rating-wrap{
  display: flex;
  justify-content: center;
}

.about-info-box.box-bg-white .about-rating-text{
  text-align: center;
  line-height: 1.15;
}

/* =========================================================
   BOX 3 – DARK
   ========================================================= */
.like-score{
  font-size: var(--_typography---h4--h4);
  color:#66656a;
}

.about-info-description{
  color: var(--negro);
}

/* =========================================================
   IMAGE CIRCLE
   ========================================================= */
.about-image-box{
  width: 290px;
  height: 290px;
  border-radius: 50%;
  object-fit: cover;
}

.container-full,
.about-section .container-full,
.about-section .about-info-inner{
  width: 100% !important;
  max-width: 100% !important;
}

/* Imagen circular */
.about-image-box{
  object-fit: cover !important;
  display: block !important;
}



/* evita que el texto se salga del círculo */
.about-info-box.box-bg-dark{
  padding: 2rem 1.5rem ;
}

/* título: responsivo */
.about-info-box.box-bg-dark .like-score{
  font-size: clamp(1.4rem, 1vw, 2.6rem) ;
  line-height: 1.05 ;
  margin: 0 0 .75rem 0 ;
  max-width: 90% ;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* descripción: responsiva */
.about-info-box.box-bg-dark .about-info-description{
  font-size: clamp(.85rem, 1.1vw, 1.1rem) !important;
  line-height: 1.2 !important;
  max-width: 85% !important;
  margin: 0 auto !important;
}


/* AVATAR: solo uno y más largo */
.avatar.avatar-single{
  margin: 1.875rem 0 .625rem;
}

.avatar.avatar-single .avatar-box{
  padding: .25rem;
  border-radius: 12px;
}

.avatar.avatar-single .avatar-image{
  width: 220px;     /* ancho */
  height: 140px;    /* MÁS LARGO (alto) */
  object-fit: cover;
  border-radius: 12px;
}

/* Ajustes de texto dentro del círculo */
.about-content{
  margin-bottom: .85rem !important;
  font-size: 0.95rem;
}

.about-content-description{
  width: 210px !important;
  font-size: 0.85rem !important;
  line-height: 1.2 !important;
}

/* Número (20+) un poquito más pequeño */
.about-info-box .inner-number{
  font-size: clamp(2.2rem, 3vw, 3rem) !important;
  margin-bottom: .4rem !important;
}

/* Vector más pequeño */
.about-box-vector{
  height: 58px !important;
}
.about-info-inner{
  gap: 1.25rem !important;
}
/*.about-section{
  overflow: visible !important;
}*/



/* 2) Caja de MAP: centrar verticalmente para que no baje el texto */
.about-info-box.box-bg-white{
  justify-content: center !important;
  padding: 1.5rem 1.5rem !important;
}

/* 3) Ajuste del mapa + textos para que quepan SIEMPRE */
.about-info-box.box-bg-white .numbers-counts img{
  width: 110px !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto .5rem !important;
}

.about-info-box.box-bg-white .about-info-text{
  margin: .35rem 0 .35rem !important;
  font-size: 12px !important;
}

.about-info-box.box-bg-white .about-rating-text{
  font-size: 18px !important;   /* baja un poco */
  line-height: 1.05 !important;
  margin: 0 !important;
}
.about-info-box.box-bg-white{
  padding-top: 1.2rem !important;
}


.models-container{
 max-width:1050px;   /* antes 1200 */
  margin:0 auto;
  padding:0 20px;
}

/* HEADING */

.models-heading{
  text-align:center;
  margin-bottom:40px;
}

.models-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.12);
  background:#4608aa;
}

.models-kicker-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:#ff5a1f;
}

.models-kicker-text{
  font-size:13px;
  font-weight:600;
  color:#cc1818;
}


/* GRID */

.models-grid{
  display: grid;
  grid-template-columns: repeat(3, 320px); /* ancho fijo más pequeño */
  justify-content: center;  /* centra el bloque */
  gap: 40px;                /* separación real */
 
}

/* CARD */

.model-card{
   position:relative;
  background:#ffffff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
  border:1px solid rgba(0,0,0,.06);
  width: 100%;
  max-width: 320px;
}

.model-card:last-child{
  border-right:none;
}

/* DIVISIÓN DIAGONAL */

.model-card:not(:last-child)::after{
  content:"";
  position:absolute;
  top:0;
  right:-40px;
  width:80px;
  height:100%;
  transform:skewX(-15deg);
  
  border-left:1px solid rgba(255,255,255,.10);
  z-index:3;
}
.model-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  right:0;
  height:150px;
  background:linear-gradient(
    180deg,
    rgba(255,138,0,.65) 0%,
    rgba(255,138,0,.20) 60%,
    rgba(255,138,0,0) 100%
  );
}
/* IMAGE */

.model-image{
  position:relative;
  z-index:1;
  width:150px;
  height:150px;
  margin:30px auto 0;
  border-radius:50%;
  background:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.10);
  border:10px solid #ffffff;
}

.model-image img{
   width:120%;
  height:auto;
}

/* BODY */

.model-body{
  padding:22px;
  color:#353637;
  flex:1;
  display:flex;
  flex-direction:column;
  z-index:4;
  position:relative;
}

.model-title{
  margin-bottom:18px;
  font-size:28px;
  font-weight:800;
}

.model-title span{
  font-weight:500;
  opacity:.6;
  font-size:18px;
}
.model-features{
  list-style: none;
  padding: 0;
  margin: 0 0 26px 0;
  flex: 1;
}

.model-features li{
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  font-size: 15px;
}

.model-features li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  display: block;
  background-image: url("/images/estrella-del-LOGO-SMI.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/* BOTONES */

.model-buttons{
display:flex;
  gap:14px;
}
.split-btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:54px;
  flex:1;
  border-radius:10px;
  text-decoration:none;
  overflow:hidden;              /* clave para que el “split” se vea limpio */
  border:1px solid rgba(255,90,31,.45);
}

.split-btn .btn-text{
    padding-left:18px;
  font-weight:700;
  font-size:14px;
}

.split-btn .btn-icon{
  width:54px;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
}

.split-btn--primary .btn-text,
.split-btn--primary .btn-icon{
  color:#fff;
}

/* cajita derecha ligeramente distinta (como en tu referencia) */
.split-btn--primary .btn-icon{
  background: rgba(0,0,0,.12);
}

/* 2) Request A Quote -> semi-transparente */
.split-btn--ghost{
  background: rgba(255,90,31,.08);
}

.split-btn--ghost .btn-text,
.split-btn--ghost .btn-icon{
  color:#ff5a1f;
}

/* división vertical del icono en el botón ghost */
.split-btn--ghost .btn-icon{
  background: transparent;
  border-left:1px solid rgba(255,90,31,.35);
}

/* Hover (opcional pero recomendado) */
.split-btn--primary:hover{
  filter: brightness(.95);
}

.split-btn--ghost:hover{
  background: rgba(255,90,31,.12);
}




.about-info-inner{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  overflow: hidden; /* sin carrusel en mobile/tablet */
}

.about-info-inner > .about-info-box,
.about-info-inner > .about-image-box{
  flex: 0 0 250px;
  width: 250px;
  height: 250px;
}

.about-info-inner{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:1.25rem;
}

.about-info-inner > .about-info-box,
.about-info-inner > .about-image-box{
  width:250px;
  height:250px;
  flex:0 0 250px;
}
.product-section {
  position: relative;
  overflow: hidden;
}
.product-section1 {
  position: relative;
  overflow: hidden;
}
 .product-main {
 /* background-color: var(--color--grey-1);*/
 background-color: #484747;
  position: relative;
  overflow: hidden;
}
.products-counter-main {
  z-index: 1;
  grid-column-gap: var(--gap--gap-12);
  grid-row-gap: var(--gap--gap-12);
  flex-flow: column;
  justify-content: center;
  display: flex;
  position: relative;
}
 .products-counter-main {
    grid-column-gap: var(--gap--gap-11);
    grid-row-gap: var(--gap--gap-11);
  }
  
  .products-counter-wrap {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

  .products-counter-inner.product-two-counter {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  transform: translate(0, -277px)rotate(-450deg);
}


.products-counter-description {
  color: #1dd9aa;
  width: 430px;
  margin-bottom: 0;
}

.products-counter-description.two {
  text-align: left;
}



.product-info-image {
  width: 100%;
  height: 100%;
  display: block;
}

.product-info-wrap {
  z-index: 1;
  margin-bottom: 6.25rem;
  padding-top: 12.5rem;
  position: relative;
}
.product-info-wrap1 {
  z-index: 1;
  margin-bottom: 6.25rem;
  padding-top: 2.5rem;
  position: relative;
}

.grid-products {
  grid-column-gap: var(--gap--gap-5);
  grid-row-gap: var(--gap--gap-5);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  position: relative;
  overflow: hidden;
}

.product-info-main {
  border-radius:.313rem;
  background-color: #5c52ba;
  border: 1px solid #ffffff1a;
  padding: 1.875rem 1.25rem;
}

.product-info-main.bg-change {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: #1515154d;
}

.product-name {
  color: #785111;
  font-size: var(--_typography---h6--h6);
  margin-bottom: 1.25rem;
}

.product-image {
  border-radius: .313rem;
  width: 100%;
  height: 100%;
  display: block;
}
.product-description {
  color: #2a1dd9;
  margin-bottom: 1.875rem;
}

.product-list-item {
  grid-column-gap: var(--gap--gap-4);
  grid-row-gap: var(--gap--gap-4);
  border-bottom: 1px solid #ffffff1a;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: .938rem;
  padding-bottom: .938rem;
  display: flex;
}

.product-list-item.last {
  border-bottom-style: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.product-list-item.two {
  flex-flow: row;
  justify-content: space-between;
}

.product-info {
  color:#533e85;
  font-size:.875rem;
}

.product-info-text {
  color: #81857c;
  font-size: .875rem;
}

.product-info-text._02 {
  text-align: right;
}

.product-inner-info {
  z-index: 1;
  grid-column-gap: var(--gap--gap-8);
  grid-row-gap: var(--gap--gap-8);
  grid-template-rows: auto;
  grid-template-columns: 1fr auto;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: center;
  display: grid;
  position: relative;
}

.product-info-title {
  color: #151515;
  margin-bottom: 0;
}

.product-info-button-wrap {
  grid-column-gap: var(--gap--gap-8);
  grid-row-gap: var(--gap--gap-8);
  justify-content: flex-end;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
}


.w--current {
  color: #6b1dd9;
}


.product-main1 {
 /* background-color: var(--color--grey-1);*/

  position: relative;
  overflow: hidden;
}


.section-spacing1 {
  padding-top: 1 rem;
  padding-bottom:1rem;
}

  .grid-products1 {
  grid-column-gap: var(--gap--gap-5);
  grid-row-gap: var(--gap--gap-5);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  position: relative;
  overflow: hidden;
}

.product-info-main1 {
  border-radius: .313rem;
  background-color: #383838;
  border: 1px solid #ffffff1a;
  padding: 1.875rem 1.25rem;
}

.product-name1 {
  color: #18825f;
  font-size: var(--_typography---h6--h6);
  margin-bottom: 1.25rem;
}
.product-image-wrapper1 {
  border-radius:.313rem;
  margin-bottom: 1.875rem;
  position: relative;
  overflow: hidden;
}

.product-image1 {
  border-radius: .313rem;
  width: 100%;
  height: 100%;
  display: block;
}


/* =========================================================
   FIX: PRODUCT SECTION 1 - 4 EN UNA LÍNEA (DESKTOP)
   PÉGALO AL FINAL DEL CSS
   ========================================================= */

/* arregla el "1 rem" (con espacio) */
.section-spacing1{
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

/* asegúrate que el contenedor no limite */
.container-full1{
  width: 100% !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 1rem !important;
}

/* AQUÍ está la clave: activar GRID */
.grid-products1{
  display: grid !important; /* <-- te faltaba */
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 1.5rem !important;
  align-items: start !important;
  overflow: visible !important;
}

/* Tarjeta */
.product-info-main1{
  overflow: hidden !important;
}

/* Control del tamaño de imagen para que no se vea gigante */
.product-image-wrapper1{
  width: 100% !important;
}

/* aplica tanto a .product-image1 como por si hay alguna .product-image */
.product-image-wrapper1 img,
.product-image1,
.product-image{
  width: 100% !important;
  height: 230px !important;
  object-fit: cover !important;
  display: block !important;
}


  .product-info-title{
    font-size: clamp(1.8rem, 7vw, 2.4rem) !important;
    line-height: 1.05 !important;
    margin-bottom: .5rem !important;
  }

  .product-info-button-wrap{
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: .75rem !important;
  }

  /* Ambos links a 100% */
  .product-info-button-wrap .download-link,
  .product-info-button-wrap .primary-button{
    width: 100% !important;
    max-width: 100% !important;
  }

  .product-info-button-wrap .download-link{
    text-align: center !important;
  }

  /* Botón principal: texto a la izquierda, flecha a la derecha */
  .product-info-button-wrap .primary-button .button-primary-inner{
    width: 100% !important;
    justify-content: space-between !important;
  }
  


.cps{
  --cps-accent:#f36a1f;

  --cps-surface:#171a21;
  --cps-border:rgba(255,255,255,.10);
  --cps-text:rgba(255,255,255,.92);
  --cps-muted:rgba(255,255,255,.68);
  --cps-soft:rgba(255,255,255,.10);

  background:var(--cps-bg);
  color:var(--cps-text);
  padding:50px 0;
}



.cps__container{
  width:min(1120px, calc(100% - 48px));
  margin:0 auto;
}
.cps__header{
  max-width:820px;
}


.cps__eyebrow{
 color: #8b8e87;
  font-size: .875rem;
  letter-spacing: var(--_typography---body--letter-spacing);
  text-transform: capitalize;
}

.cps__eyebrow::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:2px;
  background:var(--cps-accent);
  display:inline-block;
}

.cps__title{
  margin:18px 0 10px;
  font-size:clamp(28px, 3.2vw, 44px);
  line-height:1.05;
  letter-spacing:-.02em;
}


.cps__intro{
  margin:0;
  color:#151515;
  font-size:16px;
  line-height:1.6;

}

.cps__grid{
  margin-top:34px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
}

.cps-card{
  background:var(--naranja-starmix);
  border:1px solid var(--cps-border);
  border-radius:18px;
  padding:22px 22px 18px;
  position:relative;
  overflow:hidden;
  color: var(--blanco);
}

.cps-card::after{
  content:"";
  position:absolute;
  inset:-2px;
  background:radial-gradient(600px 240px at 20% 0%, rgba(243,106,31,.20), transparent 55%);
  pointer-events:none;
  opacity:.9;
}

.cps-card__title{
  position:relative;
  margin:0 0 14px;
  font-size:18px;
  line-height:1.3;
}

.cps-card__list{
  position:relative;
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
  color:var(--blanco);
  line-height:1.55;
  font-size:15px;
}

.cps-card__list li{
  display:flex;
  gap:10px;
}

.cps-card__list li::before{
  content:"";
  margin-top:8px;
  width:6px;
  height:6px;
  border-radius:2px;
  background:var(--blanco);
  flex:0 0 auto;
}

.cps__actions{
  margin-top:26px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}


.cps__micro{
  margin:18px 0 0;
  color:rgba(255,255,255,.55);
  font-size:13px;
  line-height:1.55;
  max-width:820px;
}

/* Responsive */
@media (max-width: 860px){
  .cps{ padding:64px 0; }
  .cps__grid{ grid-template-columns:1fr; }
  .cps__actions{ align-items:stretch; }
  .cps-btn{ width:100%; justify-content:space-between; }
}



/*listo*/
.container-full {
  max-width: var(--_layout---container-full-max-width);
  padding-right: var(--_layout---container-full-gutter);
  padding-left: var(--_layout---container-full-gutter);
}/**/
.service-section {/**/
  padding-bottom: 3.125rem;
  position: relative;

}/**/



.service-details-main {/**/
  grid-column-gap: var(--gap--gap-11);
  grid-row-gap: var(--gap--gap-11);
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
  display: flex;
  position: relative;
}

.pre-section-title-wrap {/**/
  border: 1px solid var(--naranja-starmix);
  border-radius: var(--border-radius--xl);
  background-color:var(--blanco);
  padding: .313rem .875rem;
  display: inline-block;
}

.pre-section-title-square {/**/
  background-image: linear-gradient(-45deg, #3e3a8d), #8b8c8a;
  width: 8px;
  height: 8px;
}
.pre-section-title {/**/
  color: var(--naranja-starmix);
  font-size: .875rem;
  letter-spacing: var(--_typography---body--letter-spacing);
  text-transform: capitalize;
}

.pre-section-title:where(.w-variant-de5a90dc-c401-95a9-b09f-388955c5be35) {/**/
  color: #1d5992;
}

.section-title {/**/
  margin-bottom: 0;
}

.section-title.title-center {
  text-align: center;/**/
}

.section-title.title-center.text-white, .section-title.text-white {/**/
  color: #e58f16;
}


.service-details-wrap {/**/
  overflow: hidden;
}



.service-info {/**/
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}


.service-list-wrapper {/**/
  position: sticky;
}

.service-list-wrapper.one {/**/
  top: 100px;
}

.service-list-wrapper.three {/**/
  top: 300px;
}

.service-list-wrapper.four {/**/
  top: 400px;
}

.service-list-wrapper.two {/**/
  top: 200px;
}


.avatar._02, .avatar.one {/**/
  margin-top: 0;
  margin-bottom: 0;
}
.avatar-image.one {/**/
  width: 40px;
  height: 40px;
}
.avatar-box.one {/**/
  margin-left: -1.188rem;
}

.avatar-icon-box.one {/**/
  width: 40px;
  height: 40px;
}

.section-title-wrap.one {/**/
  grid-template-columns: 1fr 1fr;
}

.section-title-center.one {/**/
  padding-left: 0;
  padding-right: 0;
}

.industry-image-bg.one {/**/
  inset: 5% auto auto 5%;
}

.slider-arrow-left.one {/**/
  background-color: #1b477d;
  width: 50px;
  height: 50px;
  inset: auto auto -14% 0%;
}

.slider-arrow-left.one:hover {/**/
  background-color: #1b477d;
}

.product-details-main.one {/**/
  margin-bottom: 4.375rem;
}

.counter-content.one {/**/
  position: absolute;
  inset: -1% auto auto 0%;
}

.step-info.one {/**/
  background-image: linear-gradient(-45deg, #c8370b4d, #61f6344d);
}

.service-two-list-wrapper.one {/**/
  z-index: 1;
  position: relative;
  inset: 0%;
}

.avatar-info-text.one {/**/
  color:#273648;
  font-size:.875rem;
  max-width: 130px;
}


.help-line-image.one {/**/
  margin-left: -1.25rem;
}



.service-step-number.one {/**/
  z-index: 2;
  inset: auto -11px auto auto;
}
/* Suavidad general */
.service-info-link .service-image,/**/
.service-info-link .service-icon-01,
.service-info-link .service-hover-icon {
  transition: transform 300ms ease, opacity 300ms ease;
  will-change: transform, opacity;
}

/* Imagen: “zoom”/movimiento en hover (ajusta el scale si lo quieres más o menos) */
.service-info-link:hover .service-image {/**/
  transform: scale(1.05);
}



/* ====== Tarjeta estilo “Applications card” ====== */
.service-list-item .service-info-link{/**/
  width: 100%;
}

/* En hover: entra la flecha hover */
.service-info-link:hover .service-hover-icon {/**/
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* En hover: sale la flecha normal */
.service-info-link:hover .service-icon-01 {/**/
  opacity: 0;
  transform: translate3d(30px, 0, 0);
}



/* mismo efecto pero por clase (tap en móvil) */
.service-info-link.is-active .service-image { transform: scale(1.05); }
.service-info-link.is-active .service-hover-icon { opacity: 1; transform: translate3d(0,0,0); }
.service-info-link.is-active .service-icon-01 { opacity: 0; transform: translate3d(30px,0,0); }







.service-info-link {/**/
  grid-column-gap: var(--gap--gap-10);
  grid-row-gap: var(--gap--gap-10);
  border-top: 1px solid #527cb0;
  background-color: #48525f;
  grid-template-rows: auto;
  grid-template-columns: 1fr auto;
  grid-auto-columns: 1fr;
  width: 100%;
  height: 100%;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  display: grid;
}

 
.service-image-main {/**/
  grid-column-gap: var(--gap--gap-10);
  grid-row-gap: var(--gap--gap-10);
  grid-template-rows: auto;
  grid-template-columns: auto 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}




.service-image {/**/
  border-radius:.313rem;
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.service-content-wrap {/**/
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.service-name {/**/
  font-size: var(--_typography---h6--h6);
  margin-bottom: 0;
}
.service-feature-list {/**/
  grid-column-gap: var(--gap--gap-9);
  grid-row-gap: var(--gap--gap-9);
  flex-flow: column;
  display: flex;
}

  .app-image-wrap{
    min-height:220px;
  }

  .app-overlay{
    background: linear-gradient(0deg,
      rgba(255,255,255,0.0) 0%,
      rgba(255,255,255,0.0) 40%,
      rgba(255,255,255,0.65) 70%,
      rgba(255,255,255,0.92) 100%
    );
  }



.service-info-inner {/**/
  grid-column-gap: var(--gap--gap-10);
  grid-row-gap: var(--gap--gap-10);
  grid-template-rows: auto;
  grid-template-columns: .7fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
/* Card body */
.app-card-inner{/**/
  background:#fff;
  border:1px solid #e7e7e7;
  border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  overflow:hidden;

  display:grid;
  grid-template-columns: 320px 1fr; /* texto / imagen */
  gap:0;

  padding:18px;
}

/* Columna izquierda */
.app-left{/**/
  padding:10px 12px 10px 10px;
}


.app-desc{
  margin:10px 0 14px 0;
  color:#666;
  font-size:13px;
  line-height:1.35;
}

/* Columna derecha (imagen) */
.app-right{/**/
  display:block;
}

.app-image-wrap{/**/
  position:relative;
  border-radius:12px;
  overflow:hidden;
  min-height:260px;
}



/* Imagen *//**/
.app-image{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.app-overlay{/**/
  position:absolute;
  inset:0;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.95) 0%,
    rgba(255,255,255,0.75) 18%,
    rgba(255,255,255,0.25) 40%,
    rgba(255,255,255,0) 60%
  );
  pointer-events:none;
}

/* Flecha naranja en esquina inferior derecha */
.app-cta{/**/
  position:absolute;
  right:14px;
  bottom:14px;
  width:44px;
  height:44px;
  border-radius:12px;
  background:#f36b2c;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  box-shadow:0 10px 18px rgba(243,107,44,.25);
}

/* OPCIONAL: oculta tu flecha original para que no salga doble 
.service-arrow{
  display:none;
}*/
/* ===== AJUSTES: H2 más amplio + imagen más pequeña ===== */

/* 1) H2 más dominante */
.app-left .service-name {/**/
  font-size: 32px;
  line-height: 1.15;
  max-width: 90%;
  margin-bottom: 20px;
}


.app-image {/**/
  object-position: center;
}
.app-image-wrap {/**/
  min-height: 220px; /* antes se sentía muy alto */
}

.feature-list-item {/**/
  grid-column-gap: var(--gap--gap-4);
  grid-row-gap: var(--gap--gap-4);
  flex-flow: column;
  display: flex;
}


.feature-item-inner {/**/
  grid-column-gap: var(--gap--gap-3);
  grid-row-gap: var(--gap--gap-3);
  display: flex;
}


.feature-item-icon {/**/
  flex: none;
  width: 13px;
  height: 9px;
  margin-top: .313rem;
}

.section-title-wrap.two {/**/
  grid-template-columns: 1fr .8fr;
}


.industry-image-bg.two {/**/
  inset: 25% auto auto 2%;
}

.products-counter-description.two {/**/
  text-align: left;
}

.product-list-item.two {/**/
  flex-flow: row;
  justify-content: space-between;
}

.testimonial-info.two {/**/
  background-color: #5c6a7b;
  padding: 1.875rem;
}

.slider-arrow-right.two {/**/
  background-color: #1d7d1b;
  width: 50px;
  height: 50px;
  inset: auto auto -14% 15%;
}

.slider-arrow-right.two:hover {/**/
  background-color: #09cd95;
}
.award-info-inner.two {/**/
  grid-template-columns: .6fr 1fr;
}

.counter-content.two {/**/
  position: absolute;
  inset: 57% auto auto 25%;
}

.step-info.two {/**/
  background-image: linear-gradient(-45deg, #c8370b80, #66c10c80);
}
.service-two-list-wrapper.two {/**/
  z-index: 2;
  opacity: 0;
  position: absolute;
  inset: 0% auto auto 0%;
}
.blog-info-item.two {/**/
  grid-column-gap: var(--gap--gap-6);
  grid-row-gap: var(--gap--gap-6);
}
.grid-hero-two.two {/**/
  grid-template-columns: 1.1fr auto 1fr;
  align-items: start;
}
.service-step-number.two {/**/
  z-index: 2;
  inset: auto auto -11px;
}



.service-two-info {
  width: 100%;
  height: 100%;
  position: relative;
}

.service-two-list-wrapper {
  justify-content: center;
  align-items: center;
  display: flex;
}

.service-two-list-wrapper {
  z-index: 1;
  position: relative;
  inset: 0%;
}

.service-two-list-wrapper.two {
  z-index: 2;
  opacity: 0;
  position: absolute;
  inset: 0% auto auto 0%;
}

.service-two-list-wrapper.three {
  z-index: 3;
  opacity: 0;
  position: absolute;
  inset: 0% auto auto 0%;
}

.service-two-list-wrapper.four {
  z-index: 4;
  opacity: 0;
  position: absolute;
  inset: 0% auto auto 0%;
}

.service-icon-two {
  width: auto;
  height: 40px;
  margin-bottom: 1.25rem;
}

.service-name-two {
  font-size: var(--_typography---h6--h6);
  margin-bottom: 0;
}

.service-description {
  margin-bottom: 0;
}

.service-image-link {
  background-color: #1fdfc9;
  border-radius: 50%;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 410px;
  height: 410px;
  padding: .063rem;
  display: flex;
  position: relative;
}

.service-image-two {
  z-index: 2;
  object-fit: cover;
  border-radius: 100%;
  width: 100%;
  height: 100%;
  position: relative;
}

.service-frature-list-wrap {
  position: relative;
}

.service-feature-list-two {
  grid-column-gap: var(--gap--gap-4);
  grid-row-gap: var(--gap--gap-4);
  flex-flow: column;
  margin-bottom: 1.875rem;
  display: flex;
}

.service-feature-list-text {
  font-size:.875rem;
  margin-bottom: 1.3rem;
}

.service-feature-list-item {/**/
  grid-column-gap: var(--gap--gap-3);
  grid-row-gap: var(--gap--gap-3);
  display: flex;
}

.service-feature-icon {
  width: auto;
  height: 10px;
  margin-top: .3rem;
}

.service-inner-section {
  background-color: #d2c1cf;
  position: relative;
  overflow: hidden;
}

.service-inner-main {
  z-index: 2;
  grid-column-gap: var(--gap--gap-11);
  grid-row-gap: var(--gap--gap-11);
  flex-flow: column;
  display: flex;
  position: relative;
}

.inner-service-list {
  grid-column-gap: var(--gap--gap-6);
  grid-row-gap: var(--gap--gap-6);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.inner-service-link {
  grid-column-gap: var(--gap--gap-5);
  grid-row-gap: var(--gap--gap-5);
  border-radius: .313rem;
  background-color:#f508ce4a;
  color: #423d41;
  flex-flow: column;
  width: 100%;
  height: 100%;
  padding: 1.25rem;
  display: flex;
}

.service-image-wrap {/**/
  border-radius: .313rem;
  position: relative;
  overflow: hidden;
}
.service-image-inner {
  border-radius:.313rem;
  object-fit: cover;
}

.service-hover {
  border-radius: .313rem .313rem var(--border-radius--lg);
  background-color: #958e94;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  display: flex;
  position: absolute;
  inset: 10px 10px auto auto;
}

.service-content {
  grid-column-gap: var(--gap--gap-5);
  grid-row-gap: var(--gap--gap-5);
  flex-flow: column;
  display: flex;
}

.service-title {
  font-size: var(--_typography---h6--h6);
  margin-bottom: 0;
}

.service-details-top {
  margin-bottom: 5rem;
}

.service-detail-name {
  margin-top: .938rem;
}

.service-detail-description {
  margin-bottom: 1.875rem;
}

.service-detail-button {
  line-height: var(--_typography---body--line-height-0);
}

.service-detail-main {
  text-align: center;
}

.service-detail-image {
  object-fit: cover;
  width: 100%;
  height: 650px;
  position: relative;
}


.service-image-two-wrap {
  z-index: 1;
  background-color: #08f577;
  border-radius: 50%;
  flex: 1;
  padding: 1.25rem;
  position: relative;
}
.apps-section{
  padding:80px 0;
 /* background:#292121;*/
}

.apps-container{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

/* Heading */
.apps-heading{
  margin-bottom:28px;
}

.apps-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.12);
 
  background:#0ba9ae;
}

.apps-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:#ff5a1f;
}

.apps-kicker-text{
  font-size:13px;
  font-weight:700;
  color:#111;
  letter-spacing:.3px;
}

.apps-title-row{
  margin-top:16px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}

.apps-title{
  margin:0;
  font-size:44px;
  line-height:1.05;
  font-weight:900;
  color:#111;
  max-width:820px;
}

.apps-title-accent{
  background:linear-gradient(90deg,#ff5a1f,#ff7b3a);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* CTA button (right) */
.apps-cta{
  display:inline-flex;
  align-items:center;
  gap:14px;
  background:#0f141d;
  border-radius:14px;
  padding:16px 18px 16px 20px;
  text-decoration:none;
  border:1px solid rgba(0,0,0,0.10);
  transition:all .25s ease;
}

.apps-cta-text{
  color:#fff;
  font-weight:800;
  font-size:14px;
  letter-spacing:.2px;
  white-space:nowrap;
}

.apps-cta-icon{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:#ff5a1f;
  color:#fff;
  font-weight:900;
  flex:0 0 auto;
}

.apps-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 40px rgba(0,0,0,.22);
}

/* Grid (4 cards) */
.apps-grid{
 display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:28px;                /* más separadas */
}

/* Card */
.apps-card{
 display:flex;
  flex-direction:column;
  border-radius:22px;
  overflow:hidden;
  background:linear-gradient(180deg,#f6a13a 0%, #ffffff 56%);
  border:1px solid rgba(0,0,0,0.08);
  box-shadow:0 22px 55px rgba(0,0,0,.18);
  min-width:0;
}

.apps-card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  border-color:rgba(255,255,255,0.12);
}
/* TOP area */
.apps-card-top{
  position:relative;
  padding:22px 22px 8px;
  display:flex;
  justify-content:center;
}

/* Circle image */
.apps-card-avatar{
  width:132px;
  height:132px;
  border-radius:999px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 18px 35px rgba(0,0,0,.15);
}

.apps-card-avatar img{
  width:78%;
  height:78%;
  object-fit:contain;
  display:block;
}

/* Arrow button (top-right) */
.apps-card-arrow{
  position:absolute;
  top:16px;
  right:16px;
  width:42px;
  height:42px;
  border-radius:12px;
  background:#ff6a00;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  text-decoration:none;
  box-shadow:0 10px 20px rgba(255,106,0,.28);
  transition:transform .2s ease;
}

.apps-card-arrow:hover{
  transform:translateX(2px);
}

/* Body */
.apps-card-body{
  padding:14px 22px 0;
  color:#111;
}

.apps-card-title{
  margin:0 0 12px 0;
  font-size:18px;
  font-weight:900;
}

/* List */
.apps-card-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.apps-card-list li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:13.5px;
  line-height:1.35;
  color:#222;
}

.apps-star{
  width:14px;
  height:14px;
  margin-top:2px;
  flex:0 0 auto;
  opacity:.95;
}

/* Bottom button area */
.apps-card-actions{
  padding:18px 22px 22px;
  margin-top:auto; /* empuja el botón al fondo */
}

/* Buttons */
.apps-btn{
  height:44px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:13px;
  text-decoration:none;
  letter-spacing:.2px;
}

/* Primary orange button */
.apps-btn--primary{
  background:#ff6a00;
  color:#fff;
  box-shadow:0 12px 24px rgba(255,106,0,.28);
}

/* Semi/outline button */
.apps-btn--ghost{
  background:rgba(255,106,0,.10);
  border:1px solid rgba(255,106,0,.55);
  color:#ff6a00;
}
/* Media */
.apps-card-media{
  position:relative;
  height:180px;
  overflow:hidden;
}

.apps-card-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.02);
}

.apps-card-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.08), rgba(0,0,0,.70));
}

.apps-card-arrow{
  position:absolute;
  top:14px;
  right:14px;
  width:42px;
  height:42px;
  border-radius:12px;
  background:#ff5a1f;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:900;
  z-index:2;
  transition:transform .25s ease;
}

.apps-card:hover .apps-card-arrow{
  transform:translateX(2px);
}

/* Body */
.apps-card-body{
  padding:18px 18px 20px;
  color:#fff;
}

.apps-card-title{
  margin:0 0 12px 0;
  font-size:18px;
  font-weight:900;
  letter-spacing:.2px;
}

.apps-card-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.apps-card-list li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:13.5px;
  line-height:1.35;
  opacity:.92;
  color: var(--negro);
}

.apps-star{
  width:14px;
  height:14px;
  margin-top:2px;
  flex:0 0 auto;
}
/*==================================================================================================================================
                                                                                                                         MEDIA 991                                         
=====================================================================================================================================*/
@media screen and (max-width: 991px) {
  body {
    --_typography---font-family--body: Geist, sans-serif;
    --_typography---body--body-sm: 1.125rem;
    --_typography---body--line-height: 1.3em;
    --_typography---body--font-weight-500: 500;
    --_typography---font-family--heading: "Mona Sans", sans-serif;
    --_typography---h1--h1: 4rem;
    --_typography---h1--line-height: 1.1em;
    --_typography---h1--font-weight-600: 600;
    --_typography---h2--h2: 3.25rem;
    --_typography---h2--line-height: 1.1em;
    --_typography---h2--font-weight-600: 600;
    --_typography---h3--h3: 2.125rem;
    --_typography---h3--line-height: 1.1em;
    --_typography---h3--font-weight-600: 600;
    --_typography---h4--h4: 2rem;
    --_typography---h4--line-height: 1.1em;
    --_typography---h4--font-weight-600: 600;
    --_typography---h5--h5: 1.75rem;
    --_typography---h5--line-height: 1.1em;
    --_typography---h5--font-weight-600: 600;
    --_typography---h6--h6: 1.5rem;
    --_typography---h6--line-height: 1.1em;
    --_typography---h6--font-weight-600: 600;
    --_typography---body--body-xs: .875rem;
    --_typography---body--body-small: var(--base-font-size--base-small);

    --_typography---body--line-height-0: 0em;
    --_typography---body--font-weight-600: 600;
    --_typography---body--letter-spacing: -.32px;
    --_typography---h1--font-weight-700: 700;
    --_typography---body--line-height-1-2: 1.2em;
    --_layout---container-max-width: 1360px;
    --_layout---container-gutter: 1.25rem;
    --_layout---inner-container-max-width: 750px;
    --_layout---inner-container-gutter: 1.25rem;
    --_layout---container-medium-max-width: 1160px;
    --_layout---container-medium-gutter: 1.25rem;
    --_layout---container-small-max-width: 860px;
    --_layout---container-small-gutter: 1.25rem;
    --_layout---spacing--section-spacing: 6.25rem;
    --_layout---spacing--section-spacing-bottom: 6.25rem;
    --_layout---container-full-max-width: 100%;
    --_layout---container-full-gutter: 1.25rem;
    --_layout---spacing--section-spacing-top: 6.25rem;
  }
  h2{
    font-size: 3rem;
  }

  .section-title-wrap.one {
    grid-template-columns: 1fr .6fr;
  }

/*botones*/
  .button-icon,
  .logo {
    width: auto;
  }
   .button-icon-hover {
    width: auto;
  }
  .nav-menu {
    background-color: #feffff;
   
}
  .dropdown {
    justify-content: flex-start;
    align-items: center;
    display: block;
  }
   blockquote {
    padding: 2.5rem;
  }
 
  .hero-inner-section {
    padding-top: 10rem;
  }

 

  .style-guide-wrapper {
    margin-bottom: 2.813rem;
  }

 

  .grid-footer {
    grid-template-columns: 1fr;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .subscribe-wrap {
    width: 660px;
  }

 

  .nav-link {
    text-align: left;
    margin-top: .75rem;
    margin-bottom: .75rem;
    padding: .313rem .938rem;
    display: block;
  }

  .nav-link:hover {
    color: #1ca0d0;
  }

  .nav-text-color-white {
    color:#d54713;
  }

  
 .dropdown-list-inner {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
  }
  

 
 
  .grid-footer-menu {
    grid-template-columns: .8fr 1fr 1fr 1fr;
  }

  

  .subscribe-wrap {
    width: 660px;
  }

 

  .nav-text-color-white:hover {
    color: #4514e9;
  }

 
 

  .menu-button {
    background-color: #f9f7f6;
    background-image: linear-gradient(-45deg, var(--naranja-starmix), #f4f4f4);
    color: var(--naranja-starmix);
    border-radius: 10px;
    padding: .75rem;
  }

  .menu-button.w--open {
    background-color: #8a9366;
    background-image: none;
  }

  

  .dropdown-toggle {
    padding: .625rem .938rem;
    display: flex;
  }

  .dropdown-toggle:hover {
    color: #1c97ad;
  }

  /*.dropdown-toggle {
    color: #104395;
    transition: color .3s cubic-bezier(.455, .03, .515, .955);
  }

  .dropdown-toggle:hover {
    color:#142391;
  }*/

 /*.nav-text-color-white:hover {
    color:#708d78;
  }*/
  

  .right-nav {
   justify-content: center;
    gap: 15px;
  }
  .hero-background-video {
    height: 700px;
  }
   .top-bar-left{
    display: none !important;
  }
  
 
  .hero-quote-wrap {
    padding-bottom: 5rem;
  }

    .grid-about{
    display: flex;
    flex-direction: column;
    gap: var(--gap--gap-8);
  }
   .about-info-inner{
    flex-wrap: wrap !important;
  }
       .service-info-link {
     grid-column-gap: var(--gap--gap-8);
    grid-row-gap: var(--gap--gap-8);
    padding-top: 1.875rem;
    padding-bottom: 1.875rem;
  }
.service-info-inner {/**/
    grid-column-gap: var(--gap--gap-8);
    grid-row-gap: var(--gap--gap-8);
  }
 .industry-name.text-white.two {/**/
    display: block;
  }
  .industry-image-bg.two {/**/
    height: 60px;
    top: 26%;
  }
   .testimonial-info.two {/**/
    grid-column-gap: var(--gap--gap-10);
    grid-row-gap: var(--gap--gap-10);
    padding: 1.2rem;
  }
  .industry-more-info.two {/**/
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    order: -9999;
  }
   .award-info-inner.two {/**/
    grid-template-columns: .8fr 1fr;
  }
   .service-two-list-wrapper.two, .service-two-list-wrapper.three, .service-two-list-wrapper.four {/**/
    opacity: 1;
    position: static;
  }
 .grid-hero-two.two {/**/
    grid-template-columns: 1.1fr auto;
  }
  .service-two-info {
    grid-column-gap: var(--gap--gap-8);
    grid-row-gap: var(--gap--gap-8);
    flex-flow: column;
    display: flex;
  }

  .service-two-list-wrapper {
    border-radius: .313rem;
    background-color: var(--color--gray-5);
    padding: 1.25rem;
  }

  .service-two-list-wrapper.two, .service-two-list-wrapper.three, .service-two-list-wrapper.four {
    opacity: 1;
    position: static;
  }

 .service-info-inner-two {/**/
    width: auto;
  }

  .service-image-link {
    border-radius: 0%;
    width: 100%;
    height: 100%;
    padding: 0;
    display: block;
  }

  .service-image-two {
    border-radius:.313rem;
    width: 100%;
    height: 100%;
    display: block;
  }

   .service-cta-main {
    padding-top: 3.125rem;
    display: block;
  }

  .service-image-two-wrap {
    border-radius: 0%;
    height: 100%;
    padding: 0;
  }
   .counter-content.three {
    top: 87.5%;
    right: 24%;
  }
 .counter-content.three {/**/
    top: 87.5%;/**/
    right: 24%;
  }.counter-content.four {
    right: -3%;
  }
  .app-overlay{ display:block; } /* sin !important */

  /* Mantener 2 columnas (texto + imagen) como escritorio */
  .app-card-inner{
    grid-template-columns: 60% 40% !important;
    align-items: stretch;
  }

  /* Mantener overlay como escritorio (horizontal, no blanco vertical) */
  .app-overlay{
    display: block !important;
    background: linear-gradient(90deg,
      rgba(255,255,255,0.95) 0%,
      rgba(255,255,255,0.75) 18%,
      rgba(255,255,255,0.25) 40%,
      rgba(255,255,255,0) 60%
    ) !important;
  }

  /* Evita que la imagen se haga gigante por min-height */
  .app-image-wrap{
    min-height: 260px !important;
   /* height: auto !important;*/
  }

  .app-image{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
  .app-card-inner{
    grid-template-columns: 60% 40% !important;
    align-items: stretch;
  }

  .app-overlay{
    display: block !important;
    background: linear-gradient(90deg,
      rgba(255,255,255,0.95) 0%,
      rgba(255,255,255,0.75) 18%,
      rgba(255,255,255,0.25) 40%,
      rgba(255,255,255,0) 60%
    ) !important;
  }

  .app-image{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  
  }
  .service-image-main {/**/
    grid-column-gap: var(--gap--gap-8);
    grid-row-gap: var(--gap--gap-8);
    grid-template-columns: auto 1fr;
  }

  .service-icon {
    height: 35px;
  }
 .service-content-wrap {/**/
    flex-flow: column;
    display: flex;
  }

.service-feature-list {/**/
    grid-column-gap: var(--gap--gap-5);
    grid-row-gap: var(--gap--gap-5);
  }

 
  .feature-item-icon {/**/
    width: auto;
  }

  /*.service-arrow {
    flex: none;
  }*/

  /*.service-icon-01, .service-hover-icon {
    width: auto;
  }

  
  .service-box-height {
    display: none;
  }*/    .industry-image-bg.four {
    height: 60px;
  }
  .apps-cta{
    margin-left: 0 !important;
    width: auto;
  }}

/*==================================================================================================================================
                                                                                                                         MEDIA 767                                         
=====================================================================================================================================*/
@media screen and (max-width: 767px) {
  body {
    --_typography---font-family--body: Geist, sans-serif;
    --_typography---body--body-sm: 1rem;
    --_typography---body--line-height: 1.3em;
    --_typography---body--font-weight-500: 500;
    --_typography---font-family--heading: "Mona Sans", sans-serif;
    --_typography---h1--h1: 3.5rem;
    --_typography---h1--line-height: 1.1em;
    --_typography---h1--font-weight-600: 600;
    --_typography---h2--h2: 2.625rem;
    --_typography---h2--line-height: 1.1em;
    --_typography---h2--font-weight-600: 600;
    --_typography---h3--h3: 1.75rem;
    --_typography---h3--line-height: 1.1em;
    --_typography---h3--font-weight-600: 600;
    --_typography---h4--h4: 1.5rem;
    --_typography---h4--line-height: 1.1em;
    --_typography---h4--font-weight-600: 600;
    --_typography---h5--h5: 1.5rem;
    --_typography---h5--line-height: 1.1em;
    --_typography---h5--font-weight-600: 600;
    --_typography---h6--h6: 1.25rem;
    --_typography---h6--line-height: 1.1em;
    --_typography---h6--font-weight-600: 600;
    --_typography---body--body-xs: .875rem;
   --_typography---body--body-small: var(--base-font-size--base-small);

    --_typography---body--line-height-0: 0em;
    --_typography---body--font-weight-600: 600;
    --_typography---body--letter-spacing: -.32px;
    --_typography---h1--font-weight-700: 700;
    --_typography---body--line-height-1-2: 1.2em;
    --_layout---container-max-width: 1360px;
    --_layout---container-gutter: .9375rem;
    --_layout---inner-container-max-width: 750px;
    --_layout---inner-container-gutter: .9375rem;
    --_layout---container-medium-max-width: 1160px;
    --_layout---container-medium-gutter: .9375rem;
    --_layout---container-small-max-width: 860px;
    --_layout---container-small-gutter: .9375rem;
    --_layout---spacing--section-spacing: 5rem;
    --_layout---spacing--section-spacing-bottom: 5rem;

    --_layout---spacing--section-spacing-top: 5rem;
  }

 h2{
    font-size: 1.3rem;
     text-align: justify;
    margin-bottom: 2rem; /* espacio extra abajo */
  }
.about-button-wrap{
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .about-button-wrap .primary-button,
  .about-button-wrap .download-link{
    width: 100%;
    text-align: center;
  }
  .info-text-left.text-linear-gradient {
    flex: none;
    /* Evita que este elemento se expanda; mantiene su tamaño natural dentro de un contenedor flex */
  }

  .section-title-wrap {
    flex-flow: column;
    /* Organiza los elementos hijos en columna (de arriba hacia abajo) */
    align-items: stretch;
    /* Hace que los elementos hijos ocupen todo el ancho disponible */
    display: flex;
    /* Define que este contenedor use flexbox para organizar sus hijos */
  }


  .section-title-wrap.one {
    grid-column-gap: 15px;
    /* Espacio horizontal entre columnas del grid */
    grid-row-gap: 15px;
    /* Espacio vertical entre filas del grid */
    grid-template-rows: auto;
    /* Las filas se ajustan automáticamente al contenido */
    grid-template-columns: 1fr .4fr;
    /* Define dos columnas: la primera ocupa 1fr, la segunda 0.4fr */
    grid-auto-columns: 1fr;
    /* Columnas que se creen automáticamente tendrán 1fr de ancho */
    display: grid;
    /* Activa CSS Grid para controlar filas y columnas */
  }

  /* =========================
   BOTÓN MÁS PEQUEÑO EN MÓVIL
   ========================= */

  .button-primary-inner1 {
    grid-column-gap: var(--gap--gap-3);
    /* más pequeño */
    grid-row-gap: var(--gap--gap-3);
    padding: 6px 10px;
    /* reduce espacio interno */
    border-radius: 6px;
    /* opcional, más compacto */

  }



  .button-text-wrap {
    padding-left: 1.25rem;
  
}
/*navegador*/
.dropdown-link-list {
    padding-left: .625rem;
    padding-right: .625rem;
  }
    :root{
    --topbar-h: 32px;
    --nav-h: 74px;
  }

  /* Top-bar compacta */
  .top-bar{
    height: var(--topbar-h);
  }

  .top-bar-inner{
    padding: 0 10px;
    justify-content: flex-end;
    gap: 10px;
    height: 100%;
  }

  /* Oculta logo en móvil para que no se amontone */
  .top-bar-left{
    display: none !important;
  }

  /* Contacto + idioma compactos */
  .top-bar-right{
    font-size: 12px;
    gap: 10px;
  }

  .top-bar-right .divider{
    height: 12px;
    margin: 0 4px;
  }

  /* Navbar debajo */
  .navbar.w-nav{
    top: var(--topbar-h);
  }

  body{
    padding-top: calc(var(--topbar-h) + var(--nav-h)) !important;
  }

  /* Reduce márgenes de links si se aprieta */
  .nav-link{
    margin: .75rem .35rem;
  }

  /* =========================================
     CONTACT BUTTON (si tu botón es .primary-button)
     - Visible en móvil en el header
     Nota: Para que quede EXACTO al lado del ☰,
     el botón debe estar fuera del nav-menu (overlay).
     ========================================= */
  .navbar.w-nav .primary-button{
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 10001 !important;

    padding: 8px 12px !important;
    border-radius: 8px !important;
  }

  .navbar.w-nav .primary-button .button-text-wrap,
  .navbar.w-nav .primary-button .button-text,
  .navbar.w-nav .primary-button .button-hover-text{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    white-space: nowrap;
  }
    /* En overlay, el dropdown NO debe ser absoluto */
  .w-nav-overlay .dropdown-list{
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
  }

  .w-nav-overlay .dropdown-link-list{
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Un poco de separación para que se lea */
  .w-nav-overlay .dropdown-link-list{
    margin-top: 8px;
  }
  
  /* Fuerza el dropdown de Service igual que Equipment */
  .w-nav-overlay .dropdown-link-list,
  .w-nav-overlay .dropdown-list-inner{
    text-align: left !important;
  }

  /* Quita cualquier centrado raro en los links */
  .w-nav-overlay .dropdown-link{
    display: block !important;
    width: 100% !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }

  /* Si Service tiene columnas o grid, lo volvemos 1 columna */
  .w-nav-overlay .dropdown-link-list{
    display: block !important;
    column-count: 1 !important;
    column-gap: 0 !important;
  }
    .w-nav-overlay .dropdown-link-list{
    padding: 16px 20px !important; /* igual a Equipment */
  }


  /* En overlay, que el dropdown empuje el menú (no flotante) */
  .navbar.w-nav .w-nav-overlay .dropdown-list{
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
  }

  /* MISMO “cajón” para ambos */
  .navbar.w-nav .w-nav-overlay .dropdown-link-list{
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 16px 20px !important;   /* 👈 igual para ambos */
    margin-top: 8px !important;
    text-align: left !important;     /* 👈 quita centrado */
  }

  /* Service trae .dropdown-column: lo normalizamos */
  .navbar.w-nav .w-nav-overlay .grid-dropdown,
  .navbar.w-nav .w-nav-overlay .dropdown-column{
    display: block !important;
    width: 100% !important;
    text-align: left !important;
  }

  /* Links con el mismo espaciado que te gusta (Equipment) */
  .navbar.w-nav .w-nav-overlay .dropdown-link{
    display: block !important;
    width: 100% !important;
    text-align: left !important;

    margin: 10px 0 !important;       /* 👈 separación uniforme */
    padding: 0 !important;
    line-height: 1.2 !important;
  }
    /* Quita layout tipo grid/columnas que centra y separa */
  .w-nav-overlay .grid-dropdown,
  .w-nav-overlay .dropdown-column{
    display: block !important;
    grid-row-gap: 0 !important;
    grid-column-gap: 0 !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
    place-items: stretch start !important;
    justify-items: start !important;
    align-items: start !important;
  }

  /* Asegura que la caja del dropdown no centre el contenido */
  .w-nav-overlay .dropdown-link-list{
    text-align: left !important;
  }

  /* Links con el MISMO “ritmo” que Equipment */
  .w-nav-overlay .dropdown-link{
    display: block !important;
    width: 100% !important;

    /* Esto mata el “centrado” tipo flex si lo traen */
    justify-content: flex-start !important;
    align-items: center !important;

    /* Esto mata el espacio gigante */
    height: auto !important;
    min-height: 0 !important;

    margin: 6px 0 !important;     /* 👈 como Equipment */
    padding: 0 !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }
   .w-nav-overlay .w-layout-grid{
    grid-row-gap: 0 !important;
    grid-column-gap: 0 !important;
  }
  
 

  .grid-dropdown {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
    /* Oculta logo superior */
  .top-bar-left{
    display: none;
  }

  /* Oculta email */
  .mail-link{
    display: none;
  }

  /* Oculta texto teléfono */
  .phone-text{
    display: none;
  }

  /* Oculta texto follow */
  .follow-text{
    display: none;
  }

  /* Quita divisores */
  .divider{
    display: none;
  }

  /* Reduce tamaño iconos */
  .social-icon{
    width: 22px;
    height: 22px;
  }

  .social-icon img{
    width: 14px;
    height: 14px;
  }

  /* Compacta espacio */
  .top-bar-right{
    gap: 8px;
    justify-content: flex-end;
  }
  



  /*fixxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

  
/* Teléfono                                       */
.phone-link{
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: #fff;
}


.phone-icon{
  width: 14px;
  height: 14px;
  background: currentColor;
  border-radius: 50%;
}

/* Email */
.mail-link{
  text-decoration: none;
  color: #fff;
}


  /*hero*/
  
  /* Evita el “corte” por barras del navegador móvil */
  .hero-section{
    height: auto;              /* en tu CSS está en 100vh :contentReference[oaicite:2]{index=2} */
    min-height: 100svh;        /* mejor que 100vh en mobile */
  }

  /* El hero en 1 columna */
  .grid-hero{
    grid-template-columns: 1fr;  /* antes 1.8fr 1fr :contentReference[oaicite:3]{index=3} */
    grid-row-gap: 1.5rem;
    margin-bottom: 2.5rem;
  }

  /* Alineación del contenido derecho */
  .hero-right-wrap{
    align-items: flex-start;
    text-align: left;
  }

  /* Card/quote sin anchos fijos */
  .hero-quote-card{
    width: min(260px, 92vw);
  }

  .quote-description{
    width: auto;               /* antes 385px :contentReference[oaicite:4]{index=4} */
    max-width: 92vw;
    padding: 0 1rem;
    font-size: 0.95rem;
  }

  /* Ajuste del título para que no se “coma” el layout */
  .hero-title{
    font-size: clamp(34px, 9vw, 56px);
    line-height: 1.05;
  }

  /* Menos “aire” abajo para que no se vea aplastado */
  .hero-quote-wrap{
    padding-bottom: 2.25rem;   /* antes 6.25rem :contentReference[oaicite:5]{index=5} */
  }

  /* El video siempre cubriendo */
  .hero-video-wrap video,
  .hero-background-video{
    object-fit: cover;
  }
  
  .hero-background-video {
    height: 550px;
  }
    .about-info-box,
  .about-image-box{
    width: 250px;
    height: 250px;
  }

  .about-info-box{
    padding-top: 2rem;
  }

  .about-info-box.box-bg-white{
    padding-top: 1.6rem;
  }
    .about-info-box{
    overflow: hidden !important;
  }
   .about-info-inner{
    flex-wrap: wrap !important;     /*  permite bajar */
    overflow-x: hidden !important;  /*  quita carrusel */
    justify-content: center !important;
  }

  .about-info-inner > .about-info-box,
  .about-info-inner > .about-image-box{
    flex: 0 0 250px !important;     /* tamaño fijo */
    width: 250px !important;
    height: 250px !important;
  }
  
  .products-counter-wrap {
    grid-column-gap: var(--gap--gap-8);
    grid-row-gap: var(--gap--gap-8);
    grid-template-rows: auto;
    grid-template-columns: auto 1fr;
    grid-auto-columns: 1fr;
    justify-content: flex-start;
    display: grid;
  }
.products-counter-description {
    width: auto;
  }
 .product-info-wrap1 {
    margin-bottom: 3.125rem;
    padding-top: 5rem;
  }
 .product-inner-info{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem !important;}
  .counter-content.four {
    position: static;
    right: -10%;
  }
 .cta-info-wrapper.one {/**/
    background-size: cover;
  }
 .cta-info-inner.one {/**/
    flex-flow: wrap;
    justify-content: flex-start;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    display: flex;
  }
   .industry-image-bg.one {/**/
    height: 80px;
  }

    .counter-content.one, .counter-content.two, .counter-content.three {/**/
    position: static;
  }
   .section-title-wrap.one {/**/
    display: flex;
  }
  
  .cta-info-wrapper.one {/**/
    height: 100%;
  }
   .industry-image-bg.one {/**/
    height: 60px;
    top: 2%;
    left: 2%;
  }
   .slider-arrow-left.one {/**/
    width: 40px;
    height: 40px;
    bottom: -12.8%;
  }

  .industry-image-bg.two {/**/
    display: none;
    top: 17%;
    left: 3%;
  }

   .industry-more-info.two {/**/
    order: -9999;
  }
 .award-info-inner.two {/**/
    grid-template-columns: 1fr 1fr;
  }

   .grid-hero-two.two {/**/
    grid-column-gap: var(--gap--gap-6);
    grid-row-gap: var(--border-radius--0);
  }
.service-image-main {
    grid-template-columns: auto;
  }
 
  .industry-image-bg.three {
    height: 40px;
  }
  
  .service-info-inner {/**/
    flex-flow: column;
    display: flex;
  }
  .industry-image-bg.four {
    height: 40px;
  }
 .service-info-link {/**/
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
   .service-info-inner {/**/
    flex-flow: column;
    display: flex;
  }
  .applications-core-section .applications-card:nth-of-type(even) .testimonial-two-image-wrap,
  .applications-core-section .applications-card:nth-of-type(even) .testimonial-info.two{
    order: initial;
  }}

/*==================================================================================================================================
                                                                                                                         MEDIA 479                                         
=====================================================================================================================================*/
@media screen and (max-width: 479px) {
  body {
    --_typography---font-family--body: Geist, sans-serif;
    --_typography---body--body-sm: 1rem;
    --_typography---body--line-height: 1.3em;
    --_typography---body--font-weight-500: 500;
    --_typography---font-family--heading: "Mona Sans", sans-serif;
    --_typography---h1--h1: 3rem;
    --_typography---h1--line-height: 1.1em;
    --_typography---h1--font-weight-600: 600;
    --_typography---h2--h2: 2.25rem;
    --_typography---h2--line-height: 1.1em;
    --_typography---h2--font-weight-600: 600;
    --_typography---h3--h3: 1.5rem;
    --_typography---h3--line-height: 1.1em;
    --_typography---h3--font-weight-600: 600;
    --_typography---h4--h4: 1.25rem;
    --_typography---h4--line-height: 1.1em;
    --_typography---h4--font-weight-600: 600;
    --_typography---h5--h5: 1.125rem;
    --_typography---h5--line-height: 1.1em;
    --_typography---h5--font-weight-600: 600;
    --_typography---h6--h6: 1.25rem;
    --_typography---h6--line-height: 1.1em;
    --_typography---h6--font-weight-600: 600;
    --_typography---body--body-xs: .875rem;
   --_typography---body--body-small: var(--base-font-size--base-small);

    --_typography---body--line-height-0: 0em;
    --_typography---body--font-weight-600: 600;
    --_typography---body--letter-spacing: -.32px;
    --_typography---h1--font-weight-700: 700;
    --_typography---body--line-height-1-2: 1.2em;
    --_layout---container-max-width: 1360px;
    --_layout---container-gutter: .9375rem;
    --_layout---inner-container-max-width: 750px;
    --_layout---inner-container-gutter: .9375rem;
    --_layout---container-medium-max-width: 1160px;
    --_layout---container-medium-gutter: .9375rem;
    --_layout---container-small-max-width: 860px;
    --_layout---container-small-gutter: .9375rem;
    --_layout---spacing--section-spacing: 5rem;
    --_layout---spacing--section-spacing-bottom: 5rem;

    --_layout---spacing--section-spacing-top: 5rem;
  }


  
 /* que el link no tenga altura rara */
  .right-nav .primary-button {
    display: inline-flex;
    align-items: center;
    line-height: 1;
  }

  .right-nav .button-primary-inner1 {
    padding: 0;
    /* el padding lo controla el texto */
    grid-column-gap: 8px;
  }

  .right-nav .button-text-wrap1 {
    padding: 6px 10px;
    /* 👈 baja la altura total */
  }

  /* icono más pequeño y SIN márgenes que lo suban */
  .right-nav .button-icon-bg {
    width: 30px;
    height: 30px;
    margin: 0;
    /* 👈 clave para alineación */
  }

  .right-nav .button-text1 {
    font-size: 12px;
    line-height: 1;
  }
  .section-title-wrap.one {
    display: flex;
    /* Hace que los elementos hijos se alineen en una misma fila (horizontal) */
  }


/* botones*/

  .button-primary-inner1 {
    padding: 4px 8px;
    grid-column-gap: 6px;
  }

  .button-text-wrap1 {
    padding: 8px 10px;
  }

  .button-icon-bg {
    width: 32px;
    height: 32px;
    margin: 2px;
    border-radius: 8px;
  }

  .button-icon1,
  .button-icon-hover1 {
    width: 12px;
    height: 12px;
  }

  .button-text1 {
    font-size: 12px;
    line-height: 1;

  }



  .button-text-wrap {
    padding-left: .938rem;
  }

  .button-primary-inner {
    grid-column-gap: var(--gap--gap-5);
    grid-row-gap: var(--gap--gap-5);
  }
  .grid-dropdown {
    grid-column-gap: 15px;
    grid-row-gap: 15px;
  }
  
  .dropdown-link {
    font-size:  var(--base-font-size--base-small);
;
    white-space: break-spaces;
  }
  .nav-link {
    margin-top: .5rem;
    margin-bottom: .5rem;
  }
  
  
  .quote-description {
    width: auto;
    padding-left: .9375rem;
    padding-right: .9375rem;
  }
 .products-counter-main {
    grid-column-gap: var(--gap--gap-8);
    grid-row-gap: var(--gap--gap-8);
  }
  .products-counter-wrap {
    flex-flow: column;
    display: flex;
  }
.product-info-title{
    font-size: clamp(1.6rem, 8vw, 2.1rem) !important;
  }
.service-info-link {/**/
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }
.industry-image-bg.three {
    bottom: 2%;
  }
  /* el bloque del heading respira y no se rompe */
  .models-heading{
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* H2 más pequeño y con mejor salto */
  .models-heading h2{
    font-size: 1.9rem !important;   /* ajusta si quieres 1.8–2.2 */
    line-height: 1.15 !important;
    text-align: left;               /* o center si lo prefieres */
    margin-bottom: 0.75rem !important;
    word-break: normal;
    overflow-wrap: break-word;      /* evita desbordes sin “verticalizar” */
  }

  /* ESTE es el problema grande: quitar los 200px inline */
  .models-heading p[style]{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* y ya lo dejamos legible */
  .models-heading p{
    font-size: 1rem;
    line-height: 1.45;
    text-align: left;               /* o center */
    max-width: 100%;
  }
}

/*==================================================================================================================================
                                                                                                                1920                                                                                                               MEDIA 1920                                        
=====================================================================================================================================*/
@media screen and (min-width: 1920px) {
  .about-content-description {
    width: 300px;
  }

  .about-info-text,
  .about-info-description {
    width: 300px;
  }

  
  /* Aquí solo ponemos lo que CAMBIA en 1920px */
  .section-title-wrap {
    grid-column-gap: var(--gap--gap-13); /* 100px */
    grid-row-gap: var(--gap--gap-13);
    grid-template-columns: 1fr 1.2fr;
  }
  .hero-background-video {
    height: 1100px;
  }
  
 


  .hero-quote-wrap {
    background-color: #5109094d;
  }


  .grid-hero {
    grid-column-gap: var(--gap--gap-13);
    grid-row-gap: var(--gap--gap-13);
    grid-template-columns: 3fr 1fr;
    align-items: center;
  }
 

  

  .hero-left-inner {
    padding-right: 35rem;
  }
    .about-info-box,
  .about-image-box{
    width: 450px;
    height: 450px;
  }

  .about-info-box{
    padding-top: 7.5rem;
  }

  .about-box-vector{
    height: 145px;
  }
    .product-section {
    overflow: visible;
  }
    .products-counter-inner.product-two-counter {
    transform: translate(-150px, -277px)rotate(-450deg);
  }

  .grid-products {
    grid-column-gap: var(--gap--gap-8);
    grid-row-gap: var(--gap--gap-8);
  }

  .product-list-item {
    flex-flow: row;
    justify-content: space-between;
    align-items: flex-start;
  }

  .product-info-text {
    text-align: right;
  }

  .product-inner-info {
    grid-column-gap: var(--gap--gap-13);
    grid-row-gap: var(--gap--gap-13);
  }
    .grid-footer-menu {
    grid-column-gap: var(--gap--gap-12);
    grid-row-gap: var(--gap--gap-12);
    grid-template-columns: .8fr .8fr 1.2fr 1fr;
  }

  .grid-footer {
    grid-column-gap: var(--gap--gap-13);
    grid-row-gap: var(--gap--gap-13);
  }

  .subscribe-wrap {
    width: 420px;
  }

  .grid-blog {
    grid-template-columns: .5fr 1fr;
  }

  .line-wrapper {
    grid-column-gap: 322px;
    grid-row-gap: 322px;
  }

  .footer-logo-info {
    margin-bottom: -7.5rem;
  }

  .grid-hero {
    grid-column-gap: var(--gap--gap-13);
    grid-row-gap: var(--gap--gap-13);
    grid-template-columns: 3fr 1fr;
    align-items: center;
  }

  .hero-left-inner {
    padding-right: 35rem;
  }

  .hero-background-video {
    height: 1100px;
  }

  .hero-quote-wrap {
    background-color: #1515154d;
  }



  .avatar-image.one {
    width: 40px;
    height: 40px;
  }

  .about-info-inner {
    flex-flow: wrap;
    display: flex;
  }

  .about-info-box {
    width: 450px;
    height: 450px;
    padding-top: 7.5rem;
  }

  .about-info-box.box-bg-dark {
    grid-column-gap: var(--gap--gap-4);
    grid-row-gap: var(--gap--gap-4);
  }

  .about-content {
    margin-bottom: 1.875rem;
  }

  .about-content-description {
    width: 300px;
  }

  .about-box-vector {
    height: 145px;
  }

  .about-image-box {
    width: 450px;
    height: 450px;
  }

  .about-box-logo {
    height: 30px;
  }

  .about-info-text, .about-info-description {
    width: 300px;
  }

  .service-section {
    padding-bottom: 3.125rem;
  }

  .section-title-wrap {
    grid-column-gap: var(--gap--gap-13);
    grid-row-gap: var(--gap--gap-13);
    grid-template-columns: 1fr 1.2fr;
  }

 
  .cta-text {
    font-size: var(--font-size--2-125rem\<deleted\|variable-76401e84-c0c5-8355-64d0-16402f07f279\>);
  }


  .product-section1 {
    overflow: visible;
  }
  .section-title-center {
    padding-left: 13.5rem;
    padding-right: 13.5rem;
  }

  .section-title-center._01 {
    padding-left: 32rem;
    padding-right: 32rem;
  }

  .section-title-center._02 {
    width: 1400px;
  }

  .industry-tabs-menu {
    height: 100%;
  }

  .industry-tabs-pane {
    height: auto;
  }

  .industry-image {
    width: 100%;
    height: 100%;
  }

  .industry-image-bg.two {
    top: 31%;
  }

 

  .grid-testimonial {
    grid-column-gap: var(--gap--gap-8);
    grid-row-gap: var(--gap--gap-8);
    grid-template-columns: .9fr 1fr;
  }

  .testimonial-tabs-menu {
    margin-right: 1.875rem;
  }

  .testimonial-tabs-pane {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .testimonial-more-info {
    grid-column-gap: var(--gap--gap-8);
    grid-row-gap: var(--gap--gap-8);
    grid-template-columns: 1fr .8fr;
  }

  .testimonial-inner {
    grid-column-gap: var(--gap--gap-8);
    grid-row-gap: var(--gap--gap-8);
  }

  .testimonial-counter-wrapper {
    padding-left: 3.125rem;
    padding-right: 3.125rem;
  }

  .support-info-wrap {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .service-two-main {
    grid-column-gap: var(--gap--gap-13);
    grid-row-gap: var(--gap--gap-13);
  }

  .grid-contact {
    grid-column-gap: var(--gap--gap-13);
    grid-row-gap: var(--gap--gap-13);
    grid-template-columns: 1fr .8fr;
  }

  .contact-main-info {
    width: 610px;
  }

  .grid-industry {
    grid-column-gap: var(--gap--gap-6);
    grid-row-gap: var(--gap--gap-6);
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }

  .industry-content-two {
    width: auto;
  }

  .grid-case-study {
    grid-template-columns: .7fr 1fr;
  }

  .case-study-score-text {
    width: 190px;
  }

  .product-title-wrap {
    width: 1090px;
  }

  .counter-line-image {
    width: 1300px;
  }

  .counter-content.one {
    top: -.5%;
    left: -.3%;
  }

  .counter-content.two {
    top: 57%;
    left: 24.8%;
  }

  .counter-content.three {
    top: 86.5%;
    right: 35.1%;
  }

  .counter-content.four {
    top: 96%;
    right: 10.1%;
  }

  .service-image-link {
    width: 500px;
    height: 500px;
  }

  .hero-two-section {
    background-color: #333cbc;
  }

  .team-image {
    left: 18%;
  }

  .cta-marquee {
    transform: translate(-60px, -140px)rotate(25deg);
  }

  .cta-marquee-image {
    height: 160px;
  }

  .grid-hero-two {
    grid-template-columns: 1fr .47fr;
  }

  .grid-hero-two.two {
    grid-template-columns: .9fr auto .55fr;
  }

  .hero-content-inner {
    grid-template-columns: 1.275fr .9fr;
  }

  .hero-client-info-main {
    width: 100%;
  }

  .hero-two-title {
    font-size: var(--_typography---h2--h2);
    width: 600px;
  }

  .box-shadow-one {
    width: 100%;
  }

  .hero-client-info-inner {
    height: 600px;
  }

  .empty-state {
    padding-bottom: 1.25rem;
  }

  .grid-service-item {
    flex-flow: row;
    grid-template-columns: minmax(200px, .5fr) 1fr minmax(200px, .6fr);
    grid-auto-columns: 1fr;
    align-items: center;
  }

  .logo-big {
    height: 45vh;
  }

  .inner-number.about-counter {
    font-size: var(--font-size--3-5rem\<deleted\|variable-dc5042fb-d160-4c54-5dc0-c035d95bd531\>);
    margin-bottom: .625rem;
  }

  .like-score {
    font-size: var(--_typography---h2--h2);
  }

  .bg {
    background-image: linear-gradient(180deg, #474747 25%,#a35f5f);
    filter: blur(40px);
  }

  .bg-vector {
    filter: blur(30px);
    height: 700px;
  }

  .bg-shadow {
    height: 700px;
  }
  

  .about-image-wrap {
    margin-bottom: 1.25rem;
  }

  .about-image-small {
    height: 70px;
  }
   .product-section1 {
    overflow: visible;
  }
.counter-content.four {
    top: 96%;
    right: 10.1%;
  }  .avatar-image.one {
    width: 40px;
    height: 40px;
  }

  .counter-content.one {
    top: -0.5%;
    left: -0.3%;
  }
.counter-content.three {
    top: 86.5%;
    right: 35.1%;
  }}


/* --------------------------
                                                                       Responsive: Tablet  (min-width: 768px) and (max-width: 991px)
-------------------------- */
@media (min-width: 768px) and (max-width: 991px){
  :root{
    --topbar-h: 40px;
    --nav-h: 82px;
  }

  .top-bar-inner{
    padding: 0 16px;
  }

  .top-bar{
    font-size: 12px;
  }

  .top-bar-logo img{
    height: 34px;
  }
}


/* ===============================================================================================================================
                                                                                                              768
   ============================================================================================================================= */
@media (min-width: 768px){

  .navbar.w-nav .dropdown-list{
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: max-content;
    z-index: 10020;
  }

  .navbar.w-nav .dropdown-link-list{
    min-width: 340px;
  }
    .about-info-box{
    overflow: visible !important;
  }
}


/* TABLET: círculos un poco más pequeños */
@media screen and (min-width: 768px) and (max-width: 991px){

  .about-info-inner > .about-info-box,
  .about-info-inner > .about-image-box{
    flex: 0 0 250px !important;   /* antes 290px */
    width: 250px !important;
    height: 250px !important;
  }

  /* si quieres reducir un poquito el espacio entre círculos */
  .about-info-inner{
    gap: 1.25rem !important;
  }
  
  .products-counter-main {
    grid-column-gap: var(--gap--gap-11);
    grid-row-gap: var(--gap--gap-11);
  }



  
  .grid-nav {
    grid-template-columns: 1fr auto;
    place-items: center;
  }
.product-info-wrap1 {
    margin-bottom: 4rem;
    padding-top: 6.25rem;
  }
  .grid-products1{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .grid-products1{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
.service-info {/**/
    display: block;
  } .service-list-wrapper {/**/
    position: static;
  }
.section-title-wrap.one {
    grid-template-columns: 1fr .6fr;
  }
  .industry-image-bg.three, .industry-image-bg.one {/**/
    height: 100px;
  }
   .slider-arrow-left.one, .slider-arrow-right.two {/**/
    width: 45px;
    height: 45px;
  }
   .section-title-wrap.one {/**/
    grid-column-gap: var(--gap--gap-5);
    grid-row-gap: var(--gap--gap-5);
    grid-template-rows: auto;
    grid-template-columns: 1fr .4fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
}


/* ========================================================================================================
                                                                                                                   992
   ======================================================================================================================= */
@media (min-width: 992px){
  .about-info-inner{
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 1.25rem !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    padding: 0 1rem !important;
  }
 .about-info-inner{
    flex-wrap:nowrap;
    overflow-x:auto;
  }

  .about-info-inner > .about-info-box,
  .about-info-inner > .about-image-box{
    width:260px;
    height:260px;
    flex:0 0 260px;
  }
  .about-info-inner{
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0 1rem;
  }

  .about-info-inner > .about-info-box,
  .about-info-inner > .about-image-box{
    flex: 0 0 260px;
    width: 260px;
    height: 260px;
  }

}

/* RESPONSIVE                                                                                             1100*/

@media (max-width:1100px){
  .models-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}
/* RESPONSIVE                                                                                             700*/
@media (max-width:700px){
  .models-grid{
    grid-template-columns:1fr;
  }

  .model-card{
    border-right:none;
    border-bottom:1px solid rgba(255,255,255,0.06);
  }

  .model-card:not(:last-child)::after{
    display:none;
  }

 
}



/*================================================================991*/


 

  @media screen and (max-width: 991px) {
 
}






/* Responsive */
@media (max-width: 820px){
 /* .app-card-inner{
    grid-template-columns: 1fr;
  }*/

  .app-image-wrap{/**/
    min-height:220px;
  }


}
/* 3) Darle más espacio al texto y menos a la imagen (desktop) */
@media (min-width: 992px) {/**/
  .app-card-inner {
    grid-template-columns: 60% 40%;
  }
}




@media screen and (max-width: 991px) {
  

  }

  
/* Responsive */
@media (max-width: 820px){/**/}
 



@media (max-width: 768px) {
  .app-left .service-name {
    font-size: 26px;
    max-width: 100%;
  }

  .app-image-wrap {
    min-height: 200px;
  }
}
@media screen and (min-width: 1920px) {
.industry-image-bg.two {/**/
    top: 31%;
  }

 .counter-content.two {
    top: 57%;
    left: 24.8%;
  }
   .grid-hero-two.two {
    grid-template-columns: .9fr auto .55fr;
  }

}




@media screen and (min-width: 1920px) {
.service-image-link {
    width: 500px;
    height: 500px;
  }}


@media screen and (max-width: 991px) {
 }



/* El padre NO debe cortar el contenido */
.service-section,
.service-details-main,
.service-details-wrap,
.service-info{
  overflow: visible !important;
}


/* =============== FIX: que se vean las 4 tarjetas (stack sticky) =============== */

/* El padre NO debe cortar el contenido */
.service-section,
.service-details-main,
.service-details-wrap,
.service-info{
  overflow: visible !important;
}


@media screen and (max-width: 479px) {
 .industry-image-bg.two {/**/
    display: none;
  }
 .slider-arrow-right.two {/**/
    width: 40px;
    height: 40px;
    bottom: -12.8%;
  }

 .industry-more-info.two {/**/
    order: 9999;
  }
   .grid-hero-two.two {/**/
    grid-template-columns: 1.1fr;
  }

}
.applications-core-section .applications-card:nth-of-type(even) .testimonial-info.two{/**/
  order: 1;
}

@media screen and (max-width: 767px){/**/
}

  .industry-image-bg.three {/**/
  inset: auto auto 5% 3%;
}

.counter-content.three {/**/
  position: absolute;
  inset: 86% 34.2% auto auto;
}
.step-info.three {/**/
  background-image: linear-gradient(-45deg, #c8370bbf, #1487adbf);
}

.service-two-list-wrapper.three {/**/
  z-index: 3;
  opacity: 0;
  position: absolute;
  inset: 0% auto auto 0%;
}
.service-step-number.three {/**/
  z-index: 2;
  inset: auto auto auto -11px;
}


@media screen and (min-width: 1920px) {/**/
}
  
  @media screen and (max-width: 991px) {
 
}
@media screen and (max-width: 767px) {/**/


}
 
@media screen and (max-width: 479px) {/**/
}

.industry-image-bg.four {/**/
  inset: auto 8% 3% auto;
}

.counter-content.four {/**/
  position: absolute;
  inset: 96% 9.5% auto auto;
}

.service-two-list-wrapper.four {/**/
  z-index: 4;
  opacity: 0;
  position: absolute;
  inset: 0% auto auto 0%;
}

.service-step-number.four {/**/
  z-index: 2;
  inset: -11px auto auto;
}

@media screen and (min-width: 1920px) {/**/
  }
@media screen and (max-width: 991px) {
}

@media screen and (max-width: 767px) {
    

}
@media screen and (max-width: 767px) {
 }

 

@media (max-width: 991px){/**/
 
}

/* FIX mobile: que NO haya sticky y que la imagen tenga altura */
@media (max-width: 479px){
  .service-list-wrapper{
    position: static !important;
    top: auto !important;
  }

  /*.app-card-inner{
    grid-template-columns: 1fr !important; /* texto arriba, imagen abajo 
  }*/

  .app-image-wrap{
    min-height: 220px !important;
    height: 220px !important; /* fuerza altura para que lazy-load cargue */
  }

  .app-image{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
}







/* =========================
   ACCORDION FINAL
   Desktop abierto / Tablet-Móvil colapsado
   ========================= */

/* Desktop: siempre abierto */
@media (min-width: 992px){
  .service-feature-list{
    max-height: none;
    overflow: visible;
    opacity: 1;
  }
}




.app-image-wrap { position: relative; }

.app-image { position: relative; z-index: 1; }

.app-overlay { z-index: 2; }

.tu-texto-encima-de-la-imagen { 
  position: absolute; 
  z-index: 3; 
}
@media (min-width: 992px){
  .service-feature-list{
    max-height: none;
    overflow: visible;
    opacity: 1;
  }
}


/* =========================================================
   FORZAR MISMO LAYOUT QUE ESCRITORIO EN TABLET + CELULAR
   ========================================================= */
@media (max-width: 991px)
{
}


  @media screen and (max-width: 991px) {
  
}
@media (max-width: 991px){

}

/* =========================
   JOB SITE APPLICATIONS (4 CARDS)
========================= */



/* Responsive */
@media (max-width:1100px){
  .apps-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .apps-title{ font-size:38px; }
}

@media (max-width:680px){
  .apps-grid{ grid-template-columns:1fr; }
  .apps-title{ font-size:32px; line-height:1.08; }
  .apps-cta{ width:100%; justify-content:space-between; }
}

@media (max-width:520px){
  .apps-kicker-text{ font-size:11px; }
}
/*  FIX: que el botón NO se vaya tan lejos */
.apps-title-row{
  justify-content: flex-start !important;  /* en vez de space-between */
  align-items: flex-end;
  gap: 18px;
}

/*  En desktop grande sí lo puedes mandar a la derecha (pero sin hueco raro) */
@media (min-width: 992px){
  .apps-cta{
    margin-left: auto;  /* se va a la derecha solo si hay espacio real */
  }
}

/*  En tablet/móvil: el botón baja debajo del título y queda pegado */
@media (max-width: 991px){
    

}
/* Quita el “aire” enorme arriba de Job Site Applications */
.service-section.section-spacing-top{
  padding-top: 40px !important;   /* prueba 40px o 60px */
}

/* Reduce el espacio interno entre bloques del header */
.service-details-main{
  grid-row-gap: 18px !important;
  grid-column-gap: 18px !important;
}

/* Si aún queda alto, recorta padding vertical del link wrapper */
.service-info-link{
  padding-top: 1.4rem !important;
  padding-bottom: 1.4rem !important;
}
/* Desktop default: grid como lo tienes */
.grid-case-study{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

/* Botón mobile oculto por defecto */
.cs-btn-mobile{ display: none; }

/* Imagen */
.cs-equipment-image{
  width: 100%;
  height: auto;
  display: block;
}

/* MOBILE: texto arriba, imagen abajo, botón al final */
@media (max-width: 767px){

  .grid-case-study{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Oculta el botón del lado izquierdo en mobile */
  .cs-btn-desktop{ display: none; }

  /* Muestra el botón debajo de la imagen en mobile */
  .cs-btn-mobile{
    display: inline-block;
    width: 100%;
    margin-top: 14px;
  }

  /* Asegura que el botón se estire bien */
  .cs-btn-mobile .button-primary-inner{
    width: 100%;
  }
}
 .footer {
  background-color: var(--naranja-starmix);
  position: relative;
  overflow: hidden;
}
.footer-main {
  z-index: 2;
  position: relative;
}
/*.footer-bg-wrap{

}*/


.grid-footer {
  z-index: 99;
  grid-column-gap: var(--gap--gap-9);
  grid-row-gap: var(--gap--gap-9);
  grid-template-rows: auto;
  grid-template-columns: .5fr 1fr;
  grid-auto-columns: 1fr;
  align-items: stretch;
  padding-left: 3.125rem;
  padding-right: 3.125rem;
  display: grid;
  position: relative;
}


.footer-contact-item {
  grid-column-gap: var(--gap--gap-5);
  grid-row-gap: var(--gap--gap-5);
  flex-flow: column;
  display: flex;
}

            .footer-contact-item {
    grid-column-gap: var(--gap--gap-7);
    grid-row-gap: var(--gap--gap-7);
  }   
        
  .footer-contact-item {
    grid-column-gap: var(--gap--gap-5);
    grid-row-gap: var(--gap--gap-5);
  }

  .footer-logo-info {
    margin-bottom: -30px;
    padding-left: .9375rem;
    padding-right: .9375rem;
  }     
    .footer-contact-list {
    grid-column-gap: var(--gap--gap-6);
    grid-row-gap: var(--gap--gap-6);
  }
.working-text {
  color:var(--blanco);
}

.footer-bottom-wrap {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
@media screen and (max-width: 991px) {
  .footer-divider {
    margin-top: 3.125rem;
  }
}
@media screen and (max-width: 479px) {
  .footer-divider {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
}
    
       .footer-logo-info {
  z-index: 1;
  opacity: .1;
  text-align: center;
  margin-bottom: -4.688rem;
  padding-left: 3.125rem;
  padding-right: 3.125rem;
  position: relative;
  overflow: hidden;
}



 




@media screen and (min-width: 1920px) {
  .grid-footer-menu {
    grid-column-gap: var(--gap--gap-12);
    grid-row-gap: var(--gap--gap-12);
    grid-template-columns: .8fr .8fr 1.2fr 1fr;
  }

  .grid-footer {
    grid-column-gap: var(--gap--gap-13);
    grid-row-gap: var(--gap--gap-13);
  }

  .subscribe-wrap {
    width: 420px;
  }

  .grid-blog {
    grid-template-columns: .5fr 1fr;
  }

  .line-wrapper {
    grid-column-gap: 322px;
    grid-row-gap: 322px;
  }

  .footer-logo-info {
    margin-bottom: -7.5rem;
  }

  .grid-hero {
    grid-column-gap: var(--gap--gap-13);
    grid-row-gap: var(--gap--gap-13);
    grid-template-columns: 3fr 1fr;
    align-items: center;
  }

  .hero-left-inner {
    padding-right: 35rem;
  }

  .hero-background-video {
    height: 1100px;
  }

  .hero-quote-wrap {
    background-color: #1515154d;
  }

  .grid-about {
    grid-column-gap: var(--gap--gap-13);
    /*grid-row-gap: var(--gap--gap-13);*/
    grid-template-columns: .4fr 1fr;
  }

 
  .about-info-inner {
    flex-flow: wrap;
    display: flex;
  }

  .about-info-box {
    width: 450px;
    height: 450px;
    padding-top: 7.5rem;
  }

  .about-info-box.box-bg-dark {
    grid-column-gap: var(--gap--gap-4);
    grid-row-gap: var(--gap--gap-4);
  }

  .about-content {
    margin-bottom: 1.875rem;
  }

  .about-content-description {
    width: 300px;
  }

  .about-box-vector {
    height: 145px;
  }

  .about-image-box {
    width: 450px;
    height: 450px;
  }

  .about-box-logo {
    height: 30px;
  }

  .about-info-text, .about-info-description {
    width: 300px;
  }

  .service-section {
    padding-bottom: 3.125rem;
  }

  .section-title-wrap {
    grid-column-gap: var(--gap--gap-13);
    grid-row-gap: var(--gap--gap-13);
    grid-template-columns: 1fr 1.2fr;
  }

  .service-details-main {
    flex-flow: column;
    justify-content: flex-start;
    align-items: stretch;
  }

  .cta-text {
    font-size: var(--font-size--2-125rem\<deleted\|variable-76401e84-c0c5-8355-64d0-16402f07f279\>);
  }

  .product-section {
    overflow: visible;
  }
  .product-section1 {
    overflow: visible;
  }
  .section-title-center {
    padding-left: 13.5rem;
    padding-right: 13.5rem;
  }

  .section-title-center._01 {
    padding-left: 32rem;
    padding-right: 32rem;
  }

  .section-title-center._02 {
    width: 1400px;
  }

  .industry-tabs-menu {
    height: 100%;
  }

  .industry-tabs-pane {
    height: auto;
  }

  .industry-image {
    width: 100%;
    height: 100%;
  }

  

  .products-counter-inner.product-two-counter {
    transform: translate(-150px, -277px)rotate(-450deg);
  }

  .grid-products {
    grid-column-gap: var(--gap--gap-8);
    grid-row-gap: var(--gap--gap-8);
  }

  .product-list-item {
    flex-flow: row;
    justify-content: space-between;
    align-items: flex-start;
  }

  .product-info-text {
    text-align: right;
  }

  .product-inner-info {
    grid-column-gap: var(--gap--gap-13);
    grid-row-gap: var(--gap--gap-13);
  }

  .grid-testimonial {
    grid-column-gap: var(--gap--gap-8);
    grid-row-gap: var(--gap--gap-8);
    grid-template-columns: .9fr 1fr;
  }

  .testimonial-tabs-menu {
    margin-right: 1.875rem;
  }

  .testimonial-tabs-pane {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .testimonial-more-info {
    grid-column-gap: var(--gap--gap-8);
    grid-row-gap: var(--gap--gap-8);
    grid-template-columns: 1fr .8fr;
  }

  .testimonial-inner {
    grid-column-gap: var(--gap--gap-8);
    grid-row-gap: var(--gap--gap-8);
  }

  .testimonial-counter-wrapper {
    padding-left: 3.125rem;
    padding-right: 3.125rem;
  }

  .support-info-wrap {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .service-two-main {
    grid-column-gap: var(--gap--gap-13);
    grid-row-gap: var(--gap--gap-13);
  }

  .grid-contact {
    grid-column-gap: var(--gap--gap-13);
    grid-row-gap: var(--gap--gap-13);
    grid-template-columns: 1fr .8fr;
  }

  .contact-main-info {
    width: 610px;
  }

  .grid-industry {
    grid-column-gap: var(--gap--gap-6);
    grid-row-gap: var(--gap--gap-6);
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }

  .industry-content-two {
    width: auto;
  }

  .grid-case-study {
    grid-template-columns: .7fr 1fr;
  }

  .case-study-score-text {
    width: 190px;
  }

  .product-title-wrap {
    width: 1090px;
  }

  .counter-line-image {
    width: 1300px;
  }

 

 

 

  .service-image-link {
    width: 500px;
    height: 500px;
  }

  .hero-two-section {
    background-color:#abe312;
  }

  .team-image {
    left: 18%;
  }

  .cta-marquee {
    transform: translate(-60px, -140px)rotate(25deg);
  }

  .cta-marquee-image {
    height: 160px;
  }

  .grid-hero-two {
    grid-template-columns: 1fr .47fr;
  }

 

  .hero-content-inner {
    grid-template-columns: 1.275fr .9fr;
  }

  .hero-client-info-main {
    width: 100%;
  }

  .hero-two-title {
    font-size: var(--_typography---h2--h2);
    width: 600px;
  }

  .box-shadow-one {
    width: 100%;
  }

  .hero-client-info-inner {
    height: 600px;
  }

  .empty-state {
    padding-bottom: 1.25rem;
  }

  .grid-service-item {
    flex-flow: row;
    grid-template-columns: minmax(200px, .5fr) 1fr minmax(200px, .6fr);
    grid-auto-columns: 1fr;
    align-items: center;
  }

  .logo-big {
    height: 45vh;
  }

  .inner-number.about-counter {
    font-size: var(--font-size--3-5rem\<deleted\|variable-dc5042fb-d160-4c54-5dc0-c035d95bd531\>);
    margin-bottom: .625rem;
  }

  .like-score {
    font-size: var(--_typography---h2--h2);
  }

  .bg {
    background-image: linear-gradient(180deg, #f5f2f5 25%, #060506);
    filter: blur(40px);
  }

  .bg-vector {
    filter: blur(30px);
    height: 700px;
  }

  .bg-shadow {
    height: 700px;
  }

  .about-image-wrap {
    margin-bottom: 1.25rem;
  }

  .about-image-small {
    height: 70px;
  }
}




.form-subscribe {
    flex-direction: column;
    justify-content: center;
    display: flex;
  }

  .grid-footer-menu {
    grid-column-gap: var(--gap--gap-8);
    grid-row-gap: var(--gap--gap-8);
    grid-template-columns: 1fr 1fr;
  }

  .grid-footer {
    grid-template-columns: 1fr;
    padding-left: .9375rem;
    padding-right: .9375rem;
  }
@media screen and (max-width: 767px) {
  .footer-subscribe {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }}

@media screen and (max-width: 991px) {
   .subscribe-wrap {
    width: 660px;
  }}

@media screen and (max-width: 767px) {
   .subscribe-wrap {
    width: 430px;
  }}

.subscribe-title {
  color: var(--blanco);
  font-size: var(--_typography---h5--h5);
  margin-bottom: 1.625rem;
}

.footer-bottom-wrap {
  z-index: 99;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4.375rem;
  padding-left: 3.125rem;
  padding-right: 3.125rem;
  display: flex;
  position: relative;
  overflow: hidden;
}

.footer-divider {
  background-color: var(--color--transparent);
  border: 1px dashed #ffffff1a;
  width: 100%;
  height: 1px;
  margin-top: 4.375rem;
  margin-bottom: 3.125rem;
}

.button-link {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  text-underline-offset: 2px;
  text-decoration: underline;
  -webkit-text-decoration-color: var(--color--dark);
  text-decoration-color: var(--color--dark);
  align-items: center;
  text-decoration-thickness: 1px;
  transition-property: text-decoration-color;
}

.button-link:hover {
  -webkit-text-decoration-color: var(--color--transparent);
  text-decoration-color: var(--color--transparent);
}

  .subscribe-description {
  color: var(--blanco);
  margin-bottom: 1.25rem;
}

.footer-copyright {
  color: var(--blanco);
  font-size: .875rem;
  align-items: flex-end;
  margin-top: auto;
  margin-bottom: 0;
}

.form-subscribe {
  align-items: center;
  position: relative;
}

.footer-link {
  color: var(--negro);
  text-decoration: none;
  transition: color .3s ease-in-out;
}

.footer-link:hover, .footer-link.w--current {
  color: var(--color--primary-1);
}

.grid-footer-menu {
  grid-column-gap: var(--gap--gap-5);
  grid-row-gap: var(--gap--gap-5);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1.2fr 1fr;
  position: relative;
  overflow: hidden;
}

.footer-item {
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  display: flex;
}

.footer-title {
  color: var(--blanco);
  font-size: var(--_typography---h6--h6);
  margin-bottom: 0;
}

.footer-social-icon {
  width: 20px;
  height: 20px;
}


.footer-links {
  grid-column-gap: var(--gap--gap-5);
  grid-row-gap: var(--gap--gap-5);
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

.footer-subscribe {
  grid-column-gap: 100px;
  grid-row-gap: 100px;
  flex-direction: column;
  justify-content: flex-start;
  display: flex;
}

.footer-social-link {
  grid-column-gap: var(--gap--gap-2);
  grid-row-gap: var(--gap--gap-2);
  color: var(--color--gray-5);
  font-size: .875rem;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  transition-property: color;
  display: flex;
}

.footer-social-link:hover {
  color: var(--color--primary-1);
}

.form-subscribe-wrap {
  align-items: center;
  margin-bottom: 0;
}

.footer-social-inline {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  display: flex;
}
   @media screen and (max-width: 767px) {  
      .form-subscribe-wrap {
    max-width: 100%;
  }}
 
       



@media screen and (max-width: 479px) {
  
  .form-subscribe {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    align-items: flex-start;
  }

  .grid-footer-menu {
    grid-template-columns: 1fr;
  }

  .footer-title {
    margin-bottom: 10px;
  }

  .footer-links {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  .subscribe-wrap {
    width: auto;
  }}
  
.form-input {
  border-radius: var(--border-radius--form-input);
  background-color: var(--color--dark);
  color: #758575;
  border: 1px solid #ffffff1a;
  height: 50px;
  margin-bottom: 0;
  padding: .625rem 1.25rem;
  font-size: 1rem;
  line-height: 1.6em;
  transition: border-color .3s ease-in-out;
}

.form-input:focus {
  border: 1px solid var(--color--primary-1);
}

.form-input.form-textarea {
  height: 132px;
}

.form-input.form-input-subscribe {
  border-radius: var(--border-radius--md);
  background-color: #6e7878;
  color: #c8102e;
  border-color: #ffffff1a;
  width: 100%;
  height: 60px;
  margin-bottom: 0;
  padding-right: 4rem;
  position: relative;
}

.form-input.form-input-subscribe:focus {
  border-color: var(--color--primary-1);
}

.form-input.form-input-subscribe::placeholder {
  color: var(--color--gray-3);
}

.form-input.bg-change {
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  background-color: #1515151a;
}

.form-input.input-white {
  border-color: var(--color--gray-4);
  background-color: var(--color--gray-5);
  color: var(--color--dark);
  margin-bottom: .625rem;
}

.form-input.input-white:focus {
  border-color: var(--color--primary-1);
}

.form-input {
  border-radius: var(--border-radius--form-input);
  background-color: var(--color--dark);
  color: #837280;
  border: 1px solid #ffffff1a;
  height: 50px;
  margin-bottom: 0;
  padding: .625rem 1.25rem;
  font-size: 1rem;
  line-height: 1.6em;
  transition: border-color .3s ease-in-out;
}

.form-input:focus {
  border: 1px solid var(--color--primary-1);
}

.form-input.form-textarea {
  height: 132px;
}

.form-input.form-input-subscribe {
  border-radius: var(--border-radius--md);
  background-color: var(--blanco);
  color: var(--color--gray-3);
  border-color: #ffffff1a;
  width: 100%;
  height: 60px;
  margin-bottom: 0;
  padding-right: 4rem;
  position: relative;
}

.form-input.form-input-subscribe:focus {
  border-color: var(--color--primary-1);
}

.form-input.form-input-subscribe::placeholder {
  color: var(--color--gray-3);
}

.form-input.bg-change {
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  background-color: #1515151a;
}

.form-input.input-white {
  border-color: var(--color--gray-4);
  background-color: var(--color--gray-5);
  color: var(--color--dark);
  margin-bottom: .625rem;
}

.form-input.input-white:focus {
  border-color: var(--color--primary-1);
}

.success-message {
  border-radius:.313rem;
  color:#8ae108;
  text-align: center;
  background-color: #cf541f;
  padding: 15px;
}

     .footer-shadow {
  opacity: .5;
  filter: blur(80px);
  width: 100%;
  height: 1000px;
  position: absolute;
}

.footer-shadow._01 {
  inset: -50% -40% auto auto;
}

.footer-shadow._02 {
  inset: 30% auto auto -40%;
}


.footer-contact-list, .footer-link-item {
  grid-column-gap: var(--gap--gap-8);
  grid-row-gap: var(--gap--gap-8);
  flex-flow: column;
  display: flex;
}
      @media screen and (max-width: 991px) {
.footer-link-item {
    grid-column-gap: var(--gap--gap-6);
    grid-row-gap: var(--gap--gap-6);
  }}

             


@media (max-width: 991px){
  .apps-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 767px){
  .apps-grid{ grid-template-columns:1fr; }
}

/* ===== FIX GENERAL ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}
.top-bar {
  width: 100%;

}

.top-bar-inner {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  flex-wrap: wrap;
}

.top-bar-left img {
  max-height: 40px;
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.navbar {
  width: 100%;
  background-color: #f58220; /* tu naranja */
}
.container-full.w-container {
  width: 100%;
  max-width: 100%;
  padding-left: 20px;
  padding-right: 20px;
}
.nav-menu {
  display: flex;
  align-items: center;
  gap: 24px;
}

.right-nav {
  display: flex;
  justify-content: flex-end;
}

/* EXTENDER franja naranja hasta el borde derecho en pantallas grandes */
.top-bar-right{
  position: relative;
}

/* “Relleno” hacia la derecha del viewport */
.top-bar-right::after{
  content:"";
  position:absolute;
  top:0;
  left:100%;
  width:100vw;     /* suficiente para llegar al borde */
  height:100%;
  background: var(--naranja-starmix);
}
.top-bar-inner{
  max-width: 100% !important;
}


.more-templates {
  z-index: 1000;
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  border-radius: var(--border-radius--md);
  background-color: var(--color--white\<deleted\|variable-a4e71267-2f22-1ae2-e737-032f0caf700b\>);
  color: var(--color--grey-1);
  border: 1px solid #0000001a;
  align-items: center;
  padding: 1px 10px 1px 2px;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  display: flex;
  position: fixed;
  inset: auto 30px 30px auto;
}

.more-templates:hover {
  color: var(--color--grey-1);
}

/*ayuda*/
.help-line-title {
  font-size: var(--_typography---h6--h6);
}
.text-small {
  font-size: .875rem;
  line-height: 1.4em;
}



.section-spacing-topF {
  padding-top: .5rem;
}


/* =========================
   VOLUMETRIC TECHNOLOGY PAGE
   SOLO ESTILOS DE ESTA PÁGINA
   SIN MENU / SIN FOOTER
========================= */

/* ---------- HERO ---------- */
.about-hero-section {
  position: relative;
  overflow: hidden;
  background-image: url("../images/volumetric/hero.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.about-hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
}

.about-hero-main {
  position: relative;
  z-index: 2;
}

.about-hero-title-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
}

.about-hero-title {
  margin-bottom: 0;
}

.hero-subtitle,
.hero-subheadline {
  color: #fff;
  text-align: center;
  margin-bottom: 0.75rem;
}

.about-hero-description {
  margin-bottom: 1.25rem;
}

.about-hero-button {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

/* ---------- PRE TITLE ---------- */
.pre-section-title-wrap {
  display: inline-block;
  padding: 0.313rem 0.875rem;
  border: 1px solid var(--naranja-starmix);
  border-radius: 6.25rem;
  background-color: #fff;
}

.pre-section-title-inner {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.pre-section-title-square {
  width: 8px;
  height: 8px;
  background-image: linear-gradient(-45deg, var(--negro), var(--gris));
}

.pre-section-title {
  color: var(--naranja-starmix);
  font-size: 0.875rem;
  letter-spacing: var(--_typography---body--letter-spacing);
  text-transform: capitalize;
}

/* ---------- BUTTONS USED IN PAGE CONTENT ---------- */
.primary-button {
  border-radius: 0.313rem 0.313rem 0.938rem;
  background-color: var(--naranja-starmix);
  color: var(--blanco);
  text-decoration: none;
  display: inline-block;
  overflow: hidden;
}

.button-primary-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  position: relative;
  overflow: hidden;
}

.button-text-wrap {
  padding-top: 0.938rem;
  padding-bottom: 0.938rem;
  padding-left: 1.5rem;
  position: relative;
  overflow: hidden;
}

.button-text-inner {
  position: relative;
  overflow: hidden;
}

.button-text,
.button-hover-text {
  font-size: 1rem;
  font-weight: 500;
  flex: none;
}

.button-hover-text {
  position: absolute;
}

.button-icon-bg {
  border-radius: 3px 10px 10px;
  background-image: linear-gradient(-45deg, #bda39b, #766e6b);
  width: 40px;
  height: 40px;
  margin-top: 0.313rem;
  margin-bottom: 0.313rem;
  margin-right: 0.313rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  flex: none;
}

.button-icon,
.button-icon-hover {
  width: 13px;
  height: 13px;
  flex: none;
}

.button-icon-hover {
  position: absolute;
}

/* ---------- DOWNLOAD LINK ---------- */
.download-link {
  display: flex;
  align-items: center;
  gap: var(--gap--gap-4);
  color: var(--color--primary-2);
  text-decoration: underline;
  text-underline-offset: 1.5px;
  padding-right: 2rem;
  background-position: 100%;
  background-repeat: no-repeat;
  background-size: auto;
  transition: all 0.3s ease;
}

.download-link.text-dark {
  text-decoration-color: var(--color--grey-1);
  background-image: url("../images/Download-Icon-Dark.svg");
}

.download-link.text-dark:hover {
  text-decoration-color: transparent;
}

/* ---------- CASE STUDY ---------- */
.case-study-section {
  position: relative;
}

.case-study-main {
  display: flex;
  flex-direction: column;
  gap: var(--gap--gap-10);
}

.case-study-title {
  position: relative;
}

.case-study-info,
.case-study-list-wrapper {
  width: 100%;
}

.grid-case-study {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap--gap-6);
  overflow: hidden;
}

.case-study-info-left {
  border-radius: var(--border-radius--sm);
  background-color: var(--color--grey-1);
  display: flex;
  position: relative;
  overflow: hidden;
}

.case-study-inner {
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
}

.case-study-content-wrap {
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--gap--gap-5);
  position: relative;
}

.case-study-right-eyebrow {
  color: var(--color--gray-3);
  font-size: var(--_typography---body--body-xs);
  letter-spacing: var(--_typography---body--letter-spacing);
  text-transform: uppercase;
}

.case-study-right-title {
  color: var(--color--white);
  font-size: var(--_typography---h5--h5);
  margin-bottom: 0;
}

.case-study-info-right,
.cs-equipment-image-wrap {
  width: 100%;
  height: 100%;
}

.cs-equipment-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- TITLES ---------- */
.section-title-wrap {
  display: grid;
  grid-template-columns: 1fr 0.7fr;
  align-items: center;
  gap: var(--gap--gap-5);
  margin-top: 1.875rem;
  overflow: hidden;
}

.section-title-wrap.one {
  grid-template-columns: 1fr 1fr;
}

.section-title {
  margin-bottom: 0;
}

.section-desc {
  max-width: 980px;
  margin: 1.2rem auto 0;
  text-align: center;
  font-size: 1.18rem;
  line-height: 1.65;
  color: #2a2a2a;
}

/* ---------- ABOUT THREE ---------- */
.about-three-section {
 padding-top:40px;
padding-bottom:80px;
}
.about-three-main.section-spacing {
  padding-top:0;
}

.about-three-main {
  z-index: 2;
  position: relative;
  overflow: hidden;
}

.grid-about-three {
  display: grid;
  grid-template-columns: 0.3fr 1fr;
  gap: var(--gap--gap-11);
  place-items: start;
  overflow: hidden;
}

.about-three-content-main {
  max-width: 1240px;
  margin: 0 auto;
}

.about-three-content {
   margin-top: 2.2rem;
   background:linear-gradient(150deg,#f6a13a 0%, #ffffff 76%);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 28px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.08);
  padding: 2rem;
  overflow: hidden;
}

.grid-about-three-content {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

.about-three-author {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  min-height: 100%;
  background: #111;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
}

.about-author-image {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  display: block;
}

.about-author-info {
 position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.25rem 1.1rem 1.1rem;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.82) 100%);
}

.about-author-name {
  color: var(--color--white);
  text-align: center;
}

.about-author-job {
  color: var(--color--gray-3);
}

.about-story-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap--gap-10);
}

.about-story-info-inner {
  display: block;
}

.about-story-title,
.about-service-title {
  font-size: var(--_typography---h6--h6);
  margin-bottom: 1.875rem;
}

.about-story-description {
  margin-bottom: 0.75rem;
}

.about-story-description.last {
  margin-bottom: 0;
}

.service-list-three {
  display: flex;
  flex-direction: column;
  gap: var(--gap--gap-5);
}

.service-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--_color---body-text);
  border-bottom: 1px solid var(--color--gray-4);
  padding-bottom: 0.938rem;
  margin-bottom: 0.938rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.service-link:hover {
  border-bottom-color: var(--color--dark);
  color: var(--color--grey-1);
}

.service-link-arrow {
  width: auto;
  height: 13px;
}

.service-three-button {
  line-height: var(--_typography---body--line-height-0);
}

/* ---------- SMALL PAGE ELEMENTS ---------- */
.models-heading {
  text-align: center;
  margin-bottom: 40px;
}

.models-kicker-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ff5a1f;
  display: inline-block;
}

.noise-overlay {
  opacity: 0.04;
  background-color: #ececec;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.more-templates {
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 6px;
  position: fixed;
  inset: auto 30px 30px auto;
  padding: 1px 10px 1px 2px;
  border: 1px solid #0000001a;
  border-radius: var(--border-radius--md);
  background-color: var(--color--white);
  color: var(--color--grey-1);
  text-decoration: none;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 700;
}

/* ---------- PAGE LAYOUT HELPERS ---------- */
.section-spacing {
 padding-top: 2rem !important;    /* Bajamos de 6rem a 2rem */
  padding-bottom: 2rem !important;
 /* background-color: #ececec;*/
  position: relative;
  z-index: 1;
}

.section-spacing-top {
  padding-top: var(--_layout---spacing--section-spacing);
}

.container {
  max-width: var(--_layout---container-max-width);
  padding-right: var(--_layout---container-gutter);
  padding-left: var(--_layout---container-gutter);
  margin-left: auto;
  margin-right: auto;
}

.container-full {
  max-width: var(--_layout---container-full-max-width);
  padding-right: var(--_layout---container-full-gutter);
  padding-left: var(--_layout---container-full-gutter);
}


/* ---------- RESPONSIVE ---------- */
@media screen and (max-width: 991px) {
  .grid-case-study {
    grid-template-columns: 1fr;
  }

  .grid-about-three {
    grid-template-columns: 1fr;
    gap: var(--gap--gap-8);
  }

  .grid-about-three-content {
    grid-template-columns: 0.5fr 1fr;
    gap: var(--gap--gap-8);
  }

  .about-story-info {
    grid-template-columns: 1fr;
    gap: var(--gap--gap-8);
  }
}

@media screen and (max-width: 767px) {
  .section-title-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .grid-about-three-content {
    grid-template-columns: 1fr;
    gap: var(--gap--gap-6);
  }

  .about-hero-button {
    flex-direction: column;
    align-items: flex-start;
  }

  .button-text-wrap {
    padding-left: 1.25rem;
  }

  .more-templates {
    bottom: 10px;
    right: 10px;
  }
}

@media screen and (max-width: 479px) {
  .button-text-wrap {
    padding-left: 0.938rem;
  }
}


/* --- CONTENEDOR PRINCIPAL --- */
.inner-hero {
  position: relative;
  width: 100%;
  min-height: 60vh; /* Más bajo que el index (que suele ser 80-100vh) */
  display: flex;
  align-items: center;
  padding-top: 120px; /* Espacio para el menú fijo */
  padding-bottom: 60px;
  background-color: var(--negro);
  overflow: hidden;
}

/* --- FONDO Y OVERLAY --- */
.inner-hero__media-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.inner-hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6; /* Un poco más oscuro para que resalte el texto técnico */
}

.inner-hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Ahora el negro empieza en la derecha y se aclara hacia la izquierda */
  background: linear-gradient(to left, #f4923047 0%, rgba(6, 6, 6, 0.197) 50%, transparent 100%);
  z-index: 1;
}

/* --- GRID Y LAYOUT --- */
.inner-hero__grid {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: end; /* Alinea el contenido a la base para un look más moderno */
}

/* --- TEXTOS --- */
.inner-hero__title {
  font-family: var(--_typography---font-family--heading);
  font-size: 3.5rem; /* Un poco más pequeño que el H1 del Index */
  line-height: 1.1;
  color: var(--blanco);
  font-weight: 700;
}

.text-gradient-starmix {
  background: linear-gradient(180deg, var(--naranja-starmix) 0%, rgba(255,255,255,0.2) 150%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.inner-hero__description {
  font-family: var(--_typography---font-family--body);
  font-size: 1.15rem;
  color: var(--blanco);
  line-height: 1.5;
  margin-bottom: 30px;
}

/* --- KICKER (Título pequeño arriba) --- */
.inner-hero__kicker-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.inner-hero__kicker-dot {
  width: 8px;
  height: 8px;
  background-color: var(--naranja-starmix);
}

.inner-hero__kicker-text {
  text-transform: uppercase;
  color: var(--naranja-starmix);
  font-weight: 600;
  letter-spacing: 2px;
  font-size: 0.9rem;
}

/* --- RESPONSIVE --- */
@media (max-width: 991px) {
  .inner-hero__grid {
    grid-template-columns: 1fr;
    text-align: left;
  }
  
  .inner-hero__title {
    font-size: 2.8rem;
  }
}



/*modelos*/
/* --- CONFIGURACIÓN DE VARIABLES (Personaliza los colores aquí) --- */
:root {
    --bg: #ffffff;
    --text: #111111;
    --muted: #666666;
    --accent: #f49230; /* El naranja Starmix */
    --border: rgba(0, 0, 0, 0.1);
    --card: #1a1a1a;
    --cardText: #ffffff;
    --max: 1200px;
    --radius: 20px;
}

/* --- ESTILOS BASE --- */
body {
    margin: 0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

.container {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 20px;
}

.section {
  
}

/* --- COMPONENTES DE TEXTO --- */
.badge {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    border: 1px solid var(--border);
    padding: 10px 14px;
    border-radius: 999px;
}

.kicker {
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 10px;
}

.h1 {
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.05;
    margin: 16px 0 12px;
    font-weight: 800;
}

.h2 {
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.15;
    margin: 0 0 14px;
    font-weight: 700;
}

.subtitle {
    font-size: 18px;
    line-height: 1.6;
    color: var(--muted);
    max-width: 780px;
    margin: 0 0 24px;
}

/* --- HERO GRID --- */
.heroGrid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 24px;
    align-items: stretch;
}

.heroMedia {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    min-height: 360px;
    background: #f2f2f2;
}

.heroMedia img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.heroCard {
    background: var(--accent);
    border-radius: var(--radius);
    padding: 28px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    box-shadow: 0 10px 30px rgba(244, 146, 48, 0.2);
}

.heroCard p {
    margin: 0;
    line-height: 1.6;
    font-size: 16px;
}

/* --- BOTONES Y ACCIONES --- */
.ctaRow {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .2);
    text-decoration: none;
    font-weight: 650;
    transition: all 0.3s ease;
}

.btnPrimary {
    background: linear-gradient(180deg,#f6a13a 0%, #ffffff 56%);
    color: #1a1919ca;
    border-color: var(--naranja-starmix);
}

.btnPrimary:hover {
    background: #f6f4f4;
    transform: translateY(-2px);
}

.btnGhost {
    background: transparent;
    color: #fff;
}

.btnGhost:hover {
    background: rgba(255, 255, 255, 0.1);
}

.smallNote {
    font-size: 13px;
    opacity: .92;
}

/* --- GRIDS Y TARJETAS --- */
.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.card {
display: flex;
    flex-direction: column;
    overflow: hidden; /* Corta la imagen para que respete los bordes curvos */
    border-radius: 9px;
    background: linear-gradient(180deg,#f6a13a 0%, #ffffff 56%);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card h3 {
    margin: 0 0 10px;
    font-size: 18px;
}

.card p {
    margin: 0;
    color: var(--negro);
    line-height: 1.55;
    font-size: 14px;
}
.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.card-image {
    width: 100%;
    height: 200px; /* Altura fija para que todas las tarjetas se vean parejas */
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajusta la foto sin deformarla */
    transition: transform 0.5s ease;
}

.card:hover .card-image img {
    transform: scale(1.1); /* Efecto de zoom al pasar el mouse */
}

.card-content {
    padding: 20px;
}
.twoCol {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

/* --- TABLAS Y LISTAS --- */
.specTable {
    border-collapse: collapse;
    width: 100%;           /* Se adapta al contenedor */
    max-width: 900px;      /* Tamaño ideal para lectura técnica */
    margin: 40px auto;     /* EL SECRETO: 'auto' a los lados centra el bloque */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* Sombra suave para darle relieve */
}

.specTable th, .specTable td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: 14px;
}

.specTable th {
    background: #fafafa;
    color: #333;
    width: 34%;
    font-weight: 600;
}

.bullets {
    margin: 0;
    padding-left: 18px;
    color: var(--muted);
    line-height: 1.7;
}

/* --- GALERÍA Y FAQ --- */
.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.gallery img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: #f2f2f2;
}

.faq details {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 10px;
}

.faq summary {
    cursor: pointer;
    font-weight: 650;
    outline: none;
}

.faq p {
    margin: 10px 0 0;
    color: var(--muted);
    line-height: 1.6;
}

/* --- RESPONSIVE / MEDIA QUERIES --- */
@media (max-width: 980px) {
    .heroGrid { grid-template-columns: 1fr; }
    .grid { grid-template-columns: repeat(2, 1fr); }
    .twoCol { grid-template-columns: 1fr; }
    .gallery { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
    .grid { grid-template-columns: 1fr; }
    .gallery { grid-template-columns: 1fr; }
    .heroMedia { min-height: 240px; }
    .section { padding: 40px 0; }
}

/* --- NAVEGACIÓN DE SERIES (SUB-MENU) --- */
.series-nav {
  background: #ffffff;
  border-bottom: 3px solid rgba(0,0,0,0.1);
  position: sticky; /* Se queda pegado al subir */
  top: 70px; /* Ajusta según la altura de tu menú principal para que no se encimen */
  z-index: 10;
  padding: 15px 0;
}

.series-menu {
  list-style: none;
  display: flex;
  justify-content: center; /* Centrado */
  gap: 30px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap; /* Para móviles */
}

.series-link {
  text-decoration: none;
  color: #666;
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
  padding: 5px 0;
  border-bottom: 2px solid transparent;
}

.series-link:hover {
  color: var(--naranja-starmix);
}

.series-link.active {
  color: var(--naranja-starmix);
  border-bottom: 2px solid var(--naranja-starmix);
}

@media (max-width: 768px) {
  .series-menu {
    gap: 15px;
  }
  .series-link {
    font-size: 12px;
  }
}


/* SECTION */
.highlights{

}

/* GRID */
.highlights-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:28px;
margin-top:30px;
}

/* CARD */
.highlight-card{
background:#ffffff;
border-radius:18px;
padding:30px 26px;
border:1px solid rgba(0,0,0,0.08);
transition:all .35s ease;
position:relative;
overflow:hidden;
}

/* LINEA NARANJA */
.highlight-card::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:4px;
background:var(--naranja-starmix);
transform:scaleX(0);
transform-origin:left;
transition:transform .35s ease;
}

/* HOVER */
.highlight-card:hover{
transform:translateY(-6px);
box-shadow:0 15px 40px rgba(0,0,0,0.12);
}

.highlight-card:hover::before{
transform:scaleX(1);
}

/* ICON */
.highlight-icon{
font-size:30px;
margin-bottom:14px;
}

/* TITLE */
.highlight-card h3{
margin:0 0 10px;
font-size:18px;
font-weight:700;
color:#111;
}

/* TEXT */
.highlight-card p{
font-size:14px;
line-height:1.6;
color:#555;
margin:0;
}

/* RESPONSIVE */
@media(max-width:1000px){
.highlights-grid{
grid-template-columns:repeat(2,1fr);
}
}

@media(max-width:560px){
.highlights-grid{
grid-template-columns:1fr;
}
}

.heroMedia{
position:relative;
}

/* ESTILO DE LOS TEXTOS */
.machine-label{
position:absolute;
background:rgba(0,0,0,0.75);
color:#fff;
padding:6px 10px;
font-size:12px;
border-radius:6px;
font-weight:600;
white-space:nowrap;
}

/* --- ESTILO DE TABLA POR RENGLONES --- */
/* --- ESTILO DE TABLA POR RENGLONES --- */

/* 1. TODA LA PRIMERA LÍNEA: NARANJA STARMIX */
.specTable tbody tr:first-child {
    background-color: var(--naranja-starmix) !important;
}

/* Forzamos el color de texto y eliminamos bordes en la primera fila */
.specTable tbody tr:first-child th,
.specTable tbody tr:first-child td {
    color: #ffffff !important;
    background-color: var(--naranja-starmix) !important;
    font-weight: 700;
    text-transform: uppercase;
    padding: 16px;
    border: none !important;
}

/* 2. Renglones PARES: GRIS */
.specTable tbody tr:nth-child(even) {
    background-color: #f4f4f4;
}

/* 3. Renglones IMPARES (a partir del 3ro): ROJO */
.specTable tbody tr:nth-child(odd):not(:first-child) {
    background-color: #fdf2f2;
    border-left: 4px solid var(--naranja-starmix); /* Detalle de acento rojo */
}

/* Limpieza general de la tabla */
.specTable {
    border-collapse: collapse;
    width: 60%;
    border-radius: 12px;
    overflow: hidden; /* Para que se vean los bordes redondeados con los colores */
}

.specTable td, .specTable th {
    padding: 14px 16px;
    border: none !important;
}
/* Sección con fondo Naranja Starmix */
.section--cta-orange {
  background-color: var(--naranja-starmix);
    border-radius: 40px;      /* Bordes más redondeados y modernos */
    margin: 60px auto;        /* Centra la sección y da espacio arriba/abajo */
    padding: 60px 40px;
    width: 95%;               /* Margen pequeño en celulares */
    max-width: 1000px;        /* EL SECRETO: Limita el ancho para que no se vea gigante */
    box-shadow: 0 20px 40px rgba(244, 146, 48, 0.3); /* Sombra con tono naranja */
}

/* Ajuste de textos para fondo naranja */
.kicker--white {
    color: #ffffff !important;
    border-left: 3px solid #ffffff !important;
    opacity: 0.9;
    font-weight: 700;
    margin-bottom: 10px;
    padding-left: 10px;
}

.h2--white {
    color: #ffffff !important;
    font-size: 2rem;
    margin-bottom: 20px;
    line-height: 1.2;
}

/* Estilo de los Bullets (puntos) */
.bullets--white {
  list-style: none;
    padding: 0;
}

.bullets--white li {
   color: #ffffff;
    margin-bottom: 15px;
    padding-left: 28px;
    position: relative;
    line-height: 1.5;
    font-size: 0.95rem;
}

/* Icono de check o flecha blanca antes de cada beneficio */
.bullets--white li::before {
   content: "✓";
    position: absolute;
    left: 0;
    color: #ffffff;
    font-weight: 900;
    background: rgba(255, 255, 255, 0.2);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 12px;
}

/* Separación entre columnas */
.info-block {
  padding: 30px;
    background: rgba(255, 255, 255, 0.05); /* Efecto cristal sutil */
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
    .section--cta-orange {
        margin: 20px 10px;
        padding: 40px 20px;
    }
}

/* Contenedor que ocupa el ancho total */
.section--video-wide {
    width: 100%;
    background: #000;
    margin: 40px 0;
    position: relative;
}

.video-wrapper {
    width: 100%;
    max-height: 600px; /* Ajusta esto si lo quieres más o menos alto */
    overflow: hidden;
    position: relative;
}

.video-full-width {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover; /* Esto hace que el video llene el espacio sin deformarse */
}

/* Texto decorativo sobre el video */
.video-overlay-text {
    position: absolute;
    bottom: 30px;
    left: 40px;
    z-index: 2;
    color: white;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.8);
}

.video-title {
    font-family: var(--_typography---font-family--heading);
    font-size: 2.5rem;
    margin: 0;
    text-transform: uppercase;
    color: var(--naranja-starmix);
}
/* Contenedor que centra el video card en la página */
.container--flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 40px auto;
}

/* LA TARJETA DEL VIDEO (VIDEO CARD) */
.video-card {
    width: 100%;
    max-width: 1100px; /* Tamaño ideal para que no se estire demasiado */
    margin: 0 20px;     /* Separación de los bordes laterales en móviles */
    background: #000;
    
    /* EL SECRETO: BORDES CIRCULARES */
    border-radius: 24px; 
    overflow: hidden; /* Corta el video para que siga la forma redondeada */
    
    /* Efectos para darle relieve */
    box-shadow: 0 25px 50px -12px rgba(244, 146, 48, 0.25); /* Sombra con un toque naranja */
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    transition: transform 0.3s ease;
}

.video-card:hover {
    transform: scale(1.01); /* Un pequeño zoom al pasar el mouse */
}

.video-full {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain; /* Muestra el video completo sin cortarlo */
}

/* Texto decorativo sobre el video (OPCIONAL) */
.video-overlay-text {
    position: absolute;
    bottom: 30px;
    left: 40px;
    z-index: 2;
    color: white;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.8);
    pointer-events: none; /* No interfiere con clics */
}

.video-title {
    font-family: var(--_typography---font-family--heading);
    font-size: 2rem;
    margin: 0;
    text-transform: uppercase;
    color: var(--naranja-starmix);
}

/* Responsivo para móviles */
@media (max-width: 768px) {
    .video-card {
        border-radius: 12px; /* Redondeado más sutil en pantallas pequeñas */
        margin: 0 10px;
    }
    .video-title {
        font-size: 1.5rem;
    }
}

/* =========================================================
   SMI Applications Cards (scoped)
   ========================================================= */

.smi-apps{

  --smi-bg: #ffffff;
  --smi-surface: #ffffff;
  --smi-border: rgba(17, 17, 17, 0.10);
  --smi-text: #0f0f10;
  --smi-muted: rgba(15, 15, 16, 0.72);

  --smi-accent: #ff4a2b;

  --smi-cta-dark: #0f0f10;
  --smi-cta-dark-hover: #1a1a1c;

  --smi-radius: 16px;

  /* 🔥 Ajuste final de altura de imagen */
  --smi-media-h: 480px;  /* puedes mover entre 420–460 si quieres exactitud milimétrica */
}


/* ===============================
   CARD LAYOUT
================================= */

.smi-apps .smi-apps-card{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: start; /* IMPORTANTE: no estira la imagen */
  overflow: hidden;

  background: var(--smi-surface);
  border: 1px solid var(--smi-border);
  border-radius: var(--smi-radius);
  box-shadow: 0 10px 30px rgba(15, 15, 16, 0.06);
}

.smi-apps .smi-apps-card + .smi-apps-card{
  margin-top: 28px;
}


/* ===============================
   IMAGE COLUMN
================================= */

.smi-apps .smi-apps-card__media{
  height: var(--smi-media-h);
  overflow: hidden;
}

.smi-apps .smi-apps-card__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 16px 0 0 16px;
}


/* ===============================
   TEXT COLUMN
================================= */

.smi-apps .smi-apps-card__body{
  padding: 34px 34px 28px;
}

.smi-apps .smi-apps-card__title{
  font-family: Mona Sans, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 34px;
  line-height: 1.08;
  margin: 0 0 10px;
  color: var(--smi-text);
}

.smi-apps .smi-apps-card__subtitle{
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--smi-muted);
}

.smi-apps .smi-apps-card__desc{
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--smi-muted);
}


/* ===============================
   LISTS
================================= */

.smi-apps .smi-apps-listblock{
  margin-top: 18px;
}

.smi-apps .smi-apps-listblock__title{
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(15, 15, 16, 0.55);
  margin-bottom: 10px;
}

.smi-apps .smi-apps-list{
  display: grid;
  gap: 10px;
}

.smi-apps .smi-apps-list__item{
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
}

.smi-apps .smi-apps-list__icon{
  display: none;
}

.smi-apps .smi-apps-list__item::before{
  content: "";
  width: 18px;
  height: 18px;
  background: var(--smi-accent);
  -webkit-mask: url("images/list-icon.svg") no-repeat center / contain;
  mask: url("images/list-icon.svg") no-repeat center / contain;
  margin-top: 2px;
}

.smi-apps .smi-apps-list__text{
  font-size: 15px;
  line-height: 1.55;
  color: var(--smi-text);
}


/* ===============================
   RECOMMENDED BLOCK
================================= */

.smi-apps .smi-apps-reco{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--smi-border);
}

.smi-apps .smi-apps-reco__title{
  font-size: 14px;
  font-weight: 700;
  color: var(--smi-text);
  margin-bottom: 10px;
}

.smi-apps .smi-apps-reco__list{
  display: grid;
  gap: 8px;
}

.smi-apps .smi-apps-reco__item{
  font-size: 14px;
  line-height: 1.5;
  color: var(--smi-muted);
}

.smi-apps .smi-apps-reco__model{
  font-weight: 700;
  color: var(--smi-text);
}


/* ===============================
   CTA
================================= */

.smi-apps .smi-apps-cta{
  display: flex;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.smi-apps .smi-apps-cta__primary,
.smi-apps .smi-apps-cta__secondary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.smi-apps .smi-apps-cta__primary{
  background: var(--smi-cta-dark);
  color: #fff;
  border: 1px solid var(--smi-cta-dark);
}

.smi-apps .smi-apps-cta__primary:hover{
  background: var(--smi-cta-dark-hover);
  border-color: var(--smi-cta-dark-hover);
  transform: translateY(-1px);
}

.smi-apps .smi-apps-cta__secondary{
  background: #fff;
  color: var(--smi-text);
  border: 1px solid rgba(15, 15, 16, 0.22);
}

.smi-apps .smi-apps-cta__secondary:hover{
  border-color: rgba(15, 15, 16, 0.35);
  transform: translateY(-1px);
}


/* ===============================
   RESPONSIVE
================================= */

@media screen and (max-width: 991px){

  .smi-apps .smi-apps-card{
    grid-template-columns: 1fr;
  }

  .smi-apps{
    --smi-media-h: 260px;
  }

  .smi-apps .smi-apps-card__img{
    border-radius: 16px 16px 0 0;
  }

  .smi-apps .smi-apps-card__body{
    padding: 24px 18px 18px;
  }

  .smi-apps .smi-apps-card__title{
    font-size: 28px;
  }
}
/* Optimizacion para Celulares - Seccion Testimonios */
@media (max-width: 767px) {
  .grid-testimonial {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important; /* Espacio entre el testimonio y la caja de soporte */
  }

  .testimonial-tabs {
    width: 100% !important;
  }

  .testimonial-info {
    padding: 20px !important;
    text-align: center; /* Opcional: centra el texto para mejor lectura en movil */
  }

  .testimonial-more-info {
    width: 100% !important;
    margin-top: 10px;
  }

  /* Ajuste de la caja de soporte para que no se vea gigante */
  .support-info-inner {
    flex-direction: column;
    text-align: center;
    padding: 25px;
  }
}

.more-templates.w-inline-block div {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

/* Estilo para hacer el icono de SMS más grande y claro */
.contact-button.sms img {
  width: 35px !important;   /* Tamaño mayor para el icono de mensaje */
  height: auto;
  margin-right: 10px;       /* Separación con el texto */
  filter: none !important;  /* Asegura que no se vea blanco o borroso */
  transition: transform 0.3s ease;
}

/* Efecto al pasar el mouse para que resalte más */
.contact-button.sms:hover img {
  transform: scale(1.2);    /* Crece un poco más al poner el mouse */
}

/* Ajuste del botón para que quepa el icono más grande */
.contact-button.sms {
  padding: 10px 25px !important; 
  display: flex;
  align-items: center;
}

/* ============================================================
   ESTILO EXACTO DEL FOOTER (SMI-F)
   ============================================================ */
.smi-f-section {
  background-color: #1a1e23; /* Gris muy oscuro industrial */
  color: #ffffff;
  padding: 80px 0 30px;
  font-family: var(--_typography---font-family--body);
  border-top: 1px solid rgba(255,255,255,0.1);
}

.smi-f-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
  gap: 50px;
}

.smi-f-logo {
  max-width: 180px;
  margin-bottom: 20px;
}

.smi-f-brand-title {
  font-size: 22px;
  font-weight: 800;
  margin: 0;
  letter-spacing: 1px;
  color: var(--naranja-starmix);
}

.smi-f-tagline {
  font-size: 14px;
  color: #ccc;
  margin-bottom: 25px;
  font-weight: 500;
}

.smi-f-desc {
  font-size: 14px;
  line-height: 1.6;
  color: #aaa;
  margin-bottom: 25px;
}

.smi-f-header {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 30px;
  color: var(--naranja-starmix);
  letter-spacing: 1px;
}

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

.smi-f-list li {
  margin-bottom: 15px;
}

.smi-f-list a {
  color: #bbb;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.3s ease;
}

.smi-f-list a:hover {
  color: var(--naranja-starmix);
}

/* Columna de Contacto */
.smi-f-contact-item {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #ddd;
  line-height: 1.4;
}

.smi-f-icon {
  font-size: 18px;
}

.smi-f-socials {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
}

.smi-f-social-link {
  color: #fff;
  font-size: 13px;
  text-decoration: underline;
}

.smi-f-contact-btn {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  border-bottom: 2px solid var(--naranja-starmix);
  padding-bottom: 5px;
}

.smi-f-bottom {
  margin-top: 60px;
  padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,0.05);
  text-align: center;
  font-size: 12px;
  letter-spacing: 2px;
  color: #666;
}

/* Responsivo para Celular */
@media (max-width: 991px) {
  .smi-f-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 479px) {
  .smi-f-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .smi-f-contact-item {
    justify-content: center;
  }
  .smi-f-socials {
    justify-content: center;
  }
}
/**/
/* Comparison Table Styles */
.comparison-section {
    padding: 60px 20px;
    
    color: #ffffff;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 30px;
    background: #e6e2e2;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.comparison-table th {
    background-color:var(--naranja-starmix);
    padding: 20px;
    text-align: left;
    font-size: 1.1rem;
    border-bottom: 3px solid #f2f0ef; /* Naranja Starmix */
}

.comparison-table th.starmix-column {
    color: #faf9f8;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.comparison-table td {
    padding: 18px 20px;
    border-bottom: 1px solid #f4f6f6;
}

.comparison-table tr:hover {
    background-color: #c6c7c7;
}

.check {
    color: var(--naranja-starmix); /* Verde para éxito */
    font-weight: 800;
}

.cross {
    color: #ff4d4d; /* Rojo para fallas */
    opacity: 0.8;
}

.highlight {
    font-weight: bold;
    font-size: 1.1rem;
    background: rgba(157, 153, 150, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
    .comparison-table {
        font-size: 0.9rem;
    }
    .comparison-table th, .comparison-table td {
        padding: 12px;
    }
}
/* Contenedor Principal */
.service-list-three {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 30px;
}

/* Estilo de la Tarjeta Blanca */
.service-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Sombra suave */
  transition: transform 0.3s ease;
  border: 1px solid #f0f0f0;
}

.service-card:hover {
  transform: translateY(-5px); /* Efecto al pasar el mouse */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Contenedor del Icono */
.service-icon-box {
  width: 60px;
  height: 60px;
  background: #fdf2e9; /* Naranja muy claro de fondo */
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.service-icon-box img {
  width: 35px;
  height: 35px;
}

/* Texto dentro de la tarjeta */
.service-text-content strong {
  display: block;
  color: #1a1a1a;
  font-size: 1.1rem;
  margin-bottom: 5px;
}

.service-text-content p {
  margin: 0;
  font-size: 0.95rem;
  color: #555;
  line-height: 1.5;
}

/* Ajuste para móviles */
@media (max-width: 768px) {
  .service-card {
    flex-direction: column;
    align-items: flex-start;
  }
}