/* ============================================================================
   Guías de migración — Intersection Legal (6-oct-2026)
   Las genera Website/build_guias_migracion.py. Solo tokens de styles.css.
   ========================================================================== */

.guia-crumbs { font-size: .82rem; color: rgba(255,255,255,.7); margin: 0 0 14px; }
.guia-crumbs a { color: rgba(255,255,255,.85); text-decoration: none; }
.guia-crumbs a:hover { color: var(--accent-on-dark); }
.guia-meta { font-size: .85rem; color: rgba(255,255,255,.66); margin-top: 18px; }

.guia { padding: 64px 0 88px; background: var(--white); }
.guia-layout { display: grid; grid-template-columns: 240px minmax(0, 720px); gap: 56px; justify-content: center; }

.guia-toc { position: sticky; top: 96px; align-self: start; font-size: .88rem; }
.guia-toc p { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--gray-600); margin: 0 0 10px; }
.guia-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--gray-200); }
.guia-toc li a { display: block; padding: 6px 0 6px 14px; color: var(--gray-800); text-decoration: none; line-height: 1.4; }
.guia-toc li a:hover { color: var(--accent); }

.guia-body { font-size: 1.04rem; line-height: 1.78; color: var(--gray-800); }
.guia-body > p:first-child { font-size: 1.14rem; color: var(--slate); }
.guia-body h2 { font-family: var(--font-serif); color: var(--slate); font-size: 1.62rem; line-height: 1.25; margin: 52px 0 14px; scroll-margin-top: 96px; }
.guia-body h3 { font-size: 1.1rem; color: var(--slate); margin: 30px 0 8px; }
.guia-body p { margin: 0 0 16px; }
.guia-body ul, .guia-body ol { margin: 0 0 18px; padding-left: 22px; }
.guia-body li { margin-bottom: 8px; }
.guia-body a { color: var(--accent); font-weight: 600; }
.guia-body strong { color: var(--slate); }

.guia-tabla { overflow-x: auto; margin: 8px 0 22px; border: 1px solid var(--gray-200); border-radius: 6px; }
.guia-tabla table { width: 100%; border-collapse: collapse; font-size: .93rem; line-height: 1.55; }
.guia-tabla th, .guia-tabla td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--gray-200); vertical-align: top; }
.guia-tabla th { background: var(--cream); color: var(--slate); font-weight: 700; }
.guia-tabla tr:last-child td { border-bottom: 0; }

/* Caso típico: una consulta real, sin nombres ni datos que identifiquen */
.guia-caso { background: var(--cream); border-left: 3px solid var(--emerald); border-radius: 0 6px 6px 0; padding: 22px 24px; margin: 26px 0; }
.guia-caso .guia-caso-tag { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--emerald-deep); margin-bottom: 6px; }
.guia-caso p:last-child { margin-bottom: 0; }

.guia-ojo { border: 1px solid var(--gray-200); border-radius: 6px; padding: 18px 22px; margin: 22px 0; font-size: .96rem; }
.guia-ojo strong:first-child { display: block; margin-bottom: 4px; }

.guia-cta { background: linear-gradient(160deg, var(--slate) 0%, var(--slate-dark) 100%); color: #F9FBFA; border-radius: 8px; padding: 34px 32px; margin: 48px 0 8px; }
.guia-cta h2 { color: #fff; margin: 0 0 10px; font-size: 1.5rem; }
.guia-cta p { color: rgba(255,255,255,.82); margin: 0 0 20px; }
.guia-cta a.btn { color: var(--on-sage); }

.guia-fuentes { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--gray-200); font-size: .86rem; line-height: 1.6; color: var(--gray-600); }
.guia-fuentes h2 { font-family: var(--font-main); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gray-600); margin: 0 0 12px; }
.guia-fuentes ol { padding-left: 20px; }
.guia-fuentes a { color: var(--accent); font-weight: 500; word-break: break-word; }
.guia-aviso { font-size: .84rem; color: var(--gray-600); margin-top: 18px; }

.guia-mas { margin-top: 40px; }
.guia-mas h2 { font-size: 1.2rem; margin-top: 0; }
.guia-mas ul { list-style: none; padding: 0; }
.guia-mas li { border-bottom: 1px solid var(--gray-200); }
.guia-mas li a { display: block; padding: 12px 0; text-decoration: none; }

