/* ============================================================================
   miurata.com — la hoja de las paginas DOCUMENTO: team, privacy, terms.

   POR QUE ES UN ARCHIVO APARTE Y NO MAS LINEAS EN `site.css`
   ----------------------------------------------------------
   `site.css` viste la portada, que es una DECLARACION y un REGISTRO. Estas tres
   son otra cosa: prosa larga, numeracion legal, un retrato, una tabla de cifras.
   Nada de eso aparece en la portada, y meterlo alli obligaria a cada visitante
   de la portada a descargar el CSS de una tabla de cifras que esa pagina no
   tiene. Aqui se carga DESPUES de `site.css` y solo donde hace falta.

   Lo que NO se repite: la paleta, las tipografias, el guard de idioma, el
   `.rail`, la cabecera, el pie, el `.skip` y los focos. Todo eso vive en
   `site.css` y esta hoja lo consume. Si una regla de aqui necesita un color,
   usa el token; no lo redeclara.

   LO QUE ESTA HOJA SUSTITUYE, y es el motivo de que exista: las tres paginas
   llevaban su CSS dentro de un `<style>` propio, con 57 lineas IDENTICAS en las
   tres y 126 entre privacy y terms. Cambiar un color de marca eran tres
   ediciones y la que se te olvidara no fallaba, solo quedaba distinta.
   ============================================================================ */

/* ---------- encabezado de documento ---------- */
.doc-head{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(1.5rem,3vw,2.2rem)}
.doc-head .clase{
  font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--quiet);display:block;margin-bottom:.9rem;
}
.doc-head h1{max-width:26ch}
.doc-head .bajada{margin:1.1rem 0 0;color:var(--quiet);max-width:60ch}
.doc-head .fecha{
  margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:.84rem;color:var(--quiet);
}

/* El retrato. Sin `border-radius` y sin anillo de color: en un prospecto una
   fotografia es una fotografia, va a escuadra y con su filete. */
.retrato{display:flex;gap:clamp(1.2rem,3vw,2rem);align-items:flex-start;flex-wrap:wrap}
.retrato img{
  width:132px;height:132px;object-fit:cover;flex:none;
  border:1px solid var(--rule);filter:grayscale(1) contrast(1.04);
}
.retrato .quien{min-width:min(100%,18rem)}
.retrato h1{margin:0;font-size:clamp(1.9rem,3.6vw,2.6rem)}

/* ---------- cuerpo del documento ---------- */
.doc{padding:0 0 clamp(3rem,6vw,4.5rem)}
.doc section{padding:clamp(1.8rem,3.5vw,2.6rem) 0;border-top:1px solid var(--rule)}
.doc section:first-of-type{border-top:1px solid var(--ink)}
.doc h2{
  font-size:1.32rem;margin:0 0 .9rem;
  /* El numero de seccion cuelga en el margen cuando hay sitio, que es como lo
     hace un documento impreso, y se mete en linea cuando no lo hay. */
  position:relative;
}
.doc h2 .num{
  font-family:var(--mono);font-size:.78em;font-weight:400;color:var(--mark);
  margin-right:.7rem;
}
.doc h3{font-size:1.04rem;font-weight:600;color:var(--ink);margin:1.6rem 0 .5rem}
.doc p{margin:0 0 1rem;max-width:70ch}
.doc p:last-child{margin-bottom:0}
.doc strong{font-weight:600;color:var(--ink)}
.doc ul,.doc ol{margin:0 0 1rem;padding-left:1.4rem;max-width:70ch}
.doc li{margin-bottom:.5rem}
.doc li::marker{color:var(--quiet)}
.doc a{color:var(--mark);text-decoration:none;border-bottom:1px solid transparent}
.doc a:hover,.doc a:focus-visible{border-bottom-color:var(--mark)}

/* Cita al margen: la unica pieza con fondo de toda la hoja, y lleva filete a la
   izquierda en vez de caja porque una caja seria una tarjeta. */
.nota{
  margin:1.4rem 0;padding:1rem 0 1rem 1.3rem;border-left:2px solid var(--mark);
  color:var(--quiet);max-width:66ch;
}
.nota p:last-child{margin-bottom:0}

/* ---------- cifras ---------- */
.cifras{
  margin:1.6rem 0 0;display:grid;gap:1px;background:var(--rule);
  grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));
  border:1px solid var(--rule);
}
.cifras div{background:var(--paper);padding:1.1rem 1.2rem}
.cifras .n{
  display:block;font-family:var(--mono);font-size:1.5rem;color:var(--ink);
  line-height:1.15;font-variant-numeric:tabular-nums;
}
.cifras .l{display:block;margin-top:.3rem;font-size:.88rem;color:var(--quiet)}

/* ESTAS SEIS REGLAS ERAN CSS MUERTO, retiradas el 2026-08-23. Vestian un
   indice de secciones para `privacy` y `terms`, y ninguna de las dos lo tuvo
   nunca: `.indice` no aparece en ningun marcado del sitio. Es estructura
   huerfana, que es lo que el §3 de la doctrina prohibe crear, aqui en su
   version de CSS. Si algun dia se quiere el indice --con 12 y 15 secciones
   se defiende-- nace con su marcado en el mismo commit, no antes. */
@media (max-width:640px){
  .retrato img{width:96px;height:96px}
}

/* ---------- piezas de documento legal ---------- */

/* El aviso en otro idioma. Lleva `lang="es"` en el marcado, que es lo que
   importa; esto solo lo separa visualmente para que no se confunda con el
   articulado en ingles que lo rodea. */
.idioma{
  margin:1.4rem 0 0;padding:.9rem 1.1rem;background:var(--paper-2);
  border:1px solid var(--rule);color:var(--quiet);font-size:.94rem;max-width:66ch;
}

/* Las versales de un descargo de garantia. `letter-spacing` porque una linea
   entera en mayusculas sin abrir el interletraje se lee como un bloque solido:
   es el caso de libro donde el ancho de las letras deja de dar contraste de
   forma entre una palabra y la siguiente. */
.versal{
  font-size:.9rem;letter-spacing:.015em;line-height:1.72;color:var(--text);
  max-width:74ch;
}

/* La ficha de contacto al pie de una seccion. Mismo grid que los particulares
   de la portada, sin repetir su regla: aqui el rotulo va en mono porque es la
   etiqueta de un campo y no prosa. */
.ficha{margin:1.2rem 0 0;display:grid;grid-template-columns:auto 1fr;gap:.6rem 1.8rem;max-width:70ch}
.ficha dt{font-family:var(--mono);font-size:.84rem;color:var(--quiet);white-space:nowrap;padding-top:.15rem}
.ficha dd{margin:0;color:var(--ink)}

@media (max-width:600px){
  .ficha{grid-template-columns:1fr;gap:0}
  .ficha dt{margin-top:1rem}
  .ficha dt:first-of-type{margin-top:0}
  .ficha dd{margin-top:.15rem}
}