/* ===== Estilos de las secciones (se añaden fase a fase) ===== */

/* Estructura común */
.section { padding: 88px 0; }
.section-marfil { background: var(--marfil); }
.section-gris { background: var(--gris-azulado); }
.section-blanco { background: var(--blanco); }
.stack { display: flex; flex-direction: column; gap: 40px; }
.section-head { display: flex; flex-direction: column; gap: 12px; }
.section-head-wide { max-width: 720px; }
.section-head h2 { margin: 0; font-size: clamp(28px, 3.6vw, 40px); }
.section-lead { margin: 0; font-size: 17px; color: var(--pizarra); }
.stack > p { margin: 0; }

/* Botón oscuro */
.btn-dark { background: var(--azul-noche); color: var(--blanco); }
.btn-dark:hover { color: var(--blanco); background: var(--azul-profundo); }

/* Tarjetas */
.cards { display: flex; flex-wrap: wrap; gap: 20px; }
.card { flex: 1 1 240px; min-width: 0; background: var(--blanco); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.section-marfil .card { border: 1px solid var(--borde); }
.card h3 { margin: 0; font-size: 22px; }
.card p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--pizarra); }
.icon { width: 44px; height: 44px; border-radius: 10px; background: var(--gris-azulado); color: var(--turquesa-oscuro); display: flex; align-items: center; justify-content: center; }

/* Etiquetas */
.tag { margin-top: auto; align-self: flex-start; font-weight: 600; font-size: 12px; letter-spacing: 0.06em; background: var(--gris-azulado); color: var(--azul-profundo); padding: 6px 10px; border-radius: 6px; }
.tag-arena { background: var(--arena); color: var(--azul-noche); }

/* Ejemplos de automatización */
.card-auto { flex-basis: 250px; gap: 14px; }
.card-auto dl { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.card-auto dt { font-weight: 600; font-size: 14px; color: var(--grafito); margin-top: 6px; }
.card-auto dd { margin: 0; font-size: 15px; line-height: 1.55; color: var(--pizarra); }
.chips { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { font-size: 12px; background: var(--marfil); color: var(--azul-profundo); padding: 5px 9px; border-radius: 6px; }