/* HERO PRO */
.cf-hero{
  padding: 86px 0 40px;
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(0,196,204,.18), transparent),
    linear-gradient(#e9fbfc, #fff);
  position: relative;
  overflow: hidden;
}

.cf-hero__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 26px;
  align-items:center;
}

.cf-hero__text h1{
  font-size: clamp(30px, 6vw, 52px);
  font-weight: 800;
  line-height:1.05;
  margin:0 0 10px;
}
.cf-sub{
  font-size:16px;
  color:#444;
  margin:0 0 14px;
  line-height:1.6;
  max-width:560px;
}

/* quick bullets */
.cf-quick{
  display:grid;
  gap:8px;
  margin: 10px 0 18px;
}
.cf-quick__item{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  color:#2f2f2f;
  font-size:14.5px;
}
.dot{
  width:8px; height:8px; border-radius:50%;
  background:#00C4CC;
  box-shadow:0 0 10px rgba(0,196,204,.6);
}

.cf-hero__cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* mock hero */
.cf-hero__mock{ position:relative; display:flex; justify-content:center; }
.mock-3d{
  width:min(380px, 92%);
  border-radius: 34px;
  background:#fff;
  padding:10px;
  box-shadow: 0 30px 60px rgba(0,0,0,.12);
}
.mock-3d img{
  width:100%;
  display:block;
  border-radius: 28px;
}
.mock-glow{
  position:absolute;
  width:440px; height:440px;
  background: radial-gradient(circle, rgba(0,196,204,.35), transparent 60%);
  filter: blur(55px);
  z-index:-1;
}

/* QUÉ ES */
.cf-what{ padding: 60px 0 10px; }
.cf-what__cards{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:16px;
  margin-top: 22px;
}
.cf-mini{
  background:#fff;
  border:1px solid #f1f1f1;
  border-radius:18px;
  padding:18px;
  box-shadow: 0 10px 22px rgba(0,0,0,.05);
  transition: transform .2s ease, box-shadow .2s ease, border .2s ease;
}
.cf-mini:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 30px rgba(0,0,0,.08);
  border-color: rgba(0,196,204,.35);
}
.cf-mini__icon{ font-size:24px; }
.cf-mini h3{ margin:10px 0 6px; font-size:18px; }
.cf-mini p{ margin:0; color:#5c5c5c; font-size:14px; line-height:1.5; }

/* STEPS */
.cf-steps{ padding: 70px 0 30px; }

.cf-step{
  display:grid;
  grid-template-columns: 80px 1.1fr .9fr;
  gap: 18px;
  align-items:center;
  padding: 46px 0;
  border-bottom:1px dashed #e9eeee;
}
.cf-step:last-child{ border-bottom:none; }

.cf-step.reverse{
  grid-template-columns: 80px .9fr 1.1fr;
}
.cf-step.reverse .cf-step__text{ order:2; }
.cf-step.reverse .cf-step__img{ order:1; }

.cf-step__num{
  font-size: 34px;
  font-weight:800;
  color: rgba(0,196,204,.35);
  text-align:center;
}

.cf-step__text h3{
  font-size: clamp(20px,4vw,28px);
  margin: 6px 0 8px;
}
.cf-step__text p{
  color:#444;
  line-height:1.6;
  font-size:15px;
}

/* icon svg */
.cf-icon-svg{
  width:46px;
  height:46px;
  margin-bottom:6px;
  filter: drop-shadow(0 6px 10px rgba(0,196,204,.18));
}

/* mock card */
.cf-card{
  background:#fff;
  border:1px solid #eee;
  border-radius:20px;
  padding:12px;
  box-shadow:0 18px 30px rgba(0,0,0,.07);
}
.cf-card.big{
  max-width: 420px;
  margin-left:auto;
}
.cf-card img{
  width:100%;
  border-radius:16px;
}

/* mini list */
.mini-list{
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  font-size: 14.5px;
  color: #444;
}
.mini-list li{
  position: relative;
  padding-left: 22px;
}
.mini-list li::before{
  content:"•";
  position:absolute;
  left:0; top:-1px;
  color:#00C4CC;
  font-size: 20px;
  line-height: 1;
}

/* PARA QUIEN */
.cf-for{
  padding: 70px 0;
  background: #F4F6F8;
}
.cf-for__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.cf-for__box{
  background:#fff;
  border:1px solid #eee;
  border-radius:20px;
  padding:20px;
  box-shadow: 0 10px 22px rgba(0,0,0,.05);
}
.cf-for__box h3{
  margin:0 0 6px; font-size:20px;
}
.cf-for__box p{
  margin:0 0 12px; color:#555; line-height:1.5;
}

/* CTA FINAL */
.cf-cta{
  padding: 80px 0;
  background:#00C4CC;
  text-align:center;
  color:white;
}
.cf-cta h2{
  font-size: clamp(24px,5vw,36px);
  margin:0 0 8px;
}
.cf-cta p{ margin:0 0 16px; opacity:.95; }
.cf-cta__actions{
  display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
}

/* RESPONSIVE */
@media (max-width: 920px){
  .cf-hero__grid{ grid-template-columns: 1fr; }
  .cf-what__cards{ grid-template-columns: 1fr; }
  .cf-step{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .cf-step__num{ text-align:left; }
  .cf-card.big{ margin:0; }
  .cf-for__grid{ grid-template-columns: 1fr; }
}
/* -------------------------- */
/* FIX RESPONSIVE CÓMO FUNCIONA */
/* -------------------------- */

@media (max-width: 768px) {

  /* 1. Ocultar o reducir el número de paso */
  .cf-step__num {
    font-size: 22px;
    margin-bottom: 6px;
    text-align: left;
    opacity: 0.5;
  }

  /* 2. Forzar que texto e imagen vayan SIEMPRE en columna */
  .cf-step {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 40px 0;
    text-align: left;
  }

  /* El reverse ya no hace “flip” en móvil */
  .cf-step.reverse {
    flex-direction: column;
  }

  .cf-step.reverse .cf-step__text,
  .cf-step.reverse .cf-step__img {
    order: unset;
  }

  /* 3. Padding lateral para que respire el texto */
  .cf-step__text {
    width: 100%;
    padding: 0 18px;
  }

  /* 4. Imágenes centradas y más pequeñas */
  .cf-step__img {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0 18px;
  }

  .cf-card.big {
    max-width: 320px;
    margin: 0 auto;
  }
}