/* =====================================================================
   06 · SECCIONES E INTERACCIÓN
   Servicios, pestañas, precios/bonos, pasos, contadores, testimonios,
   acordeón, logos, CTA final, pie. Interacción aunque sea HTML plano.
   ===================================================================== */

/* ---------- Pestañas (tabs) — js/interaccion.js ---------- */
.tabs-lista{ display:inline-flex; gap:4px; padding:5px; margin-bottom:48px; border:1px solid var(--c-linea); border-radius:var(--radio-pill); background:var(--c-fondo); }
.tabs-lista button{
  padding:.7em 1.6em; border:0; border-radius:var(--radio-pill); background:transparent;
  font-size:.9rem; font-weight:600; letter-spacing:.03em; color:var(--c-texto-suave);
  transition:background var(--t-rapida) var(--ease), color var(--t-rapida) var(--ease);
}
.tabs-lista button[aria-selected="true"]{ background:var(--c-oscuro); color:var(--c-sobre-oscuro); }
.tabs-panel[hidden]{ display:none; }
.tabs-panel{ animation:panelEntra .5s var(--ease); }
@keyframes panelEntra{ from{ opacity:0; transform:translateY(10px); } }

/* ---------- Servicios (lista con precio) ---------- */
.servicios{ display:grid; grid-template-columns:repeat(2, 1fr); gap:0 clamp(32px, 5vw, 80px); }
.servicio{
  display:grid; grid-template-columns:1fr auto; gap:6px 24px; align-items:baseline;
  padding:28px 0; border-top:1px solid var(--c-linea);
}
.servicio h3{ font-size:1.45rem; }
.servicio .precio{ font-family:var(--f-display); font-size:1.5rem; color:var(--c-acento-2); white-space:nowrap; }
.servicio p{ grid-column:1 / -1; margin:0; color:var(--c-texto-suave); max-width:52ch; }
.servicio .meta{ grid-column:1 / -1; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--c-texto-suave); }
@media (max-width:800px){ .servicios{ grid-template-columns:1fr; } }

/* ---------- Tarjetas con imagen ---------- */
.tarjetas{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:clamp(20px, 3vw, 32px); }
.tarjeta{ position:relative; display:flex; flex-direction:column; gap:14px; }
.tarjeta img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radio) 40px var(--radio) var(--radio); }
.tarjeta:nth-child(even) img{ border-radius:40px var(--radio) var(--radio) var(--radio); }

/* ---------- Precios / Bonos ---------- */
.precios{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(16px, 2.4vw, 28px); align-items:stretch; }
.bono{
  position:relative; display:flex; flex-direction:column; gap:14px;
  padding:clamp(28px, 3vw, 40px); border:1px solid var(--c-linea-oscuro); border-radius:var(--radio);
  transition:transform var(--t-media) var(--ease), border-color var(--t-media) var(--ease);
}
.bono:hover{ transform:translateY(-6px); border-color:var(--c-linea-acento); }
.bono h3{ font-size:1.6rem; }
.bono .importe{ font-family:var(--f-display); font-size:clamp(2.6rem, 4vw, 3.4rem); line-height:1; }
.bono .importe small{ font-family:var(--f-texto); font-size:.85rem; opacity:.7; }
.bono .ahorro{ align-self:flex-start; padding:.3em .8em; border-radius:var(--radio-pill); background:var(--c-acento); color:var(--c-sobre-acento); font-size:.75rem; font-weight:700; letter-spacing:.06em; }
.bono ul{ margin:0; padding:0; list-style:none; display:grid; gap:8px; font-size:.95rem; }
.bono li{ padding-left:22px; position:relative; }
.bono li::before{ content:""; position:absolute; left:0; top:.7em; width:12px; height:1px; background:var(--c-acento); }
.bono .btn{ margin-top:auto; }
.bono--destacado{ border-color:var(--c-acento); background:rgba(255,255,255,.03); transform:translateY(-14px); }
.bono--destacado:hover{ transform:translateY(-20px); }
@media (max-width:900px){
  .precios{ grid-template-columns:1fr; max-width:480px; margin-inline:auto; }
  .bono--destacado{ transform:none; order:-1; }
}

