/* ============================================================
   «Añade tu web».

   Los mismos tokens que el alta y el buscador, por el mismo motivo: brand.js
   los repinta enteros según el dominio. Los valores de aquí son los de «en
   galicia», que es lo que se ve en desarrollo.

   Una columna y nada más. Quien llega aquí ya tiene web y ya ha decidido: lo
   único que puede estropear esto es hacerle leer.
   ============================================================ */
: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;
  --line:#C7D1CB; --line-soft:#DCE3DE;
  --r:3px;
  --pad:clamp(16px,3vw,32px);
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--paper); color:var(--ink);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---------------------------------------------------------- la cabecera */
.cab{
  display:flex; gap:14px; align-items:center; justify-content:space-between;
  padding:12px var(--pad);
  background:var(--sea-deep); color:var(--white);
  border-bottom:1px solid var(--sea);
}
.marca{color:var(--white); text-decoration:none; font-weight:600; font-size:16px}
.volver{color:var(--sea-tint); text-decoration:none; font-size:13px}
.volver:hover{color:var(--white); text-decoration:underline}

/* ------------------------------------------------------------- el cuerpo */
.cuerpo{max-width:720px; margin:0 auto; padding:clamp(20px,4vw,40px) var(--pad) 60px}

.intro h1{margin:0 0 10px; font-size:clamp(23px,4vw,31px); line-height:1.2}
.lede{margin:0 0 18px; color:var(--ink-soft); font-size:16px}

/* Lo que va a pasar con su web. Cuatro frases, no un párrafo: se lee de un
   vistazo y cada una contesta un miedo distinto. */
.comose{
  margin:0 0 26px; padding:14px 16px 14px 34px;
  list-style:disc; background:var(--white);
  border:1px solid var(--line-soft); border-left:3px solid var(--sea);
  border-radius:0 var(--r) var(--r) 0;
  font-size:14px; color:var(--ink-soft);
}
.comose li{margin:5px 0}
.comose b{color:var(--ink)}

/* -------------------------------------------------------- el formulario */
.ficha{display:grid; gap:20px}
.grupo{
  display:grid; gap:14px;
  padding:16px 18px; background:var(--white);
  border:1px solid var(--line-soft); border-radius:var(--r);
}
.grupo h2{
  margin:0; font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint);
}

.campo{display:grid; gap:5px}
.et{font-size:13px; font-weight:600}
.req{color:var(--toxo-deep)}
.campo input,.campo select{
  width:100%; padding:9px 11px;
  font:inherit; font-size:15px; color:var(--ink);
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
}
.campo input:focus,.campo select:focus{
  outline:2px solid var(--sea); outline-offset:1px; border-color:var(--sea);
}
.campo input.mal{border-color:#9E3B2F; background:#FDF4F2}
.ayuda{font-size:12px; color:var(--ink-faint)}
.ayuda.suelta{margin:0}
.ayuda code{
  padding:1px 4px; background:var(--paper-2); border-radius:2px;
  font-size:11.5px;
}

/* Dos campos por línea en pantalla ancha, uno debajo de otro en el móvil. */
.fila{display:grid; gap:14px; grid-template-columns:1fr 1fr}
@media (max-width:560px){ .fila{grid-template-columns:1fr} }

/* El permiso. Fuera de las cajas y con su propio marco: es una decisión, no
   un campo más. */
.permiso{
  display:flex; gap:11px; align-items:flex-start;
  padding:14px 16px; background:var(--sea-tint);
  border:1px solid var(--sea); border-radius:var(--r);
  font-size:13.5px; line-height:1.5; cursor:pointer;
}
.permiso input{width:18px; height:18px; margin:2px 0 0; flex:0 0 auto; accent-color:var(--sea)}
.permiso.mal{border-color:#9E3B2F; background:#FDF4F2}

.pie{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.btn{
  display:inline-block; padding:11px 22px;
  font:inherit; font-size:15px; font-weight:600; text-decoration:none;
  color:var(--white); background:var(--sea);
  border:1px solid var(--sea); border-radius:var(--r); cursor:pointer;
}
.btn:hover{background:var(--sea-deep)}
.btn[disabled]{opacity:.55; cursor:default}
.btn.sec{color:var(--sea); background:var(--white)}
.btn.sec:hover{background:var(--paper-2)}

.msg{margin:0; font-size:13.5px; color:#215B42}
.msg.mal{color:#9E3B2F; font-weight:600}

/* ------------------------------------------------------------- el final */
.hecho{
  padding:26px 24px; background:var(--white);
  border:1px solid var(--line-soft); border-top:4px solid var(--sea);
  border-radius:var(--r);
}
.hecho h2{margin:0 0 8px; font-size:21px}
.hecho p{margin:0 0 16px; color:var(--ink-soft)}
.acciones{display:flex; flex-wrap:wrap; gap:10px}

.pieP{
  display:flex; flex-wrap:wrap; gap:16px; justify-content:center;
  padding:22px var(--pad) 40px;
  border-top:1px solid var(--line-soft);
  font-size:13px;
}
.pieP a{color:var(--ink-soft); text-decoration:none}
.pieP a:hover{color:var(--sea); text-decoration:underline}