/* ==========================================================
 * GUIAS — prosa
 * ==========================================================
 * Se carga solo en /guias y /guias/{slug}, encima de landing.css y del tema
 * H2U. landing.css no tiene nada para texto corrido: todos sus <p> y <h2>
 * viven dentro de secciones con clase propia, asi que un articulo sin esto
 * sale como HTML sin estilos.
 *
 * Todo cuelga de .gu-, no de .lp-, para que quede claro que no es chrome
 * compartido y nadie lo herede sin querer.
 * ========================================================== */

.gu-wrap { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }

/* La medida es lo unico que decide si un articulo largo se lee o se abandona.
   68 caracteres es la banda alta de lo comodo; mas ancho y el ojo pierde el
   renglon al volver. */
.gu-prosa { max-width: 68ch; }

/* ------------------------------------------------------- cabecera de ruta */

.gu-head {
    padding: 8.5rem 0 3rem;
    background:
        radial-gradient(38rem 26rem at 12% -10%, rgba(8,164,244,0.10), transparent 62%),
        radial-gradient(30rem 22rem at 92% 0%, rgba(249,171,0,0.09), transparent 60%),
        var(--lp-off-white);
    border-bottom: 1px solid var(--lp-gray-100);
}
.gu-head h1 {
    font-family: var(--lp-font-heading);
    font-size: clamp(2rem, 4.4vw, 3.1rem);
    font-weight: 700; line-height: 1.07; letter-spacing: -0.028em;
    color: var(--lp-gray-900);
    text-wrap: balance;
}
.gu-head p {
    margin-top: 1.1rem; max-width: 62ch;
    font-size: 1.1rem; color: var(--lp-gray-500); line-height: 1.7;
}

.gu-eyebrow {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 0.74rem; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--lp-accent-ink);
}

/* Migas: la misma jerarquia que declara el BreadcrumbList del schema. Que el
   dato estructurado prometa una ruta que la pagina no dibuja es justo lo que
   Google llama marcado que no corresponde al contenido. */
.gu-migas {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
    margin-bottom: 1.2rem;
    font-size: 0.85rem; color: var(--lp-gray-500);
}
.gu-migas a { color: var(--lp-gray-500); text-decoration: none; }
.gu-migas a:hover { color: var(--lp-accent-ink); text-decoration: underline; }
.gu-migas span[aria-current] { color: var(--lp-gray-700); }
.gu-migas .gu-sep { opacity: 0.45; }

.gu-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.1rem;
    margin-top: 1.6rem;
    font-size: 0.86rem; color: var(--lp-gray-500);
}
.gu-meta span { display: inline-flex; align-items: center; gap: 0.4rem; }
.gu-meta svg { flex-shrink: 0; opacity: 0.7; }

/* ------------------------------------------------------------- el cuerpo */

.gu-cuerpo { padding: 3.5rem 0 4.5rem; }
.gu-cuerpo p,
.gu-cuerpo li {
    font-size: 1.075rem; line-height: 1.78; color: #33405c;
}
.gu-cuerpo > p { margin-bottom: 1.35rem; }
.gu-cuerpo strong { font-weight: 700; color: var(--lp-gray-900); }
.gu-cuerpo em { font-style: italic; }

.gu-cuerpo h2 {
    font-family: var(--lp-font-heading);
    font-size: clamp(1.45rem, 2.6vw, 1.85rem);
    font-weight: 700; line-height: 1.22; letter-spacing: -0.022em;
    color: var(--lp-gray-900);
    margin: 3.2rem 0 1rem;
    text-wrap: balance;
}
/* Un filete corto arriba del H2: separa secciones sin meter una regla de
   ancho completo, que parte la columna de lectura en bloques sueltos. */
.gu-cuerpo h2::before {
    content: ''; display: block;
    width: 34px; height: 3px; border-radius: 2px;
    background: var(--lp-accent);
    margin-bottom: 0.9rem;
}
.gu-cuerpo h3 {
    font-family: var(--lp-font-heading);
    font-size: 1.16rem; font-weight: 700; line-height: 1.35;
    color: var(--lp-gray-900);
    margin: 2.1rem 0 0.6rem;
}

