/* ==========================================================================
   3 - PIEZAS REPETIDAS  ·  botones, etiquetas, títulos, tarjetas, chips
   ========================================================================== */

/* -------- ETIQUETA (eyebrow) -------- */
.etiqueta{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--AZUL);margin-bottom:16px;
}
.etiqueta::before{content:"";width:22px;height:2px;background:var(--AZUL);border-radius:2px}

/* -------- TÍTULOS -------- */
.titulo-hero{font-size:var(--TITULO-HERO)}
.titulo{font-size:var(--TITULO-SECCION)}
.titulo em,.titulo-hero em{font-style:normal;color:var(--AZUL)}
.subtitulo{font-size:18px;color:var(--TEXTO-SUAVE);max-width:620px;margin-top:18px}

/* -------- BOTONES -------- */
.boton{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 24px;border-radius:var(--REDONDEO-BOTON);
  font-family:var(--LETRA-TEXTO);font-size:15px;font-weight:600;cursor:pointer;
  border:1px solid transparent;transition:var(--SUAVE);
}
.boton.oscuro{background:var(--TEXTO);color:var(--FONDO)}
.boton.oscuro:hover{transform:translateY(-2px);box-shadow:var(--SOMBRA)}
.boton.azul{background:var(--AZUL);color:#fff}
.boton.azul:hover{background:var(--AZUL-OSCURO);transform:translateY(-2px);box-shadow:0 10px 30px rgba(31,154,214,.35)}
.boton.linea{background:transparent;color:var(--TEXTO);border-color:var(--BORDE-FUERTE)}
.boton.linea:hover{border-color:var(--AZUL);color:var(--AZUL)}
.boton .flecha{transition:transform var(--SUAVE))}
.boton:hover .flecha{transform:translateX(3px)}

/* -------- TARJETA -------- */
.tarjeta{
  background:var(--TARJETA);border:1px solid var(--BORDE);
  border-radius:var(--REDONDEO-TARJETA);padding:26px;
  transition:var(--SUAVE);
}
.tarjeta.animada:hover{transform:translateY(-6px);border-color:var(--AZUL);box-shadow:var(--SOMBRA)}
.tarjeta .icono{
  width:52px;height:52px;border-radius:var(--REDONDEO-CAJA);
  display:grid;place-items:center;font-size:24px;
  background:var(--AZUL-SUAVE);color:var(--AZUL);margin-bottom:16px;
}
.tarjeta h3{font-size:20px;margin-bottom:8px}
.tarjeta p{font-size:15px;color:var(--TEXTO-SUAVE)}

/* -------- CHECK (palomita) -------- */
.check{display:inline-flex;align-items:center;gap:10px;font-size:15px;color:var(--TEXTO-SUAVE)}
.check .bola{width:20px;height:20px;border-radius:50%;background:var(--AZUL);flex:none;display:grid;place-items:center}
.check .bola svg{width:11px;height:11px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* -------- PÍLDORA -------- */
.pildora{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:100px;font-size:13px;font-weight:600;background:var(--AZUL-SUAVE);color:var(--AZUL)}

/* -------- MOCKUP / VENTANA (marco de app para demos) -------- */
.ventana{background:var(--NEGRO);border-radius:var(--REDONDEO-TARJETA);overflow:hidden;box-shadow:var(--SOMBRA-FUERTE);border:1px solid #1e2831}
.ventana-barra{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid #1e2831}
.ventana-barra i{width:11px;height:11px;border-radius:50%;background:#33404c;display:block}
.ventana-barra i:nth-child(1){background:#ff5f57}
.ventana-barra i:nth-child(2){background:#febc2e}
.ventana-barra i:nth-child(3){background:#28c840}
.ventana-barra span{margin-left:10px;font-size:12px;color:#8a99a6}

/* -------- BARRAS ANIMADAS (data-ancho) -------- */
.barra{height:9px;border-radius:100px;background:rgba(255,255,255,.09);overflow:hidden}
.barra-relleno{height:100%;width:0;border-radius:100px;background:var(--AZUL);transition:width 1.4s cubic-bezier(.2,.8,.2,1)}

/* -------- BANNER DE CIERRE -------- */
.banner{background:var(--NEGRO);border-radius:26px;padding:56px 6%;text-align:center;color:#fff;position:relative;overflow:hidden}
.banner h2{font-size:var(--TITULO-BANNER);color:#fff;margin-bottom:14px}
.banner p{color:#9fb0bd;max-width:560px;margin:0 auto 26px}
.banner .grupo-botones{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}