/* =============================================================================
   piel.css - Impression Spa. Modelo SIGNATURE, formato «LA BARAJA».

   Es el primero que NO usa el formato «La travesia». Aqui no se entra por una
   puerta: se MIRA HACIA ARRIBA -que es el punto de vista de quien esta en la
   camilla- y las bandas se apilan como cartas en vez de ir una debajo de otra.

   Y es la cuarta combinacion de temperatura del Estudio, a proposito:
     Gumba's   calida  oscura
     S&S Tire  fria    oscura
     Keystone  calida  clara
     Impression FRIA   CLARA   ← esta

   Contrastes medidos ANTES de escribir una linea:
     tinta   #141C1B sobre papel #ECEEED -> 14,87:1
     ciruela #6A3F58 sobre papel         ->  7,31:1  (y papel encima, 7,31)
     ciruela #C79BB6 sobre tinta         ->  7,26:1
     apagado #59605F sobre papel         ->  5,52:1
     apagado #9CA5A3 sobre tinta         ->  6,87:1
   ========================================================================== */

/* Instrument Serif pesa 15 KB y tiene UN solo peso. En un sitio Signature eso
   es una ventaja: obliga a que la jerarquia la haga el TAMANO y el aire, no
   la negrita. DM Sans para el texto, que se aparta y deja hablar a la foto. */
@font-face{
  font-family:"Instrument Serif"; src:url(../fonts/instrument-serif-latin.woff2) format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"DM Sans"; src:url(../fonts/dm-sans-latin.woff2) format("woff2");
  font-weight:400 500; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --text:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;

  --c-ink:#141C1B;           /* negro con verde azulado */
  --c-paper:#ECEEED;         /* palido y frio */
  --c-surface:#1B2423;
  --c-deep:#0D1413;
  --c-muted-on-dark:#9CA5A3;
  --c-muted-on-light:#59605F;

  --c-accent:#6A3F58;        /* ciruela: el unico tono que no tiene ningun otro */
  --on-accent:#ECEEED;       /* encima del ciruela -> 7,31 */
  --c-accent-claro:#C79BB6;  /* tinta de acento en oscuro -> 7,26 */
  --c-accent-oscuro:#6A3F58; /* tinta de acento en claro  -> 7,31 */

  --c-ink-15:rgba(20,28,27,.15);
  --c-paper-15:rgba(236,238,237,.15);
  --c-paper-25:rgba(236,238,237,.25);

  --c-accent-t:#6A3F58;
  --hero-fondo:#3E4746;      /* el dominante del cielo es #919898, pero con
                                texto claro encima da 2,52: se oscurece hasta
                                8,21, que es lo que aguanta sin la foto */
  --mapa-fondo:#E4E7E6;
  --baraja-fondo:#0D1413;   /* la mesa sobre la que se apilan las cartas */
  --split-bg:#E2E6E5; --split-ink:#141C1B; --split-soft:#59605F;
  --split-line:rgba(20,28,27,.16); --split-accent:#6A3F58;
}

/* Una sola pesada, asi que el titular manda por tamano y por aire. */
h1,h2,h3{font-weight:400; letter-spacing:-.012em}
h1{line-height:.94} h2{line-height:.98} h3{line-height:1.04}
.ceja{font-family:var(--text)}

/* -- la baraja ---------------------------------------------------------- */
.carta__txt{width:min(var(--ancho),100% - var(--canal)*2); margin-inline:auto}
/* Las cartas con foto declaran TEMA OSCURO y un fondo oscuro de verdad. No es
   para contentar al medidor: si una foto no carga, una carta de fondo papel
   con letra blanca se queda en blanco. Con esto, sin foto sigue siendo una
   carta oscura legible.
   Medido: hueso #ECEEED sobre #3E4746 da 8,21 y sobre #0D1413 da 15,7.      */
.carta--hero{background:#3E4746}
.carta--hero .carta__txt{color:#ECEEED; text-align:center; max-width:none;
  margin-inline:auto; text-shadow:0 1px 26px rgba(12,18,18,.55)}
/* Las dos mitades van en bloque: el titular se parte donde se decide, no
   donde caiga. Con `max-width` en caracteres salian cinco lineas cortas. */
.carta--hero h1{font-size:clamp(2.3rem,5.4vw,5rem)}
.carta--hero h1 span{display:block}
.carta--hero .fina{color:#DDE2E1; letter-spacing:.24em; text-transform:uppercase;
  margin-top:var(--s5)}
/* El velo del heroe sale del centro hacia fuera: el tragaluz es lo mas claro
   de la foto y el titular va justo encima. */
.carta--hero .carta__velo{
  background:radial-gradient(58% 52% at 50% 46%,
    rgba(12,18,18,.62) 0%, rgba(12,18,18,.42) 52%, rgba(12,18,18,.20) 100%)}

.carta--foto .carta__txt{max-width:30ch}
.carta--foto{color:#ECEEED; background:var(--c-deep)}
.carta--foto h2{font-size:clamp(2.4rem,5.4vw,4.4rem); color:#ECEEED}
.carta--foto .carta__n{color:var(--c-accent-claro)}   /* 7,80 sobre #0D1413 */
.carta__cosas{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s3);
  margin:var(--s4) 0 0; padding:0; list-style:none}
.carta__cosas li{font-family:var(--text); font-size:var(--t-1);
  letter-spacing:.04em; padding:.4em .85em; border-radius:var(--r-pill);
  border:1px solid rgba(236,238,237,.42); color:#ECEEED}
.carta__pie{margin-top:var(--s5); color:#D5DAD9; font-size:var(--t-1)}

/* -- la carta entera, ya en bandas normales ----------------------------- */
.familia + .familia{margin-top:var(--s7)}
.familia h3{padding-bottom:var(--s3); margin-bottom:var(--s4);
  border-bottom:1px solid var(--hairline)}
.familia ul{display:grid; grid-template-columns:repeat(auto-fill,minmax(15em,1fr));
  gap:var(--s2) var(--s5); margin:0; padding:0; list-style:none}
.familia li{font-family:var(--display); font-size:var(--t1); line-height:1.35;
  padding:var(--s2) 0; border-bottom:1px solid var(--hairline)}
.familia b{font-family:var(--text); font-weight:500; font-size:.5em;
  letter-spacing:.14em; text-transform:uppercase; color:var(--c-accent-t);
  margin-left:var(--s3); vertical-align:.28em; white-space:nowrap}

.aviso{color:var(--c-accent-t); font-weight:500}