/* ---------- Pasos ---------- */
.pasos{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(24px, 4vw, 56px); counter-reset:paso; }
.paso{ counter-increment:paso; padding-top:28px; border-top:1px solid var(--c-texto); }
.paso::before{ content:counter(paso, decimal-leading-zero); display:block; margin-bottom:18px; font-family:var(--f-display); font-size:2.8rem; line-height:1; color:var(--c-acento); }
.paso h3{ margin-bottom:10px; }
.paso p{ color:var(--c-texto-suave); margin:0; }
@media (max-width:800px){ .pasos{ grid-template-columns:1fr; } }

/* ---------- Contadores numéricos — js/interaccion.js ---------- */
.cifras{ display:flex; flex-wrap:wrap; gap:clamp(28px, 5vw, 64px); margin-top:40px; }
.cifra b{ display:block; font-family:var(--f-display); font-size:clamp(2.4rem, 4vw, 3.2rem); font-weight:500; line-height:1; font-variant-numeric:tabular-nums; color:var(--c-acento-2); }
.cifra span{ font-size:.85rem; color:var(--c-texto-suave); }
.bg-oscuro .cifra b{ color:var(--c-acento); }

/* ---------- Testimonios ---------- */
.testimonios{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(20px, 3vw, 32px); }
.testimonio{ margin:0; padding:clamp(24px, 3vw, 36px); background:var(--c-fondo); border-radius:var(--radio); box-shadow:var(--sombra); display:flex; flex-direction:column; gap:18px; }
.testimonio blockquote{ margin:0; font-family:var(--f-display); font-size:1.3rem; line-height:1.4; }
.testimonio figcaption{ margin-top:auto; font-size:.85rem; font-weight:600; }
.testimonio figcaption span{ display:block; font-weight:400; color:var(--c-texto-suave); }
@media (max-width:900px){ .testimonios{ grid-template-columns:1fr; } }

/* ---------- Acordeón (details/summary: funciona sin JS) ---------- */
.acordeon{ border-top:1px solid var(--c-linea); max-width:860px; }
.acordeon details{ border-bottom:1px solid var(--c-linea); }
.acordeon summary{
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  padding:24px 0; cursor:pointer; list-style:none;
  font-family:var(--f-display); font-size:1.35rem;
}
.acordeon summary::-webkit-details-marker{ display:none; }
.acordeon summary::after{
  content:""; flex-shrink:0; width:14px; height:14px;
  background:linear-gradient(currentColor 0 0) center/100% 1.5px no-repeat, linear-gradient(currentColor 0 0) center/1.5px 100% no-repeat;
  transition:transform var(--t-rapida) var(--ease);
}
.acordeon details[open] summary::after{ transform:rotate(45deg); }
.acordeon .respuesta{ padding:0 0 26px; color:var(--c-texto-suave); max-width:68ch; }

/* ---------- Sellos / marcas con las que trabaja ---------- */
.sellos{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 36px; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--c-texto-suave); }
.sellos b{ font-family:var(--f-display); font-size:1.3rem; letter-spacing:.04em; text-transform:none; color:var(--c-texto); font-weight:500; }

/* ---------- CTA final: limpio (sin marco, sin logo, sin ola: caso MN) ---------- */
.cta-final{ text-align:center; }
.cta-final h2{ max-width:18ch; margin:0 auto 20px; }
.cta-final .lead{ margin:0 auto 36px; }
.cta-final .btns{ justify-content:center; }

/* ---------- Pie ---------- */
.pie{ padding:clamp(64px, 8vw, 110px) 0 32px; font-size:.92rem; }
.pie-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
.pie h4{ margin-bottom:16px; font-family:var(--f-texto); font-size:.75rem; font-weight:600; letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--c-acento); }
.pie a{ text-decoration:none; } .pie a:hover{ text-decoration:underline; }
.pie ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.pie-logotipo{ font-family:var(--f-display); font-size:1.8rem; line-height:1.1; margin-bottom:14px; }
.pie-legal{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; margin-top:64px; padding-top:24px; border-top:1px solid var(--c-linea-oscuro); font-size:.8rem; opacity:.7; }
@media (max-width:900px){ .pie-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .pie-grid{ grid-template-columns:1fr; } }