/* Cuestionario — Myobu Tech Solutions.
 *
 * El color sale de la doctrina (docs/marca/identidad.html, 6 oct 2026). La
 * tipografía sale del sitio, y el sistema completo vive en marca/SISTEMA.md.
 *
 *   Bermellón de torii  #c4402c   lo que pide atención
 *   Tinta sumi          #15161a   el fondo de la marca
 *   Blanco de zorro     #f4f1ea   el papel
 *   Oro                 #c9a227   etiquetas pequeñas, nunca texto corrido
 *
 * Prohibido por doctrina: azul y morado de plantilla (#3B82F6, #8B5CF6), que
 * hoy leen como «esto lo generó una máquina», y el ámbar por defecto de las
 * librerías (#F59E0B). El naranja viene del torii.
 *
 * Tipografías: Shippori Mincho B1 para el nombre y los títulos, Geist para
 * el texto y Geist Mono para etiquetas y números — las mismas del sitio.
 *
 * Corregido el 2026-10-19: esta página nació usando Familjen Grotesk,
 * Instrument Serif y Karla, creyendo que la doctrina las fijaba. No las fija:
 * la doctrina nunca discute tipografía, solo estiliza una maqueta con ellas.
 * Ver marca/SISTEMA.md.
 *
 * Se contesta sobre todo en un celular: columna angosta, campos grandes, la
 * respuesta siempre debajo de la pregunta. Sin estilos en línea, para que la
 * política de seguridad de contenido pueda ser estricta. */

:root {
  --sumi: #15161a;
  --sumi-2: #1d1f25;
  --washi: #f4f1ea;
  --washi-2: #e9e5db;
  --washi-3: #fbfaf6;
  --shu: #c4402c;
  --shu-oscuro: #a8331f;
  --shu-claro: #e36a52;
  --oro: #c9a227;
  --oro-claro: #d7b458;

  /* Las mismas tres del sitio, con los mismos nombres: una sola marca y un
     solo vocabulario, para que una pagina nueva copie de cualquiera de las dos
     y salga igual. Decidido el 2026-10-19; el porque esta en marca/SISTEMA.md. */
  --display: "Shippori Mincho B1", "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif;
  --texto: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Papel por defecto: el cliente contesta de día y puede imprimirlo. */
  --fondo: var(--washi);
  --superficie: var(--washi-3);
  --superficie-2: var(--washi-2);
  --tinta: var(--sumi);
  --tinta-suave: #4a4c50;
  --tinta-tenue: #76787d;
  --linea: rgba(21, 22, 26, .14);
  --linea-fuerte: rgba(21, 22, 26, .3);
  --acento: var(--shu);
  --acento-tinta: var(--shu-oscuro);
  --acento-tenue: rgba(196, 64, 44, .08);
  --sobre-acento: var(--washi);
  --eyebrow: #8a6a12;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Un punto más oscuro que el sumi de la cabecera, a propósito: si el fondo
       fuera el mismo, la cabecera de marca se fundiría con el formulario y el
       torii dejaría de separar nada. Queda una escalera: fondo, cabecera,
       tarjetas. */
    --fondo: #101216;
    --superficie: var(--sumi-2);
    --superficie-2: #252830;
    --tinta: var(--washi);
    --tinta-suave: #c0bcb3;
    --tinta-tenue: #9a958c;
    --linea: #272831;
    --linea-fuerte: #3b3d47;
    --acento: var(--shu-claro);
    --acento-tinta: var(--shu-claro);
    --acento-tenue: rgba(227, 106, 82, .12);
    --sobre-acento: var(--sumi);
    --eyebrow: var(--oro-claro);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* ---- Cabecera de marca ----
 * Siempre en tinta sumi, en claro y en oscuro: es el lockup de la marca y la
 * doctrina lo fija así, bermellón sobre sumi. El papel empieza debajo. */

.masthead {
  background: var(--sumi);
  color: var(--washi);
  padding: 2rem 18px 2.25rem;
}

.masthead__caja { max-width: 43rem; margin: 0 auto; }

.lockup { display: flex; align-items: center; gap: .9rem; }

.lockup img { width: 50px; height: 50px; border-radius: 8px; flex-shrink: 0; }

.lockup__nombre {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.45rem;
  line-height: 1;
  letter-spacing: 0;
}

/* El apellido va en mayúsculas espaciadas, no en caracteres japoneses: el
   nombre carga el mito, pero imprimirlo lo hace parecer importado y no lo es.
   El guiño queda en el torii de abajo, que es figura y no texto. */
.lockup__apellido {
  font-family: var(--mono);
  font-weight: 500;
  font-size: .72rem;
  color: var(--shu-claro);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: .45rem;
}

/* La puerta entre la cabecera de marca y el formulario. Una hairline a cada
   lado y el torii al centro, chico: es un remate, no un adorno. */
.portal {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 2.25rem;
  color: var(--acento);
}

.portal::before, .portal::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linea);
}

.portal svg { fill: currentColor; opacity: .75; flex-shrink: 0; }

