/* ============================
   FUENTES PERSONALIZADAS
============================ */
@font-face {
    font-family: "Acherus Militant";
    src: url("horizon-type-acherusmilitant1-light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Acherus Militant";
    src: url("horizon-type-acherusmilitant1-bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  
  /* ============================
     VARIABLES
  ============================ */
  :root{
    --bg-top:#0c1528;
    --bg-bottom:#0e3a7a;
    --white: #ffffff;
    --muted:#cfe0ff;
    --blue-1:#5aa2ff;
    --blue-2:#8cc1ff;
    --btn-start:#2c6cff;
    --btn-end:#1f5ae6;
    --ring: rgba(255,255,255,.08);
    --radius: 18px;
    --shadow: 0 12px 30px rgba(0,0,0,.45);
    --color-primary:#2649b6;
    --color-secondary:#fff;
    --color-text:#333333;
    --color-subtext:#555555;
    --color-white:#ffffff;
    --font-main:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  }
  
  /* ============================
     BASE
  ============================ */
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family:"Acherus Militant", "Open Sans",sans-serif;
    color:var(--white);
    background:#0e3a7a;
    overflow-x:hidden;
    display: grid;
    background: radial-gradient(circle,rgba(37, 79, 137, 1) 0%, rgba(37, 79, 137, 1) 9%, rgba(39, 47, 61, 1) 100%);
  }

  a{text-decoration:none;color:inherit}
  .container{width:min(1200px, 92vw);margin-inline:auto}
.deg-color{
  background: radial-gradient(1000px 600px at 75% -10%, rgba(108,146,255,.18), transparent 60%),
      linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
}
  /* ============================
     HEADER
  ============================ */
  header{
    position:sticky; top:0; z-index:10;
    background:rgba(12,21,40,.68);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--ring);
  }
  .header-inner{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 0;
  }
  .logo img{height:38px}
  .cta-top{
    background:rgba(255,255,255,.08);
    padding:10px 18px;
    border-radius:999px;
    border:1px solid var(--ring);
    font-family:"Acherus Militant",sans-serif;
    font-weight:700;
    font-size:14px;
  }
.icon-img{
  height: 40px
}
.process-img{
  height: 140px;
  padding: 20px 0;
}
  
  /* ============================
     HERO
  ============================ */
  .hero{text-align:center; padding: 50px 0 0 0}
  
  .hero-bg{
    position:absolute; bottom:0; left:0; width:100%; height:80px;
    background-image:url("https://s3.sa-east-1.amazonaws.com/resource.eterniasoft/comercial/landing/SperantLanding/recursos/border-build.png");
    background-size:cover; background-position:bottom; opacity:.4;
   
  }
.border-img{
  position: relative
}
section{
  padding: 30px 0;
}
  
.font-sperant{
  font-family:"Acherus Militant",sans-serif;
  text-align: center;
  font-size: 36px;
}

.title-proceso{
  font-size: 53px; 
}

.subtitle-proceso{
  font-size: 36px;
  margin: 0;
  padding: 0 0 20px 0;
  line-height: 37px;
  height: 80px;
  align-content: center;
}
  .title-hero{
    margin:0 0 60px 0;
    line-height:1.05;
    font-size:clamp(36px,4vw,64px);
    letter-spacing:.3px;
  }
.formulario-contactenos-1{
  display: none;
}
 .title-eleva{
    line-height:1.05;
    letter-spacing:.3px;
    font-size: 52px;
    margin: 0;
   font-weight: bolder;
}
.subtitle-eleva{
  font-size: 30px;
}
 .txt-conoce{
   font-size: 18px;
   padding: 0 100px;
  }

  .txt-list-conoce{
    font-size:clamp(12px,1vw,18px);
    padding: 0 100px;
    text-align: justify
  }
  .subtitle-hero{
      margin: 40px 0 18px 0;
      line-height:1.2;
      letter-spacing:.3px;
      text-align: center;
      font-size: 53px; 
    }
  .title-seccion{
    font-size: 59px;
    margin: 30px 0;
  }

  .img-sombra{
    filter: drop-shadow(0 3px 5px #ffffff);
  }
  .more-img{
    height: 200px;
  }
  .conoce-mas{
    position: relative;
    text-align: center;
  }
  .text-hero{
      margin:0 0 30px 0;
      text-align: center;
      font-size: 21px;
    }
  .title-hero .t1,
  .title-hero .t2{
    font-family:"Acherus Militant","Open Sans",sans-serif;
    font-weight:300;
    color:var(--white);
  }
.title-hero .t1{
  font-size: 81px;
}
.title-hero .t2{
  font-size: 52px;
}

  .title-hero .sub-title{
    font-family:"Acherus Militant","Open Sans",sans-serif;
    color:var(--white);
    text-align: center
  }
  .title-hero .crm{
    font-family:"Acherus Militant","Open Sans",sans-serif;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1.2px;
    background:linear-gradient(90deg,var(--blue-1),var(--blue-2));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    text-shadow:0 0 18px rgba(90,162,255,0.35);
    font-size: 81px;
    
  }
  .title-hero .grad{
    font-family:"Acherus Militant","Open Sans",sans-serif;
    font-weight:300;
    background:linear-gradient(90deg,var(--blue-1),var(--blue-2));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    text-shadow:0 0 14px rgba(138,191,255,0.35);
    font-size: 52px;
  }
 
  @media (min-width:768px){
    .title-hero{line-height:1.04}
  }

 /* ============================
    BENEFICIOS
  ============================ */
  .text-box{
    position: relative;
    padding: 0 20%;
  }

  .beneficio-img{
    height: 200px;

  }
  .text-center{
    text-align: center
  }
  .more-beneficios{
    position: relative;
    padding: 5%;
    
  }
  .more-beneficio-img{
    height: 100px;

  }
  .txt-more-beneficio{
    padding: 0 20px;
    font-size: 13px;
  }
  .txt-more-beneficio p{
    font-size: 13px;
  }
.seccion-box-features{
  padding: 0 70px;
}
  .box-features-0{
    padding: 0 240px;
    border-bottom: 2px dashed rgba(255, 255, 255, 0.3);
    
  }
.box-features-0 .box{
    display: flex;
   text-align: center;
  }
.box-features-0 .box-texto{
  align-content: center;
  padding: 0 40px 0 0;
}
  .box-features-0 .title-feature{
    font-weight: bold;
    font-size: 25px;
    padding: 10px 0 0 0;
    line-height: 25px;
  }
  .box-features-0 .box .text-feature{
    font-size: 15px;
  }
  .box-features-0 .box .feature-img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 250px;
    padding-bottom: 50px;
    padding-top: 50px;
  }
  .box-features{
    border-radius: 16px;
    padding: 35px 10px;
  }
  .box-features .box{
    display: flex;
  }
  .box-features .title-feature{
    font-weight: bold;
    font-size: 20px;
    margin: 0;
    
  }
  .box-features .box .text-feature{
    font-size: 18px;
    margin: 0;
  }
  .box-features .box .feature-img{
    width: auto;
    height: 130px;
  }
  .p20{
   padding: 0 20%; 
}
.box-gallery{
  display: grid;
  gap: 1rem;
  grid-auto-rows: 22rem;
  grid-template-columns: repeat(autofill, minmax(min(100%, 25rem), 1fr));
}
.border-left-1{
      border-left: 2px dashed rgba(255, 255, 255, 0.3);
    }

.formulario-contactenos{
  padding: 70px 0;
}
/* =================== TÍTULO DE LA SECCIÓN (TARJETA) =================== */
.cards-title{ text-align:center; margin-bottom:14px; }
.cards-title h2{ font-weight:800; font-size:clamp(1.4rem,3.2vw,2.1rem); color:#2b2f36; line-height:1.05; }
.cards-title p{ margin-top:4px; font-size:clamp(1rem,2.4vw,1.35rem); font-weight:800; line-height:1.2; }
.cards-title p span{ color:#2c57d8; }

/* =================== TARJETA ÚNICA – ROTACIÓN =================== */
.cards-one{ padding:0; }
.cards-stage{ max-width:100vw; margin:0; position:relative; max-height:70vh; }

.cards-stage .card{
  position:relative; inset:0; display:grid; grid-template-columns:minmax(0,520px) 1fr; align-items:center;
  gap:clamp(12px,2.2vw,22px); padding:clamp(18px,2.6vw,26px);  overflow:hidden; color:#fff;
  box-shadow:0 18px 36px rgba(23,58,135,.22);
  background:
    radial-gradient(60% 100% at 35% 50%, rgba(185,202,224,.55) 0%, rgba(185,202,224,0) 58%),
    linear-gradient(90deg,#1f49b6 0%,#2b5dcd 35%,#3a6de0 60%,#1e4ac7 100%);
  opacity:0; transform:translateX(60px); pointer-events:none;
}
.cards-stage .card::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 100% at 0% 0%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 55%);
  pointer-events:none;
}
.card .card-copy{
  align-self:center; justify-self:start; display:flex; flex-direction:column; justify-content:center; height:100%;
  padding-left:clamp(20px,3vw,40px);
}
.card .card-copy h3{
  color:#fff; font-size:clamp(1.6rem,2.6vw,2.3rem);
  font-weight:800; line-height:1.15; margin:0 0 8px 0; text-shadow:0 1px 0 rgba(0,0,0,.12);
}
.card .card-copy p{ font-size:clamp(1.05rem,1.4vw,1.2rem); line-height:1.5; letter-spacing:.1px; opacity:.95; margin:0; }
.card-media{ position:relative; display:flex; justify-content:flex-end; align-items:center; }
.card-media::before{
  content:""; position:absolute; right:5%; bottom:4%; width:min(400px,46vw); height:min(180px,22vw);
  background:radial-gradient(60% 70% at 60% 40%, rgba(32,58,142,.55) 0%, rgba(32,58,142,0) 70%);
  filter:blur(20px); z-index:0;
}
.card-media img{
  position:relative; z-index:1; width:min(100%); height:auto;
  -webkit-mask-image:radial-gradient(120% 100% at 80% 50%, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 86%);
  mask-image:radial-gradient(120% 100% at 80% 50%, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 86%);
  filter:saturate(1.05) blur(.2px); transform:translateZ(0);
}
.cards-stage .card.is-active{ opacity:1; transform:translateX(0); pointer-events:auto; }
@keyframes cardIn{ from{opacity:0; transform:translateX(60px);} to{opacity:1; transform:translateX(0);} }
@keyframes cardOut{ from{opacity:1; transform:translateX(0);} to{opacity:0; transform:translateX(-60px);} }
.cards-stage .card.anim-in{ animation:cardIn .6s ease both; }
.cards-stage .card.anim-out{ animation:cardOut .6s ease both; }

@media (max-width:980px){
  /*.cards-stage{ min-height:364px; }*/
  .cards-stage .card{ grid-template-columns:1fr; min-height:360px; }
  .card .card-copy{ padding-left:0; max-width:40ch; }
  .card-media{ justify-content:center; }
  /*.card-media img{ width:min(480px,86vw); }*/
}

/* =========================== FOOTER =========================== */
.footer{
  background: linear-gradient(45deg,rgba(39, 47, 61, 1) 0%, rgba(37, 79, 137, 1) 100%, rgba(37, 79, 137, 1) 100%);
  color:#fff; padding:2rem 1.5rem;
}
.footer-inner{
  max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:2rem;
}
.footer-left{ display:flex; flex-direction:column; gap:1.2rem; }
.footer-social{ display:flex; gap:1rem; }
.footer-social a{
  width:42px; height:42px; display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:#fff; transition:transform .3s ease, opacity .3s ease;
}
.footer-social a img{ width:20px; height:20px; object-fit:contain; }
.footer-social a:hover{ transform:scale(1.1); opacity:.9; }
.footer-contact{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.8rem; font-size:.95rem; }
.footer-contact li{ display:flex; align-items:center; gap:10px; }
.footer-contact-icon{ width:18px; height:18px; object-fit:contain; }
.footer-right{ display:flex; justify-content:flex-end; align-items:flex-end; flex:1; }
.footer-right img{ height:70px; width:auto; }

@media (max-width:768px){
  .footer-inner{ flex-direction:column; align-items:flex-start; gap:1.5rem; }
  .footer{ text-align:center; }
  .footer-inner{ align-items:center; justify-content:center; gap:1rem; }
  .footer-left,.footer-right{ text-align:center; align-items:center; justify-content:center; }
  .footer-social{ justify-content:center; }
  .footer-contact{ align-items:center; text-align:center; }
  .footer-contact li{ justify-content:center; }
  .footer-right{ align-self:center; }
}


  /* ============================
     MINIATURAS
  ============================ */

.screens-grid{
    position:relative;
    width:min(760px,94vw);
    height:240px;
    margin:0 auto 40px;
    z-index:0;
  }

  .screens-grid::before{
    content:"";
    position:absolute;
    top:46%; left:50%;
    transform:translate(-50%,-50%);
    width:100%; height:170%;
    background:radial-gradient(ellipse at center,
                rgba(255,255,255,0.75) 0%,
                rgba(255,255,255,0.28) 35%,
                rgba(255,255,255,0.1) 65%,
                transparent 90%);
    filter:blur(95px);
    z-index:1;
  }
.screens-grid img:hover{
  z-index:999;
  transform:scale(1.9);
}
.title-hero .t2{
  font-size: 42px;
}
  .thumb{
    position:absolute;
    z-index:2;
    width:33%;
    border-radius:12px;
    box-shadow:0 10px 24px rgba(0,0,0,.38);
    opacity:.98;
  }
  .t1{ top:8px;  left:0%;    transform:rotate(-7deg); }
  .t2{ top:0px;  left:33.5%; transform:rotate(-2deg); }
  .t3{ top:10px; right:0%;   transform:rotate(7deg); }
  .t4{ bottom:-4px; left:12%; width:38%; transform:rotate(-3deg); }
  .t5{ bottom:-6px; right:12%; width:38%; transform:rotate(3deg); }
  
.subtitle-borders{
      position: relative;
      border: 2px solid #ffffff;
      border-radius: 24px;
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.5), inset 0 0 20px rgba(255, 255, 255, 0.1);
      margin: 0 10vw;
      padding: 10px;
      font-size: 26px;
      top: 20px;
      font-weight: bolder;
    }
  /* ============================
     SUBTÍTULO + CTA
  ============================ */
  .subtitle{
    font-family:"Acherus Militant","Open Sans",sans-serif;
    font-size:20px;
    color:var(--muted);
    margin:24px auto 32px;
    padding: 30px 0 20px 0;
    max-width:780px;
    font-weight:300;
  }
  .subtitle strong{font-weight:700;color:var(--white);}
  .cta-main{
    display:inline-block;
    font-family:"Acherus Militant","Open Sans",sans-serif;
    font-weight:700;
    background:linear-gradient(90deg,var(--btn-start),var(--btn-end));
    padding:14px 28px;
    border-radius:var(--radius);
    box-shadow:0 6px 14px rgba(0,0,0,.25);
    letter-spacing:0.5px;
    font-size: 30px;
  }
  .cta-main:hover{filter:brightness(1.07)}
  
  /* ============================
     LOGOS + SKYLINE
  ============================ */


/* ================== LOGOS CAROUSEL ================== */
  .logos{ position: relative; overflow:hidden; padding:2rem 0; background:transparent; }
  .logos-track{
    display:flex; gap:4rem; width:max-content; will-change:transform;
    animation:logos-marquee var(--logos-duration,20s) linear infinite;
  }
  .logos img{
    position: relative;
    height: 40px; object-fit:contain; flex-shrink:0;  opacity:.8;
    transition:filter .3s, opacity .3s;
    bottom: 30px;
  }

  .logos img:hover{ filter:grayscale(0%); opacity:1; }
  .logos:hover .logos-track{ animation-play-state:running; }
  @keyframes logos-marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/*
  .logos{
    border-top:1px solid var(--ring);
    border-bottom:1px solid var(--ring);
    background:rgba(255,255,255,.03);
    padding:30px 0;
    text-align:center;

.screens-grid::before{
    content:"";
    position:absolute;
    top:46%; left:50%;
    transform:translate(-50%,-50%);
  }
  .logos img{width:min(900px,95%);opacity:.9;filter:brightness(.92);}*/
  .skyline img{display:block;width:100%;margin-top:-4px;}
  
  
/* Form card */
.cta-form-card{
  position:relative; text-align: left; background:var(--color-white); border-radius:14px; padding:1.25rem 1.25rem 1.5rem;
  box-shadow:0 14px 28px rgba(23,58,135,.18);
}
.cta-badge{
  position:absolute; top:-22px; left:50%; transform:translateX(-50%); width:56px; height:auto;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.15)); background:#fff; border-radius:12px; padding:6px;
}
.cta-form{ display:flex; flex-direction:column; gap:.65rem; margin-top:.75rem; }
.cta-form label{ display:flex; flex-direction:column; gap:.35rem; font-size:.9rem; color:var(--color-text); }