/* Índice de guías */
.guias-hub { padding: 64px 0 88px; }
.guias-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 980px; margin: 0 auto; }
.guia-card { display: block; background: var(--white); border: 1px solid var(--gray-200); border-radius: 6px; padding: 26px 26px 24px; text-decoration: none; color: inherit; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.guia-card:hover { border-color: var(--emerald); box-shadow: 0 8px 30px rgba(55,69,78,.08); transform: translateY(-2px); }
.guia-card .resource-tag { display: inline-block; margin-bottom: 10px; }
.guia-card h2 { font-family: var(--font-serif); font-size: 1.28rem; line-height: 1.3; color: var(--slate); margin: 0 0 8px; }
.guia-card p { font-size: .94rem; line-height: 1.6; color: var(--gray-600); margin: 0 0 14px; }
.guia-card span.resource-link { font-weight: 600; color: var(--accent); }

@media (max-width: 900px) {
  .guia-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; } /* 6-nov: con 1fr una tabla ancha estiraba la columna y el texto se cortaba 14 px a cada lado en el teléfono */
  .guia-toc { position: static; background: var(--cream); padding: 18px 18px 12px; border-radius: 6px; }
  .guias-grid { grid-template-columns: 1fr; }
  .guia { padding: 40px 0 64px; }
  .guia-cta { padding: 28px 22px; }
}

/* ============================================================================
   Legal Desk dentro de las guías (6-nov-2026)
   Cada guía muestra los servicios del Legal Desk que le corresponden; la tarjeta abre su ficha en /desk/#<id>.
   Datos: 02_SHARED_SERVICES/catalogos/productos.py. Solo se animan transform, opacity y box-shadow.
   ========================================================================== */
.gdk, .gdk-toc { --gdk-ease: cubic-bezier(.16, 1, .3, 1); }

.gdk { margin: 56px 0 0; padding: 30px 28px 26px; background: var(--cream); border: 1px solid var(--cream-dark); border-radius: 12px; scroll-margin-top: 96px; }
.gdk .gdk-eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 700 .72rem/1 var(--font-main); letter-spacing: .14em; text-transform: uppercase; color: var(--emerald-deep); }
.gdk .gdk-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 0 4px var(--emerald-glow); }
.gdk .gdk-title { font-family: var(--font-serif); font-size: 1.5rem; line-height: 1.25; color: var(--slate); margin: 0 0 8px; }
.gdk .gdk-lede { font-size: .96rem; line-height: 1.6; color: var(--gray-600); margin: 0 0 22px; max-width: 60ch; }

.gdk .gdk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.gdk .gdk-list li { margin: 0; }
.gdk .gdk-i2 { transition-delay: .08s; }
.gdk .gdk-i3 { transition-delay: .16s; }
.gdk .gdk-i4 { transition-delay: .24s; }

.gdk a.gdk-card { position: relative; display: grid; grid-template-columns: 184px minmax(0, 1fr); height: 100%; background: var(--white); border: 1px solid var(--gray-200); border-radius: 10px; overflow: hidden; color: inherit; font-weight: 400; text-decoration: none; box-shadow: 0 1px 2px rgba(43,56,64,.04); transition: transform .5s var(--gdk-ease), box-shadow .5s var(--gdk-ease), border-color .3s ease; }
.gdk .gdk-fig { position: relative; overflow: hidden; min-height: 150px; background: var(--slate); }
.gdk .gdk-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--gdk-ease); }
.gdk .gdk-body { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px 16px; }
.gdk .gdk-cat { font: 700 .66rem/1.2 var(--font-main); letter-spacing: .14em; text-transform: uppercase; color: var(--gray-600); }
.gdk .gdk-name { font-family: var(--font-serif); font-size: 1.24rem; line-height: 1.25; color: var(--slate); margin: 2px 0 0; }
.gdk .gdk-hook { font-size: .93rem; line-height: 1.5; color: var(--gray-600); margin: 0; }
.gdk .gdk-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--gray-200); }
.gdk .gdk-price { font: 700 1.14rem/1.2 var(--font-main); color: var(--slate); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em; }
.gdk .gdk-price small { margin-left: 6px; font-size: .74rem; font-weight: 600; color: var(--gray-600); letter-spacing: 0; }
.gdk .gdk-sub { font-size: .82rem; line-height: 1.45; color: var(--gray-600); }
.gdk .gdk-go { display: block; margin-top: 8px; font-size: .88rem; line-height: 1.35; font-weight: 600; color: var(--accent); }
.gdk .gdk-go svg { display: inline-block; margin-left: 4px; vertical-align: -3px; }
.gdk .gdk-nw { white-space: nowrap; }
.gdk .gdk-go svg, .gdk .gdk-all svg, .gdk-toc svg { flex: none; transition: transform .4s var(--gdk-ease); }
.gdk a.gdk-card:active { transform: translateY(-1px) scale(.996); transition-duration: .12s; }
.gdk a.gdk-card:focus-visible, .gdk .gdk-all:focus-visible, .gdk-toc:focus-visible { outline: 2px solid var(--emerald-deep); outline-offset: 3px; }