.masthead h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.3rem, 9vw, 3.4rem);
  line-height: 1.05;
  margin: 1.75rem 0 .75rem;
  letter-spacing: -.005em;
}

.masthead .bajada {
  color: #b5b0a6;
  margin: 0;
  max-width: 34rem;
  text-wrap: pretty;
}

.hoja { max-width: 43rem; margin: 0 auto; padding: 2.25rem 18px 9rem; }

/* ---- Avisos ---- */

.aviso {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--acento);
  padding: 1.1rem 1.25rem;
  margin: 0 0 2rem;
  font-size: .95rem;
  color: var(--tinta-suave);
  border-radius: 0 4px 4px 0;
}

.aviso p { margin: 0 0 .65rem; }
.aviso .sin-margen { margin-bottom: 0; }
.aviso strong { color: var(--tinta); font-weight: 700; }

.eyebrow {
  font-family: var(--mono);
  font-size: .67rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--eyebrow);
  margin: 0 0 .5rem;
}

/* ---- Identificación ---- */

.ident { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-bottom: 2.5rem; }

@media (min-width: 34rem) { .ident { grid-template-columns: 2fr 1fr; } }

.ident label, .campo > label {
  display: block;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  margin-bottom: .35rem;
}

/* ---- Selector de secciones ---- */

.selector {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 4px;
  padding: 1.35rem;
  margin-bottom: 1.25rem;
}

.selector h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.4rem;
  margin: 0 0 .4rem;
  line-height: 1.2;
}

.selector .instruccion { margin: 0 0 1rem; font-size: .93rem; color: var(--tinta-suave); }
.selector .instruccion strong { color: var(--tinta); font-weight: 700; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  padding: .55rem .95rem;
  font-size: .93rem;
  cursor: pointer;
  background: var(--fondo);
  color: var(--tinta-suave);
  user-select: none;
}

.chip input { margin: 0; accent-color: var(--acento); width: 1rem; height: 1rem; }

.chip:has(input:checked) {
  background: var(--acento-tenue);
  border-color: var(--acento);
  color: var(--acento-tinta);
  font-weight: 700;
}

/* ---- Control de apertura ---- */

.control {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
  margin: 0 0 1.75rem;
  font-size: .9rem;
  color: var(--tinta-tenue);
}

.control .texto { margin-right: auto; }

.enlace {
  background: none;
  border: none;
  padding: .2rem 0;
  font-family: inherit;
  font-size: .9rem;
  color: var(--acento-tinta);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.leyenda { font-size: .9rem; color: var(--tinta-tenue); margin: 0 0 2rem; text-wrap: pretty; }

/* Estado vacío: sin ninguna opción marcada no hay secciones de tema, y hay que
   decirlo o la página parece incompleta. */
.vacio {
  background: var(--superficie-2);
  border: 1px dashed var(--linea-fuerte);
  border-radius: 4px;
  padding: 1rem 1.15rem;
  margin: 0 0 1.25rem;
  font-size: .93rem;
  color: var(--tinta-suave);
  text-wrap: pretty;
}

.vacio[hidden] { display: none; }

/* ---- Secciones ---- */

.bloque {
  margin: 0 0 .85rem;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 4px;
  overflow: hidden;
}

.bloque[hidden] { display: none; }

.bloque > summary {
  cursor: pointer;
  padding: 1.05rem 1.3rem;
  list-style: none;
  display: flex;
  align-items: center;
  gap: .7rem;
}

.bloque > summary::-webkit-details-marker { display: none; }

.bloque > summary::before {
  content: "+";
  font-family: var(--mono);
  font-size: 1.05rem;
  color: var(--acento);
  width: 1rem;
  flex-shrink: 0;
}

.bloque[open] > summary::before { content: "–"; }
.bloque[open] > summary { border-bottom: 1px solid var(--linea); }

.bloque__titulo {
  font-family: var(--display);
  font-size: 1.22rem;
  line-height: 1.25;
  flex: 1;
}

.bloque__avance {
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--tinta-tenue);
  flex-shrink: 0;
  white-space: nowrap;
}

.bloque__avance.completo { color: var(--acento-tinta); font-weight: 700; }

.cuerpo { padding: 1.4rem 1.3rem 1.5rem; }

.nota-bloque {
  background: var(--superficie-2);
  padding: .9rem 1.05rem;
  border-radius: 3px;
  font-size: .93rem;
  color: var(--tinta-suave);
  margin: 0 0 1.75rem;
  text-wrap: pretty;
}

.nota-bloque strong { color: var(--tinta); font-weight: 700; }

h3 {
  font-family: var(--mono);
  font-size: .67rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  margin: 2.25rem 0 1.1rem;
  padding-bottom: .45rem;
  border-bottom: 1px solid var(--linea);
}

h3:first-child { margin-top: 0; }

/* ---- Pregunta ---- */

.p { margin-bottom: 1.7rem; }
.p > label { display: block; margin-bottom: .5rem; text-wrap: pretty; }

