/* Páginas internas de welfi.com.ar — SOLO lo que landing.css no cubre.
   Todo con prefijo .pg- para no chocar con las clases de la home.
   Requiere, en este orden: styles.css (tokens) → landing.css → paginas.css */

/* Hero corto de página interna: la home usa .h1 hasta 74px; acá el hero
   tiene que entrar en ~60% de la pantalla, así que baja un escalón. */
.pg-hero .hero-grid{padding-top:clamp(38px,4.2vw,62px);padding-bottom:clamp(34px,3.8vw,54px)}
.pg-hero .h1{font-size:clamp(31px,3.6vw,52px)}
.pg-hero .lead{font-size:clamp(16px,1.15vw,19px);margin-top:16px;max-width:52ch}
.pg-hero .actions{margin-top:24px}
.pg-hero .trust-line{margin-top:20px}
/* Las <img> llevan width/height en el HTML (evita saltos de layout al cargar); landing.css
   solo fija el ancho, así que sin height:auto el alto del atributo estiraba la ilustración. */
.pg-hero .pesos-card img{height:auto}

/* Bloque de conversión "en 3 líneas" (para quien llega de un anuncio) */
.pg-conv{padding:clamp(26px,3vw,40px) 0;border-bottom:1px solid var(--v5-border)}
.pg-conv-head{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.pg-conv-head img{width:32px;height:32px;flex-shrink:0}
.pg-conv .feature-list{grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:18px 28px;margin-top:20px}
.pg-conv .actions{margin-top:22px}

/* Cuerpo de lectura: el texto largo que leen Google y las IA */
.pg-read{max-width:720px;font-size:17px;line-height:1.7}
.pg-read h2{font-size:clamp(23px,2.1vw,30px);margin:42px 0 14px}
.pg-read h2:first-child{margin-top:0}
.pg-read h3{font-size:clamp(17px,1.5vw,20px);margin:28px 0 8px}
.pg-read p{margin:0 0 18px}
.pg-read ul{margin:0 0 20px;padding-left:22px;display:grid;gap:12px}
.pg-read a{text-decoration:underline;text-underline-offset:3px}
.pg-read>:last-child{margin-bottom:0}

/* Tablas: scroll horizontal propio, para que en celular no arrastren la página */
.pg-table{max-width:820px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin:0 0 8px;border:1px solid var(--v5-border);border-radius:var(--v5-radius-lg);background:#fff}
.pg-table table{border-collapse:collapse;width:100%;min-width:560px}
.pg-table th,.pg-table td{text-align:left;vertical-align:top;padding:13px 16px;border-bottom:1px solid var(--v5-border);font-size:15px;line-height:1.55}
.pg-table th{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--welfi-paper);color:var(--v5-text-primary)}
.pg-table tbody tr:last-child td{border-bottom:0}
.pg-table tr.on{background:var(--v5-brand-subtle);box-shadow:inset 3px 0 0 var(--v5-brand)}
.pg-hint{font-size:12.5px;color:var(--v5-text-tertiary);margin:0 0 24px}

/* Nota / aviso dentro del cuerpo */
.pg-note{max-width:720px;padding:16px 18px;border-radius:var(--v5-radius-md);background:var(--welfi-paper);border-left:3px solid var(--v5-brand);font-size:15.5px;line-height:1.65;margin:0 0 24px}
.pg-note.warn{background:var(--v5-warning-bg);border-left-color:var(--v5-warning)}

/* Fila de botones secundarios */
.pg-links{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 8px}
.pg-links a{display:inline-flex;align-items:center;white-space:nowrap;min-height:42px;padding:10px 16px;border-radius:var(--v5-radius-round);border:1px solid var(--v5-border);background:#fff;font-size:14px;font-weight:700;color:var(--welfi-navy);text-decoration:none}
.pg-links a:hover{border-color:rgba(50,70,255,.3);color:var(--v5-brand)}

/* Tarjetas por plazo: reusan .map-card de la home, pero son links */
.pg-plazos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:16px;margin-top:28px}
.pg-plazos .map-card{text-decoration:none;color:inherit}
.pg-plazos .map-cta{opacity:1;transform:none}

/* Banda de regulación y prueba social */
.pg-trust{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start;padding:clamp(22px,2.6vw,32px);border-radius:var(--v5-radius-2xl);background:#fff;border:1px solid var(--v5-border);box-shadow:var(--v5-shadow-sm)}
.pg-trust img{width:44px;height:44px}
.pg-trust p{font-size:15.5px;line-height:1.65;color:var(--v5-text-primary);max-width:80ch}
.pg-trust .proof{margin-top:10px;font-size:14px;color:var(--v5-text-secondary)}

/* Seguí leyendo */
.pg-next{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:16px;margin-top:24px}
.pg-next a{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:var(--v5-radius-xl);background:#fff;border:1px solid var(--v5-border);box-shadow:var(--v5-shadow-sm);text-decoration:none;transition:transform var(--v5-duration-normal) var(--v5-ease-smooth),box-shadow var(--v5-duration-normal) var(--v5-ease-smooth)}
.pg-next a:hover{transform:translateY(-3px);box-shadow:var(--v5-shadow-lg)}
.pg-next b{font-size:15.5px;line-height:1.3;color:var(--v5-text-primary);letter-spacing:-.01em}
.pg-next span{margin-top:auto;font-size:13.5px;font-weight:700;color:var(--v5-brand)}

/* Revelado al scroll como MEJORA, no como requisito: landing.css arranca .rv en
   opacity:0 y eso deja la página en blanco si el JS no corre. Acá .rv queda
   visible y sólo se esconde cuando la lógica agregó .pg-reveal al <body>. */
.rv{opacity:1;transform:none;filter:none}
.pg-reveal .rv{opacity:0;transform:translateY(38px) scale(.985);filter:blur(6px);transition:opacity .85s var(--v5-ease-smooth),transform .95s var(--v5-ease-smooth),filter .7s var(--v5-ease-smooth);will-change:opacity,transform,filter}
.pg-reveal .rv.in{opacity:1;transform:none;filter:none}
.pg-reveal .mock-shell.rv{transform:translateY(54px) scale(.97)}
.pg-reveal .sec-head.rv{transform:translateY(30px)}
.pg-reveal .mock-shell.rv.in,.pg-reveal .sec-head.rv.in{transform:none}
@media (prefers-reduced-motion:reduce){.pg-reveal .rv{opacity:1;transform:none;filter:none;transition:none}}

/* FAQ de página interna: mismo componente, alineado a la columna de lectura */
.pg-faq{margin-left:0;margin-right:0;max-width:760px}

/* Nav: en la home los links se esconden por debajo de 900px. Acá son la
   única navegación de la página, así que pasan a una fila deslizable. */
@media (max-width:900px){
  .pg-nav .nav-links{display:flex;margin-left:0;flex:1 0 100%;order:3;gap:18px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .pg-nav .nav-links::-webkit-scrollbar{display:none}
  .pg-nav .nav-in{flex-wrap:wrap;min-height:0;padding-top:10px;padding-bottom:10px;gap:10px}
  .pg-nav .nav-cta{margin-left:auto}
  .pg-nav .nav-cta .btn-ghost{display:none}
}
@media (max-width:900px){.pg-read{font-size:16px}}

/* Columna de lectura CENTRADA. En el prototipo el cuerpo iba pegado a la izquierda del
   .wrap de 1240px y en pantallas anchas quedaba media página vacía a la derecha. Todo lo
   que es lectura (texto, tablas, notas, FAQ, títulos de sección) comparte el mismo ancho
   y los mismos bordes; las tarjetas (.pg-plazos) pueden ser un poco más anchas. */
.pg-read,.pg-table,.pg-note,.pg-faq,.pg-hint,.pg-links{max-width:760px;margin-left:auto;margin-right:auto}
#cuerpo .pg-plazos,#welfi .pg-plazos{max-width:1040px;margin-left:auto;margin-right:auto}
#faq .sec-head,#welfi .sec-head{max-width:760px;margin-left:auto;margin-right:auto}
.pg-trust img{object-fit:contain}

/* Añadidos para el resto de las páginas internas */
.pg-nav .nav-links a[aria-current="page"]{color:var(--v5-brand)}
.pg-plazos .map-card:not(a){cursor:default}
.pg-plazos .map-card:not(a):hover{transform:none;box-shadow:var(--v5-shadow-sm)}
.pg-read ol{margin:0 0 20px;padding-left:22px;display:grid;gap:12px}
.pg-microcopy{margin:14px 0 0;font-size:13px;color:var(--v5-text-secondary)}
.pg-read .pg-sub{font-family:var(--v5-font-body);font-weight:800;letter-spacing:-.01em}