.kavros-flag {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
  display: inline-block;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.kavros-flag-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 33.33%;
  background-color: #0f3264; /* Azul marino */
}

.kavros-flag-middle {
  position: absolute;
  top: 33.33%;
  left: 0;
  width: 100%;
  height: 33.33%;
  background-color: #f4f4e8; /* Blanco crema */
  display: flex;
  justify-content: center;
  align-items: center;
}

.kavros-flag-bottom {
  position: absolute;
  top: 66.66%;
  left: 0;
  width: 100%;
  height: 33.34%;
  background-color: #c41e3a; /* Rojo */
}

.kavros-flag-emblem {
  position: absolute;
  background-color: #0f3264; /* Azul marino */
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(-10px);
  overflow: hidden;
}

.eagle-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.eagle {
  position: relative;
  width: 40px;
  height: 40px;
  background-color: #ffc107; /* Dorado para el águila */
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M428.8 137.6c-11.3-12.9-30.4-15.5-44.7-7.8-5.3 2.9-16.3 9.3-26.8 15.5-19.7-9.5-39.2-16.1-54.8-16.1-15.6 0-35.5 6.8-55.3 16.5-19.8-9.7-39.7-16.5-55.3-16.5-15.6 0-35.1 6.7-54.8 16.1-10.5-6.2-21.5-12.6-26.8-15.5-14.2-7.8-33.4-5.1-44.7 7.8-16.5 18.5-13.6 48.5 5.6 67.1 15.2 14.8 32.3 20.3 46.6 20.3 18 0 30.1-8.4 38.5-14.3 4.1-2.9 7.8-5.5 11.1-7.4 7.7-4.3 15.2-3.6 21.9-3 6.8-2.4 14.7-3.2 22.5-3.2 7.9 0 15.9 0.8 22.8 3.2 6.7-0.6 14-1.3 21.5 2.9 3.3 1.9 7 4.5 11.1 7.4 8.5 5.9 20.6 14.3 38.5 14.3 14.3 0 31.3-5.5 46.5-20.3 19.3-18.5 22.2-48.5 5.6-67.1zM151.8 185c-5.9-4.2-15-8.8-29.2-8.8-8.6 0-16.8-3-22.8-8.9-10.1-9.8-9.1-23.7-5.1-28.3 3.3-3.8 9.3-4.6 13.5-2.3 17.1 9.4 30.7 20 40.6 27.5 0.9 12 2.5 20.7 3 20.8zM360.2 221.7c-14.3 0-23.3-4.6-29.2-8.8 0.5-0.1 2.1-8.8 3-20.8 9.9-7.5 23.5-18.1 40.6-27.5 4.3-2.3 10.3-1.5 13.5 2.3 4 4.5 5 18.5-5.1 28.3-6 5.8-14.1 8.8-22.8 8.8zM256 208c-17.7 0-32 17.9-32 40s14.3 40 32 40 32-17.9 32-40-14.3-40-32-40zm0 56c-4.4 0-8-7.2-8-16s3.6-16 8-16 8 7.2 8 16-3.6 16-8 16zM144 232c-8.8 0-16 7.2-16 16s7.2 16 16 16 16-7.2 16-16-7.2-16-16-16zm224 0c-8.8 0-16 7.2-16 16s7.2 16 16 16 16-7.2 16-16-7.2-16-16-16z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M428.8 137.6c-11.3-12.9-30.4-15.5-44.7-7.8-5.3 2.9-16.3 9.3-26.8 15.5-19.7-9.5-39.2-16.1-54.8-16.1-15.6 0-35.5 6.8-55.3 16.5-19.8-9.7-39.7-16.5-55.3-16.5-15.6 0-35.1 6.7-54.8 16.1-10.5-6.2-21.5-12.6-26.8-15.5-14.2-7.8-33.4-5.1-44.7 7.8-16.5 18.5-13.6 48.5 5.6 67.1 15.2 14.8 32.3 20.3 46.6 20.3 18 0 30.1-8.4 38.5-14.3 4.1-2.9 7.8-5.5 11.1-7.4 7.7-4.3 15.2-3.6 21.9-3 6.8-2.4 14.7-3.2 22.5-3.2 7.9 0 15.9 0.8 22.8 3.2 6.7-0.6 14-1.3 21.5 2.9 3.3 1.9 7 4.5 11.1 7.4 8.5 5.9 20.6 14.3 38.5 14.3 14.3 0 31.3-5.5 46.5-20.3 19.3-18.5 22.2-48.5 5.6-67.1zM151.8 185c-5.9-4.2-15-8.8-29.2-8.8-8.6 0-16.8-3-22.8-8.9-10.1-9.8-9.1-23.7-5.1-28.3 3.3-3.8 9.3-4.6 13.5-2.3 17.1 9.4 30.7 20 40.6 27.5 0.9 12 2.5 20.7 3 20.8zM360.2 221.7c-14.3 0-23.3-4.6-29.2-8.8 0.5-0.1 2.1-8.8 3-20.8 9.9-7.5 23.5-18.1 40.6-27.5 4.3-2.3 10.3-1.5 13.5 2.3 4 4.5 5 18.5-5.1 28.3-6 5.8-14.1 8.8-22.8 8.8zM256 208c-17.7 0-32 17.9-32 40s14.3 40 32 40 32-17.9 32-40-14.3-40-32-40zm0 56c-4.4 0-8-7.2-8-16s3.6-16 8-16 8 7.2 8 16-3.6 16-8 16zM144 232c-8.8 0-16 7.2-16 16s7.2 16 16 16 16-7.2 16-16-7.2-16-16-16zm224 0c-8.8 0-16 7.2-16 16s7.2 16 16 16 16-7.2 16-16-7.2-16-16-16z'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  mask-size: contain;
  -webkit-mask-size: contain;
}

