/* Viento */
.etiqueta { color: var(--soft); background: var(--bg); padding: 4px 8px; margin-left: -8px; display: inline-block; }
.etiqueta span { color: var(--ink); }
.etiqueta .pista { color: var(--viento); }

/* 1 · aire */
.aire { position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; cursor: none; }
.corrientes { position: absolute; inset: 0; width: 100%; height: 100%; }
.aire-texto { position: absolute; left: var(--gutter); bottom: 108px; z-index: 2; pointer-events: none; }
.viento-t { font-size: clamp(100px, 21vw, 360px); line-height: .8; font-weight: 820; letter-spacing: -.04em; margin: 14px 0 18px -.03em; white-space: nowrap; }
.viento-t .l { display: inline-block; will-change: transform, font-variation-settings; transform-origin: 50% 90%; }
.anemo { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-46%); z-index: 2; display: grid; justify-items: end; gap: 12px; }
.anemo-svg { width: 210px; height: 210px; overflow: visible; }
.anemo-svg .dial { fill: color-mix(in srgb, var(--bg) 82%, transparent); stroke: var(--linea); }
.anemo-svg .marca { stroke: var(--soft); }
.anemo-svg .marca.m { stroke: var(--ink); stroke-width: 1.6; }
.anemo-svg text { font: 9px var(--mono); fill: var(--soft); }
.anemo-svg .aguja { stroke: var(--viento); stroke-width: 2.4; stroke-linecap: round; }
.anemo-svg .rafaga { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 3; }
.anemo-svg .copas path { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.anemo-svg .arco-v { fill: none; stroke: var(--viento); stroke-width: 5; stroke-linecap: round; opacity: .35; }
.anemo-datos { margin: 0; display: grid; gap: 6px; text-align: right; }
.anemo-datos div { background: var(--bg); padding: 6px 10px; display: flex; gap: 14px; justify-content: space-between; align-items: baseline; min-width: 210px; }
.anemo-datos dt { color: var(--soft); }
.anemo-datos dd { margin: 0; }
.anemo-datos b { font-family: var(--sans); font-size: 24px; font-weight: 650; letter-spacing: -.02em; font-variation-settings: 'wdth' 72; }

/* 2 · parque */
.parque { position: relative; height: 100vh; height: 100svh; min-height: 640px; border-top: 1px solid var(--linea); overflow: hidden; }
.parque-escena { position: absolute; inset: 0; touch-action: pan-y; }
.parque-escena canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.parque-capa { position: absolute; left: var(--gutter); top: 120px; max-width: 460px; z-index: 2; pointer-events: none; }
.parque-capa > .mono { color: var(--soft); margin-bottom: 14px; }
.parque-capa h2 { font-size: clamp(44px, 5vw, 86px); line-height: .92; font-weight: 760; letter-spacing: -.035em; font-variation-settings: 'wdth' 80; }
.parque-capa h2 em { font-style: normal; color: var(--viento); font-variation-settings: 'wdth' 125; }
.parque-capa > p.aparece { color: var(--soft); margin-top: 18px; max-width: 380px; background: color-mix(in srgb, var(--bg) 70%, transparent); }
.parque-leyenda { position: absolute; right: var(--gutter); bottom: 110px; z-index: 2; list-style: none; margin: 0; padding: 12px 14px; display: grid; gap: 8px; background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--linea); }
.parque-leyenda li { display: flex; gap: 10px; align-items: center; color: var(--soft); }
.parque-leyenda b { color: var(--ink); font-weight: 500; }
.parque-leyenda i { width: 18px; height: 2px; background: var(--viento); display: inline-block; }
.parque-leyenda .ley-rpm { height: 8px; width: 8px; border-radius: 50%; background: var(--ink); }
.parque-leyenda .ley-alt { background: var(--soft); }

