/* Guía de crédito claro (tarea 10): /guia/ y sus 9 artículos. Solo afecta a .guia y .guia-barra. */
.guia-barra{padding:1rem 1.25rem;background:var(--bg);border-bottom:1px solid #F1E3D0}
main.guia{max-width:44rem;padding:1.5rem 1.25rem 3rem}

/* Página principal de la guía */
.guia-hero{color:var(--on-dark);padding:2.25rem 1.5rem 2rem;border-radius:1.75rem;margin:0 0 1.5rem;
  background:radial-gradient(ellipse 70% 50% at 100% 0%,rgba(91,192,222,.4),transparent 70%),radial-gradient(ellipse 70% 50% at 0% 100%,rgba(217,119,6,.45),transparent 70%),var(--grad-oscuro)}
.guia-hero h1{color:var(--on-dark);font-size:clamp(2.1rem,9vw,3rem);margin:0 0 .5rem}
.guia-hero__lema{font-family:var(--font-head);font-weight:700;font-size:1.375rem;line-height:1.3;margin:0 0 .75rem}
.guia-hero__apoyo{margin:0 0 1.5rem}
.guia-buscador label{display:block;font-weight:700;margin:0 0 .4rem}
.guia-buscador input{width:100%;min-height:3.5rem;padding:.6rem 1.1rem;border-radius:1rem;border:2px solid var(--sky);background:#fff;color:var(--ink);font:inherit;font-size:1.125rem}
.guia-buscador input::placeholder{color:#5D6B80}
.guia-buscador input:focus-visible{outline:3px solid var(--primary-claro);outline-offset:2px}
.guia-resultado{margin:0 0 .75rem;font-weight:700;color:var(--muted)}
.guia-resultado:empty{display:none}
.guia-tarjetas{list-style:none;margin:0 0 2rem;padding:0;display:grid;gap:.85rem}
.guia-tarjeta[hidden]{display:none}
.guia-tarjeta a{display:grid;grid-template-columns:2.75rem 1fr auto;align-items:center;gap:1rem;padding:1rem 1.1rem;border-radius:1.25rem;background:var(--grad-tarjeta);box-shadow:var(--sombra-tarjeta);color:var(--ink);text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.guia-tarjeta a:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 10px 22px rgba(11,19,43,.14)}
.guia-tarjeta a:active{transform:scale(.98)}
.guia-tarjeta__num{display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:50%;background:var(--grad-boton);color:var(--on-primary);font-family:var(--font-head);font-weight:800;font-size:1.3rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.guia-tarjeta__texto{display:flex;flex-direction:column}
.guia-tarjeta__titulo{font-family:var(--font-head);font-weight:700;font-size:1.3rem;line-height:1.25}
.guia-tarjeta__resumen{margin-top:.2rem}
.guia-tarjeta__flecha{font-size:1.5rem;font-weight:700;color:var(--primary-oscuro)}
.guia-vacio{padding:1.25rem 1.5rem;border-radius:1.25rem;background:var(--card-claro);margin:0 0 2rem}
.guia-vacio[hidden]{display:none}
@media (min-width:48rem){.guia-tarjetas{grid-template-columns:1fr 1fr}main.guia.guia-inicio{max-width:60rem}}

/* Artículos */
.guia-migas{font-size:1.125rem;margin:0 0 .5rem;color:var(--muted)}
.guia-migas a{color:var(--muted)}
.guia-volver{display:inline-block;padding:.5rem 0;font-weight:700}
.guia-articulo__numero{margin:1rem 0 .25rem;font-weight:700;color:var(--muted)}
.guia-articulo h1{font-size:clamp(2.1rem,9vw,2.9rem);margin:0 0 .5rem}
.guia-articulo__resumen{font-family:var(--font-head);font-weight:600;font-size:1.3rem;line-height:1.35;margin:0 0 1.5rem}
.guia-bloque{margin:0 0 1.25rem;padding:1.25rem 1.4rem;border-radius:1.25rem;background:#fff;box-shadow:0 3px 12px rgba(11,19,43,.08)}
.guia-bloque h2{font-size:1.5rem;margin:0 0 .6rem}
.guia-bloque p{margin:0 0 .75rem}
.guia-bloque p:last-child{margin:0}
.guia-bloque ul{margin:0;padding-left:1.4rem}
.guia-bloque li{margin:0 0 .5rem}
.guia-bloque--ejemplo{background:var(--grad-tarjeta);box-shadow:var(--sombra-tarjeta);border-left:.4rem solid var(--primary)}
.guia-aviso{margin-top:1rem!important;padding-top:.75rem;border-top:1px dashed rgba(58,80,107,.4);color:#3A4A60;font-style:italic}
.guia-bloque--preguntas ul{list-style:none;padding:0}
.guia-bloque--preguntas li{position:relative;padding-left:2.1rem}
.guia-bloque--preguntas li::before{content:"?";position:absolute;left:0;top:.1rem;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--grad-boton);color:var(--on-primary);font-family:var(--font-head);font-weight:800;font-size:1rem;display:flex;align-items:center;justify-content:center}
.guia-tabla{overflow-x:auto;margin:0 0 .75rem}
.guia-tabla table{width:100%;border-collapse:collapse;font-size:1.125rem;background:rgba(255,255,255,.6);border-radius:.75rem}
.guia-tabla th,.guia-tabla td{padding:.55rem .6rem;text-align:left;border-bottom:1px solid rgba(58,80,107,.2);white-space:nowrap}
.guia-tabla thead th{font-family:var(--font-head)}
.guia-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;margin:1.75rem 0}
.guia-compartir{display:inline-flex;align-items:center;justify-content:center;min-height:3.5rem;padding:.6rem 1.6rem;border-radius:999px;background:var(--grad-boton);color:var(--on-primary);font-family:var(--font-head);font-weight:700;font-size:1.25rem;text-decoration:none;box-shadow:var(--sombra-boton);transition:transform .15s ease,filter .15s ease}
.guia-compartir:hover{filter:brightness(1.08)}
.guia-compartir:active{transform:scale(.97)}
@media (max-width:30rem){.guia-compartir{width:100%}}
.guia-vecinos{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin:2rem 0 0}
.guia-vecinos a{display:flex;flex-direction:column;padding:.9rem 1rem;border-radius:1rem;border:2px solid #EAD8BE;color:var(--ink);text-decoration:none;font-family:var(--font-head);font-weight:700;line-height:1.3}
.guia-vecinos a span{font-family:var(--font-body);font-weight:700;color:var(--muted);font-size:1.125rem}
.guia-vecinos__sig{text-align:right}
.guia-vecinos a:hover{background:var(--card-claro)}

/* Invitación a las 4 preguntas */
.guia-cta{color:var(--on-dark);padding:1.75rem 1.5rem;border-radius:1.5rem;margin:2rem 0 0;background:radial-gradient(ellipse 70% 60% at 100% 0%,rgba(91,192,222,.35),transparent 70%),var(--grad-oscuro)}
.guia-cta h2{color:var(--on-dark);font-size:1.6rem;margin:0 0 .5rem}
.guia-cta p{margin:0 0 1.25rem}
.guia-boton{display:inline-flex;align-items:center;justify-content:center;min-height:3.5rem;padding:.6rem 1.75rem;border-radius:999px;background:var(--grad-boton);color:var(--on-primary);font-family:var(--font-head);font-weight:700;font-size:1.25rem;text-decoration:none;box-shadow:var(--sombra-boton);transition:transform .15s ease,filter .15s ease}
.guia-boton:hover{filter:brightness(1.08)}
.guia-boton:active{transform:scale(.97)}
.guia-boton:focus-visible{outline-color:var(--on-dark)}
@media (max-width:30rem){.guia-boton{width:100%}}

/* Aparición suave de las tarjetas (solo si el JS lo activa; con "reducir movimiento" no se anima) */
@keyframes guia-entra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.guia--animar .guia-tarjeta{animation:guia-entra .45s ease-out both}
.guia--animar .guia-tarjeta:nth-child(2){animation-delay:.05s}.guia--animar .guia-tarjeta:nth-child(3){animation-delay:.1s}
.guia--animar .guia-tarjeta:nth-child(4){animation-delay:.15s}.guia--animar .guia-tarjeta:nth-child(5){animation-delay:.2s}
.guia--animar .guia-tarjeta:nth-child(6){animation-delay:.25s}.guia--animar .guia-tarjeta:nth-child(7){animation-delay:.3s}
.guia--animar .guia-tarjeta:nth-child(8){animation-delay:.35s}.guia--animar .guia-tarjeta:nth-child(9){animation-delay:.4s}

/* Tabla en celular: una tarjeta por fila, con el nombre de cada dato a la izquierda (así no hay que deslizar) */
@media (max-width:36rem){
  .guia-tabla table,.guia-tabla tbody,.guia-tabla tr,.guia-tabla th,.guia-tabla td{display:block}
  .guia-tabla table{background:none}
  .guia-tabla thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .guia-tabla tr{margin:0 0 .75rem;padding:.6rem .9rem;border-radius:.9rem;background:rgba(255,255,255,.7)}
  .guia-tabla th[scope="row"]{font-family:var(--font-head);font-size:1.25rem;border:0;padding:.2rem 0 .3rem}
  .guia-tabla td{display:flex;justify-content:space-between;gap:1rem;padding:.3rem 0;border-bottom:1px solid rgba(58,80,107,.15);white-space:normal}
  .guia-tabla td:last-child{border-bottom:0}
  .guia-tabla td::before{content:attr(data-etiqueta);font-weight:700;color:var(--muted)}
}
.guia-articulo__fecha{margin:-.75rem 0 1.5rem;color:var(--muted);font-weight:700}

/* Tema especial: Descuentos del desembolso (sesión 11) */
.guia-lee{margin:0 0 1.25rem;padding:1rem 1.25rem;border-radius:1rem;background:var(--card-claro);font-weight:700}
.guia-dos{margin:0 0 1.75rem;padding:1.4rem;border-radius:1.5rem;color:var(--on-dark);background:radial-gradient(ellipse 70% 60% at 100% 0%,rgba(91,192,222,.3),transparent 70%),var(--grad-oscuro)}
.guia-dos h2{color:var(--on-dark);font-size:1.5rem;margin:0 0 1rem}
.guia-dos__par{display:grid;gap:.75rem;margin:0 0 1rem}
.guia-dos__valor{padding:1rem 1.15rem;border-radius:1rem;background:var(--grad-tarjeta);color:var(--ink);box-shadow:var(--sombra-tarjeta)}
.guia-dos__valor p{margin:0}
.guia-dos__valor:last-child{border-left:.4rem solid var(--primary)}
.guia-dos__nombre{font-family:var(--font-head);font-weight:700;font-size:1.3rem;margin:0 0 .25rem!important}
.guia-dos__nota{margin:0}
@media (min-width:40rem){.guia-dos__par{grid-template-columns:1fr 1fr}}
.guia-descuentos__lista h2{font-size:1.6rem;margin:0 0 .25rem}
.guia-descuentos__ayuda{margin:0 0 1rem;color:var(--muted);font-weight:700}
.guia-desc{margin:0 0 .75rem;border-radius:1.25rem;background:#fff;box-shadow:0 3px 12px rgba(11,19,43,.08);overflow:hidden}
.guia-desc summary{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem .75rem;min-height:3.75rem;padding:.9rem 3.25rem .9rem 1.25rem;cursor:pointer;list-style:none;position:relative}
.guia-desc summary::-webkit-details-marker{display:none}
.guia-desc summary::after{content:"";position:absolute;right:1.25rem;top:50%;width:.7rem;height:.7rem;border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:translateY(-70%) rotate(45deg);transition:transform .25s ease}
.guia-desc[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.guia-desc summary:hover{background:var(--card-claro)}
.guia-desc__titulo{font-family:var(--font-head);font-weight:700;font-size:1.25rem;line-height:1.3}
.guia-desc__etiqueta{display:inline-block;padding:.1rem .6rem;border-radius:999px;background:var(--card);color:var(--ink);font-weight:700;font-size:1.125rem}
.guia-desc__cuerpo{padding:0 1.25rem 1.1rem}
.guia-desc dl{margin:0}
.guia-desc__fila{padding:.6rem 0;border-top:1px solid #F1E3D0}
.guia-desc dt{font-weight:800;color:var(--muted)}
.guia-desc dd{margin:0}
.guia-desc__enlace{margin:.5rem 0 0;font-weight:700}
.guia-firmar{margin:1.75rem 0 0;padding:1.4rem;border-radius:1.5rem;background:var(--grad-tarjeta);box-shadow:var(--sombra-tarjeta);border-left:.4rem solid var(--primary)}
.guia-firmar h2{font-size:1.6rem;margin:0 0 .6rem}
.guia-firmar p{margin:0 0 .75rem}
.guia-firmar__lista{list-style:none;counter-reset:firmar;margin:0 0 1rem;padding:0}
.guia-firmar__lista li{counter-increment:firmar;position:relative;padding:.6rem .9rem .6rem 3.1rem;margin:0 0 .5rem;border-radius:1rem;background:rgba(255,255,255,.75)}
.guia-firmar__lista li::before{content:counter(firmar);position:absolute;left:.75rem;top:.55rem;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--grad-boton);color:var(--on-primary);font-family:var(--font-head);font-weight:800;display:flex;align-items:center;justify-content:center}
.guia-firmar__pagare{margin-top:.5rem;padding:.75rem 1rem;border-radius:1rem;background:rgba(255,255,255,.75)}
.guia-firmar__pagare summary{cursor:pointer;font-weight:800;color:var(--muted);min-height:2.75rem;display:flex;align-items:center}
.guia-firmar__pagare p{margin:.25rem 0 0}
@media (prefers-reduced-motion:no-preference){.guia-desc[open] .guia-desc__cuerpo{animation:guia-entra .3s ease-out}}
/* El texto aprobado viene después de dos puntos («Qué es: paga…»); en tarjeta separada se muestra con mayúscula inicial */
.guia-desc dd::first-letter,.guia-dos__valor p:last-child::first-letter{text-transform:uppercase}
