/*
  Zappo del clima: el widget.

  Todo cuelga de .zappo-clima y lleva el prefijo zc- (clases y animaciones),
  para no chocar con el tema ni con otros plugins de WordPress. Los tamaños van
  en px y em (no en rem): hay temas que achican la letra de la raíz.

  Modificadores del contenedor:
    .zc-sin-fondo   sin tarjeta: el paisaje con los bordes esfumados
    .zc-claro       letras claras, para fondos oscuros
    .zc-nublado     nubes en el cielo (sale del clima de ahora)
    .zc-cubierto    sin sol
  Estados: .zc-naranja .zc-dique .zc-pileta .zc-celeste .zc-lluvia .zc-helada .zc-zonda
*/
.zappo-clima {
  --tinta: #1b120c;
  --papel: #fff8ec;
  --borde: rgba(27, 18, 12, .14);
  --acento: #e8641b;
  --cielo-a: #2f86d4; --cielo-b: #a8d8f2;
  display: block;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  font-family: 'Kode Mono', ui-monospace, monospace;
  font-size: 16px;
  line-height: 1.4;
  color: var(--tinta);
  text-align: left;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 40px -22px rgba(27, 18, 12, .45);
}
/* hasta que arranca el script, guarda el lugar: así la portada no salta */
.zappo-clima:not(.zc-listo) { aspect-ratio: 400 / 730; }
.zappo-clima *, .zappo-clima *::before, .zappo-clima *::after { box-sizing: border-box; }
.zappo-clima :where(div, p, span, b, a, img, svg) { margin: 0; padding: 0; }
.zappo-clima img { border: 0; border-radius: 0; box-shadow: none; max-width: none; background: none; }

