/* Jean Paul Santana · estilos de la web · usa las variables de tokens.css */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 3px; }
main:focus { outline: none; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--primary-text); }
a:hover { color: var(--accent-text); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: var(--tracking-display); margin: 0; }
h1 { font-size: var(--size-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--size-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--size-h3); line-height: var(--lh-h3); }
.display { font-size: var(--size-display); line-height: var(--lh-display); }
p { margin: 0; }
.lead { font-size: var(--size-lead); line-height: var(--lh-lead); font-weight: 500; color: var(--muted); }
.muted { color: var(--muted); font-size: var(--size-small); }
.dot { color: var(--accent-text); }
.dot--leaf { color: var(--brote); }
.section--green .dot, .card--green .dot, .cta-band .dot { color: var(--brote); }
.label {
  display: inline-block;
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--primary-text);
}
.label--leaf { color: var(--brote); }
.wrap { width: min(1180px, 100% - 2 * var(--s-4)); margin-inline: auto; }
.wrap--narrow { width: min(820px, 100% - 2 * var(--s-4)); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: var(--on-accent); padding: 8px 12px; border-radius: var(--radius-pill); z-index: 100; }
.skip:focus { left: 8px; }

/* Botones y stickers */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-weight: 700; font-size: 15px; text-decoration: none;
  border: var(--border-w) solid var(--border);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-button); }
.btn--primary:hover { color: var(--on-accent); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--shadow); }
.btn--primary:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--shadow); }
.btn--ghost { background: transparent; color: var(--text); }
.btn--ghost:hover { color: var(--text); background: var(--surface); }
.btn--sm { min-height: 40px; padding: 8px 18px; font-size: 14px; box-shadow: 3px 3px 0 var(--shadow); }
.btn--lg { min-height: 56px; padding: 16px 30px; font-size: 16px; }
.sticker {
  display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; padding: 8px 14px; border-radius: var(--radius-pill);
  transform: rotate(var(--tilt, -3deg)); box-shadow: 3px 3px 0 var(--shadow); white-space: nowrap;
}
.sticker--accent { background: var(--accent); color: var(--on-accent); }
.sticker--green { background: var(--primary); color: var(--on-primary); }
.chip { display: inline-block; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: var(--radius-pill); }
.chip--leaf { background: var(--brote); color: var(--tinta); }
.pill { display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; padding: 10px 16px; border-radius: var(--radius-pill); background: var(--tinta); color: var(--arena); }

/* Navegación */
.nav { position: sticky; top: 0; z-index: 50; background: var(--bg); background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: var(--border-w) solid var(--border); }
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand:hover { color: var(--text); }
.brand__mark { width: 40px; height: 40px; }
.brand__name { font-family: var(--font-display); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: -0.01em; white-space: nowrap; }
.nav__links { display: flex; gap: var(--s-4); }
.nav__links a { text-decoration: none; color: var(--text); font-weight: 600; font-size: 14px; }
.nav__links a:hover { color: var(--accent-text); }
.nav__tools { display: flex; align-items: center; gap: var(--s-2); }
.theme { width: 46px; height: 26px; border-radius: var(--radius-pill); border: var(--border-w) solid var(--border); background: transparent; position: relative; cursor: pointer; padding: 0; }
.theme__knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--text); transition: left .15s ease; }
:root[data-theme="dark"] .theme__knob { left: 22px; background: var(--brote); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme__knob { left: 22px; background: var(--brote); } }
.burger { display: none; width: 44px; height: 44px; border: var(--border-w) solid var(--border); border-radius: var(--radius-chip); background: transparent; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.burger span { display: block; width: 18px; height: 2px; background: var(--text); }

/* Barra lateral de redes */
.social { position: fixed; left: 18px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 22px; z-index: 40; }
.social a { writing-mode: vertical-rl; transform: rotate(180deg); text-decoration: none; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.social a:hover { color: var(--accent-text); }

/* Hero */
.hero { padding: var(--s-7) 0 var(--s-5); position: relative; overflow: hidden; }
.hero__in { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s-6); align-items: center; }
.hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); }
.hero__copy .sticker { margin-left: 4px; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.clients-now { display: flex; flex-direction: column; gap: var(--s-1); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { font-size: 12px; font-weight: 600; padding: 6px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-pill); }
.hero__art { position: relative; display: flex; justify-content: center; }
.hero__art .sticker { position: absolute; right: 4%; bottom: 8%; }
.portrait { width: min(440px, 100%); aspect-ratio: 4 / 5; border-radius: 58% 42% 45% 55% / 52% 38% 62% 48%; overflow: hidden; position: relative; border: var(--border-w) solid var(--border); background: var(--primary); }
.portrait--sm { width: min(380px, 100%); }
.portrait--placeholder .portrait__note { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 14px; text-transform: uppercase; color: var(--arena); line-height: 1.4; }
.portrait--placeholder .portrait__note small { display: block; font-family: var(--font-body); font-weight: 500; font-size: 12px; text-transform: none; opacity: .8; }
.pattern { position: absolute; left: -40px; top: -10px; display: flex; flex-direction: column; }
.pattern span { font-family: var(--font-display); font-weight: 800; font-size: 72px; line-height: .9; letter-spacing: -.03em; text-transform: uppercase; white-space: nowrap; }
.pattern--light span:nth-child(odd) { color: transparent; -webkit-text-stroke: 2px var(--brote); }
.pattern--light span:nth-child(even) { color: var(--brote); opacity: .35; margin-left: 60px; }
.pattern--dark span:nth-child(odd) { color: transparent; -webkit-text-stroke: 2px var(--brote); }
.pattern--dark span:nth-child(even) { color: var(--brote); opacity: .3; margin-left: 80px; }

/* Franja con tallos */
.franja-wrap { margin-top: var(--s-5); display: flex; flex-direction: column; gap: var(--s-1); }
.franja-wrap .label small { font-weight: 500; letter-spacing: 0; text-transform: none; }
.franja { width: 100%; }
.franja canvas { width: 100%; display: block; touch-action: pan-y; }

/* Cosecha */
.cosecha { position: relative; width: 100%; border: var(--border-w) solid var(--border); border-radius: var(--radius-card); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-card); }
.cosecha canvas { width: 100%; display: block; touch-action: pan-y; }
.cosecha__card { position: absolute; width: min(340px, 90%); background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.cosecha__card[hidden] { display: none; }
.cosecha__name { font-family: var(--font-display); font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: -.01em; padding-right: 28px; }
.cosecha__blurb { font-size: 13px; color: var(--muted); }
.cosecha__what { font-size: 13px; color: var(--text); line-height: 1.5; }
.cosecha__how { font-size: 13px; color: var(--muted); line-height: 1.5; }
.cosecha__how:empty { display: none; }
.cosecha__ig { align-self: flex-start; margin-top: 4px; font-size: 13px; font-weight: 700; text-decoration: none; padding: 6px 12px; border-radius: var(--radius-pill); border: 1.5px solid var(--border); color: var(--text); }
.cosecha__ig:hover { background: var(--accent); color: var(--on-accent); border-color: var(--border); }
.cosecha__ig[hidden] { display: none; }
.cosecha__close { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; border: var(--border-w) solid var(--border); background: var(--accent); color: var(--on-accent); font-size: 18px; line-height: 1; cursor: pointer; }
.allclients .label small { font-weight: 500; letter-spacing: 0; text-transform: none; }

/* Efectos de scroll: --v va de 0 (fuera) a 1 (en pantalla) y vuelve a 0 al salir por arriba */
[data-fx] { --v: 0; --p: 0; will-change: transform, opacity; }
[data-fx="up"] { opacity: var(--v); transform: translateY(calc((1 - var(--v)) * 48px)); }
[data-fx="scale"] { opacity: var(--v); transform: scale(calc(0.86 + var(--v) * 0.14)) translateY(calc((1 - var(--v)) * 24px)); }
[data-fx="left"] { opacity: var(--v); transform: translateX(calc((1 - var(--v)) * -56px)); }
[data-fx="right"] { opacity: var(--v); transform: translateX(calc((1 - var(--v)) * 56px)); }
[data-fx="clip"] { clip-path: inset(0 calc((1 - var(--v)) * 100%) 0 0 round 16px); opacity: 1; }
[data-fx="drift"] { transform: translateY(calc((0.5 - var(--p)) * 60px)); }
.fx-done[data-fx] { will-change: auto; }
.hero { --hp: 0; }
.hero__copy { transform: translateY(calc(var(--hp) * -30px)); opacity: calc(1 - var(--hp) * 0.6); }
.hero__art { transform: translateY(calc(var(--hp) * 30px)) scale(calc(1 - var(--hp) * 0.1)); opacity: calc(1 - var(--hp) * 0.5); }
@media (prefers-reduced-motion: reduce) {
  [data-fx], .hero__copy, .hero__art { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Cursor de hoja */
body { cursor: url('../img/cursor-hoja.svg') 3 3, auto; }
input, textarea, [contenteditable] { cursor: text; }
a, button, summary, .btn, .theme, .burger, .faq__item summary { cursor: url('../img/cursor-hoja-punto.svg') 3 3, pointer; }

/* Cifras */
.stats { border-top: var(--border-w) solid var(--border); border-bottom: var(--border-w) solid var(--border); background: var(--surface); }
.stats__in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat { padding: var(--s-4) var(--s-4) var(--s-4) 0; display: flex; flex-direction: column; gap: 4px; }
.stat + .stat { padding-left: var(--s-4); border-left: 1px solid var(--muted); }
.stat strong { font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1.1; letter-spacing: -.03em; color: var(--primary-text); white-space: nowrap; }
.stat--accent strong { color: var(--accent); }
.stat span { font-size: 13px; color: var(--muted); line-height: 1.45; }

/* Secciones */
.section { padding: var(--section-y) 0; }
.section__head { display: flex; flex-direction: column; gap: var(--s-2); max-width: 760px; margin-bottom: var(--s-6); }
.section--green { background: var(--primary); color: var(--arena); }
.section--green .label { color: var(--brote); }
.section--green .lead { color: var(--arena); }
.section--green h2 { color: var(--arena); }
.section--dark { background: var(--tinta); color: var(--arena); }
:root[data-theme="dark"] .section--dark { background: var(--humus); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .section--dark { background: var(--humus); } }
.section--dark .lead, .section--dark p { color: var(--niebla); }
.section--dark h2 { color: var(--arena); }
.grid { display: grid; gap: var(--s-4); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Tarjetas de servicio */
.card { background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius-card); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); box-shadow: var(--shadow-card); }
.card__top { display: flex; align-items: center; justify-content: space-between; }
.card h3 { font-size: 20px; }
.card p { color: var(--muted); font-size: 15px; }
.card--green { background: var(--primary); color: var(--arena); }
.card.card--green p { color: var(--arena); }
.card--river { background: var(--rio); color: var(--arena); }
.card.card--river p { color: var(--niebla); }
.num { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -.04em; color: var(--accent); }
.card--green .num, .card--river .num { color: var(--brote); }
.icon { width: 36px; height: 36px; fill: none; stroke: var(--icon); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card--green .icon, .card--river .icon, .icon--light { stroke: var(--brote); }
.link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; text-decoration: none; margin-top: auto; }
.card--green .link, .card--river .link { color: var(--brote); }
.card--green .link:hover, .card--river .link:hover { color: var(--arena); }

/* Proceso */
.steps .step { display: flex; flex-direction: column; gap: var(--s-2); }
.steps h3 { font-size: 22px; }
.steps p { color: var(--arena); font-size: 15px; }
.formula { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: var(--s-6); padding-top: var(--s-5); border-top: 2px solid rgba(241, 234, 224, .35); }
.formula .op { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--arena); }
.formula .pill { background: var(--tinta); color: var(--arena); }

/* Casos */
.case { background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius-card); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
.case__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; }
.case__logo { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border: 2px dashed var(--muted); border-radius: 8px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.badge { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--radius-pill); border: 1.5px solid var(--border); }
.badge--on { background: var(--brote); color: var(--tinta); border-color: var(--brote); }
.case h3 { font-size: 20px; }
.case p { color: var(--muted); font-size: 15px; }
.case .case__result { font-size: 14px; color: var(--text); }
.case__result em { color: var(--accent-text); font-style: normal; font-weight: 600; }
.allclients { margin-top: var(--s-6); display: flex; flex-direction: column; gap: var(--s-2); }
.chips--all li { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); border-color: var(--muted); }
.chips--all li.on { color: var(--text); border-color: var(--border); }
.chips--all li.on::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.dotkey { display: inline-block; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--muted); vertical-align: middle; }
.dotkey--on { background: var(--primary); border-color: var(--primary); }

