/* Estilos de la página de inicio. Usa los tokens de tokens.css. */

.etiqueta { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); margin-bottom: var(--espacio-2); }
.etiqueta--clara { color: var(--blue-light); }
.boton--borde-claro { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.45); }
.boton--borde-claro:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.1); }

/* Hero */
.hero { background: linear-gradient(160deg, var(--navy) 0%, var(--blue-dark) 70%, var(--blue) 100%); color: var(--white); overflow: hidden; }
.hero__rejilla { display: grid; gap: var(--espacio-5); align-items: center; padding-block: var(--espacio-5) 0; }
.hero h1 { font-size: clamp(2rem, 7vw, 3.4rem); margin-bottom: var(--espacio-3); }
.resalte { color: var(--blue-bright); white-space: nowrap; }
.hero__subtitulo { font-size: var(--texto-l); font-weight: 600; margin-bottom: var(--espacio-2); }
.hero__descripcion { color: rgba(255, 255, 255, 0.82); margin-bottom: var(--espacio-4); max-width: 34rem; }
.hero__botones { display: flex; flex-wrap: wrap; gap: var(--espacio-3); margin-bottom: var(--espacio-4); }
.hero__ventajas { display: flex; flex-wrap: wrap; gap: var(--espacio-2) var(--espacio-4); font-size: var(--texto-s); font-weight: 600; }
.hero__ventajas li { display: inline-flex; align-items: center; gap: 6px; }
.hero__ventajas .icono { color: var(--whatsapp); }
.hero__personajes { display: flex; align-items: flex-end; justify-content: center; gap: var(--espacio-2); min-height: 220px; }
.personaje { height: auto; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.25)); }
.personaje--lado { width: 28%; max-width: 150px; }
.personaje--centro { width: 36%; max-width: 190px; }

/* Secciones */
.seccion--suave { background: var(--blue-pale-2); }
.seccion--oscura { background: var(--navy); color: var(--white); }
.seccion__cabecera { max-width: 44rem; margin: 0 auto var(--espacio-5); text-align: center; }
.seccion__cabecera--izq { margin-inline: 0; text-align: left; }
.seccion__cabecera h2, .negocios h2, .cierre h2 { font-size: clamp(1.6rem, 4.5vw, 2.4rem); margin-bottom: var(--espacio-3); }
.seccion__intro { color: var(--text-muted); }

/* Pasos */
.pasos { display: grid; gap: var(--espacio-4); counter-reset: paso; }
.paso { background: var(--white); border: 1px solid var(--border); border-radius: var(--radio); padding: var(--espacio-4); box-shadow: var(--sombra); }
.paso__numero { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--espacio-3); border-radius: 50%; background: var(--blue); color: var(--white); font-weight: 700; }
.paso h3 { font-size: 1.15rem; margin-bottom: var(--espacio-2); }
.paso p { color: var(--text-muted); }

/* Tarjetas */
.tarjetas { display: grid; gap: var(--espacio-4); }
.tarjeta { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--espacio-2); background: var(--white); border: 1px solid var(--border); border-radius: var(--radio); padding: var(--espacio-4); transition: transform var(--transicion), box-shadow var(--transicion); }
.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.tarjeta h3 { font-size: 1.15rem; }
.tarjeta p { color: var(--text-muted); flex: 1; }
.tarjeta--destacada { border-color: var(--blue-bright); }
.tarjeta__etiqueta { padding: 0.15rem 0.7rem; border-radius: 999px; background: var(--yellow); color: var(--navy); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }

/* Categorías */
.categorias { display: grid; gap: var(--espacio-4); }
.categoria { display: block; padding: var(--espacio-4); background: var(--white); border: 1px solid var(--border); border-radius: var(--radio); color: var(--navy); text-decoration: none; transition: border-color var(--transicion), transform var(--transicion); }
.categoria:hover { border-color: var(--blue); transform: translateY(-3px); }
.categoria h3 { font-size: 1.2rem; margin-bottom: var(--espacio-2); }
.categoria p { color: var(--text-muted); margin-bottom: var(--espacio-3); }
.categoria__ver { color: var(--blue); font-weight: 700; }

