.lang-switch{margin-left:12px;padding:6px 10px;border:1px solid #d4d7e5;border-radius:10px;background:white;font-size:14px}
.lang-switch:focus{outline:none;box-shadow:0 0 0 2px rgba(31,42,85,.15)}


/* === Language half-flag button === */

.lang-flag::before{
  content:"";position:absolute;left:0;top:0;width:50%;height:100%;
  background:linear-gradient(to bottom,#006847 33%,white 33% 66%,#CE1126 66%);
  border-top-left-radius:6px;border-bottom-left-radius:6px;
}
.lang-flag::after{
  content:"★";position:absolute;right:6px;top:2px;font-size:12px;color:white;
}
.lang-flag:focus{outline:none;box-shadow:0 0 0 2px rgba(31,42,85,.15)}


/* === Language half-flag with real images === */


.lang-flag::before,
.lang-flag::after {
  content: "";
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.lang-flag::before {
  left: 0;
  background-image: url("img/mexico.png");
}

.lang-flag::after {
  right: 0;
  background-image: url("img/usa.png");
}

.lang-flag:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(31,42,85,.2);
}


/* === Language flag: single image per current language + tasteful effects === */


/* Hide any previous half/half pseudo-elements if present */
.lang-flag::before,
.lang-flag::after { display: none !important; }

/* Language states */
.lang-flag.mx { background-image: url("img/mexico.png"); }
.lang-flag.us { background-image: url("img/usa.png"); }

/* Hover / active micro-interactions */
.lang-flag:hover { transform: translateY(-1px) scale(1.05); box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.lang-flag:active { transform: scale(0.96); filter: contrast(0.95); }

/* Flip animation on language change */
.lang-flag.anim { animation: langFlip .5s ease; }
@keyframes langFlip {
  0%   { transform: rotateY(0deg); }
  50%  { transform: rotateY(90deg); filter: brightness(0.9); }
  100% { transform: rotateY(0deg); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lang-flag, .lang-flag.anim { transition: none !important; animation: none !important; }
}


/* === FIX: Language Button shows single flag for current language === */

/* Kill any previous pseudo-elements from older styles */
.lang-flag::before,
.lang-flag::after { content: none !important; display: none !important; }

/* Current language images */
.lang-flag.mx { background-image: url("img/mexico.png"); }
.lang-flag.us { background-image: url("img/usa.png"); }

.lang-flag:hover { transform: translateY(-1px) scale(1.05); box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.lang-flag:active { transform: scale(0.97); }


/* === Enhanced Language Button: Bigger, Squarer, Positioned Top-Right === */

.lang-flag:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 0 10px rgba(31,42,85,0.6);
}
.lang-flag:active {
  transform: scale(0.95);
}


/* === Position language button inside header, far right === */
header { position: relative; }



/* Update US flag to new asset */
.lang-flag.us { background-image: url("img/usa.webp"); }

/* Mobile tweak: slightly smaller so it doesn't collide */
@media (max-width: 768px) {
  
}


/* === HQ SVG flags for perfect sharpness (stars & emblem visible) === */

.lang-flag.us { background-image: url("img/usa.svg"); }
.lang-flag.mx { background-image: url("img/mexico.svg"); }



.lang-flag {
  width: 48px;
  height: 28px;
  border: 2px solid #fff;
  border-radius: 6px;
  cursor: pointer;
  display: inline-block;
  margin-left: 12px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 20;
}
.lang-flag.mx { background-image: url("img/mexico.png"); }
.lang-flag.us { background-image: url("img/usa.png"); }
.lang-flag:hover { transform: translateY(-1px) scale(1.05); box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.lang-flag:active { transform: scale(0.97); }



/* === Overrides to keep language flag inside header, top-right, with SVG flags === */
header { position: relative; }
.lang-flag { 
  position: absolute; top: 16px; right: 16px; width: 60px; height: 40px;
  border-radius: 10px; border: 2px solid #fff; background-size: cover; background-position: center;
  z-index: 20; box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.lang-flag.mx { background-image: url("img/mexico.svg"); }
.lang-flag.us { background-image: url("img/usa.svg"); }
.lang-flag::before, .lang-flag::after { content: none !important; display: none !important; }