/* ============================================================
   en galicia — sistema visual
   Motivo: la galería. Retículas de vidrio con parteluces finos.
   El acento amarillo (toxo) sólo marca lo que está "encendido".
   ============================================================ */
:root{
  --paper:#EFF2EF; --paper-2:#E5EAE6; --white:#FBFCFB;
  --ink:#16201E; --ink-soft:#5C6A66; --ink-faint:#8A938E;
  --sea:#0E4A4C; --sea-deep:#072F31; --sea-tint:#D9E5E3;
  --toxo:#E8B44C; --toxo-deep:#B4801C;
  /* El rail de progreso, en tokens propios: la marca del dominio lo repinta
     entero desde brand.js (theme_json en core_domains). Los valores de aquí
     son los de «en galicia», que es también el fallback en desarrollo. */
  --rail-bg:#072F31; --rail-cell:#0A3739; --rail-hover:#0E4244; --rail-current:#125456;
  --rail-line:#16494B; --rail-line-2:#2A6462; --rail-glass:#F3D592;
  --rail-soft:#9CBDBA; --rail-faint:#89ABA9; --rail-link:#BFD8D6;
  --line:#C7D1CB; --line-soft:#DCE3DE;
  --ok:#2F7D5C; --warn:#B4761C; --bad:#9E3B2F;
  --r:3px;
  --pad:clamp(20px,4vw,44px);
  /* Sin fuentes de terceros: el alta se sirve desde el mismo origen que la
     portada, y la página de privacidad afirma que no se carga nada de fuera.
     Los font-variation-settings se conservan por si el sistema aporta una
     fuente variable; el font-weight es lo que garantiza el peso. */
  --display:ui-sans-serif,"Segoe UI Variable Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --body:ui-sans-serif,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.55;
  font-variant-numeric:tabular-nums;
}
h1,h2,h3,.disp{font-family:var(--display); font-variation-settings:"wdth" 112,"wght" 640; font-weight:650; margin:0; line-height:1.15; letter-spacing:-.02em}
.eyebrow{
  font-family:var(--display); font-variation-settings:"wdth" 125,"wght" 700; font-weight:700;
  text-transform:uppercase; letter-spacing:.16em; font-size:11px; color:var(--ink-faint);
}
a{color:var(--sea)}
:focus-visible{outline:2px solid var(--sea); outline-offset:2px}
button{font:inherit}

/* ---------- estructura ---------- */
.shell{display:grid; grid-template-columns:296px 1fr; min-height:100vh}

/* ---------- galería (rail de progreso) ---------- */
.gallery{
  background:var(--rail-bg); color:var(--white);
  padding:26px 22px 30px; position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; gap:22px;
}
.brand{display:flex; align-items:baseline; gap:8px; text-decoration:none; color:inherit}
.brand b{font-family:var(--display); font-variation-settings:"wdth" 125,"wght" 800; font-weight:800;
  text-transform:uppercase; letter-spacing:.12em; font-size:15px}
.brand span{font-size:11px; color:var(--rail-faint); letter-spacing:.1em; text-transform:uppercase}
.gallery-hd{font-size:12.5px; color:var(--rail-soft); line-height:1.5}

.panes{list-style:none; margin:0; padding:0; display:grid; gap:6px; flex:1; align-content:start}
.pane{
  display:grid; grid-template-columns:34px 1fr; align-items:center; gap:11px;
  padding:7px 9px; border:1px solid var(--rail-line); border-radius:var(--r);
  background:var(--rail-cell); cursor:pointer; text-align:left; width:100%; color:inherit;
  transition:background .18s ease,border-color .18s ease;
}
.pane:hover{background:var(--rail-hover); border-color:var(--rail-line-2)}
/* el cristal: 2x2 parteluces */
.glass{
  height:26px; border:1px solid var(--rail-line-2); border-radius:1px; background:var(--rail-bg);
  background-image:linear-gradient(var(--rail-line-2),var(--rail-line-2)),
                   linear-gradient(var(--rail-line-2),var(--rail-line-2));
  background-size:100% 1px,1px 100%; background-position:center,center;
  background-repeat:no-repeat; transition:background-color .3s ease,box-shadow .3s ease;
}
.pane[data-state="done"] .glass{background-color:var(--toxo); box-shadow:0 0 0 1px var(--toxo-deep) inset}
.pane[data-state="current"]{background:var(--rail-current); border-color:var(--toxo)}
.pane[data-state="current"] .glass{background-color:var(--rail-glass)}
.pane-t{font-size:13px; line-height:1.3}
.pane-n{display:block; font-size:10px; color:var(--rail-faint); letter-spacing:.08em;
  text-transform:uppercase}
