/* =========================================================
   TP ADVISORS – CÓMO TRABAJAMOS (tpaw)
   CSS COMPLETO / REEMPLAZO TOTAL
   Scope: #tpa-como-trabajamos.tpa
========================================================= */

#tpa-como-trabajamos.tpa{
  /* ===== BRAND ===== */
  --tpaw-blue-950:#08172b;
  --tpaw-blue-900:#0b1d33;
  --tpaw-blue-850:#0e2340;
  --tpaw-blue-800:#102a47;
  --tpaw-blue-700:#16335c;

  --tpaw-blue:#1f4fbf;
  --tpaw-blue-soft:#6f8ef2;

  --tpaw-mint:#63d6b0;
  --tpaw-orange:#f4a300;

  /* ===== NEUTRALS ===== */
  --tpaw-ink:#0f1b2d;
  --tpaw-muted:rgba(15,27,45,.65);

  --tpaw-bg:#ffffff;
  --tpaw-bg-soft:#f4f7fb;
  --tpaw-card:#ffffff;
  --tpaw-line:rgba(15,27,45,.10);

  /* ===== GLASS ===== */
  --tpaw-glass:rgba(255,255,255,.18);
  --tpaw-glass-strong:rgba(255,255,255,.22);
  --tpaw-glass-border:rgba(255,255,255,.38);

  /* ===== RADIUS ===== */
  --tpaw-r-xl:26px;
  --tpaw-r-lg:22px;
  --tpaw-r-md:16px;
  --tpaw-r-sm:12px;

  /* ===== SHADOWS ===== */
  --tpaw-sh-soft:0 12px 32px rgba(11,29,51,.14);
  --tpaw-sh-mid:0 26px 70px rgba(11,29,51,.24);
  --tpaw-sh-hard:0 40px 120px rgba(11,29,51,.42);

  /* ===== LAYOUT ===== */
  --tpaw-max:1200px;
  --tpaw-gutter:24px;

  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--tpaw-ink);
  background:var(--tpaw-bg);
}

/* -------------------------
   Reset / base
-------------------------- */
.tpaw-container{
  max-width:var(--tpaw-max);
  margin:0 auto;
  padding:0 var(--tpaw-gutter);
}

img{
  display:block;
  width:100%;
  height:auto;
}

a{ color:inherit; }

section[id]{
  scroll-margin-top:92px;
}

/* =========================================================
   HERO
========================================================= */

.tpaw-hero{
  position:relative;
  padding:120px 0 95px;
  overflow:hidden;
}

.tpaw-hero-bg{
  position:absolute;
  inset:0;
  background-image:var(--hero-bg);
  background-size:cover;
  background-position:center;
  z-index:0;
  filter:saturate(1.03) contrast(1.02);
}

.tpaw-hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg,#1f497dbc,#3F3C71bc,#1f497dbc)
}

.tpaw-hero-inner{
  position:relative;
  z-index:2;
  max-width:980px;
  margin:0 auto;
  padding:0 var(--tpaw-gutter);
  text-align:center;
  color:#fff;
}

/* pill */
.tpaw-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:9px 16px;
  border-radius:999px;
  background:var(--tpaw-glass-strong);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-weight:600;
  font-size:1rem;
  letter-spacing:.15px;
  margin:0 0 22px;
}

.tpaw-pill-ico{
  width:30px;
  height:30px;
  border-radius:10px;
  display:grid;
  place-items:center;
}

.tpaw-pill-ico i{
  color:#DF900C;
  font-size:1rem;
}

/* title */
.tpaw-hero-title{
  margin:0 0 14px;
  font-size:4rem;
  line-height:1.06;
  font-weight:900;
  letter-spacing:-.8px;
}

.tpaw-title-a{ color:#fff; }
.tpaw-title-b{
  color:var(--tpaw-mint);
  text-shadow:0 18px 40px rgba(99,214,176,.18);
}

/* subtitle */
.tpaw-hero-sub{
  margin:0 auto 30px;
  padding: 0 5rem;
  max-width:780px;
  font-size:18px;
  line-height:1.72;
  color:rgba(255,255,255,.90);
}

/* actions */
.tpaw-hero-actions{
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
  margin:0 0 44px;
}

/* buttons base */
.tpaw-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height:48px;
  padding:0 24px;
  border-radius:10px;
  font-weight:600;
  font-size:14px;
  letter-spacing:.15px;
  text-decoration:none;
  border:1px solid transparent;
  transition:transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
  user-select:none;
}

.tpaw-btn i{ font-size:14px; }

.tpaw-btn--primary{
  background:#DF900C;
  color:#fff;
}

.tpaw-btn--primary:hover{
  transform:translateY(-1px);
  box-shadow:0 22px 48px rgba(244,163,0,.52);
}

.tpaw-btn--ghost{
  background:rgba(255,255,255,.16);
  color:#fff;
  border-color:rgba(255,255,255,.45);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.tpaw-btn--ghost:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.20);
  border-color:rgba(255,255,255,.52);
}

