/* ===== «X EN CADA SIGNO», LA CALCULADORA DEL CICLO DE UN PLANETA (30 sep 2026) =====
   Las tres páginas /marte-en-cada-signo/, /venus-en-cada-signo/ y /mercurio-en-cada-signo/
   comparten esta hoja y js/ciclo-planeta.js. Prefijo cic-. Solo la paleta de la marca: los
   colores de los elementos no entran (Mafe, 30 sep 2026, «la paleta de colores no corresponde
   con la página»), y el rojo de los retrógrados de la carta pinta solo ese tramo de la rueda.
   La maqueta aprobada es trabajo/propuestas/2026-09-30_ciclo-de-un-planeta.html. */
.cic{container-type:inline-size;--cic-tinta:#021212;--cic-marfil:#FBF8F1;--cic-blanco:#FFFFFF;--cic-vino:#3B161F;--cic-dust:#D6CEC4;
  color:var(--cic-tinta);font:16px/1.55 var(--f-body);letter-spacing:-.5px}
.cic-sec{padding:28px 12px}
.cic h1,.cic h2,.cic h3{font-family:var(--f-title);font-weight:800;text-transform:uppercase;letter-spacing:-.5px;line-height:1.05;margin:0}
.cic h1{font-size:44px}
.cic h2{font-size:26px;margin-bottom:14px}
@media(max-width:700px){.cic h1{font-size:30px}.cic h2{font-size:21px}}
.cic p{margin:0 0 12px}

/* ---- Arriba: la portada de los planetas de la biblioteca de tránsitos, calcada de
   css/transitos-portada.css (.portada, .p-banda, .rotulo, .p-micro) con los mismos valores. Lo
   único propio es que la ilustración gira despacio detrás de la banda. ---- */
.cic{padding:16px 16px 44px}
@media(max-width:900px){.cic{padding:10px}}
.cic-portada{position:relative;overflow:hidden;min-height:340px;background:var(--cic-tinta);border:1px solid rgba(2,18,18,.14);border-radius:5px}
.cic-giro{position:absolute;left:0;top:50%;width:100%;aspect-ratio:1/1;background-repeat:no-repeat;background-size:cover;background-position:center;
  transform:translateY(-50%);animation:cic-gira 200s linear infinite}
@keyframes cic-gira{to{transform:translateY(-50%) rotate(360deg)}}
.cic-pbanda{position:absolute;left:50%;transform:translateX(-50%);bottom:52px;width:min(680px,86%);background:var(--cic-marfil);text-align:center;padding:20px 24px 18px;border-radius:5px}
.cic-rotulo{font-family:var(--f-title);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--cic-vino);margin:0 0 8px}
.cic .cic-pbanda h1{font-weight:500;font-size:clamp(22px,3.2vw,34px);line-height:1.16;letter-spacing:.5px;margin:0}
.cic-micro{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:space-between;padding:0 26px;
  font-family:var(--f-title);font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cic-marfil)}
@media(max-width:640px){.cic-portada{min-height:280px}.cic-micro{flex-direction:column;gap:2px;align-items:center;text-align:center;font-size:8px;padding:0 14px;bottom:10px}}
.cic-intro{font-size:18.5px;line-height:1.62}
.cic .cic-intro{margin:0 0 22px}
/* El planeta y la vuelta, en una sola fila que se alinea con los datos de abajo */
.cic-mando{display:flex;justify-content:space-between;align-items:center;gap:14px 24px;flex-wrap:wrap;margin-bottom:14px}
.cic-elige{display:flex;gap:10px;flex-wrap:wrap}
.cic-chip{border:1px solid var(--cic-dust);background:var(--cic-blanco);border-radius:5px;padding:6px 14px 6px 6px;
  display:flex;align-items:center;gap:10px;font:700 15px/1 var(--f-title);color:var(--cic-tinta);letter-spacing:-.3px;text-decoration:none}
.cic-chip .bola{width:32px;height:32px;border-radius:50%;background-size:345%;background-position:center;flex:none}
.cic-chip[aria-current="page"]{background:var(--cic-vino);border-color:var(--cic-vino);color:var(--cic-marfil)}
.cic-vuelta{display:flex;align-items:center;gap:12px;font:700 15px/1 var(--f-title);letter-spacing:-.3px}
.cic-vuelta select{appearance:none;-webkit-appearance:none;border:1px solid var(--cic-dust);background:var(--cic-blanco);border-radius:5px;padding:12px 38px 12px 14px;
  font:700 15px/1 var(--f-title);color:var(--cic-tinta);letter-spacing:-.3px;cursor:pointer;max-width:100%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5z' fill='%23021212'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center;background-size:22px}

/* En angosto: los tres planetas en una sola fila y la vuelta a lo ancho, sin salirse de la hoja */
@container (max-width:560px){
  .cic-elige{width:100%;flex-wrap:nowrap;gap:8px}
  .cic-chip{flex:1 1 0;min-width:0;justify-content:center;padding:5px 8px 5px 5px;gap:6px;font-size:13px}
  .cic-chip .bola{width:26px;height:26px}
  .cic-vuelta{width:100%}
  .cic-vuelta select{flex:1 1 auto;min-width:0;font-size:14px}
}

/* Datos en fila dentro de UNA tarjeta */
.cic-datos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--cic-blanco);border:1px solid var(--cic-dust);border-radius:5px}
.cic-dato{padding:14px 16px;border-left:1px solid var(--cic-dust);border-radius:0}
.cic-dato:first-child{border-left:0}
.cic-dato b{display:block;font:800 22px/1.1 var(--f-title);letter-spacing:-.5px;margin-bottom:4px}
.cic-dato span{font-size:14px}
@container (max-width:700px){.cic-datos{grid-template-columns:repeat(2,minmax(0,1fr))}.cic-dato:nth-child(3){border-left:0}.cic-dato:nth-child(n+3){border-top:1px solid var(--cic-dust)}}

