/* =====================================================================
   OLTIXA · Guía "Cómo empezar" (/empezar). Identidad "Chakana" (.oxira/estilos/CHAKANA.md):
   blanco + ginda, números grandes, capturas del asistente en un marco, video en laguna.
   Tokens de landing.css (--ginda, --luz, --noche, --hielo…) y marca.css (--ch-*).
   ===================================================================== */

.em-hero { padding: clamp(1.2rem, 3vw, 2rem) 0 clamp(2rem, 5vw, 3.5rem); background: #fff; }
.em-hero .gx-migas { margin-bottom: 1rem; }
.em-hero__grid { display: grid; gap: 1.8rem; align-items: center; }
@media (min-width: 992px) { .em-hero__grid { grid-template-columns: 5fr 7fr; gap: 3rem; } }
.em-h1 { font-size: clamp(2.2rem, 7vw, 3.6rem); }
.em-lead { font-size: 1.2rem; color: var(--gris); font-weight: 600; margin: .8rem 0 1rem; }
.em-chips { list-style: none; padding: 0; margin: 0 0 1.4rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.em-chips li { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border-radius: 999px; background: var(--hielo); border: 1px solid var(--linea); font-weight: 700; font-size: .9rem; color: var(--tinta); }
.em-chips .bi { color: var(--ginda); }
.em-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; }
.em-link { font-weight: 800; text-decoration: none; display: inline-flex; gap: .4rem; align-items: center; }
.fx-inner main a.em-link { color: var(--ginda); }

.em-video { margin: 0; border-radius: 22px; overflow: hidden; background: var(--noche); box-shadow: 0 30px 50px -28px rgba(var(--sombra), .7), 0 0 0 1px rgba(var(--sombra), .08); }
.em-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--noche); }
.em-video figcaption { display: flex; align-items: center; gap: .5rem; padding: .65rem 1rem; color: var(--txt-noche-2); font-weight: 600; font-size: .9rem; }
.em-video figcaption .bi { color: var(--luz); }