/* Sobre mí */
.about { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--s-6); align-items: center; }
.about__copy { display: flex; flex-direction: column; gap: var(--s-3); }
.about__copy h2 { margin-bottom: var(--s-1); }
.values { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.values li { border: 1.5px solid var(--musgo); border-radius: var(--radius-chip); padding: 14px 16px; font-size: 14px; color: var(--niebla); line-height: 1.5; }
.values strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: 13px; text-transform: uppercase; color: var(--brote); margin-bottom: 4px; }

/* Preguntas */
.faq { display: flex; flex-direction: column; gap: var(--s-2); }
.faq__item { background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius-card); padding: 0 22px; }
.faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-family: var(--font-display); font-size: 22px; line-height: 1; color: var(--primary-text); flex-shrink: 0; }
.faq__item[open] summary::after { content: "−"; }
.faq__item[open] { box-shadow: 6px 6px 0 var(--primary); }
.faq__item[open] summary { color: var(--primary-text); }
.faq__item p { padding: 0 0 18px; color: var(--muted); font-size: 15px; }

/* Cierre */
.cta-band { background: var(--primary); color: var(--arena); position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; right: -80px; top: -100px; width: 320px; height: 270px; background: var(--rio); border-radius: 58% 42% 45% 55% / 52% 38% 62% 48%; opacity: .7; }
.cta-band__in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; }
.cta-band h2 { color: var(--arena); margin: var(--s-1) 0; }
.cta-band .lead { color: var(--arena); }

/* Pie */
.footer { border-top: var(--border-w) solid var(--border); background: var(--surface); padding: var(--s-6) 0 var(--s-5); }
.footer__in { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--s-5); }
.footer__brand { display: flex; flex-direction: column; gap: var(--s-1); }
.footer__brand .brand__mark { width: 48px; height: 48px; }
.signature { font-family: var(--font-display); font-weight: 700; font-size: 12px; text-transform: uppercase; color: var(--primary-text); }
.footer__links { display: flex; flex-direction: column; gap: 8px; }
.footer__links a { text-decoration: none; color: var(--text); font-weight: 600; font-size: 14px; }
.footer__links a:hover { color: var(--accent-text); }
.footer__legal { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; font-size: 12px; color: var(--muted); border-top: 1px solid var(--muted); padding-top: var(--s-3); }
.footer__legal a { color: var(--muted); }

/* Botón flotante */
.fab { position: fixed; right: 18px; bottom: 18px; width: 56px; height: 56px; border-radius: 50%; background: var(--accent); border: var(--border-w) solid var(--border); box-shadow: var(--shadow-button); display: flex; align-items: center; justify-content: center; z-index: 45; transition: transform .12s ease, box-shadow .12s ease; }
.fab svg { width: 26px; height: 26px; fill: none; stroke: var(--on-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fab:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--shadow); }

/* Móvil y tableta */
@media (max-width: 1100px) { .social { display: none; } }
@media (max-width: 900px) {
  .hero__in, .about { grid-template-columns: 1fr; }
  .portrait { width: min(320px, 100%); }
  .stats__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat + .stat { border-left: none; padding-left: 0; }
  .stat:nth-child(even) { padding-left: var(--s-4); border-left: 1px solid var(--muted); }
  .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .footer__in { grid-template-columns: 1fr 1fr; }
  .values { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .nav__links { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; background: var(--bg); border-bottom: var(--border-w) solid var(--border); padding: var(--s-2) var(--s-4) var(--s-4); }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: 12px 0; border-bottom: 1px solid var(--muted); font-size: 16px; }
  .burger { display: flex; }
  .nav .btn--sm { display: none; }
  .brand__name { font-size: 11px; white-space: normal; max-width: 130px; line-height: 1.15; }
  .display { font-size: 34px; line-height: 1.02; }
  .hero { padding-top: var(--s-5); }
  .hero__art .sticker { right: 0; }
  .stats__in { grid-template-columns: 1fr; }
  .stat, .stat:nth-child(even) { padding-left: 0; border-left: none; border-bottom: 1px solid var(--muted); }
  .stat:last-child { border-bottom: none; }
  .footer__in { grid-template-columns: 1fr; }
  .cta-band__in { flex-direction: column; align-items: flex-start; }
  .fab { right: 14px; bottom: 14px; }
}

/* ===== Añadidos: páginas por sección, arranque por etapas, arbustos ===== */

/* Enlace activo en la navegación */
.nav__links a[aria-current="page"] { color: var(--accent-text); box-shadow: 0 2px 0 var(--accent); }

/* Logos en tarjetas de casos */
.case__logo img { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--border); object-fit: cover; }
.case__logo:has(img) { padding: 0; border: none; min-height: 0; }

