/* Barra de compartir + hoja de estilo de impresion (el "PDF" del boton). */
.waw-share{max-width:1100px;margin:34px auto 10px;padding:0 20px}
.waw-share-in{background:#f6f9fc;border:1px solid #e3e8ee;border-radius:14px;padding:16px 18px;
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.waw-share-tx b{display:block;font-size:15px;font-weight:700;color:#1a1f36;letter-spacing:-.01em}
.waw-share-tx span{display:block;font-size:13px;color:#697386;margin-top:2px}
.waw-share-bt{display:flex;flex-wrap:wrap;gap:8px}
.waw-share .ws{display:inline-flex;align-items:center;gap:7px;border:1px solid #e3e8ee;background:#fff;
  color:#425466;border-radius:99px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;
  text-decoration:none;font-family:inherit;line-height:1;transition:border-color .15s,color .15s,background .15s}
.waw-share .ws svg{width:16px;height:16px;flex:0 0 auto}
.waw-share .ws i{font-style:normal}
.waw-share .ws:hover{text-decoration:none;border-color:currentColor}
.waw-share .wa:hover{color:#25d366}.waw-share .x:hover{color:#000}
.waw-share .tg:hover{color:#229ed9}.waw-share .fb:hover{color:#1877f2}
.waw-share .mail:hover,.waw-share .link:hover{color:#0077bd}
.waw-share .pdf{background:#0077bd;border-color:#0077bd;color:#fff}
.waw-share .pdf:hover{background:#005f97;border-color:#005f97;color:#fff}
.waw-share .nat{background:#1a1f36;border-color:#1a1f36;color:#fff}
.waw-share .ws.ok{background:#dcfce7;border-color:#16a34a;color:#166534}
@media(max-width:620px){.waw-share .ws i{display:none}.waw-share .ws{padding:10px 12px}
  .waw-share .pdf i,.waw-share .nat i{display:inline}}
html[data-theme="dark"] .waw-share-in{background:#101b30;border-color:rgba(148,163,184,.18)}
html[data-theme="dark"] .waw-share-tx b{color:#e2e8f0}
html[data-theme="dark"] .waw-share .ws{background:#0f172a;border-color:rgba(148,163,184,.2);color:#cbd5e1}
html[data-theme="dark"] .waw-share .pdf{background:#0077bd;border-color:#0077bd;color:#fff}

@media print{
  @page{margin:14mm 12mm}
  html,body{background:#fff!important;color:#111!important;font-size:10.5pt}
  header,.waw-header,.site-header,nav,.waw-mobile,.breadcrumb,.waw-share,.ad-slot,ins.adsbygoogle,
  .cookie-banner,#cookieBanner,[class*="cookie-"],.menu-toggle,.waw-burger,.waw-theme,.waw-lang,
  .sf-meses,.regiones,.toggle,.search-box,#wcxModal,.leaflet-control-container,button,.btn,
  video,iframe,.embed-box{display:none!important}
  a{color:#111!important;text-decoration:none}
  main,section,.container,.panel{page-break-inside:auto;box-shadow:none!important}
  h1{font-size:20pt;margin:0 0 6pt}h2{font-size:14pt;margin:14pt 0 4pt;page-break-after:avoid}
  h3{font-size:11.5pt;page-break-after:avoid}
  p,li,td,th{orphans:3;widows:3}
  table{page-break-inside:auto;width:100%!important;font-size:9pt}
  tr{page-break-inside:avoid}
  thead{display:table-header-group}
  figure,.chart,.sf-rosa,.sf-grafico,.kpi-grid,.sf-kpis{page-break-inside:avoid}
  svg{max-width:100%!important}
  #map,#mini-map,#sfMapa,#sfMapaTodos,.leaflet-container{height:70mm!important;page-break-inside:avoid}
  /* pie con la procedencia, para que el PDF impreso siga siendo citable */
  body::after{content:"whataweather.com — " attr(data-url);display:block;margin-top:10pt;
    padding-top:6pt;border-top:1px solid #ccc;font-size:8.5pt;color:#555}
}

/* ------------------------------------------------------------------
   Correcciones de maquetación comunes a todo el sitio.
   (Viven aquí porque este fichero ya se carga en todas las páginas;
   añadir otro CSS solo por esto sería una petición más por visita.)

   El problema: `.container` define `padding: 0 20px`, pero reglas
   posteriores de la misma especificidad —`.hero{padding:32px 0}` o
   `section{padding:20px 0}`— lo pisaban. Por encima del ancho máximo no
   se notaba, porque sobraba margen; por debajo, el texto quedaba pegado
   al borde de la pantalla en móvil y en tableta.
   ------------------------------------------------------------------ */
section.container,
.container.hero,
section.hero,
main > section.container {
  padding-left: 20px;
  padding-right: 20px;
}
@media (max-width: 420px) {
  section.container,
  .container.hero,
  section.hero,
  main > section.container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Tablas anchas: que se puedan desplazar sin arrastrar la página entera. */
.table-wrap, .tbl-wrap, .sf-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Titulares largos: que partan por donde toca en pantallas estrechas. */
@media (max-width: 620px) {
  h1 { font-size: clamp(24px, 7.4vw, 34px); line-height: 1.15; overflow-wrap: break-word; }
  .hero .sub, .hero p { font-size: 15px }
}