.gu-cuerpo ul, .gu-cuerpo ol { margin: 0 0 1.5rem; padding-left: 0; }
.gu-cuerpo li { margin-bottom: 0.65rem; padding-left: 1.6rem; position: relative; list-style: none; }
.gu-cuerpo ul > li::before {
    content: ''; position: absolute; left: 0.15rem; top: 0.72em;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--lp-accent);
}
.gu-cuerpo ol { counter-reset: gu; }
.gu-cuerpo ol > li { counter-increment: gu; }
.gu-cuerpo ol > li::before {
    content: counter(gu) '.';
    position: absolute; left: 0; top: 0;
    font-family: var(--lp-font-mono);
    font-size: 0.9em; font-weight: 700; color: var(--lp-accent-ink);
    font-variant-numeric: tabular-nums;
}

/* Solo enlaces DENTRO de un parrafo o de un elemento de lista. `.gu-cuerpo a`
   a secas alcanzaba tambien a `.gu-tarjeta`, que es un <a> de bloque, y el
   subrayado de un ancestro no se puede quitar desde los hijos: salian
   subrayados el titulo, el resumen y hasta el eyebrow de cada tarjeta. */
.gu-cuerpo p > a,
.gu-cuerpo li > a {
    color: var(--lp-primary);
    text-decoration: underline;
    text-decoration-color: rgba(8,164,244,0.4);
    text-underline-offset: 3px;
    transition: color var(--lp-transition-fast), text-decoration-color var(--lp-transition-fast);
}
.gu-cuerpo p > a:hover,
.gu-cuerpo li > a:hover { color: var(--lp-accent-ink); text-decoration-color: currentColor; }
.gu-tarjeta, .gu-tarjeta:hover { text-decoration: none; }

/* Nota al margen: el aparte honesto ("esto lo vendemos nosotros", "aqui hay
   un costo que nadie menciona"). Va marcada para que no se confunda con el
   cuerpo del articulo. */
.gu-nota {
    margin: 2rem 0;
    padding: 1.25rem 1.4rem;
    border-radius: var(--lp-radius-md);
    border-left: 3px solid var(--lp-gold);
    background: var(--lp-gray-50);
}
.gu-nota p { font-size: 1rem !important; margin: 0; }
.gu-nota p + p { margin-top: 0.7rem; }
.gu-nota-titulo {
    display: block; margin-bottom: 0.4rem;
    font-size: 0.74rem; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--lp-gold-ink-on-light);
}

/* Tablas: comparativas. En movil hacen scroll dentro de su caja — el cuerpo
   de la pagina nunca desborda horizontalmente. */
/* La tabla se sale a la derecha de la columna de lectura. Apretar una
   comparativa de tres columnas dentro de 68ch la vuelve ilegible, y el ancho
   comodo para leer prosa no es el ancho comodo para comparar filas. Nunca
   pasa del contenedor: en movil se queda en el viewport y hace scroll dentro
   de su caja. */