/* Cómo empezamos: etapas de la semilla */
.arranque { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 2px solid rgba(241, 234, 224, .35); display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--s-5); align-items: start; }
.arranque__head { display: flex; flex-direction: column; gap: var(--s-2); }
.arranque__head h3 { font-size: 24px; }
.arranque__head p { color: var(--arena); opacity: .85; font-size: 15px; }
.etapas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.etapas li { position: relative; padding: 14px 0 14px 132px; border-bottom: 1px solid rgba(241, 234, 224, .22); color: var(--arena); font-size: 15px; line-height: 1.55; }
.etapas li:last-child { border-bottom: none; }
.etapas li strong { color: var(--brote); font-weight: 700; }
.etapa { position: absolute; left: 0; top: 15px; width: 116px; display: inline-flex; align-items: flex-start; flex-wrap: wrap; gap: 4px 8px; line-height: 1.25; font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--brote); }
.etapa::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--arcilla); border: 1.5px solid var(--tinta); flex-shrink: 0; }
.etapas li:nth-child(2) .etapa::before { background: #9C4A2C; }
.etapas li:nth-child(4) .etapa::before { background: var(--rio); }
.etapas li:nth-child(5) .etapa::before { background: #5AA878; }
.etapas li:nth-child(6) .etapa::before { background: var(--brote); }
.etapas li:nth-child(7) .etapa::before { background: var(--arena); }

/* Hablemos: sombras de dos arbustos que se mecen con la brisa */
.bush { position: absolute; width: 360px; height: 360px; pointer-events: none; }
.bush svg { width: 100%; height: 100%; fill: var(--tinta); opacity: .34; transform-origin: 50% 100%; animation: brisa 7s ease-in-out infinite; }
.bush--tl { left: -90px; top: -120px; transform: scaleX(-1) rotate(160deg); }
.bush--tl svg { animation-delay: -2.5s; animation-duration: 8.5s; }
.bush--br { right: -80px; bottom: -110px; transform: rotate(-12deg); }
.cta-band::before { opacity: .55; }
@keyframes brisa {
  0%, 100% { transform: rotate(-3deg) skewX(-2deg); }
  40% { transform: rotate(3.5deg) skewX(2.5deg); }
  70% { transform: rotate(1deg) skewX(0deg); }
}
@media (prefers-reduced-motion: reduce) { .bush svg { animation: none; } }

/* Preguntas dentro de una sección verde: la tarjeta vuelve al color de texto normal */
.section--green .faq__item { color: var(--text); }
.section--green .faq__item summary::after, .section--green .faq__item[open] summary { color: var(--primary-text); }
.section--green .label--leaf, .cta-band .label--leaf, .section--dark .label--leaf { color: #D2ECD7; }

/* Cabecera de página interior */
.page-hero { padding: var(--s-7) 0 var(--s-5); }
.page-hero .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.page-hero h1 { max-width: 16ch; }
.page-hero .lead { max-width: 60ch; }
.crumbs { display: flex; gap: 8px; font-size: 13px; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent-text); }

/* Servicios en detalle */
.servicio { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: start; padding: var(--s-6) 0; border-top: var(--border-w) solid var(--border); }
.servicio:first-of-type { border-top: none; }
.servicio__copy { display: flex; flex-direction: column; gap: var(--s-3); }
.servicio__copy h2 { display: flex; align-items: center; gap: 14px; }
.servicio__copy h2 .num { font-size: 18px; }
.servicio__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.servicio__lista li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.servicio__lista li::before { content: ""; flex-shrink: 0; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: var(--brote); border: 1.5px solid var(--border); }
.servicio__aside { display: flex; flex-direction: column; gap: var(--s-3); }
.dato { background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius-card); padding: var(--s-4); display: flex; flex-direction: column; gap: 6px; }
.dato .label { color: var(--muted); }
.dato strong { font-family: var(--font-display); font-weight: 800; font-size: 22px; text-transform: uppercase; letter-spacing: -.02em; }
.dato p { color: var(--muted); font-size: 14px; }
.dato--accent { background: var(--accent); color: var(--tinta); }
.dato--accent .label, .dato--accent p, .dato--accent strong { color: var(--tinta); }

/* Línea de tiempo (Cómo trabajo) */
.linea { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.linea li { background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius-card); padding: var(--s-4); display: flex; flex-direction: column; gap: 8px; }
.linea .when { font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.linea h3 { font-size: 17px; }
.linea p { font-size: 14px; color: var(--muted); }
.necesito { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.necesito li { border: 1.5px solid var(--border); border-radius: var(--radius-chip); padding: 14px 16px; font-size: 14px; line-height: 1.5; }
.necesito strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 12px; text-transform: uppercase; color: var(--primary-text); margin-bottom: 4px; }

/* Portafolio */

/* Contacto */
.contacto { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s-6); align-items: start; }
.vias { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.vias li { background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius-card); padding: var(--s-4); display: flex; flex-direction: column; gap: 4px; }
.vias .label { color: var(--muted); }
.vias li > a { font-family: var(--font-display); font-weight: 700; font-size: 16px; text-decoration: none; color: var(--text); }
.vias li > a:hover { color: var(--accent-text); }
.vias p { font-size: 14px; color: var(--muted); }

/* Sobre mí: recorrido */
.recorrido { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.recorrido li { border: 1.5px solid var(--musgo); border-radius: var(--radius-card); padding: var(--s-4); display: flex; flex-direction: column; gap: 6px; }
.recorrido .when { font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--brote); }
.recorrido h3 { font-size: 16px; color: var(--arena); }
.recorrido p { font-size: 14px; color: var(--niebla); }
.herramientas { display: flex; flex-wrap: wrap; gap: 8px; }
.herramientas span { font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: var(--radius-pill); border: 1.5px solid var(--musgo); color: var(--arena); }

@media (max-width: 900px) {
  .arranque, .servicio, .contacto { grid-template-columns: 1fr; }
  .linea, .recorrido { grid-template-columns: 1fr 1fr; }
  .nav__links { gap: var(--s-3); }
}
@media (max-width: 767px) {
  .etapas li { padding-left: 0; padding-top: 34px; }
  .etapa { top: 12px; width: auto; }
  .linea, .recorrido, .necesito { grid-template-columns: 1fr; }
  .bush { width: 240px; height: 240px; }
  .bush--tl { left: -70px; top: -90px; }
  .bush--br { right: -60px; bottom: -80px; }
}


/* ===== Añadidos v4: inicio, redes con pétalos, asistente, formulario, ventanita de la cosecha ===== */

/* Titular con palabra rotatoria */
.rotor { display: inline-block; position: relative; color: var(--accent-text); transition: opacity .25s ease, transform .25s ease; }
.rotor.is-out { opacity: 0; transform: translateY(.35em); }

/* Inicio: gancho */
.hero__hook { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14px; font-weight: 600; color: var(--muted); }
.hero__hook span::before { content: "✓"; color: var(--primary-text); margin-right: 6px; font-weight: 800; }
.tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.tres a { display: flex; flex-direction: column; gap: 8px; padding: var(--s-4); background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius-card); text-decoration: none; color: var(--text); transition: transform .12s ease, box-shadow .12s ease; }
.tres a:hover { color: var(--text); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--shadow); }
.tres a .num { font-size: 16px; }
.tres a h3 { font-size: 18px; }
.tres a p { font-size: 14px; color: var(--muted); }
.tres a .link { color: var(--primary-text); }
.manifiesto { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s-6); align-items: center; }
.manifiesto__lines { display: flex; flex-direction: column; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.25; text-transform: uppercase; letter-spacing: -.01em; }
.manifiesto__lines span { color: var(--arena); }
.manifiesto__lines span em { font-style: normal; color: var(--brote); }
.manifiesto__lines span.tachado { color: var(--niebla); text-decoration: line-through; text-decoration-color: var(--arcilla); text-decoration-thickness: 3px; }
.marcas-mini { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.marcas-mini a { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; text-decoration: none; color: var(--text); }
.marcas-mini img { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--border); object-fit: cover; background: #fff; }
.marcas-mini .marcas-mini__ini { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--border); background: var(--primary); color: var(--arena); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 11px; }

/* Barra de redes: texto de invitación + pétalos */
.social__cta { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--font-display); font-weight: 800; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 4px; }
.social a { position: relative; transition: color .15s ease; }
.social a[data-net="instagram"]:hover { color: #DD2A7B; }
.social a[data-net="youtube"]:hover { color: #E62117; }
.social a[data-net="linkedin"]:hover { color: #0A66C2; }
.petal { position: fixed; z-index: 39; pointer-events: none; border-radius: 80% 0 80% 0; opacity: 0; animation: petalo var(--dur, 3s) ease-in forwards; will-change: transform, opacity; }
@keyframes petalo {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  10% { opacity: .95; }
  60% { opacity: .85; transform: translate(calc(var(--dx) * .6), calc(var(--dy) * .45)) rotate(calc(var(--rot) * .5)); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); }
}

/* Asistente: botón pequeño junto al de WhatsApp */
.chat { position: fixed; right: 84px; bottom: 22px; z-index: 46; }
.chat__btn { width: 48px; height: 48px; border-radius: 50%; background: var(--surface); border: var(--border-w) solid var(--border); box-shadow: 3px 3px 0 var(--shadow); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: transform .12s ease, box-shadow .12s ease; }
.chat__btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--shadow); }
.chat__btn svg { width: 22px; height: 22px; fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chat__btn .chat__dot { position: absolute; top: -2px; right: -2px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); }
.chat__panel { position: absolute; right: 0; bottom: 60px; width: min(360px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 120px)); background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); display: flex; flex-direction: column; overflow: hidden; }
.chat__panel[hidden] { display: none; }
.chat__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: var(--border-w) solid var(--border); background: var(--primary); color: var(--arena); }
.chat__head img { width: 32px; height: 32px; }
.chat__head strong { font-family: var(--font-display); font-weight: 800; font-size: 12px; text-transform: uppercase; }
.chat__head small { display: block; font-size: 11px; opacity: .85; }
.chat__close { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--arena); background: transparent; color: var(--arena); font-size: 18px; line-height: 1; cursor: pointer; }
.chat__log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-height: 220px; }
.chat__msg { max-width: 88%; padding: 10px 12px; border-radius: 14px; font-size: 14px; line-height: 1.45; display: flex; flex-direction: column; gap: 8px; }
.chat__msg--bot { align-self: flex-start; background: var(--bg); border: 1.5px solid var(--border); border-bottom-left-radius: 4px; }
.chat__msg--me { align-self: flex-end; background: var(--primary); color: var(--arena); border-bottom-right-radius: 4px; }
.chat__msg p { margin: 0; }
.chat__link, .chat__wa { align-self: flex-start; font-size: 13px; font-weight: 700; text-decoration: none; padding: 6px 12px; border-radius: var(--radius-pill); border: 1.5px solid var(--border); color: var(--text); }
.chat__wa { background: var(--accent); color: var(--tinta); }
.chat__link:hover { color: var(--accent-text); }
.chat__wa:hover { color: var(--tinta); box-shadow: 2px 2px 0 var(--shadow); }
.chat__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chat__chip { font: inherit; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: var(--radius-pill); border: 1.5px solid var(--border); background: transparent; color: var(--text); cursor: pointer; text-align: left; }
.chat__chip:hover { background: var(--primary); color: var(--on-primary); }
.chat__form { display: flex; gap: 8px; padding: 10px; border-top: var(--border-w) solid var(--border); }
.chat__input { flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 10px 12px; border-radius: var(--radius-pill); border: 1.5px solid var(--border); background: var(--bg); color: var(--text); }
.chat__send { width: 42px; height: 42px; border-radius: 50%; border: var(--border-w) solid var(--border); background: var(--accent); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.chat__send svg { width: 18px; height: 18px; fill: none; stroke: var(--tinta); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.chat__note { font-size: 11px; color: var(--muted); padding: 0 12px 10px; }

/* Formulario de contacto */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius-card); padding: var(--s-5); box-shadow: var(--shadow-card); }
.form .campo { display: flex; flex-direction: column; gap: 6px; }
.form .campo--full { grid-column: 1 / -1; }
.form label { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--primary-text); }
.form label small { font-family: var(--font-body); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.form input, .form select, .form textarea { font: inherit; font-size: 15px; padding: 12px 14px; border-radius: var(--radius-chip); border: 1.5px solid var(--border); background: var(--bg); color: var(--text); width: 100%; }
.form textarea { min-height: 130px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 3px solid var(--accent-text); outline-offset: 2px; }
.form .consent { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--muted); }
.form .consent input { width: auto; margin-top: 3px; }
.form .form__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.form .form__ok { grid-column: 1 / -1; padding: 12px 14px; border-radius: var(--radius-chip); background: var(--brote); color: var(--tinta); font-size: 14px; }
.form .form__ok[hidden] { display: none; }