/* ---- La rueda y su panel ---- */
.cic-viaje{border-top:1px solid var(--cic-dust);border-radius:0}
.cic-escena{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:36px;align-items:start}
/* La hoja cambia de ancho según haya carril y columna de novedades, así que se mide la hoja
   y no la pantalla: por debajo de 1000 px de hoja la rueda no cabe al lado del panel. */
@container (max-width:1000px){.cic-escena{grid-template-columns:1fr}}
.cic-rueda svg{display:block;width:100%;height:auto;max-width:720px;margin:0 auto}
.cic-linea{margin-top:32px}
.cic-linea input{width:100%;accent-color:var(--cic-vino)}
.cic-linea .extremos{display:flex;justify-content:space-between;font-size:13px}

.cic-panel{position:sticky;top:20px}
@container (max-width:1000px){.cic-panel{position:static}}
.cic-fecha{font:800 30px/1.05 var(--f-title);letter-spacing:-.5px;text-transform:uppercase}
.cic-donde{font-size:18px;margin-top:8px}
.cic-donde .rx{color:var(--cic-vino);font-weight:700}
.cic-mandos{display:flex;gap:10px;margin:18px 0 22px;flex-wrap:wrap}
.cic-boton{appearance:none;border:1px solid var(--cic-vino);background:var(--cic-vino);color:var(--cic-marfil);border-radius:5px;
  padding:11px 16px;font:700 15px/1 var(--f-title);letter-spacing:-.3px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;text-decoration:none}
.cic-boton.claro{background:transparent;color:var(--cic-vino)}
.cic-boton svg{width:20px;height:20px;fill:currentColor}

.cic-cal{background:var(--cic-blanco);border:1px solid var(--cic-dust);border-radius:5px;max-height:470px;overflow-y:auto}
@container (max-width:1000px){.cic-cal{max-height:none}}
.cic .cic-cal h2{position:sticky;top:0;z-index:1;background:var(--cic-blanco);font-size:15px;padding:14px 16px;margin:0;border-bottom:1px solid var(--cic-dust);border-radius:0!important}
.cic-fila{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 16px;
  border-bottom:1px solid var(--cic-dust);border-radius:0!important;cursor:pointer}
.cic-fila:last-child{border-bottom:0}
.cic-fila .nom{font:700 15px/1.2 var(--f-title);letter-spacing:-.3px;margin:0}
.cic-fila .cuando{font-size:13px;line-height:1.35}
.cic-fila .dias{font:800 16px/1 var(--f-title);letter-spacing:-.3px;text-align:right}
.cic-fila .dias small{display:block;font:400 12px/1.2 var(--f-body)}
.cic-fila svg{color:var(--cic-tinta)}
.cic-fila.activa{background:var(--cic-vino);color:var(--cic-marfil)}
.cic-fila.activa svg{color:var(--cic-marfil)}

/* ---- Cuándo retrograda: una fila por retrógrado, las fechas y del grado al grado ---- */
.cic-est{border-top:1px solid var(--cic-dust);border-radius:0}
.cic-rx{background:var(--cic-blanco);border:1px solid var(--cic-dust);border-radius:5px}
.cic-rxf{display:flex;justify-content:space-between;align-items:center;gap:8px 24px;flex-wrap:wrap;padding:16px;
  border-bottom:1px solid var(--cic-dust);border-radius:0!important;cursor:pointer}
.cic-rxf:last-child{border-bottom:0}
.cic-rxf .fechas{font:800 20px/1.2 var(--f-title);letter-spacing:-.5px}
.cic-rxf .grados{display:inline-flex;align-items:center;gap:6px;font:700 17px/1 var(--f-title);letter-spacing:-.3px;white-space:nowrap}
.cic-rxf .grados .a{font:400 15px/1 var(--f-body);margin:0 4px}

.cic-salida{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;background:var(--cic-tinta);color:var(--cic-marfil);border-radius:5px;padding:28px}
.cic-salida h2{margin-bottom:8px}
.cic-salida p{margin:0}
.cic-salida .cic-boton{background:var(--cic-marfil);color:var(--cic-tinta);border-color:var(--cic-marfil)}
@media(max-width:700px){.cic-salida{grid-template-columns:1fr;padding:22px 16px}}

/* ---- La estrella de Venus (solo en /venus-en-cada-signo/): la rueda con la rosa de ocho años a
   la izquierda y a la derecha el texto, el rango y las cinco conjunciones con el estilo de las
   filas de retrógrados. La punta en curso se enciende en vino, como la fila activa del calendario. ---- */
.cic-estrella{border-top:1px solid var(--cic-dust);border-radius:0}
.cic-estrella .cic-rango{font:800 20px/1.2 var(--f-title);letter-spacing:-.5px;margin:0 0 14px}
.cic-estrella .cic-mandos{margin:4px 0 18px}
.cic-estrella .cic-escena{margin-top:14px}
.cic-num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%!important;margin-right:12px;
  background:var(--cic-vino);color:var(--cic-marfil);font:800 15px/1 var(--f-title);vertical-align:2px}
.cic-estrella .cic-rxf .fechas{font-size:18px;display:inline-flex;align-items:center}
.cic-rxf.activa{background:var(--cic-vino);color:var(--cic-marfil)}
.cic-rxf.activa .cic-num{background:var(--cic-marfil);color:var(--cic-vino)}

@media (prefers-reduced-motion:reduce){.cic-giro{animation:none}}