/* Secciones del sitio, en el mismo orden que la página (ver $secciones en index.php). */

/* ---------- Estructura común ---------- */
.seccion{padding-block:var(--seccion);border-top:1px solid var(--borde)}
.seccion h2{font-size:clamp(2rem,4.2vw,3.25rem);margin-top:clamp(28px,4vw,48px)}
.bajada{font-size:1.0625rem;color:var(--suave);max-width:46ch}

/* ---------- Inicio ---------- */
.inicio{position:relative;overflow:hidden;padding-block:clamp(72px,9vw,120px) clamp(40px,5vw,64px);
  background:radial-gradient(55% 75% at 52% 108%,rgba(9,105,118,.42),transparent 70%),var(--fondo)}
.inicio h1{font-size:clamp(2.6rem,6.2vw,5.25rem);margin-top:clamp(32px,5vw,56px)}
.inicio h1 span{display:block;color:var(--turquesa)}
.inicio .bajada{font-size:clamp(1.0625rem,1.4vw,1.1875rem);margin-top:clamp(28px,4vw,48px);max-width:44ch}
.inicio .boton{margin-top:36px}
.beneficios{display:flex;flex-wrap:wrap;gap:14px 36px;margin-top:clamp(40px,5vw,48px);padding-top:clamp(32px,4vw,44px);border-top:1px solid var(--borde);color:var(--texto);font-size:.9375rem}
.beneficios li{display:flex;align-items:center;gap:10px}
.beneficios svg{width:16px;height:16px;color:var(--turquesa)}

/* ---------- 01 Soluciones ---------- */
.encabezado-doble{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:24px 48px;align-items:end}
.soluciones .bajada{padding-bottom:6px}
.tarjetas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(40px,5vw,52px)}
.tarjeta{background:var(--superficie);border:1px solid var(--borde);border-radius:8px;padding:28px 28px 30px}
.tarjeta svg{width:24px;height:24px;color:var(--turquesa)}
.tarjeta h3{font-size:1.5rem;margin-top:26px}
.tarjeta p{margin-top:18px;font-size:.9375rem;line-height:1.55}

/* ---------- 02 En acción ---------- */
.en-accion .grilla{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,64px);align-items:center;margin-top:clamp(28px,4vw,48px)}
.en-accion h2{margin-top:0}
.en-accion .bajada{margin-top:28px}
.en-accion .grilla .etiqueta{display:block;margin-top:28px;font-size:.75rem}
.pasos-venta{background:var(--superficie);border:1px solid var(--borde);border-radius:8px;padding:clamp(16px,2.5vw,24px) clamp(20px,2.5vw,32px)}
.pasos-venta li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:20px;align-items:start;padding-block:24px}
.pasos-venta li+li{border-top:1px solid var(--borde)}
.numero{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--insignia);color:var(--turquesa);font-size:.75rem;font-weight:500}
.pasos-venta h3{font-size:1.5rem}
.pasos-venta p{margin-top:6px;font-size:.875rem}
.herramientas{display:flex;flex-wrap:wrap;gap:16px 36px;margin-top:clamp(40px,5vw,72px);font-size:.9375rem}
.herramientas li{display:flex;align-items:center;gap:10px}
.herramientas i{width:20px;height:20px;flex:none;background:currentColor;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

/* ---------- 03 Cómo trabajamos ---------- */
.camino{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:clamp(40px,5vw,52px)}
.camino li{border-top:1px solid var(--borde);padding-top:24px}
.camino .num{font-size:.8125rem;font-weight:500;color:var(--turquesa)}
.camino h3{font-size:1.5rem;margin-top:24px}
.camino p{margin-top:22px;font-size:.875rem;max-width:30ch}

/* ---------- 04 Software a medida ---------- */
.software .grilla{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,64px);align-items:start}
.software .bajada{margin-top:28px}
.software .boton{margin-top:36px}
.desarrollos{margin-top:clamp(28px,4vw,48px)}
.desarrollos li{padding-block:26px;border-bottom:1px solid var(--borde)}
.desarrollos li:first-child{padding-top:0}
.desarrollos h3{font-size:1.5rem}
.desarrollos p{margin-top:8px;font-size:.875rem}
.propios{margin-top:32px;padding:18px 20px;border:1px dashed var(--tenue);border-radius:8px;font-size:.875rem}
.propios .aviso{color:var(--tenue);font-weight:500}
.propios ul{display:grid;gap:10px;margin-top:10px}
.propios b{display:block;color:var(--texto);font-weight:500}

/* ---------- Contacto ---------- */
.contacto{background:var(--superficie)}
.contacto h2{max-width:none}
.contacto .bajada{margin-top:clamp(28px,4vw,48px)}
.contacto-grilla{display:grid;grid-template-columns:minmax(0,720px) minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:start;margin-top:clamp(32px,4vw,48px)}
.contacto-otros{display:grid;justify-items:start;gap:14px;padding-top:8px}
.contacto-otros h3{font-size:1.375rem}
.contacto-otros p{font-size:.9375rem;max-width:30ch}
.contacto-otros .boton{margin-top:6px}
.contacto .secundario{color:var(--texto);font-size:.9375rem;text-underline-offset:4px}
.contacto .publico{margin-top:clamp(40px,5vw,56px);font-size:.875rem}

/* ---------- Pantallas chicas ---------- */
@media (max-width:900px){
  .encabezado-doble,.en-accion .grilla,.software .grilla,.contacto-grilla{grid-template-columns:minmax(0,1fr)}
  .tarjetas{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .camino{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 24px}
}
@media (max-width:600px){
  .tarjetas,.camino{grid-template-columns:minmax(0,1fr)}
  .beneficios{flex-direction:column}
  .pasos-venta h3,.tarjeta h3,.camino h3,.desarrollos h3{font-size:1.375rem}
}