/* ==========================================================
   Secciones del final del inicio, cada una con su propio carácter
   (método negro, preguntas con panel verde, visión en verde, red con acentos dorados)
   Solo colores corporativos: negro, verde, dorado y blanco.
   ========================================================== */

/* ---------- Cómo trabajamos: franja negra con 4 pasos ---------- */
#metodo { background: #141414; color: #fff; border-radius: 40px; margin-inline: clamp(8px, 1.4vw, 16px); overflow: hidden; isolation: isolate; }
#metodo::before { background: radial-gradient(circle, rgba(247,177,0,.16), transparent 68%) !important; opacity: 1 !important; filter: blur(70px); }
#metodo::after { display: none; }
#metodo .h2 { color: #fff; }
#metodo .lead { color: rgba(255,255,255,.72); }
#metodo .eyebrow { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.18); color: #fff; }
#metodo .tl { position: relative; }
#metodo .tl__line { display: none; }
#metodo .tl__list { grid-template-columns: repeat(4, 1fr); gap: 16px; position: relative; }
#metodo .tl__list::before { content: ""; position: absolute; left: 6%; right: 6%; top: 36px; height: 2px; background: repeating-linear-gradient(90deg, rgba(247,177,0,.7) 0 10px, transparent 10px 20px); }
#metodo .tl__item { display: block; padding: 0; }
#metodo .tl__dot { position: relative; left: auto; top: auto; transform: none !important; margin: 0 0 18px; width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; background: #f7b100; color: #141414; border: 6px solid #141414; font-size: 34px; box-shadow: 0 0 0 2px #f7b100; animation: none; }
#metodo .tl__card { opacity: 1 !important; transform: none !important; text-align: left !important; grid-column: auto !important; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); min-height: 190px; padding: 24px; transition: transform .4s var(--ease), background .3s, border-color .3s; }
#metodo .tl__card:hover { transform: translateY(-6px) !important; background: rgba(247,177,0,.1); border-color: #f7b100; box-shadow: none; }
#metodo .tl__card h3 { color: #fff; font-size: 28px; }
#metodo .tl__card p { color: rgba(255,255,255,.74); }

/* ---------- Visión: franja verde con cifras grandes ---------- */
.stats-sec { background: #003721; color: #fff; border-radius: 40px; margin-inline: clamp(8px, 1.4vw, 16px); overflow: hidden; isolation: isolate; position: relative; }
.stats-sec::before { background: radial-gradient(circle, rgba(247,177,0,.28), transparent 68%) !important; opacity: 1 !important; filter: blur(60px); }
.stats-sec::after { content: ""; position: absolute; z-index: -1; right: -70px; bottom: -90px; width: 420px; aspect-ratio: 151 / 147; background: url("../img/simbolo.png") no-repeat center / contain; opacity: .09; filter: brightness(3); }
.stats-sec .h2 { color: #fff; }
.stats-sec .grad-text { color: #f7b100 !important; }
.stats-sec .lead { color: rgba(255,255,255,.84); }
.stats-sec .eyebrow { background: rgba(255,255,255,.12) !important; border-color: rgba(255,255,255,.22); color: #fff; }
.stats-sec .nums { gap: 14px; }
.stats-sec .nums div { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 24px; padding: 24px; transition: transform .35s var(--ease), background .3s; }
.stats-sec .nums div:hover { transform: translateY(-5px); background: rgba(255,255,255,.14); }
.stats-sec .nums dd { color: #f7b100 !important; font-size: clamp(56px, 6vw, 84px); line-height: .95; }
.stats-sec .nums dt { color: rgba(255,255,255,.8); }

/* ---------- Red Torre 7: tarjetas con acento dorado y número ---------- */
.red-esal { background: #fff; }
.red-esal .ways { counter-reset: via; gap: 18px; }
.red-esal .way { counter-increment: via; position: relative; padding: 34px 26px 26px; border-radius: 28px; border: 1px solid var(--line); background: #fff; overflow: hidden; text-align: left; transition: transform .4s var(--ease), box-shadow .4s, border-color .3s; }
.red-esal .way::before { content: "0" counter(via); position: absolute; top: 10px; right: 20px; font-family: "Bebas Neue", Impact, sans-serif; font-size: 64px; line-height: 1; color: rgba(0, 55, 33,.1); transition: color .3s; }
.red-esal .way::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: #f7b100; transform: scaleX(.28); transform-origin: left; transition: transform .5s var(--ease); }
.red-esal .way:hover { transform: translateY(-8px); border-color: rgba(0, 55, 33,.4); box-shadow: 0 34px 60px -36px rgba(0, 55, 33,.5); }
.red-esal .way:hover::after { transform: scaleX(1); }
.red-esal .way:hover::before { color: rgba(247,177,0,.55); }
.red-esal .way:nth-child(2)::after { background: #003721; }
.red-esal .way:nth-child(3) { background: #003721; border-color: #003721; }
.red-esal .way:nth-child(3) h3 { color: #fff; }
.red-esal .way:nth-child(3) p { color: rgba(255,255,255,.84); }
.red-esal .way:nth-child(3)::before { color: rgba(255,255,255,.14); }
.red-esal .way:nth-child(3) .btn { background: #f7b100; color: #141414; border-color: #f7b100; }
.red-esal .way:nth-child(1) .btn--dark { background: #003721; }
.red-esal .plans-more { display: inline-flex; margin-top: 26px; padding: 13px 24px; border-radius: 999px; background: #141414; color: #fff !important; font-weight: 700; text-decoration: none; transition: background .25s, transform .25s; }
.red-esal .plans-more:hover { background: #003721; transform: translateY(-2px); }

@media (max-width: 1000px) {
  #metodo .tl__list { grid-template-columns: repeat(2, 1fr); }
  #metodo .tl__list::before { display: none; }
}
@media (max-width: 600px) {
  #metodo, .stats-sec { border-radius: 28px; }
  #metodo .tl__list { grid-template-columns: 1fr; }
  #metodo .tl__card { min-height: 0; }
}

#metodo .grad-text { color: #f7b100 !important; }
.red-esal .way h3 { padding-right: 56px; }
.red-esal .way::before { font-size: 54px; }

/* ---------- Correcciones de celular y tableta ---------- */
/* Servicios: en una columna, el panel verde llegaba a tapar el botón con la sección siguiente */
@media (max-width: 1000px) {
  .svc-sec__grid { display: flex; flex-direction: column; gap: 22px; }
  .svc-sec .svc-panel { align-self: stretch; }
  .svc-sec, .sec { overflow-x: clip; overflow-y: visible; }
}