/* Seben Group · estilo 2 (septiembre 2026): claro, redondeado y cercano */
:root {
  --texto: #202124;
  --texto-2: #5f6368;
  --texto-3: #80868b;
  --borde: #dadce0;
  --fondo: #ffffff;
  --fondo-2: #f8f9fa;

  --azul: #1f5fbf;
  --azul-hover: #1a4f9e;
  --azul-suave: #e8f0fe;
  --verde: #188038;
  --verde-hover: #13692e;
  --verde-suave: #e6f4ea;
  --amarillo: #b06000;
  --amarillo-suave: #fef7e0;
  --coral: #c5221f;
  --coral-suave: #fce8e6;
  --morado: #7b4bb3;
  --morado-suave: #f3e8fd;

  --radio: 20px;
  --radio-chico: 12px;
  --sombra: 0 1px 2px rgba(60,64,67,.12), 0 2px 6px rgba(60,64,67,.08);
  --sombra-alta: 0 4px 12px rgba(60,64,67,.12), 0 10px 30px rgba(60,64,67,.10);
  --ancho: 1140px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Figtree", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--texto);
  background: var(--fondo);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
img { max-width: 100%; display: block; }
a { color: var(--azul); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 12px; color: var(--texto); font-weight: 700; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); letter-spacing: -.015em; }
h3 { font-size: 1.2rem; font-weight: 650; }
p { margin: 0 0 14px; }

.envoltura { max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }

.icono {
  font-family: "Material Symbols Rounded";
  font-weight: normal; font-style: normal; line-height: 1;
  letter-spacing: normal; text-transform: none; white-space: nowrap;
  font-feature-settings: "liga"; -webkit-font-feature-settings: "liga";
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  display: inline-block; font-size: 24px; vertical-align: middle;
}

/* ---------- Encabezado ---------- */
.cabecera { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--borde); }
.cabecera .envoltura { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 12px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--texto); }
.marca .logo { width: 36px; height: 36px; border-radius: 10px; background: var(--azul); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.15rem; position: relative; flex: none; }
.marca .logo::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%; background: #f9ab00; border: 2px solid #fff; }
.marca b { font-size: 1.12rem; font-weight: 700; letter-spacing: -.01em; display: block; line-height: 1.15; }
.marca small { display: block; font-size: .74rem; color: var(--texto-3); font-weight: 500; line-height: 1.2; }
.menu { display: flex; align-items: center; gap: 6px; }
.menu a:not(.boton) { text-decoration: none; color: var(--texto-2); font-size: .95rem; font-weight: 500; padding: 8px 14px; border-radius: 100px; }
.menu a:not(.boton):hover { background: var(--fondo-2); color: var(--texto); }
.menu .solo-ancho { display: none; }
@media (min-width: 820px) { .menu .solo-ancho { display: inline-block; } }