/* cielo, acento y paisaje de cada estado (el paisaje lee las --z-*) */
.zappo-clima.zc-naranja { --cielo-a: #2f86d4; --cielo-b: #a8d8f2; --acento: #e8641b; }
.zappo-clima.zc-celeste {
  --cielo-a: #6f8fb5; --cielo-b: #d6e3ee; --acento: #3d9ad6;
  --z-lejos: #8e9cc0; --z-nieve: .95; --z-medio: #9b8f86; --z-cerca: #b3a38c;
  --z-piso: #cdbfa6; --z-borde: #b9a88c; --z-piedra: #a8977c; --z-jarilla: #5f7a45;
}
/* día de dique: sol, calorcito y el lago */
.zappo-clima.zc-dique { --cielo-a: #2a8bd8; --cielo-b: #b8e4f7; --acento: #f0a020; --z-lago: 1; }
.zappo-clima.zc-pileta {
  --cielo-a: #d0461c; --cielo-b: #ffc56e; --acento: #d42323;
  --z-lejos: #c98a78; --z-medio: #c8764a; --z-cerca: #dc9658;
  --z-piso: #eab473; --z-borde: #d59a58; --z-piedra: #c98f55; --z-jarilla: #8a8c3a; --z-rama: #6a4a2a;
}
.zappo-clima.zc-zonda { --cielo-a: #9a6834; --cielo-b: #e0ad6c; --acento: #b8762a; }
.zappo-clima.zc-lluvia {
  --cielo-a: #34465a; --cielo-b: #7c8e9c; --acento: #4d7ea8;
  --z-lejos: #5a6780; --z-medio: #6f6558; --z-cerca: #7e7260;
  --z-piso: #8a7457; --z-borde: #6f5c42; --z-piedra: #6d5a40; --z-jarilla: #4f6e3a;
}
.zappo-clima.zc-helada {
  --cielo-a: #8aa2b8; --cielo-b: #eef4f8; --acento: #6fa8d0;
  --z-lejos: #aab8d0; --z-nieve: 1; --z-medio: #a5a4a8; --z-cerca: #c3c3c6;
  --z-piso: #e9eff4; --z-borde: #cfdbe4; --z-piedra: #c2ccd4; --z-jarilla: #7d9270; --z-rama: #6f6a60;
}

.zappo-clima.zc-claro { --tinta: #fff8ec; --borde: rgba(255, 248, 236, .22); }
.zappo-clima.zc-sin-fondo { background: transparent; border: 0; box-shadow: none; border-radius: 0; }

.zappo-clima .zc-arte {
  position: relative;
  aspect-ratio: 1 / 1;
  background: linear-gradient(180deg, var(--cielo-a), var(--cielo-b));
  transition: background .8s;
  overflow: hidden;
}
/* los bordes se van a transparente, igual que zappo-zonda-fundido.svg */
.zappo-clima.zc-sin-fondo .zc-arte {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 16%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 16%, #000 90%, transparent);
  mask-composite: intersect;
}
.zappo-clima .zc-paisaje, .zappo-clima .zc-paisaje svg, .zappo-clima .zc-animacion { position: absolute; inset: 0; width: 100%; height: 100%; }
.zappo-clima .zc-paisaje :is(path, rect, ellipse) { transition: fill .8s; }
.zappo-clima.zc-zonda .zc-paisaje, .zappo-clima.zc-zonda .zc-fx { display: none; }
.zappo-clima .zc-animacion { display: none; }
.zappo-clima.zc-zonda .zc-animacion { display: block; }
.zappo-clima .zc-animacion img { width: 100%; height: 100%; display: block; }

.zappo-clima .zc-figura {
  position: absolute;
  left: 50%;
  bottom: 7%;          /* apoya adentro de la franja del piso, no en el borde con las montañas */
  height: 50.8%;
  width: auto;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  filter: drop-shadow(0 4px 5px rgba(27, 18, 12, .12));
  animation: zc-respira 3.2s ease-in-out infinite;
  pointer-events: none;
  user-select: none;
}
.zappo-clima.zc-zonda .zc-figura { display: none; }
/* la sombra de Zappo en el piso: sin esto parece que flota */
.zappo-clima .zc-sombra {
  position: absolute; left: 50%; bottom: 5.2%; width: 34%; height: 3.6%;   /* centrada donde apoya la figura */
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(40, 24, 10, .34), rgba(40, 24, 10, .14) 60%, transparent);
}
.zappo-clima.zc-dique .zc-sombra { width: 50%; }
.zappo-clima.zc-pileta .zc-sombra { width: 66%; bottom: 4.4%; height: 5.2%; }
.zappo-clima:is(.zc-lluvia, .zc-zonda, .zc-cargando) .zc-sombra { display: none; }
/* hasta saber el clima no se muestra ningún Zappo: si no, aparecía el de buen tiempo y después cambiaba */
.zappo-clima.zc-cargando :is(.zc-figura, .zc-animacion) { visibility: hidden; }
@keyframes zc-respira {
  0%, 100% { transform: translateX(-50%) scale(1, 1); }
  50% { transform: translateX(-50%) scale(1.012, .988); }
}

/* efectos por estado */
.zappo-clima .zc-fx { position: absolute; inset: 0; pointer-events: none; display: none; }
.zappo-clima:is(.zc-naranja, .zc-dique, .zc-pileta) .zc-fx.zc-sol-caja,
.zappo-clima.zc-lluvia .zc-fx.zc-gotas, .zappo-clima.zc-pileta .zc-fx.zc-calor, .zappo-clima.zc-helada .zc-fx.zc-brillo,
.zappo-clima:is(.zc-celeste, .zc-lluvia, .zc-nublado) .zc-fx.zc-nubes { display: block; }
.zappo-clima.zc-cubierto:not(.zc-pileta) .zc-fx.zc-sol-caja { display: none; }
.zappo-clima .zc-fx svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.zappo-clima .zc-sol {
  position: absolute; top: 12%; right: 12%;
  width: 13%; aspect-ratio: 1; border-radius: 50%;
  background: #fff4c9;
  box-shadow: 0 0 0 10px rgba(255, 244, 201, .25), 0 0 60px 20px rgba(255, 233, 163, .45);
}
.zappo-clima.zc-pileta .zc-sol { width: 19%; background: #fff0b0; box-shadow: 0 0 0 16px rgba(255, 220, 140, .3), 0 0 90px 40px rgba(255, 180, 90, .55); }
/* lluvia en tres capas (las de adelante, más largas y rápidas) y salpicaduras en el piso */
.zappo-clima .zc-gotas .capa { animation: zc-cae .9s linear infinite; }
@keyframes zc-cae { to { transform: translate(150px, 1000px); } }
.zappo-clima .zc-gotas .salpica { transform-box: fill-box; transform-origin: center; animation: zc-salpica .8s ease-out infinite; opacity: 0; }
@keyframes zc-salpica { 0% { transform: scale(.2); opacity: 0; } 15% { opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
/* el calor sube del piso en ondas */
.zappo-clima .zc-calor .onda { animation: zc-sube 3.4s ease-in-out infinite; opacity: 0; }
@keyframes zc-sube { 0% { transform: translateY(0); opacity: 0; } 35% { opacity: .75; } 100% { transform: translateY(-200px); opacity: 0; } }
.zappo-clima .zc-brillo {
  background-image: radial-gradient(circle, #fff 0 2px, transparent 3px), radial-gradient(circle, #fff 0 1.5px, transparent 2.5px);
  background-size: 90px 110px, 130px 70px;
  background-position: 10px 20px, 50px 5px;
  animation: zc-brilla 2.4s steps(2) infinite;
}
@keyframes zc-brilla { 50% { opacity: .35; } }
/* nubes de dibujo: la panza un poco más oscura; en la lluvia son grises y bajas */
.zappo-clima .zc-nubes { --nube: rgba(255, 255, 255, .95); --nube-sombra: #d3dde8; }
.zappo-clima.zc-lluvia .zc-nubes { --nube: #7a8998; --nube-sombra: #5b6875; }
.zappo-clima .zc-nubes .nube { animation: zc-deriva 80s linear infinite; }
.zappo-clima .zc-nubes .nubarron { display: none; }
.zappo-clima.zc-lluvia .zc-nubes .nubarron { display: inline; }
.zappo-clima.zc-lluvia .zc-nubes .nube { animation-duration: 45s; }
@keyframes zc-deriva { from { transform: translateX(-460px); } to { transform: translateX(1060px); } }
/* el lago del dique (viene adentro del paisaje) */
.zappo-clima .lago-brillos rect { animation: zc-destella 3.2s ease-in-out infinite; }
@keyframes zc-destella { 50% { opacity: .15; } }
.zappo-clima .windsurf > g { animation: zc-navega 3s ease-in-out infinite; }
@keyframes zc-navega { 50% { transform: translate(7px, 1.5px) rotate(2deg); } }

/* los datos */
.zappo-clima .zc-datos { padding: 18px 20px 16px; display: grid; gap: 14px; }
.zappo-clima .zc-fila { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.zappo-clima .zc-ciudad {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 2.3em;
  line-height: .9;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.zappo-clima .zc-estado {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 6px;
  font-size: .82em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.zappo-clima .zc-chip { width: 12px; height: 12px; background: var(--acento); border: 2px solid var(--tinta); transition: background .8s; }
.zappo-clima .zc-temp {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 4em;
  line-height: .8;
  font-variant-numeric: tabular-nums;
}
.zappo-clima .zc-frase { font-size: .82em; line-height: 1.45; }
.zappo-clima .zc-medidas {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 10px 0; border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde);
}
.zappo-clima .zc-medida span { display: block; font-size: .64em; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.zappo-clima .zc-medida b { font-size: .95em; font-variant-numeric: tabular-nums; }
.zappo-clima .zc-dias { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.zappo-clima .zc-dia { display: grid; gap: 4px; font-size: .78em; }
.zappo-clima .zc-dia-nombre { font-size: .85em; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.zappo-clima .zc-linea { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.zappo-clima .zc-icono { display: flex; flex: none; }
.zappo-clima .zc-icono svg { width: 28px; height: 28px; }
.zappo-clima .zc-pie { display: flex; justify-content: space-between; gap: 8px; font-size: .62em; letter-spacing: .06em; text-transform: uppercase; opacity: .55; }
.zappo-clima .zc-pie a { color: inherit; text-decoration: none; }
.zappo-clima .zc-pie a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .zappo-clima *, .zappo-clima *::before, .zappo-clima *::after { animation: none !important; transition: none !important; }
}