.laurel-left {
  position: absolute;
  bottom: 15px;
  left: 22px;
  width: 15px;
  height: 25px;
  background-color: #ffc107; /* Dorado para el laurel */
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 200'%3E%3Cpath d='M50,0 C30,40 20,80 30,120 C40,80 45,40 50,0 Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 200'%3E%3Cpath d='M50,0 C30,40 20,80 30,120 C40,80 45,40 50,0 Z'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  mask-size: contain;
  -webkit-mask-size: contain;
  transform: rotate(-30deg);
}

.laurel-right {
  position: absolute;
  bottom: 15px;
  right: 22px;
  width: 15px;
  height: 25px;
  background-color: #ffc107; /* Dorado para el laurel */
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 200'%3E%3Cpath d='M50,0 C70,40 80,80 70,120 C60,80 55,40 50,0 Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 200'%3E%3Cpath d='M50,0 C70,40 80,80 70,120 C60,80 55,40 50,0 Z'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  mask-size: contain;
  -webkit-mask-size: contain;
  transform: rotate(30deg);
}

.kavros-text {
  position: absolute;
  bottom: 10px;
  width: 100%;
  text-align: center;
  color: #0f3264; /* Azul marino */
  font-weight: bold;
  font-size: 22px;
  font-family: 'Arial', sans-serif;
  letter-spacing: 1px;
}

/* Versiones responsivas */
.kavros-flag-small {
  width: 60px;
  height: 40px;
}

.kavros-flag-small .kavros-flag-emblem {
  width: 22px;
  height: 22px;
  transform: translateY(-3px);
  border-width: 1px;
}

.kavros-flag-small .eagle {
  width: 12px;
  height: 12px;
}

.kavros-flag-small .laurel-left, 
.kavros-flag-small .laurel-right {
  width: 4px;
  height: 6px;
  bottom: 4px;
}

.kavros-flag-small .laurel-left {
  left: 6px;
}

.kavros-flag-small .laurel-right {
  right: 6px;
}

.kavros-flag-small .kavros-text {
  font-size: 5px;
  bottom: 2px;
  letter-spacing: 0.3px;
}

.kavros-flag-medium {
  width: 150px;
  height: 100px;
}

.kavros-flag-medium .kavros-flag-emblem {
  width: 50px;
  height: 50px;
  transform: translateY(-7px);
  border-width: 2px;
}

.kavros-flag-medium .eagle {
  width: 25px;
  height: 25px;
}

.kavros-flag-medium .laurel-left, 
.kavros-flag-medium .laurel-right {
  width: 10px;
  height: 15px;
  bottom: 8px;
}

.kavros-flag-medium .laurel-left {
  left: 13px;
}

.kavros-flag-medium .laurel-right {
  right: 13px;
}

.kavros-flag-medium .kavros-text {
  font-size: 12px;
  bottom: 5px;
  letter-spacing: 0.7px;
}