.pdp__desc { max-width: 34em; }
.prosa {
font-size: 1rem;
line-height: 1.65;
color: var(--tinta);
overflow-wrap: break-word;
}
.prosa :where(p, ul, ol, dl, table, figure, blockquote, img, details, div, section, header, article) { margin-top: var(--s4); }
.prosa :where(h2) { margin-top: var(--s7); }
.prosa :where(h3, h4, h5, h6) { margin-top: var(--s5); }
.prosa :where(:first-child) { margin-top: 0; }
.prosa h2 {
font-family: var(--display);
font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 96;
font-size: 1.3rem;
font-weight: 500;
letter-spacing: -.018em;
line-height: 1.2;
padding-top: var(--s4);
border-top: 1px solid var(--hilo);
}
.prosa > h2:first-child { padding-top: 0; border-top: 0; }
.prosa :is(h3, h4, h5, h6) {
font-family: var(--dato);
font-size: var(--fs-dato);
font-weight: 400;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--humo);
line-height: 1.5;
}
.prosa strong, .prosa b { font-weight: 600; }
.prosa em, .prosa i { font-style: italic; }
.prosa a {
color: inherit;
text-decoration: underline;
text-decoration-color: var(--hilo);
text-underline-offset: 3px;
}
.prosa a:hover { text-decoration-color: var(--rojo); }
.prosa ul, .prosa ol { list-style: none; padding-left: 0; }
.prosa > ul > li, .prosa > ol > li,
.prosa :is(div, section, article) > ul > li,
.prosa :is(div, section, article) > ol > li {
display: grid;
grid-template-columns: 2.1em 1fr;
gap: var(--s3);
padding-block: var(--s3);
border-top: 1px solid var(--hilo);
font-size: .95rem;
line-height: 1.55;
}
.prosa ul > li:last-child, .prosa ol > li:last-child { border-bottom: 1px solid var(--hilo); }
.prosa ul > li::before {
content: "";
width: 11px;
height: 1px;
background: var(--tinta);
margin-top: .78em;
justify-self: start;
}
.prosa ol { counter-reset: pfp-orden; }
.prosa ol > li { counter-increment: pfp-orden; }
.prosa ol > li::before {
content: counter(pfp-orden, decimal-leading-zero);
font-family: var(--dato);
font-size: var(--fs-dato);
letter-spacing: .06em;
color: var(--humo);
padding-top: .28em;
}
.prosa li ul, .prosa li ol { margin-top: var(--s2); }
.prosa li li {
display: list-item;
list-style: none;
border: 0;
padding-block: 2px;
padding-left: var(--s4);
}
.prosa li li::before { content: none; }
.prosa table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
font-size: .925rem;
}
.prosa th, .prosa td {
text-align: left;
vertical-align: top;
padding-block: var(--s3);
border-top: 1px solid var(--hilo);
overflow-wrap: anywhere;
}
.prosa tr:last-child :is(th, td) { border-bottom: 1px solid var(--hilo); }
.prosa tbody tr > :first-child {
width: 38%;
font-family: var(--dato);
font-size: var(--fs-dato);
font-weight: 400;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--humo);
line-height: 1.5;
padding-top: calc(var(--s3) + 2px);
}
.prosa tbody tr > :first-child :is(strong, b) { font-weight: 400; }
.prosa tbody tr > * + * { padding-left: var(--s4); }
.prosa img { height: auto; border-radius: var(--r-sm); }
.prosa blockquote {
padding-left: var(--s4);
border-left: 1px solid var(--hilo);
color: var(--humo);
}
.prosa details {
padding-block: var(--s3);
border-top: 1px solid var(--hilo);
}
.prosa summary {
cursor: pointer;
font-weight: 600;
font-size: .95rem;
}
@media (max-width: 560px) {
.prosa :is(table, tbody, tr, th, td) { display: block; width: auto; }
.prosa tr { padding-block: var(--s3); border-top: 1px solid var(--hilo); }
.prosa :is(th, td) {
border: 0;
padding: 0;
width: auto;
}
.prosa tbody tr > * + * { padding-left: 0; margin-top: 3px; }
.prosa tr:last-child :is(th, td) { border-bottom: 0; }
.prosa tbody tr:last-child { border-bottom: 1px solid var(--hilo); }
}
.calif {
position: relative;
display: inline-block;
vertical-align: -.05em;
font-size: .8rem;
line-height: 1;
letter-spacing: .08em;
color: var(--hilo);
white-space: nowrap;
-webkit-user-select: none;
user-select: none;
}
.calif::before { content: "★★★★★"; }
.calif__v {
position: absolute;
top: 0;
left: 0;
bottom: 0;
overflow: hidden;
color: var(--tinta);
}
.calif__v::before { content: "★★★★★"; }
.calif--mini { font-size: .72rem; letter-spacing: .06em; }
.pdp__resenas { max-width: none; }
.resenas__media { max-width: 40em; }
.resenas__media {
display: flex;
align-items: center;
gap: var(--s4);
margin-top: var(--s5);
}
.resenas__nota {
font-family: var(--display);
font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 96;
font-size: 2.9rem;
font-weight: 500;
line-height: .9;
letter-spacing: -.03em;
}
.resenas__nota-al { display: grid; gap: 6px; }
.resenas__n {
font-family: var(--dato);
font-size: var(--fs-dato);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--humo);
}
.resenas__rep {
list-style: none;
padding: 0;
margin-top: var(--s5);
max-width: 24em;
}
.resenas__rf {
display: grid;
grid-template-columns: 6.6em 1fr 3.6em;
align-items: center;
gap: var(--s3);
padding-block: 6px;
}
.resenas__rk {
font-family: var(--dato);
font-size: var(--fs-dato);
letter-spacing: .09em;
text-transform: uppercase;
color: var(--humo);
}
.resenas__rb {
position: relative;
height: 2px;
background: var(--hilo);
border-radius: 1px;
}
.resenas__rb i {
position: absolute;
top: 0;
left: 0;
height: 2px;
background: var(--tinta);
border-radius: 1px;
}
.resenas__rn {
font-family: var(--dato);
font-size: var(--fs-dato);
letter-spacing: .04em;
color: var(--humo);
text-align: right;
font-variant-numeric: tabular-nums;
}
.resenas__l {
list-style: none;
padding: 0;
margin-top: var(--s6);
columns: 2;
column-gap: var(--s5);
}
@media (max-width: 820px) { .resenas__l { columns: 1; } }
.resena {
break-inside: avoid;
background: var(--blanco);
border: 1px solid var(--hilo);
border-radius: var(--r-md);
padding: var(--s4) var(--s5);
margin-bottom: var(--s5);
}
.resena__c {
display: grid;
grid-template-columns: 34px 1fr;
gap: var(--s4);
align-items: start;
}
.resena__ini {
width: 34px;
height: 34px;
display: grid;
place-items: center;
background: var(--blanco);
border: 1px solid var(--hilo);
border-radius: var(--r-sm);
font-family: var(--dato);
font-size: 10px;
letter-spacing: .04em;
color: var(--humo);
}
.resena__ini--sin { background: transparent; }
.resena__b { min-width: 0; }
.resena__t {
margin-top: var(--s2);
font-size: .95rem;
line-height: 1.6;
overflow-wrap: anywhere;
}
.resena__t p + p { margin-top: var(--s2); }
.resena__m {
margin-top: var(--s2);
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px;
font-family: var(--dato);
font-size: 9.5px;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--humo);
}
.resena__m i { font-style: normal; color: var(--laca); }
.resena__q { color: var(--tinta); }
.resena--muda { padding-block: var(--s3); }
.resena--muda .resena__b {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--s2) var(--s3);
}
.resena--muda .resena__m { margin-top: 0; }
.resenas__pag { margin-top: var(--s5); }
.resenas__pag ul.page-numbers {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--s2);
}
.resenas__pag a.page-numbers,
.resenas__pag span.page-numbers {
display: grid;
place-items: center;
min-width: 36px;
height: 36px;
padding-inline: var(--s2);
background: var(--blanco);
border: 1px solid var(--hilo);
border-radius: var(--r-sm);
font-family: var(--dato);
font-size: var(--fs-dato);
letter-spacing: .04em;
color: var(--humo);
text-decoration: none;
}
.resenas__pag a.page-numbers:hover { border-color: var(--humo); color: var(--tinta); }
.resenas__pag span.page-numbers.current {
background: var(--tinta);
border-color: var(--tinta);
color: var(--papel);
}
.resenas__pag span.page-numbers.dots {
background: transparent;
border-color: transparent;
min-width: 0;
padding-inline: 0;
}
.resenas__vacio {
margin-top: var(--s5);
font-size: .95rem;
color: var(--humo);
max-width: 44ch;
}
.resenas__aviso {
margin-top: var(--s7);
padding-top: var(--s5);
border-top: 1px solid var(--hilo);
font-size: .9rem;
color: var(--humo);
max-width: 48ch;
}
.resena-form {
margin-top: var(--s7);
padding-top: var(--s5);
border-top: 1px solid var(--hilo);
}
.resena-form__t {
display: block;
font-family: var(--display);
font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 96;
font-size: 1.25rem;
font-weight: 500;
letter-spacing: -.02em;
line-height: 1.2;
}
.resena-form__f { margin-top: var(--s5); }
.resena-form__aviso { margin-top: var(--s3); font-size: .9rem; color: var(--humo); }
.req { color: var(--laca); }
.resena-form .campo textarea {
min-height: 8.5em;
padding: var(--s3);
resize: vertical;
background: var(--blanco);
border: 1px solid var(--hilo);
border-radius: var(--r-md);
font-family: var(--texto);
font-size: 1rem;
line-height: 1.55;
color: var(--tinta);
}
.resena-form .campo textarea::placeholder { color: #A7ABA3; }
.resena-form .campo :is(input, textarea):focus-visible {
outline: 1px solid var(--tinta);
outline-offset: -2px;
border-color: var(--tinta);
}
.calif-pick {
position: relative;
border: 0;
padding: 0;
margin: 0 0 var(--s5);
}
.calif-pick legend {
padding: 0;
margin-bottom: var(--s2);
font-family: var(--dato);
font-size: 9px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--humo);
}
.calif-pick__e {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
gap: 2px;
}
.calif-pick input {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip-path: inset(50%);
}
.calif-pick label {
font-size: 1.6rem;
line-height: 1;
padding: 3px;
color: var(--hilo);
cursor: pointer;
transition: color .12s ease;
}
.calif-pick input:checked ~ label { color: var(--tinta); }
.calif-pick .calif-pick__e:hover label { color: var(--hilo); }
.calif-pick .calif-pick__e label:hover,
.calif-pick .calif-pick__e label:hover ~ label { color: var(--tinta); }
.calif-pick input:focus-visible + label {
outline: 2px solid var(--tinta);
outline-offset: 1px;
border-radius: var(--r-sm);
}
.resena-form__env {
margin-top: var(--s4);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s4);
}
.resena-form__env .btn { min-width: 220px; }
@media (min-width: 620px) {
.resena-form__f {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: var(--s4);
}
.resena-form__f > * { grid-column: 1 / -1; }
.resena-form__f > .comment-form-author { grid-column: 1; }
.resena-form__f > .comment-form-email { grid-column: 2; }
}