/* Ventanita de contenido en la ficha de la cosecha */
.cosecha__card { width: min(360px, 92%); }
.cosecha__media { position: relative; margin: 4px 0 6px; border-radius: 12px; overflow: hidden; border: 1.5px solid var(--border); background: var(--bg); aspect-ratio: 16 / 10; }
.cosecha__media[hidden] { display: none; }
.cosecha__track { position: absolute; inset: 0; }
.cosecha__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .5s ease; display: flex; align-items: center; justify-content: center; }
.cosecha__slide.is-on { opacity: 1; }
.cosecha__slide img { width: 100%; height: 100%; object-fit: cover; }
.cosecha__slide--logo img { width: 46%; height: auto; border-radius: 50%; border: 2px solid var(--border); background: #fff; object-fit: contain; }
.cosecha__slide figcaption { position: absolute; left: 8px; bottom: 8px; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: var(--radius-pill); background: var(--tinta); color: var(--arena); }
.cosecha__dots { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 4px; }
.cosecha__dots button { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--tinta); background: rgba(241,234,224,.7); padding: 0; cursor: pointer; }
.cosecha__dots button.is-on { background: var(--arcilla); }
.cosecha__mediatag { position: absolute; left: 8px; top: 8px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--radius-pill); background: var(--brote); color: var(--tinta); }

@media (max-width: 900px) { .tres, .manifiesto { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
  .form { grid-template-columns: 1fr; padding: var(--s-4); }
  .chat { right: 78px; bottom: 18px; }
  .chat__btn { width: 44px; height: 44px; }
  .manifiesto__lines { font-size: 17px; }
}


/* ajustes v4 */
.chat { z-index: 55; }
.cosecha__card { max-height: calc(100% - 16px); overflow-y: auto; }
.form label.consent { font-family: var(--font-body); font-weight: 500; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--muted); }

/* ===== v5: Brote (mascota), video de presentación, métricas de pauta ===== */

/* Brote */
.brote { position: fixed; left: 0; top: 0; width: 64px; height: 70px; z-index: 44; cursor: pointer; will-change: transform; user-select: none; -webkit-user-select: none; }
.brote svg { width: 64px; height: 70px; overflow: visible; filter: drop-shadow(2px 3px 0 rgba(21,32,31,.35)); }
.brote.is-flip svg { transform: scaleX(-1); }
.brote .brote__body { transform-origin: 60px 120px; animation: brote-idle 2.6s ease-in-out infinite; }
.brote.is-walking .brote__body { animation: brote-walk .42s ease-in-out infinite; }
.brote.is-walking .brote__foot { animation: brote-step .42s ease-in-out infinite; }
.brote.is-walking .brote__foot--r { animation-delay: -.21s; }
.brote.is-jump .brote__body { animation: brote-jump .7s ease-out; }
.brote .brote__mouth { transform-box: fill-box; transform-origin: 50% 0; }
.brote.is-talking .brote__mouth { animation: brote-talk .18s ease-in-out 4; }
.brote .brote__leafL { transform-origin: 42px 34px; animation: brote-leaf 3s ease-in-out infinite reverse; }
.brote.etapa-0 .brote__leafL { transform: scale(.7); animation: none; }
.brote .brote__eyes { animation: brote-blink 4.5s infinite; transform-origin: 60px 58px; }
.brote .brote__leaf { transform-origin: 78px 34px; animation: brote-leaf 3s ease-in-out infinite; }
.brote.etapa-0 .brote__leaf { transform: scale(.7); animation: none; }
.brote.etapa-2 .brote__leaf2, .brote.etapa-3 .brote__leaf2 { opacity: 1; }
.brote.etapa-3 .brote__fruit { opacity: 1; }
@keyframes brote-idle { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.965) scaleX(1.02); } }
@keyframes brote-walk { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-4px) rotate(3deg); } }
@keyframes brote-step { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
@keyframes brote-jump { 0% { transform: translateY(0); } 35% { transform: translateY(-26px) scaleY(1.06); } 70% { transform: translateY(0) scaleY(.92); } 100% { transform: translateY(0); } }
@keyframes brote-talk { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.55); } }
@keyframes brote-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes brote-leaf { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(8deg); } }
.brote__bubble { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -8px); width: max-content; max-width: 220px; background: var(--surface); color: var(--text); border: var(--border-w) solid var(--border); border-radius: 14px; padding: 8px 12px; font-size: 13px; font-weight: 600; line-height: 1.35; box-shadow: 3px 3px 0 var(--shadow); text-align: center; }
.brote__bubble::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--border); }
.brote.is-flip .brote__bubble { transform: translate(-50%, -8px); }
.brote__hud { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -52px); display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; width: 220px; background: var(--surface); border: var(--border-w) solid var(--border); border-radius: 14px; padding: 10px; box-shadow: 3px 3px 0 var(--shadow); }
.brote__hud[hidden], .brote__bubble[hidden] { display: none; }
.brote__state { width: 100%; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--primary-text); }
.brote__hud button { font: inherit; font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: var(--radius-pill); border: 1.5px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer; }
.brote__hud button:hover { background: var(--accent); color: var(--tinta); }
@media (max-width: 767px) { .brote { width: 52px; height: 58px; } .brote svg { width: 52px; height: 58px; } }
@media (prefers-reduced-motion: reduce) { .brote .brote__body, .brote .brote__eyes, .brote .brote__leaf, .brote .brote__foot { animation: none !important; } }
.chat__head .chat__avatar { width: 34px; height: 36px; }

/* Retrato real y video de presentación */
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait video { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; border-radius: 50%; background: var(--accent); border: var(--border-w) solid var(--border); box-shadow: var(--shadow-button); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.portrait__play svg { width: 28px; height: 28px; fill: var(--tinta); margin-left: 4px; }
.portrait__play:hover { transform: translate(-50%, -50%) scale(1.06); }
.portrait__play[hidden], .portrait video[hidden] { display: none; }
.portrait__caption { position: absolute; left: 12px; bottom: 12px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--radius-pill); background: var(--tinta); color: var(--arena); }

/* Métricas de pauta y estrategia */
.metricas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-5); }
.metrica { background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius-card); padding: var(--s-4); display: flex; flex-direction: column; gap: 12px; }
.metrica--wide { grid-column: 1 / -1; }
.metrica h3 { font-size: 16px; }
.metrica p { font-size: 14px; color: var(--muted); }
.metrica .fuente { font-size: 12px; color: var(--muted); margin-top: auto; }
.bars { display: flex; flex-direction: column; gap: 12px; }
.bar { display: grid; grid-template-columns: 150px 1fr 80px; align-items: center; gap: 12px; font-size: 13px; }
.bar__label { font-weight: 600; }
.bar__track { height: 22px; border-radius: 6px; background: color-mix(in srgb, var(--muted) 22%, transparent); overflow: hidden; border: 1.5px solid var(--border); }
.bar__fill { height: 100%; width: 0; border-radius: 4px; background: var(--musgo); transition: width 1.3s cubic-bezier(.2,.8,.2,1); }
.bar__fill--on { background: var(--primary); }
.bar__fill--accent { background: var(--accent); }
.fx-done .bar__fill { width: var(--w); }
.bar__value { font-family: var(--font-display); font-weight: 800; font-size: 14px; text-align: right; }
.bar__value--accent { color: var(--accent-text); }
.dona { display: grid; grid-template-columns: 150px 1fr; gap: var(--s-3); align-items: center; }
.dona svg { width: 150px; height: 150px; transform: rotate(-90deg); }
.dona circle { fill: none; stroke-width: 26; stroke-dasharray: var(--a) 1000; stroke-dashoffset: 0; transition: stroke-dasharray 1.4s cubic-bezier(.2,.8,.2,1); }
.metrica:not(.fx-done) .dona circle { stroke-dasharray: 0 1000; }
.dona__center { position: absolute; }
.leyenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.leyenda li { display: flex; align-items: center; gap: 8px; }
.leyenda i { width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid var(--border); flex-shrink: 0; }
.leyenda strong { margin-left: auto; font-family: var(--font-display); font-weight: 800; font-size: 13px; }
.rama { width: 100%; height: auto; }
.rama path, .rama line { stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 1.2s ease-out; }
.rama .rama__no { stroke: var(--muted); stroke-dasharray: 6 6; }
.fx-done .rama path, .fx-done .rama line { stroke-dashoffset: 0; }
.fx-done .rama .r2 { transition-delay: .5s; } .fx-done .rama .r3 { transition-delay: 1s; } .fx-done .rama .r4 { transition-delay: 1.5s; }
.rama circle { transform-origin: center; transform-box: fill-box; transform: scale(0); transition: transform .4s cubic-bezier(.3,1.5,.5,1); }
.fx-done .rama circle { transform: scale(1); }
.fx-done .rama .n1 { transition-delay: .4s; } .fx-done .rama .n2 { transition-delay: .9s; } .fx-done .rama .n3 { transition-delay: 1.4s; } .fx-done .rama .n4 { transition-delay: 1.9s; }
.rama text { font-family: var(--font-body); font-size: 11px; font-weight: 700; fill: var(--text); }
.rama text.tenue { fill: var(--muted); font-weight: 500; }
.rama .fruto { fill: var(--accent); stroke: var(--border); stroke-width: 1.5; }
.rama .nodo { fill: var(--primary); stroke: var(--border); stroke-width: 1.5; }
.rama .nodo--no { fill: var(--surface); stroke: var(--muted); }
@media (max-width: 767px) { .metricas { grid-template-columns: 1fr; } .bar { grid-template-columns: 1fr; gap: 4px; } .bar__value { text-align: left; } .dona { grid-template-columns: 1fr; justify-items: center; } }


