/* Guías para extranjeros (directory/templates/directory/expat_guide.html).

   La página se pinta con el formato EDITORIAL de las landings de especialidad+ciudad: page-landing.css y
   page-landing-editorial.css, con sus clases tal cual (lp-ed-head, lp-ed-guide, lp-ed-firms, lp-ed-more,
   lp-ed-cta, lp-ed-links). Aquí SOLO lo que el artículo de una guía tiene y el de la landing no: listas sueltas,
   pasos numerados, el destacado de errores, la columna de cifras y la regla de un solo botón rojo por pantalla.
   Mismos tokens (--lt-*, --lp-ed-*), mismo breakpoint (768 px), sin sombras ni `!important`. */

/* --- Cabecera --- */
.xg-ed .xg-ed__idioma { font-size: var(--lt-fs-sm); color: var(--lt-text-muted); }
.xg-ed .lp-ed-head .lt-breadcrumbs { overflow-wrap: anywhere; }

/* --- El artículo sigue tras los despachos: misma columna, sin cabecera ni lateral --- */
.xg-ed .xg-ed__guia-sigue { padding-top: 8px; }
.xg-ed .xg-ed__guia-sigue .lp-ed-guide__section:first-child { padding-top: 22px; }

/* --- Listas del artículo: rombo de marca (el adorno de sección del sistema) --- */
.xg-ed ul.xg-ed__lista, .xg-ed ul.xg-ed__avisos, .xg-ed ol.xg-ed__pasos {
  display: block; margin: 0 0 14px; padding: 0; list-style: none; max-width: 66ch;
}
.xg-ed .xg-ed__lista > li {
  position: relative; margin: 0 0 10px; padding-left: 24px;
  font-size: 17px; line-height: 1.7; color: var(--lt-text-2);
}
.xg-ed .xg-ed__lista > li::before {
  content: ""; position: absolute; left: 3px; top: .72em; width: 7px; height: 7px; border-radius: 2px;
  background: var(--lt-primary); transform: rotate(45deg);
}
.xg-ed .xg-ed__lista strong, .xg-ed .xg-ed__pasos strong, .xg-ed .xg-ed__avisos strong { color: var(--lt-ink); font-weight: 600; }
/* Requisitos: la marca de LLÁMALO SI (verde de la landing), no el rombo. */
.xg-ed .xg-ed__lista--check > li::before {
  top: .5em; left: 2px; width: 7px; height: 12px; border-radius: 0; background: none;
  border: solid var(--lp-ed-yes); border-width: 0 2px 2px 0; transform: rotate(40deg);
}
/* Documentos: rombo en tinta, para no confundirlos con requisitos. */
.xg-ed .xg-ed__lista--doc > li::before { background: var(--lt-ink); }

/* --- Pasos: número en la serif y en el rojo de marca, como el numeral de apartado --- */
.xg-ed .xg-ed__pasos { counter-reset: xg-ed-paso; }
.xg-ed .xg-ed__pasos > li {
  position: relative; counter-increment: xg-ed-paso; margin: 0 0 14px; padding-left: 40px;
  font-size: 17px; line-height: 1.7; color: var(--lt-text-2);
}
.xg-ed .xg-ed__pasos > li::before {
  content: counter(xg-ed-paso); position: absolute; left: 0; top: -2px;
  font-family: var(--lp-ed-serif); font-size: 28px; line-height: 1; color: var(--lt-primary);
}

/* --- Errores frecuentes: el filete de LLÁMALO SI / DESTACA EN sobre el panel cálido --- */
.xg-ed .xg-ed__avisos {
  max-width: none; padding: 6px 20px; border: 1px solid var(--lt-border); border-radius: 14px; background: var(--lp-ed-panel);
}
.xg-ed .xg-ed__avisos > li {
  margin: 12px 0; padding-left: var(--lt-s-6); border-left: 2px solid var(--lt-primary);
  font-size: 15.5px; line-height: 1.6; color: var(--lt-text-2);
}

/* --- La tabla del artículo con cifras: la cifra en la serif, columna más ancha --- */
.xg-ed .xg-ed__cifras .lp-ed-guide__list-row { grid-template-columns: 150px minmax(0, 1fr); }
.xg-ed .xg-ed__cifra {
  font-family: var(--lp-ed-serif); font-size: 24px; font-weight: 400; line-height: 1.1; letter-spacing: 0;
  color: var(--lt-ink); padding-top: 0; overflow-wrap: anywhere;
}
.xg-ed .xg-ed__cifra-texto { font-weight: 500; font-size: 15.5px; line-height: 1.55; color: var(--lt-text-2); }
/* Casos: la respuesta enlaza al apartado que la cuenta. */
.xg-ed .xg-ed__respuesta { font-size: 15px; font-weight: 600; color: var(--lt-ink); }
.xg-ed .xg-ed__respuesta a { color: var(--lt-primary); }
.xg-ed .xg-ed__respuesta a:hover { color: var(--lt-primary-hover); }

/* --- Despachos --- */
.xg-ed .lp-ed-firms__note { max-width: 62ch; }
.xg-ed .xg-ed__recuento { margin-top: 0; font-size: var(--lt-fs-sm); color: var(--lt-text-muted); }

/* UN SOLO BOTÓN ROJO POR PANTALLA: el rojo es el de la banda «Cuándo te conviene un abogado» (y, en el móvil, la
   barra fija, que se retira cuando asoma el botón propio). Los «Contactar» de cada despacho van en contorno, con el
   borde del botón «Consultar» del sistema (--lt-primary-border), y el «Analizar caso» de la cabecera también. */
.xg-ed button.xg-ed__contorno, .xg-ed .xg-ed__contorno {
  background: var(--lt-surface); color: var(--lt-primary); border: 1px solid var(--lt-primary-border);
}
.xg-ed button.xg-ed__contorno:hover, .xg-ed .xg-ed__contorno:hover {
  background: var(--lt-surface); color: var(--lt-primary-hover); border-color: var(--lt-primary);
}
body:has(.xg-ed) a.lt-btn--primary.lt-header__cta, body:has(.xg-ed) a.lt-btn--primary.lt-header__cta:hover {
  background: transparent; color: var(--lt-primary); border-color: var(--lt-primary);
  box-shadow: inset 0 0 0 1.5px var(--lt-primary);
}

/* --- Fuentes: título largo y organismo/fecha debajo --- */
.xg-ed .xg-ed__fuentes { padding-top: 0; }
.xg-ed .xg-ed__fuentes .lp-ed-links__item { flex-direction: column; align-items: flex-start; gap: 4px; }
.xg-ed .xg-ed__fuentes .lp-ed-links__item a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--lt-border); }
.xg-ed .xg-ed__fuentes .lp-ed-links__item-n { flex: none; }

@media (max-width: 768px) {
  /* Migas: el título de la guía ya es el H1; en el móvil no se repite en tres líneas. */
  .xg-ed .lp-ed-head .lt-breadcrumbs__current,
  .xg-ed .lp-ed-head .lt-breadcrumbs span[aria-hidden="true"]:has(+ .lt-breadcrumbs__current) { display: none; }
  .xg-ed .xg-ed__lista > li, .xg-ed .xg-ed__pasos > li { font-size: 16px; }
  .xg-ed .xg-ed__cifras .lp-ed-guide__list-row { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .xg-ed .xg-ed__avisos { padding: 4px 14px; }
}