.pane[data-state="pending"] .pane-t{color:var(--rail-soft)}
.gallery-ft{font-size:11.5px; color:var(--rail-faint); border-top:1px solid var(--rail-line);
  padding-top:14px}
.gallery-ft a{color:var(--rail-link)}

/* ---------- panel de formulario ---------- */
.panel{display:flex; flex-direction:column; min-width:0}
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px var(--pad); border-bottom:1px solid var(--line);
  background:var(--paper); position:sticky; top:0; z-index:5;
}
.saved{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-soft)}
.dot{width:7px; height:7px; border-radius:50%; background:var(--ok)}
.saved.busy .dot{background:var(--toxo-deep); animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.25}}
.linkbtn{background:none; border:0; color:var(--sea); font-size:13.5px; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; padding:4px}

.bar{height:3px; background:var(--line-soft)}
.bar i{display:block; height:100%; background:var(--sea); transition:width .35s cubic-bezier(.4,0,.2,1)}

.form{padding:clamp(26px,4vw,46px) var(--pad) 40px; max-width:760px; width:100%; flex:1}
.step{display:none}
.step.on{display:block; animation:in .3s ease both}
@keyframes in{from{opacity:0; transform:translateY(6px)}}
.step-hd{margin-bottom:26px; padding-bottom:20px; border-bottom:1px solid var(--line)}
.step-hd h1{font-size:clamp(25px,3.4vw,33px); margin:8px 0 8px}
.step-hd p{margin:0; color:var(--ink-soft); font-size:15.5px; max-width:56ch}

