/* Tira de clima CDMX: pronóstico estimado y alcaldía; estilo rosa pastel */
:root{--weather-strip-height:52px}
.weather-ribbon{
 position:sticky;top:0;z-index:1000;isolation:isolate;
 display:flex;align-items:center;height:var(--weather-strip-height);
 width:100%;min-width:0;gap:0;overflow:hidden;
 border-bottom:1px solid #fff9;
 background:linear-gradient(100deg,#ffc1db 0%,#ffdbea 45%,#f5c4e9 75%,#ffd2e7 100%);
 box-shadow:0 8px 23px #4b18353b;color:#5b2146;
 font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.weather-ribbon::before{
 content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.5;
 background:radial-gradient(circle at 25% 30%,#fff 0 2px,transparent 3px),
 radial-gradient(circle at 61% 75%,#fff 0 3px,transparent 4px),
 radial-gradient(circle at 91% 34%,#fff 0 2px,transparent 3px);
 background-size:160px 52px,270px 66px,390px 52px;
}
.weather-sr-only{position:absolute!important;width:1px!important;height:1px!important;
 padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;
 white-space:nowrap!important;border:0!important}
.weather-ribbon__brand{
 flex-shrink:0;display:flex;align-items:center;justify-content:center;
 height:100%;min-width:99px;padding:0 13px;
 background:#fff6fcaf;border-right:1px solid #c96a9870;
 color:#782a52;font-size:12px;font-weight:950;letter-spacing:.65px;
 text-decoration:none;white-space:nowrap;
}
.weather-ribbon__brand:hover{color:#8b1d59;background:#fff8fd}
.weather-ribbon__window{min-width:0;flex:1;overflow:hidden;position:relative;
 mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.weather-ribbon__track{
 display:flex;align-items:center;width:max-content;min-width:100%;
 animation:weather-slide var(--weather-duration,36s) linear infinite;
 transform:translate3d(0,0,0);will-change:transform;
 backface-visibility:hidden;
}
.weather-ribbon__set{
 display:flex;align-items:center;flex-shrink:0;min-height:var(--weather-strip-height);
 gap:11px;padding-right:11px;white-space:nowrap;
}
.weather-chip{
 display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
 padding:5px 14px;line-height:1.35;min-height:31px;white-space:nowrap;
 background:#fff9f1e3;border:1px solid #fff;border-radius:999px;
 box-shadow:0 3px 10px #ce689b2e;
 color:#70304e;font-size:12px;font-weight:760;letter-spacing:.02px;
}
.weather-chip--title{color:#8d2a64;background:#fff0f8;letter-spacing:.5px;font-weight:900}
.weather-chip--place{background:#fff;color:#8e2666;font-weight:900}
.weather-chip--temp{color:#6a214d;font-size:14px;font-weight:950}
.weather-chip--credit{background:#f9e7ff;color:#72436b;font-weight:800}
a.weather-chip--credit{text-decoration:none}
a.weather-chip--credit:hover,a.weather-chip--credit:focus-visible{background:#fff;color:#832955;text-decoration:underline}
.weather-ribbon__brand:focus-visible{outline:2px solid #8c2962;outline-offset:-3px}
.weather-ribbon:hover .weather-ribbon__track,
.weather-ribbon:focus-within .weather-ribbon__track{animation-play-state:paused}
@keyframes weather-slide{to{transform:translate3d(-50%,0,0)}}
/* El encabezado permanece debajo de la tira, sin solaparse al bajar. */
body>header{top:var(--weather-strip-height)}
body>.skip:focus{z-index:2000;top:var(--weather-strip-height)}
@media(max-width:700px){
 :root{--weather-strip-height:48px}
 .weather-ribbon__brand{min-width:68px;padding:0 7px;font-size:10px;letter-spacing:0}
 .weather-ribbon__set{gap:8px;padding-right:8px}
 .weather-chip{font-size:11px;min-height:29px;padding:5px 11px}
 .weather-chip--temp{font-size:12px}
}
@media(max-width:370px){
 .weather-ribbon__brand{min-width:57px;padding:0 4px;font-size:9px}
}
@media(prefers-reduced-motion:reduce){
 .weather-ribbon__window{overflow-x:auto;scrollbar-width:thin;mask-image:none;-webkit-mask-image:none}
 .weather-ribbon__track{animation:none;will-change:auto}
 .weather-ribbon__set[aria-hidden="true"]{display:none}
}

/* Temperatura y alcaldía caben juntas en una sola tarjeta por lugar.
   Sin selector desplegable, el carrusel ocupa el ancho libre en celular. */
.weather-ribbon__set{min-width:0;flex:0 0 auto}
.weather-ribbon__track{min-width:max-content;gap:0}
.weather-chip--borough{font-variant-numeric:tabular-nums}
.weather-chip--selected{background:#fff;color:#87234f;border-color:#d864a1}
.weather-ribbon__window{display:block;overflow:hidden;flex:1 1 0%;min-width:0}
/* Mantener contenido dentro de la franja incluso con enlaces enfocados. */
@media(max-width:700px){
 .weather-ribbon{min-height:var(--weather-strip-height)}
 .weather-chip--borough{font-size:11px;font-weight:800}
 .weather-ribbon__window{flex:1 1 0%;min-width:0}
}

/* Fecha visible y fija al extremo derecho de la tira. */
.weather-ribbon__date{
 display:flex;flex-direction:column;justify-content:center;align-items:center;
 align-self:stretch;flex:0 0 auto;min-width:170px;max-width:215px;
 background:#fff3fbdc;border-left:1px solid #ce7eab80;
 padding:5px 13px;text-align:center;line-height:1.35;
 color:#752a52;font:800 11px/1.35 system-ui,-apple-system,"Segoe UI",sans-serif;
 white-space:nowrap;
}
.weather-date__weekday{font-size:12px;font-weight:950;color:#963a6b}
.weather-date__long{font-size:11px}
.weather-date__short{display:none}
@media(max-width:700px){
 .weather-ribbon__date{min-width:92px;max-width:100px;padding:4px 5px;font-size:10px}
 .weather-date__weekday{font-size:10px}
 .weather-date__long{display:none}
 .weather-date__short{display:block;font-size:10px}
}
@media(max-width:370px){
 .weather-ribbon__date{min-width:81px;max-width:86px;padding:3px}
 .weather-date__weekday,.weather-date__short{font-size:9px}
}