/* Meteonza — hoja de estilo unica (patron: Panel de estaciones / meteograma) */
:root{
  --slate:#1d2b32;
  --accent:#e4572e;
  --bone:#f2f4f3;
  --grey1:#9aa8ad;
  --grey2:#55666d;
  --line:#c7d0d3;
  --tint:#e9edec;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bone);color:var(--slate);font-family:var(--sans);font-size:16px;line-height:1.62;-webkit-text-size-adjust:100%}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
p{margin:0 0 13px}
ul,ol{margin:0 0 13px;padding-left:20px}
li{margin-bottom:5px}
strong{font-weight:700}
.skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--slate);color:var(--bone);padding:8px 12px;font-family:var(--mono);font-size:12px}
.skip:focus{left:8px;top:8px}

/* ---- cinta superior + panel de estaciones ---- */
.top{position:sticky;top:0;z-index:40;background:var(--bone);border-bottom:1px solid var(--slate)}
.brandbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:var(--slate);color:var(--bone);padding:6px 14px;font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase}
.brandbar .brand{font-weight:700;letter-spacing:.14em;text-decoration:none;color:var(--bone)}
.brandbar .stn{color:var(--grey1)}
.brandbar .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(228,87,46,.22)}
.brandbar .spacer{flex:1 1 auto}
.brandbar a{color:var(--bone);text-decoration:none;white-space:nowrap}
.brandbar a:hover{color:var(--accent)}
.panel{padding:8px 10px;border-bottom:1px solid var(--line)}
.panel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px;max-width:1120px;margin:0 auto}
.tile{position:relative;display:flex;flex-direction:column;gap:5px;align-items:flex-start;text-decoration:none;color:var(--slate);border:1px solid var(--slate);background:var(--bone);padding:7px 7px 6px;min-height:58px}
.tile .tno{position:absolute;right:5px;top:4px;font-family:var(--mono);font-size:9px;color:var(--grey2)}
.tile .tlab{font-family:var(--mono);font-size:10px;line-height:1.15;text-transform:uppercase;letter-spacing:.03em;margin-top:auto}
.tile:hover{box-shadow:2px 2px 0 var(--slate)}
.tile:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.tile.active{background:var(--slate);color:var(--bone)}
.tile.active .tno{color:var(--grey1)}