/* 3 · máquina */
.turbina { display: grid; grid-template-columns: 1.4fr 1fr; min-height: 100vh; border-top: 1px solid var(--linea); }
.turb-escena { position: relative; min-height: 80vh; touch-action: pan-y; }
.turb-escena canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.turb-texto { padding: 120px var(--gutter) 120px 40px; display: flex; flex-direction: column; justify-content: center; gap: 22px; border-left: 1px solid var(--linea); }
.turb-texto > .mono { color: var(--soft); }
.turb-texto h2 { font-size: clamp(40px, 4.4vw, 74px); line-height: .95; font-weight: 720; letter-spacing: -.03em; font-variation-settings: 'wdth' 84; }
.turb-texto h2 em { font-style: normal; color: var(--viento); font-variation-settings: 'wdth' 125; }
.turb-texto > p.aparece { color: var(--soft); max-width: 440px; }
.curva-pot { width: 100%; max-width: 420px; height: auto; overflow: visible; }
.curva-pot path { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.curva-pot .pot { stroke: var(--viento); }
.curva-pot .zona { fill: color-mix(in srgb, var(--viento) 12%, transparent); stroke: none; }
.curva-pot text { font: 10px var(--mono); fill: var(--soft); }
.curva-pot .cur { stroke: var(--ink); vector-effect: non-scaling-stroke; }
.turb-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 0; border-top: 1px solid var(--linea); padding-top: 16px; }
.turb-datos dt { color: var(--soft); }
.turb-datos dd { margin: 6px 0 0; font-family: var(--sans); font-size: 30px; font-weight: 650; letter-spacing: -.02em; font-variation-settings: 'wdth' 75; }

/* 4 · Beaufort */
.beaufort { grid-template-columns: minmax(0, 1fr); position: relative; min-height: 100vh; border-top: 1px solid var(--linea); overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; padding: 120px var(--gutter) 120px; }
.bf-fondo { position: absolute; inset: 0; width: 100%; height: 100%; }
.bf-cabeza, .bf-palabra, .bf-pie { position: relative; z-index: 1; }
.bf-cabeza { display: flex; justify-content: space-between; align-items: baseline; }
.bf-cabeza .mono { color: var(--soft); }
.bf-ayuda { color: var(--soft); font-size: 14px; }
.bf-palabra { align-self: center; font-size: clamp(64px, 12vw, 210px); line-height: .9; font-weight: 800; letter-spacing: -.035em; white-space: nowrap; overflow: visible; }
.bf-palabra .l { display: inline-block; will-change: transform; }
.bf-palabra .pal { display: inline-block; white-space: nowrap; }
.bf-pie { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; }
.bf-desc { font-size: clamp(18px, 1.6vw, 24px); max-width: 520px; line-height: 1.35; }
.bf-control { display: grid; gap: 10px; justify-items: end; }
.bf-control label { color: var(--soft); }
.bf-control output { color: var(--ink); }
.bf-control input { width: min(420px, 100%); accent-color: var(--viento); height: 28px; }
.bf-ahora { padding: 8px 14px; border: 1px solid var(--linea); border-radius: 999px; color: var(--soft); transition: color .3s, border-color .3s; }
.bf-ahora:hover { color: var(--ink); border-color: var(--ink); }

/* 5 · escala */
.escala { padding: 140px var(--gutter) 120px; border-top: 1px solid var(--linea); }
.esc-cabeza { display: flex; justify-content: space-between; align-items: end; margin-bottom: 30px; }
.esc-cabeza > .mono { color: var(--soft); }
.esc-cabeza h2 { font-size: clamp(44px, 5.6vw, 100px); line-height: .92; font-weight: 780; letter-spacing: -.04em; text-align: right; font-variation-settings: 'wdth' 76; }
.esc-cabeza h2 b { color: var(--viento); font-weight: 820; font-variant-numeric: tabular-nums; }
.esc-svg { width: 100%; height: auto; overflow: visible; }
.esc-svg .barra { stroke-width: 2; vector-effect: non-scaling-stroke; fill: none; }
.esc-svg .nombre { font: 600 22px var(--sans); fill: var(--ink); }
.esc-svg .medida { font: 12px var(--mono); fill: var(--soft); letter-spacing: .06em; }
.esc-svg .regla { stroke: var(--linea); vector-effect: non-scaling-stroke; }
.esc-svg .regla-t { font: 10px var(--mono); fill: var(--soft); }
.esc-svg .dib { fill: none; stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 3000; stroke-dashoffset: 3000; transition: stroke-dashoffset 2.2s cubic-bezier(.6,0,.2,1); }
.esc-svg .pala { fill: color-mix(in srgb, var(--viento) 22%, transparent); stroke: var(--viento); }
.escala.visto .dib { stroke-dashoffset: 0; }
.escala .dib:nth-of-type(2) { transition-delay: .2s; } .escala .dib:nth-of-type(3) { transition-delay: .4s; } .escala .dib:nth-of-type(4) { transition-delay: .6s; }

