/* Nailed lab: page CSS. Only what sits inside a visual or a section the kit has no class for.
   Shared by index.html (ES) and en/index.html (EN). Palette tokens come from the page's :root block. */

/* the logo: the client's own SVG, own colours */
.nav__logo img { height: 28px; width: auto; display: block; }
.footer .nav__logo img { height: 30px; }
.nav__lang { font: 500 var(--t-small)/1 var(--font-text); letter-spacing: 0.02em; padding: 0 var(--s-2); }

/* ---------- hero collage: pieces are small live UI, sized in container units ---------- */
.ly-collage { container-type: inline-size; }
.ly-collage .ly-piece { box-shadow: 0 1px 2px rgb(0 0 0 / .35), 0 22px 48px -22px rgb(0 0 0 / .7); }
.ly-collage .pp { background: #f5f4ef; color: #15171a; padding: 3.4cqw; display: grid; gap: 1.8cqw; align-content: start; font: 400 max(13px, 2.3cqw)/1.35 var(--font-text); letter-spacing: 0; }
.pp b { font-weight: 500; }
.pp .mut { color: #565b62; }
.pp-head { display: flex; align-items: center; gap: 1.8cqw; }
.pp-head > span:last-child { margin-left: auto; color: #565b62; font-size: max(13px, 1.8cqw); }
.pp-dot { width: 4.4cqw; height: 4.4cqw; min-width: 28px; min-height: 28px; border-radius: 50%; background: #15171a; display: grid; place-items: center; flex: none; }
.pp-dot svg { width: 56%; height: 56%; display: block; }
.pp-title { font: 400 5.4cqw/1.05 var(--font-display); letter-spacing: -0.02em; margin: 0; }
.pp-line { display: block; }
.pp-line b { display: block; font-size: max(13px, 1.8cqw); color: #3b6a6c; font-weight: 500; }
.pp-act { display: flex; gap: 1.6cqw; padding-top: 1.2cqw; }
.pp-btn { display: inline-flex; align-items: center; height: max(28px, 4.6cqw); padding: 0 2.4cqw; border-radius: 999px; background: #0f5257; color: #fff; font-weight: 500; font-size: max(13px, 1.9cqw); }
.pp-btn--ghost { background: transparent; color: #15171a; box-shadow: inset 0 0 0 1px rgb(21 23 26 / .22); }
.ly-collage .pp-wa { background: #f5f4ef; display: grid; grid-template-columns: auto 1fr; gap: 2cqw; align-items: center; padding: 2.6cqw 3cqw; color: #15171a; font: 400 max(13px, 2cqw)/1.3 var(--font-text); }
.ly-collage .ly-piece.pp-wa > img { width: max(28px, 5.4cqw); height: auto; display: block; }
.pp-wa b { font-weight: 500; display: block; }
.pp-wa span span { color: #565b62; font-size: max(13px, 1.8cqw); display: block; }
.fx-card { padding: 4.2cqw; display: grid; align-content: end; }
.fx-card .pp { border-radius: var(--r-md); box-shadow: 0 10px 24px -12px rgb(0 0 0 / .45); }
.bars { display: grid; gap: 1.2cqw; }
.bars > div { display: grid; grid-template-columns: max(54px, 11cqw) 1fr auto; gap: 1.4cqw; align-items: center; font-size: max(13px, 1.9cqw); }
.bars i { display: block; height: 1.6cqw; min-height: 6px; border-radius: 99px; background: #0f5257; width: var(--w); }
.bars i.lo { background: #8aa9a3; }
.bars em { font-style: normal; font-variant-numeric: tabular-nums; }
.ly-collage .pp.pp-chat { background: #efeae2; padding: 0; gap: 0; }
.pp-chat .bar { background: #0b6157; color: #fff; display: flex; align-items: center; gap: 1.8cqw; padding: 2.2cqw 3cqw; font-weight: 500; }
.pp-chat .bar img { width: max(22px, 3.6cqw); height: auto; background: #fff; border-radius: 50%; padding: 3px; box-sizing: content-box; }
.pp-chat .msgs { padding: 2.6cqw 3cqw; display: grid; gap: 1.6cqw; }
.msg { background: #fff; border-radius: 0 1.6cqw 1.6cqw 1.6cqw; padding: 1.8cqw 2.2cqw; max-width: 94%; box-shadow: 0 1px 1px rgb(0 0 0 / .12); }
.msg time { display: block; text-align: right; color: #667781; font-size: max(13px, 1.6cqw); }
.msg--me { background: #d9fdd3; justify-self: end; border-radius: 1.6cqw 0 1.6cqw 1.6cqw; }
.quick { display: inline-flex; align-self: start; height: max(28px, 4.4cqw); align-items: center; padding: 0 2.4cqw; border-radius: 999px; background: #fff; color: #0b6157; font-weight: 500; font-size: max(13px, 1.9cqw); box-shadow: inset 0 0 0 1px rgb(11 97 87 / .3); }
.pp-sheet { padding: 0; gap: 0; }
.pp-sheet .bar { display: flex; align-items: center; gap: 1.6cqw; padding: 2cqw 2.6cqw; border-bottom: 1px solid rgb(21 23 26 / .1); font-weight: 500; }
.pp-sheet .bar img { height: max(22px, 3.6cqw); width: auto; display: block; }
.pp-sheet table { border-collapse: collapse; width: 100%; font-size: max(13px, 1.9cqw); }
.pp-sheet th { text-align: left; font-weight: 500; color: #565b62; padding: 1.2cqw 2.6cqw; background: #ebeae5; }
.pp-sheet td { padding: 1.4cqw 2.6cqw; border-top: 1px solid rgb(21 23 26 / .08); font-variant-numeric: tabular-nums; }
.pp-sheet tr.hot td { background: #d6ecea; font-weight: 500; box-shadow: inset 0 0 0 1px rgb(15 82 87 / .35); }
.pp-tile { display: grid; grid-template-columns: auto 1fr; gap: 2cqw; align-items: center; padding: 2.4cqw 2.8cqw; }
.ly-collage .pp-tile > img { width: max(28px, 4.8cqw); height: auto; display: block; }
.pp-tile b { display: block; font-weight: 500; }
.pp-tile span span { color: #565b62; font-size: max(13px, 1.8cqw); }
.pp-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1.2cqw; align-items: end; height: 14cqw; padding-top: 1cqw; }
.pp-days i { display: block; background: #8aa9a3; border-radius: 2px 2px 0 0; height: var(--h); }
.pp-days i.top { background: #0f5257; }
.pp-lab { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1.2cqw; font-size: max(13px, 1.6cqw); color: #565b62; text-align: center; }
@media (max-width: 639px) {
  .ly-collage .ly-piece .hide-s { display: none; }
}

/* ---------- app-frame (informe) ---------- */
.app.ui { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: var(--s-7); background: var(--u-bg); border: 1px solid var(--u-border); border-radius: var(--u-r); box-shadow: var(--u-shadow); }
.app > .app__pane { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.app > .app__pane + .app__pane { border-left: 1px solid var(--u-line); }
.app > .app__pane > .ui-panel { width: 100%; border: 0; border-radius: 0; box-shadow: none; }
.app > .app__pane--open::after { content: ""; position: absolute; inset: auto 0 0 0; height: 64px; background: linear-gradient(transparent, var(--u-bg)); pointer-events: none; }
@media (min-width: 1024px) and (max-width: 1279px) { .app.ui { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
@media (max-width: 1023px) {
  .app.ui { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .app > .app__pane--list { max-height: 252px; }
  
  .app .ui-win__side { display: none; }
  .app .ui-win__body { grid-template-columns: minmax(0, 1fr); }
  .app > .app__pane + .app__pane { border-left: 0; border-top: 1px solid var(--u-line); }
}
@media (max-width: 639px) {
  .app.ui { grid-template-rows: minmax(0, 1fr); }
  .app > .app__pane--list { display: none; }
  .app > .app__pane + .app__pane { border-top: 0; }
}
.rep { padding: var(--s-6); display: grid; gap: var(--s-5); align-content: start; }
.rep__head { display: flex; align-items: center; gap: var(--s-3); }
.rep__head > div { display: grid; line-height: 18px; }
.rep__head b { font-weight: 500; }
.rep__head span.sub { color: var(--u-muted); }
.rep__head .ui-chip { margin-left: auto; }
.rep__title { font: 400 22px/1.1 var(--font-display); letter-spacing: -0.02em; }
.rep__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); }
.rep__sec { display: grid; gap: var(--s-2); align-content: start; }
.rep__lab { color: var(--u-muted); font-size: 13px; }
.rep__big { font: 400 28px/1 var(--font-display); letter-spacing: -0.02em; display: flex; gap: var(--s-2); align-items: center; }
.rep__shops { display: grid; gap: 6px; margin-top: 4px; }
.rep__shops > div { display: grid; grid-template-columns: 64px 1fr auto; gap: 8px; align-items: center; }
.rep__shops i { display: block; height: 8px; border-radius: 99px; background: var(--u-ink); width: var(--w); opacity: .85; }
.rep__shops i.lo { opacity: .35; }
.rep__shops em { font-style: normal; font-variant-numeric: tabular-nums; }
.rep__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; height: 56px; margin-top: 4px; }
.rep__days i { display: block; background: color-mix(in oklab, var(--u-ink) 30%, var(--u-bg)); border-radius: 3px 3px 0 0; height: var(--h); }
.rep__days i.top { background: var(--u-accent); }
.rep__dl { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; color: var(--u-muted); font-size: 12px; text-align: center; line-height: 14px; }
.rep__act { display: grid; grid-template-columns: 1fr auto auto; gap: var(--s-3); align-items: center; padding: var(--s-4); border-radius: var(--u-r2); background: var(--u-tint); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--u-accent) 25%, transparent); }
.rep__act b { font-weight: 500; display: block; }
@media (max-width: 639px) {
  .rep { padding: var(--s-4); }
  .rep__grid { grid-template-columns: 1fr; }
  .rep__act { grid-template-columns: 1fr auto; }
  .rep__act > div { grid-column: 1 / -1; }
}

/* ---------- pinned chapters (agentes): visuals on the lit ground ---------- */
#agentes .mo-pc__visual--lit > .ui { width: 100%; max-width: 440px; }
.ui-quote { display: grid; gap: 8px; padding: var(--s-4); }
.q-rows { display: grid; gap: 0; }
.q-rows > div { display: grid; grid-template-columns: 1fr auto auto; gap: var(--s-3); padding: 7px 0; border-top: 1px solid var(--u-line); font-variant-numeric: tabular-nums; }
.q-rows > div.tot { font-weight: 500; }
.mail { display: grid; gap: 2px; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--u-line); }
.mail__from { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.mail__from img { height: 16px; width: auto; display: block; }
.mail__from time { margin-left: auto; color: var(--u-muted); font-weight: 400; }
.sheet { padding: 0; }
.sheet__bar { display: flex; align-items: center; gap: 8px; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--u-line); font-weight: 500; }
.sheet__bar img { height: 18px; width: auto; display: block; }
.sheet table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.sheet th { text-align: left; font-weight: 500; color: var(--u-muted); padding: 6px var(--s-4); background: var(--u-fill); }
.sheet td { padding: 8px var(--s-4); border-top: 1px solid var(--u-line); }
.sheet tr.hot td { background: var(--u-tint); font-weight: 500; }
.filechip { display: flex; align-items: center; gap: 10px; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--u-line); }
.filechip img { width: 24px; height: auto; display: block; }
.filechip span span { color: var(--u-muted); display: block; }

/* ---------- herramientas ---------- */
#herramientas .frame--split { aspect-ratio: auto; min-height: 560px; }
@media (max-width: 639px) { #herramientas .frame--split { min-height: 320px; } }

/* ---------- casos ---------- */
.case { display: grid; gap: var(--s-3); align-content: start; }
.case__logo { display: flex; align-items: center; height: 48px; }
.case__logo img { height: var(--lh, 36px); width: auto; max-width: 100%; filter: brightness(0) invert(1); opacity: .92; }
.case__tag { color: var(--muted); font-size: var(--t-small); }
.case h3 { font: 500 var(--t-card)/1.25 var(--font-text); letter-spacing: -0.01em; }
.case__quote { margin: auto 0 0; display: grid; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.case__quote blockquote { margin: 0; font-style: italic; }
.case__quote .person { display: grid; line-height: 1.4; }
.case__quote .person__role { color: var(--muted); }

/* ---------- proceso ---------- */
.proc__card { display: grid; gap: var(--s-3); align-content: start; }
.proc__time { font: 500 var(--t-lead)/1 var(--font-display); color: var(--accent); letter-spacing: -0.01em; }
.proc__vis { height: 168px; border-radius: var(--r-md); background: var(--surface); position: relative; overflow: hidden; }
.proc__vis .ui { position: absolute; left: 12px; right: 12px; top: 14px; }
.proc__guar { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: baseline; }
.proc__guar b { font-weight: 500; color: var(--accent); }

/* ---------- calculator ---------- */
.calc { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6); min-height: 560px; display: grid; align-content: start; gap: var(--s-5); }
.calc__top { display: flex; align-items: center; gap: var(--s-4); }
.calc__dots { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.calc__dots li { width: 24px; height: 4px; border-radius: 99px; background: var(--line-strong, rgb(255 255 255 / .2)); transition: background-color .25s, width .25s; }
.calc__dots li.is-on { width: 40px; background: var(--accent); }
.calc__dots li.is-done { background: color-mix(in oklab, var(--accent) 55%, transparent); }
.calc form.form { display: block; max-width: none; }
.calc fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--s-4); }
.calc legend { font: var(--display-weight) var(--t-h3)/1.2 var(--font-display); letter-spacing: var(--display-tracking); padding: 0; margin-bottom: var(--s-4); }
.calc__opts { display: grid; gap: var(--s-2); }
.calc__opts--2 { grid-template-columns: 1fr 1fr; }
.opt { position: relative; display: flex; align-items: center; gap: var(--s-3); min-height: 48px; padding: 10px 16px; border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; font-size: var(--t-body); line-height: 1.3; transition: border-color .2s, background-color .2s; }
.opt:hover { border-color: var(--line-strong, rgb(255 255 255 / .35)); }
.opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opt span.box { width: 20px; height: 20px; flex: none; border-radius: 6px; border: 1px solid var(--line-strong, rgb(255 255 255 / .35)); display: grid; place-items: center; }
.opt:has(input[type="radio"]) span.box { border-radius: 50%; }
.opt:has(input:checked) { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 10%, transparent); }
.opt:has(input:checked) span.box { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 4px var(--bg); }
.opt:has(input:focus-visible) { outline: 2px solid var(--action); outline-offset: 2px; }
.calc .field { display: grid; gap: 6px; }
.calc .field label { font-size: var(--t-small); }
.calc .field input[type="text"], .calc .field input[type="email"], .calc .field input[type="tel"] { height: 48px; padding: 0 16px; border-radius: var(--r-md); border: 1px solid var(--line); background: transparent; color: var(--ink); font: 400 16px/1 var(--font-text); }
.calc .field input:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.calc .field input[aria-invalid="true"] { border-color: #ff8a7a; }
.calc .field__error { color: #ffb3a8; font-size: var(--t-small); margin: 0; }
.calc__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.calc__nav { display: flex; gap: var(--s-3); justify-content: space-between; align-items: center; }
.calc__nav .btn { min-width: 140px; }
.calc__consent { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--t-small); line-height: 1.45; }
.calc__consent input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--accent); }
.calc__result { display: grid; gap: var(--s-4); align-content: start; }
.calc__result .lead { color: var(--muted); }
.calc__hours { font: var(--display-weight) clamp(40px, 5vw, 64px)/1 var(--font-display); letter-spacing: var(--display-tracking-xl, -0.04em); }
.calc__money { font: var(--display-weight) var(--t-h3)/1.2 var(--font-display); letter-spacing: var(--display-tracking); color: var(--accent); }
.calc__first { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-2); }
.calc__first li { padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.calc__first li:first-child { border-top: 0; }
.calc__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.calc__note { color: var(--muted); font-size: var(--t-small); margin: 0; }
.calc [hidden] { display: none !important; }
@media (max-width: 639px) { .calc { padding: var(--s-5); min-height: 0; } .calc__opts--2, .calc__row { grid-template-columns: 1fr; } .calc__nav .btn { min-width: 0; flex: 1; } }

/* ---------- equipo ---------- */
.person-tile .tile__media { aspect-ratio: 4 / 5; }
.person-tile .tile__media img { object-position: 50% 30%; }
.person-tile .t-role { color: var(--muted); font-size: var(--t-small); margin: 0; }
.person-tile p { margin: 0; }
.person-tile .tile__body { display: grid; gap: var(--s-2); padding-top: var(--s-4); }

/* ---------- statement (liquid type) ---------- */
#lunes .mo-lt__type { font: var(--display-weight) clamp(56px, 12.5vw, 184px)/1 var(--font-display); letter-spacing: var(--display-tracking-xl, -0.04em); max-width: none; }

.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
@media (max-width: 639px) { .people { gap: var(--s-4); } }
.mo-lt__lead { font: 400 var(--t-h3)/1.25 var(--font-display); letter-spacing: var(--display-tracking); color: var(--muted); max-width: 40ch; margin: var(--s-7) 0 0; }
.mo-lt__lead strong { color: var(--ink); font-weight: 400; }

.ui { --fx-muted: #a9acb1; }
.lit-frame { background: var(--ground-bg, #cdd6c6); border-radius: var(--r-lg); padding: var(--s-5); display: grid; place-items: center; }
.lit-frame > .ui { width: 100%; max-width: 560px; }
.proc__rows .rows__name { font: 500 var(--t-lead)/1.3 var(--font-text); }
.proc__rows .rows__value { color: var(--accent); font: 500 var(--t-lead)/1.3 var(--font-display); }
.calcvis { margin-top: var(--s-7); padding: var(--s-5); }
.calcvis .rep__shops { gap: 10px; } .calcvis .rep__shops > div { grid-template-columns: 96px 1fr auto; }
.q-rows--2 > div { grid-template-columns: auto 1fr; } .q-rows--2 > div > span:nth-child(2) { display: none; }
.q-rows--2 > div > span:last-child { text-align: right; }

.proc__rows > li { padding-block: var(--s-3); }
.proc__guar { margin-top: var(--s-4); }
@media (max-width: 639px) {
  .calc { min-height: calc(100lvh * 1.05); }
  #lunes .mo-lt__type { font-size: 78px; }
  .people { gap: 12px; }
  .btn--xl { white-space: normal; padding-inline: 12px; }
  .closing__links .grid > *, .footer__legal > * { min-width: 0; overflow-wrap: anywhere; }
}
#proceso .lit-frame { align-self: stretch; }
@media (max-width: 1023px) { #proceso .lit-frame { min-height: 360px; } }

.footer--statement { --action: var(--p-action); --action-ink: var(--p-action-ink); }
.footer--statement .btn--primary, .actionbar .btn--primary { background: var(--p-action); color: var(--p-action-ink); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .3); }
@media (max-width: 639px) {
  .ly-collage .pp-wa { display: none; }
  .ly-collage .pp-tile { display: none; }
  .case__tag { display: none; }
  .case__logo { height: 40px; }
  .case { gap: 8px; }
  #casos .card { padding: 20px; }
  .mo-lt__lead { margin-top: 96px; }
  #proceso .lit-frame { min-height: 520px; }
  .proc__rows > li { padding-block: var(--s-5); }
  #preguntas .calcvis { display: none; }
  .faq > .faq__item { padding: var(--s-3) 0; }
  .btn--xl { white-space: normal; }
}

@media (max-width: 639px) {
  #casos .card { padding: 16px; }
  #casos .grid { gap: 8px; }
  #equipo .person-tile .tile__media { aspect-ratio: 1 / 1; }
  #preguntas .section-head p { display: none; }
  #preguntas .faq__item h3 { font-size: 17px; }
}
@media (max-width: 639px) { #preguntas .section-head .link { display: none; } #preguntas .faq__item { gap: 4px; } }

/* tablet (640 to 1023): the stacked sections run to two screens, as layout-v4.md asks; the statement is set larger so it fills its screen */
@media (min-width: 640px) and (max-width: 1023px) {
  #casos { --h: 2; }
  #lunes .mo-lt__type { font-size: 18vw; }
  .mo-lt__lead { margin-top: 30vw; }
}

/* phone: the three admin artefacts show whole, never cut by their frame, and the section is as tall as its steps */
@media (max-width: 639px) {
  #agentes .mo-pc__steps { gap: var(--s-7); }
  #agentes .mo-pc__visual.mo-pc__visual--lit { aspect-ratio: auto; padding: 12px; }
  #agentes .mo-pc__visual--lit > .ui { max-width: none; }
  #agentes .ui-quote { padding: var(--s-3); }
  #agentes .q-rows > div { gap: var(--s-2); font-size: 13px; }
  #agentes .sheet table { font-size: 13px; }
  #agentes .sheet th, #agentes .sheet td { padding-inline: 10px; }
  #agentes .sheet th:nth-child(3), #agentes .sheet td:nth-child(3) { display: none; }
}