/* ---------- campos ---------- */
.grid{display:grid; gap:18px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:1fr 1fr 1fr}
.f{display:flex; flex-direction:column; gap:6px; min-width:0}
label{font-size:13px; font-weight:600; color:var(--ink)}
.hint{font-size:12.5px; color:var(--ink-soft)}
input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],select,textarea{
  font:inherit; font-size:15.5px; color:var(--ink); background:var(--white);
  border:1px solid var(--line); border-radius:var(--r); padding:11px 12px; width:100%;
  transition:border-color .15s ease,box-shadow .15s ease;
}
input:focus,select:focus,textarea:focus{border-color:var(--sea); box-shadow:0 0 0 3px var(--sea-tint); outline:none}
input::placeholder,textarea::placeholder{color:var(--ink-faint)}
textarea{resize:vertical; min-height:92px; line-height:1.6}
select{appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%235C6A66' stroke-width='1.6'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:34px}
.count{font-size:11.5px; color:var(--ink-faint); text-align:right}

/* pregunta escalonada */
.ladder{display:grid; gap:20px}
.q{border-left:2px solid var(--line); padding-left:16px}
.q.filled{border-left-color:var(--toxo)}
.q h3{font-size:16.5px; font-variation-settings:"wdth" 108,"wght" 620; margin-bottom:4px}
.ex{font-size:13px; color:var(--ink-soft); background:var(--paper-2);
  border-radius:var(--r); padding:8px 11px; margin:7px 0 9px}
.ex b{font-variation-settings:"wdth" 118,"wght" 700; font-weight:700; font-family:var(--display);
  text-transform:uppercase; letter-spacing:.1em; font-size:10px; color:var(--ink-faint);
  display:block; margin-bottom:2px}
.assist{display:flex; align-items:center; gap:9px; margin-top:8px}
.assist-btn{background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:6px 11px; font-size:12.5px; cursor:pointer; color:var(--sea); font-weight:600}
.assist-btn:hover{border-color:var(--sea)}
.assist-note{font-size:12px; color:var(--ink-faint)}
.suggestion{border:1px solid var(--toxo); background:#FDF7E9; border-radius:var(--r);
  padding:12px 14px; margin-top:10px; font-size:14.5px; display:none}
.suggestion.on{display:block}
.suggestion p{margin:0 0 10px}
.suggestion .row{display:flex; gap:8px}

/* chips */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{border:1px solid var(--line); background:var(--white); border-radius:100px;
  padding:7px 14px; font-size:13.5px; cursor:pointer; transition:.15s}
.chip:hover{border-color:var(--sea)}
.chip[aria-pressed=true]{background:var(--sea); border-color:var(--sea); color:var(--white)}

/* tarjeta de ubicación */
.card{border:1px solid var(--line); background:var(--white); border-radius:var(--r); padding:18px}
.card+.card{margin-top:14px}
.card-hd{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.card-hd .eyebrow{color:var(--sea)}
.ghost{background:none; border:1px dashed var(--line); border-radius:var(--r);
  padding:11px 16px; width:100%; cursor:pointer; color:var(--sea); font-size:14px; font-weight:600; margin-top:14px}
.ghost:hover{border-color:var(--sea); background:var(--white)}
.del{background:none; border:0; color:var(--bad); font-size:12.5px; cursor:pointer; text-decoration:underline; text-underline-offset:3px}

/* horarios */
.hours{display:grid; gap:5px; margin-top:4px}
.hrow{display:grid; grid-template-columns:38px 1fr auto; gap:9px; align-items:center; font-size:13.5px}
.hrow input[type=text]{padding:6px 9px; font-size:13.5px}
.hrow .day{font-weight:600; color:var(--ink-soft)}
.sw{position:relative; width:34px; height:19px; flex:none}
.sw input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer}
.sw i{position:absolute; inset:0; background:var(--line); border-radius:100px; transition:.18s}
.sw i::after{content:""; position:absolute; width:15px; height:15px; background:var(--white);
  border-radius:50%; top:2px; left:2px; transition:.18s}
.sw input:checked+i{background:var(--sea)}
.sw input:checked+i::after{transform:translateX(15px)}
.sw input:focus-visible+i{outline:2px solid var(--sea); outline-offset:2px}

/* subida */
.drop{border:1px dashed var(--line); border-radius:var(--r); background:var(--white);
  padding:28px; text-align:center; cursor:pointer}
.drop:hover{border-color:var(--sea)}
.drop b{display:block; font-size:15px; margin-bottom:3px}
.drop span{font-size:13px; color:var(--ink-soft)}
.thumbs{display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:10px; margin-top:14px}
.thumb{position:relative; aspect-ratio:4/3; border:1px solid var(--line); border-radius:var(--r);
  background:var(--paper-2); display:flex; align-items:flex-end; padding:7px; font-size:11px; color:var(--ink-soft)}
.thumb::before{content:""; position:absolute; inset:0;
  background-image:linear-gradient(var(--line-soft),var(--line-soft)),linear-gradient(var(--line-soft),var(--line-soft));
  background-size:100% 1px,1px 100%; background-position:center,center; background-repeat:no-repeat; opacity:.9}
.thumb x{position:absolute; top:5px; right:5px; width:19px; height:19px; background:var(--white);
  border:1px solid var(--line); border-radius:2px; display:grid; place-items:center; cursor:pointer; font-size:13px}

/* páginas */
.pages{display:grid; grid-template-columns:repeat(auto-fill,minmax(212px,1fr)); gap:11px}
.page{border:1px solid var(--line); background:var(--white); border-radius:var(--r); padding:14px; cursor:pointer; text-align:left}
.page:hover{border-color:var(--sea)}
.page[aria-pressed=true]{border-color:var(--sea); box-shadow:inset 0 0 0 1px var(--sea)}
.page[data-fixed]{cursor:default; background:var(--sea-tint); border-color:var(--sea)}
.page b{display:block; font-size:15px; margin-bottom:3px}
.page span{font-size:12.5px; color:var(--ink-soft); line-height:1.45; display:block}
.page em{font-style:normal; font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--sea); font-family:var(--display); font-variation-settings:"wdth" 120,"wght" 700;
  font-weight:700}

/* consentimientos */
.check{display:grid; grid-template-columns:auto 1fr; gap:11px; align-items:start; font-size:14px; padding:11px 0}
.check+.check{border-top:1px solid var(--line-soft)}
.check input{width:17px; height:17px; margin:3px 0 0; accent-color:var(--sea)}

/* pie de navegación */
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px var(--pad); border-top:1px solid var(--line); background:var(--paper);
  position:sticky; bottom:0;
}
.btn{border:1px solid var(--sea); background:var(--sea); color:var(--white);
  border-radius:var(--r); padding:11px 22px; font-size:15px; font-weight:600; cursor:pointer}