.gu-tabla-caja {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin: 1.8rem 0;
    width: min(820px, calc(100vw - 3rem));
}
.gu-tabla {
    width: 100%; min-width: 520px;
    border-collapse: collapse;
    font-size: 0.96rem;
}
.gu-tabla th, .gu-tabla td {
    padding: 0.8rem 0.9rem;
    border-bottom: 1px solid var(--lp-gray-100);
    text-align: left; vertical-align: top;
}
.gu-tabla th {
    font-size: 0.74rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--lp-gray-500);
    border-bottom: 2px solid var(--lp-gray-200);
}
.gu-tabla td { color: #33405c; line-height: 1.6; }
.gu-tabla tr:last-child td { border-bottom: 0; }

.gu-resumen {
    margin: 0 0 2.6rem;
    padding: 1.4rem 1.5rem;
    border-radius: var(--lp-radius-md);
    background: var(--lp-white);
    box-shadow: var(--lp-shadow-sm);
    border: 1px solid var(--lp-gray-100);
}
.gu-resumen p { font-size: 1.02rem !important; margin: 0; color: var(--lp-gray-700); }
.gu-resumen .gu-nota-titulo { color: var(--lp-accent-ink); }

/* ------------------------------------------------------------- cierre */

.gu-cta {
    margin: 3rem 0 0;
    padding: 1.8rem;
    border-radius: var(--lp-radius-lg);
    background: var(--lp-primary);
    color: #fff;
}
.gu-cta h2 { color: #fff; margin: 0 0 0.6rem; font-size: 1.3rem; }
.gu-cta h2::before { display: none; }
.gu-cta p { color: rgba(255,255,255,0.78) !important; margin-bottom: 1.2rem !important; }
.gu-cta-acciones { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.gu-cta a {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.7rem 1.2rem; border-radius: var(--lp-radius-sm);
    font-size: 0.95rem; font-weight: 700; text-decoration: none;
    background: var(--lp-gold); color: var(--lp-gold-ink);
}
.gu-cta a.gu-cta-alt {
    background: transparent; color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3);
}
.gu-cta a:hover { text-decoration: none; }

/* ---------------------------------------------------- indice y relacionados */

.gu-lista { display: grid; gap: 1.1rem; margin-top: 2.5rem; }
/* En el indice la lista es lo primero del cuerpo y ese margen se suma al
   padding de la seccion: 96px de nada entre la cabecera y la primera guia. */
.gu-cuerpo .gu-wrap > .gu-lista:first-child { margin-top: 0; }
.gu-tarjeta {
    display: block;
    padding: 1.6rem 1.7rem;
    border-radius: var(--lp-radius-lg);
    background: var(--lp-white);
    border: 1px solid var(--lp-gray-100);
    box-shadow: var(--lp-shadow-sm);
    text-decoration: none;
    transition: transform var(--lp-transition-base), box-shadow var(--lp-transition-base), border-color var(--lp-transition-base);
}
.gu-tarjeta:hover {
    transform: translateY(-3px);
    box-shadow: var(--lp-shadow-md);
    border-color: var(--lp-gray-200);
}
.gu-tarjeta h2, .gu-tarjeta h3 {
    font-family: var(--lp-font-heading);
    font-size: 1.3rem; font-weight: 700; line-height: 1.28;
    color: var(--lp-gray-900);
    margin: 0.55rem 0 0.5rem;
    letter-spacing: -0.02em;
}
.gu-tarjeta h2::before { display: none; }
.gu-tarjeta p { font-size: 1rem; color: var(--lp-gray-500); line-height: 1.65; margin: 0; }
.gu-tarjeta-pie {
    display: flex; flex-wrap: wrap; gap: 0.4rem 1rem;
    margin-top: 1rem;
    font-size: 0.82rem; color: var(--lp-muted-ink);
}
.gu-tarjeta-mas {
    display: inline-flex; align-items: center; gap: 0.4rem;
    margin-top: 1rem; font-size: 0.92rem; font-weight: 700;
    color: var(--lp-accent-ink);
}

.gu-relacionados {
    margin-top: 3.5rem; padding-top: 2.2rem;
    border-top: 1px solid var(--lp-gray-100);
}
.gu-relacionados > h2 { margin-top: 0; font-size: 1.2rem; }
.gu-relacionados > h2::before { display: none; }
.gu-relacionados .gu-lista { grid-template-columns: repeat(2, 1fr); margin-top: 1.2rem; }

@media (max-width: 768px) {
    .gu-head { padding: 7rem 0 2.5rem; }
    .gu-cuerpo { padding: 2.5rem 0 3.5rem; }
    .gu-relacionados .gu-lista { grid-template-columns: 1fr; }
    .gu-tarjeta { padding: 1.3rem 1.3rem; }
    .gu-cta { padding: 1.4rem; }
    .gu-cta-acciones a { width: 100%; justify-content: center; }
}


/* --------------------------------------------------- la barra sobre claro */
/*
 * El tema H2U deja la barra transparente con el logo invertido y los enlaces
 * en blanco mientras no se hace scroll, porque en / y /negocios lo que hay
 * debajo es un campo navy. La cabecera de una guia es clara: con esas reglas
 * la navegacion entera se volvia invisible hasta que el usuario bajaba.
 *
 * Aqui la barra nace ya en su estado de vidrio. No es un caso especial de
 * /guias: es lo que corresponde a cualquier ruta cuyo primer bloque sea claro.
 */
body.lp-theme-h2u .lp-header {
    background: var(--lp-glass-bg);
    backdrop-filter: blur(var(--lp-glass-blur));
    -webkit-backdrop-filter: blur(var(--lp-glass-blur));
    box-shadow: inset 0 -1px 0 var(--lp-glass-border);
}
body.lp-theme-h2u .lp-header.scrolled { box-shadow: inset 0 -1px 0 var(--lp-glass-border), var(--lp-shadow-sm); }
body.lp-theme-h2u .lp-header:not(.scrolled) .lp-logo img { filter: none; }
body.lp-theme-h2u .lp-header:not(.scrolled) .lp-nav a { color: var(--lp-gray-500); }
body.lp-theme-h2u .lp-header:not(.scrolled) .lp-nav a:hover { color: var(--lp-accent-ink); }
body.lp-theme-h2u .lp-header:not(.scrolled) .lp-nav a[aria-current="page"] { color: var(--lp-gray-900); font-weight: 600; }
body.lp-theme-h2u .lp-header:not(.scrolled) .lp-mobile-toggle span { background: var(--lp-gray-700); }