:root{
  --et212-blue:#062B8F;
  --et212-blue-dark:#03185F;
  --et212-blue-mid:#0A48B8;
  --et212-blue-light:#1478E7;
  --et212-orange:#F6A30A;
  --et212-yellow:#FFC126;
  --et212-magenta:#F0147A;
  --et212-pink:#FF3D96;
  --et212-ink:#071B49;
  --et212-muted:#667690;
}

.et212-ribbon,.et212-header,.et212-nav{width:100%;box-sizing:border-box}
.et212-ribbon *,.et212-header *,.et212-nav *{box-sizing:border-box}

/* ==============================================================
   FRANJA SUPERIOR — réplica visual del render aprobado.
   Los acentos están dentro de los degradados, sin líneas/polígonos.
   ============================================================== */
.et212-ribbon{
  position:relative;
  min-height:86px;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(520px 150px at -2% -35%,rgba(255,193,38,.98) 0 15%,transparent 16%),
    radial-gradient(620px 180px at 2% -42%,transparent 0 34%,rgba(240,20,122,.97) 35% 44%,transparent 45%),
    radial-gradient(760px 220px at 5% -50%,transparent 0 48%,rgba(20,120,231,.94) 49% 58%,transparent 59%),
    radial-gradient(520px 150px at 102% 135%,rgba(255,193,38,.98) 0 15%,transparent 16%),
    radial-gradient(620px 180px at 98% 142%,transparent 0 34%,rgba(240,20,122,.97) 35% 44%,transparent 45%),
    radial-gradient(760px 220px at 95% 150%,transparent 0 48%,rgba(20,120,231,.94) 49% 58%,transparent 59%),
    radial-gradient(900px 140px at 50% -80px,rgba(34,164,255,.32),transparent 64%),
    linear-gradient(105deg,#03185F 0%,#073B9D 38%,#0C58D0 66%,#03185F 100%);
  box-shadow:inset 0 1px 0 rgba(255,193,38,.35);
}

.et212-ribbon-inner{
  width:min(1440px,calc(100% - 56px));
  min-height:86px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:36px;
  position:relative;
  z-index:2;
}

.et212-social-block{
  display:flex;
  align-items:center;
  gap:16px;
  padding-left:76px;
  font-family:Arial,sans-serif;
}

.et212-social-block>strong{
  font-size:.82rem;
  letter-spacing:.03em;
  white-space:nowrap;
}

.et212-socials{display:flex;align-items:center;gap:11px}
.et212-socials a{
  width:39px;height:39px;display:grid;place-items:center;border-radius:50%;
  color:var(--et212-blue);background:#fff;text-decoration:none;
  box-shadow:0 7px 20px rgba(0,0,0,.16);
  transition:transform .18s ease,color .18s ease
}
.et212-socials a:hover{transform:translateY(-2px);color:var(--et212-magenta)}
.et212-socials svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.et212-socials a:first-child svg path{fill:currentColor;stroke:none}

.et212-ribbon-copy{
  justify-self:end;
  padding-right:70px;
  color:#fff;
  text-align:left;
  font:600 .84rem/1.45 Arial,sans-serif;
  letter-spacing:.01em;
}

/* ==============================================================
   MASTHEAD — ancho, limpio, exactamente separado del nav
   ============================================================== */
.et212-header{
  background:#fff;
  border-bottom:1px solid #E7ECF5;
  box-shadow:0 3px 18px rgba(3,24,95,.025);
}

.et212-header-inner{
  width:min(1500px,calc(100% - 64px));
  min-height:142px;
  margin:auto;
  display:grid;
  grid-template-columns:minmax(330px,1fr) minmax(520px,1.35fr) minmax(330px,1fr);
  align-items:center;
  gap:28px;
}

/* meta left */
.et212-meta{
  display:grid;
  grid-template-columns:auto auto 1px minmax(0,1fr);
  align-items:center;
  gap:13px;
  min-width:0;
  font-family:Arial,sans-serif
}
.et212-meta-icon{
  width:42px;height:42px;display:grid;place-items:center;border-radius:14px;
  color:var(--et212-magenta);background:#FFF0F7
}
.et212-meta-icon svg,.et212-place svg{
  width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round
}
.et212-date{display:block;color:#102452;font-size:.80rem;font-weight:850;text-transform:capitalize;white-space:nowrap}
.et212-time{display:block;margin-top:5px;color:#102452;font-size:.76rem;font-weight:750;font-variant-numeric:tabular-nums;white-space:nowrap}
.et212-meta-sep{width:1px;height:50px;background:#DCE4F0}
.et212-place{display:flex;align-items:center;gap:9px;color:var(--et212-magenta);min-width:0}
.et212-place span{display:grid;gap:3px;min-width:0}
.et212-place b{color:#263E6B;font-size:.78rem;white-space:nowrap}
.et212-place small{color:#8190AA;font-size:.65rem;white-space:nowrap}

/* Brand central */
.et212-brand{
  min-width:0;
  display:grid;
  justify-items:center;
  color:var(--et212-blue-dark);
  text-decoration:none;
  text-align:center;
  font-family:Arial,sans-serif
}
.et212-brand-word{
  display:inline-block;
  color:#073184;
  font-size:clamp(2.45rem,3.15vw,4.1rem);
  font-weight:950;
  font-style:italic;
  letter-spacing:-.065em;
  line-height:.86;
  white-space:nowrap;
}
.et212-brand-region{
  display:inline-block;
  margin-top:2px;
  padding:0 12px 4px;
  color:#fff;
  background:linear-gradient(135deg,var(--et212-magenta),#FF437C);
  font-size:clamp(1.55rem,2.10vw,2.75rem);
  font-weight:950;
  font-style:italic;
  letter-spacing:-.04em;
  line-height:1;
  border-radius:4px;
  box-shadow:0 5px 16px rgba(240,20,122,.14);
}
.et212-tagline{
  display:block;
  max-width:100%;
  margin-top:11px;
  overflow:hidden;
  color:#41557C;
  font:850 .62rem/1.2 Arial,sans-serif;
  letter-spacing:.28em;
  white-space:nowrap
}
.et212-tagline span{
  display:inline-block;
  animation:et212Tagline 4.2s ease-in-out infinite alternate;
  will-change:transform
}
@keyframes et212Tagline{from{transform:translateX(-13px)}to{transform:translateX(13px)}}

/* buttons */
.et212-actions{display:flex;align-items:center;justify-content:flex-end;gap:14px}
.et212-btn{
  min-height:54px;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:0 22px;border-radius:18px;font:850 .83rem/1 Arial,sans-serif;
  text-decoration:none;white-space:nowrap;transition:.18s ease
}
.et212-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.et212-btn-outline{
  min-width:205px;color:var(--et212-blue);background:#fff;
  border:2px solid var(--et212-magenta);
  box-shadow:0 10px 24px rgba(6,43,143,.06),inset 0 -3px 0 rgba(240,20,122,.25)
}
.et212-btn-outline:hover{color:#fff;background:linear-gradient(135deg,var(--et212-magenta),#D90861);transform:translateY(-1px)}
.et212-btn-solid{
  min-width:142px;color:#fff;background:linear-gradient(135deg,#0A67DC,#062B8F);
  border:1.5px solid #062B8F;box-shadow:0 13px 28px rgba(6,43,143,.20)
}
.et212-btn-solid:hover{background:linear-gradient(135deg,#0C55C7,#03185F);transform:translateY(-1px)}

/* ==============================================================
   NAV APROBADO — rectangular a ancho completo, sin cápsula exterior.
   ============================================================== */
.et212-nav{
  position:sticky;
  top:0;
  z-index:80;
  padding:0;
  background:
    radial-gradient(circle at 50% -85%,rgba(36,167,255,.62),transparent 55%),
    linear-gradient(100deg,#03185F 0%,#063B9C 35%,#0B56CC 65%,#03185F 100%);
  border-top:2px solid var(--et212-yellow);
  box-shadow:0 10px 24px rgba(3,24,95,.12);
  overflow:hidden
}
.et212-nav::before,
.et212-nav::after{
  content:"";
  position:absolute;
  pointer-events:none;
  top:-72px;
  width:220px;
  height:150px;
  border-radius:50%;
  opacity:.9
}
.et212-nav::before{
  left:-88px;
  background:
    radial-gradient(ellipse at 50% 91%,transparent 0 58%,var(--et212-yellow) 59% 65%,transparent 66%),
    radial-gradient(ellipse at 50% 82%,transparent 0 68%,#1475EF 69% 76%,transparent 77%),
    radial-gradient(ellipse at 50% 73%,transparent 0 78%,var(--et212-magenta) 79% 86%,transparent 87%)
}
.et212-nav::after{
  right:-88px;transform:scaleX(-1);
  background:
    radial-gradient(ellipse at 50% 91%,transparent 0 58%,var(--et212-yellow) 59% 65%,transparent 66%),
    radial-gradient(ellipse at 50% 82%,transparent 0 68%,#1475EF 69% 76%,transparent 77%),
    radial-gradient(ellipse at 50% 73%,transparent 0 78%,var(--et212-magenta) 79% 86%,transparent 87%)
}
.et212-nav-inner{
  position:relative;
  z-index:2;
  width:min(1580px,100%);
  min-height:68px;
  margin:auto;
  display:flex;
  align-items:stretch
}
.et212-nav a{
  position:relative;
  min-width:0;
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:0 clamp(12px,1.1vw,19px);
  color:#fff;
  text-decoration:none;
  font:800 clamp(.73rem,.82vw,.88rem)/1 Arial,sans-serif;
  white-space:nowrap;
  border-right:1px solid rgba(255,255,255,.12);
  transition:background .18s ease,color .18s ease
}
.et212-nav a:last-child{border-right:0}
.et212-nav a:hover{background:rgba(255,255,255,.075)}
.et212-nav-icon{width:21px;height:21px;display:grid;place-items:center;flex:0 0 21px}
.et212-nav-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.et212-nav a.active{
  color:#fff;
  background:linear-gradient(135deg,#FF2383 0%,#F0147A 50%,#F6A30A 100%);
  box-shadow:inset 0 -4px 0 #FFC126
}
.et212-nav a.active::after{
  content:"";
  position:absolute;
  left:18%;
  right:18%;
  bottom:4px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,#FFC126,#F0147A)
}

/* responsive */
@media(max-width:1280px){
  .et212-header-inner{grid-template-columns:minmax(270px,.9fr) minmax(430px,1.2fr) minmax(290px,.9fr);gap:20px}
  .et212-place small{display:none}
  .et212-brand-word{font-size:clamp(2.15rem,3vw,3.35rem)}
  .et212-brand-region{font-size:clamp(1.45rem,2vw,2.25rem)}
  .et212-btn{padding-inline:15px}.et212-btn-outline{min-width:174px}.et212-btn-solid{min-width:116px}
  .et212-nav{overflow-x:auto;scrollbar-width:none}.et212-nav::-webkit-scrollbar{display:none}
  .et212-nav-inner{width:max-content;min-width:100%}
  .et212-nav a{flex:0 0 auto;min-width:124px;padding-inline:16px}
}

@media(max-width:960px){
  .et212-ribbon-inner{grid-template-columns:1fr;width:calc(100% - 28px);min-height:62px}
  .et212-ribbon{min-height:62px}
  .et212-ribbon-copy{display:none}
  .et212-social-block{justify-content:center;padding-left:0}
  .et212-header-inner{width:calc(100% - 28px);padding:22px 0;grid-template-columns:1fr 1fr;grid-template-areas:"brand brand" "meta actions";gap:20px}
  .et212-brand{grid-area:brand}.et212-meta{grid-area:meta}.et212-actions{grid-area:actions}
}

@media(max-width:650px){
  .et212-social-block>strong{display:none}
  .et212-socials a{width:32px;height:32px}.et212-socials svg{width:15px;height:15px}
  .et212-header-inner{grid-template-columns:1fr;grid-template-areas:"brand" "actions" "meta";gap:16px;padding:20px 0}
  .et212-brand-word{font-size:clamp(1.75rem,9vw,2.4rem)}
  .et212-brand-region{font-size:clamp(1.32rem,7.5vw,1.9rem)}
  .et212-tagline{font-size:.49rem;letter-spacing:.16em;white-space:normal}
  .et212-actions{justify-content:center;flex-wrap:wrap}.et212-btn{min-height:44px;font-size:.74rem}.et212-btn-outline{min-width:162px}.et212-btn-solid{min-width:108px}
  .et212-meta{justify-content:center;grid-template-columns:auto auto;text-align:center}.et212-meta-sep,.et212-place{display:none}
  .et212-nav-inner{min-height:58px}.et212-nav a{min-width:112px;font-size:.71rem;gap:6px}.et212-nav-icon{width:18px;height:18px}.et212-nav-icon svg{width:18px;height:18px}
}

@media(prefers-reduced-motion:reduce){
  .et212-tagline span{animation:none!important;transform:none!important}
  .et212-socials a,.et212-btn,.et212-nav a{transition:none!important}
}