.gdk .gdk-all { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: .94rem; font-weight: 600; color: var(--accent); text-decoration: none; }

/* Acceso desde el índice lateral de la guía */
.gdk-toc { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; margin-top: 22px; padding: 14px 16px; border-radius: 10px; background: linear-gradient(160deg, var(--slate) 0%, var(--slate-dark) 100%); color: #fff; text-decoration: none; box-shadow: 0 10px 24px -16px rgba(43,56,64,.6); transition: transform .5s var(--gdk-ease), box-shadow .5s var(--gdk-ease); }
.gdk-toc .gdk-toc-k { grid-column: 1; display: flex; align-items: center; gap: 8px; font: 700 .68rem/1 var(--font-main); letter-spacing: .14em; text-transform: uppercase; color: var(--emerald-bright); }
.gdk-toc .gdk-toc-k::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--emerald); }
.gdk-toc .gdk-toc-v { grid-column: 1; font-size: .86rem; line-height: 1.4; color: rgba(255,255,255,.86); font-variant-numeric: lining-nums; }
.gdk-toc svg { grid-column: 2; grid-row: 1 / span 2; color: var(--emerald-bright); }

@media (hover: hover) {
  .gdk a.gdk-card:hover { transform: translateY(-3px); border-color: var(--emerald); box-shadow: 0 22px 44px -22px rgba(43,56,64,.42); }
  .gdk a.gdk-card:hover .gdk-fig img { transform: scale(1.06); }
  .gdk a.gdk-card:hover .gdk-go svg, .gdk .gdk-all:hover svg, .gdk-toc:hover svg { transform: translateX(4px); }
  .gdk-toc:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -16px rgba(43,56,64,.7); }
}

/* Índice de guías: tarjetas verticales */
.guias-desk { padding: 0 0 88px; }
.gdk--hub { max-width: 1080px; margin: 0 auto; padding: 40px 36px 32px; }
.gdk--hub .gdk-title { font-size: 1.8rem; }
.gdk--hub .gdk-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.gdk--hub a.gdk-card { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
.gdk--hub .gdk-fig { min-height: 0; aspect-ratio: 4 / 3; }
.gdk--hub .gdk-body { padding: 16px 18px 16px; }
.gdk--hub .gdk-name { font-size: 1.12rem; }
.gdk--hub .gdk-hook { font-size: .88rem; }
.gdk--hub .gdk-meta { margin-top: auto; }
.gdk--hub .gdk-hook { margin-bottom: 10px; }

@media (max-width: 1000px) {
  .gdk--hub .gdk-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .gdk-toc { margin: 16px 0 6px; }
}
@media (max-width: 560px) {
  .gdk { margin-top: 44px; padding: 22px 16px 18px; border-radius: 10px; }
  .gdk .gdk-title { font-size: 1.3rem; }
  .gdk--hub { padding: 26px 16px 20px; }
  .gdk--hub .gdk-title { font-size: 1.4rem; }
  .gdk .gdk-list, .gdk--hub .gdk-list { grid-template-columns: 1fr; gap: 12px; }
  .gdk a.gdk-card, .gdk--hub a.gdk-card { grid-template-columns: 104px minmax(0, 1fr); grid-template-rows: none; }
  .gdk .gdk-fig, .gdk--hub .gdk-fig { min-height: 0; aspect-ratio: auto; }
  .gdk .gdk-body, .gdk--hub .gdk-body { padding: 14px 14px 12px; }
  .gdk .gdk-name, .gdk--hub .gdk-name { font-size: 1.06rem; }
  .gdk .gdk-hook, .gdk--hub .gdk-hook { font-size: .84rem; }
  .gdk .gdk-price { font-size: 1.04rem; }
  .gdk .gdk-sub { flex-basis: 100%; font-size: .78rem; }
  .guias-desk { padding-bottom: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .gdk a.gdk-card, .gdk .gdk-fig img, .gdk-toc, .gdk-toc svg, .gdk .gdk-go svg, .gdk .gdk-all svg { transition: none; }
  .gdk a.gdk-card:hover, .gdk a.gdk-card:active, .gdk-toc:hover { transform: none; }
  .gdk a.gdk-card:hover .gdk-fig img { transform: none; }
  .gdk .gdk-i2, .gdk .gdk-i3, .gdk .gdk-i4 { transition-delay: 0s; }
}