*{box-sizing:border-box}
:root{--marfil:#F1EEE5;--azul:#282D46;--verde:#44492D}
html,body{margin:0;width:100%;height:100%;background:var(--marfil)}
body{overflow:hidden;font-family:"Montserrat",Arial,sans-serif;color:var(--azul)}
.viewport{width:100vw;height:100svh;display:flex;align-items:center;justify-content:center;background:var(--marfil)}

/* FRAME MAESTRO DE FIGMA: 1440 × 900.
   Todo se posiciona dentro de este mismo sistema de proporciones. */
.frame{
  position:relative;
  width:min(100vw,160svh);
  aspect-ratio:1440/900;
  flex:none;
  background:var(--marfil);
  container-type:size;
  overflow:hidden;
}
.identidad{
  position:absolute;
  width:36.83cqw;             /* 530.4 px en 1440 */
  height:auto;
  left:50%;
  top:5.11cqh;               /* 46 px */
  transform:translateX(-50%);
  display:block;
}
.disciplinas{
  position:absolute;
  left:50%;
  top:55.25cqh;              /* centro visual del Figma */
  transform:translate(-50%,-50%);
  margin:0;
  font-size:2.15cqw;         /* ~31 px */
  line-height:1;
  font-weight:400;
  white-space:nowrap;
}
.disciplinas span{display:inline-block;margin:0 .50cqw}
.separador{
  position:absolute;
  left:50%;
  top:59.45cqh;
  width:1px;
  height:8.0cqh;             /* ~72 px */
  transform:translateX(-50%);
  background:rgba(68,73,45,.58);
}
.estado{
  position:absolute;
  left:50%;
  top:72.75cqh;
  transform:translate(-50%,-50%);
  color:var(--verde);
  font-size:2.0cqw;          /* ~29 px */
  line-height:1;
  font-weight:400;
  white-space:nowrap;
}
.descripcion{
  position:absolute;
  left:50%;
  top:76.25cqh;
  transform:translate(-50%,-50%);
  color:rgba(68,73,45,.42);
  font-size:.97cqw;          /* ~14 px */
  line-height:1;
  font-weight:300;
  white-space:nowrap;
}
.contacto{
  position:absolute;
  left:50%;
  top:89.25cqh;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  gap:.42cqw;
  font-size:1.25cqw;         /* ~18 px */
  line-height:1;
  font-weight:400;
  white-space:nowrap;
}
.contacto a{color:var(--azul);text-decoration:none}

/* FRAME MÓVIL DE FIGMA: 390 × 844 */
@media(max-width:600px){
  .frame{
    width:min(100vw,46.2085svh);
    aspect-ratio:390/844;
  }
  .identidad{
    width:99.05cqw;          /* ~386 px */
    top:8.65cqh;             /* ~73 px */
  }
  .disciplinas{
    top:51.48cqh;            /* ~434.5 px */
    font-size:4.10cqw;       /* 16 px */
  }
  .disciplinas span{margin:0 .75cqw}
  .separador{
    top:58.12cqh;            /* ~490.5 px */
    height:8.53cqh;          /* ~72 px */
  }
  .estado{
    top:72.00cqh;            /* ~607.5 px */
    font-size:4.10cqw;       /* 16 px */
  }
  .descripcion{
    top:74.65cqh;            /* ~630 px */
    font-size:2.31cqw;       /* 9 px */
  }
  .contacto{
    top:88.00cqh;            /* ~742.5 px */
    gap:1.0cqw;
    font-size:2.82cqw;       /* 11 px */
  }
}