.cesr {
--cesr-accent: #2e7d4f;
--cesr-text: #1d1f1e;
--cesr-muted: #6b6f6c;
--cesr-card: #f4f4f1;
--cesr-surface: #ffffff;
--cesr-border: rgba(20, 24, 22, .10);
--cesr-star: #f2b51d;
--cesr-star-off: #dcdcd6;
--cesr-verified: #4f7cf7;
--cesr-radius: 16px;
--cesr-gap: 20px;
--cesr-per: 3;
container-type: inline-size;
position: relative;
margin: 2.5em 0;
color: var(--cesr-text);
font-family: inherit;
line-height: 1.5;
box-sizing: border-box;
}
.cesr *, .cesr *::before, .cesr *::after { box-sizing: border-box; }
.cesr--oscuro {
--cesr-text: #f2f3ef;
--cesr-muted: #a6aba6;
--cesr-card: #20251f;
--cesr-surface: #1a1e1b;
--cesr-border: rgba(255, 255, 255, .10);
--cesr-star-off: #464b46;
background: #121513;
padding: 32px;
border-radius: calc(var(--cesr-radius) + 6px);
}
.cesr__title {
margin: 0 0 18px;
color: inherit;
} .cesr__header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 14px 24px;
margin-bottom: var(--cesr-gap);
padding: 16px 24px;
background: var(--cesr-card);
border-radius: var(--cesr-radius);
}
.cesr__header-info {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
}
.cesr__label { font-weight: 700; font-size: 1.05em; }
.cesr__score { font-weight: 700; font-size: 1.05em; font-variant-numeric: tabular-nums; }
.cesr__sep { color: var(--cesr-muted); }
.cesr__count {
color: inherit !important;
font-weight: 600;
text-decoration: none !important;
}
.cesr__count:hover { text-decoration: underline !important; text-underline-offset: 3px; }
.cesr__wordmark {
font-family: "Product Sans", "Google Sans", Arial, Helvetica, sans-serif;
font-weight: 500;
font-size: 1.65em;
letter-spacing: -.02em;
line-height: 1;
}
.cesr__wordmark--lg { font-size: 2.4em; }
.cesr__g { width: 22px; height: 22px; flex: none; } .cesr__stars {
position: relative;
display: inline-block;
line-height: 0;
white-space: nowrap;
vertical-align: middle;
}
.cesr__stars svg { width: 18px; height: 18px; margin-right: 2px; }
.cesr__stars-bg svg { fill: var(--cesr-star-off); }
.cesr__stars-fg {
position: absolute;
inset: 0 auto 0 0;
overflow: hidden;
}
.cesr__stars-fg svg { fill: var(--cesr-star); } .cesr__write {
display: inline-flex;
align-items: center;
gap: .5em;
padding: .7em 1.3em;
border-radius: 999px;
background: var(--cesr-accent);
color: #fff !important;
font-weight: 600;
font-size: .95em;
line-height: 1.2;
text-decoration: none !important;
transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
box-shadow: 0 6px 16px -8px var(--cesr-accent);
}
.cesr__write svg { width: 18px; height: 18px; }
.cesr__write:hover { filter: brightness(.93); transform: translateY(-1px); }
.cesr__write:focus-visible { outline: 3px solid color-mix(in srgb, var(--cesr-accent) 45%, transparent); outline-offset: 2px; }
.cesr__write--link {
padding: 0;
background: none;
box-shadow: none;
color: var(--cesr-accent) !important;
text-decoration: underline !important;
text-underline-offset: 4px;
}
.cesr__write--link:hover { transform: none; }
.cesr__footer { display: flex; justify-content: center; margin-top: 22px; } .cesr__body { position: relative; }
.cesr__carousel { position: relative; min-width: 0; }
.cesr__track {
display: flex;
gap: var(--cesr-gap);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
overscroll-behavior-x: contain;
scrollbar-width: none;
padding: 4px 2px 10px;
margin: -4px -2px -10px;
outline: none;
}
.cesr__track::-webkit-scrollbar { display: none; }
.cesr__track:focus-visible { outline: 2px solid var(--cesr-accent); outline-offset: 4px; border-radius: var(--cesr-radius); }
.cesr__nav {
position: absolute;
top: 50%;
z-index: 2;
display: grid;
place-items: center;
width: 42px;
height: 42px;
margin: 0;
padding: 0;
border: 1px solid var(--cesr-border);
border-radius: 50%;
background: var(--cesr-surface);
color: var(--cesr-text);
box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .25);
cursor: pointer;
transform: translateY(-50%);
transition: transform .15s ease, opacity .2s ease;
}
.cesr__nav svg { width: 20px; height: 20px; }
.cesr__nav:hover { transform: translateY(-50%) scale(1.07); }
.cesr__nav--prev { left: -20px; }
.cesr__nav--next { right: -20px; }
.cesr.is-static .cesr__nav,
.cesr.is-static .cesr__dots { display: none; }
.cesr__dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 20px;
}
.cesr__dots button {
width: 8px;
height: 8px;
padding: 0;
border: 0;
border-radius: 999px;
background: var(--cesr-muted);
opacity: .3;
cursor: pointer;
transition: width .25s ease, opacity .25s ease, background .25s ease;
}
.cesr__dots button[aria-selected="true"] { width: 24px; opacity: 1; background: var(--cesr-accent); } .cesr__card {
flex: 0 0 calc((100% - (var(--cesr-per) - 1) * var(--cesr-gap)) / var(--cesr-per));
min-width: 0;
scroll-snap-align: start;
display: flex;
flex-direction: column;
gap: 12px;
padding: 24px;
background: var(--cesr-card);
border-radius: var(--cesr-radius);
}
.cesr__author {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.cesr__avatar {
position: relative;
flex: none;
display: grid;
place-items: center;
width: 44px;
height: 44px;
overflow: hidden;
border-radius: 50%;
background: hsl(var(--cesr-hue, 140) 38% 42%);
color: #fff;
font-weight: 600;
font-size: 1.15em;
}
.cesr__avatar img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
margin: 0;
border-radius: 50%;
}
.cesr__meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.cesr__name {
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cesr__date { color: var(--cesr-muted); font-size: .88em; }
.cesr__card-g { margin-left: auto; align-self: flex-start; }
.cesr__rating { display: flex; align-items: center; gap: 6px; }
.cesr__verified { display: inline-flex; color: var(--cesr-verified); }
.cesr__verified svg { width: 18px; height: 18px; }
.cesr__text { flex: 1 1 auto; }
.cesr__text p { margin: 0; overflow-wrap: anywhere; }
.cesr__readmore {
align-self: flex-start;
margin: -4px 0 0;
padding: 0;
border: 0;
background: none;
color: var(--cesr-muted);
font: inherit;
font-size: .92em;
cursor: pointer;
}
.cesr__readmore:hover { color: var(--cesr-text); text-decoration: underline; text-underline-offset: 3px; }
.cesr__card.is-expanded .cesr__ellipsis { display: none; }
.cesr__reply {
margin-top: 2px;
padding: 10px 14px;
border-left: 3px solid var(--cesr-accent);
border-radius: 0 10px 10px 0;
background: color-mix(in srgb, var(--cesr-accent) 7%, transparent);
font-size: .88em;
}
.cesr__reply strong { display: block; margin-bottom: 2px; font-size: .95em; }
.cesr__reply p { margin: 0; color: var(--cesr-muted); } .cesr--lateral .cesr__body {
display: grid;
grid-template-columns: minmax(200px, 250px) minmax(0, 1fr);
gap: 28px;
align-items: center;
}
.cesr--lateral .cesr__summary {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
text-align: center;
}
.cesr--lateral .cesr__summary .cesr__label { font-size: 1.7em; font-weight: 800; letter-spacing: .02em; }
.cesr--lateral .cesr__summary .cesr__stars svg { width: 32px; height: 32px; }
.cesr--lateral .cesr__based a { color: inherit !important; text-decoration: none !important; }
.cesr--lateral .cesr__summary .cesr__write { margin-top: 8px; } .cesr--completo .cesr__header {
background: color-mix(in srgb, var(--cesr-accent) 7%, var(--cesr-surface));
border: 1px solid color-mix(in srgb, var(--cesr-accent) 18%, transparent);
}
.cesr--completo .cesr__card {
background: var(--cesr-surface);
border: 1px solid var(--cesr-border);
box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 28px -18px rgba(0, 0, 0, .25);
} .cesr--minimalista { --cesr-gap: 32px; }
.cesr--minimalista .cesr__header {
padding: 0 0 14px;
background: none;
border-radius: 0;
border-bottom: 1px solid var(--cesr-border);
font-size: .95em;
}
.cesr--minimalista .cesr__header .cesr__g { width: 18px; height: 18px; }
.cesr--minimalista .cesr__card {
padding: 4px 0 4px 20px;
gap: 8px;
background: none;
border-radius: 0;
border-left: 2px solid var(--cesr-border);
font-size: .96em;
}
.cesr--minimalista .cesr__card:hover { border-left-color: var(--cesr-accent); }
.cesr--minimalista .cesr__author { order: 3; margin-top: 4px; }
.cesr--minimalista .cesr__meta { flex-direction: row; gap: 8px; align-items: baseline; }
.cesr--minimalista .cesr__name { font-weight: 600; }
.cesr--minimalista .cesr__stars svg { width: 14px; height: 14px; }
.cesr--minimalista .cesr__nav {
top: auto;
bottom: -54px;
width: 34px;
height: 34px;
box-shadow: none;
transform: none;
}
.cesr--minimalista .cesr__nav:hover { transform: scale(1.06); }
.cesr--minimalista .cesr__nav--prev { left: 0; }
.cesr--minimalista .cesr__nav--next { left: 42px; right: auto; }
.cesr--minimalista .cesr__dots { justify-content: flex-end; margin-top: 30px; } .cesr--elegante { --cesr-per: 1; text-align: center; }
.cesr--elegante .cesr__header {
flex-direction: column;
gap: 8px;
padding: 0;
margin-bottom: 26px;
background: none;
}
.cesr--elegante .cesr__eyebrow {
margin: 0;
color: var(--cesr-muted);
font-size: .78em;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
}
.cesr--elegante .cesr__header .cesr__g { width: 18px; height: 18px; }
.cesr--elegante .cesr__carousel { max-width: 860px; margin: 0 auto; padding: 0 56px; }
.cesr--elegante .cesr__card {
align-items: center;
gap: 18px;
padding: 8px 0;
background: none;
}
.cesr--elegante .cesr__card > .cesr__stars svg { width: 20px; height: 20px; }
.cesr--elegante blockquote.cesr__text {
position: relative;
margin: 0;
padding: 0;
border: 0;
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.15rem, 2.6cqi, 1.6rem);
font-style: italic;
line-height: 1.5;
color: var(--cesr-text);
quotes: none;
background: none;
}
.cesr--elegante blockquote.cesr__text::before {
content: "\201C";
display: block;
height: .42em;
font-size: 3em;
line-height: .9;
font-style: normal;
color: var(--cesr-accent);
opacity: .35;
pointer-events: none;
}
.cesr--elegante .cesr__readmore { align-self: center; }
.cesr--elegante .cesr__author { justify-content: center; text-align: left; }
.cesr--elegante .cesr__avatar { width: 40px; height: 40px; }
.cesr--elegante .cesr__nav { box-shadow: none; }
.cesr--elegante .cesr__nav--prev { left: 0; }
.cesr--elegante .cesr__nav--next { right: 0; }
.cesr--elegante .cesr__write {
background: transparent;
color: var(--cesr-accent) !important;
border: 1.5px solid var(--cesr-accent);
box-shadow: none;
}
.cesr--elegante .cesr__write:hover { background: var(--cesr-accent); color: #fff !important; filter: none; } @container (max-width: 1040px) {
.cesr--lateral .cesr__body { --cesr-per: 2; }
}
@container (max-width: 900px) {
.cesr__body { --cesr-per: 2; }
.cesr--elegante .cesr__body { --cesr-per: 1; }
}
@container (max-width: 760px) {
.cesr--lateral .cesr__body { grid-template-columns: 1fr; gap: 20px; }
.cesr--lateral .cesr__summary .cesr__wordmark--lg { font-size: 1.9em; }
}
@container (max-width: 600px) {
.cesr .cesr__body,
.cesr--lateral .cesr__body,
.cesr--elegante .cesr__body { --cesr-per: 1; --cesr-gap: 14px; }
.cesr__header { padding: 14px 16px; }
.cesr__card { padding: 20px; }
.cesr--minimalista .cesr__card { padding: 4px 0 4px 16px; }
.cesr--elegante .cesr__card { padding: 8px 0; }
.cesr--elegante .cesr__carousel { padding: 0; } .cesr__nav,
.cesr--elegante .cesr__nav,
.cesr--minimalista .cesr__nav {
top: auto;
bottom: -50px;
width: 36px;
height: 36px;
transform: none;
}
.cesr__nav:hover { transform: scale(1.06); }
.cesr__nav--prev, .cesr--elegante .cesr__nav--prev, .cesr--minimalista .cesr__nav--prev { left: 0; right: auto; }
.cesr__nav--next, .cesr--elegante .cesr__nav--next, .cesr--minimalista .cesr__nav--next { right: 0; left: auto; }
.cesr__dots, .cesr--minimalista .cesr__dots { justify-content: center; align-items: center; min-height: 36px; margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
.cesr__track { scroll-behavior: auto; }
.cesr__write, .cesr__nav, .cesr__dots button { transition: none; }
}
.cesr-admin-note {
padding: 10px 14px;
border: 1px dashed #c9a227;
background: #fffbea;
color: #6b5800;
font-size: 14px;
}