/* Inp|||uts base */
.cta-form input,
.cta-form select{
  width:100%; background:#fff; border:0; border-bottom:1.6px solid #e2e7fb; padding:.6rem .25rem;
  font-family:var(--font-main); outline:none; transition:border-color .2s ease, box-shadow .2s ease;
}
.cta-form input:focus,
.cta-form select:focus{ border-bottom-color:var(--color-primary); box-shadow:0 6px 16px rgba(23,58,135,.08); }

.cta-required{ color:#9aa4c9; font-size:.8rem; margin-top:.25rem; }

/* Botón */
.cta-btn{
  margin-top:.5rem; width:100%; border:0; border-radius:999px; padding:.9rem 1rem; color:#fff;
  font-weight:700; font-size:1.05rem; cursor:pointer;
  background:linear-gradient(90deg,#3a66ff,#72b4ff);
  box-shadow:0 10px 22px rgba(23,58,135,.25);
  transition:transform .08s ease, box-shadow .2s ease, filter .2s ease;
}
.cta-btn:hover{ filter:brightness(1.03); box-shadow:0 12px 26px rgba(23,58,135,.28); }
.cta-btn:active{ transform:translateY(1px); }

/* Responsive CTA */
@media (max-width:980px){
  .demo-text{ display: none;}
  .cta-inner{ grid-template-columns:1fr; gap:1.25rem; }
  .cta-form-card{ order:2; }
  .cta-video{ order:1; }
  .cta-badge{ top:-20px; width:52px; }
  .cta-video{ margin-bottom:1.5rem; }
}
.cta-video iframe{ width:100%; aspect-ratio:16/9; border:0; display:block; }




/* ======= Teléfono + bandera en una sola línea ======= */
.cta-phone-inline { display:block; }

.cta-phone-group{
  display:flex;
  align-items:center;
  gap:10px;
  border-bottom:1.6px solid #e2e7fb;   /* una sola línea para ambos */
  padding:0.4rem 0;
  background:#fff;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.cta-phone-group:focus-within{
  border-bottom-color:var(--color-primary);
  box-shadow:0 6px 16px rgba(23,58,135,.08);
}

/* Selector de país SOLO icono */
.country-select{ position:relative; display:flex; align-items:center; }
.country-option{
  background:none; border:0; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px;
}
.country-option img{
  width:22px; height:16px; border-radius:3px; box-shadow:0 0 1px rgba(0,0,0,.3);
}

/* Dropdown compacto de banderas */
.country-dropdown{
  display:none; position:absolute; top:110%; left:0;
  background:#fff; border-radius:10px; box-shadow:0 8px 18px rgba(0,0,0,0.15);
  padding:6px 8px; z-index:100; gap:6px; flex-direction:column;
}
.country-dropdown.active{ display:flex; animation:fadeIn .15s ease; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:translateY(0);} }

.country-item{ border:0; background:transparent; cursor:pointer; padding:4px; border-radius:6px; }
.country-item:hover{ background:#f2f6ff; }
.country-item img{ width:22px; height:16px; border-radius:3px; }

/* Input del teléfono (sin su propio borde, usa el del contenedor) */
.cta-phone-group input[type="tel"]{
  flex:1; border:0; outline:0; background:transparent;
  padding:0.5rem 0.25rem; font-size:0.95rem; font-family:var(--font-main);
  color:var(--color-text);
}

/* Accesibilidad: oculto visual pero disponible para screen readers */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* Que el contenedor de testimonios adopte la altura que fijamos por JS */
.testi-stage {
  overflow:visiblesss;     /* evita recortes visuales */
}

/* Párrafos muy largos no rompen el layout */
.testi-right p {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.cta-phone-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.country-select {
  position: relative;
}

.country-option {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.country-option img {
  width: 24px;
  height: 16px;
  border-radius: 2px;
}

.country-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  padding: 6px;
  z-index: 20;
}

.country-dropdown.open {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.country-item {
  border: none;
  background: none;
  padding: 4px;
  cursor: pointer;
  transition: transform 0.1s;
}

.country-item:hover {
  transform: scale(1.1);
}

.country-item img {
  width: 24px;
  height: 16px;
  border-radius: 2px;
}

.text-hero-conoce{
  font-size: 25px;
  text-align: center;
  padding: 50px 0 30px 0;
  font-weight: bolder;
}
.bloque-conoce{
  padding-top: 40px;
}
/* ===== Testimonios ===== */
.testi-card .img-testi{
  position: relative;
  height: 35px; 
}

.testi-img img{
  width: 100px
}
.testi-text p{
  font-size: 14px;
}

.testi-one{ padding:2rem 1rem; margin: 0 30px;}
.testi-stage{ max-width:1100px; margin:0 auto; position:relative; min-height:160px; }
.testi-card{
  overflow: auto;
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:1fr;
  align-items: start;
  gap:2px;
  padding:16px 20px; border-radius:14px; color:#fff;
  background:radial-gradient(circle,rgba(37, 79, 137, 1) 0%, rgba(37, 79, 137, 1) 9%, rgba(39, 47, 61, 1) 100%);
  box-shadow:0 10px 24px rgba(23,58,135,.22);
  opacity:0; transform:translateX(30px); pointer-events:none;
  height: 400px;
}
.testimonio-person{
  text-align: right;
  font-size: 14px;
  margin-bottom: 20px;
}
.testimonio-person-img{
  position: relative;
  top: 25px;
  overflow: auto;
  height: 55px;
  width: auto;
  margin-left: auto;
  margin-right: auto;
}
.testimonio-text{
  overflow: auto;
  padding: 0 20px;
}
.testimonio-text p{
  overflow: auto;
  text-align: justify;
  font-size: 18px;
  padding: 20px 0 0 0;
}
.border-conoce-mas{
      padding: 0 5px;
      border-left: 2px dashed rgba(255, 255, 255, 0.3);
    }
.testi-card.is-active{ opacity:1; transform:translateX(0); pointer-events:auto; }
@keyframes tIn{ from{opacity:0; transform:translateX(30px);} to{opacity:1; transform:translateX(0);} }
@keyframes tOut{ from{opacity:1; transform:translateX(0);} to{opacity:0; transform:translateX(-60px);} }
.testi-card.anim-in{ animation:tIn .55s ease both; }
.testi-card.anim-out{ animation:tOut .55s ease both; }
.testi-left{ display:flex; align-items:center; justify-content:center; }
.testi-left img{
  width:5px; 
  height:auto; 
  background:#fff; 
  border-radius:10px; 
  padding:8px; 
  box-shadow:0 7px 18px rgba(0,0,0,.12); }
.testi-right 
p{ margin:0 0 8px 0; font-size:.85rem; line-height:1.5; color:#f2f6ff; }
.testi-right h4{ margin:0; font-size:.95rem; font-weight:800; text-align:right; color:#fff; }

.respon-movil{
  display: none;
}
/* ============================
     RESPONSIVE
  ============================ */
  @media (max-width:900px){
    .screens-grid{width:min(680px,94vw); height:228px; transform: none;}
    .thumb{width:34%;}
    .t4,.t5{width:40%;}
    .screens-grid::before{
      width: 100%;
    }
    .screens-grid img:hover{
      transform:none;
    }
  }
  @media (max-width:640px){
    .screens-grid{width:90vw;height:140px; transform: none;}
    .thumb{border-radius:10px;}
    .t1{top:10px;left:-1%;transform:rotate(-6deg);}
    .t2{top:2px;left:33%;transform:rotate(-2deg);}
    .t3{top:12px;right:-1%;transform:rotate(6deg);}
    .t4{bottom:-6px;left:10%;width:42%;transform:rotate(-3deg);}
    .t5{bottom:-8px;right:10%;width:42%;transform:rotate(3deg);}
    .screens-grid::before{
      width: 100%;
    }
    .collage-1{
  height: 90px;
}
    .ocultar{
      display: none;
    }
    .subtitle{
      padding-bottom: 20px;
    }
    .formulario-contactenos{
      order: 1;
    }
    .respon-movil{
      display: block;
    }
    .respon-web{
      display: none;
    }
    .screens-grid img:hover{
      transform:none;
    }
    .title-proceso{
      position: relative;
      padding-top: 25px;
      font-size: 30px;
      line-height: 32px;
    }
    .conoce-mas .subtitle-proceso{
      font-size: 19px;
      padding-bottom: 15px;
      align-content:flex-end;
    }
    .txt-conoce{
      font-size: 12px;
      margin: 0;
      padding: 0 5px;
    }
    
    .border-left-1{
      border-left: 2px dashed rgba(255, 255, 255, 0.3);
    }
    .bloque-conoce{
      position: relative;
    }
    .box-te-acom{
      position: relative;
    }
    .subtitle-proceso{
      font-size: 22px;
      line-height: 24px;
    }
    .conoce-mas .text-hero{
      margin:0 0 30px 0;
      text-align: center;
      font-size: 25px;
      font-weight: bolder;
    }
    .conoce-mas .font-sperant{
      font-size: 24px;
      height: 60px;
      align-content: center;
      height: 60px;
      align-content: center;
    }
    .conoce-mas .txt-conoce{
      font-size: 13px;
      text-align: center;
    }
    .testi-card{
      height: 250px;
    }
    .testimonio-text{
      overflow: auto;
      padding: 0 20px;
    }
    .testimonio-text p{
      overflow: auto;
      text-align: justif;
      text-wrap: pretty;
      font-size: 17px;
      padding: 20px 0 0 0;
    }
    .conoce-mas .more-img{
      font-size: 18px; 
      width: auto;
      height: 170px;
      padding: 5px 0 16px 0;;
    }
    .conoce-mas .process-img{
      display: block;
      height: 140px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 20px;
     
    
    }
    .subtitle-proceso{
      height: 60px;
      align-content: center;
    }
    .title-hero .sub-title{
      font-size: 48px;
    }
    .box-testimonio{
      text-align: center;
      margin: 0;
      padding: 0;
    }
    .title-eleva{
      position: relative;
      font-size: 40px;
      font-weight: bolder;
      padding-bottom: 20px;
    }
    .subtitle-eleva{
      font-size: 20px;
    }
    .testi-one{
      margin: 0;
    }
    
    .box-features-0{
      padding: 0;
    }
    .box-features-0 .box{
      position: relative;
      display: grid;
      padding: 0;
    }    
    .box-features-0 .box .box-texto{
      order: 1;
      text-align: center;
      padding: 0 10px;
    }
    .box-features-0 .box .box-texto .text-feature{
      order: 1;
      padding: 0 30px;
      text-align: center;
    }
 
    .box-features-0 .box .feature-img{
      order: 2;
      height: 200px;
      width: auto;
      justify-content: inherit;
      margin-top: 30px;
      padding-top: 0;
    }
    .box-features-0 .box .robot-img{
      height: 230px;
      margin-top: 5px;
    }
    .box-features-0 .box .celu-img{
      height: 230px;
      margin-top: 25px;
    }
    .features-text .title-hero{
    margin: 0;
    padding-bottom: 20px;
   }
  .features-text .title-hero .title-seccion{
    font-size: 30px;
    margin: 0;
    padding: 0;
   }
  .conoce-mas .icon-img{
    height: 30px;
    margin-bottom: 20px;
  }
    .seccion-box-features{
      padding: 0;
    }
    .box-features{
      padding: 20px 5px;;
    }
    .box-features .box{
      display: grid;
      text-align: left;
    }
    .box-features .box .feature-img{
      order: 2;
      margin-left: auto;
      margin-right: auto; 
    }
    .box-features .box .feature-text{
      order: 1;
    }
    .box-features-0 .box .box-texto .title-feature{
      position: relative;
    line-height: 28px;
      padding-top: 55px;
    }
    .box-features .box .feature-text .title-feature{
    font-size: 18px;
    line-height: 18px;
      text-align: center;
    }
    .box-features .box .feature-text .text-feature{
    font-size: 14px;
    line-height: 18px;
    padding: 15px 15px;
    text-align: center;
    }
    .subtitle-hero{
      font-size: 30px;
    }
    .cta-main{
    font-size: 22px;
    margin: 0;
    }
    .subtitle-borders{
      position: relative;
      border: 2px solid #ffffff;
      border-radius: 24px;
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.5), inset 0 0 20px rgba(255, 255, 255, 0.1);
      margin: 0 30px;
      padding: 10px;
      font-size: 26px;
      top: 20px;
      font-weight: bolder;
    }

    .testi-card{
    overflow: auto;
    position:absolute;
    gap: 6px;
    height: 500px;
  }
    }




@media (max-width:900px){
  .testi-stage{ min-height:260px; }
  .testi-card{ grid-template-columns:1fr; padding:16px; }
  .testi-left img{ width:160px; }
  .testi-right h4{ text-align:right; margin-top:6px; }
}