/* ajustes v5 */
.nav__links a { white-space: nowrap; }
@media (max-width: 1080px) {  /* hasta 1080 px el menú completo no cabe junto al nombre */
  .nav__links { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; background: var(--bg); border-bottom: var(--border-w) solid var(--border); padding: var(--s-2) var(--s-4) var(--s-4); }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: 12px 0; border-bottom: 1px solid var(--muted); font-size: 16px; }
  .burger { display: flex; }
}
.bar { grid-template-columns: 150px 1fr 104px; }

/* ===== v7: Brote por toda la página ===== */
.brote { position: absolute; left: 0; top: 0; width: 64px; height: 70px; z-index: 44; cursor: pointer; will-change: transform; user-select: none; -webkit-user-select: none; transition: opacity .35s ease; }
.brote.is-fixed { position: fixed; }
.brote svg { width: 64px; height: 70px; overflow: visible; filter: drop-shadow(2px 3px 0 rgba(21,32,31,.35)); transform-origin: 50% 100%; }
.brote.is-flip svg { transform: scaleX(-1); }
.brote.is-poof { opacity: 0; }
.brote.is-poof svg { transform: scale(.2) rotate(30deg); transition: transform .35s ease-in; }
.brote.is-pop svg { animation: brote-pop .4s cubic-bezier(.3,1.6,.5,1); }
@keyframes brote-pop { 0% { transform: scale(.2); } 100% { transform: scale(1); } }
.brote.is-flip.is-pop svg { animation: brote-pop-flip .4s cubic-bezier(.3,1.6,.5,1); }
@keyframes brote-pop-flip { 0% { transform: scaleX(-.2) scaleY(.2); } 100% { transform: scaleX(-1) scaleY(1); } }

/* partes */
.brote .brote__body { transform-origin: 60px 122px; animation: brote-idle 2.6s ease-in-out infinite; }
.brote .brote__sprout { transform-origin: 60px 32px; animation: brote-leaf 3s ease-in-out infinite; }
.brote .brote__leaf, .brote .brote__leafL, .brote .brote__leaf2 { transform-box: fill-box; transform-origin: 0% 100%; }
.brote.etapa-0 .brote__leaf, .brote.etapa-0 .brote__leafL { transform: scale(.7); }
.brote.etapa-2 .brote__leaf2, .brote.etapa-3 .brote__leaf2 { opacity: 1; }
.brote.etapa-3 .brote__fruit { opacity: 1; }
.brote .brote__limbs path { transform-box: fill-box; transform-origin: 50% 0; }
.brote .brote__eyes { transform-box: fill-box; transform-origin: 50% 50%; animation: brote-blink 4.5s infinite; }
.brote .brote__mouth { transform-box: fill-box; transform-origin: 50% 0; }
.brote.is-talking .brote__mouth--smile, .brote.is-talking .brote__mouth--open { animation: brote-talk .18s ease-in-out 4; }

/* expresiones */
.brote.exp-scared .brote__mouth--smile, .brote.exp-angry .brote__mouth--smile, .brote.exp-dizzy .brote__mouth--smile, .brote.exp-sleep .brote__mouth--smile { opacity: 0; }
.brote.exp-scared .brote__mouth--open { opacity: 1; }
.brote.exp-scared .brote__pupil { r: 2.6; }
.brote.exp-scared .brote__brows { opacity: 1; }
.brote.exp-scared .brote__browL { d: path("M38 60 L52 58"); } .brote.exp-scared .brote__browR { d: path("M82 60 L68 58"); }
.brote.exp-angry .brote__brows { opacity: 1; }
.brote.exp-angry .brote__mouth--frown { opacity: 1; }
.brote.exp-angry .brote__pupil { r: 4; }
.brote.exp-dizzy .brote__eyes { opacity: 0; animation: none; }
.brote.exp-dizzy .brote__eyesX { opacity: 1; }
.brote.exp-dizzy .brote__mouth--wave { opacity: 1; }
.brote.exp-dizzy .brote__stars, .brote.exp-dizzy .brote__stars2 { opacity: 1; animation: brote-star 1.2s ease-in-out infinite; }
.brote.exp-dizzy .brote__stars2 { animation-delay: -.6s; }
.brote.exp-dizzy svg { animation: brote-wobble 1.6s ease-in-out infinite; }
.brote.exp-sleep .brote__eyes { opacity: 0; animation: none; }
.brote.exp-sleep .brote__eyesZ { opacity: 1; }
.brote.exp-sleep .brote__zz, .brote.exp-sleep .brote__zz2 { opacity: 1; animation: brote-zz 2.4s ease-in-out infinite; }
.brote.exp-sleep .brote__zz2 { animation-delay: -1.2s; }
.brote.exp-sleep .brote__body { animation-duration: 4.5s; }

/* posturas */
.brote.is-walking .brote__legL { animation: brote-step .42s ease-in-out infinite; }
.brote.is-walking .brote__legR { animation: brote-step .42s ease-in-out infinite; animation-delay: -.21s; }
.brote.is-walking .brote__body { animation: brote-walk .42s ease-in-out infinite; }
.brote.is-running .brote__legL, .brote.is-running .brote__legR { animation: brote-step .22s ease-in-out infinite; }
.brote.is-running .brote__legR { animation-delay: -.11s; }
.brote.is-running .brote__armL, .brote.is-running .brote__armR { animation: brote-step .22s ease-in-out infinite reverse; }
.brote.is-running .brote__body { animation: brote-walk .22s ease-in-out infinite; }
.brote.is-hanging svg { transform-origin: 50% 0; animation: brote-swing 2.2s ease-in-out infinite; }
.brote.is-hanging .brote__armL { d: path("M22 86 C10 78 8 60 16 40"); }
.brote.is-hanging .brote__armR { d: path("M98 86 C110 78 112 60 104 40"); }
.brote.is-hanging .brote__legL, .brote.is-hanging .brote__legR { animation: brote-dangle 1.1s ease-in-out infinite; }
.brote.is-hanging .brote__legR { animation-delay: -.55s; }
.brote.is-punching .brote__armR { animation: brote-punch .65s ease-in-out infinite; }
.brote.is-punching .brote__body { animation: brote-walk .65s ease-in-out infinite; }
.brote.is-sitting .brote__legL { d: path("M46 118 L36 124"); } .brote.is-sitting .brote__legR { d: path("M74 118 L84 124"); }
.brote.is-waving .brote__armR { animation: brote-wave .5s ease-in-out infinite alternate; }
.brote.is-jump .brote__body { animation: brote-jump .7s ease-out; }