/* ---------- Botones ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: 100px; font-weight: 600; font-size: 1rem; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background .15s, box-shadow .15s; font-family: inherit; }
.boton .icono { font-size: 20px; }
.boton svg { width: 20px; height: 20px; flex: none; }
.boton-verde { background: var(--verde); color: #fff; }
.boton-verde:hover { background: var(--verde-hover); box-shadow: var(--sombra); }
.boton-azul { background: var(--azul); color: #fff; }
.boton-azul:hover { background: var(--azul-hover); box-shadow: var(--sombra); }
.boton-contorno { background: #fff; color: var(--azul); border-color: var(--borde); }
.boton-contorno:hover { background: var(--azul-suave); border-color: var(--azul-suave); }
.boton-chico { padding: 8px 18px; font-size: .92rem; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------- Aviso ---------- */
.aviso { padding: 16px 0 0; }
.aviso .chip-aviso { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; background: var(--amarillo-suave); color: #5f3a00; border-radius: var(--radio-chico); padding: 12px 18px; font-size: .95rem; }
.aviso .icono { color: var(--amarillo); }
.aviso b { font-weight: 700; }
.aviso a { color: #5f3a00; font-weight: 700; }

/* ---------- Portada ---------- */
.portada { padding: 48px 0 64px; }
.portada .envoltura { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .portada .envoltura { grid-template-columns: 1.15fr 1fr; } }
.portada .bajada { font-size: clamp(1.08rem, 2vw, 1.25rem); color: var(--texto-2); max-width: 620px; }
.saludo { display: inline-flex; align-items: center; gap: 8px; background: var(--azul-suave); color: var(--azul); font-weight: 600; font-size: .92rem; padding: 6px 14px; border-radius: 100px; margin-bottom: 18px; }
.saludo .icono { font-size: 18px; }

.escena { position: relative; min-height: 360px; }
.escena .burbuja { position: absolute; border-radius: 50%; }
.escena .b1 { width: 260px; height: 260px; background: var(--azul-suave); top: 0; right: 10%; }
.escena .b2 { width: 170px; height: 170px; background: var(--amarillo-suave); bottom: 10px; left: 4%; }
.escena .b3 { width: 110px; height: 110px; background: var(--verde-suave); bottom: 60px; right: 0; }
.mini { position: absolute; background: #fff; border-radius: 16px; box-shadow: var(--sombra-alta); padding: 14px 18px; min-width: 220px; }
.mini small { display: block; color: var(--texto-3); font-size: .8rem; font-weight: 500; }
.mini b { display: block; font-size: 1.35rem; letter-spacing: -.01em; line-height: 1.25; }
.mini .fila { display: flex; align-items: center; gap: 12px; }
.mini .punto { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
.mini .punto .icono { font-size: 20px; }
.m1 { top: 26px; left: 4%; }
.m2 { top: 148px; right: 0; }
.m3 { bottom: 14px; left: 14%; }
@media (max-width: 899px) { .escena { min-height: 320px; max-width: 440px; margin: 0 auto; width: 100%; } .m3 { left: 4%; } }

/* ---------- Secciones ---------- */
.seccion { padding: 72px 0; }
.seccion-gris { background: var(--fondo-2); }
.encabezado { max-width: 700px; margin-bottom: 36px; }
.encabezado p { color: var(--texto-2); font-size: 1.08rem; margin: 0; }

.rejilla { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 680px) { .rejilla-2, .rejilla-3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .rejilla-3 { grid-template-columns: 1fr 1fr 1fr; } }

.tarjeta { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 26px; transition: box-shadow .2s, border-color .2s; }
.tarjeta:hover { box-shadow: var(--sombra); border-color: transparent; }
.tarjeta h3 { margin-bottom: 6px; }
.tarjeta > p { color: var(--texto-2); margin-bottom: 0; }

.circulo { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.circulo .icono { font-size: 26px; }
.c-azul { background: var(--azul-suave); color: var(--azul); }
.c-verde { background: var(--verde-suave); color: var(--verde); }
.c-amarillo { background: var(--amarillo-suave); color: var(--amarillo); }
.c-coral { background: var(--coral-suave); color: var(--coral); }
.c-morado { background: var(--morado-suave); color: var(--morado); }

.lista { list-style: none; padding: 0; margin: 16px 0 0; }
.lista li { position: relative; padding-left: 30px; margin-bottom: 9px; color: var(--texto-2); font-size: .98rem; }
.lista li::before { content: "check"; font-family: "Material Symbols Rounded"; position: absolute; left: 0; top: 0; font-size: 20px; color: var(--verde); line-height: 1.35; font-feature-settings: "liga"; }

.franja { margin-top: 20px; background: var(--azul-suave); border-radius: var(--radio); padding: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.franja .circulo { background: #fff; margin: 0; flex: none; }
.franja .texto { flex: 1 1 420px; }
.franja h3 { margin-bottom: 4px; }
.franja p { margin: 0; color: #334a6b; }

/* ---------- Pasos ---------- */
.pasos { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .pasos { grid-template-columns: repeat(3, 1fr); } }
.paso { background: #fff; border-radius: var(--radio); padding: 26px; border: 1px solid var(--borde); }
.paso .etapa { display: block; font-size: .88rem; font-weight: 600; color: var(--texto-3); margin-bottom: 2px; }
.paso p { color: var(--texto-2); margin: 0; }

/* ---------- Persona ---------- */
.persona { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: center; background: #fff; border: 1px solid var(--borde); border-radius: 28px; padding: 32px; }
@media (min-width: 820px) { .persona { grid-template-columns: 180px 1fr; padding: 40px 44px; } }
.avatar { width: 150px; height: 150px; border-radius: 50%; background: linear-gradient(135deg, var(--azul-suave), var(--amarillo-suave)); display: flex; align-items: center; justify-content: center; font-size: 2.8rem; font-weight: 700; color: var(--azul); margin: 0 auto; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.persona blockquote { margin: 0; font-size: clamp(1.1rem, 2.2vw, 1.32rem); line-height: 1.5; color: var(--texto); }
.persona .firma { margin-top: 14px; color: var(--texto-2); font-size: .98rem; }
.persona .firma b { color: var(--texto); }

.valores { display: grid; gap: 18px; grid-template-columns: 1fr; margin-top: 28px; }
@media (min-width: 680px) { .valores { grid-template-columns: 1fr 1fr; } }
.valor { display: flex; gap: 14px; align-items: flex-start; }
.valor .circulo { margin: 0; width: 42px; height: 42px; flex: none; }
.valor .circulo .icono { font-size: 22px; }
.valor p { margin: 0; color: var(--texto-2); }
.valor b { color: var(--texto); display: block; }

/* ---------- Curso ---------- */
.curso-caja { background: var(--fondo-2); border-radius: 28px; padding: 32px; display: grid; gap: 28px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 880px) { .curso-caja { grid-template-columns: 1.25fr 1fr; padding: 48px; } }
.curso-caja p { color: var(--texto-2); }
.curso-caja img { border-radius: var(--radio); box-shadow: var(--sombra-alta); }
.temario { background: #fff; border-radius: var(--radio); box-shadow: var(--sombra-alta); padding: 26px; }
.temario-t { font-weight: 700; font-size: 1.15rem; margin-bottom: 14px; }
.tema { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #eef0f2; color: var(--texto); font-weight: 500; }
.tema .punto { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
.tema .punto .icono { font-size: 20px; }
.temario-pie { margin: 14px 0 0; display: flex; align-items: center; gap: 8px; color: var(--azul); font-weight: 600; }
.temario-pie .icono { font-size: 20px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 600; padding: 5px 12px; border-radius: 100px; margin-bottom: 14px; }
.chip .icono { font-size: 18px; }

.datos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.dato { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--borde); border-radius: 100px; padding: 8px 16px 8px 12px; font-size: .95rem; }
.dato .icono { color: var(--azul); font-size: 21px; }
.dato b { font-weight: 650; }

.preguntas { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .preguntas { grid-template-columns: 1fr 1fr; } }
.pregunta { background: #fff; border-radius: 20px 20px 20px 6px; padding: 18px 22px; box-shadow: var(--sombra); font-size: clamp(1.08rem, 2.2vw, 1.22rem); font-weight: 650; margin: 0; }
.pregunta span { display: block; font-size: .95rem; font-weight: 400; color: var(--texto-2); margin-top: 2px; }

.nota { font-size: .88rem; color: var(--texto-3); max-width: 780px; }

/* ---------- Contacto ---------- */
.contacto .tarjeta a { font-weight: 600; text-decoration: none; word-break: break-word; font-size: 1.05rem; }

/* ---------- Pie ---------- */
.pie { border-top: 1px solid var(--borde); padding: 36px 0 90px; font-size: .93rem; color: var(--texto-2); }
.pie .envoltura { display: flex; flex-wrap: wrap; gap: 18px 48px; justify-content: space-between; align-items: flex-start; }
.pie a { color: var(--texto-2); }

/* ---------- WhatsApp flotante ---------- */
.flotante { position: fixed; right: 18px; bottom: 18px; z-index: 30; display: inline-flex; align-items: center; gap: 8px; background: var(--verde); color: #fff; text-decoration: none; font-weight: 600; padding: 14px; border-radius: 100px; box-shadow: var(--sombra-alta); }
.flotante svg { width: 26px; height: 26px; }
.flotante span { display: none; padding-right: 6px; }
@media (min-width: 700px) { .flotante span { display: inline; } .flotante { padding: 12px 18px 12px 14px; } }

:focus-visible { outline: 3px solid #f9ab00; outline-offset: 2px; }