/* ════════════════════════════════════════════════════════
   ¿CUÁNDO VENIR? · el año mes a mes en eventos.html (1-oct-2026)
   Sale del prototipo que aprobó Uriel (prototipos/1-temporadas), con un
   cambio de fondo: ningún mes se ve vacío. Arriba corre el CLIMA de todo
   el año, los listones de lo que está en su mejor época llenan de enero a
   junio y cada mes abre con «Lo que se vive», con el mismo peso que las
   fechas de fiesta.
   Se apoya en estilos.css (tokens, .wrap, .btn) y fuentes.css (Fraunces,
   Oswald, Figtree). Todo va con prefijo .cv- y bajo .cv (los .c-* de
   colores de estilos.css solo ponen --c; aquí ponen --col).
   ════════════════════════════════════════════════════════ */

.cv .c-rosa{--col:var(--rosa);--col-txt:var(--rosa-txt);--hoja-bg:var(--rosa-txt);--hoja-txt:#fff}
.cv .c-rojo{--col:var(--rojo);--col-txt:var(--rojo-txt);--hoja-bg:var(--rojo-txt);--hoja-txt:#fff}
.cv .c-naranja{--col:var(--naranja);--col-txt:var(--naranja-txt);--hoja-bg:var(--naranja);--hoja-txt:var(--tinta)}
.cv .c-amarillo{--col:var(--amarillo);--col-txt:var(--amarillo-txt);--hoja-bg:var(--amarillo);--hoja-txt:var(--tinta)}
.cv .c-verde{--col:var(--verde);--col-txt:var(--verde-txt);--hoja-bg:var(--verde);--hoja-txt:var(--tinta)}
.cv .c-turquesa{--col:var(--turquesa);--col-txt:var(--turquesa-txt);--hoja-bg:var(--turquesa);--hoja-txt:var(--tinta)}
.cv .c-azul{--col:var(--azul);--col-txt:var(--azul-txt);--hoja-bg:var(--azul);--hoja-txt:var(--tinta)}
.cv .c-purpura{--col:var(--purpura);--col-txt:var(--purpura-txt);--hoja-bg:var(--purpura);--hoja-txt:#fff}
.cv .c-neutro{--col:rgba(255,255,255,.3);--col-txt:var(--soft)}

.cv{padding:84px 0 64px;background:var(--papel)}
.cv ::selection{background:color-mix(in srgb,var(--rosa) 22%,transparent);color:var(--tinta)}
.cv a:focus-visible,.cv button:focus-visible{outline:2px solid var(--rosa);outline-offset:3px;border-radius:8px}
.cv-sigue{border-top:1px solid var(--linea)}
#evList{scroll-margin-top:96px}

/* ── Cabeza ── */
.cv-cabeza{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px 64px;align-items:end;margin-bottom:34px}
.cv-titulo{font-family:'Fraunces';font-weight:900;font-size:clamp(34px,5.2vw,62px);line-height:.98;letter-spacing:-.025em;color:var(--tinta);text-wrap:balance}
.cv-titulo em{font-style:italic;color:var(--rosa-txt)}
/* Japonés y chino: ni el nombre del pueblo ni la pregunta se parten
   (チ / グナワパン？, 何时前 / 往); si no cabe en una línea, corta en el espacio */
:lang(ja) .cv-titulo,:lang(zh) .cv-titulo{word-break:keep-all;line-break:strict;overflow-wrap:break-word}
.cv-lead{font-size:17px;line-height:1.6;color:var(--soft);max-width:46ch;text-wrap:pretty;padding-bottom:6px}

/* ── Tablero: la noche del pueblo, con la raya arcoíris de la marca ── */
.cv-tablero{--pad:32px;position:relative;border-radius:26px;background:linear-gradient(180deg,#2d1e49 0%,#1e1530 78%);color:#fff;padding:22px var(--pad) 46px;box-shadow:0 34px 60px -30px rgba(36,29,56,.6),0 2px 0 rgba(36,29,56,.06);overflow:hidden;isolation:isolate}
.cv-tablero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--rainbow)}
.cv-tablero-top{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}
.cv-anio{font-family:'Oswald';font-weight:500;font-size:12.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--amarillo)}
.cv-clave{list-style:none;display:flex;gap:18px;font-size:13px;color:rgba(255,255,255,.74)}
.cv-clave li{display:flex;align-items:center;gap:8px}
.cv-clave-esfera{width:11px;height:11px;border-radius:50%;background:var(--rosa);box-shadow:0 0 0 1.5px rgba(255,255,255,.9);position:relative}
.cv-clave-esfera::after{content:"";position:absolute;left:50%;top:-4px;width:5px;height:3px;border-radius:1px;background:#efe3b8;transform:translateX(-50%)}
.cv-clave-liston{width:26px;height:8px;border-radius:999px;background:var(--turquesa)}
.cv-clave-hoy{width:0;height:14px;border-left:1.5px dashed var(--amarillo)}

/* ── Carta: columnas, pestañas, clima, guirnalda y listones comparten el ancho ── */
.cv-carta{--m:0;position:relative;margin-top:16px;padding-top:44px}
.cv-columnas{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.075) 1px,transparent 1px) 0 0/calc(100%/12) 100%}
.cv-sel{position:absolute;top:0;bottom:0;left:0;width:calc(100%/12);border-radius:14px;background:rgba(255,255,255,.085);transform:translateX(calc(var(--m)*100%));transition:transform .5s cubic-bezier(.16,1,.3,1)}
.cv-sel::after{content:"";position:absolute;left:50%;top:33px;width:18px;height:3px;border-radius:3px;background:#fff;transform:translateX(-50%)}

.cv-tabs{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));z-index:4}
.cv-tab{appearance:none;background:none;border:0;margin:0;padding:12px 0 0;color:rgba(255,255,255,.62);font-family:'Oswald';font-weight:500;font-size:13px;letter-spacing:.14em;text-transform:uppercase;line-height:1;display:flex;justify-content:center;align-items:flex-start;cursor:pointer;border-radius:14px;transition:color .2s,background-color .2s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.cv-tab:hover{color:#fff;background:rgba(255,255,255,.035)}
.cv-tab.on{color:#fff;font-weight:600}
.cv-tab.es-hoy{color:var(--amarillo)}
.cv-tab:focus-visible{outline:2px solid var(--amarillo);outline-offset:-3px;border-radius:14px}

/* El cielo del año: el clima corre por TODOS los meses (guía del viajero:
   octubre a febrero frío, marzo a mayo templado y despejado, junio a
   septiembre lluvias por la tarde). Cada franja tiene su textura además de
   su color: nieve punteada, sol liso, lluvia en diagonal. */
.cv-clima{position:relative;height:28px;z-index:1;pointer-events:none}
.cv-cl{position:absolute;top:0;bottom:0;left:calc(var(--x)*100% + 3px);width:calc(var(--w)*100% - 6px);border-radius:9px;display:flex;align-items:center;gap:7px;padding:0 10px;font-family:'Oswald';font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;overflow:hidden;color:var(--cl-txt);background:var(--cl-bg);box-shadow:inset 0 0 0 1px var(--cl-borde);transition:opacity .6s ease calc(var(--x)*500ms + 150ms),transform .6s cubic-bezier(.16,1,.3,1) calc(var(--x)*500ms + 150ms)}
.cv-cl svg{width:15px;height:15px;flex:none}
/* la franja del mes elegido se enciende */
.cv-cl.on{box-shadow:inset 0 0 0 1.5px var(--cl-txt);color:#fff}
.cv-cl.sin-ico svg{display:none}
.cv-cl.solo-ico{justify-content:center;padding:0}
.cv-cl.solo-ico .cv-cl-t{display:none}
.cv-cl-frio{--cl-txt:#aee4f6;--cl-borde:rgba(28,169,221,.42);--cl-bg:radial-gradient(rgba(255,255,255,.2) .9px,transparent 1.3px) 0 0/8px 8px,rgba(28,169,221,.15)}
.cv-cl-templado{--cl-txt:#ffd979;--cl-borde:rgba(251,178,0,.4);--cl-bg:linear-gradient(180deg,rgba(251,178,0,.2),rgba(251,178,0,.09))}
.cv-cl-lluvias{--cl-txt:#8fe6f3;--cl-borde:rgba(0,166,200,.42);--cl-bg:repeating-linear-gradient(112deg,rgba(0,166,200,.2) 0 5px,rgba(0,166,200,.07) 5px 10px)}

.cv-guirnalda{--niveles:3;position:relative;height:var(--alto,calc(30px + var(--niveles)*16px + 6px));pointer-events:none;z-index:1}
.cv-hilo{position:absolute;left:0;top:0;width:100%;height:24px;overflow:visible}
.cv-hilo path{fill:none;stroke:rgba(255,255,255,.36);stroke-width:1.2;vector-effect:non-scaling-stroke}
.cv-esfera{--nivel:0;--y:3px;--cuelga:calc(7px + var(--nivel)*16px);position:absolute;left:var(--izq,calc(var(--x)*100%));top:calc(var(--y) + var(--cuelga));width:var(--ancho,max(13px,calc(var(--w)*100%)));height:13px;border-radius:999px;background:var(--col);box-shadow:0 0 0 1.5px rgba(255,255,255,.92),0 4px 14px -4px var(--col);transition:transform .7s cubic-bezier(.16,1,.3,1) calc(var(--x)*650ms + 250ms),opacity .5s ease calc(var(--x)*650ms + 250ms),box-shadow .3s}
.cv-esfera::before{content:"";position:absolute;left:50%;bottom:100%;width:1px;height:calc(var(--cuelga) - 1px);background:rgba(255,255,255,.36);transform:translateX(-50%)}
.cv-esfera::after{content:"";position:absolute;left:50%;top:-3.5px;width:5px;height:3.5px;border-radius:1px;background:#efe3b8;transform:translateX(-50%)}
.cv-esfera.pasada{background:#2a1c44;box-shadow:inset 0 0 0 2px var(--col),0 0 0 1.5px rgba(255,255,255,.4)}
.cv-esfera.del-mes{box-shadow:0 0 0 1.5px #fff,0 0 0 5px color-mix(in srgb,var(--col) 35%,transparent),0 6px 18px -4px var(--col)}
.cv-esfera.pasada.del-mes{box-shadow:inset 0 0 0 2px var(--col),0 0 0 1.5px #fff,0 0 0 5px rgba(255,255,255,.12)}
/* El nombre de cada fiesta cuelga bajo sus esferas, con un punto de su color */
.cv-gl{position:absolute;left:var(--lx,0);top:var(--ty,40px);display:flex;align-items:center;gap:7px;white-space:nowrap;font-family:'Figtree';font-weight:650;font-size:13.5px;line-height:1.2;color:#fff;text-shadow:0 0 3px #241a3c,0 0 6px #241a3c,0 0 10px #241a3c;transition:opacity .35s ease}
.cv-gl::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--col);box-shadow:0 0 0 1.5px rgba(255,255,255,.85)}
.cv-gl.apagado{opacity:.74}
.cv-gl[hidden]{display:none}

/* Los listones van sobre la línea de Hoy para que no corte los nombres */
.cv-listones{list-style:none;position:relative;z-index:3;display:grid;gap:9px;pointer-events:none}
.cv-liston{position:relative;height:35px}
.cv-tramo,.cv-et{transition:opacity .35s ease}
/* Fuera del mes elegido el tramo se apaga, pero su nombre se sigue leyendo (≥4.5:1) */
.cv-tramo.apagado{opacity:.42}
.cv-et.apagado{opacity:.74}
.cv-et{position:absolute;left:var(--lx,0);top:0;white-space:nowrap;font-family:'Figtree';font-weight:650;font-size:13.5px;line-height:1.2;color:#fff;display:flex;gap:8px;align-items:baseline;text-shadow:0 0 3px #241a3c,0 0 6px #241a3c,0 0 10px #241a3c}
.cv-et-r{font-weight:400;font-size:12.5px;color:rgba(255,255,255,.72)}
.cv-et.sin-r .cv-et-r{display:none}
.cv-et[hidden]{display:none}
.cv-tramo{position:absolute;left:calc(var(--x)*100%);width:max(10px,calc(var(--w)*100%));bottom:2px;height:12px;border-radius:999px;background:var(--col);transform-origin:left center;transition:transform 1s cubic-bezier(.16,1,.3,1) calc(var(--i)*80ms),opacity .35s ease}
.cv-tramo.suave{background:color-mix(in srgb,var(--col) 52%,transparent)}
.cv-tramo.borde-i{border-top-left-radius:0;border-bottom-left-radius:0}
.cv-tramo.borde-d{border-top-right-radius:0;border-bottom-right-radius:0}
.cv-tramo.abierto{-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent)}

.cv-hoy{position:absolute;top:38px;bottom:-30px;left:calc(var(--x)*100%);border-left:1.5px dashed rgba(251,178,0,.8);z-index:2;pointer-events:none}
.cv-hoy-txt{position:absolute;bottom:0;left:0;transform:translate(-50%,0);white-space:nowrap;font-family:'Oswald';font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta);background:var(--amarillo);padding:4px 9px;border-radius:999px}

/* El único momento de movimiento: el cielo se pinta, los listones se tienden
   y las esferas se cuelgan la primera vez que el tablero entra en pantalla */
.cv-espera .cv-cl{opacity:0;transform:translateY(-6px)}
.cv-espera .cv-tramo{transform:scaleX(0)}
.cv-espera .cv-esfera{opacity:0;transform:translateY(-12px)}
.cv-espera .cv-gl{opacity:0}

/* ── Panel del mes ── */
.cv-panel{--px:50%;position:relative;margin-top:34px;padding-top:38px;border-top:3px solid var(--col,var(--linea));transition:border-color .3s}
.cv-panel::before{content:"";position:absolute;top:-14px;left:0;width:20px;height:11px;background:var(--col,var(--linea));clip-path:polygon(50% 0,100% 100%,0 100%);transform:translateX(calc(var(--px) - 50%));transition:transform .5s cubic-bezier(.16,1,.3,1),background-color .3s}
.cv-panel:focus{outline:none}
.cv-panel-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:36px 72px}
.cv-panel-in.entra{animation:cvEntra .5s cubic-bezier(.16,1,.3,1)}
/* En escritorio el mes acompaña al lector mientras baja por la lista */
.cv-panel-izq{position:sticky;top:96px;align-self:start}
@keyframes cvEntra{from{opacity:.35;transform:translateY(8px)}}
/* Pantalla baja: la columna ya no cabe entera, así que no se pega */
@media(max-height:820px){.cv-panel-izq{position:static}}

/* Flex: si el mes es largo (Septiembre, Diciembre) el año baja sin heredar la altura de línea del título */
.cv-mes{display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:12px;row-gap:6px;font-family:'Fraunces';font-style:italic;font-weight:900;font-size:clamp(48px,6.6vw,82px);line-height:.92;letter-spacing:-.035em;color:var(--col-txt)}
.cv-mes-anio{margin-top:10px;font-family:'Oswald';font-style:normal;font-weight:500;font-size:14px;line-height:1;letter-spacing:.22em;color:var(--soft);font-variant-numeric:lining-nums}
.cv-veredicto{font-family:'Fraunces';font-weight:600;font-size:clamp(19px,2vw,23px);line-height:1.3;color:var(--tinta);margin-top:16px;max-width:30ch;text-wrap:balance}

/* ── La escena del mes (2-oct-2026): la esfera con la foto del mes, colgada
   de su casquillo, con el detalle de la temporada detrás, y el clima al lado ── */
.cv .t-frio{--tcol:var(--azul);--tcol-txt:var(--azul-txt)}
.cv .t-templado{--tcol:var(--amarillo);--tcol-txt:var(--amarillo-txt)}
.cv .t-lluvias{--tcol:var(--turquesa);--tcol-txt:var(--turquesa-txt)}
.cv-escena{position:relative;display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:center;margin-top:30px}
.cv-esf{position:relative;z-index:1;margin:0;padding-top:30px}
.cv-escena>.cv-tiempo{position:relative;z-index:1}
.cv-esf-bola{position:relative;z-index:1;display:block;width:100%;aspect-ratio:1;border-radius:50%;background:var(--crema);box-shadow:0 0 0 4px #fff,0 0 0 6.5px var(--col,var(--rosa)),0 30px 40px -24px rgba(36,29,56,.75);transform-origin:50% -26px;animation:cvMece 7s ease-in-out infinite alternate}
.cv-esf-bola img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
/* el casquillo dorado y la argolla de donde cuelga */
.cv-esf-bola::before{content:"";position:absolute;left:50%;top:-16px;width:34px;height:14px;border-radius:4px 4px 2px 2px;background:linear-gradient(90deg,#cba64c,#f4e5b2 45%,#cba64c);box-shadow:0 0 0 1px rgba(140,104,26,.35);transform:translateX(-50%)}
.cv-esf-bola::after{content:"";position:absolute;left:50%;top:-30px;width:13px;height:15px;border:2px solid #cba64c;border-radius:50%;transform:translateX(-50%)}
.cv-esf-brillo{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 31% 25%,rgba(255,255,255,.55),rgba(255,255,255,0) 30%),radial-gradient(circle at 50% 50%,transparent 62%,rgba(36,29,56,.28));pointer-events:none}
.cv-esf-pie{position:relative;z-index:1;margin-top:16px;font-family:'Fraunces';font-style:italic;font-weight:500;font-size:14px;line-height:1.35;color:var(--soft);text-align:center;text-wrap:balance}
@keyframes cvMece{from{transform:rotate(-1.6deg)}to{transform:rotate(1.6deg)}}

/* El detalle de la temporada, detrás de la esfera, presente pero discreto
   (4-oct: subió la opacidad, antes casi no se veía): copos,
   pétalos de cempasúchil, lluvia o el sol de primavera. Cae en bucle sin
   salto porque se recorre justo un mosaico (--th). */
.cv-deco{--th:96px;position:absolute;z-index:0;left:-36px;right:-24px;top:-14px;bottom:-14px;overflow:hidden;pointer-events:none;-webkit-mask-image:radial-gradient(farthest-side at 30% 50%,#000 62%,transparent);mask-image:radial-gradient(farthest-side at 30% 50%,#000 62%,transparent)}
.cv-deco::before,.cv-deco::after{content:"";position:absolute;left:0;right:0;top:calc(var(--th)*-1);bottom:0;background-image:var(--capa);background-size:var(--tw,80px) var(--th);animation:cvCae var(--vel,16s) linear infinite}
.cv-deco::after{--tw:58px;--vel:24s;opacity:.85;background-position:21px 37px}
@keyframes cvCae{to{transform:translateY(var(--th))}}
.cv-deco-copos{--capa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='96'%3E%3Cg stroke='%231CA9DD' stroke-width='1.7' stroke-linecap='round' opacity='.95'%3E%3Cpath d='M18 14v10M13.7 16.5l8.6 5M13.7 21.5l8.6-5'/%3E%3Cpath d='M58 60v7M55 61.7l6 3.6M55 65.3l6-3.6'/%3E%3C/g%3E%3Cg fill='%231CA9DD' opacity='.85'%3E%3Ccircle cx='44' cy='30' r='1.6'/%3E%3Ccircle cx='10' cy='74' r='1.3'/%3E%3Ccircle cx='70' cy='14' r='1.1'/%3E%3C/g%3E%3C/svg%3E")}
.cv-deco-flor{--vel:20s;--capa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='96'%3E%3Cg opacity='1'%3E%3Cellipse cx='16' cy='18' rx='4.2' ry='2.4' fill='%23F7941D' transform='rotate(-30 16 18)'/%3E%3Cellipse cx='60' cy='52' rx='3.6' ry='2' fill='%23FBB200' transform='rotate(40 60 52)'/%3E%3Cellipse cx='34' cy='80' rx='3' ry='1.8' fill='%23F7941D' transform='rotate(15 34 80)'/%3E%3Ccircle cx='70' cy='12' r='1.5' fill='%23FBB200'/%3E%3C/g%3E%3C/svg%3E")}
.cv-deco-lluvia{--vel:2.6s;--capa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='96'%3E%3Cg stroke='%2300A6C8' stroke-width='1.6' stroke-linecap='round' opacity='.85'%3E%3Cpath d='M14 8l-2.6 11M52 30l-2.6 11M32 62l-2.2 9.5M70 74l-2.6 11'/%3E%3C/g%3E%3C/svg%3E")}
.cv-deco-lluvia::after{--vel:3.8s}
/* primavera: rayos que giran muy despacio detrás de la esfera */
.cv-deco-sol::before{top:0;background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(251,178,0,.3) 0 5deg,transparent 5deg 15deg);animation:cvGira 90s linear infinite}
.cv-deco-sol::after{top:0;opacity:1;background:radial-gradient(circle at 50% 46%,rgba(251,178,0,.34),transparent 62%);animation:none}
@keyframes cvGira{to{transform:rotate(360deg)}}

/* El clima del mes, al lado de la esfera */
.cv-tiempo{--tcol:var(--azul);--tcol-txt:var(--azul-txt);display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:12px;row-gap:9px;align-items:center;padding:16px 17px 17px;background:#fff;border:1.5px solid var(--linea);border-radius:18px;box-shadow:0 12px 24px -20px rgba(36,29,56,.5)}
.cv-tiempo.t-templado{--tcol:var(--amarillo);--tcol-txt:var(--amarillo-txt)}
.cv-tiempo.t-lluvias{--tcol:var(--turquesa);--tcol-txt:var(--turquesa-txt)}
.cv-tiempo-ico{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--tcol) 16%,#fff);color:var(--tcol-txt)}
.cv-tiempo-ico svg{width:20px;height:20px}
.cv-tiempo-n{font-family:'Oswald';font-weight:600;font-size:12.5px;line-height:1.25;letter-spacing:.14em;text-transform:uppercase;color:var(--tcol-txt)}
.cv-tiempo-t{grid-column:1/-1;font-size:15.5px;line-height:1.45;color:var(--tinta);text-wrap:pretty}
.cv-tiempo-l{font-size:14px;line-height:1.45;color:var(--soft);text-wrap:pretty;margin-top:12px}

/* Qué llevar: cuatro cosas con su ícono, del color del clima */
.cv-llevar .cv-sub{margin:26px 0 10px}
.cv-llevar ul{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cv-llevar li{display:flex;align-items:center;gap:10px;min-height:46px;padding:6px 12px 6px 6px;background:#fff;border:1.5px solid var(--linea);border-radius:999px;font-size:14.5px;font-weight:600;line-height:1.25;color:var(--tinta)}
.cv-llevar-ico{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--tcol) 15%,#fff);color:var(--tcol-txt)}
.cv-llevar-ico svg{width:19px;height:19px}

.cv-pasos{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.cv-paso{appearance:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:10px 14px;border-radius:999px;border:1.5px solid var(--linea);background:#fff;color:var(--tinta);font-family:'Oswald';font-weight:500;font-size:13px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:border-color .2s,color .2s,transform .15s;touch-action:manipulation}
.cv-paso:hover{border-color:var(--col);color:var(--col-txt)}
.cv-paso:active{transform:translateY(1px)}

.cv-sub{font-family:'Oswald';font-weight:600;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);margin:34px 0 12px}
.cv-panel-der>.cv-sub:first-child{margin-top:6px}
.cv-cuenta{color:var(--col-txt)}

/* Fechas y «lo que se vive» comparten la misma fila: hoja de calendario o
   esfera con foto a la izquierda, texto a la derecha. Así un mes tranquilo
   pesa lo mismo que uno de fiesta. */
.cv-lista{list-style:none}
.cv-it{display:grid;grid-template-columns:64px minmax(0,1fr);gap:20px;padding:20px 0;border-top:1px solid var(--linea)}
.cv-it:first-child{border-top:0;padding-top:4px}
.cv-hoja{align-self:start;display:flex;flex-direction:column;text-align:center;border-radius:12px;overflow:hidden;background:#fff;border:1.5px solid var(--linea);box-shadow:0 10px 20px -14px rgba(36,29,56,.45)}
.cv-hoja-mes{background:var(--hoja-bg);color:var(--hoja-txt);font-family:'Oswald';font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;padding:5px 0 4px}
.cv-hoja-dia{font-family:'Fraunces';font-weight:900;font-size:27px;line-height:1;color:var(--tinta);padding:8px 0 10px;font-variant-numeric:lining-nums}
.cv-foto{position:relative;align-self:start;width:64px;height:64px;margin-top:9px;border-radius:50%;background:var(--crema);box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--col),0 12px 20px -12px rgba(36,29,56,.6)}
.cv-foto img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.cv-foto::before{content:"";position:absolute;left:50%;top:-9px;width:14px;height:7px;border-radius:2px 2px 1px 1px;background:linear-gradient(180deg,#f4e5b2,#cba64c);box-shadow:0 0 0 1px rgba(140,104,26,.35);transform:translateX(-50%)}
.cv-it-tit{font-family:'Fraunces';font-weight:800;font-size:19.5px;line-height:1.2;letter-spacing:-.005em;color:var(--tinta);text-wrap:balance}
.cv-it-tit a{color:inherit;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:4px;transition:text-decoration-color .2s}
.cv-it-tit a:hover{text-decoration-color:var(--col)}
.cv-it-cu{font-family:'Oswald';font-weight:500;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--col-txt);margin-top:7px;font-variant-numeric:tabular-nums}
.cv-it-desc{font-size:15px;line-height:1.55;color:var(--soft);margin-top:7px;max-width:62ch;text-wrap:pretty}
.cv-it-acc{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:center;margin-top:10px}
.cv-estado{font-family:'Oswald';font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:6px 11px;border-radius:999px;line-height:1}
/* texto un poco más oscuro que --col-txt: sobre el fondo tintado da ≥4.5:1 */
.cv-estado.pronto{background:color-mix(in srgb,var(--col) 10%,#fff);color:color-mix(in srgb,var(--col-txt) 82%,#000)}
.cv-estado.ahora{background:var(--col-txt);color:#fff}
.cv-estado.pasado{border:1px solid var(--linea);color:var(--soft);background:var(--papel)}
.cv-agendar,.cv-ver{appearance:none;background:none;border:0;padding:0;cursor:pointer;display:inline-flex;align-items:center;min-height:44px;font-family:'Figtree';font-weight:700;font-size:14.5px;color:var(--col-txt);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.cv-agendar:hover,.cv-ver:hover{text-decoration-thickness:2.5px}
/* Ya pasó en el año: la hoja se queda como recuerdo y no se puede agendar */
.cv-it.pasado .cv-hoja{opacity:.62;filter:saturate(.5)}
.cv-it.pasado .cv-it-tit{color:var(--soft)}
.cv-aviso{font-size:14px;line-height:1.5;color:var(--soft);background:var(--crema);border-radius:12px;padding:11px 14px;margin:0 0 12px;text-wrap:pretty}

.cv-planear{margin-top:30px;padding:20px 22px 22px;background:var(--crema);border-radius:18px}
.cv-planear .cv-sub{margin-top:0}
.cv-planear ul{list-style:none;display:grid;gap:11px}
.cv-planear li{position:relative;padding-left:24px;font-size:15px;line-height:1.5;color:var(--tinta);text-wrap:pretty}
.cv-planear li::before{content:"";position:absolute;left:0;top:.62em;width:13px;height:4px;border-radius:2px;background:var(--col)}
.cv-planear a{color:var(--col-txt);font-weight:700;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.cv-suma{font-size:14px;line-height:1.55;color:var(--soft);margin-top:18px;text-wrap:pretty}
.cv-suma a{color:var(--tinta);font-weight:700;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}

.cv-cierre{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;margin-top:56px;padding-top:34px;border-top:1px solid var(--linea)}
.cv-liga{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--rosa-txt);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.cv-liga:hover{text-decoration-thickness:2.5px}
.cv-sinjs{font-size:15px;color:var(--soft)}

/* ── Tableta ── */
@media(max-width:960px){
  .cv-cabeza{grid-template-columns:1fr;align-items:start}
  /* Una columna: el mes, su clima, lo que trae y, al final, los botones al mes vecino */
  .cv-panel-in{grid-template-columns:minmax(0,1fr);gap:0}
  .cv-panel-izq{display:contents}
  .cv-panel-der{order:1}
  .cv-panel-der>.cv-sub:first-child{margin-top:34px}
  .cv-pasos{order:2;margin-top:34px}
  .cv-escena{max-width:560px}
  .cv-llevar{max-width:560px}
}

/* ── Celular ── */
@media(max-width:720px){
  .cv{padding:60px 0 48px}
  .cv-lead{font-size:16px}
  .cv-tablero{--pad:12px;margin:0 -16px;border-radius:20px;padding:18px var(--pad) 44px}
  .cv-tablero-top{padding:0 6px}
  .cv-clave{gap:14px;font-size:12.5px}
  .cv-carta{padding-top:40px}
  .cv-tab{font-size:12px;letter-spacing:.02em;padding-top:11px;border-radius:10px}
  .cv-sel{border-radius:10px}
  .cv-sel::after{top:29px;width:14px}
  .cv-clima{height:24px}
  /* 11 px y no 10: se leía con trabajo; si el nombre no cabe, acomodarClima()
     pone el corto o solo el ícono */
  .cv-cl{left:calc(var(--x)*100% + 2px);width:calc(var(--w)*100% - 4px);gap:4px;padding:0 6px;font-size:11px;letter-spacing:.06em;border-radius:7px}
  .cv-cl svg{width:12px;height:12px}
  .cv-listones{gap:6px}
  .cv-liston{height:31px}
  .cv-et,.cv-gl{font-size:12.5px}
  .cv-gl{gap:5px}
  .cv-tramo{height:10px}
  .cv-panel{margin-top:28px;padding-top:28px}
  .cv-it{grid-template-columns:54px minmax(0,1fr);gap:15px}
  .cv-hoja-dia{font-size:23px}
  .cv-foto{width:54px;height:54px}
  .cv-escena{grid-template-columns:128px minmax(0,1fr);gap:16px;align-items:start;margin-top:24px}
  .cv-esf{padding-top:24px}
  .cv-esf-bola{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--col,var(--rosa)),0 22px 30px -20px rgba(36,29,56,.75);transform-origin:50% -20px}
  .cv-esf-bola::before{top:-13px;width:26px;height:11px}
  .cv-esf-bola::after{top:-24px;width:11px;height:12px}
  .cv-esf-pie{font-size:13px;margin-top:12px}
  .cv-deco{left:-16px;right:-16px}
  .cv-tiempo{padding:13px 14px 14px;margin-top:22px}
  .cv-tiempo-t{font-size:15px}
  .cv-llevar li{font-size:14px;padding-right:10px;gap:8px}
  .cv-llevar-ico{width:30px;height:30px}
  .cv-pasos{display:grid;grid-template-columns:1fr 1fr}
  .cv-paso{justify-content:center}
  .cv-planear{padding:18px 18px 20px;margin-left:-4px;margin-right:-4px}
  .cv-cierre{margin-top:44px;padding-top:28px}
}
/* Celular muy angosto: «Août» ya no cabe a 12 px en su columna */
@media(max-width:359px){
  .cv-tab{font-size:11px}
}
@media(prefers-reduced-motion:reduce){
  .cv-sel,.cv-panel::before,.cv-tramo,.cv-esfera,.cv-cl{transition:none}
  .cv-esf-bola,.cv-deco::before,.cv-deco::after{animation:none}
  .cv-panel-in.entra{animation:none}
}