/* GENERADO por build.py desde src/pages.src.css: no editar a mano */
/* =========================================================
   SUBPÁGINAS · about, services, our-work, blog y plantillas de detalle
   Fuente (src/pages.src.css). `build.py` convierte calc(48 * var(--u)) -> calc(48 * var(--u)),
   donde calc(1 * var(--u)) = 1px a 1920 de ancho y escala con la ventana.
   Los tamaños de texto de párrafo van en px fijos; los titulares escalan.
   ========================================================= */

/* ---------- base ---------- */
.pg main { position: relative; }
.pg-h1, .pg-h2, .sd-eye, .sd-related__t, .pj-h1, .po__h1, .ab-partner__t, .bl__h {
  font-family: var(--display); font-weight: 400; text-transform: uppercase; color: #000;
}
.pg-h1 { font-size: calc(144 * var(--u)); line-height: calc(144 * var(--u)); letter-spacing: -.03em; }
.pg-h1__l { display: block; }
.pg-h2 { font-size: calc(72 * var(--u)); line-height: calc(72 * var(--u)); letter-spacing: -.026em; }
.js [data-hi], .js [data-rv] { opacity: 0; }

/* hero compartido (About, Services) */
.pg-hero { min-height: 100vh; padding: 0 calc(48 * var(--u)) calc(96 * var(--u)); display: flex; flex-direction: column; justify-content: center; }
.pg-hero__row { display: grid; grid-template-columns: calc(821 * var(--u)) calc(907 * var(--u)); column-gap: calc(96 * var(--u)); margin-top: calc(64 * var(--u)); align-items: start; }
.pg-lead { font-size: 24px; line-height: 32px; font-weight: 500; }
.pg-sub  { font-size: 18px; line-height: 28px; color: #353535; }
.pg-services .pg-hero { padding-top: calc(201 * var(--u)); }
.pg-services .pg-hero__row { grid-template-columns: calc(547 * var(--u)) calc(638 * var(--u)); column-gap: calc(144 * var(--u)); }

/* letras sueltas (titulares con revelado por letra) */
.ch { display: inline-block; white-space: pre; }
.js [data-letters] .ch { opacity: 0; }

/* ---------- ABOUT ---------- */
.ab-approach { position: relative; background: var(--lime); padding: calc(120 * var(--u)) calc(48 * var(--u)) calc(46 * var(--u)); }
.ab-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(4.5 * var(--u)); margin-top: calc(82 * var(--u)); }
.ab-card { background: #000; color: #fff; padding: calc(52 * var(--u)) calc(32 * var(--u)) calc(32 * var(--u)); min-height: calc(382 * var(--u)); }
.ab-card__ic { display: block; width: calc(60 * var(--u)); height: calc(60 * var(--u)); color: #fff; }
.ab-card h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: calc(60 * var(--u)); line-height: calc(60 * var(--u)); letter-spacing: -.006em; margin: calc(53 * var(--u)) 0 calc(5 * var(--u)); }
.ab-card p { font-size: 16px; line-height: 24px; }

.ab-believe { position: relative; min-height: 100vh; padding: calc(80 * var(--u)) calc(64 * var(--u)) calc(80 * var(--u)); }
.ab-believe__grid { display: grid; grid-template-columns: calc(717 * var(--u)) 1fr; margin-top: calc(78 * var(--u)); align-items: start; }
.ab-list { list-style: none; margin: 0; padding: 0; }
.ab-item { padding: calc(20 * var(--u)) 0; }
.ab-item:first-child { padding-top: 0; }
.ab-item + .ab-item { border-top: 1px solid #c5c5c5; }
.ab-item__h { margin: 0; }
.ab-item__h button {
  display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer;
  font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: calc(48 * var(--u)); line-height: calc(48 * var(--u)); letter-spacing: -.02em;
  color: rgba(0, 0, 0, .4); transition: color .5s;
}
.ab-item.is-active .ab-item__h button { color: #000; }
.ab-item__t { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .5s cubic-bezier(.4, 0, .2, 1), opacity .5s; }
.ab-item.is-active .ab-item__t { grid-template-rows: 1fr; opacity: 1; }
.ab-item__t p { min-height: 0; overflow: hidden; font-size: 14px; line-height: 20px; color: #353535; padding-top: 12px; }
.ab-shapes { display: grid; grid-template-columns: repeat(2, calc(167 * var(--u))); gap: calc(17 * var(--u)) calc(16 * var(--u)); margin: calc(59 * var(--u)) 0 0 calc(386 * var(--u)); width: calc(350 * var(--u)); }
.ab-shape { width: calc(167 * var(--u)); height: calc(172 * var(--u)); color: #000; will-change: transform; }

.ab-how { padding: calc(40 * var(--u)) 0 0; }
.ab-how__head { position: relative; padding: 0 calc(48 * var(--u)); }
.ab-how__p { position: absolute; left: calc(1424 * var(--u)); top: calc(20 * var(--u)); width: calc(448 * var(--u)); font-size: 16px; line-height: 24px; color: #353535; }
.ab-steps { max-width: calc(1778 * var(--u)); margin: calc(180 * var(--u)) auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(50 * var(--u)); }
.ab-step { background: #fff; min-height: calc(367 * var(--u)); padding: calc(31 * var(--u)) calc(28 * var(--u)) calc(28 * var(--u)); }
.ab-step__n { display: block; font-size: 16px; line-height: 24px; }
.ab-step h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: calc(48 * var(--u)); line-height: calc(48 * var(--u)); letter-spacing: -.01em; margin-top: calc(104 * var(--u)); min-height: calc(115 * var(--u)); }
.ab-step p { margin-top: calc(5 * var(--u)); font-size: 16px; line-height: 24px; }
.ab-how--sd .ab-step { min-height: calc(346 * var(--u)); }

.ab-partner { padding: 0 0 calc(96 * var(--u)); }
.ab-partner__in { padding-left: calc(367 * var(--u)); display: flex; align-items: flex-start; gap: calc(81 * var(--u)); }
.ab-partner__t { font-size: calc(128 * var(--u)); line-height: calc(128 * var(--u)); letter-spacing: -.03em; white-space: nowrap; }
.ab-partner__p { width: calc(576 * var(--u)); margin-top: calc(54 * var(--u)); font-size: 16px; line-height: 24px; color: #353535; }

/* ---------- SERVICES ---------- */
.sv-grid { min-height: 100vh; padding: calc(80 * var(--u)) 0 calc(96 * var(--u)); display: flex; flex-direction: column; justify-content: center; }
.sv-grid__in {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid #C5C5C5; border-bottom: 1px solid #C5C5C5;
  background-image: radial-gradient(circle, rgba(0, 0, 0, .08) 1px, transparent 1px); background-size: 24px 24px;
}
.sv-card {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  min-height: calc(416 * var(--u)); padding: calc(32 * var(--u)) calc(48 * var(--u)); overflow: hidden; color: #000; cursor: pointer;
}
.sv-card__bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; z-index: 0; transition: opacity .5s cubic-bezier(.25, .1, .25, 1); }
.sv-card:focus-visible .sv-card__bg { opacity: 1; }
@media (hover: hover) { .sv-card:hover .sv-card__bg { opacity: 1; } }
.sv-card__top { position: relative; z-index: 1; width: 100%; display: flex; align-items: flex-start; justify-content: space-between; padding-top: 8px; }
.sv-card__n { font-size: 16px; line-height: 24px; transition: color .7s; }
.sv-card__ar { width: 16px; height: 16px; color: rgba(0, 0, 0, .4); transition: color .5s cubic-bezier(.25, .1, .25, 1), translate .5s cubic-bezier(.25, .1, .25, 1); }
@media (hover: hover) { .sv-card:hover .sv-card__n, .sv-card:hover .sv-card__ar { color: #fff; } }
@media (hover: hover) { .sv-card:hover .sv-card__ar { translate: 4px -4px; } }
.sv-card__body { position: relative; z-index: 1; width: 100%; margin-top: auto; margin-bottom: 20px; }
.sv-card__hl { position: absolute; inset: 0; background: var(--lime); opacity: 0; transition: inset .5s cubic-bezier(.25, .1, .25, 1), opacity .5s cubic-bezier(.25, .1, .25, 1); }
.sv-card:focus-visible .sv-card__hl { inset: -32px; opacity: 1; }
@media (hover: hover) { .sv-card:hover .sv-card__hl { inset: -32px; opacity: 1; } }
.sv-card__txt { position: relative; z-index: 1; }
.sv-card h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: calc(48 * var(--u)); line-height: calc(48 * var(--u)); letter-spacing: -.012em; margin-bottom: 16px; }
.sv-card p { font-size: 18px; line-height: 28px; min-height: 80px; }
.sv-line { position: absolute; z-index: 1; pointer-events: none; background: transparent; transition: background-color .5s cubic-bezier(.22, 1, .36, 1); }
.sv-line--v { top: 0; left: 50%; width: 1px; height: 100%; translate: -50% 0; transform-origin: top; }
.sv-line--h { top: 50%; left: 0; height: 1px; width: 100%; translate: 0 -50%; transform-origin: left; }
.sv-cross { position: absolute; z-index: 2; top: 50%; left: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; pointer-events: none; transition: transform .6s cubic-bezier(.215, .61, .355, 1); }
.sv-cross line { transition: stroke .4s cubic-bezier(.215, .61, .355, 1), stroke-width .4s; }
@media (hover: hover) { .sv-grid__in:has(.sv-card:hover) .sv-line { background: var(--lime); } }
@media (hover: hover) { .sv-grid__in:has(.sv-card:hover) .sv-cross { transform: scale(1.4) rotate(45deg); } }
@media (hover: hover) { .sv-grid__in:has(.sv-card:hover) .sv-cross line { stroke: var(--lime); stroke-width: 2.5; } }

/* ---------- OUR WORK ---------- */
.wk { position: relative; z-index: 30; background: var(--gray); padding: calc(128 * var(--u)) calc(128 * var(--u)) calc(128 * var(--u)); }
.wk__eye { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 30px; line-height: 36px; }
.wk .projects__head { margin-top: calc(44 * var(--u)); }
.wk__rows { margin-top: calc(67 * var(--u)); }
.wk__row + .wk__row { margin-top: calc(85 * var(--u)); }
.wk__rowhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 40px; margin-bottom: 16px; }
.wk__lbl { font-family: var(--display); font-size: 12px; line-height: 16px; letter-spacing: .3em; text-transform: uppercase; color: rgba(0, 0, 0, .5); }
.wk__btns { display: flex; gap: 8px; }
.wk__btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(0, 0, 0, .3); background: transparent; color: #000; cursor: pointer; transition: border-color .3s, background-color .3s, color .3s; }
@media (hover: hover) { .wk__btn:hover { border-color: #000; background: #000; color: #fff; } }
.wk__view { position: relative; overflow: hidden; user-select: none; -webkit-user-select: none; cursor: grab; outline: none; }
.wk__view:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.wk__view.is-drag { cursor: grabbing; }
.wk__track { display: flex; gap: 20px; will-change: transform; }
.pcard { flex: 0 0 var(--cw, 30%); display: block; border-top: 1px solid #C9C9C9; padding: 16px 0; font-weight: 500; transition: border-color .5s; }
@media (hover: hover) { .pcard:hover { border-color: #000; } }
.pcard__t { font-size: 18px; line-height: 28px; }
.pcard__img { position: relative; margin-top: 16px; aspect-ratio: 4 / 3; overflow: hidden; }
[data-per="2"] .pcard__img { aspect-ratio: 16 / 9; }
.pcard__in { position: absolute; inset: 0; transition: transform .7s ease-out; }
@media (hover: hover) { .pcard:hover .pcard__in { transform: scale(1.04); } }
.pcard__in img { width: 100%; height: 100%; max-width: none; object-fit: cover; background: #F2F2F2; pointer-events: none; }
.pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 16px; }
.pcard__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.pcard__tags span { background: #CACACA; font-size: 12px; line-height: 16px; font-weight: 700; text-transform: uppercase; padding: 4px 8px; }
.pcard__foot h3 { font-size: 16px; line-height: 24px; font-weight: 500; white-space: nowrap; }

/* ---------- BLOG ---------- */
.bl { min-height: 100vh; padding: calc(128 * var(--u)) calc(48 * var(--u)) calc(96 * var(--u)); }
.bl__h { font-size: calc(72 * var(--u)); line-height: calc(72 * var(--u)); letter-spacing: -.026em; margin-bottom: calc(64 * var(--u)); }
.bl__body { display: grid; grid-template-columns: calc(288 * var(--u)) 1fr; align-items: start; }
.bl__filter { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.bl__filter button { padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--sans); font-weight: 700; font-size: 14px; line-height: 21px; letter-spacing: .05em; text-transform: uppercase; color: rgba(0, 0, 0, .7); transition: color .2s; }
@media (hover: hover) { .bl__filter button:hover { color: #000; } }
.bl__filter button.is-active { color: #000; text-decoration: underline; text-underline-offset: 4px; }
.bl__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(40 * var(--u)); }
.bcard { display: flex; flex-direction: column; gap: 16px; }
.bcard.is-off { display: none; }
.bcard__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, .5); }
.bcard__img img { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .5s; }
@media (hover: hover) { .bcard:hover .bcard__img img { transform: scale(1.03); } }
.bcard__txt { display: flex; flex-direction: column; gap: 8px; }
.bcard__d { font-weight: 700; font-size: 14px; line-height: 21px; letter-spacing: .05em; text-transform: uppercase; }
.bcard h3 { font-weight: 700; font-size: 20px; line-height: 25px; }
.bcard__x { font-size: 16px; line-height: 26px; color: #353535; }
.tagbtn {
  display: inline-flex; align-self: flex-start; margin-top: auto; padding: 8px 20px; background: var(--lime); color: #000;
  font-weight: 600; font-size: 14px; line-height: 21px; letter-spacing: .05em; text-transform: uppercase; transition: background-color .2s;
  clip-path: polygon(8% 0%, 92% 0%, 98% 15%, 100% 35%, 100% 65%, 98% 85%, 92% 100%, 8% 100%, 2% 85%, 0% 65%, 0% 35%, 2% 15%);
}
.bcard .tagbtn { margin-top: 8px; }
@media (hover: hover) { .tagbtn:hover { background: #fff; } }
.tagbtn--lg { padding: 12px 24px; font-size: 14px; line-height: 20px; }

/* ---------- DETALLE DE SERVICIO ---------- */
.sd-hero { padding: calc(80 * var(--u)) calc(48 * var(--u)) 0; }
.sd-eye { font-size: calc(36 * var(--u)); line-height: calc(40 * var(--u)); letter-spacing: -.012em; }
.sd-h1 { font-size: calc(160 * var(--u)); line-height: calc(160 * var(--u)); letter-spacing: -.03em; max-width: calc(1824 * var(--u)); }
.sd-row { display: grid; grid-template-columns: calc(864 * var(--u)) calc(864 * var(--u)); column-gap: calc(96 * var(--u)); margin-top: calc(72 * var(--u)); align-items: start; }
.sd-cover strong { display: block; font-size: 20px; line-height: 28px; font-weight: 500; color: #000; }
.sd-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: calc(80 * var(--u)); }
.sd-chip { padding: 16px; border: 1px solid #C5C5C5; font-family: var(--display); font-size: 22px; line-height: 28px; text-transform: uppercase; letter-spacing: .01em; }
.sd-cells { margin-top: calc(60 * var(--u)); }
.sd-cells__in { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(calc(450 * var(--u)), auto); }
.sd-cell { position: relative; background: #fff; padding: calc(56 * var(--u)) calc(56 * var(--u)) calc(64 * var(--u)); display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 0 0 .5px #e5e5e5; }
.sd-cell h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: calc(36 * var(--u)); line-height: calc(40 * var(--u)); letter-spacing: -.01em; max-width: calc(377 * var(--u)); }
.sd-cell__b p { font-size: 16px; line-height: 24px; max-width: calc(528 * var(--u)); }
.sd-cell__b ul { margin: 24px 0 0; padding-left: 20px; }
.sd-cell__b li { font-size: 16px; line-height: 24px; margin-bottom: 8px; }
.sd-cell--lime { background: var(--lime); align-items: center; justify-content: center; text-align: center; }
.sd-cell--lime h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: calc(48 * var(--u)); line-height: calc(48 * var(--u)); letter-spacing: -.012em; margin: 0; }

.sd-related { padding: calc(100 * var(--u)) calc(48 * var(--u)) calc(96 * var(--u)); }
.sd-related__t { font-size: calc(112 * var(--u)); line-height: calc(112 * var(--u)); letter-spacing: -.026em; }
.rl-grid { display: grid; grid-template-columns: calc(485 * var(--u)) calc(726 * var(--u)) calc(485 * var(--u)); column-gap: calc(64 * var(--u)); margin-top: calc(54 * var(--u)); align-items: start; }
.rl-col { display: flex; flex-direction: column; gap: calc(48 * var(--u)); }
.rl-intro { width: calc(512 * var(--u)); margin: 0 0 calc(32 * var(--u)) calc(214 * var(--u)); font-size: 18px; line-height: 28px; }
.rl-card { display: block; }
.rl-card__img { position: relative; aspect-ratio: 485 / 363; background: #fff; overflow: hidden; }
.rl-card--big .rl-card__img { aspect-ratio: 726 / 545; }
.rl-card__img img { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .7s ease-out; }
@media (hover: hover) { .rl-card:hover .rl-card__img img { transform: scale(1.04); } }
.rl-card__ar { position: absolute; right: 36px; bottom: 35px; color: #000; mix-blend-mode: difference; filter: invert(1); }
.rl-card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.rl-card__tags span { background: #fff; font-size: 12px; line-height: 16px; font-weight: 600; text-transform: uppercase; padding: 4px 8px; }
.rl-card h3 { font-size: 18px; line-height: 28px; font-weight: 700; margin-top: 12px; }
.rl-card__c { font-size: 12px; line-height: 16px; font-weight: 500; text-transform: uppercase; color: #6B6B6B; margin-top: 8px; }
.rl-card__n { font-size: 14px; line-height: 20px; font-weight: 500; text-transform: uppercase; }

/* ---------- DETALLE DE PROYECTO ---------- */
.pj-hero { padding: calc(144 * var(--u)) calc(128 * var(--u)) 0; }
.pj-back { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; line-height: 24px; color: rgba(0, 0, 0, .5); transition: color .2s; }
@media (hover: hover) { .pj-back:hover { color: #000; } }
.pj-h1 { font-size: calc(128 * var(--u)); line-height: calc(128 * var(--u)); letter-spacing: -.025em; margin-top: calc(56 * var(--u)); }
.pj-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: calc(40 * var(--u)); }
.pj-chip { padding: 9px 24px; border: 1px solid rgba(0, 0, 0, .14); font-size: 14px; line-height: 20px; font-weight: 500; text-transform: uppercase; }
.pj-meta { display: flex; flex-wrap: wrap; gap: 8px 48px; margin-top: calc(24 * var(--u)); font-size: 16px; line-height: 24px; color: rgba(0, 0, 0, .55); }
.pj-meta strong { color: #000; font-weight: 600; }
.pj-meta a { text-decoration: underline; text-underline-offset: 3px; }
.pj-preview { margin-top: calc(80 * var(--u)); height: calc(591 * var(--u)); overflow: hidden; background: linear-gradient(135deg, var(--pv1), var(--pv2)); }
.pj-preview { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--pvf); }
.pj-preview__t { font-family: var(--display); text-transform: uppercase; font-size: calc(200 * var(--u)); line-height: calc(200 * var(--u)); letter-spacing: -.02em; }
.pj-preview__s { margin-top: 8px; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
.pj-index { position: fixed; right: 48px; top: 50%; translate: 0 -50%; z-index: 20; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pj-index a { padding: 6px 12px; background: rgba(0, 0, 0, .05); font-size: 11px; line-height: 16px; letter-spacing: .1em; font-weight: 500; text-transform: uppercase; color: rgba(0, 0, 0, .8); transition: background-color .2s; }
@media (hover: hover) { .pj-index a:hover { background: var(--lime); } }
.pj-dossier { background: #F5F2EA; padding: calc(160 * var(--u)) 0 calc(40 * var(--u)); margin-top: calc(128 * var(--u)); position: relative; z-index: 2; }
.pj-block { width: calc(768 * var(--u)); margin: 0 auto calc(160 * var(--u)); }
.pj-block h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: calc(60 * var(--u)); line-height: calc(60 * var(--u)); letter-spacing: -.02em; margin-bottom: 40px; }
.pj-block p { font-size: 20px; line-height: 28px; color: rgba(0, 0, 0, .75); margin-bottom: 24px; }
.pj-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; }
.pj-notes h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 24px; line-height: 32px; margin-bottom: 8px; }
.pj-notes p { font-size: 18px; margin: 0; color: rgba(0, 0, 0, .65); }
.pj-next { background: #000; color: #fff; padding: calc(128 * var(--u)); min-height: calc(491 * var(--u)); position: relative; z-index: 2; }
.pj-next__l { font-family: var(--display); font-size: 12px; line-height: 16px; letter-spacing: .3em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.pj-next__a { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: calc(48 * var(--u)); color: var(--lime); }
.pj-next h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: calc(160 * var(--u)); line-height: calc(160 * var(--u)); letter-spacing: -.03em; transition: letter-spacing .4s; }
@media (hover: hover) { .pj-next__a:hover h3 { letter-spacing: -.01em; } }
.pj-next svg { width: calc(96 * var(--u)); height: calc(96 * var(--u)); flex: none; }

/* ---------- DETALLE DE ARTÍCULO ---------- */
.po { padding: calc(128 * var(--u)) calc(48 * var(--u)) 0; }
.po__crumb { display: flex; gap: 12px; font-size: 12px; line-height: 16px; letter-spacing: .05em; text-transform: uppercase; color: rgba(0, 0, 0, .6); }
@media (hover: hover) { .po__crumb a:hover { color: #000; } }
.po__crumb span:last-child { color: #000; }
.po__meta { display: flex; align-items: center; gap: 16px; margin-top: calc(24 * var(--u)); font-size: 12px; line-height: 16px; letter-spacing: .05em; text-transform: uppercase; color: rgba(0, 0, 0, .7); }
.tag { display: inline-flex; padding: 6px 14px; background: var(--lime); color: #000; font-weight: 600; clip-path: polygon(8% 0%, 92% 0%, 98% 15%, 100% 35%, 100% 65%, 98% 85%, 92% 100%, 8% 100%, 2% 85%, 0% 65%, 0% 35%, 2% 15%); }
.po__h1 { font-size: calc(72 * var(--u)); line-height: calc(72 * var(--u)); letter-spacing: -.026em; margin-top: calc(24 * var(--u)); }
.po__lead { font-size: 24px; line-height: 32px; color: #353535; margin-top: calc(24 * var(--u)); max-width: calc(1400 * var(--u)); }
.po__hero { width: calc(1024 * var(--u)); margin: calc(40 * var(--u)) auto 0; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: #C2C2C2; }
.po__hero img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.po__body { width: calc(768 * var(--u)); margin: 0 auto; padding-top: calc(56 * var(--u)); }
.po__body p, .po__body li, .po__body dd { font-size: 18px; line-height: 28px; color: #353535; }
.po__body p { margin-bottom: 28px; }
.po__body h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: calc(36 * var(--u)); line-height: calc(40 * var(--u)); letter-spacing: -.02em; margin: calc(56 * var(--u)) 0 calc(40 * var(--u)); color: #000; }
.po__body ul { margin: 0 0 28px; padding-left: 24px; }
.po__body li { margin-bottom: 8px; }
.po__note { background: #000; padding: calc(32 * var(--u)); margin: 40px 0; }
.po__note span { display: block; font-size: 14px; line-height: 20px; letter-spacing: .05em; text-transform: uppercase; color: var(--lime); margin-bottom: 8px; }
.po__note p { color: var(--lime); margin: 0; }
.po__body dt { font-weight: 700; font-size: 20px; line-height: 28px; color: #000; }
.po__body dd { margin: 4px 0 40px; }
.po__cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; background: #000; padding: calc(32 * var(--u)); margin: 40px 0 0; }
.po__cta p { color: var(--lime); margin: 0; max-width: 528px; }
.po__rel { padding: calc(120 * var(--u)) 0 calc(128 * var(--u)); }
.po__relt { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: calc(36 * var(--u)); line-height: calc(40 * var(--u)); letter-spacing: -.02em; }
.po__relg { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(40 * var(--u)); margin-top: calc(32 * var(--u)); }

/* ---------- portada: panel de servicio enlazado ---------- */
.svc__link { position: absolute; inset: 0; z-index: 6; }

/* =========================================================
   MÓVIL (--u = 1px): apila columnas y reduce titulares
   ========================================================= */
@media (max-width: 767px) {
  .pg-h1, .sd-h1 { font-size: 48px; line-height: 50px; letter-spacing: -.02em; }
  .pg-h2 { font-size: 44px; line-height: 46px; }
  .pg-hero, .pg-services .pg-hero { min-height: 0; padding: 120px 16px 56px; }
  .pg-hero__row, .pg-services .pg-hero__row { grid-template-columns: 1fr; row-gap: 20px; margin-top: 32px; }
  .pg-lead { font-size: 20px; line-height: 28px; }

  .ab-approach { padding: 64px 16px; }
  .ab-cards { grid-template-columns: 1fr; gap: 8px; margin-top: 32px; }
  .ab-card { min-height: 0; padding: 32px 24px; }
  .ab-card h3 { font-size: 40px; line-height: 42px; margin: 32px 0 8px; }
  .ab-believe { min-height: 0; padding: 64px 16px; }
  .ab-believe__grid { grid-template-columns: 1fr; margin-top: 32px; }
  .ab-item__h button { font-size: 32px; line-height: 34px; }
  .ab-shapes { margin: 40px 0 0; width: 240px; grid-template-columns: repeat(2, 112px); gap: 16px; }
  .ab-shape { width: 112px; height: 116px; }
  .ab-how { padding: 48px 16px 0; }
  .ab-how__head { padding: 0; }
  .ab-how__p { position: static; width: auto; margin-top: 16px; }
  .ab-steps { grid-template-columns: 1fr; gap: 8px; margin-top: 32px; }
  .ab-step, .ab-how--sd .ab-step { min-height: 0; padding: 24px; }
  .ab-step h3 { font-size: 36px; line-height: 38px; margin-top: 32px; min-height: 0; }
  .ab-partner { padding: 56px 16px; }
  .ab-partner__in { padding-left: 0; flex-direction: column; gap: 24px; }
  .ab-partner__t { font-size: 64px; line-height: 64px; white-space: normal; }
  .ab-partner__p { width: auto; margin-top: 0; }

  .sv-grid { min-height: 0; padding: 0 0 56px; }
  .sv-grid__in { grid-template-columns: 1fr; }
  .sv-card { min-height: 260px; padding: 24px 16px; border-bottom: 1px solid #C5C5C5; }
  .sv-card:last-of-type { border-bottom: 0; }
  .sv-card h3 { font-size: 34px; line-height: 36px; }
  .sv-line, .sv-cross { display: none; }

  .wk { padding: 112px 16px 64px; }
  .wk__rows { margin-top: 48px; }
  .wk__row + .wk__row { margin-top: 56px; }

  .bl { padding: 112px 16px 56px; }
  .bl__h { font-size: 56px; line-height: 56px; margin-bottom: 32px; }
  .bl__body { grid-template-columns: 1fr; row-gap: 24px; }
  .bl__filter { flex-direction: row; flex-wrap: wrap; gap: 8px 16px; }
  .bl__grid { grid-template-columns: 1fr; gap: 40px; }

  .sd-hero { padding: 104px 16px 0; }
  .sd-eye { font-size: 24px; line-height: 28px; }
  .sd-row { grid-template-columns: 1fr; row-gap: 24px; margin-top: 32px; }
  .sd-chips { margin-top: 32px; }
  .sd-cells__in { grid-template-columns: 1fr; }
  .sd-cell { padding: 32px 24px; min-height: 0; gap: 32px; }
  .sd-cell--lime { min-height: 200px; }
  .sd-cell h3 { font-size: 30px; line-height: 34px; }
  .sd-cell--lime h2 { font-size: 40px; line-height: 42px; }
  .sd-related { padding: 64px 16px; }
  .sd-related__t { font-size: 56px; line-height: 56px; }
  .rl-grid { grid-template-columns: 1fr; row-gap: 40px; margin-top: 32px; }
  .rl-col { gap: 40px; }
  .rl-intro { width: auto; margin: 0 0 8px; }

  .pj-hero { padding: 112px 16px 0; }
  .pj-h1 { font-size: 72px; line-height: 72px; }
  .pj-preview { height: 240px; margin-top: 40px; }
  .pj-preview__t { font-size: 64px; line-height: 64px; }
  .pj-index { display: none; }
  .pj-dossier { padding: 72px 16px 8px; margin-top: 64px; }
  .pj-block { width: auto; margin-bottom: 72px; }
  .pj-block h2 { font-size: 40px; line-height: 42px; }
  .pj-next { padding: 64px 16px; min-height: 0; }
  .pj-next h3 { font-size: 64px; line-height: 64px; }
  .pj-next svg { width: 40px; height: 40px; }

  .po { padding: 104px 16px 0; }
  .po__h1 { font-size: 40px; line-height: 42px; }
  .po__hero { width: auto; }
  .po__body { width: auto; }
  .po__cta { flex-direction: column; align-items: flex-start; }
  .po__relg { grid-template-columns: 1fr; gap: 40px; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .bl__grid, .po__relg { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet en vertical: las secciones de 100vh dejan huecos enormes; se ajustan al contenido */
@media (min-width: 768px) and (max-width: 1023px) {
  .pg-hero, .pg-services .pg-hero { min-height: 0; padding: 150px 32px 72px; }
  .sv-grid { min-height: 0; padding: 40px 0 72px; }
  .ab-believe, .bl { min-height: 0; }
  .bl { padding-top: 140px; }
  /* Sobre mí: las medidas de escritorio (u) se quedan diminutas y se solapan; se apilan */
  .ab-how { padding: 64px 32px 0; }
  .ab-how__head { padding: 0; }
  .ab-how__p { position: static; width: auto; max-width: 560px; margin-top: 16px; }
  .ab-steps { grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 40px; }
  .ab-step, .ab-how--sd .ab-step { min-height: 0; padding: 28px; }
  .ab-step h3 { font-size: 40px; line-height: 42px; margin-top: 40px; min-height: 0; }
  .ab-partner { padding: 72px 32px 88px; }
  .ab-partner__in { padding-left: 0; flex-direction: column; gap: 24px; }
  .ab-partner__t { font-size: 88px; line-height: 88px; white-space: normal; }
  .ab-partner__p { width: auto; max-width: 560px; margin-top: 0; }
}