/* KPIs hero */
.tpaw-kpis{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:1.5rem;
  padding: 0 1rem;
}

.tpaw-kpi{
  padding: 2rem;
  border-radius:16px;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.20);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
}

.tpaw-kpi-in{ text-align:center; }

.tpaw-kpi-num{
  font-size:24px;
  font-weight:600;
  color:var(--tpaw-mint);
  line-height:1.05;
}

.tpaw-kpi-lbl{
  margin-top:4px;
  font-size:13px;
  font-weight:500;
  color:rgba(255,255,255,.90);
}

/* =========================================================
   PROCESO (3 pasos)
========================================================= */

.tpaw-process{
  padding:110px 0 30px;
  background:#fff;
}

.tpaw-step{
  padding:0;
  margin:0 0 140px;
}

.tpaw-step-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  align-items:center;
}

.tpaw-step-alt .tpaw-step-grid{
  grid-template-columns:.9fr 1.1fr;
}

/* copy + head */
.tpaw-step-copy{ width:100%; }

.tpaw-step-head{
  display:flex;
  gap:18px;
  align-items:flex-start;
  margin:0 0 14px;
}

.tpaw-step-num{
  width:4.5rem;
  height:4.5rem;
  font-size: 1.8rem;
  border-radius:14px;
  background:linear-gradient(135deg,#1F497D,#688AE6);
  color:#fff;
  font-weight:600;
  display:grid;
  place-items:center;
  box-shadow:0 14px 34px rgba(111,142,242,.35);
  flex:0 0 auto;
}
.tpaw-step-num2{
  width:4.5rem;
  height:4.5rem;
  font-size: 1.8rem;
  border-radius:14px;
  background:linear-gradient(135deg,#688AE6,#8EA9DB);
  color:#fff;
  font-weight:900;
  display:grid;
  place-items:center;
  box-shadow:0 14px 34px rgba(111,142,242,.35);
  flex:0 0 auto;
}

.tpaw-step-text h2{
  margin:0 0 6px;
  font-size:44px;
  font-weight:900;
  letter-spacing:-.6px;
  line-height:1.05;
  color:#0f172a;
}

.tpaw-step-text h2 span{
  color:var(--tpaw-blue-soft);
}

.tpaw-step-text p{
  margin:0;
  font-size:14px;
  line-height:1.75;
  color:var(--tpaw-muted);
  max-width:620px;
}

.tpaw-mini-title{
  margin:26px 0 14px;
  font-size:15px;
  font-weight:900;
  color:#0f172a;
}

/* =========================================================
   Paso 1 – mini cards (¿Qué analizamos?)
========================================================= */

.tpaw-cards-2col{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
}

.tpaw-mini-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(15,27,45,.08);
  box-shadow:var(--tpaw-sh-soft);
}

.tpaw-mini-card span:last-child{
  font-size:14px;
  font-weight:800;
  color:rgba(15,27,45,.78);
}

.tpaw-mini-ico{
  width:36px;
  height:36px;
  border-radius:10px;
  background:linear-gradient(135deg,#1F497D,#688AE6);
  color:#fff;
  display:grid;
  place-items:center;
  box-shadow:0 12px 28px rgba(31,79,191,.30);
  flex:0 0 auto;
}

.tpaw-mini-ico i{ font-size:14px; }

/* =========================================================
   Paso 2 – info list (Comparativa, Recomendación, Simuladores)
========================================================= */

.tpaw-info-list{
  display:grid;
  gap:14px;
}

.tpaw-info-item{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:14px 16px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(15,27,45,.08);
  box-shadow:var(--tpaw-sh-soft);
}

.tpaw-info-ico{
  width:36px;
  height:36px;
  border-radius:10px;
  background:linear-gradient(135deg,#688AE6,#8EA9DB);
  color:#fff;
  display:grid;
  place-items:center;
  box-shadow:0 12px 28px rgba(31,79,191,.30);
  flex:0 0 auto;
}

.tpaw-info-ico i{ font-size:14px; }

.tpaw-info-txt{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.tpaw-info-txt strong{
  font-size:14px;
  font-weight:900;
  color:#0f172a;
}

.tpaw-info-txt span{
  font-size:13px;
  line-height:1.55;
  color:var(--tpaw-muted);
}

/* =========================================================
   Paso 3 – rail list (lista con riel a la izquierda)
========================================================= */

.tpaw-rail-list{
  position:relative;
  display:grid;
  gap:14px;
  padding-left:14px;
}

.tpaw-rail-item{
  border-left: 4px solid #1F497D;
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-radius:14px;
  background:#fff;
  box-shadow:var(--tpaw-sh-soft);
}

.tpaw-rail-ico{
  width:36px;
  height:36px;
  border-radius:10px;
  background:linear-gradient(135deg,#1F497D,#688AE6);
  color:#fff;
  display:grid;
  place-items:center;
  box-shadow:0 12px 28px rgba(31,79,191,.30);
  flex:0 0 auto;
}

.tpaw-rail-ico i{ font-size:14px;color: #fff; }

.tpaw-rail-item span{
  font-size:14px;
  font-weight:800;
  color:rgba(15,27,45,.78);
}

/* =========================================================
   TIME BOX (variantes)
========================================================= */

.tpaw-time{
  margin-top:22px;
  padding:14px 18px;
  border-radius:16px;
  background:var(--tpaw-bg-soft);
  border-left: 4px solid #1F497D;
  display:flex;
  gap:12px;
  align-items:flex-start;
  font-size:14px;
  line-height:1.45;
}
.tpaw-time-ico{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 10px;
  background-color:#1F497D;
}

.tpaw-time-ico2{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 10px;
  background-color:#688AE6;
}

.tpaw-time i{

  font-size:1.5rem;
  color:#fff;
  margin-top:1px;
}

.tpaw-time strong{
  font-weight:900;
  color:#0f172a;
}

.tpaw-time span{
  color:var(--tpaw-muted);
}

.tpaw-time--right{
  justify-content:flex-start;
}

.tpaw-time--line{
  justify-content:flex-start;
}

/* =========================================================
   Media / Images + card flotante del paso 2
========================================================= */

.tpaw-step-media img{
  border-radius:22px;
  box-shadow:0 30px 80px rgba(11,29,51,.30);
}

/* Card para imagen con botón flotante */
.tpaw-media-card{
  background-color: transparent;
  overflow: visible;
}

.tpaw-media-card img{
  border-radius:22px!important;
  box-shadow:0 1px 15px rgba(11,29,51,.30)!important;
  border-radius:0;
  box-shadow:none;
  transform:scale(1.01);
}

.tpaw-float-btn{
  position: relative;
  left:-1rem;
  bottom:2rem;
  width:4rem;
  height:4rem;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.35);
  background: linear-gradient(135deg, #688AE6, #8EA9DB);
  color:#fff;
  display:flex;
  place-items:center;
  justify-content: center;
  cursor:default;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.tpaw-float-btn i{ font-size:1.5rem; }

/* =========================================================
   CTA FINAL
========================================================= */

.tpaw-cta{
  padding-bottom:5rem;
}

.tpaw-cta-card{
  max-width:980px;
  margin:0 auto;
  border-radius:26px;
  padding:70px 52px;
  text-align:center;
  color:#fff;
  background:linear-gradient(135deg, #0f2139ee, #1a3a52ee ,#0F2139ee);
}

.tpaw-cta-pill{
  display:inline-block;
  padding:8px 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.40);
  background:rgba(255,255,255,.10);
  font-size:11px;
  font-weight:900;
  letter-spacing:.7px;
  margin:0 0 18px;
}

.tpaw-cta-card h2{
  margin:0 0 12px;
  font-size:2.5rem;
  font-weight:900;
  letter-spacing:-.6px;
  color: #fff;
}

.tpaw-cta-card p{
  margin:0 auto;
  max-width:780px;
  font-size:1.25rem;
  line-height:1.75;
  color:rgba(255,255,255,.90);
}

.tpaw-cta-kpis{
  margin:34px auto 26px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px;
  max-width:820px;
}

.tpaw-cta-kpis div{
  border-radius:16px;
  padding:2.5rem 1rem;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.25);
}

.tpaw-cta-kpis strong{
  display:block;
  font-size:2.5rem;
  font-weight:600;
  line-height:1.05;
  color:#fff;
}

.tpaw-cta-kpis span{
  display:block;
  margin-top:6px;
  font-size:1rem;
  font-weight:500;
  color:rgba(255,255,255,.88);
}

/* CTA button */
.tpaw-btn--cta{
  margin:10px auto 0;
  height:50px;
  padding:.2rem 2rem;
  font-size: 1.25rem;
  border-radius:10px;
  background:linear-gradient(135deg,#1F497D,#688AE6);
  color:#fff;
}

.tpaw-btn--cta:hover{
  transform:translateY(-1px);
  box-shadow:0 22px 54px rgba(111,142,242,.52);
}

/* =========================================================
   Responsive
========================================================= */

@media (max-width: 980px){
  .tpaw-hero-title{ font-size:54px; }

  .tpaw-kpis{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .tpaw-step-grid{
    grid-template-columns:1fr;
    gap:26px;
  }

  .tpaw-step{
    margin-bottom:90px;
  }

  .tpaw-step-alt .tpaw-step-grid{
    grid-template-columns:1fr;
  }

  .tpaw-step-alt .tpaw-step-media{
    order:0;
  }
}

@media (max-width: 640px){
  .tpaw-hero{
    padding:96px 0 78px;
  }

  .tpaw-hero-title{ font-size:40px; }

  .tpaw-hero-sub{
    font-size:15px;
  }

  .tpaw-btn{
    width:100%;
    max-width:360px;
  }

  .tpaw-kpis{
    grid-template-columns:1fr;
  }

  .tpaw-cards-2col{
    grid-template-columns:1fr;
  }

  .tpaw-cta-card{
    padding:54px 22px;
  }

  .tpaw-cta-card h2{
    font-size:34px;
  }

  .tpaw-cta-kpis{
    grid-template-columns:1fr;
  }
}