@keyframes brote-idle { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.965) scaleX(1.02); } }
@keyframes brote-walk { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-4px) rotate(3deg); } }
@keyframes brote-step { 0%, 100% { transform: rotate(-22deg); } 50% { transform: rotate(22deg); } }
@keyframes brote-dangle { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }
@keyframes brote-swing { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes brote-punch { 0%, 100% { transform: rotate(0deg); } 40% { transform: rotate(-95deg) translateY(-10px); } 55% { transform: rotate(-110deg) translateY(-14px); } }
@keyframes brote-wave { 0% { transform: rotate(-120deg); } 100% { transform: rotate(-160deg); } }
@keyframes brote-jump { 0% { transform: translateY(0); } 35% { transform: translateY(-26px) scaleY(1.06); } 70% { transform: translateY(0) scaleY(.92); } 100% { transform: translateY(0); } }
@keyframes brote-talk { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.55); } }
@keyframes brote-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes brote-leaf { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(6deg); } }
@keyframes brote-star { 0%, 100% { transform: translateY(0) scale(1); opacity: .6; } 50% { transform: translateY(-4px) scale(1.3); opacity: 1; } }
@keyframes brote-zz { 0% { transform: translate(0, 0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(8px, -14px); opacity: 0; } }
@keyframes brote-wobble { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.brote.is-flip.exp-dizzy svg { animation: none; }
@media (max-width: 767px) { .brote { width: 52px; height: 58px; } .brote svg { width: 52px; height: 58px; } }
@media (prefers-reduced-motion: reduce) { .brote svg, .brote .brote__body, .brote .brote__eyes, .brote .brote__sprout, .brote .brote__limbs path { animation: none !important; } }


/* ===== v8: Brote, la rana (rig articulado: brazos, piernas, párpados, boca, lágrima) ===== */
.brote { width: 84px; height: 84px; }
.brote svg { width: 84px; height: 84px; overflow: visible; filter: drop-shadow(2px 3px 0 rgba(21,32,31,.32)); transform-origin: 50% 100%; }
.brote .fr { transform-box: fill-box; }
.brote .fr-body { transform-origin: 50% 100%; animation: fr-breath 2.8s ease-in-out infinite; }
.brote .fr-armL, .brote .fr-armR, .brote .fr-legL, .brote .fr-legR { transition: transform .45s cubic-bezier(.3,1.3,.5,1); }
.brote .fr-armL { transform-origin: 90% 10%; } .brote .fr-armR { transform-origin: 10% 10%; }
.brote .fr-legL { transform-origin: 60% 0%; } .brote .fr-legR { transform-origin: 40% 0%; }
.brote .fr-lidL, .brote .fr-lidR { transform-origin: 50% 0%; transform: scaleY(0); transition: transform .25s ease; }
.brote .fr-lidsBottomL, .brote .fr-lidsBottomR { transform-origin: 50% 100%; transform: scaleY(0); transition: transform .25s ease; }
.brote .fr-tear, .brote .fr-tear2, .brote .fr-brows, .brote .fr-sweat, .brote .fr-zz, .brote .fr-zz2, .brote .fr-stars { opacity: 0; transition: opacity .3s ease; }
.brote .fr-mouth { transition: opacity .2s ease; }
.brote .fr-mouth--frown, .brote .fr-mouth--open, .brote .fr-mouth--flat, .brote .fr-mouth--wave { opacity: 0; }
.brote .fr-pupilL, .brote .fr-pupilR { transition: transform .25s ease; transform-origin: 50% 50%; }
.brote .fr-sprout { transform-origin: 50% 100%; animation: fr-sway 3s ease-in-out infinite; }
.brote.etapa-0 .fr-sprout { transform: scale(0); animation: none; }
.brote.etapa-1 .fr-sprout .fr-leaf2, .brote.etapa-1 .fr-sprout .fr-fruit { opacity: 0; }
.brote.etapa-2 .fr-sprout .fr-fruit { opacity: 0; }
.brote.is-poof { opacity: 0; }
.brote.is-poof svg { transform: scale(.2) rotate(30deg); transition: transform .35s ease-in; }
.brote.is-flip.is-poof svg { transform: scaleX(-.2) scaleY(.2) rotate(30deg); }

/* parpadeo natural */
.brote.exp-happy .fr-lidL, .brote.exp-happy .fr-lidR { animation: fr-blink 5s infinite; }

/* expresiones */
.brote.exp-happy .fr-mouth--smile { opacity: 1; }
.brote.exp-content .fr-mouth--smile { opacity: 1; }
.brote.exp-content .fr-lidL, .brote.exp-content .fr-lidR { transform: scaleY(.55); }
.brote.exp-cry .fr-mouth--smile, .brote.exp-sad .fr-mouth--smile, .brote.exp-angry .fr-mouth--smile, .brote.exp-scared .fr-mouth--smile, .brote.exp-sleep .fr-mouth--smile, .brote.exp-dizzy .fr-mouth--smile { opacity: 0; }
.brote.exp-cry .fr-mouth--frown, .brote.exp-sad .fr-mouth--frown, .brote.exp-angry .fr-mouth--frown { opacity: 1; }
.brote.exp-cry .fr-lidL, .brote.exp-cry .fr-lidR { transform: scaleY(.85); }
.brote.exp-cry .fr-tear, .brote.exp-cry .fr-tear2 { opacity: 1; animation: fr-tear 1.4s ease-in infinite; }
.brote.exp-cry .fr-tear2 { animation-delay: -.7s; }
.brote.exp-sad .fr-lidL, .brote.exp-sad .fr-lidR { transform: scaleY(.5); }
.brote.exp-sad .fr-tear { opacity: 1; }
.brote.exp-angry .fr-brows { opacity: 1; }
.brote.exp-angry .fr-lidL, .brote.exp-angry .fr-lidR { transform: scaleY(.4); }
.brote.exp-scared .fr-mouth--open { opacity: 1; }
.brote.exp-scared .fr-pupilL, .brote.exp-scared .fr-pupilR { transform: scale(.45); }
.brote.exp-scared .fr-sweat { opacity: 1; animation: fr-tear 1.2s ease-in infinite; }
.brote.exp-sleep .fr-lidL, .brote.exp-sleep .fr-lidR { transform: scaleY(1); }
.brote.exp-sleep .fr-mouth--flat { opacity: 1; }
.brote.exp-sleep .fr-zz, .brote.exp-sleep .fr-zz2 { opacity: 1; animation: fr-zz 2.4s ease-in-out infinite; }
.brote.exp-sleep .fr-zz2 { animation-delay: -1.2s; }
.brote.exp-dizzy .fr-mouth--wave { opacity: 1; }
.brote.exp-dizzy .fr-pupilL, .brote.exp-dizzy .fr-pupilR { animation: fr-spin 1.2s linear infinite; }
.brote.exp-dizzy .fr-stars { opacity: 1; animation: fr-star 1.2s ease-in-out infinite; }
.brote.is-talking .fr-mouth--smile, .brote.is-talking .fr-mouth--frown { animation: fr-talk .18s ease-in-out 4; }

/* poses */
.brote.pose-sit .fr-legL { transform: rotate(-70deg) translate(-4px, 2px); } .brote.pose-sit .fr-legR { transform: rotate(70deg) translate(4px, 2px); }
.brote.pose-sit .fr-armL { transform: rotate(-20deg); } .brote.pose-sit .fr-armR { transform: rotate(20deg); }
.brote.pose-sit .fr-body { transform: scaleY(.94) translateY(4px); animation: none; }
.brote.pose-hang .fr-armL { transform: rotate(-165deg); } .brote.pose-hang .fr-armR { transform: rotate(165deg); }
.brote.pose-hang .fr-legL, .brote.pose-hang .fr-legR { animation: fr-dangle 1.1s ease-in-out infinite; }
.brote.pose-hang .fr-legR { animation-delay: -.55s; }
.brote.pose-hang svg { transform-origin: 50% 0; animation: fr-swing 2.2s ease-in-out infinite; }
.brote.pose-cheer .fr-armL { transform: rotate(-150deg); } .brote.pose-cheer .fr-armR { transform: rotate(150deg); }
.brote.pose-cheer .fr-body { animation: fr-hop .6s ease-in-out infinite; }
.brote.pose-why .fr-armL { transform: rotate(-120deg); } .brote.pose-why .fr-armR { transform: rotate(60deg); }
.brote.pose-why .fr-body { transform: rotate(-8deg); animation: none; }
.brote.pose-angry .fr-armL { transform: rotate(35deg); } .brote.pose-angry .fr-armR { transform: rotate(-35deg); }
.brote.pose-angry .fr-body { animation: fr-shake .35s ease-in-out infinite; }
.brote.pose-punch .fr-armR { animation: fr-punch .65s ease-in-out infinite; }
.brote.pose-punch .fr-armL { transform: rotate(30deg); }
.brote.pose-punch .fr-body { animation: fr-lean .65s ease-in-out infinite; }
.brote.pose-yoga .fr-legR { transform: rotate(-150deg); } .brote.pose-yoga .fr-armL { transform: rotate(-95deg); } .brote.pose-yoga .fr-armR { transform: rotate(95deg); }
.brote.pose-yoga .fr-body { transform: rotate(6deg); animation: fr-breath 4s ease-in-out infinite; }
.brote.pose-flop svg { transform: rotate(-82deg) translate(-10px, 6px); }
.brote.is-flip.pose-flop svg { transform: scaleX(-1) rotate(-82deg) translate(-10px, 6px); }
.brote.pose-flop .fr-armL { transform: rotate(-100deg); } .brote.pose-flop .fr-armR { transform: rotate(100deg); }
.brote.pose-flop .fr-legL { transform: rotate(-30deg); } .brote.pose-flop .fr-legR { transform: rotate(30deg); }
.brote.pose-flop .fr-body { animation: none; }
.brote.pose-sleep .fr-body { transform: scaleY(.88) translateY(6px); animation: fr-breath 4.5s ease-in-out infinite; }
.brote.pose-sleep .fr-legL { transform: rotate(-80deg); } .brote.pose-sleep .fr-legR { transform: rotate(80deg); }
.brote.pose-sleep .fr-armL { transform: rotate(-30deg); } .brote.pose-sleep .fr-armR { transform: rotate(30deg); }
.brote.pose-run .fr-legL { animation: fr-step .22s ease-in-out infinite; } .brote.pose-run .fr-legR { animation: fr-step .22s ease-in-out infinite; animation-delay: -.11s; }
.brote.pose-run .fr-armL { animation: fr-step .22s ease-in-out infinite reverse; } .brote.pose-run .fr-armR { animation: fr-step .22s ease-in-out infinite; }
.brote.pose-run .fr-body { animation: fr-lean .22s ease-in-out infinite; }
.brote.pose-wave .fr-armR { animation: fr-wave .5s ease-in-out infinite alternate; }
.brote.pose-scared .fr-armL { transform: rotate(-140deg); } .brote.pose-scared .fr-armR { transform: rotate(140deg); }
.brote.pose-scared .fr-body { animation: fr-shake .12s ease-in-out infinite; }
.brote.pose-facepalm .fr-armR { transform: rotate(-150deg) translate(6px, 0); }
.brote.pose-facepalm .fr-body { transform: rotate(4deg); animation: none; }
.brote.is-walking .fr-legL { animation: fr-step .42s ease-in-out infinite; } .brote.is-walking .fr-legR { animation: fr-step .42s ease-in-out infinite; animation-delay: -.21s; }
.brote.is-walking .fr-armL { animation: fr-step .42s ease-in-out infinite reverse; } .brote.is-walking .fr-armR { animation: fr-step .42s ease-in-out infinite; }
.brote.is-walking .fr-body { animation: fr-walk .42s ease-in-out infinite; }
.brote.is-jump .fr-body { animation: fr-jump .7s ease-out; }
.brote.is-pop svg { animation: fr-pop .4s cubic-bezier(.3,1.6,.5,1); }
.brote.is-flip.is-pop svg { animation: fr-pop-flip .4s cubic-bezier(.3,1.6,.5,1); }

@keyframes fr-breath { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.97) scaleX(1.015); } }
@keyframes fr-blink { 0%, 93%, 100% { transform: scaleY(0); } 96% { transform: scaleY(1); } }
@keyframes fr-tear { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }
@keyframes fr-zz { 0% { transform: translate(0, 0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(8px, -14px); opacity: 0; } }
@keyframes fr-spin { to { transform: rotate(360deg); } }
@keyframes fr-star { 0%, 100% { transform: translateY(0) scale(1); opacity: .6; } 50% { transform: translateY(-4px) scale(1.3); opacity: 1; } }
@keyframes fr-talk { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.6) translateY(1px); } }
@keyframes fr-dangle { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }
@keyframes fr-swing { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes fr-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px) scaleY(1.04); } }
@keyframes fr-shake { 0%, 100% { transform: translateX(-1.5px); } 50% { transform: translateX(1.5px); } }
@keyframes fr-lean { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-3px); } }
@keyframes fr-punch { 0%, 100% { transform: rotate(0deg); } 40% { transform: rotate(-95deg) translate(0, -6px); } 55% { transform: rotate(-110deg) translate(0, -8px); } }
@keyframes fr-step { 0%, 100% { transform: rotate(-24deg); } 50% { transform: rotate(24deg); } }
@keyframes fr-wave { 0% { transform: rotate(120deg); } 100% { transform: rotate(165deg); } }
@keyframes fr-walk { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-3px) rotate(2deg); } }
@keyframes fr-jump { 0% { transform: translateY(0); } 35% { transform: translateY(-26px) scaleY(1.06); } 70% { transform: translateY(0) scaleY(.92); } 100% { transform: translateY(0); } }
@keyframes fr-pop { 0% { transform: scale(.2); } 100% { transform: scale(1); } }
@keyframes fr-pop-flip { 0% { transform: scaleX(-.2) scaleY(.2); } 100% { transform: scaleX(-1) scaleY(1); } }
@keyframes fr-sway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(6deg); } }
.chat__head .chat__avatar { width: 40px; height: 40px; overflow: visible; }
@media (max-width: 767px) { .brote { width: 66px; height: 66px; } .brote svg { width: 66px; height: 66px; } }
@media (prefers-reduced-motion: reduce) { .brote svg, .brote .fr, .brote .fr-body { animation: none !important; } }


