/* Página del análisis: la base es styles.css; acá van el acento de cada perfil
   y los bloques propios del resultado. */

body { --accent: var(--rose); --accent-soft: var(--marker); }
body[data-perfil="resolutiva"]    { --accent: #C9636E; --accent-soft: #F6D9DC; }
body[data-perfil="estratega"]     { --accent: #B5643C; --accent-soft: #F3DCCB; }
body[data-perfil="arquitecta"]    { --accent: #4E7A8C; --accent-soft: #D6E6EC; }
body[data-perfil="certera"]       { --accent: #3F7F7A; --accent-soft: #D3E8E5; }
body[data-perfil="anfitriona"]    { --accent: #8A5A83; --accent-soft: #ECDDEA; }
body[data-perfil="perseverante"]  { --accent: #C96F4E; --accent-soft: #F7DED3; }
body[data-perfil="todoterreno"]   { --accent: #3E5C8A; --accent-soft: #D9E2F0; }
body[data-perfil="mediadora"]     { --accent: #A8762A; --accent-soft: #F4E5C6; }
body[data-perfil="investigadora"] { --accent: #5A5F9E; --accent-soft: #DFE0F2; }

.r .hand-rose, .r .step-n, .r .doodle-txt { color: var(--accent); fill: var(--accent); }
.r .marker { background-image: linear-gradient(transparent 58%, var(--accent-soft) 58%, var(--accent-soft) 92%, transparent 92%); }
.r .tape { background: var(--accent-soft); opacity: .9; }
.r .doodle { color: var(--accent); max-width: 220px; margin: 8px auto 18px; }

.r-hero { padding: 24px 0 8px; text-align: center; }
.r-name { font-size: clamp(36px, 10vw, 52px); margin: .1em 0 .25em; }
.r-sub { font-style: italic; font-size: 19px; line-height: 1.45; color: var(--green-dark); max-width: 30em; margin: 0 auto 1em; }
.r-answer { text-align: left; position: relative; margin: 26px 0 0; padding: 30px 20px 18px; background: #fff; box-shadow: 0 8px 22px rgba(60, 50, 20, .14); transform: rotate(-.5deg); }
.r-answer.reveal.is-on { transform: rotate(-.5deg); }
.r-answer p:last-child { margin: 0; }
.r-aviso { margin: 22px 0 0; padding: 16px 18px; text-align: left; background: #fff; border: 2px solid var(--rose); border-radius: 8px; }
.r-aviso .hand { margin: 0 0 4px; color: var(--rose); }
.r-aviso p:last-child { margin: 0; font-size: 16px; }
.r-meta { font-size: 14px; color: #6B6A5C; margin: 18px 0 0; }

.r-index { text-align: left; margin: 34px 0 0; padding: 18px 20px 8px; border: 2px dashed var(--rule); border-radius: 10px; }
.r-index .hand { margin: 0 0 6px; }
.r-index ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 18px; }
.r-index li { margin: 0 0 8px; font-size: 15px; line-height: 1.35; break-inside: avoid; }
.r-index a { color: var(--green-dark); text-decoration: none; }
.r-index span { font: 700 20px/1 var(--hand); color: var(--accent); margin-right: 6px; }

.r .section { padding-top: 48px; }
.r-label { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; }
.r-label b { font: 700 30px/1 var(--hand); color: var(--accent); }
.r-label span { font: 700 13px/1 var(--serif); letter-spacing: 2px; text-transform: uppercase; color: #6B6A5C; }
.r blockquote { margin: 0 0 1em; padding: 4px 0 4px 16px; border-left: 3px solid var(--accent); font-style: italic; color: var(--green-dark); }

.hyp { display: grid; gap: 22px; margin: 10px -8px 0; }
.hyp .note { padding-top: 30px; }
.hyp .note::before { background: var(--accent); }
.hyp-level { font: 700 22px/1.1 var(--hand); color: var(--accent); margin: 0 0 6px !important; }

.quad { position: relative; max-width: 340px; margin: 14px auto 22px; padding: 0 0 26px 26px; }
.quad-grid { display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: 1; border-left: 2px solid var(--green-dark); border-bottom: 2px solid var(--green-dark); }
.quad-cell { display: flex; align-items: flex-end; justify-content: center; padding: 8px; font: 500 19px/1.1 var(--hand); color: #8A887A; text-align: center; border: 1px dashed var(--rule); }
.quad-cell.is-you { background: var(--accent-soft); color: var(--green-dark); font-size: 21px; }
.quad-cell.label-top { align-items: flex-start; }
.quad-dot { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px #fff; }
.quad-x, .quad-y { position: absolute; font: 700 12px/1 var(--serif); letter-spacing: 1px; text-transform: uppercase; color: #6B6A5C; }
.quad-x { bottom: 0; left: 26px; right: 0; text-align: center; }
.quad-y { left: 0; top: 0; bottom: 26px; writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; }
.quad-scores { display: flex; justify-content: center; gap: 22px; font-size: 15px; color: #6B6A5C; margin: -6px 0 18px; }

.week { list-style: none; margin: 10px 0 18px; padding: 0; }
.week li { display: grid; grid-template-columns: 92px 1fr 40px; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1.5px dashed var(--rule); font-size: 15px; }
.week b { font-weight: 600; color: var(--green-dark); }
.bar { height: 12px; border-radius: 6px; background: var(--note-green); position: relative; }
.bar i { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: var(--green); }
.week .is-leak .bar i { background: var(--accent); }
.week li::after { content: ""; }
.week .is-leak::after { content: "← acá"; font: 700 19px/1 var(--hand); color: var(--accent); white-space: nowrap; }

.recipe { position: relative; margin-top: 22px; padding: 18px; background: #fff; border: 2px dashed var(--accent); border-radius: 8px; }
.recipe h3 { margin-bottom: .2em; }
.recipe-tags { margin: 0 0 .5em; font: 600 12px/1.4 var(--serif); letter-spacing: 1px; text-transform: uppercase; color: var(--accent); }
.recipe .cta { margin-top: 12px; }

.paths { display: grid; gap: 18px; margin: 14px -8px 0; }
.path-pero { margin-top: 10px !important; padding-left: 12px; border-left: 2px solid var(--accent-soft); color: #55554A; font-size: 16px; }
.path-link { display: inline-block; margin-top: 12px; font: 700 21px/1 var(--hand); color: var(--green-dark); text-decoration: none; border-bottom: 2px solid var(--accent-soft); }
.path-featured { box-shadow: 0 0 0 2px var(--green), 0 5px 14px rgba(60, 50, 20, .1); }
.path { position: relative; padding: 20px 18px 16px 58px; background: #fff; box-shadow: 0 5px 14px rgba(60, 50, 20, .1); }
.path .step-n { position: absolute; left: 12px; top: 18px; width: 36px; height: 36px; font-size: 24px; line-height: 32px; border-color: var(--accent); }
.path p { margin: 0; }
.path-featured { background: var(--note-green); }

.r .closing .cta { margin-top: 18px; }
.closing .recipe { text-align: left; }

.demo { margin: 0 auto; max-width: 640px; padding: 10px 20px 0 40px; font: 13px/1.4 var(--serif); color: #6B6A5C; text-align: center; }
.demo select { font: 600 13px var(--serif); color: var(--green-dark); background: var(--paper); border: 1.5px solid var(--green-dark); border-radius: 6px; padding: 4px 8px; }

@media (max-width: 380px) {
  .r-index ol { columns: 1; }
}