/* ==========================================================================
   CREATICS · resenas.css — lo propio de /resenas/ (prefijo .cs-rs-).
   Requiere los cinco comunes y actividades.css (la banda de ayuda). Solo lo que
   no existe: el héroe corto, la rejilla de reseñas y la caja de la ficha de Google.
   ========================================================================== */

/* ---------- Héroe: corto, de texto, con la nota arriba ---------- */
.cs-rs-hero{padding-block:88px 40px}
.cs-rs-hero__in{gap:14px;align-items:flex-start;max-width:760px}
.cs-rs-hero__t{font-size:var(--text-4xl);line-height:1.08;color:var(--cs-white)}
.cs-rs-hero .cs-lead{max-width:62ch}
.cs-rs-hero__nota{color:var(--cs-white)}
.cs-rs-hero__nota .cs-stars{color:var(--yellow-500);letter-spacing:1px;margin-right:.45em}
.cs-rs-hero__acciones{padding-top:6px;gap:12px}

/* ---------- Las reseñas: mampostería sencilla en columnas ----------
   Con columns cada tarjeta ocupa lo que necesita y no quedan huecos enormes
   entre una de una línea y otra de ocho. break-inside evita que se partan. */
.cs-rs-grid{margin:0;padding:0;list-style:none;columns:3;column-gap:20px}
.cs-rs-grid>li{break-inside:avoid;margin:0 0 20px}
.cs-rs-card{margin:0;display:flex;flex-direction:column;gap:10px;padding:22px 22px 18px;background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-card);box-shadow:var(--shadow-sm)}
.cs-rs-card .cs-stars{color:var(--yellow-500);letter-spacing:1px;font-size:var(--text-sm)}
.cs-rs-card__tema{font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--color-ink-mute)}
.cs-rs-card p{margin:0;font-size:var(--text-base);line-height:var(--leading-relaxed);color:var(--cs-ink)}
.cs-rs-card cite{display:flex;flex-direction:column;gap:2px;margin-top:2px;font-style:normal;font-family:var(--font-heading);font-weight:700;font-size:var(--text-base);color:var(--cs-ink)}
.cs-rs-card cite span{font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--color-ink-mute)}

/* ---------- La ficha de Google, al final ---------- */
.cs-rs-google__caja{display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding:28px 30px;background:var(--color-surface);border:1.5px solid var(--color-border);border-left:5px solid var(--cs-blue);border-radius:var(--radius-card);box-shadow:var(--shadow-sm)}
.cs-rs-google__caja h2{margin:0}
.cs-rs-google__caja p{margin:0;font-size:var(--text-base);line-height:var(--leading-relaxed);color:var(--color-ink-soft)}
.cs-rs-google__acciones{display:flex;flex-wrap:wrap;gap:10px}
.cs-rs-google__nota{font-size:var(--text-xs);color:var(--color-ink-mute)}
.cs-rs-banda{margin-top:28px}
.cs-rs-banda__acciones{gap:10px}

@media (max-width:1000px){.cs-rs-grid{columns:2}}
@media (max-width:720px){
	.cs-rs-hero{padding-block:84px 28px}
	.cs-rs-hero__t{font-size:var(--text-3xl)}
	.cs-rs-hero__acciones{width:100%;flex-direction:column;align-items:stretch;gap:10px}
	.cs-rs-hero__acciones .cs-btn{width:100%}
	.cs-rs-grid{columns:1}
	.cs-rs-card{padding:18px}
	.cs-rs-google__caja{padding:20px 18px}
	.cs-rs-google__acciones .cs-btn{width:100%}
	.cs-rs-banda__acciones{width:100%}
	.cs-rs-banda__acciones .cs-btn{width:100%}
}