/* Por qué */
.por-que { display: grid; gap: var(--espacio-5); align-items: center; }
.por-que__personaje { display: none; justify-content: center; }
.por-que__personaje img { width: 150px; height: auto; }
.beneficios { display: grid; gap: var(--espacio-4); }
.beneficios h3 { font-size: 1.05rem; margin-bottom: 0.25rem; color: var(--blue); }
.beneficios p { color: var(--text-muted); }

/* Negocios */
.negocios { display: grid; gap: var(--espacio-4); align-items: center; }
.negocios p { color: rgba(255, 255, 255, 0.85); margin-bottom: var(--espacio-4); max-width: 38rem; }
.negocios__sello { display: none; place-items: center; width: 190px; height: 190px; margin: 0 !important; border: 3px dashed var(--yellow); border-radius: 50%; color: var(--yellow) !important; text-align: center; text-transform: uppercase; font-weight: 700; letter-spacing: 0.06em; padding: var(--espacio-3); }
.negocios__sello strong { font-size: 1.3rem; }

/* Cierre */
.cierre { background: var(--blue-pale); }
.cierre__contenido { display: grid; gap: var(--espacio-4); align-items: center; justify-items: center; text-align: center; }
.cierre__contenido img { width: 110px; height: auto; }
.cierre__contenido p { margin-bottom: var(--espacio-4); color: var(--text-muted); }
.cierre .etiqueta { color: var(--blue); }

@media (min-width: 768px) {
  .pasos { grid-template-columns: repeat(3, 1fr); }
  .tarjetas { grid-template-columns: repeat(2, 1fr); }
  .categorias { grid-template-columns: repeat(3, 1fr); }
  .beneficios { grid-template-columns: repeat(2, 1fr); }
  .por-que { grid-template-columns: 200px 1fr; }
  .por-que__personaje { display: flex; }
  .negocios { grid-template-columns: 1fr auto; }
  .negocios__sello { display: grid; }
  .cierre__contenido { grid-template-columns: auto 1fr; justify-items: start; text-align: left; }
  .cierre__contenido img { width: 140px; }
}

@media (min-width: 1024px) {
  .hero__rejilla { grid-template-columns: 1.1fr 0.9fr; padding-block-start: var(--espacio-6); }
  .hero__personajes { min-height: 420px; }
  .tarjetas { grid-template-columns: repeat(3, 1fr); }
}

/* Página de servicios */
.encabezado-pagina { background: linear-gradient(160deg, var(--navy) 0%, var(--blue-dark) 100%); color: var(--white); padding-block: var(--espacio-5); }
.encabezado-pagina h1 { font-size: clamp(2rem, 6vw, 3rem); margin-bottom: var(--espacio-3); }
.encabezado-pagina__intro { max-width: 40rem; color: rgba(255, 255, 255, 0.85); margin-bottom: var(--espacio-4); }
.saltos { display: flex; flex-wrap: wrap; gap: var(--espacio-2); }
.saltos a { padding: 0.5rem 1.1rem; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 999px; color: var(--white); font-weight: 600; font-size: var(--texto-s); text-decoration: none; }
.saltos a:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--white); }
.seccion[id], .seccion[id] { scroll-margin-top: calc(var(--alto-encabezado) + 8px); }
.tarjetas--una { max-width: 28rem; margin-inline: auto; }

/* Precio en las tarjetas del catálogo */
.precio { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.precio__monto { font-size: 1.3rem; font-weight: 700; color: var(--navy); line-height: 1.2; }
.precio__nota { font-size: var(--texto-s); color: var(--text-muted); }

.tarjeta__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-3); }
.tarjeta__detalle { font-weight: 700; font-size: var(--texto-s); color: var(--blue); }