/* HiCoworking · pages.css
   Páginas secundarias (DESIGN.md §5): servicio, legal, gracias y 404.
   Se enlaza después de site.css y solo usa sus tokens. */

/* ───────── Cabecera de página: el bloque de texto del hero, sin foto debajo ───────── */
.pagina{--t-display:clamp(2.75rem,1.6rem + 4.8vw,4.5rem)} /* el display grande es solo de la portada */
.pagina .t-display{letter-spacing:-.022em}
.pagina .hero__h1{max-width:var(--w-copy)}
.pagina .hero__h1 .l{text-wrap:balance}
@media (max-width:767px){
  /* "Con HiConsulting." mide 7,875 em: a 44 px no cabe en 343. El tamaño cede lo justo para que entre en una línea */
  .pagina .hero__h1.t-display{font-size:clamp(2.125rem,12.2vw - .25rem,2.75rem)}
}
.pagina .hero__lead .todo{margin-block:2px}
.pagina__fecha{color:var(--ink-2);margin-block-start:var(--s-4)}
.pagina--legal .hero{padding-block-end:var(--s-8)}
@media (min-width:1024px){
  .pagina--legal .hero{padding-block-end:var(--s-12)}
}

/* ───────── Foto de la página: tile 16:9, recorte 4:5 en móvil ───────── */
.pagina__foto{
  position:relative;overflow:hidden;border-radius:var(--r-tile);aspect-ratio:4/5;
  background:var(--bg-alt) var(--lqip-m,var(--lqip,none)) center/cover no-repeat;
}
.pagina__foto--4x3{aspect-ratio:4/3}
.pagina__foto picture{width:100%;height:100%}
.pagina__foto img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
@media (min-width:768px){
  .pagina__foto{aspect-ratio:16/9;background-image:var(--lqip,none)}
}

/* ───────── Precio: una lectura con su nota ───────── */
.lectura{margin-block-start:var(--s-12)}
.lectura .precio{row-gap:var(--s-1)}
.lectura .precio__num{text-wrap:balance}
.lectura .nota{max-width:var(--w-prose)}
.lectura .nota .todo{margin-block:2px}
.lectura + .prosa{margin-block-start:var(--s-8)}
@media (min-width:1024px){
  .lectura{margin-block-start:var(--head-gap)}
  .lectura + .prosa{margin-block-start:var(--s-12)}
}

/* /servicios/: las cinco filas del ledger en su banda, sin cabecera dentro */
.banda--lista{margin-block-start:var(--s-12);padding-block:var(--s-2)}
.banda--lista .ledger{margin-block-start:0}
@media (min-width:768px){
  .banda--lista{padding-block:var(--s-4)}
}
@media (min-width:1024px){
  .banda--lista{margin-block-start:var(--head-gap);padding:var(--s-6) var(--s-16)}
}
.banda--lista + .prosa{margin-block-start:var(--s-12)}

/* ───────── Prosa a 62ch ───────── */
.prosa{max-width:var(--w-prose)}
.prosa > * + *{margin-block-start:var(--s-4)}
.prosa h2{
  font-size:1.3125rem;font-weight:600;line-height:1.19;letter-spacing:-.008em;
  text-wrap:balance;
}
.prosa > * + h2{margin-block-start:var(--s-12)}
.prosa h2 + *{margin-block-start:var(--s-3)}
.prosa a:not(.ghost){color:var(--link);text-decoration:none}
.prosa .ghost{margin-block-start:var(--s-1)}
.prosa ul{display:grid;gap:var(--s-2);padding-inline-start:1.25em;list-style:disc}
.prosa li::marker{color:var(--ink-2)}
.prosa strong{font-weight:600}
.prosa .todo{margin-block:2px}

/* Datos del titular: etiqueta y valor, una hairline entre filas */
.datos > div{display:grid;gap:2px;padding-block:var(--s-3)}
.datos > div + div{border-block-start:1px solid var(--line)}
.datos dt{font-size:var(--t-meta);line-height:1.43;letter-spacing:0;font-weight:500;color:var(--ink-2)}
.datos dd a{white-space:nowrap}
@media (min-width:600px){
  .datos > div{grid-template-columns:12rem minmax(0,1fr);gap:var(--s-6);align-items:baseline}
}

/* ───────── Páginas cortas (gracias, 404): el pie queda abajo ───────── */
.es-corta{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
.es-corta main{flex:1 0 auto}
.es-corta .pie{margin-block-start:var(--s-16)}

/* ───────── Movimiento ───────── */
@media (hover:hover) and (pointer:fine){
  .prosa a:not(.ghost):hover{text-decoration:underline}
}
@media (prefers-reduced-motion:no-preference){
  /* Carga: la foto se asienta como la del hero, nunca transparente (LCP) */
  .pagina__foto img{animation:asentar 1200ms var(--ease-out) both}
}

/* ───────── Página de servicio: precio y llamada a la acción en la primera pantalla ───────── */
.pagina--servicio .hero{padding-block-end:var(--s-12)}
.pagina--servicio .hero .lectura{margin-block-start:var(--s-6)}
.pagina--servicio .hero .hero__cta{margin-block-start:var(--s-6)}
.precio--texto{color:var(--ink)}
.prosa--tras-foto{margin-block-start:var(--s-12)}
.pagina .hero__lead a{color:var(--link);text-decoration:none}

/* ───────── Cierre "Hablemos." en las secundarias: titular arriba, texto y formulario debajo ───────── */
.pagina .contacto__txt{margin-block-start:calc(var(--s-4) - var(--s-12))} /* el lead, pegado a su titular */
.pagina .contacto__txt .t-lead{margin-block-start:0}
@media (min-width:768px){
  .pagina .contacto__grid{grid-template-areas:"t t" "txt form";row-gap:var(--head-gap)}
  .pagina .contacto__head{grid-area:t}
  .pagina .contacto__txt{grid-area:txt;margin-block-start:0;padding-block-start:var(--s-4)}
  .pagina .form{grid-area:form}
}