/* Ilustraciones. Los archivos los copia build.py desde _fuente/assets. */

/* La cabecera de cada calculadora es una banda a todo el ancho con el color
   de su propia ilustracion; la imagen se funde con la banda mediante una
   mascara, sin recuadro ni borde. Las variables --art-* las pone visuales.py. */
.hero.calc-art{
  position:relative;
  max-width:none;
  width:100vw;
  margin:0 0 8px calc(50% - 50vw);
  padding:0;
  background:var(--art-bg,#f8e8d8);
  border-top:1px solid var(--art-line,rgba(0,0,0,.1));
  border-bottom:1px solid var(--art-line,rgba(0,0,0,.1));
  isolation:isolate;
}
.calc-art-copy{
  position:relative;
  z-index:2;
  max-width:1120px;
  margin:0 auto;
  padding:52px 18px 56px;
  width:100%;
}
.calc-art-copy h1{color:var(--art-ink,#16181c);max-width:15ch}
.calc-art-copy .lead,
.calc-art-copy p{color:var(--art-ink-2,#4a4f57);max-width:34rem}
.calc-art-copy strong{color:var(--art-ink,#16181c)}
.calc-art-copy a{color:var(--art-ink,#16181c)}
.calc-art-copy p:last-child{margin-bottom:0}

.calc-art-picture{
  position:absolute;
  inset:0 0 0 auto;
  z-index:1;
  width:min(62%,880px);
  height:100%;
  display:block;
  pointer-events:none;
}
.calc-art-picture img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:right var(--art-focus,50%);
  display:block;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 48%);
          mask-image:linear-gradient(to right,transparent 0,#000 48%);
}

/* En pantallas estrechas el texto no cabe junto al dibujo: la imagen pasa
   arriba, recortada, y el texto va debajo. */
@media (max-width:820px){
  .hero.calc-art{display:flex;flex-direction:column-reverse}
  .calc-art-copy{padding:26px 18px 34px;max-width:640px}
  .calc-art-copy h1,.calc-art-copy .lead{max-width:none}
  .calc-art-picture{position:relative;inset:auto;width:100%;height:190px}
  .calc-art-picture img{
    object-position:center var(--art-focus,50%);
    -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);
            mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);
  }
}

/* Miniatura de las tarjetas */
.da-card .calc-card-art{
  display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  border-radius:10px;margin:0 0 16px;background:#082b43;
}

/* Cabecera en movil */
@media(max-width:720px){
  header.site .hd{height:auto;min-height:58px;padding:10px 18px;flex-wrap:wrap;gap:8px}
  header.site .da-nav{order:3;width:100%;margin:0}
  header.site .spacer{display:none}
  header.site .da-lang{margin-left:auto}
}
@media(max-width:420px){
  header.site .brand{width:100%}
  header.site .da-lang{margin-left:0}
  header.site .iconbtn{margin-left:auto}
}