/* /grid/ · página de pruebas (8-oct-2026): sólo lo que la portada (portada-v1.css) no trae. Una idea por sección y menos texto que la /grid/ publicada. */
.pg-grid .aviso-et { cursor:default; padding:0 calc(20 * var(--u)); background:rgba(255, 255, 255, .82) }
.pg-grid .aviso-et:hover { border-color:var(--line); color:var(--ink-3) }
.hero-botones { margin-top:clamp(30px, 4.4svh, 54px); display:flex; gap:12px; flex-wrap:wrap; justify-content:center }
.pg-grid .hero .lede { margin-top:clamp(22px, 3svh, 36px) }

/* la demo, a petición: un fotograma de reposo y un botón grande. El componente de apps/landing/_demos/ lo sustituye al ponerse en «listo» */
.pg-grid #demo .h2 { margin-bottom:0 }
.pg-grid .demo-hueco { margin-top:clamp(36px, 4vw, 64px) }
.demo-prov { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(16 * var(--u)); text-align:center; padding:0 var(--gut);
  background:radial-gradient(120% 90% at 50% 38%, #f6f7f9 0%, #e9ebef 62%, #e1e4e9 100%) }
.demo-play { width:calc(104 * var(--u)); height:calc(104 * var(--u)); border-radius:50%; border:0; background:var(--ink); color:#fff; display:grid; place-items:center; cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255, 255, 255, .16), 0 22px 44px -18px rgba(14, 15, 18, .7); transition:transform .15s var(--ease-ui), box-shadow .15s var(--ease-ui) }
.demo-play:hover { transform:scale(1.05) }
.demo-play:active { transform:scale(.97) }
.demo-play svg { width:38%; height:38%; fill:currentColor; margin-left:7% }
.demo-prov-t { font-size:var(--fs-l); font-weight:500; letter-spacing:-.01em; color:var(--ink) }
.demo-prov-s { min-height:1.5em; max-width:26em; font-size:var(--fs-m); line-height:1.4; color:var(--ink-3) }
.demo-hueco[data-estado="listo"] .demo-prov, .demo-hueco[data-estado="cargando"] .demo-prov { display:none }
.demo-etiqueta { position:absolute; left:calc(20 * var(--u)); bottom:calc(20 * var(--u)); z-index:3; display:inline-flex; align-items:center; height:calc(36 * var(--u)); padding:0 calc(16 * var(--u)); border-radius:999px; background:rgba(255, 255, 255, .94);
  font-size:var(--fs-s); font-weight:500; color:var(--ink-3); box-shadow:var(--sombra-s) }
.demo-hueco[data-estado="listo"] .demo-etiqueta { display:none }

/* tres tarjetas sobrias: lo que el dosier cita, cada cosa con su fuente */
.sec-que { padding-top:clamp(48px, 6vw, 112px) }
.pg-grid #que .h2 { margin-bottom:clamp(28px, 3.2vw, 52px) }
.g-cards { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(14px, 1.6vw, 28px) }
.g-card { display:flex; flex-direction:column; gap:calc(14 * var(--u)); padding:calc(30 * var(--u)) calc(30 * var(--u)) calc(26 * var(--u)); border-radius:calc(28 * var(--u)); background:#fff; box-shadow:var(--sombra) }
.g-et { font-size:var(--fs-s); font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3) }
.g-t { font-size:calc(22 * var(--u)); font-weight:500; line-height:1.25; letter-spacing:-.015em }
.g-q { padding-left:.9em; border-left:2px solid var(--line-2); font-size:var(--fs-b); line-height:1.45; color:var(--ink-3) }
.g-q mark { padding:.05em .25em; margin:0 -.25em; border-radius:.25em; background:var(--marca); color:var(--ink) }
.g-f { margin-top:auto; padding-top:calc(6 * var(--u)); display:flex; flex-wrap:wrap; align-items:center; gap:.4em .6em; font-size:calc(15 * var(--u)) }
.g-n { font-size:var(--fs-s); line-height:1.4; color:var(--ink-3) }
/* la sección de la normativa (9-oct): una frase, tres verbos y una norma citada literal */
.que-p { margin:calc(14 * var(--u)) auto 0; text-align:center; max-width:34em; font-size:var(--fs-lede); line-height:1.45; color:var(--ink-2); text-wrap:pretty }
.n-verbos { list-style:none; margin:clamp(28px, 3vw, 48px) 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(14px, 1.6vw, 28px) }
.n-verbos li { display:flex; flex-direction:column; gap:calc(8 * var(--u)); padding:calc(24 * var(--u)) calc(28 * var(--u)) calc(26 * var(--u)); border-radius:calc(28 * var(--u)); background:#fff; box-shadow:var(--sombra) }
.n-verbos b { font-size:calc(28 * var(--u)); font-weight:500; line-height:1.1; letter-spacing:-.02em }
.n-verbos span { font-size:var(--fs-b); line-height:1.4; color:var(--ink-3) }
.g-cards.n-ej { grid-template-columns:minmax(0, 1fr); margin-top:clamp(14px, 1.6vw, 28px) }
.n-ej .g-card { padding-block:calc(24 * var(--u)) calc(22 * var(--u)) }
@media (max-width: 760px) { .n-verbos { grid-template-columns:minmax(0, 1fr) } }
.sec-cierre { text-align:center }
@media (max-width: 1100px) { .g-cards { grid-template-columns:minmax(0, 1fr) } .g-card { padding:26px 24px 22px } }
@media (max-width: 640px) { #demo-grid, #demo-parcela, #demo-inmo, #demo-logistica { aspect-ratio:4 / 5 } .hero-botones { flex-direction:column; align-items:stretch; width:100%; max-width:340px } .hero-botones .pill { width:100% } .demo-play { width:76px; height:76px } }
.g-t { text-wrap:pretty; text-wrap:balance }

/* el botón pequeño del real decreto (9-oct): secundario, abajo a la derecha del hero; en móvil, bajo los otros dos y centrado */
.pill-s { height:calc(46 * var(--u)); min-height:44px; padding:0 calc(22 * var(--u)); font-size:var(--fs-s); gap:.55em }
.pill-s svg { width:1.05em; height:1.05em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.hero-rd { position:absolute; right:clamp(16px, 3vw, 56px); bottom:clamp(22px, 5svh, 56px); display:flex; flex-direction:column; align-items:flex-end; gap:8px; text-align:right }
.hero-rd small { max-width:20em; font-size:var(--fs-s); line-height:1.35; color:var(--ink-3) }
.n-cta { margin:clamp(18px, 2vw, 30px) 0 0; text-align:center }
@media (max-width: 760px) { .hero-rd { position:static; align-items:center; text-align:center; margin-top:26px; width:100%; max-width:340px } .hero-rd .pill { width:100%; justify-content:center } .hero { padding-bottom:40px } }
.rd-et { display:flex; width:fit-content; align-items:center; gap:.65em; margin:0 auto clamp(18px, 2vw, 28px); padding:.5em 1.1em; border-radius:999px; background:#fff3d1; color:#7a5200; font-size:var(--fs-s); font-weight:500; line-height:1.3; text-align:center }
.rd-et span { flex:none; width:.55em; height:.55em; border-radius:50%; background:#d08a00 }
@media (max-width: 640px) { .rd-et { border-radius:18px; align-items:flex-start } .rd-et span { margin-top:.45em } }