/* Homepage layout — Trust-First guide, stacked hero, two-tone split */

.hero {
  position: relative;
  overflow: hidden;
  padding: var(--e8) 0 var(--e7);
  background:
    linear-gradient(90deg, rgba(244,239,230,.92) 0 58%, rgba(21,34,56,.88) 58% 100%),
    url("/assets/img/hero-bg.webp") right center / cover no-repeat;
  color: var(--tinta);
}
.hero__in {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: var(--e7);
  align-items: end;
}
.hero__texto { max-width: 38rem; padding-bottom: var(--e4); }
.hero h1 { margin-bottom: var(--e4); }
.hero__intro {
  font-size: 1.08rem;
  max-width: 62ch;
  margin-bottom: var(--e5);
}
.hero__lado {
  color: var(--porcelana);
  padding: var(--e6);
}
.hero__lado h2 {
  color: var(--porcelana);
  font-size: 1.35rem;
  margin-bottom: var(--e3);
}
.hero__lado p { color: #d5deec; font-size: .98rem; }
.hero__lado ul { margin-top: var(--e4); }
.hero__lado .lista-ok li::before { border-color: #f0b4ad; }
.hero__fecha {
  margin-top: var(--e5);
  font-size: .88rem;
  color: #b7c3d6;
}

.foco {
  margin-top: calc(var(--e7) * -1);
  position: relative;
  z-index: 2;
  padding-bottom: var(--e6);
}
.foco__tarjeta {
  display: grid;
  grid-template-columns: 1.4fr .8fr;
  background: var(--superficie);
  padding: var(--e6);
  gap: var(--e6);
}
.foco__kicker {
  font-family: var(--promo);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: .85rem;
  color: var(--acento);
  margin-bottom: var(--e2);
}

.confianza {
  padding: var(--e7) 0;
  background: var(--marino);
  color: var(--porcelana);
}
.confianza h2 { color: var(--porcelana); margin-bottom: var(--e3); }
.confianza__intro { max-width: 68ch; color: #d5deec; margin-bottom: var(--e6); }
.cifras {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e4);
}
.cifra {
  background: var(--marino-2);
  padding: var(--e5);
}
.cifra b {
  display: block;
  font-family: var(--promo);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.cifra span {
  display: block;
  margin-top: var(--e2);
  font-size: .92rem;
  color: #c9d3e4;
}

.divulga {
  padding: var(--e4);
  background: var(--porcelana);
  font-size: .95rem;
  margin: 0 0 var(--e5);
}

.picks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e4);
  margin-top: var(--e6);
}
.pick {
  background: var(--superficie);
  padding: var(--e5);
}
.pick h3 { margin: var(--e2) 0 var(--e3); }
.pick ol { list-style: none; counter-reset: p; }
.pick li {
  counter-increment: p;
  padding-left: 1.8em;
  position: relative;
  margin-top: var(--e2);
}
.pick li::before {
  content: counter(p);
  position: absolute;
  left: 0;
  font-family: var(--promo);
  font-weight: 800;
  color: var(--acento);
}

.recursos {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: var(--e4);
  margin-top: var(--e4);
}
.recurso {
  background: var(--superficie);
  padding: var(--e5);
}
.recurso h3 { margin-bottom: var(--e2); font-size: 1.15rem; }
.recurso p { font-size: .95rem; color: var(--apagado); margin-bottom: var(--e3); }

.ops { display: flex; flex-direction: column; gap: var(--e6); }
.op {
  display: grid;
  grid-template-columns: 1.45fr .7fr;
  background: var(--superficie);
  gap: 0;
}
.ops .op:nth-child(even) {
  margin-left: 6%;
}
.ops .op:nth-child(odd) {
  margin-right: 6%;
}
.op__hechos { padding: var(--e6); }
.op__accion {
  padding: var(--e6);
  background: var(--porcelana-2);
  display: flex;
  flex-direction: column;
  gap: var(--e3);
}
.op__cabeza {
  display: flex;
  align-items: center;
  gap: var(--e4);
  margin-bottom: var(--e4);
}
.op__logo {
  width: 64px;
  height: 64px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.op__logo img { max-width: 56px; max-height: 40px; object-fit: contain; }
.op__nombre { font-size: 1.7rem; }
.op__dom { font-size: .92rem; color: var(--apagado); }
.op__desc { margin: var(--e4) 0; }
.ficha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e3) var(--e4);
  margin: var(--e4) 0;
  font-size: .92rem;
}
.ficha dt {
  font-family: var(--promo);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .78rem;
  color: var(--apagado);
}
.ficha dd { margin: 0; font-weight: 600; }
.puntos { display: flex; align-items: center; gap: var(--e3); }
.puntos b { font-family: var(--promo); font-size: 1.35rem; }
.op__oferta { font-size: .9rem; }

.verificar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e7);
  align-items: center;
}
.pasos { list-style: none; counter-reset: s; }
.pasos li {
  counter-increment: s;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--e4);
  margin-top: var(--e5);
}
.pasos b {
  font-family: var(--promo);
  font-size: 1.6rem;
  color: var(--acento);
  line-height: 1;
}
.pasos b::before { content: counter(s, decimal-leading-zero); }

.metodo {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--e7);
  align-items: start;
}
.criterios { list-style: none; }
.criterios li {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: var(--e4);
  padding: var(--e4) 0;
}
.criterios strong {
  font-family: var(--promo);
  font-size: 1.5rem;
  color: var(--acento);
}

.jr {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: var(--e7);
}
.jr__caja {
  background: var(--marino-2);
  padding: var(--e5);
}
.jr__caja h3 { color: var(--porcelana); margin-bottom: var(--e3); }

.mito {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e4);
  margin-bottom: var(--e7);
}
.mito__caja { padding: var(--e5); background: var(--superficie); }
.mito__caja h3 { margin-bottom: var(--e3); }
.mito__caja--no { background: var(--porcelana); }

.legal-bloque { padding-top: var(--e6); }
.legal-bloque h2 { margin-bottom: var(--e4); }

@media (max-width: 980px) {
  .hero {
    background:
      linear-gradient(180deg, rgba(244,239,230,.94) 0 62%, rgba(21,34,56,.92) 62% 100%),
      url("/assets/img/hero-bg.webp") center / cover no-repeat;
  }
  .hero__in, .foco__tarjeta, .verificar, .metodo, .jr, .mito, .picks, .recursos, .cifras, .op {
    grid-template-columns: 1fr;
  }
  .hero__lado { padding: var(--e5) 0 0; }
  .ops .op:nth-child(even),
  .ops .op:nth-child(odd) { margin: 0; }
  .ficha { grid-template-columns: 1fr; }
}