.btn:hover{background:var(--sea-deep)}
.btn.sec{background:transparent; color:var(--sea)}
.btn.sec:hover{background:var(--sea-tint)}
.btn[disabled]{opacity:.35; cursor:not-allowed}
.nav-note{font-size:12.5px; color:var(--ink-soft)}

/* final */
.done{text-align:center; padding:50px 0}
.done .glassbig{width:78px; height:78px; margin:0 auto 22px; border:1px solid var(--sea);
  background:var(--toxo); border-radius:2px;
  background-image:linear-gradient(var(--sea-deep),var(--sea-deep)),linear-gradient(var(--sea-deep),var(--sea-deep));
  background-size:100% 1px,1px 100%; background-position:center,center; background-repeat:no-repeat}

@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .gallery{position:static; height:auto; padding:16px var(--pad)}
  .panes{grid-auto-flow:column; grid-auto-columns:minmax(30px,1fr); gap:4px; overflow:auto}
  .pane{grid-template-columns:1fr; padding:6px; gap:5px}
  .pane-t,.gallery-hd,.gallery-ft{display:none}
  .glass{height:16px}
  .g2,.g3{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ---------- añadidos de la versión conectada ---------- */
.verify{border:1px solid var(--toxo); background:#FDF7E9; border-radius:var(--r);
  padding:16px 18px; margin-top:20px; display:none}
.verify.on{display:block}
.verify h3{font-size:16px; margin-bottom:5px}
.verify p{margin:0 0 12px; font-size:13.5px; color:var(--ink-soft)}
.verify .row{display:flex; gap:9px; align-items:center; flex-wrap:wrap}
.verify input{width:130px; text-align:center; font-size:20px; letter-spacing:6px; font-weight:700}
.verify .state{font-size:13px}
.verify .state.bad{color:var(--bad)}
.verify .state.ok{color:var(--ok)}
.formerr{display:none; margin:0 0 14px; padding:10px 13px; border:1px solid var(--bad);
  background:var(--white); color:var(--bad); border-radius:var(--r); font-size:13.5px}
.formerr.on{display:block}
.thread{display:grid; gap:9px; margin-bottom:22px}
.msg{border:1px solid var(--line); border-radius:var(--r); padding:10px 13px;
  font-size:13.5px; background:var(--white)}
.msg.staff{background:var(--sea-tint); border-color:#AFCAC7}
.msg .h{font-size:11.5px; color:var(--ink-soft); margin-bottom:3px}
.msg p{margin:0}
.infocard{border:1px solid var(--line); background:var(--paper-2); border-radius:var(--r);
  padding:16px 18px; font-size:14px; color:var(--ink-soft)}

/* ── A04 §7.1: elección de dominio ──────────────────────────── */
.domain-pick{margin-top:26px; border-top:1px solid var(--line, #C7D1CB); padding-top:22px}
.domain-pick h2{font-size:18px; margin:0 0 4px}
.domain-pick .hint{margin-top:10px}
.dom-opt{display:grid; grid-template-columns:20px 1fr; gap:12px; align-items:start;
  border:1px solid var(--line, #C7D1CB); border-radius:6px; padding:13px 15px;
  margin-bottom:9px; cursor:pointer; background:#fff}
.dom-opt:hover{border-color:var(--sea, #0E4A4C)}
.dom-opt:has(input:checked){border-color:var(--sea, #0E4A4C);
  box-shadow:inset 0 0 0 1px var(--sea, #0E4A4C)}
.dom-opt input{width:18px; height:18px; margin:2px 0 0; accent-color:var(--sea, #0E4A4C)}
.dom-opt .host{font-weight:700; font-size:15.5px; word-break:break-all}
.dom-opt .why{display:block; font-size:13px; color:var(--ink-soft, #5C6A66); margin-top:3px}
.dom-opt .tag{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; background:var(--toxo-bg, #FDF7E9); color:var(--toxo-deep, #B4801C);
  border:1px solid var(--toxo, #E8B44C); border-radius:3px; padding:1px 6px; margin-left:8px}
.domain-only{font-size:15px; background:var(--paper-2, #E5EAE6); border-radius:6px; padding:13px 15px}
.domain-only b{word-break:break-all}