/* ===== v9: Brote estático (imágenes por pose), aparición suave, ficha "en obra" ===== */
.brote { width: 96px; height: 96px; transition: opacity .42s ease; }
.brote.is-poof { opacity: 0; }
.brote.is-poof svg, .brote.is-pop svg, .brote.is-flip.is-poof svg, .brote.is-flip.is-pop svg { transform: none; transition: none; animation: none; }
.brote svg, .brote .fr, .brote .fr-body, .brote .fr-armL, .brote .fr-armR, .brote .fr-legL, .brote .fr-legR, .brote .fr-lidL, .brote .fr-lidR, .brote .fr-sprout, .brote .fr-pupilL, .brote .fr-pupilR { animation: none !important; transition: none !important; }
.brote.is-flip svg { transform: scaleX(-1); }
.brote__img { display: block; width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(2px 3px 0 rgba(21,32,31,.28)); }
.brote__img[hidden] { display: none; }
.brote.is-flip .brote__img { transform: scaleX(-1); }
.brote--img svg { display: none; }
.brote.brote--img .brote__bubble { transform: translate(-50%, -4px); }
@media (max-width: 767px) { .brote, .brote__img { width: 72px; height: 72px; } }

.cosecha__estado { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--brote); color: var(--tinta); }
.cosecha__estado svg { width: 14px; height: 14px; fill: none; stroke: var(--tinta); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cosecha__estado[hidden] { display: none; }


/* retrato real: sin patrón ni nota encima */
.portrait:not(.portrait--placeholder) .pattern, .portrait:not(.portrait--placeholder) .portrait__note { display: none; }

/* Brote, la lechuza: se mueve volando (coordenadas de página); las acciones sobre botones fijos usan .is-fixed */
.brote { position: absolute !important; width: 64px; height: 64px; }
.brote.is-fixed { position: fixed !important; }
.brote__img { width: 64px; height: 64px; }
.brote.pose-fly1 .brote__img, .brote.pose-fly2 .brote__img { transition: transform .12s ease; }
.brote.is-flip.pose-fly1 .brote__img, .brote.is-flip.pose-fly2 .brote__img { transform: scaleX(-1); }
@media (max-width: 767px) { .brote, .brote__img { width: 54px; height: 54px; } }

/* galería: lightbox y series */
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(21,32,31,.94); display: flex; align-items: center; justify-content: center; padding: 24px; }
.lightbox[hidden] { display: none; }
.lightbox__fig { margin: 0; max-width: min(1100px, 100%); max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lightbox__fig img { max-width: 100%; max-height: calc(100vh - 110px); object-fit: contain; border-radius: 12px; border: var(--border-w) solid var(--musgo); }
.lightbox__fig figcaption { color: var(--arena); font-size: 13px; font-weight: 600; }
.lightbox__close, .lightbox__prev, .lightbox__next { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: var(--border-w) solid var(--arena); background: transparent; color: var(--arena); font-size: 26px; line-height: 1; cursor: pointer; }
.lightbox__close { top: 18px; right: 18px; }
.lightbox__prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 18px; top: 50%; transform: translateY(-50%); }
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover { background: var(--accent); color: var(--tinta); border-color: var(--accent); }
@media (max-width: 767px) { .lightbox { padding: 12px; } .lightbox__prev, .lightbox__next { top: auto; bottom: 14px; transform: none; } .lightbox__prev { left: 14px; } .lightbox__next { right: 14px; } }

/* portafolio: etiquetas y marca */


/* ===== Paquete Landing + Pauta (servicios.html#landing-pauta y banner en inicio) ===== */
.combo .section__head .sticker { align-self: flex-start; }
.combo__pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.combo__pasos .card { color: var(--text); }
.combo__pasos .card p { color: var(--muted); }
.combo__cobro { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--radius-pill); background: var(--brote); color: var(--tinta); }
.combo__pie { margin-top: var(--s-5); display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.combo__nota { display: flex; flex-direction: column; gap: var(--s-2); max-width: 680px; }
.combo__nota p { color: var(--arena); font-size: 15px; }
.combo__nota strong { color: var(--brote); }
.lead a, .dato p a { color: var(--primary-text); font-weight: 600; }
.combo-banner { margin-top: var(--s-3); display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4); background: var(--primary); color: var(--arena); border: var(--border-w) solid var(--border); border-radius: var(--radius-card); text-decoration: none; transition: transform .12s ease, box-shadow .12s ease; }
.combo-banner:hover { color: var(--arena); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--shadow); }
.combo-banner__txt { flex: 1; font-size: 15px; }
.combo-banner__txt strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: 18px; text-transform: uppercase; letter-spacing: -.02em; }
.combo-banner .link { color: var(--brote); margin-top: 0; white-space: nowrap; }
@media (max-width: 900px) { .combo__pasos { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .combo-banner { flex-direction: column; align-items: flex-start; } }

/* ===== Titular con palabra rotativa ===== */
/* la coma viaja pegada a la palabra: nunca empieza sola una línea */
.rotor-wrap { white-space: nowrap; }

/* ===== Páginas legales ===== */
.legal { display: flex; flex-direction: column; gap: var(--s-6); }
.legal > section { display: flex; flex-direction: column; gap: var(--s-2); }
.legal h2 { font-size: var(--size-h3); line-height: var(--lh-h3); }
.legal p, .legal li { max-width: 68ch; }
.legal ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.legal a { color: var(--primary-text); text-decoration: underline; text-underline-offset: 3px; }

/* ===== Portafolio por sectores (v2) ===== */
/* Cada sector redefine los tokens semánticos: todo lo de adentro (títulos, textos, bordes) se adapta solo. */
.pf-hero { padding-bottom: var(--s-5); }
.pf-index { position: sticky; top: var(--nav-h, 70px); z-index: 40; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 10px max(var(--s-4), calc((100% - 1180px) / 2)); background: var(--bg); background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: var(--border-w) solid var(--border); }
.pf-index::-webkit-scrollbar { display: none; }
.pf-index__a { flex: none; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: var(--radius-pill); border: 1.5px solid var(--border); color: var(--text); text-decoration: none; white-space: nowrap; }
.pf-index__a small { font-weight: 500; opacity: .65; }
.pf-index__a i { width: 10px; height: 10px; border-radius: 50%; background: var(--sw, var(--muted)); border: 1.5px solid var(--border); }
.pf-index__a:hover { background: var(--surface); }
.pf-index__a.is-on { background: var(--text); color: var(--bg); }
.pf-index__a[data-k="pauta"] { --sw: var(--arena); }
.pf-index__a[data-k="video"] { --sw: var(--bosque); }
.pf-index__a[data-k="ia"] { --sw: var(--rio); }
.pf-index__a[data-k="foto"] { --sw: var(--tinta); }
.pf-index__a[data-k="marca"] { --sw: var(--arcilla); }
.pf-index__a[data-k="web"] { --sw: var(--niebla); }
.pf-index__a[data-k="camara"] { --sw: #000; }

.pf-sec { position: relative; padding: var(--s-8) 0; background: var(--bg); color: var(--text); scroll-margin-top: calc(var(--nav-h, 70px) + 52px); overflow: hidden; }
.pf-sec__in { position: relative; display: flex; flex-direction: column; }
.pf-sec__head { display: flex; flex-direction: column; gap: var(--s-2); max-width: 720px; margin-bottom: var(--s-6); }
.pf-sec__head .lead { color: var(--muted); }
.pf-sec__cta { align-self: flex-start; margin-top: var(--s-6); }
.pf-sub { margin: var(--s-7) 0 var(--s-4); font-family: var(--font-body); font-size: var(--size-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--primary-text); }

/* piezas comunes */
.pf-grid { display: grid; gap: var(--s-4); align-items: start; }
.pf-grid--vid { grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 20vw, 230px), 1fr)); }
.pf-grid--post { grid-template-columns: repeat(auto-fill, minmax(clamp(160px, 22vw, 250px), 1fr)); }
.pf-cap { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; min-width: 0; }
.pf-cap h3 { font-size: 16px; line-height: 1.2; }
.pf-cap p { font-size: 14px; color: var(--muted); }
.pf-cap__marca { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--primary-text); }
.pf-cap .pf-cap__nota { font-size: 12px; font-style: italic; }
.pf-tag { align-self: flex-start; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-pill); border: 1.5px solid var(--muted); color: var(--muted); text-transform: lowercase; }
.pf-sec button { font: inherit; color: inherit; }

/* video */
.pf-vid { min-width: 0; }
.pf-vid__media { position: relative; display: block; width: 100%; padding: 0; aspect-ratio: 9 / 16; border: var(--border-w) solid var(--border); border-radius: var(--radius-card); overflow: hidden; background: var(--tinta); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.pf-vid--h .pf-vid__media { aspect-ratio: 16 / 9; }
.pf-vid--p .pf-vid__media { aspect-ratio: 4 / 5; }
@media (min-width: 340px) { .pf-vid--h { grid-column: span 2; } }
.pf-vid--chico .pf-vid__media { width: 62%; }
.pf-vid__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-vid__media:hover, .pf-vid__media:focus-visible { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--shadow); }
.pf-vid__play { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: var(--arcilla); border: var(--border-w) solid var(--tinta); display: grid; place-items: center; transition: opacity .2s, transform .2s; }
.pf-vid__play svg { width: 22px; height: 22px; fill: var(--tinta); margin-left: 3px; }
.pf-vid__media.is-playing .pf-vid__play { opacity: 0; transform: scale(.7); }
.pf-vid__dur { position: absolute; left: 10px; bottom: 10px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--tinta); color: var(--arena); font-variant-numeric: tabular-nums; }

