/* ═══════════════════════════════════════════════════════════════════════════
   CUADERNO DE CAMPO · web pública · «Amanecer sobre el parcelario»
   Paleta del login aprobado (porcelana · tinta verde-pizarra · esmeralda) y las
   tipografías del producto (Plus Jakarta Sans · Inter Tight · JetBrains Mono).
   El cian se reserva a los vectores del mapa; el ámbar, a los plazos legales.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  color-scheme: light;

  --bg:        #F4F8F4;
  --bg-2:      #EAF1EB;
  --card:      #FFFFFF;
  --tinta:     #17332A;
  --tinta-2:   #2F4A3E;
  --gris:      #5B6E64;
  --gris-2:    #86978D;
  --linea:     #D9E3DC;
  --linea-2:   #CBD9CF;

  --verde:     #059669;
  --esmeralda: #10B981;
  --marca:     #16A34A;
  --marca-hi:  #22C55E;
  --verde-osc: #047857;
  --verde-soft:#ECFDF5;

  --cian:      #06B6D4;
  --cian-osc:  #0891B2;
  --cian-txt:  #0E7490;
  --cian-soft: #ECFEFF;
  --cian-line: #A5F3FC;

  --ambar:     #D97706;
  --ambar-hi:  #F59E0B;
  --ambar-txt: #B45309;
  --ambar-soft:#FFFBEB;

  --noche:     #0F1F19;
  --noche-txt: #F4F8F4;

  --display: 'Plus Jakarta Sans','Inter Tight',system-ui,-apple-system,sans-serif;
  --texto:   'Inter Tight','Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --dato:    'JetBrains Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;

  --sombra:      0 1px 2px rgba(23,51,42,.05), 0 8px 24px -12px rgba(23,51,42,.16);
  --sombra-alta: 0 2px 6px rgba(23,51,42,.08), 0 48px 90px -36px rgba(23,51,42,.42);
  --radio: 12px;
  --radio-g: 18px;

  --ancho: 1240px;
  --gut: clamp(20px, 5vw, 100px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--tinta);
  font-family:var(--texto); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums;
  overflow-x:hidden;
}
h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:800; letter-spacing:-.03em; line-height:1.04; text-wrap:balance; }
p{ margin:0; }
a{ color:var(--verde-osc); }
img,svg{ max-width:100%; }
.pjs{ font-family:var(--display); }
.dato{ font-family:var(--dato); font-variant-numeric:tabular-nums; }
.visualmente-oculto{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid var(--cian-osc); outline-offset:3px; border-radius:4px; }

.salto{ position:absolute; left:-9999px; top:0; z-index:99; background:var(--card); color:var(--tinta); padding:12px 18px; border:1px solid var(--cian-osc); font-weight:600; }
.salto:focus{ left:12px; top:12px; }

.contenedor{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:var(--gut); }

/* ── Instrumentos ─────────────────────────────────────────────────────────── */
.ceja{ display:inline-flex; align-items:center; gap:9px; font-family:var(--dato); font-size:11.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--marca); }
.ceja::before{ content:""; width:8px; height:8px; flex:none; border:1.5px solid currentColor; transform:rotate(45deg); border-radius:1px; }
.ceja--gris{ color:var(--gris-2); } .ceja--cian{ color:var(--cian-osc); } .ceja--ambar{ color:var(--ambar-hi); } .ceja--esmeralda{ color:#34D399; }

.ico{ width:22px; height:22px; stroke:currentColor; stroke-width:1.75; fill:none; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.ico-s{ width:16px; height:16px; stroke:currentColor; stroke-width:1.75; fill:none; stroke-linecap:round; stroke-linejoin:round; flex:none; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; height:54px; padding:0 26px; border-radius:var(--radio); border:1px solid transparent; font-family:var(--texto); font-weight:600; font-size:16px; letter-spacing:-.01em; white-space:nowrap; text-decoration:none; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease; }
.btn--marca{ background:linear-gradient(135deg,var(--marca-hi),var(--marca)); color:#fff; box-shadow:0 1px 0 rgba(0,0,0,.08), 0 14px 28px -14px rgba(22,163,74,.7); }
.btn--marca:hover{ transform:translateY(-2px); box-shadow:0 2px 0 rgba(0,0,0,.08), 0 20px 34px -14px rgba(22,163,74,.75); }
.btn--linea{ border-color:var(--linea-2); color:var(--tinta); background:var(--card); }
.btn--linea:hover{ border-color:var(--cian-osc); color:var(--cian-txt); transform:translateY(-2px); }
.btn--oscuro{ border-color:rgba(244,248,244,.24); color:var(--noche-txt); background:transparent; }
.btn--oscuro:hover{ border-color:#34D399; color:#34D399; transform:translateY(-2px); }
.btn--peq{ height:44px; padding:0 20px; font-size:14.5px; }
.btn .flecha{ width:18px; height:18px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; transition:transform .18s ease; }
.btn:hover .flecha{ transform:translateX(3px); }

/* ── Cabecera ─────────────────────────────────────────────────────────────── */
.nav{ position:sticky; top:0; z-index:40; background:rgba(244,248,244,.88); backdrop-filter:blur(14px) saturate(1.3); border-bottom:1px solid var(--linea); }
.nav__in{ display:flex; align-items:center; gap:28px; height:72px; }
.marca{ display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--tinta); margin-right:auto; }
.marca img{ width:28px; height:28px; }
.marca__txt{ font-family:var(--display); font-weight:800; font-size:17px; letter-spacing:-.02em; line-height:1.05; display:block; }
.marca__sb{ font-family:var(--dato); font-size:10px; letter-spacing:.16em; color:var(--gris-2); text-transform:uppercase; display:block; margin-top:2px; }
.nav__enlaces{ display:flex; gap:28px; }
.nav__enlaces a{ text-decoration:none; font-size:14.5px; font-weight:500; color:var(--gris); padding-bottom:2px; border-bottom:1.5px solid transparent; transition:color .16s, border-color .16s; }
.nav__enlaces a:hover,.nav__enlaces a[aria-current="page"]{ color:var(--tinta); border-bottom-color:var(--marca); }
.nav__acceder{ text-decoration:none; font-size:14.5px; font-weight:600; color:var(--tinta); }
.nav__toggle{ display:none; width:44px; height:44px; border:1px solid var(--linea-2); border-radius:10px; background:var(--card); color:var(--tinta); align-items:center; justify-content:center; cursor:pointer; }
@media (max-width:1000px){
  .nav__enlaces{ display:none; position:absolute; left:0; right:0; top:72px; flex-direction:column; gap:0; background:var(--bg); border-bottom:1px solid var(--linea); padding:8px var(--gut) 16px; }
  .nav__enlaces a{ padding:14px 0; border-bottom:1px solid var(--linea); font-size:16px; }
  .nav[data-abierta="true"] .nav__enlaces{ display:flex; }
  .nav__acceder{ display:none; }
  .nav__toggle{ display:inline-flex; }
}
@media (max-width:560px){ .nav__cta{ display:none; } }

/* ── Portada ──────────────────────────────────────────────────────────────── */
.portada{ position:relative; padding-block:clamp(48px,7vw,96px) clamp(40px,5vw,72px); overflow:hidden; }
.portada::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(900px 520px at 78% 40%, rgba(16,185,129,.10), transparent 65%); }
.portada__rej{ position:relative; display:grid; grid-template-columns:minmax(0,600px) minmax(0,1fr); gap:clamp(28px,4vw,56px); align-items:center; }
/* minmax(0,1fr) y no 1fr: con `auto` el contenido de la ventana (pestaña sin salto de línea)
   ensancharía la columna más que el viewport y arrastraría al texto de la portada. */
@media (max-width:1100px){ .portada__rej{ grid-template-columns:minmax(0,1fr); } .escena{ min-width:0; } }
.portada__txt{ display:flex; flex-direction:column; gap:26px; }
.portada__cejas{ display:flex; gap:18px; flex-wrap:wrap; }
.portada h1{ font-size:clamp(2.7rem,6vw,5.25rem); }
.portada h1 em{ font-style:normal; color:var(--cian-osc); }
.portada__sub{ font-size:clamp(1.05rem,1.5vw,1.25rem); line-height:1.5; color:var(--gris); max-width:540px; }
.portada__sub b{ color:var(--tinta); font-weight:600; }
.portada__acc{ display:flex; gap:14px; flex-wrap:wrap; }
.cifras{ display:flex; gap:clamp(24px,3vw,44px); flex-wrap:wrap; padding-top:28px; margin-top:6px; border-top:1px solid var(--linea); }
.cifra__n{ font-family:var(--display); font-size:32px; font-weight:800; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; }
.cifra__t{ font-family:var(--dato); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gris-2); margin-top:8px; display:block; }

/* Entrada orquestada */
.rev{ animation:cdcSube .8s cubic-bezier(.22,.9,.28,1) both; }
@keyframes cdcSube{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
.flota{ animation:cdcFlota 6s ease-in-out infinite alternate; }
@keyframes cdcFlota{ from{ transform:translateY(0); } to{ transform:translateY(-10px); } }

/* Réplica del shell de la aplicación */
.escena{ position:relative; }
/* En escritorio la ventana llega hasta el borde del viewport: el mapa gana anchura y el
   corte del borde derecho es deliberado (radio solo en el lado izquierdo). */
@media (min-width:1101px){ .escena{ margin-right:calc(-1 * var(--gut)); } .escena .ventana{ border-radius:16px 0 0 16px; border-right:0; } }
.ventana{ background:var(--card); border-radius:16px; border:1px solid var(--linea-2); box-shadow:var(--sombra-alta); overflow:hidden; }
.ventana__barra{ height:44px; display:flex; align-items:center; gap:8px; padding:0 16px; background:#F8FAF8; border-bottom:1px solid #E3EBE5; }
.punto{ width:11px; height:11px; border-radius:50%; background:var(--linea); }
.pestana{ margin-left:12px; display:inline-flex; align-items:center; gap:8px; height:28px; padding:0 12px; border-radius:8px; background:var(--card); border:1px solid #E3EBE5; font-size:12px; font-weight:500; color:var(--tinta-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:0 1 auto; }
.app{ display:grid; grid-template-columns:212px minmax(0,1fr); height:560px; }
.side{ background:#0A0E1A; border-right:1px solid rgba(255,255,255,.04); padding:14px 10px; display:flex; flex-direction:column; gap:3px; }
.side__marca{ display:flex; align-items:center; gap:9px; padding:6px 10px 16px; color:#fff; font-family:var(--display); font-weight:700; font-size:13.5px; letter-spacing:-.01em; }
.side__marca i{ width:22px; height:22px; border-radius:6px; background:linear-gradient(135deg,var(--marca-hi),var(--marca)); display:inline-block; }
.side__seccion{ font-family:var(--dato); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:#5C6779; padding:10px 10px 4px; }
.item{ display:flex; align-items:center; gap:10px; height:34px; padding:0 10px; border-radius:8px; color:#AAB4C3; font-size:12.5px; font-weight:500; }
.item.activo{ background:#1B2233; color:#fff; box-shadow:inset 3px 0 0 rgba(34,197,94,.9); }
.main{ display:flex; flex-direction:column; min-width:0; }
.cab{ height:60px; display:flex; align-items:center; gap:12px; padding:0 18px; background:rgba(255,255,255,.85); border-bottom:1px solid #E2E8F0; }
.miga{ font-size:12.5px; color:#475569; display:flex; align-items:center; gap:8px; }
.miga b{ color:#0B1120; font-weight:600; }
.pill-ej{ margin-left:auto; font-family:var(--dato); font-size:10.5px; font-weight:500; letter-spacing:.06em; border:1px solid #CBD5E1; border-radius:999px; padding:5px 11px; color:#1E293B; background:#fff; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.avatar{ width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#15803D,#16A34A); color:#fff; font-size:11px; font-weight:700; display:grid; place-items:center; flex:none; }
.cuerpo{ flex:1; position:relative; display:grid; grid-template-columns:minmax(0,1fr); min-height:0; }
.mapa{ position:relative; overflow:hidden; background:#DED3B8; }
.mapa canvas{ display:block; width:100%; height:100%; }
/* La ficha del recinto flota sobre el mapa, como el panel lateral de la aplicación pero sin robarle anchura */
.panel{ position:absolute; top:12px; right:12px; width:212px; background:rgba(248,250,252,.94); backdrop-filter:blur(8px); border:1px solid #E2E8F0; border-radius:12px; padding:10px; display:flex; flex-direction:column; gap:8px; overflow:hidden; box-shadow:0 12px 30px -18px rgba(15,23,42,.35); }
.panel__t{ font-family:var(--dato); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:#64748B; padding:2px 2px 0; }
.stat{ background:#fff; border:1px solid #E2E8F0; border-radius:12px; padding:11px 13px; box-shadow:0 1px 2px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.06); }
.stat--sel{ border-color:var(--cian-line); background:#F0FDFF; }
.stat__k{ font-size:10.5px; color:#64748B; letter-spacing:.02em; }
.stat__v{ font-family:var(--dato); font-size:15px; font-weight:600; color:#0B1120; margin-top:2px; }
.stat__v--txt{ font-family:var(--texto); font-size:13.5px; }
.stat__v small{ font-size:10.5px; font-weight:500; color:#64748B; margin-left:4px; }
.estado{ display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:600; border-radius:6px; padding:3px 8px; }
.estado--ok{ background:var(--verde-soft); color:var(--verde-osc); } .estado--aviso{ background:var(--ambar-soft); color:var(--ambar-txt); }
.hud{ position:absolute; left:12px; top:12px; display:flex; gap:6px; flex-wrap:wrap; }
.hud span{ font-family:var(--dato); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; padding:4px 8px; border-radius:6px; background:rgba(255,255,255,.9); border:1px solid #CBD5E1; color:#334155; }
.hud span.on{ color:var(--cian-osc); border-color:var(--cian-osc); background:var(--cian-soft); }
.escala{ position:absolute; left:14px; bottom:14px; display:flex; align-items:center; gap:8px; font-family:var(--dato); font-size:10px; letter-spacing:.1em; color:#334155; text-transform:uppercase; }
.escala i{ width:56px; height:5px; border:1px solid #334155; border-bottom:0; display:block; }
.medidas{ position:absolute; right:14px; bottom:14px; display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.medidas span{ font-family:var(--dato); font-size:11.5px; background:rgba(255,255,255,.94); border:1px solid #CBD5E1; border-radius:8px; padding:7px 11px; color:#0B1120; }
.medidas span.sel{ border-color:var(--cian-line); } .medidas b{ font-weight:600; } .medidas .sel b{ color:var(--cian-txt); }

.chip-flot{ position:absolute; display:flex; align-items:center; gap:11px; background:var(--card); border:1px solid var(--linea-2); border-radius:14px; padding:11px 15px; box-shadow:0 22px 44px -22px rgba(23,51,42,.4), 0 1px 3px rgba(23,51,42,.08); font-size:13px; font-weight:600; color:var(--tinta); white-space:nowrap; }
.chip-flot small{ display:block; font-weight:500; color:var(--gris); font-size:11.5px; margin-top:1px; }
.chip-flot .ic{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none; }
.chip-flot--a{ left:-52px; top:110px; } .chip-flot--b{ left:-24px; bottom:96px; }
@media (max-width:1100px){
  .app{ grid-template-columns:1fr; height:auto; } .side{ display:none; }
  .mapa{ height:320px; }
  .panel{ position:static; width:auto; border:0; border-top:1px solid #E2E8F0; border-radius:0; box-shadow:none; backdrop-filter:none; background:#F8FAFC; padding:12px; flex-direction:row; flex-wrap:wrap; }
  .panel .stat{ flex:1 1 140px; } .panel__t{ flex-basis:100%; }
  .chip-flot--a{ left:auto; right:12px; top:56px; } .chip-flot--b{ left:12px; bottom:auto; top:56px; display:none; }
}
@media (max-width:560px){ .chip-flot{ display:none; } }

/* ── Franja de fuentes ────────────────────────────────────────────────────── */
.fuentes{ padding-bottom:clamp(40px,5vw,80px); }
.fuentes__in{ display:flex; align-items:center; gap:40px; padding:26px 0; border-top:1px solid var(--linea); border-bottom:1px solid var(--linea); flex-wrap:wrap; }
.fuentes__t{ font-family:var(--dato); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gris-2); white-space:nowrap; }
.fuentes__lista{ display:flex; gap:clamp(18px,2.5vw,36px); margin-left:auto; align-items:center; flex-wrap:wrap; }
.fuentes__lista span{ font-family:var(--display); font-weight:700; font-size:15px; color:var(--tinta-2); letter-spacing:-.01em; white-space:nowrap; }

/* ── Plazo legal ──────────────────────────────────────────────────────────── */
.plazo{ background:var(--noche); color:var(--noche-txt); position:relative; overflow:hidden; }
.plazo::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(700px 400px at 12% 50%, rgba(245,158,11,.14), transparent 60%), repeating-linear-gradient(-45deg, transparent 0 26px, rgba(255,255,255,.018) 26px 52px); }
.plazo__in{ position:relative; padding-block:clamp(44px,5vw,80px); display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:center; }
@media (max-width:900px){ .plazo__in{ grid-template-columns:1fr; } }
.reloj{ display:flex; align-items:baseline; gap:18px; margin-top:18px; }
.reloj__n{ font-family:var(--display); font-size:clamp(4.5rem,9vw,8.25rem); font-weight:800; letter-spacing:-.05em; line-height:.85; color:var(--ambar-hi); font-variant-numeric:tabular-nums; }
.reloj__u{ font-family:var(--dato); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:rgba(244,248,244,.62); line-height:1.5; }
.plazo__txt{ font-size:clamp(1.1rem,1.6vw,1.375rem); line-height:1.45; color:rgba(244,248,244,.9); max-width:640px; }
.plazo__txt b{ color:#fff; font-weight:600; }
.citas{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.cita{ font-family:var(--dato); font-size:11px; letter-spacing:.05em; border:1px solid rgba(244,248,244,.26); color:rgba(244,248,244,.8); border-radius:8px; padding:6px 11px; }
.cita--viva{ border-color:var(--ambar-hi); color:var(--ambar-hi); }

/* ── Secciones ────────────────────────────────────────────────────────────── */
.sec{ padding-block:clamp(60px,8vw,120px); }
.sec--hueco{ background:var(--bg-2); }
.sec--compacta{ padding-block:clamp(40px,5vw,80px); }
.sec__cab{ max-width:720px; display:flex; flex-direction:column; gap:18px; margin-bottom:clamp(36px,4vw,56px); }
.sec__cab h2{ font-size:clamp(2rem,3.6vw,3.25rem); }
.sec__cab p{ font-size:clamp(1rem,1.3vw,1.125rem); color:var(--gris); max-width:640px; }
.sec__cab--dos{ max-width:none; flex-direction:row; align-items:flex-end; justify-content:space-between; gap:40px; }
.sec__cab--dos > div{ max-width:680px; display:flex; flex-direction:column; gap:18px; }
.sec__cab--dos > p{ max-width:400px; padding-bottom:6px; }
@media (max-width:900px){ .sec__cab--dos{ flex-direction:column; align-items:flex-start; } }

/* Pasos */
.pasos{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
@media (max-width:1000px){ .pasos{ grid-template-columns:1fr; } }
.paso{ background:var(--card); border:1px solid var(--linea); border-radius:var(--radio-g); padding:28px; display:flex; flex-direction:column; gap:14px; }
.paso__n{ font-family:var(--dato); font-size:11px; letter-spacing:.16em; color:var(--cian-osc); }
.paso h3{ font-size:22px; }
.paso p{ color:var(--gris); font-size:15px; }
.micro{ margin-top:auto; background:#F8FAFC; border:1px solid #E2E8F0; border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:9px; font-size:12.5px; color:#1E293B; }
.micro__t{ font-family:var(--display); font-weight:700; font-size:13px; color:#0B1120; }
.micro__fila{ display:flex; justify-content:space-between; align-items:baseline; }
.campo-m{ display:flex; flex-direction:column; gap:3px; }
.campo-m label{ font-size:10.5px; color:#64748B; }
.campo-m div{ height:34px; border:1px solid #CBD5E1; border-radius:8px; background:#fff; display:flex; align-items:center; padding:0 10px; font-size:12.5px; justify-content:space-between; gap:8px; }
.dos{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.tres{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; text-align:center; }
.tres div{ background:#fff; border:1px solid #E2E8F0; border-radius:8px; padding:8px 4px; }
.tres b{ display:block; font-family:var(--dato); font-weight:600; font-size:15px; }
.tres small{ font-size:9.5px; color:#64748B; }
.check{ display:flex; align-items:center; gap:9px; font-size:12.5px; }
.check .m{ width:18px; height:18px; border-radius:50%; background:var(--verde-soft); color:var(--verde-osc); display:grid; place-items:center; flex:none; }
.check .m--aviso{ background:var(--ambar-soft); color:var(--ambar-txt); }
.micro__nota{ margin-top:4px; padding-top:10px; border-top:1px solid #E2E8F0; font-size:11.5px; color:#64748B; }
.barra{ height:6px; border-radius:999px; background:#E2E8F0; overflow:hidden; }
.barra i{ display:block; height:100%; width:100%; background:linear-gradient(90deg,var(--esmeralda),var(--marca)); }
.boton-m{ height:38px; border-radius:9px; display:flex; align-items:center; justify-content:center; gap:8px; font-weight:600; font-size:13px; }
.boton-m--marca{ background:linear-gradient(135deg,var(--marca-hi),var(--marca)); color:#fff; }
.boton-m--tinta{ background:#0B1120; color:#fff; flex:1; font-size:12.5px; height:36px; }
.boton-m--linea{ border:1px solid #CBD5E1; background:#fff; color:#1E293B; flex:1; font-size:12.5px; height:36px; }

/* Bento */
.bento{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:236px; gap:16px; }
.celda-b{ background:var(--card); border:1px solid var(--linea); border-radius:var(--radio-g); padding:26px; display:flex; flex-direction:column; gap:10px; position:relative; overflow:hidden; transition:transform .22s cubic-bezier(.22,.9,.28,1), box-shadow .22s ease, border-color .22s ease; }
.celda-b:hover{ transform:translateY(-3px); box-shadow:var(--sombra); border-color:var(--linea-2); }
.celda-b h3{ font-size:17px; font-weight:700; letter-spacing:-.02em; }
.celda-b p{ font-size:14px; color:var(--gris); line-height:1.5; }
.celda-b .ruta{ margin-top:auto; font-family:var(--dato); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--gris-2); }
.celda-b--2x2{ grid-column:span 2; grid-row:span 2; padding:0; }
.celda-b--2x1{ grid-column:span 2; flex-direction:row; align-items:center; gap:28px; }
.celda-b--2x1 > div:first-child{ display:flex; flex-direction:column; gap:10px; flex:1; }
.celda-b__fondo{ position:absolute; inset:0; overflow:hidden; }
.celda-b__fondo canvas{ display:block; width:100%; height:100%; }
.celda-b__velo{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.96) 78%); }
.celda-b__pie{ position:relative; margin-top:auto; padding:26px; display:flex; flex-direction:column; gap:10px; }
.celda-b__pie h3{ font-size:24px; }
.ic-b{ width:40px; height:40px; border-radius:12px; background:var(--verde-soft); color:var(--verde-osc); display:grid; place-items:center; flex:none; }
.bloques-mini{ width:210px; flex:none; display:flex; flex-direction:column; gap:6px; }
.bloques-mini__t{ font-family:var(--dato); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gris-2); margin-bottom:2px; }
.bloques-mini__rej{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.bloques-mini__rej span{ height:22px; border-radius:5px; background:var(--verde-soft); color:var(--verde-osc); display:grid; place-items:center; font-family:var(--dato); font-size:10px; font-weight:600; }
.bloques-mini__rej span.extra{ background:var(--ambar-soft); color:var(--ambar-txt); font-size:9px; }
.bloques-mini__pie{ font-family:var(--dato); font-size:10px; color:var(--gris-2); margin-top:2px; }
@media (max-width:1000px){ .bento{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:auto; } .celda-b{ min-height:200px; } .celda-b--2x2{ min-height:380px; } .celda-b--2x1{ flex-direction:column; align-items:stretch; } .bloques-mini{ width:100%; } }
@media (max-width:560px){ .bento{ grid-template-columns:1fr; } .celda-b--2x2,.celda-b--2x1{ grid-column:span 1; grid-row:span 1; } }

/* Índice del CUE */
.bloques{ display:grid; grid-template-columns:1fr 1fr; gap:0 64px; }
@media (max-width:900px){ .bloques{ grid-template-columns:1fr; } .bloques > div:first-child .bloque:last-child{ border-bottom:0; } }
.bloque{ display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:18px; align-items:baseline; padding:18px 0; border-top:1px solid var(--linea); }
.bloque:last-child{ border-bottom:1px solid var(--linea); }
.bloque__n{ font-family:var(--dato); font-size:14px; font-weight:600; color:var(--cian-osc); }
.bloque__n--extra{ color:var(--ambar-txt); }
.bloque__t{ font-weight:600; font-size:16.5px; letter-spacing:-.01em; color:var(--tinta); }
.bloque__d{ display:block; font-weight:400; color:var(--gris); font-size:14px; margin-top:3px; line-height:1.5; }
.sub{ display:inline-flex; gap:5px; flex-wrap:wrap; margin-top:8px; }
.sub span{ font-family:var(--dato); font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--gris); border:1px solid var(--linea); border-radius:6px; padding:2px 7px; }
.ok{ font-family:var(--dato); font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--verde-osc); background:var(--verde-soft); border-radius:6px; padding:4px 9px; white-space:nowrap; }
.ok--extra{ color:var(--ambar-txt); background:var(--ambar-soft); }
@media (max-width:560px){ .bloque{ grid-template-columns:44px minmax(0,1fr); } .bloque .ok{ grid-column:2; justify-self:start; } }
.bloques__pie{ display:flex; gap:clamp(24px,4vw,56px); align-items:center; margin-top:40px; flex-wrap:wrap; }
.bloques__pie p{ margin-left:auto; max-width:460px; font-size:15.5px; color:var(--gris); }

/* Editor cartográfico */
.editor{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(30px,5vw,72px); align-items:center; }
@media (max-width:1000px){ .editor{ grid-template-columns:1fr; } }
.editor__txt{ display:flex; flex-direction:column; gap:18px; }
.editor__txt h2{ font-size:clamp(1.9rem,3.2vw,2.875rem); }
.editor__txt > p{ font-size:17.5px; color:var(--gris); }
.rasgos{ display:flex; flex-direction:column; margin-top:10px; }
.rasgo{ display:grid; grid-template-columns:78px minmax(0,1fr); gap:16px; padding:16px 0; border-top:1px solid var(--linea-2); }
.rasgo:last-child{ border-bottom:1px solid var(--linea-2); }
.rasgo__k{ font-family:var(--dato); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--cian-osc); padding-top:4px; }
.rasgo b{ font-weight:600; display:block; }
.rasgo span{ display:block; color:var(--gris); font-size:14.5px; margin-top:2px; }
.ventana--editor{ border-radius:var(--radio-g); }
.editor__barra{ height:48px; display:flex; align-items:center; gap:8px; padding:0 14px; border-bottom:1px solid #E2E8F0; background:#fff; }
.editor__barra .t{ font-family:var(--display); font-weight:700; font-size:13.5px; color:#0B1120; margin-right:10px; white-space:nowrap; }
.editor__barra .hud{ position:static; }
.editor__barra .crs{ margin-left:auto; font-family:var(--dato); font-size:10px; letter-spacing:.08em; color:#64748B; white-space:nowrap; }
.editor__lienzo{ position:relative; height:470px; overflow:hidden; background:#DED3B8; }
.editor__lienzo canvas{ display:block; width:100%; height:100%; }
@media (max-width:560px){ .editor__lienzo{ height:340px; } .editor__barra .crs{ display:none; } }

/* Roles */
.roles{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
@media (max-width:1000px){ .roles{ grid-template-columns:1fr; } }
.rol{ background:var(--card); border:1px solid var(--linea); border-radius:var(--radio-g); padding:32px; display:flex; flex-direction:column; gap:16px; transition:transform .22s cubic-bezier(.22,.9,.28,1), box-shadow .22s ease; }
.rol:hover{ transform:translateY(-4px); box-shadow:var(--sombra-alta); }
.rol h3{ font-size:24px; }
.rol > p{ color:var(--gris); font-size:15.5px; }
.rol ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.rol li{ display:grid; grid-template-columns:18px minmax(0,1fr); gap:10px; font-size:14.5px; color:var(--tinta-2); }
.rol li::before{ content:""; width:7px; height:7px; margin-top:8px; border:1.5px solid var(--esmeralda); transform:rotate(45deg); }
.rol .btn{ margin-top:auto; align-self:flex-start; }

/* Plataforma */
.plataforma{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--linea); border:1px solid var(--linea); border-radius:var(--radio-g); overflow:hidden; }
@media (max-width:1000px){ .plataforma{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .plataforma{ grid-template-columns:1fr; } }
.plat{ background:var(--card); padding:30px 28px; display:flex; flex-direction:column; gap:10px; }
.plat .ico{ color:var(--verde-osc); }
.plat h3{ font-size:17px; font-weight:700; }
.plat p{ font-size:14px; color:var(--gris); }

/* Cierre */
.cierre{ background:var(--noche); color:var(--noche-txt); position:relative; overflow:hidden; }
.cierre::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(800px 460px at 82% 30%, rgba(16,185,129,.18), transparent 62%); }
.cierre__in{ position:relative; padding-block:clamp(60px,8vw,112px); display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(30px,5vw,72px); align-items:center; }
@media (max-width:1000px){ .cierre__in{ grid-template-columns:1fr; } }
.cierre__txt{ display:flex; flex-direction:column; gap:22px; }
.cierre h2{ font-size:clamp(2.1rem,3.9vw,3.5rem); color:var(--noche-txt); }
.cierre__txt > p{ font-size:clamp(1.05rem,1.4vw,1.1875rem); color:rgba(244,248,244,.8); max-width:560px; }
.cierre__acc{ display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; }
.tarjeta-contacto{ border:1px solid rgba(244,248,244,.2); border-radius:var(--radio-g); padding:32px; display:grid; grid-template-columns:1fr 1fr; gap:26px; background:rgba(255,255,255,.03); }
@media (max-width:560px){ .tarjeta-contacto{ grid-template-columns:1fr; padding:24px; } }
.tarjeta-contacto dt{ font-family:var(--dato); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(244,248,244,.55); }
.tarjeta-contacto dd{ margin:6px 0 0; font-size:15.5px; }
.tarjeta-contacto a{ color:#34D399; text-decoration:none; } .tarjeta-contacto a:hover{ text-decoration:underline; }

/* Pie */
.pie{ padding:34px 0; background:var(--bg-2); border-top:1px solid var(--linea); }
.pie__in{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.pie p{ font-size:14px; color:var(--gris-2); }
.pie__legal{ display:flex; gap:18px; flex-wrap:wrap; }
.pie__legal a{ font-size:13px; color:var(--gris); text-decoration:none; }
.pie__legal a:hover{ color:var(--tinta); text-decoration:underline; }
.pie__sello{ font-family:var(--dato); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--gris-2); }

/* ── Páginas interiores ───────────────────────────────────────────────────── */
.cabecera-pagina{ padding-block:clamp(48px,6vw,88px) clamp(32px,4vw,56px); border-bottom:1px solid var(--linea); }
.cabecera-pagina__in{ display:flex; flex-direction:column; gap:18px; max-width:820px; }
.cabecera-pagina h1{ font-size:clamp(2.4rem,4.6vw,4rem); }
.cabecera-pagina p{ font-size:clamp(1.05rem,1.4vw,1.25rem); color:var(--gris); max-width:660px; }
.prosa{ max-width:68ch; display:flex; flex-direction:column; gap:18px; font-size:17px; line-height:1.65; color:var(--tinta-2); }
.prosa h2{ font-size:clamp(1.6rem,2.6vw,2.25rem); margin-top:28px; color:var(--tinta); }
.prosa h3{ font-size:1.25rem; margin-top:14px; color:var(--tinta); }
.prosa ul,.prosa ol{ margin:0; padding-left:1.3em; display:flex; flex-direction:column; gap:8px; }
.prosa .nota{ background:var(--card); border:1px solid var(--linea); border-left:3px solid var(--cian-osc); border-radius:0 var(--radio) var(--radio) 0; padding:16px 20px; font-size:15.5px; }
.prosa .nota--ambar{ border-left-color:var(--ambar-hi); }
.prosa .revisar{ background:var(--ambar-soft); color:var(--ambar-txt); border-radius:4px; padding:0 6px; font-family:var(--dato); font-size:.85em; }
.dos-col{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:clamp(30px,5vw,72px); align-items:start; }
@media (max-width:1000px){ .dos-col{ grid-template-columns:1fr; } }
.lateral{ position:sticky; top:96px; display:flex; flex-direction:column; gap:14px; }
.lateral__caja{ background:var(--card); border:1px solid var(--linea); border-radius:var(--radio-g); padding:24px; display:flex; flex-direction:column; gap:12px; }
.lateral__caja h3{ font-size:16px; font-weight:700; }
.lateral__caja p{ font-size:14.5px; color:var(--gris); }
.lateral__caja .cifra__n{ font-size:40px; }
.tabla{ overflow-x:auto; border:1px solid var(--linea); border-radius:var(--radio-g); background:var(--card); }
table{ width:100%; border-collapse:collapse; font-size:14.5px; min-width:640px; }
th,td{ text-align:left; padding:14px 18px; border-bottom:1px solid var(--linea); vertical-align:top; }
th{ font-family:var(--dato); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gris-2); font-weight:500; background:var(--bg-2); }
tr:last-child td{ border-bottom:0; }
td .dato{ color:var(--cian-txt); font-weight:600; }

/* Cronología (secuencia real de fechas) */
.cronologia{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
@media (max-width:1000px){ .cronologia{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .cronologia{ grid-template-columns:1fr; } }
.hito{ background:var(--card); border:1px solid var(--linea); border-radius:var(--radio-g); padding:26px; display:flex; flex-direction:column; gap:10px; position:relative; }
.hito--pasado{ background:var(--bg-2); }
.hito--clave{ border-color:var(--ambar-hi); box-shadow:0 0 0 3px var(--ambar-soft); }
.hito__fecha{ font-family:var(--display); font-size:28px; font-weight:800; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; }
.hito--clave .hito__fecha{ color:var(--ambar-txt); }
.hito__estado{ font-family:var(--dato); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--gris-2); }
.hito h3{ font-size:17px; font-weight:700; }
.hito p{ font-size:14px; color:var(--gris); }
.hito .cita{ align-self:flex-start; border-color:var(--linea-2); color:var(--gris); margin-top:auto; }
.hito--clave .cita{ border-color:var(--ambar-hi); color:var(--ambar-txt); }

/* Rejilla de módulos (página producto) */
.modulos{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
@media (max-width:1000px){ .modulos{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .modulos{ grid-template-columns:1fr; } }
.modulo{ background:var(--card); border:1px solid var(--linea); border-radius:var(--radio-g); padding:28px; display:flex; flex-direction:column; gap:12px; }
.modulo h3{ font-size:20px; }
.modulo > p{ color:var(--gris); font-size:15px; }
.modulo ul{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.modulo li{ display:grid; grid-template-columns:18px minmax(0,1fr); gap:10px; font-size:14px; color:var(--tinta-2); }
.modulo li::before{ content:""; width:7px; height:7px; margin-top:7px; border:1.5px solid var(--esmeralda); transform:rotate(45deg); }
.modulo .ruta{ margin-top:auto; padding-top:10px; font-family:var(--dato); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--gris-2); }

/* Formulario */
.form{ display:grid; grid-template-columns:1fr 1fr; gap:18px; background:var(--card); border:1px solid var(--linea); border-radius:var(--radio-g); padding:clamp(24px,3vw,36px); }
@media (max-width:700px){ .form{ grid-template-columns:1fr; } }
.form .ancho{ grid-column:1 / -1; }
.campo{ display:flex; flex-direction:column; gap:7px; }
.campo label{ font-size:13.5px; font-weight:600; color:var(--tinta-2); }
.campo label small{ font-weight:400; color:var(--gris-2); }
.campo input,.campo select,.campo textarea{ font:inherit; font-size:15.5px; color:var(--tinta); background:var(--bg); border:1px solid var(--linea-2); border-radius:10px; padding:12px 14px; min-height:48px; width:100%; }
.campo textarea{ min-height:120px; resize:vertical; }
.campo input:focus,.campo select:focus,.campo textarea:focus{ border-color:var(--cian-osc); background:#fff; }
.consentimiento{ display:grid; grid-template-columns:22px minmax(0,1fr); gap:12px; align-items:start; font-size:14px; color:var(--gris); }
.consentimiento input{ width:20px; height:20px; margin-top:2px; accent-color:var(--marca); }
.form__acc{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.form__aviso{ font-size:13.5px; color:var(--gris-2); }
.form__ok{ display:none; background:var(--verde-soft); color:var(--verde-osc); border-radius:10px; padding:14px 16px; font-size:15px; }
.form[data-enviado="true"] .form__ok{ display:block; }

/* 404 */
.vacio{ min-height:60vh; display:grid; place-items:center; text-align:center; padding-block:80px; }
.vacio__in{ display:flex; flex-direction:column; gap:18px; align-items:center; max-width:560px; }
.vacio h1{ font-size:clamp(2.4rem,5vw,4rem); }
.vacio p{ color:var(--gris); font-size:18px; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}