/* ---- glifos meteorologicos 100% CSS ---- */
.gl{position:relative;display:inline-block;width:18px;height:16px;flex:0 0 auto;color:inherit}
.gl::before,.gl::after{content:"";position:absolute}
.g-sun::before{left:6px;top:5px;width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 -7px 0 -2px currentColor,0 7px 0 -2px currentColor,-7px 0 0 -2px currentColor,7px 0 0 -2px currentColor}
.g-cloud::before{left:0;bottom:3px;width:18px;height:7px;border-radius:4px;background:currentColor}
.g-cloud::after{left:3px;top:2px;width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:5px 2px 0 -1px currentColor}
.g-rain::before{left:0;top:1px;width:17px;height:7px;border-radius:4px;background:currentColor}
.g-rain::after{left:1px;bottom:0;width:15px;height:6px;background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 5px);transform:skewX(-16deg)}
.g-wind::before{inset:0;background:linear-gradient(currentColor,currentColor) 0 2px/13px 2px no-repeat,linear-gradient(currentColor,currentColor) 4px 7px/14px 2px no-repeat,linear-gradient(currentColor,currentColor) 0 12px/10px 2px no-repeat}
.g-bars::before{left:0;bottom:1px;width:18px;height:13px;background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 5px)}
.g-gauge::before{left:1px;top:2px;width:16px;height:8px;border:2px solid currentColor;border-bottom:0;border-radius:9px 9px 0 0}
.g-gauge::after{left:9px;top:9px;width:7px;height:2px;background:currentColor;transform-origin:0 50%;transform:rotate(-38deg)}
.g-rose::before{inset:1px;border:1.5px solid currentColor;border-radius:50%}
.g-rose::after{left:8px;top:2px;width:2px;height:12px;background:currentColor;box-shadow:-5px 5px 0 -0.5px currentColor,5px 5px 0 -0.5px currentColor}
.g-suncloud::before{right:0;top:0;width:7px;height:7px;border-radius:50%;background:currentColor}
.g-suncloud::after{left:0;bottom:3px;width:15px;height:7px;border-radius:4px;background:currentColor;box-shadow:3px -2px 0 -2px currentColor}
.g-doc::before{left:3px;top:1px;width:11px;height:14px;border:1.5px solid currentColor}
.g-doc::after{left:6px;top:4px;width:5px;height:7px;background:repeating-linear-gradient(0deg,currentColor 0 1px,transparent 1px 3px)}
.g-lock::before{left:5px;top:1px;width:8px;height:7px;border:1.5px solid currentColor;border-bottom:0;border-radius:4px 4px 0 0}
.g-lock::after{left:3px;bottom:1px;width:12px;height:9px;background:currentColor}
.g-cookie::before{inset:2px;border:1.5px solid currentColor;border-radius:50%}
.g-cookie::after{left:7px;top:7px;width:4px;height:4px;border-radius:50%;background:currentColor}
.g-check::before{left:3px;top:5px;width:10px;height:5px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
.g-thermo::before{left:7px;top:1px;width:4px;height:11px;border:1.5px solid currentColor;border-radius:3px 3px 0 0}
.g-thermo::after{left:5px;bottom:0;width:8px;height:8px;border-radius:50%;background:currentColor}
.g-frost::before{left:8px;top:1px;width:2px;height:14px;background:currentColor}
.g-frost::after{inset:1px;background:linear-gradient(currentColor,currentColor) 50% 50%/15px 2px no-repeat,linear-gradient(45deg,transparent 45%,currentColor 45% 55%,transparent 55%) 50% 50%/15px 15px no-repeat,linear-gradient(-45deg,transparent 45%,currentColor 45% 55%,transparent 55%) 50% 50%/15px 15px no-repeat}
.g-drop::before{left:6px;top:2px;width:8px;height:8px;background:currentColor;transform:rotate(45deg)}
.g-drop::after{left:5px;top:7px;width:10px;height:9px;border-radius:50%;background:currentColor}
.g-bolt::before{left:6px;top:1px;width:7px;height:15px;background:currentColor;clip-path:polygon(55% 0,100% 0,45% 52%,80% 52%,20% 100%,38% 48%,0 48%)}

/* ---- cabecera de pagina con meteograma CSS ---- */
.pagehead{position:relative;overflow:hidden;background:var(--slate);color:var(--bone);border-bottom:1px solid var(--slate)}
.meter{position:relative;height:78px;background-image:repeating-linear-gradient(90deg,rgba(242,244,243,.10) 0 1px,transparent 1px 27px),repeating-linear-gradient(0deg,rgba(242,244,243,.08) 0 1px,transparent 1px 19px)}
.meter .area{position:absolute;inset:0;background:linear-gradient(180deg,rgba(228,87,46,.60),rgba(228,87,46,.06));clip-path:polygon(0 70%,4% 62%,8% 55%,12% 60%,16% 48%,20% 40%,24% 46%,28% 34%,32% 30%,36% 38%,40% 26%,44% 20%,48% 28%,52% 36%,56% 30%,60% 42%,64% 52%,68% 46%,72% 58%,76% 66%,80% 60%,84% 70%,88% 78%,92% 72%,96% 80%,100% 76%,100% 100%,0 100%)}
.meter .base{position:absolute;left:0;right:0;bottom:26px;height:1px;background:rgba(242,244,243,.45)}
.ph-inner{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:end;max-width:1120px;margin:0 auto;padding:14px 16px 20px}
.ph-idx{font-family:var(--mono);font-size:clamp(30px,7vw,52px);line-height:.9;font-weight:700;color:var(--accent)}
.ph-kick{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.15em;color:var(--grey1);margin-bottom:6px}
.pagehead h1{margin:0;font-size:clamp(21px,4vw,38px);line-height:1.1;letter-spacing:.01em}

/* ---- contenido ---- */
main{max-width:1120px;margin:0 auto;padding:26px 16px 44px}
section{margin:0 0 32px}
h2{font-size:clamp(19px,2.6vw,26px);margin:0 0 12px;padding-bottom:3px;border-bottom:2px solid var(--accent);display:inline-block}
h3{font-size:17px;margin:18px 0 6px}
.lead{font-size:18px;color:var(--grey2)}
.micro{display:block;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--grey2)}
.note{border-left:3px solid var(--accent);background:var(--tint);padding:10px 14px;font-size:14.5px;color:var(--grey2)}
.grid{display:grid;gap:14px;margin:4px 0 6px}
.g2{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.card{border:1px solid var(--slate);background:var(--bone);padding:14px;transition:box-shadow .12s ease}
.card:hover{box-shadow:2px 2px 0 var(--slate)}
.card .micro{margin-bottom:7px}
.card h3{margin:0 0 6px}
.card p:last-child{margin-bottom:0}
.card .gl{color:var(--accent);margin-bottom:8px}
.stat{border:1px solid var(--slate);padding:12px 14px;background:var(--bone)}
.stat b{display:block;font-family:var(--mono);font-size:26px;line-height:1.1;color:var(--slate)}
.stat span{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--grey2)}
.btn{display:inline-block;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.09em;border:1px solid var(--slate);background:var(--bone);color:var(--slate);padding:10px 16px;text-decoration:none;cursor:pointer;box-shadow:3px 3px 0 var(--slate)}
.btn:hover{background:var(--slate);color:var(--bone)}
.btn.acc{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.acc:hover{background:var(--slate);border-color:var(--slate)}
.btnrow{display:flex;flex-wrap:wrap;gap:12px;margin:6px 0 4px}
figure{margin:18px 0;border:1px solid var(--slate);background:var(--bone)}
figcaption{font-family:var(--mono);font-size:11px;padding:6px 9px;border-top:1px solid var(--line);color:var(--grey2)}
table{width:100%;border-collapse:collapse;font-size:14.5px;margin:10px 0}
th,td{border:1px solid var(--line);padding:9px 10px;text-align:left;vertical-align:top}
th{background:var(--slate);color:var(--bone);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em}
tbody tr:nth-child(even) td{background:var(--tint)}
.scroll{overflow-x:auto}
dl{margin:0 0 14px}
dt{font-weight:700;margin-top:12px}
dd{margin:2px 0 0;color:var(--grey2)}
.faq{border-top:1px solid var(--line);padding:14px 0}
.faq:first-of-type{border-top:0}
.faq h3{margin-top:0}

/* ---- formularios ---- */
form{border:1px solid var(--slate);background:var(--tint);padding:16px;margin:14px 0 6px}
.form-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.form-row{display:grid;gap:6px;margin-bottom:0}
label{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.req{color:var(--accent)}
input,select,textarea{width:100%;font-family:var(--sans);font-size:15px;padding:9px 10px;border:1px solid var(--slate);border-radius:0;background:var(--bone);color:var(--slate)}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
fieldset{border:1px solid var(--line);padding:12px 12px 4px;margin:0 0 12px}
legend{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.07em;padding:0 6px}
.check{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;margin-bottom:10px}
.check input{width:18px;height:18px;flex:0 0 auto;margin-top:2px}
.form-actions{margin-top:14px}

/* ---- pie ---- */
footer{background:var(--slate);color:var(--bone);border-top:4px solid var(--accent)}
.foot{max-width:1120px;margin:0 auto;padding:26px 16px;display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.foot h2{font-size:14px;border:0;color:var(--bone);margin:0 0 10px;padding:0;font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em}
.foot p,.foot li{font-size:14px;color:#cfd8da}
.foot ul{padding-left:0;list-style:none}
.foot li{margin-bottom:5px}
footer a{color:var(--bone);text-decoration:none;border-bottom:1px solid #3a4d55}
footer a:hover{color:var(--accent);border-color:var(--accent)}
.foot-bot{border-top:1px solid #33454d;background:#18242a}
.foot-bot .in{max-width:1120px;margin:0 auto;padding:10px 16px;font-family:var(--mono);font-size:11px;color:var(--grey1);display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between}

/* ---- responsive ---- */
@media (max-width:640px){
  body{font-size:15.5px}
  .panel-grid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:5px}
  .tile{min-height:54px;padding:6px}
  .tile .tlab{font-size:9px}
  .brandbar{font-size:10px;gap:7px;padding:6px 10px}
  .brandbar .hide-sm{display:none}
  .ph-inner{gap:11px;padding:12px 14px 16px}
  .meter{height:64px}
  .foot{padding:22px 14px}
}