/* Diseño de artículo de las guías. Va encima de latam.css y de los estilos propios de cada
   guía; el marcado extra (portada, índice, números) lo pone scripts/enlaces.py. */
.guia-pg{ font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; color:#0b1220; background:#fff; overflow-x:hidden; }
.guia-pg h1,.guia-pg h2,.guia-pg .btn,.guia-pg .logo,.guia-pg .guia-indice p,.guia-pg .rel-card b,.guia-pg .relacionados .eyebrow{ font-family:'Montserrat','Inter',system-ui,sans-serif; }

/* MENÚ claro sobre la portada oscura */
.guia-pg .menu{ background:#fff; box-shadow:0 0 0 100vmax #fff; clip-path:inset(0 -100vmax); padding:14px 0; }
.guia-pg .menu .logo{ color:#0b1a4a; }
.guia-pg .menu .logo span{ color:#1463f3; }
.guia-pg .menu-links a{ color:#1e293b; }
.guia-pg .menu-links a:hover{ color:#1463f3; }
.guia-pg .menu-links a[aria-current]{ color:#1463f3; box-shadow:0 2px 0 #1463f3; padding-bottom:4px; }

/* PORTADA */
.guia-pg .hero-sm{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); align-items:center; column-gap:10px; padding:0 max(24px,calc((100% - 1200px)/2)) 34px; background:radial-gradient(ellipse 45% 80% at 80% 45%,rgba(37,99,235,.45) 0%,transparent 70%),url(/assets/guia/fondo.webp) center/cover,#061633; border-radius:0 0 50% 50% / 0 0 44px 44px; }
.guia-pg .hero-sm::before{ opacity:.35; }
.guia-pg .hero-sm > nav{ grid-column:1 / -1; width:100%; }
.guia-pg .hero-sm .migas{ margin-top:16px; }
.guia-pg .hero-sm .hero-inner,.guia-pg .hero-sm .migas + .hero-inner{ max-width:none; margin:0; text-align:left; padding:22px 0 26px; }
.guia-pg .hero-sm .badge{ background:none; border:0; padding:0; margin-bottom:10px; color:#60a5fa; font-size:.98rem; font-weight:600; border-radius:0; }
.guia-pg .hero-sm .badge::before{ content:''; width:22px; height:18px; flex:none; background:#3b82f6; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M1 2.5C4 1 8 1 11 3v16c-3-2-7-2-10-.5zM23 2.5C20 1 16 1 13 3v16c3-2 7-2 10-.5z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M1 2.5C4 1 8 1 11 3v16c-3-2-7-2-10-.5zM23 2.5C20 1 16 1 13 3v16c3-2 7-2 10-.5z'/%3E%3C/svg%3E") center/contain no-repeat; }
.guia-pg .hero-sm h1{ font-size:2.65rem; line-height:1.08; letter-spacing:-.03em; margin-bottom:14px; }
.guia-pg .hero-sm h1 .hl{ color:#3b82f6; }
.guia-pg .hero-sm .sub{ margin:0 0 18px; max-width:520px; font-size:1.02rem; line-height:1.55; color:rgba(255,255,255,.86); }
.guia-meta{ display:flex; flex-wrap:wrap; gap:8px 18px; font-size:.9rem; font-weight:600; color:#fff; }
.guia-meta span{ display:inline-flex; align-items:center; gap:8px; }
.guia-meta span + span{ padding-left:18px; border-left:1px solid rgba(255,255,255,.35); }
.guia-meta svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.guia-visual{ position:relative; z-index:1; align-self:end; margin:-40px -70px -40px -10px; }
.guia-visual img{ display:block; height:auto; }
.gv-escena{ position:relative; width:100%; filter:drop-shadow(0 24px 40px rgba(0,0,0,.35)); }
.gv-burbujas{ position:absolute; right:-4%; top:-6%; width:34%; opacity:.9; }
.gv-pct{ position:absolute; right:-2%; top:16%; width:17%; transform:rotate(8deg); }

/* CUERPO con índice lateral */
.guia-pg section:has(> .guia-indice){ display:grid; grid-template-columns:220px minmax(0,1fr); gap:44px; align-items:start; max-width:1248px; margin:0 auto; padding:38px 24px 40px; }
.guia-pg section:has(> .guia-indice) > .prose{ max-width:none; margin:0; padding:0; }
/* guías con el texto partido en más de una sección: el resto sigue la misma columna */
.guia-pg section:has(> .guia-indice) ~ section:has(> .prose){ display:grid; grid-template-columns:220px minmax(0,1fr); gap:44px; max-width:1248px; margin:0 auto; padding:0 24px 40px; }
.guia-pg section:has(> .guia-indice) ~ section:has(> .prose) > .prose{ grid-column:2; max-width:none; margin:0; padding:0; }
.guia-indice{ display:block; position:sticky; top:16px; max-height:calc(100vh - 32px); overflow:auto; border:1px solid #e3ecf8; border-radius:16px; padding:16px 12px; background:#fff; box-shadow:0 8px 22px rgba(15,40,90,.05); }
.guia-indice p{ font-weight:800; font-size:1.08rem; color:#0b1a4a; margin:0 0 10px 6px; }
.guia-indice ol{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.guia-indice a{ display:flex; gap:10px; align-items:flex-start; padding:7px 8px; border-radius:10px; font-size:.84rem; line-height:1.35; color:#334155; }
.guia-indice a span{ flex:none; width:22px; height:22px; margin-top:-2px; border-radius:50%; border:1px solid #cbd5e1; display:grid; place-items:center; font-size:.72rem; font-weight:700; color:#475569; }
.guia-indice a:hover{ background:#f1f6ff; }
.guia-indice a.activo{ background:#e8f0ff; color:#1463f3; font-weight:600; }
.guia-indice a.activo span{ background:#1463f3; border-color:#1463f3; color:#fff; }
.guia-pg .prose .indice{ display:none; }

.guia-pg .prose{ font-size:1rem; line-height:1.65; color:#334155; }
.guia-pg .prose p{ margin-bottom:14px; }
.guia-pg .prose strong{ color:#0b1a4a; }
/* Justificado solo en texto corrido: párrafos, listas y respuestas; nunca en tablas ni calculadoras */
.guia-pg .prose > p,.guia-pg .prose > ul li,.guia-pg .prose > ol li,.guia-pg .prose details p,.guia-pg .prose .respuesta p{ text-align:justify; -webkit-hyphens:auto; hyphens:auto; }
.guia-pg .prose a:not(.btn){ color:#1463f3; text-decoration:underline; text-decoration-color:rgba(20,99,243,.35); text-underline-offset:3px; }
.guia-pg .prose h2{ display:flex; gap:14px; align-items:flex-start; text-align:left; font-size:1.38rem; line-height:1.3; letter-spacing:-.01em; color:#0b1a4a; margin:34px 0 8px; scroll-margin-top:16px; }
.h-num{ flex:none; display:grid; place-items:center; width:34px; height:30px; margin-top:-1px; border-radius:8px; background:#e8f0ff; color:#1463f3; font-size:.95rem; font-weight:800; }
.guia-pg .prose > h2 ~ :not(h2){ margin-left:48px; }
.guia-pg .prose > ul{ list-style:none; margin-bottom:18px; padding:14px 18px; background:#f5f9ff; border:1px solid #dce8fb; border-radius:14px; }
.guia-pg .prose > ul li{ position:relative; padding-left:26px; margin-bottom:6px; }
.guia-pg .prose > ul li:last-child{ margin-bottom:0; }
.guia-pg .prose > ul li::before{ content:''; position:absolute; left:0; top:.32em; width:16px; height:16px; background:#1463f3; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat; }
.guia-pg .prose > ol{ margin:0 0 18px 48px; padding:14px 18px 14px 38px; background:#f5f9ff; border:1px solid #dce8fb; border-radius:14px; }
.guia-pg .prose > h2 ~ ol{ margin-left:48px; }
.guia-pg .prose > ol li{ margin-bottom:6px; }
.guia-pg .prose > ol li::marker{ color:#1463f3; font-weight:700; }
.guia-pg .prose details{ border:1px solid #e3ecf8; border-radius:12px; padding:12px 16px; margin-bottom:10px; background:#fff; }
.guia-pg .prose details summary{ font-weight:700; color:#0b1a4a; cursor:pointer; }
.guia-pg .prose details[open] summary{ margin-bottom:8px; }
.guia-pg .prose .tabla{ border-color:#dce8fb; }
.guia-pg .prose > h2 ~ .faq{ max-width:none; margin-left:48px !important; } /* algunas guías traen margin en línea */
.guia-pg .prose .btn-green{ background:#1463f3; border-radius:999px; }
.guia-pg .prose .tabla th{ background:#eef4ff; color:#0b1a4a; }

/* SIGUE APRENDIENDO */
.guia-pg .relacionados{ background:linear-gradient(180deg,#f2f7ff 0%,#fff 100%); padding:36px 0 26px; }
.guia-pg .relacionados .wrap{ position:relative; }
.guia-pg .relacionados .eyebrow{ text-align:left; text-transform:none; letter-spacing:-.01em; font-size:1.6rem; font-weight:800; color:#0b1a4a; }
.guia-pg .relacionados h2{ text-align:left; font-family:'Inter',system-ui,sans-serif; font-size:.98rem; font-weight:500; letter-spacing:0; color:#475569; margin:2px 0 16px; padding-right:220px; }
.guia-pg .relacionados .lead{ display:none; }
.rel-todas{ position:absolute; top:4px; right:24px; border:1px solid #c7d8f5; border-radius:999px; padding:8px 16px; background:#fff; color:#1463f3; font-weight:700; font-size:.88rem; }
.rel-todas:hover{ border-color:#1463f3; }
.guia-pg .rel-card{ padding:14px 16px; border-color:#e3ecf8; box-shadow:0 6px 16px rgba(15,40,90,.05); }
.guia-pg .indice-card .rel-tag{ align-self:flex-start; background:#e8f0ff; border-radius:999px; padding:3px 10px; font-size:.66rem; }
.guia-pg .rel-card b{ font-size:.95rem; line-height:1.3; color:#0b1a4a; }
.guia-pg .rel-card > span:not(.rel-tag):not(.rel-ir){ display:none; }
.guia-pg .indice-card .rel-ir{ font-size:.86rem; color:#1463f3; }

/* CIERRE claro con el celular y el auto */
.guia-pg .cta-final{ background:none; color:#0b1a4a; text-align:left; padding:6px 24px 46px; }
.guia-pg .cta-final .wrap{ position:relative; overflow:hidden; max-width:1200px; min-height:178px; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"t b" "p b"; align-content:center; column-gap:28px; padding:26px 470px 26px 40px; border-radius:22px; background:radial-gradient(ellipse 40% 120% at 0% 100%,#f4f8ff 0%,transparent 70%),linear-gradient(90deg,#e4effd 0%,#cfe4fb 100%); }
.guia-pg .cta-final .wrap::after{ content:''; position:absolute; right:0; bottom:0; width:498px; height:163px; background:url(/assets/guia/cta-lado.webp) right bottom / contain no-repeat; pointer-events:none; }
.guia-pg .cta-final h2{ grid-area:t; color:#0b1a4a; text-align:left; font-size:1.45rem; line-height:1.2; margin:0 0 6px; }
.guia-pg .cta-final p{ grid-area:p; color:#334155; font-size:1rem; margin:0; }
.guia-pg .cta-final .btn{ grid-area:b; align-self:center; position:relative; z-index:1; background:#1463f3; color:#fff; border-radius:999px; padding:13px 24px; white-space:nowrap; box-shadow:0 10px 24px rgba(20,99,243,.3); }
.guia-pg .cta-final .btn::after{ content:'→'; }

@media(max-width:960px){
  .guia-pg .hero-sm{ grid-template-columns:1fr; }
  .guia-visual{ max-width:520px; width:100%; margin:-10px auto -20px; }
  .guia-pg section:has(> .guia-indice){ grid-template-columns:minmax(0,1fr); gap:22px; }
  .guia-indice{ position:static; max-height:none; }
  .guia-pg section:has(> .guia-indice) ~ section:has(> .prose){ grid-template-columns:minmax(0,1fr); }
  .guia-pg section:has(> .guia-indice) ~ section:has(> .prose) > .prose{ grid-column:1; }
  .guia-pg .cta-final .wrap{ grid-template-columns:1fr; grid-template-areas:"t" "p" "b"; padding:24px 22px 170px; }
  .guia-pg .cta-final .wrap::after{ width:100%; height:160px; }
  .guia-pg .cta-final .btn{ justify-self:start; margin-top:14px; }
}
@media(max-width:760px){
  .guia-pg .hero-sm{ padding:0 16px 24px; border-radius:0 0 50% 50% / 0 0 22px 22px; }
  .guia-pg .menu{ gap:12px; }
  .guia-pg .menu-links{ border-top-color:#e2e8f0; }
  .guia-pg .hero-sm h1{ font-size:1.8rem; }
  .guia-pg .hero-sm .sub{ font-size:.95rem; }
  .guia-pg section:has(> .guia-indice){ padding:26px 16px 30px; }
  .guia-pg section:has(> .guia-indice) ~ section:has(> .prose){ padding:0 16px 30px; }
  .guia-pg .prose h2{ font-size:1.2rem; gap:10px; }
  .h-num{ width:30px; height:28px; font-size:.88rem; }
  .guia-pg .prose > h2 ~ :not(h2),.guia-pg .prose > h2 ~ ol{ margin-left:0; }
  .guia-pg .prose > h2 ~ .faq{ margin-left:0 !important; }
  .guia-pg .relacionados h2{ padding-right:0; }
  .rel-todas{ position:static; display:inline-block; margin-top:14px; }
  .guia-pg .cta-final{ padding:0 16px 34px; }
  .guia-pg .cta-final h2{ font-size:1.35rem; }
}