/* Tintado de lunas v2 (01/10/2026): mapa sobre render cenital y referencia de tonos con renders reales. */
.tint-coverage-picker.tint-coverage-picker--v2{--tint-ink:#fff;--tint-muted:rgba(235,235,245,.62);--tint-line:rgba(255,255,255,.09);--tint-accent:var(--ios-ac,#d23a58);--tint-accent-soft:rgba(210,58,88,.14);margin-top:24px;border:1px solid rgba(255,255,255,.08);border-radius:22px;background:var(--ios-bg2,#1c1c1e);color:#fff;overflow:hidden}
.tint-coverage-picker--v2 .tint-coverage-picker-header{display:block;padding:20px 20px 0;border:0}
.tint-coverage-picker--v2 .tint-coverage-kicker{margin-bottom:6px;color:var(--ios-ac2,#ee6f86);font:600 12px/1.2 var(--ios-sf,system-ui);letter-spacing:.06em;text-transform:uppercase}
.tint-coverage-picker--v2 h2{color:#fff;font-family:var(--ios-sfd,system-ui);font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.tint-coverage-picker--v2 .tint-coverage-picker-header p{max-width:none;margin:6px 0 0;color:var(--tint-muted);font-size:14px;line-height:1.45}
.tint-coverage-picker--v2 .tint-coverage-layout{grid-template-columns:1fr;min-height:0}
.tint-coverage-picker--v2 .tint-car-board{min-height:0;padding:8px 10px 14px;background:transparent;overflow:visible}
.tint-coverage-picker--v2 .tint-car-board::before,.tint-coverage-picker--v2 .tint-car-board::after,.tint-coverage-picker--v2 .tint-car-orientation{display:none}

/* Mapa v3: render cenital + zonas pulsables con etiquetas */
.tcm3{position:relative;width:min(100%,420px);margin:0 auto}
.tcm3-car{position:absolute;top:0;height:100%;object-fit:contain;pointer-events:none;user-select:none;filter:drop-shadow(0 18px 28px rgba(0,0,0,.45))}
.tint-car-map--v3{position:relative;display:block;width:100%;height:auto;margin:0;overflow:visible}
.tint-car-map--v3 .tint-car-zone{cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}
.tint-car-map--v3 .tint-car-hit{fill:transparent;stroke:transparent;stroke-width:26;stroke-linejoin:round}
.tint-car-map--v3 .tint-car-glass{fill:rgba(210,58,88,0);stroke:rgba(255,255,255,0);stroke-width:2;transition:fill .25s ease,stroke .25s ease}
.tint-car-map--v3 .tint-car-zone:hover .tint-car-glass,.tint-car-map--v3 .tint-car-zone:focus-visible .tint-car-glass{fill:rgba(255,255,255,.12);stroke:rgba(255,255,255,.7)}
.tint-car-map--v3 .tint-car-zone.is-active .tint-car-glass{fill:rgba(210,58,88,.66);stroke:rgba(255,190,205,.95);filter:url(#tcm3-glow)}
.tint-car-map--v3 .tint-car-leader{fill:none;stroke:rgba(235,235,245,.3);stroke-width:3;transition:stroke .25s ease}
.tint-car-map--v3 .tint-car-dot{fill:rgba(235,235,245,.55);transition:fill .25s ease}
.tint-car-map--v3 .tint-car-label{fill:rgba(235,235,245,.62);font:600 42px var(--ios-sf,system-ui);letter-spacing:.01em;transition:fill .25s ease}
.tint-car-map--v3 .tint-car-zone:hover .tint-car-label,.tint-car-map--v3 .tint-car-zone:focus-visible .tint-car-label{fill:#fff}
.tint-car-map--v3 .tint-car-zone.is-active .tint-car-leader{stroke:var(--ios-ac2,#ee6f86)}
.tint-car-map--v3 .tint-car-zone.is-active .tint-car-dot{fill:var(--ios-ac2,#ee6f86)}
.tint-car-map--v3 .tint-car-zone.is-active .tint-car-label{fill:#fff;font-weight:700}
.tint-coverage-picker--v2 .tint-car-legend{gap:16px;margin-top:6px;color:var(--tint-muted);font:600 12px var(--ios-sf,system-ui);letter-spacing:.02em;text-transform:none}
.tint-coverage-picker--v2 .tint-legend-swatch{width:10px;height:10px;border-radius:3px;border:1px solid rgba(255,255,255,.22)}
.tint-coverage-picker--v2 .tint-legend-swatch--active{background:var(--ios-ac,#d23a58);border-color:transparent}
.tint-coverage-picker--v2 .tint-legend-swatch--available{background:#15171b}

.tint-coverage-picker--v2 .tint-coverage-panel{padding:4px 16px 18px;background:transparent}
.tint-coverage-picker--v2 .tint-coverage-panel-heading{margin:14px 0 8px;color:var(--tint-muted);font:600 12px var(--ios-sf,system-ui);letter-spacing:.05em}
.tint-coverage-picker--v2 .tint-coverage-panel-heading small{color:rgba(235,235,245,.34);font-size:11px}
.tint-coverage-picker--v2 .tint-coverage-option{border:1px solid transparent;border-radius:14px;background:var(--ios-bg3,#2c2c2e);color:#fff}
.tint-coverage-picker--v2 .tint-coverage-option:hover{border-color:rgba(255,255,255,.14);transform:none}
.tint-coverage-picker--v2 .tint-coverage-option[aria-pressed="true"]{border-color:var(--ios-ac,#d23a58);background:rgba(210,58,88,.14)}
.tint-coverage-picker--v2 .tint-coverage-option strong{font-size:14px;font-weight:600}
.tint-coverage-picker--v2 .tint-coverage-option span{color:var(--tint-muted);font-size:13px}
.tint-coverage-picker--v2 .tint-coverage-option--zone{min-height:0;padding:11px 28px 11px 12px}
.tint-coverage-picker--v2 .tint-coverage-option--zone i{color:var(--ios-ac2,#ee6f86)}
.tint-coverage-picker--v2 .tint-coverage-native{color:var(--tint-muted);font:600 12px var(--ios-sf,system-ui);letter-spacing:.05em}
.tint-coverage-picker--v2 .tint-coverage-native select{border:1px solid rgba(255,255,255,.1);border-radius:12px;background:var(--ios-bg3,#2c2c2e);color:#fff}
.tint-coverage-picker--v2 .tint-coverage-detail{border-top-color:rgba(255,255,255,.08);color:var(--tint-muted);font-size:13px}

/* Referencia de tonos: fotos renderizadas, fundido entre tonos y colores */
.tint-tone{margin-top:16px;border:1px solid rgba(255,255,255,.08);border-radius:22px;background:var(--ios-bg2,#1c1c1e);color:#fff;overflow:hidden}
.tint-tone-head{padding:20px 20px 12px}
.tint-tone-kicker{display:block;margin-bottom:6px;color:var(--ios-ac2,#ee6f86);font:600 12px/1.2 var(--ios-sf,system-ui);letter-spacing:.06em;text-transform:uppercase}
.tint-tone-head h2{margin:0;color:#fff;font:700 22px/1.15 var(--ios-sfd,system-ui);letter-spacing:-.02em}
.tint-tone-head p{margin:6px 0 0;color:rgba(235,235,245,.62);font-size:14px;line-height:1.45}
.tint-tone-stage{position:relative;margin:0 12px;border-radius:16px;background:#0d0d0f;overflow:hidden;aspect-ratio:1600/667}
.tint-tone-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .32s ease}
.tint-tone-img.is-front{opacity:1}
.tint-tone-controls{display:grid;gap:12px;padding:14px 16px 4px}
.tint-tone-label{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 7px;color:rgba(235,235,245,.62);font:600 12px var(--ios-sf,system-ui);letter-spacing:.05em;text-transform:uppercase}
.tint-tone-label output{color:#fff;font-weight:600;letter-spacing:0;text-transform:none}
.tint-tone-shades{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;padding:3px;border-radius:12px;background:rgba(120,120,128,.24)}
.tint-tone-shades button{min-height:34px;padding:0 4px;border:0;border-radius:9px;background:transparent;color:#fff;font:600 13px var(--ios-sf,system-ui);cursor:pointer;transition:background .2s ease,box-shadow .2s ease}
.tint-tone-shades button[aria-pressed="true"]{background:#636366;box-shadow:0 3px 8px rgba(0,0,0,.25)}
.tint-tone-colors{display:flex;flex-wrap:wrap;gap:10px}
.tint-tone-colors button{position:relative;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);cursor:pointer}
.tint-tone-colors button::after{position:absolute;inset:-4px;border:2px solid transparent;border-radius:50%;content:"";transition:border-color .2s ease}
.tint-tone-colors button[aria-pressed="true"]::after{border-color:#fff}
.tint-tone-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:6px 16px 0;border-radius:14px;background:var(--ios-bg3,#2c2c2e)}
.tint-tone-facts div{padding:10px 12px;border-left:1px solid rgba(255,255,255,.07)}
.tint-tone-facts div:first-child{border-left:0}
.tint-tone-facts dt{color:rgba(235,235,245,.62);font-size:11.5px;line-height:1.3}
.tint-tone-facts dd{margin:3px 0 0;color:#fff;font:600 15px/1.2 var(--ios-sf,system-ui)}
.tint-tone-use{margin:12px 16px 0;color:#fff;font-size:14px;line-height:1.45}
.tint-tone-note{margin:8px 16px 18px;color:rgba(235,235,245,.5);font-size:12.5px;line-height:1.5}
/* Sección de ancho completo bajo la ficha: foto grande y controles al lado */
.tint-tone.tint-tone--wide{margin:8px 0 40px}
@media (min-width:900px){
  .tint-tone--wide .tint-tone-head{padding:28px 28px 16px}
  .tint-tone--wide .tint-tone-head h2{font-size:28px}
  .tint-tone--wide .tint-tone-body{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(300px,1fr);gap:28px;align-items:center;padding:0 28px 28px}
  .tint-tone--wide .tint-tone-stage{margin:0;border-radius:18px}
  .tint-tone--wide .tint-tone-controls{padding:0}
  .tint-tone--wide .tint-tone-facts{margin:16px 0 0}
  .tint-tone--wide .tint-tone-use{margin:14px 0 0}
  .tint-tone--wide .tint-tone-note{margin:10px 0 0}
}
@media (max-width:600px){.tint-coverage-picker.tint-coverage-picker--v2,.tint-tone{border-radius:18px}.tint-tone-stage{margin:0 10px}.tint-tone-shades button{font-size:12.5px}}
@media (prefers-reduced-motion:reduce){.tint-tone-shades button,.tint-tone-img,.tint-car-map--v3 .tint-car-glass{transition:none}}

/* Frontal transparente: misma cámara y color, sin oscurecer las lunas delanteras. */
.tint-tone-front-clear{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:polygon(0 0,62% 0,62% 100%,0 100%);pointer-events:none;z-index:2}