/* 1 · Pauta: papel cuadriculado, como una hoja de métricas */
.pf-sec--pauta { background-color: var(--bg); background-image: linear-gradient(color-mix(in srgb, var(--text) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--text) 7%, transparent) 1px, transparent 1px); background-size: 28px 28px; }
.pf-post { background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius-card); overflow: hidden; min-width: 0; }
.pf-post__head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.pf-post__head strong { display: block; font-size: 13px; line-height: 1.2; }
.pf-post__head small { font-size: 11px; color: var(--muted); }
.pf-post__av { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; background: var(--arcilla); color: var(--tinta); border: 1.5px solid var(--border); }
.pf-post__media { display: block; width: 100%; padding: 0; border: 0; border-block: 1.5px solid var(--border); aspect-ratio: 4 / 5; background: var(--rio); cursor: zoom-in; }
.pf-post__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-post__body { padding: 0 12px 12px; }

.pf-grid--perfil { grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 20vw, 220px), 1fr)); }

/* 3 · Video para marcas: bosque */
.pf-sec--video { --bg: var(--bosque); --surface: color-mix(in srgb, var(--bosque) 70%, var(--tinta)); --text: var(--arena); --muted: color-mix(in srgb, var(--arena) 78%, var(--bosque)); --primary-text: var(--brote); --border: var(--tinta); --shadow: var(--tinta); }
.pf-minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(130px, 16vw, 170px), 1fr)); gap: var(--s-4); }
.pf-mini { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pf-mini button { display: block; width: 100%; padding: 0; aspect-ratio: 9 / 16; border: 1.5px solid var(--border); border-radius: 12px; overflow: hidden; cursor: zoom-in; background: var(--tinta); }
.pf-mini img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.pf-mini button:hover img { transform: scale(1.05); }

/* 4 · Hecho con IA: río con trama de puntos y bordes que brillan */
.pf-sec--ia { --bg: var(--rio); --surface: color-mix(in srgb, var(--rio) 70%, var(--tinta)); --text: var(--arena); --muted: color-mix(in srgb, var(--arena) 75%, var(--rio)); --primary-text: var(--brote); --border: var(--brote); --shadow: var(--brote);
  background-color: var(--rio); background-image: radial-gradient(color-mix(in srgb, var(--brote) 22%, transparent) 1.2px, transparent 1.4px); background-size: 22px 22px; }
.pf-sec--ia .pf-vid__media { border-width: 1.5px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--brote) 14%, transparent), 0 0 32px color-mix(in srgb, var(--brote) 22%, transparent); }
.pf-sec--ia .pf-vid__media::after { content: "IA"; position: absolute; top: 10px; right: 10px; font-family: var(--font-display); font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 8px; background: var(--brote); color: var(--tinta); }

/* 5 · Fotografía: cuarto oscuro */
.pf-sec--foto { --bg: color-mix(in srgb, var(--tinta) 72%, #000); --surface: var(--humus); --text: var(--arena); --muted: var(--niebla); --primary-text: var(--brote); --border: var(--musgo); --shadow: var(--arcilla); }
.pf-masonry { columns: 3 260px; column-gap: var(--s-4); }
.pf-masonry--4 { columns: 4 200px; }
.pf-serie { break-inside: avoid; margin-bottom: var(--s-5); min-width: 0; }
.pf-serie button { position: relative; display: block; width: 100%; padding: 0; border: 1.5px solid var(--border); border-radius: 12px; overflow: hidden; cursor: zoom-in; background: var(--surface); }
.pf-serie img { width: 100%; height: auto; display: block; transition: transform .4s ease; }
.pf-serie button:hover img { transform: scale(1.04); }
.pf-serie__n { position: absolute; right: 10px; bottom: 10px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--arena); color: var(--tinta); }


/* 7 · Diseño web: ventana de navegador */
.pf-browser { max-width: 900px; min-width: 0; }
.pf-browser__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--surface); border: var(--border-w) solid var(--border); border-bottom: 0; border-radius: var(--radius-card) var(--radius-card) 0 0; }
.pf-browser__bar i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--border); background: var(--arcilla); }
.pf-browser__bar i + i { background: var(--brote); }
.pf-browser__bar i + i + i { background: var(--bosque); }
.pf-browser__bar span { margin-left: 10px; flex: 1; font-size: 12px; color: var(--muted); padding: 3px 12px; border-radius: var(--radius-pill); background: var(--bg); }
.pf-browser__media { display: block; border: var(--border-w) solid var(--border); border-radius: 0 0 var(--radius-card) var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); }
.pf-browser__media img { display: block; width: 100%; height: auto; }

/* 8 · Frente a cámara: sala de cine con perforaciones de película */
.pf-sec--camara { --bg: #0B0F0E; --surface: var(--humus); --text: var(--arena); --muted: var(--niebla); --primary-text: var(--arcilla); --border: var(--musgo); --shadow: var(--arcilla); padding-block: calc(var(--s-8) + 20px); }
.pf-sec--camara::before, .pf-sec--camara::after { content: ""; position: absolute; left: 0; right: 0; height: 12px; background: repeating-linear-gradient(90deg, transparent 0 14px, color-mix(in srgb, var(--arena) 18%, transparent) 14px 30px); }
.pf-sec--camara::before { top: 14px; }
.pf-sec--camara::after { bottom: 14px; }

/* visor */
.pf-lb.is-single .lightbox__prev, .pf-lb.is-single .lightbox__next { display: none; }
.pf-lb__stage { display: flex; justify-content: center; }
.pf-lb__stage img, .pf-lb__stage video { max-width: 100%; max-height: calc(100vh - 110px); object-fit: contain; border-radius: 12px; border: var(--border-w) solid var(--musgo); background: #000; }
@media (max-width: 767px) { .pf-sec { padding: var(--s-7) 0; } .pf-sub { margin-top: var(--s-6); } }

/* ===== Portafolio v2: imagen de marca y etiquetas de rol ===== */
/* Imagen de marca: arcilla oscura, como un set con luz cálida */
.pf-sec--marca { --bg: color-mix(in srgb, var(--arcilla) 58%, var(--tinta)); --surface: color-mix(in srgb, var(--arcilla) 40%, var(--tinta)); --text: var(--arena); --muted: color-mix(in srgb, var(--arena) 82%, var(--arcilla)); --primary-text: var(--arena); --border: var(--tinta); --shadow: var(--tinta);
  background-image: radial-gradient(ellipse 70% 55% at 85% 0%, color-mix(in srgb, var(--arena) 16%, transparent), transparent 70%); }
.pf-sec--marca .btn--primary { background: var(--arena); color: var(--tinta); }

/* Etiquetas de rol: qué hice en cada pieza */
.pf-roles { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.pf-rol { font-size: 11px; font-weight: 700; line-height: 1.2; padding: 3px 9px; border-radius: var(--radius-pill); border: 1.5px solid var(--muted); color: var(--muted); }
.pf-rol--produccion, .pf-rol--foto, .pf-rol--diseno, .pf-rol--actor { background: var(--brote); border-color: var(--brote); color: var(--tinta); }
.pf-rol--cara, .pf-rol--direccion { background: var(--arena); border-color: var(--arena); color: var(--tinta); }
.pf-rol--ads { border-style: dashed; }
.pf-sec--pauta .pf-rol--direccion, .pf-sec--web .pf-rol--diseno { background: var(--bosque); border-color: var(--bosque); color: var(--arena); }
.pf-rol--pend { background: transparent; border: 1.5px dashed var(--arcilla); color: var(--arcilla); }
.pf-sec--marca .pf-rol--pend { border-color: var(--arena); color: var(--arena); }
/* Pieza por confirmar: se ve atenuada hasta que Jean Paul confirme su rol */
.is-pend .pf-vid__media, .is-pend .pf-post__media, .is-pend > button { outline: 2px dashed var(--arcilla); outline-offset: 3px; }
.pf-sec--marca .is-pend .pf-vid__media { outline-color: var(--arena); }

/* Reels con solo fotograma: ahora llevan texto y roles debajo */
.pf-mini .pf-cap h3 { font-size: 14px; }
.pf-mini .pf-cap p { font-size: 13px; }
.pf-sub--first { margin-top: 0; }

.pf-post__media { position: relative; }
.pf-rol--dirigi { background: var(--arena); border-color: var(--arena); color: var(--tinta); }
.pf-rol--grabacion { background: var(--brote); border-color: var(--brote); color: var(--tinta); }

/* ===== Portafolio v2: ficha de créditos ===== */
.pf-creditos { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--border); max-width: 900px; }
.pf-creditos li { display: grid; grid-template-columns: 1.4fr 1fr 1.4fr auto; gap: 4px 20px; align-items: baseline; padding: 14px 0; border-bottom: 1.5px solid var(--border); }
.pf-creditos strong { font-family: var(--font-display); font-size: 15px; text-transform: uppercase; letter-spacing: .02em; }
.pf-creditos span { font-size: 14px; color: var(--muted); }
.pf-creditos em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary-text); white-space: nowrap; }
@media (max-width: 640px) { .pf-creditos li { grid-template-columns: 1fr auto; } .pf-creditos span { grid-column: 1 / -1; } }

/* ===== Burbuja de Brote dentro de la pantalla ===== */
/* --bx lo calcula brote.js: corre la burbuja para que no se corte en los bordes */
.brote .brote__bubble, .brote.is-flip .brote__bubble { transform: translate(calc(-50% + var(--bx, 0px)), -8px); }
.brote.brote--img .brote__bubble { transform: translate(calc(-50% + var(--bx, 0px)), -4px); }
.brote__bubble::after { left: calc(50% - var(--bx, 0px)); }

/* ===== Sin scroll horizontal ===== */
/* Las entradas data-fx="left|right" desplazan los bloques 56 px antes de aparecer; en celular eso se salía de la pantalla. */
main { overflow-x: clip; }