.tarjeta-page{width:min(100%,1920px);margin:0 auto;container-type:inline-size;background:var(--paper);color:var(--orange)}
.tarjeta-block{position:relative;width:100%;height:100svh;min-height:0;overflow:hidden}
.tarjeta-hero{background:#B3D6C7;color:#fff}
.tarjeta-hero .site-header{z-index:5;color:#fff}
.tarjeta-hero .nav a{color:var(--orange)}
.tarjeta-hero .mini-mark img{filter:brightness(0) saturate(100%) invert(44%) sepia(95%) saturate(2626%) hue-rotate(344deg) brightness(101%) contrast(101%)}
.tarjeta-hero .header-cta{background:var(--orange);border-color:var(--orange);color:#fff;transition:background .2s,color .2s,transform .2s}
.tarjeta-hero .header-cta:hover{background:#fff;border-color:var(--orange);color:var(--orange);transform:translateY(-2px)}
.tarjeta-composition{position:absolute;left:50%;top:49%;width:min(86cqw,126svh);height:auto;max-height:64svh;object-fit:contain;transform:translate(-50%,-50%)}
.tarjeta-wave{position:absolute;left:0;right:0;bottom:1.5svh;height:min(10cqw,16svh);overflow:hidden}
.tarjeta-wave .wave{display:block;width:100%;height:100%;overflow:visible;fill:var(--orange)}
.tarjeta-wave .wave text{fill:var(--orange);font-family:var(--mono);font-size:7.29px}
.tarjeta-wave .wave textPath{dominant-baseline:middle}
@media(max-width:850px){
  .tarjeta-hero .site-header{padding:24px 22px}
  .tarjeta-composition{width:min(90cqw,135svh);max-height:62svh;top:49%}
  .tarjeta-wave{height:min(13cqw,15svh);bottom:1svh}
}
@media(max-width:600px){
  .tarjeta-hero .site-header{padding:20px 17px}
  .tarjeta-hero .mini-mark{width:58px}
  .tarjeta-hero .header-cta{margin-left:69px;padding:6px 11px;font-size:9px}
  .tarjeta-composition{width:96cqw;max-height:55svh;top:48%}
  .tarjeta-wave{height:16vw;bottom:2svh}
  .tarjeta-wave .wave{width:100vw}
  .tarjeta-wave .wave text{font-size:13.77px}
}
@media(prefers-reduced-motion:reduce){.tarjeta-wave textPath animate{display:none}}

/* Ajustes de lectura y objetivos táctiles; solo móvil. */

@media(max-width:600px){
  .tarjeta-composition{width:calc(100% - 24px);max-width:none}
  .tarjeta-hero .header-cta{min-height:42px;display:inline-flex;align-items:center}
}

/* Hero y header móvil alineados con la landing. */
@media(max-width:700px){
  .tarjeta-hero{height:80svh;min-height:500px;max-height:760px}
  .tarjeta-hero .site-header{padding:30px 17px 18px}
  .tarjeta-hero .mini-mark{display:none}
  .tarjeta-hero .header-cta{margin-left:0}
}

/* Banner centrado en el espacio entre la composición y el footer; solo móvil. */
@media(max-width:700px){
  .tarjeta-wave{
    bottom:clamp(64px,calc(15svh - 8vw),120px);
  }
}