/* 6 · rosa */
.rosa { padding: 140px var(--gutter) 130px; border-top: 1px solid var(--linea); }
.rosa-cabeza { display: flex; justify-content: space-between; align-items: end; margin-bottom: 40px; }
.rosa-cabeza > .mono { color: var(--soft); }
.rosa-cabeza h2 { font-size: clamp(48px, 6vw, 110px); line-height: .9; font-weight: 800; letter-spacing: -.04em; text-align: right; font-variation-settings: 'wdth' 70; }
.rosa-zona { position: relative; display: grid; place-items: center; min-height: 520px; }
.rosa-svg { width: min(520px, 90vw); height: auto; overflow: visible; }
.rosa-svg .anillo { fill: none; stroke: var(--linea); vector-effect: non-scaling-stroke; }
.rosa-svg text { font: 11px var(--mono); fill: var(--soft); }
.rosa-svg .sector { fill: var(--viento); transition: fill .3s, opacity .3s; cursor: pointer; opacity: .82; }
.rosa-svg .sector:hover { opacity: 1; }
.rosa-svg .sector.on { fill: var(--ink); opacity: 1; }
.rosa-lectura { position: absolute; bottom: 0; display: flex; gap: 16px; background: var(--bg); padding: 6px 10px; }
.rosa-notas { list-style: none; margin: 60px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--linea); }
.rosa-notas li { padding: 22px 20px 0 0; display: grid; gap: 6px; }
.rosa-notas .mono { color: var(--soft); }
.rosa-notas b { font-size: clamp(40px, 4.6vw, 72px); font-weight: 750; letter-spacing: -.03em; font-variation-settings: 'wdth' 70; }
.rosa-notas span:last-child { color: var(--soft); font-size: 14px; }

/* siguiente (sin canvas en esta página) */
.siguiente { display: block; position: relative; height: 56vh; min-height: 400px; overflow: hidden; border-top: 1px solid var(--linea); }
.siguiente .mono { position: absolute; left: var(--gutter); top: 30px; color: var(--soft); }
.sig-t { position: absolute; left: var(--gutter); bottom: 40px; font-size: clamp(70px, 12vw, 210px); line-height: .8; font-weight: 850; letter-spacing: -.05em; font-variation-settings: 'wdth' 62; transition: font-variation-settings 1s cubic-bezier(.2,.8,.2,1), color .5s; }
.siguiente:hover .sig-t { font-variation-settings: 'wdth' 110; color: var(--bateria); }

@media (max-width: 860px) {
  .anemo { top: 96px; transform: none; right: var(--gutter); }
  .anemo-svg { width: 120px; height: 120px; }
  .anemo-datos { display: none; }
  .aire { cursor: auto; }
  .aire-estado .pista { display: none; }
  .viento-t { font-size: 24vw; }
  .parque-capa { top: 96px; right: var(--gutter); }
  .parque-leyenda { bottom: 90px; }
  .turbina { grid-template-columns: 1fr; }
  .turb-escena { min-height: 60vh; }
  .turb-texto { border-left: 0; padding: 50px var(--gutter) 80px; }
  .bf-pie { grid-template-columns: 1fr; }
  .bf-palabra { font-size: 17vw; white-space: normal; line-height: .95; }
  .bf-cabeza { flex-direction: column; gap: 8px; }
  .esc-marco { overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 10px; }
  .esc-svg { min-width: 780px; }
  .bf-control { justify-items: start; }
  .esc-cabeza, .rosa-cabeza { flex-direction: column; align-items: start; gap: 14px; }
  .esc-cabeza h2, .rosa-cabeza h2 { text-align: left; }
  .rosa-notas { grid-template-columns: 1fr; }
}