/* Optienergy · Campaña «Nueva tarifa MET Energía» (home) — prefijos .mc-pill / .opti-campana / .mc- */

/* ---------- Etiqueta de aviso en el hero (encima del titular) ---------- */
.mc-pill[hidden]{display:none!important}
.mc-pill{max-width:100%;animation:mc-pill-in .6s ease-out both}
@keyframes mc-pill-in{from{opacity:0;transform:translateY(10px)}}
.header_content .mc-pill .mc-pill__a{display:inline-flex;align-items:center;gap:10px;max-width:100%;padding:5px 6px 5px 5px;border-radius:999px;
  background:rgba(12,24,34,.45);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:#fff;font-family:Inter,system-ui,sans-serif;font-size:14px;font-weight:500;line-height:1.3;text-decoration:none;
  box-shadow:0 8px 24px -12px rgba(0,0,0,.5);transition:background .2s,border-color .2s}
.header_content .mc-pill .mc-pill__a:hover{background:rgba(12,24,34,.62);border-color:rgba(46,204,113,.6)}
.header_content .mc-pill .mc-pill__a:focus-visible{outline:2px solid #9FE3BD;outline-offset:3px}
.mc-pill__new{flex:none;padding:4px 10px;border-radius:999px;background:#2ECC71;color:#06301A;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.mc-pill__txt{min-width:0}
.mc-pill__co{color:rgba(255,255,255,.7)}
.mc-pill__go{flex:none;display:inline-flex;align-items:center;gap:4px;padding:4px 8px 4px 10px;border-radius:999px;background:rgba(255,255,255,.12);color:#9FE3BD;font-weight:600}
.mc-pill__go svg{width:15px;height:15px;transition:transform .2s}
.mc-pill__a:hover .mc-pill__go svg{transform:translateX(3px)}
@media (max-width:640px){
  .mc-pill__co{display:none}
  .header_content .mc-pill .mc-pill__a{font-size:13px;gap:8px}
  .mc-pill__lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .mc-pill__go{padding:5px 7px}
}
@media (max-width:420px){
  .header_content .mc-pill .mc-pill__a{gap:7px;padding-right:5px;font-size:12.5px;border-radius:18px}
  .mc-pill__new{padding:4px 8px;font-size:10.5px;letter-spacing:.03em}
}

/* ---------- Sección ---------- */
.opti-campana{--g:#2ECC71;--gd:#17803F;--gbg:#EEFBF3;--b:#2980B9;--ink:#2C3E50;--mut:#5B6B7B;--line:#E3E8EF;--soft:#F5F7FA;--y:#F1C40F;
  position:relative;padding:44px 0 48px;color:var(--ink);font-family:Inter,system-ui,sans-serif;line-height:1.55;
  scroll-margin-top:calc(var(--nav-height-mobile,72px) - 8px);
  background:radial-gradient(620px 300px at 100% 0%,rgba(46,204,113,.12),transparent 70%),radial-gradient(520px 300px at 0% 100%,rgba(241,196,15,.10),transparent 70%),#fff}
.opti-campana[hidden]{display:none!important}
.opti-campana *{box-sizing:border-box}
.opti-campana a{text-decoration:none}
.mc-wrap{width:min(1120px,100% - 32px);margin:0 auto;display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}

.mc-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.mc-new{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#06301A;background:var(--g);border-radius:999px;padding:3px 10px}
.mc-co{font-family:Poppins,sans-serif;font-size:13px;font-weight:600;color:var(--ink);border:1px solid var(--line);background:#fff;border-radius:999px;padding:2px 10px}
.mc-by{font-size:13px;font-weight:500;color:var(--mut)}
.opti-campana .mc-title{font-family:Poppins,sans-serif;font-weight:700;font-size:clamp(28px,4.4vw,42px);line-height:1.12;letter-spacing:-.02em;margin:14px 0 10px;color:var(--ink)}
.mc-title span{color:var(--gd)}
.opti-campana .mc-sub{margin:0;font-size:16px;line-height:1.55;color:var(--mut);max-width:560px}

.mc-facts{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mc-facts li{margin:0;padding:12px 10px;border-radius:14px;background:var(--soft);border:1px solid var(--line);display:flex;flex-direction:column;gap:3px}
.mc-facts b{font-family:Poppins,sans-serif;font-weight:700;font-size:clamp(17px,2.4vw,22px);line-height:1.15;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.mc-facts span{font-size:12.5px;line-height:1.35;color:var(--mut)}

.mc-chips{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:8px 16px}
.mc-chips li{margin:0;display:flex;align-items:center;gap:7px;font-size:14.5px;font-weight:500}
.mc-chips svg{flex:none;width:18px;height:18px;padding:2px;border-radius:50%;color:#fff;background:var(--g)}

/* Horario desplegable */
.mc-h{border:1px solid var(--line);border-radius:14px;background:#fff}
.mc-h summary{display:flex;align-items:center;gap:8px;min-height:48px;padding:12px 14px;cursor:pointer;font-weight:600;font-size:14.5px;color:var(--b);list-style:none}
.mc-h summary::-webkit-details-marker{display:none}
.mc-h summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.mc-h[open] summary::after{transform:rotate(-135deg)}
.mc-h summary svg{flex:none;width:18px;height:18px;color:var(--y)}
.mc-h summary:focus-visible{outline:3px solid #9FE3BD;outline-offset:2px;border-radius:12px}
.mc-h__body{padding:2px 14px 14px}
.mc-h__row{display:grid;grid-template-columns:38px minmax(0,1fr) 52px;align-items:center;gap:8px;margin-bottom:4px}
.mc-h__m{font-size:12px;font-weight:600;color:var(--mut)}
.mc-h__r{font-size:12px;color:var(--mut);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.mc-h__cells{position:relative;display:grid;grid-template-columns:repeat(24,1fr);gap:2px}
.mc-h__cells i{height:12px;border-radius:2px;background:#E9EEF3}
.mc-h__cells i.f{background:var(--g)}
.mc-h__axis .mc-h__cells{display:block;height:16px}
.mc-h__axis b{position:absolute;top:0;transform:translateX(-50%);font-size:11px;font-weight:500;color:var(--mut)}
.mc-h__axis b:first-child{transform:none}.mc-h__axis b:last-child{transform:translateX(-100%)}
.mc-h__leg{display:flex;gap:16px;margin-top:8px;font-size:12.5px;color:var(--mut)}
.mc-h__leg span{display:flex;align-items:center;gap:6px}
.mc-h__leg i{width:12px;height:12px;border-radius:3px;background:#E9EEF3}
.mc-h__leg i.f{background:var(--g)}

/* Tarjeta de precios */
.mc-card{align-self:start;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:0 24px 50px -30px rgba(44,62,80,.45);padding:14px}
.mc-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;border-radius:14px;background:var(--soft)}
.mc-tab{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;min-height:52px;padding:8px 11px;border:0;border-radius:10px;background:transparent;cursor:pointer;text-align:left;font:inherit;color:var(--mut);transition:background .2s,color .2s,box-shadow .2s}
.mc-tab b{font-family:Poppins,sans-serif;font-size:14px;font-weight:600;line-height:1.25}
.mc-tab small{font-size:11.5px;line-height:1.3}
.mc-tab[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 4px 12px -6px rgba(44,62,80,.35)}
.mc-tab[aria-selected="true"] small{color:var(--gd)}
.mc-tab:focus-visible{outline:3px solid #9FE3BD;outline-offset:1px}
.mc-panel{padding:16px 4px 2px;animation:mc-in .3s ease}
.mc-panel[hidden]{display:none}
@keyframes mc-in{from{opacity:0;transform:translateY(6px)}}
.mc-price__k{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.mc-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;margin-top:2px}
.mc-price b{display:inline-block;min-width:6.2ch;font-family:Poppins,sans-serif;font-weight:700;font-size:clamp(38px,5vw,46px);line-height:1.05;letter-spacing:-.02em;color:var(--gd);font-variant-numeric:tabular-nums}
.mc-price small{font-size:15px;font-weight:500;color:var(--mut)}
.mc-price__s{display:block;font-size:13.5px;color:var(--mut)}
.mc-per{margin:14px 0 16px;padding-top:12px;border-top:1px dashed var(--line)}
.mc-per__k{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.mc-per__k small{text-transform:none;letter-spacing:0;font-weight:500}
.mc-per__grid{display:grid;gap:6px;margin-top:8px;grid-template-columns:repeat(3,minmax(0,1fr))}
.mc-p{display:flex;flex-direction:column;padding:7px 9px;border-radius:9px;background:var(--soft)}
.mc-p span{font-size:11px;font-weight:600;color:var(--mut)}
.mc-p b{font-size:14px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.mc-btn{display:flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:12px 16px;border-radius:12px;font-family:Poppins,sans-serif;font-weight:600;font-size:15px;line-height:1.3;text-align:center;transition:transform .2s,box-shadow .2s,background .2s}
.mc-btn svg{width:18px;height:18px;flex:none}
.opti-campana .mc-btn--main{color:#fff;background:linear-gradient(135deg,#22B262,var(--gd));box-shadow:0 10px 22px -12px rgba(23,128,63,.9)}
.mc-btn--main:hover{transform:translateY(-2px)}
.mc-btn--main:hover svg{transform:translateX(3px)}
.mc-btn--main svg{transition:transform .2s}
.opti-campana .mc-btn--call{margin-top:8px;color:var(--ink);background:var(--soft);border:1px solid var(--line)}
.mc-btn--call:hover{background:#ECF1F5}
.mc-btn--call svg{color:var(--b)}
.mc-btn:focus-visible{outline:3px solid #9FE3BD;outline-offset:3px}
.opti-campana .mc-note{margin:14px 4px 0;font-size:12px;line-height:1.5;color:#6B7A89}

/* ---------- Entrada al llegar a la sección (solo con JS; sin JS o con «reducir movimiento» se ve todo directamente) ---------- */
.opti-campana.mc-js .mc-a{opacity:0;transform:translateY(18px)}
.opti-campana.mc-js .mc-a--card{transform:translateY(26px) scale(.98)}
.opti-campana.mc-js.is-in .mc-a{opacity:1;transform:none;transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--d,0) * 90ms)}
/* «Fijo» con subrayado de rotulador que se dibuja */
.mc-title span{padding:0 .04em;background:linear-gradient(rgba(46,204,113,.3),rgba(46,204,113,.3)) no-repeat 0 86% / 100% .3em}
.opti-campana.mc-js .mc-title span{background-size:0 .3em}
.opti-campana.mc-js.is-in .mc-title span{background-size:100% .3em;transition:background-size .8s ease .6s}
/* Precios por periodo: aparecen en cascada */
.opti-campana.mc-js .mc-p{opacity:0;transform:translateY(8px)}
.opti-campana.mc-js.is-in .mc-p{opacity:1;transform:none;transition:opacity .4s ease,transform .4s ease;transition-delay:calc(600ms + var(--d,0) * 70ms)}
/* Botón principal: un destello al aparecer */
.opti-campana .mc-btn--main{position:relative;overflow:hidden}
.opti-campana .mc-btn--main::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);pointer-events:none;opacity:0}
.opti-campana.is-in .mc-btn--main::after{animation:mc-shine 1.1s ease 1.3s 1 both}
@keyframes mc-shine{0%{left:-60%;opacity:1}100%{left:130%;opacity:1}}
/* Etiqueta «Nueva tarifa» con latido suave */
.mc-new{position:relative}
.opti-campana.is-in .mc-new::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(46,204,113,.55);animation:mc-pulse 2.2s ease-out 1s 3}
@keyframes mc-pulse{to{box-shadow:0 0 0 10px rgba(46,204,113,0)}}
/* Horario: al abrirlo, las filas se rellenan una a una */
.mc-h[open] .mc-h__row .mc-h__cells i.f{animation:mc-fill .45s ease both;animation-delay:calc(var(--d,0) * 45ms)}
@keyframes mc-fill{from{transform:scaleY(.2);opacity:0}}

/* Móvil pequeño: datos clave en una fila compacta y precios por periodo legibles */
@media (max-width:420px){
  .mc-facts li{padding:10px 8px}
  .mc-facts span{font-size:12px}
  .mc-tab{padding:8px 9px}
  .mc-tab b{font-size:13px}
  .mc-per__grid--6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mc-btn{font-size:14px;gap:7px;padding:12px 10px}
}
@media (min-width:640px){
  .opti-campana{padding:56px 0 60px}
  .mc-card{padding:18px}
}
/* Escritorio: texto a la izquierda, tarjeta de precios fija a la derecha */
@media (min-width:900px){
  .opti-campana{padding:72px 0}
  .mc-wrap{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-rows:auto 1fr;gap:26px 48px;align-items:start}
  .mc-info{grid-column:1;grid-row:1}
  .mc-more{grid-column:1;grid-row:2}
  .mc-card{grid-column:2;grid-row:1 / span 2;padding:22px}
  .opti-campana .mc-sub{font-size:17px}
  .mc-facts{gap:10px}
  .mc-facts li{padding:14px 12px}
  .mc-facts span{font-size:13px}
}
@media (min-width:1024px){
  .opti-campana{scroll-margin-top:calc(var(--nav-height-desktop,100px) - 8px)}
  .mc-card{position:sticky;top:calc(var(--nav-height-desktop,100px) + 20px)}
}
@media (prefers-reduced-motion:reduce){.mc-pill,.opti-campana *,.opti-campana *::after{animation:none!important;transition:none!important}.opti-campana .mc-a,.opti-campana .mc-p{opacity:1!important;transform:none!important}}