/* Pasos */
.em-pasos { padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(3rem, 7vw, 5rem); background: #fff; }
.em-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(2.6rem, 7vw, 5rem); counter-reset: none; }
.em-paso { display: grid; gap: 1.2rem; align-items: center; scroll-margin-top: 1rem; }
@media (min-width: 992px) {
  .em-paso { grid-template-columns: 5fr 7fr; gap: 3rem; }
  .em-paso:nth-child(even) .em-paso__txt { order: 2; }
}
.em-paso__txt { position: relative; }
.em-num { display: grid; place-items: center; width: clamp(64px, 14vw, 88px); height: clamp(64px, 14vw, 88px); border-radius: 50%; margin-bottom: .8rem;
  font-family: var(--font-marca); font-weight: 700; font-size: clamp(2rem, 6vw, 2.8rem); color: #fff; line-height: 1;
  background: radial-gradient(circle at 32% 26%, #e0788a, var(--ginda) 50%, var(--ginda-d));
  box-shadow: 0 6px 0 var(--ginda-dd), 0 18px 26px -14px rgba(142, 27, 46, .8), inset 0 -6px 10px rgba(0, 0, 0, .2), inset 0 5px 9px rgba(255, 255, 255, .4); }
.em-paso__tit { font-family: var(--font-marca); font-weight: 700; font-size: clamp(1.6rem, 4.6vw, 2.3rem); letter-spacing: -.015em; margin: 0 0 .35rem; line-height: 1.05; }
.em-paso__sub { color: var(--gris); font-weight: 600; font-size: 1.1rem; margin: 0 0 .9rem; }
.em-ok { display: flex; gap: .5rem; align-items: center; font-weight: 700; margin: .8rem 0 0; }
.em-ok .bi { color: var(--jade-d); font-size: 1.3rem; }
.em-ruta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.em-ruta span { background: var(--noche-2); color: #fff; font-weight: 800; padding: .35rem .7rem; border-radius: 10px; font-size: .95rem; }
.em-ruta .bi { color: var(--luz); }

.em-shot { margin: 0; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--linea); box-shadow: 0 30px 46px -32px rgba(var(--sombra), .55); }
.em-shot__bar { display: flex; align-items: center; gap: .35rem; padding: .5rem .8rem; background: var(--hielo); border-bottom: 1px solid var(--linea); }
.em-shot__bar span { width: 10px; height: 10px; border-radius: 50%; background: #cbd3d0; }
.em-shot__bar span:first-child { background: var(--ch-error-led); } .em-shot__bar span:nth-child(2) { background: var(--oxido-l); } .em-shot__bar span:nth-child(3) { background: var(--verde); }
.em-shot__bar b { margin-left: .5rem; font-weight: 600; font-size: .78rem; color: var(--gris); font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.em-shot img { display: block; width: 100%; height: auto; }

/* "?" desplegable dentro de la guía */
.em-q { margin-top: .8rem; border: 1px solid var(--linea); border-radius: 14px; background: #fff; }
.em-q > summary { cursor: pointer; list-style: none; padding: .65rem .9rem; font-weight: 800; color: var(--ginda); display: flex; align-items: center; gap: .5rem; }
.em-q > summary::-webkit-details-marker { display: none; }
.em-q > summary::before { content: "?"; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--hielo); border: 2px solid var(--hielo-2); font-size: .8rem; flex: 0 0 24px; }
.em-q[open] > summary::before { background: var(--ginda); color: #fff; border-color: var(--ginda); }
.em-q > div { padding: 0 .9rem .8rem; color: var(--tinta-2); }
.em-q ul { margin: 0; padding-left: 1.1rem; }
.em-q li + li { margin-top: .35rem; }
.em-body code, .em-q code, .em-cmd code { font-family: var(--mono); font-size: .85rem; background: var(--hielo); color: var(--ginda-d); padding: .1rem .35rem; border-radius: 6px; white-space: normal; overflow-wrap: anywhere; }

/* Paso 5: datos de la OLT */
.em-paso--datos { align-items: start; }
.em-datos { display: grid; gap: 1rem; }
@media (min-width: 768px) { .em-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .em-datos { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.em-dato { background: #fff; border: 1px solid var(--linea); border-radius: 18px; padding: 1.1rem 1.1rem 1rem; box-shadow: 0 18px 30px -26px rgba(var(--sombra), .45); scroll-margin-top: 1rem; }
.em-dato:target { border-color: var(--ginda); box-shadow: 0 0 0 3px var(--luz-l); }
.em-dato h3 { font-family: var(--font-marca); font-weight: 700; font-size: 1.15rem; margin: 0 0 .4rem; display: flex; align-items: center; gap: .5rem; }
.em-dato h3 small { font-weight: 700; color: var(--gris); font-size: .8rem; }
.em-dato h3 .bi { color: var(--ginda); }
.em-dato p { margin: 0 0 .4rem; color: var(--tinta-2); }
.em-aviso { display: flex; gap: .45rem; align-items: flex-start; font-size: .9rem; font-weight: 600; background: var(--ch-oxido-t); border: 1px solid #f2c7b2; border-radius: 12px; padding: .55rem .7rem; margin-top: .7rem !important; }
.em-aviso .bi { color: var(--oxido); }
.em-cmd { padding: .45rem 0; border-top: 1px dashed var(--linea); display: grid; gap: .25rem; }
.em-cmd:first-child { border-top: 0; }
.em-cmd small { color: var(--gris); }

/* Preguntas */
.em-preguntas { background: var(--hielo); padding: clamp(2.5rem, 6vw, 4rem) 0; }
.em-h2 { font-size: clamp(1.9rem, 5vw, 2.6rem); margin-bottom: 1.2rem; text-align: center; }
.em-faq { max-width: 760px; margin: 0 auto; display: grid; gap: .7rem; }
.em-faq details { background: #fff; border: 1px solid var(--linea); border-radius: 16px; }
.em-faq summary { cursor: pointer; list-style: none; padding: .95rem 1.1rem; font-weight: 700; font-size: 1.05rem; display: flex; justify-content: space-between; gap: 1rem; }
.em-faq summary::-webkit-details-marker { display: none; }
.em-faq summary::after { content: "+"; font-weight: 900; color: var(--ginda); font-size: 1.3rem; line-height: 1; }
.em-faq details[open] summary::after { content: "–"; }
.em-faq p { padding: 0 1.1rem 1rem; margin: 0; color: var(--tinta-2); }

/* Cierre ginda */
.em-cierre { background: linear-gradient(180deg, var(--ginda-l), var(--ginda) 60%); padding: clamp(2.4rem, 6vw, 3.6rem) 0; }
.em-cierre__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem; }

@media (max-width: 575.98px) {
  .em-cta .fx-btn { width: 100%; }
  .em-cierre .em-cta { width: 100%; }
}

/* Celular: el video va justo después del título (arriba, sin bajar). */
@media (max-width: 991.98px) {
  .em-hero__grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .em-hero__txt { display: contents; }
  .em-hero__txt > * { order: 1; }
  .em-hero__txt > .em-chips, .em-hero__txt > .em-cta { order: 3; }
  .em-video { order: 2; margin: 0 0 1.3rem; }
  .em-hero .fx-kicker { align-self: flex-start; }
}