.num { font-family: var(--mono); font-size: .8rem; color: var(--tinta-tenue); margin-right: .4rem; }

.porque {
  display: block;
  font-size: .89rem;
  color: var(--tinta-tenue);
  margin-top: .25rem;
  text-wrap: pretty;
}

.obliga {
  display: inline-block;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  background: var(--acento-tenue);
  color: var(--acento-tinta);
  padding: .14rem .45rem;
  border-radius: 2px;
  margin-left: .35rem;
  vertical-align: 1px;
  white-space: nowrap;
}

textarea, input[type="text"], input[type="tel"], input[type="email"], select {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--fondo);
  border: 1px solid var(--linea-fuerte);
  border-radius: 3px;
  padding: .65rem .75rem;
}

textarea { min-height: 3.2rem; resize: vertical; }

select { appearance: none; padding-right: 2rem; }

textarea:focus, input:focus, select:focus {
  outline: 2px solid var(--acento);
  outline-offset: -1px;
  background: var(--superficie);
}

textarea.lleno, input.lleno, select.lleno { border-left: 3px solid var(--acento); }

/* ---- Grupo de casillas ---- */

.grupo { border: none; margin: 0 0 1.7rem; padding: 0; }

.grupo > legend { padding: 0; margin-bottom: .55rem; text-wrap: pretty; }

.opciones { display: grid; gap: .5rem; grid-template-columns: 1fr; }

@media (min-width: 30rem) { .opciones { grid-template-columns: 1fr 1fr; } }

.opcion {
  display: flex;
  align-items: center;
  gap: .55rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: 3px;
  padding: .6rem .75rem;
  cursor: pointer;
  background: var(--fondo);
  font-size: .95rem;
  user-select: none;
}

.opcion input { margin: 0; accent-color: var(--acento); width: 1.05rem; height: 1.05rem; flex-shrink: 0; }

.opcion:has(input:checked) {
  background: var(--acento-tenue);
  border-color: var(--acento);
  font-weight: 700;
}

/* ---- Formulario de contacto ---- */

.formulario { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }

@media (min-width: 34rem) {
  .formulario { grid-template-columns: 1fr 1fr; }
  .formulario .ancho { grid-column: 1 / -1; }
}

.campo > label { margin-bottom: .35rem; }

/* ---- Barra ---- */

.barra {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--superficie);
  border-top: 1px solid var(--linea-fuerte);
  padding: .7rem 18px;
  padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: .5rem;
}

.barra .cuenta {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--tinta-tenue);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.barra .cuenta:first-child { margin-right: auto; }
.barra button { white-space: nowrap; }

/* Cuando hay un aviso ("Respuestas copiadas"), el contador cede su lugar: los
   dos juntos aplastan a ambos en un teléfono angosto, y en ese momento el
   aviso es lo que la persona necesita leer. */
.barra.con-aviso .cuenta:first-child { display: none; }
.barra.con-aviso [data-aviso-guardado] { margin-right: auto; color: var(--acento-tinta); font-weight: 700; }

@media (max-width: 26rem) {
  .barra { padding-left: 14px; padding-right: 14px; }
  .barra .cuenta:first-child { font-size: .68rem; }
  .barra button { padding-left: .85rem; padding-right: .85rem; }
}

button {
  font-family: inherit;
  font-size: .95rem;
  font-weight: 700;
  padding: .68rem 1.15rem;
  border-radius: 3px;
  border: 1px solid var(--linea-fuerte);
  background: var(--fondo);
  color: var(--tinta);
  cursor: pointer;
}

button.principal {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--sobre-acento);
}

button:focus-visible, .enlace:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---- Salida de respaldo ---- */

.salida {
  background: var(--superficie);
  border: 1px solid var(--acento);
  border-radius: 4px;
  padding: 1.15rem 1.3rem;
  margin: 2rem 0;
}

.salida[hidden] { display: none; }
.salida > p { margin: 0 0 .9rem; font-size: .93rem; color: var(--tinta-suave); }

.salida pre {
  margin: 0;
  max-height: 24rem;
  overflow: auto;
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: 3px;
  padding: .9rem;
  font-family: var(--mono);
  font-size: .8rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  user-select: all;
}

/* Fuera de la vista pero no display:none: un textarea oculto no se puede
   seleccionar, y execCommand necesita seleccionarlo. */
.fuera { position: fixed; top: 0; left: -9999px; opacity: 0; }

.pie {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linea);
  font-size: .92rem;
  color: var(--tinta-tenue);
  text-wrap: pretty;
}

@media print {
  .barra, .selector, .control, .leyenda { display: none; }
  .masthead { background: none; color: var(--sumi); padding-left: 0; padding-right: 0; }
  .masthead .bajada { color: var(--tinta-suave); }
  .bloque { break-inside: avoid; border: none; background: none; }
  .bloque[hidden] { display: block; }
  .bloque > summary::before { content: ""; }
  textarea { min-height: 2.6rem; }
}