body[data-caso="llaveros"]{ --accent:#2A8C3A; }
body[data-caso="llaveros"][data-theme="caso-blanco"]{ --accent:#2A8C3A; }
body[data-caso="llaveros"][data-theme="caso-ocre"]{ --bg:#0B4F2B; --fg:#FFFFFF; --accent:#8BD18F; --border:rgba(255,255,255,.25); --border-strong:rgba(255,255,255,.4); }
body[data-caso="llaveros"][data-theme="caso-crema"]{ --bg:#F2EEE6; --fg:#241C17; --accent:#1F7A31; --border:rgba(36,28,23,.12); --border-strong:rgba(36,28,23,.28); }
body[data-caso="llaveros"] ::selection{ background:#2A8C3A; color:#fff; }
body[data-caso="llaveros"] .tz-hero__logo{ width:clamp(220px,20vw,290px); }

.ll-hero__visual{ position:relative; justify-self:center; width:min(100%,480px); aspect-ratio:1 / 1.05; }
.ll-movil{ display:block; overflow:hidden; border:8px solid #12161a; border-radius:34px; background:#fff; box-shadow:0 40px 70px -40px rgba(0,0,0,.6); }
.ll-movil img{ display:block; width:100%; height:auto; }
.ll-hero__visual .ll-movil{ position:absolute; width:52%; }
.ll-movil--atras{ left:4%; top:8%; rotate:-7deg; opacity:.95; }
.ll-movil--delante{ right:4%; top:0; rotate:5deg; }

.ll-barras{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(30px,4vw,64px); }
.ll-barra__que{ margin:0 0 22px; font-size:clamp(1.4rem,2vw,1.85rem); font-weight:800; letter-spacing:-.025em; line-height:1.1; }
.ll-barra__fila{ display:grid; grid-template-columns:4.2em minmax(0,1fr) auto; align-items:center; gap:14px; margin-bottom:12px; font-size:clamp(1rem,1.2vw,1.1rem); }
.ll-barra__etq{ font-weight:700; opacity:.6; }
.ll-barra__pista{ height:18px; border-radius:999px; background:rgba(36,28,23,.07); overflow:hidden; }
.ll-barra__valor{ display:block; width:calc(var(--v) * 100%); min-width:10px; height:100%; border-radius:inherit; background:#2A8C3A;
  transform:scaleX(0); transform-origin:left; transition:transform 1.1s cubic-bezier(.22,1,.36,1); }
.ll-barra__valor--antes{ background:#B9B2AB; }
.ll-barras.is-visto .ll-barra__valor{ transform:none; }
.ll-barras.is-visto .ll-barra__fila + .ll-barra__fila .ll-barra__valor{ transition-delay:.35s; }
.ll-barra__num{ min-width:4.6em; text-align:right; font-weight:800; font-size:clamp(1.15rem,1.5vw,1.35rem); white-space:nowrap; }
.ll-barra__fila + .ll-barra__fila .ll-barra__num{ color:#2A8C3A; }
.ll-barra__pie{ margin:16px 0 0; font-size:clamp(1rem,1.2vw,1.1rem); line-height:1.45; opacity:.75; }
.ll-gana__cifras{ margin-top:clamp(70px,8vw,120px); }
.ll-gana__nota{ margin:30px 0 0; font-size:1rem; opacity:.6; }

.ll-hallazgo{ padding-top:clamp(120px,16vh,190px) !important; padding-bottom:clamp(120px,16vh,190px) !important; }
.ll-hallazgo__titulo{ margin:0 0 clamp(50px,6vw,90px); max-width:20ch; font-size:clamp(2.4rem,5.2vw,5.2rem); font-weight:800; line-height:1; letter-spacing:-.04em; }
.ll-hallazgo__titulo .accent{ display:block; font-weight:300; color:var(--accent); }
.ll-hallazgo__texto{ margin:clamp(50px,6vw,80px) 0 0; max-width:50ch; font-size:clamp(1.15rem,1.6vw,1.4rem); line-height:1.5; }
.ll-traza{ display:flex; flex-direction:column; gap:clamp(40px,5vw,70px); }
.ll-traza__rotulo{ margin:0 0 18px; font-size:clamp(.9rem,1.1vw,1.05rem); font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.ll-traza__linea--antes .ll-traza__rotulo{ color:rgba(255,255,255,.55); }
.ll-traza__pasos{ position:relative; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); margin:0; padding:0; list-style:none; }
.ll-traza__paso{ position:relative; display:flex; flex-direction:column; gap:14px; padding-right:12px; }
.ll-traza__paso::before{ content:''; position:absolute; left:14px; right:0; top:13px; height:3px; background:rgba(255,255,255,.18); }
.ll-traza__paso:last-child::before{ display:none; }
.ll-traza__punto{ position:relative; z-index:1; width:28px; height:28px; border-radius:50%; background:#fff; }
.ll-traza__txt{ font-size:clamp(1.05rem,1.6vw,1.45rem); font-weight:800; line-height:1.2; }
.ll-traza__txt small{ display:block; margin-top:4px; font-size:.72em; font-weight:400; opacity:.75; }
.ll-traza__paso--duda .ll-traza__punto{ background:transparent; border:3px dashed rgba(255,255,255,.45); }
.ll-traza__paso--duda .ll-traza__txt{ font-weight:400; font-style:italic; opacity:.55; }
.ll-traza__linea--antes .ll-traza__paso::before{ background:repeating-linear-gradient(90deg, rgba(255,255,255,.4) 0 8px, transparent 8px 16px); }
.ll-traza__linea--ahora .ll-traza__punto{ background:rgba(255,255,255,.18); transition:background-color .5s ease, box-shadow .5s ease; }
.ll-traza__linea--ahora .ll-traza__txt{ opacity:.35; transition:opacity .5s ease; }
.ll-traza__linea--ahora .ll-traza__paso::before{ background:linear-gradient(#8BD18F,#8BD18F) 0 0 / 0 100% no-repeat, rgba(255,255,255,.18); transition:background-size .45s linear; }
.ll-traza.is-visto .ll-traza__linea--ahora .ll-traza__punto{ background:#8BD18F; box-shadow:0 0 0 6px rgba(139,209,143,.22); }
.ll-traza.is-visto .ll-traza__linea--ahora .ll-traza__txt{ opacity:1; }
.ll-traza.is-visto .ll-traza__linea--ahora .ll-traza__paso::before{ background-size:100% 100%; }
.ll-traza__linea--ahora .ll-traza__paso:nth-child(2) *, .ll-traza__linea--ahora .ll-traza__paso:nth-child(1)::before{ transition-delay:.45s; }
.ll-traza__linea--ahora .ll-traza__paso:nth-child(3) *, .ll-traza__linea--ahora .ll-traza__paso:nth-child(2)::before{ transition-delay:.9s; }
.ll-traza__linea--ahora .ll-traza__paso:nth-child(4) *, .ll-traza__linea--ahora .ll-traza__paso:nth-child(3)::before{ transition-delay:1.35s; }
.ll-traza__linea--ahora .ll-traza__paso:nth-child(5) *, .ll-traza__linea--ahora .ll-traza__paso:nth-child(4)::before{ transition-delay:1.8s; }
.ll-traza__linea--ahora .ll-traza__paso:nth-child(6) *, .ll-traza__linea--ahora .ll-traza__paso:nth-child(5)::before{ transition-delay:2.25s; }
.ll-traza__linea--ahora .ll-traza__paso:nth-child(1)::before{ transition-delay:0s; }

@media (max-width:1000px){
  .ll-hero__visual{ order:-1; width:min(86%,400px); }
  .ll-barras{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .ll-traza__pasos{ grid-auto-flow:row; grid-auto-columns:auto; gap:18px; }
  .ll-traza__paso{ flex-direction:row; align-items:center; gap:16px; }
  .ll-traza__paso::before{ left:13px; right:auto; top:28px; width:3px; height:calc(100% + 18px - 28px); }
  .ll-traza__linea--ahora .ll-traza__paso::before{ background-size:100% 0; }
  .ll-traza__punto{ flex:none; }
}
@media (prefers-reduced-motion: reduce){
  .ll-barra__valor{ transform:none; transition:none; }
  .ll-traza__linea--ahora .ll-traza__punto{ background:#8BD18F; }
  .ll-traza__linea--ahora .ll-traza__txt{ opacity:1; }
}

body[data-caso="llaveros"] .ll-barra__que{ font-size:clamp(1.6rem,2.4vw,2.2rem); margin-bottom:18px; }
body[data-caso="llaveros"] .ll-barra__fila{ font-size:clamp(.9rem,1vw,.98rem); margin-bottom:8px; grid-template-columns:3.8em minmax(0,1fr) auto; }
body[data-caso="llaveros"] .ll-barra__pista{ height:12px; }
body[data-caso="llaveros"] .ll-barra__num{ font-size:clamp(1rem,1.2vw,1.1rem); }
body[data-caso="llaveros"] .ll-barra__pie{ margin-top:12px; font-size:clamp(.92rem,1vw,1rem); }

body[data-caso="llaveros"] .ll-hallazgo{ padding-top:clamp(70px,9vh,110px) !important; padding-bottom:clamp(70px,9vh,110px) !important; }
body[data-caso="llaveros"] .ll-hallazgo__titulo{ margin-bottom:clamp(30px,3.5vw,48px); font-size:clamp(1.8rem,3vw,2.6rem); max-width:none; }
body[data-caso="llaveros"] .ll-hallazgo__titulo .accent{ display:inline; }
body[data-caso="llaveros"] .ll-traza{ gap:clamp(24px,3vw,36px); }
body[data-caso="llaveros"] .ll-traza__rotulo{ margin-bottom:12px; font-size:.82rem; }
body[data-caso="llaveros"] .ll-traza__punto{ width:18px; height:18px; }
body[data-caso="llaveros"] .ll-traza__paso::before{ top:8px; left:9px; height:2px; }
body[data-caso="llaveros"] .ll-traza__txt{ font-size:clamp(.95rem,1.1vw,1.05rem); }
body[data-caso="llaveros"] .ll-hallazgo__texto{ margin-top:clamp(28px,3vw,40px); font-size:clamp(1rem,1.2vw,1.1rem); }

body[data-caso="llaveros"] .tz-cambio .tz-tabla{ max-width:1000px; }
body[data-caso="llaveros"] .tz-tabla__fila{ grid-template-columns:minmax(0,.5fr) minmax(0,.8fr) minmax(0,1.2fr); padding:16px 0; font-size:clamp(1rem,1.2vw,1.1rem); line-height:1.35; }
body[data-caso="llaveros"] .tz-tabla__fila--cabecera{ padding:0 0 14px; border-bottom:2px solid var(--fg); font-size:clamp(1.05rem,1.3vw,1.2rem); font-weight:800; letter-spacing:0; text-transform:none; color:var(--fg); }
body[data-caso="llaveros"] .tz-tabla__fila--cabecera [role="columnheader"]:nth-child(2){ opacity:.55; }
body[data-caso="llaveros"] .tz-tabla__fila--cabecera [role="columnheader"]:nth-child(3){ color:var(--accent); }
@media (max-width:760px){
  body[data-caso="llaveros"] .ll-traza__paso::before{ left:8px; top:18px; width:2px; height:calc(100% + 18px - 18px); }
}
body[data-caso="llaveros"] .tz-cambio{ padding-top:clamp(70px,9vh,110px) !important; padding-bottom:clamp(70px,9vh,110px) !important; }
body[data-caso="llaveros"] .tz-cambio .tz-titulo{ max-width:none; margin-bottom:clamp(28px,3vw,40px); font-size:clamp(1.8rem,3vw,2.6rem); }
body[data-caso="llaveros"] .tz-cambio .tz-titulo .accent{ display:inline; }
body[data-caso="llaveros"] main#smooth-wrapper #smooth-content .ll-barra__que{ font-size:clamp(1.7rem,2.4vw,2.25rem) !important; line-height:1.08 !important; }
body[data-caso="llaveros"] .ll-gana .ll-barras, body[data-caso="llaveros"] .ll-gana__cifras{ max-width:1040px; column-gap:clamp(40px,6vw,96px); }
body[data-caso="llaveros"] main#smooth-wrapper #smooth-content .ll-gana .tz-cifra__num{ font-size:clamp(2.4rem,4vw,3.8rem) !important; }
body[data-caso="llaveros"] .ll-gana .tz-cifra__que{ font-size:clamp(1rem,1.3vw,1.2rem); }
body[data-caso="llaveros"] .ll-gana .tz-cifra{ padding-top:20px; border-top-width:2px; }
body[data-caso="llaveros"] main#smooth-wrapper #smooth-content .ll-gigante{ margin:0 0 clamp(50px,6vw,90px); font-family:"BwModelica Black","BwModelica",sans-serif; font-size:min(15.1vw, 15.1 * 1600px / 100) !important; font-weight:900; line-height:.85 !important; letter-spacing:-.055em; white-space:nowrap; }
body[data-caso="llaveros"] .ll-gana{ padding-bottom:clamp(40px,5vh,70px) !important; }
body[data-caso="llaveros"] .cc{ padding-top:clamp(40px,5vh,70px) !important; }
body[data-caso="llaveros"] main#smooth-wrapper #smooth-content .ll-cambio__intro{ margin:0 0 clamp(26px,3vw,40px); max-width:60ch; font-size:clamp(1.05rem,1.3vw,1.2rem) !important; line-height:1.5 !important; opacity:.8; }
body[data-caso="llaveros"] .cc{ background-image:none; }
body[data-caso="llaveros"] .cc .cc__boton:hover{ background:#1F7A31; }
body[data-caso="llaveros"] .cc__escenario.is-foco .cc__persona:not(.is-on) .cc__cuerpo{ opacity:.75; filter:saturate(.7); }