/* efecto 2027 — #servicios · índice editorial numerado + figura voxel por servicio */

.srv { position: relative; padding-block: clamp(4.6rem, 9.5vh, 7rem) 0; }

/* ── cabecera: una sola fila, en el ancho de la lista ── */
.srv-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2.5rem; width: 58%; }
.srv-head__l { display: grid; gap: clamp(.5rem, 1.2vh, .9rem); }
.srv-title { font-size: clamp(2.6rem, min(4.6vw, 8vh), 4.7rem); line-height: .94; white-space: nowrap; }
.srv-head__r { display: grid; gap: .8rem; justify-items: start; max-width: 31ch; padding-bottom: .35rem; }
.srv-head .lead { font-size: var(--step-0); max-width: 31ch; }
.srv-tally { display: flex; flex-wrap: wrap; gap: .35rem 1.4rem; color: var(--muted); font-size: .78rem; letter-spacing: .06em; }
.srv-tally b { color: var(--paper); font-weight: 500; }

/* ── cuerpo: lista ── */
.srv-body { margin-top: clamp(1rem, 3vh, 2.6rem); }
.srv-list { width: 58%; list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }

.srv-row { --c: var(--accent); position: relative; isolation: isolate; border-top: 1px solid var(--line); }
.srv-row::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 15%, transparent), transparent 82%); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .7s var(--ease-out); }
.srv-row::after { content: ''; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--ease-out); }
.srv-row:hover::before, .srv-row.is-hot::before, .srv-row.is-open::before { transform: scaleY(1); }
.srv-row:hover::after, .srv-row.is-hot::after, .srv-row.is-open::after { transform: scaleX(1); }
/* un solo resaltado por vez: si hay una fila "caliente", la abierta se apaga */
.srv-list.has-hot .srv-row.is-open:not(.is-hot)::before { transform: scaleY(0); }
.srv-list.has-hot .srv-row.is-open:not(.is-hot)::after { transform: scaleX(0); }

.srv-row__h { margin: 0; font: inherit; }
.srv-row__btn { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto 2.4rem; grid-template-areas: "num name count plus" ". tags count plus"; align-items: center; column-gap: .6rem; row-gap: .3rem; width: 100%; padding: clamp(.55rem, 1.45vh, 1.1rem) 0; text-align: left; cursor: pointer; }
.srv-row__btn:focus-visible { outline-offset: -3px; border-radius: 10px; }
.srv-num { grid-area: num; align-self: start; padding-top: .8em; font-size: 1rem; letter-spacing: .08em; color: var(--muted); transition: color .4s var(--ease-out); }
.srv-name { grid-area: name; position: relative; display: block; font-size: clamp(1.8rem, min(.9rem + 2.3vw, 5.4vh), 3.5rem); line-height: .98; letter-spacing: -.035em; text-wrap: balance; transition: transform .7s var(--ease-out), color .4s var(--ease-out); }
.srv-name::before { content: ''; position: absolute; left: -.62em; top: .34em; width: .3em; height: .3em; background: var(--accent); box-shadow: .3em .3em 0 -.06em var(--cobalt); opacity: 0; transform: scale(.2) rotate(-30deg); transition: opacity .4s var(--ease-out), transform .7s var(--ease-out); }
.srv-tags { grid-area: tags; color: var(--muted); font-size: .78rem; letter-spacing: .05em; transition: color .4s var(--ease-out), transform .7s var(--ease-out); }
.srv-count { grid-area: count; justify-self: end; color: var(--muted); font-size: .78rem; letter-spacing: .05em; white-space: nowrap; transition: color .4s var(--ease-out); }
.srv-count b { color: var(--paper-2); font-weight: 500; }
.srv-row:hover .srv-name, .srv-row.is-hot .srv-name { transform: translateX(.5em); }
.srv-row:hover .srv-name, .srv-row.is-hot .srv-name, .srv-row.is-open .srv-name { color: var(--accent); }
.srv-row:hover .srv-name::before, .srv-row.is-hot .srv-name::before, .srv-row.is-open .srv-name::before { opacity: 1; transform: none; }
.srv-row:hover .srv-tags, .srv-row.is-hot .srv-tags { transform: translateX(.5em); }
.srv-row:hover .srv-tags, .srv-row.is-hot .srv-tags, .srv-row.is-open .srv-tags { color: var(--paper-2); }
.srv-row:hover .srv-num, .srv-row.is-hot .srv-num, .srv-row.is-open .srv-num { color: var(--accent); }
.srv-row:hover .srv-count, .srv-row.is-hot .srv-count, .srv-row.is-open .srv-count { color: var(--paper-2); }
.srv-list.has-hot .srv-row.is-open:not(.is-hot) .srv-name { transform: none; color: var(--paper); }
.srv-list.has-hot .srv-row.is-open:not(.is-hot) .srv-name::before { opacity: 0; }
.srv-list.has-hot .srv-row.is-open:not(.is-hot) .srv-tags { transform: none; color: var(--muted); }
.srv-list.has-hot .srv-row.is-open:not(.is-hot) .srv-num { color: var(--muted); }

/* + / − pixelado */
.srv-plus { grid-area: plus; position: relative; justify-self: end; width: 22px; height: 22px; }
.srv-plus::before, .srv-plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 3px; margin: -1.5px 0 0 -9px; background: var(--paper); transition: transform .6s var(--ease-out), background .4s var(--ease-out); }
.srv-plus::after { transform: rotate(90deg); }
.srv-row:hover .srv-plus::before, .srv-row:hover .srv-plus::after, .srv-row.is-hot .srv-plus::before, .srv-row.is-hot .srv-plus::after, .srv-row.is-open .srv-plus::before, .srv-row.is-open .srv-plus::after { background: var(--accent); }
.srv-row.is-open .srv-plus::after { transform: rotate(0deg) scaleX(.0001); }

/* panel (acordeón) */
.srv-panel { display: grid; grid-template-rows: 1fr; }
.js .srv-panel { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .8s var(--ease-out), visibility 0s linear .8s; }
.js .srv-row.is-open .srv-panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .8s var(--ease-out), visibility 0s; }
.srv-panel__in { min-height: 0; overflow: hidden; }
.srv-panel__body { padding-left: 4rem; padding-right: 2.4rem; }
.srv-hole { display: none; }
.srv-tagline { font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); line-height: 1.05; letter-spacing: -.02em; color: var(--paper); max-width: 24ch; margin-top: .2rem; opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease-out), transform .8s var(--ease-out); }
.srv-deliv { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 2rem; }
.srv-deliv li { position: relative; padding-left: 1.5rem; color: var(--paper-2); font-size: var(--step-0); line-height: 1.4; opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease-out), transform .8s var(--ease-out); }
.srv-deliv li::before { content: ''; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; background: var(--accent); box-shadow: 4px 4px 0 -1px var(--cobalt); }
/* caso real del servicio (visibles(): público, con URL, nunca privado) + miniatura de assets/img/casos/ */
.srv-deliv li.srv-case { padding-left: 0; }
.srv-deliv li.srv-case::before { display: none; }
.srv-case__a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: .55rem .95rem .55rem .6rem; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--paper); transition: box-shadow .3s var(--ease-out), background .3s var(--ease-out); }
.srv-case__a.has-th { grid-template-columns: auto minmax(0, 1fr) auto; }
.srv-case__th { display: block; width: 96px; height: 60px; border-radius: 7px; overflow: hidden; background: var(--line); }
.srv-case__th--ph { display: grid; place-items: center; color: var(--c, var(--accent)); font-size: 1.35rem; letter-spacing: .04em; background: color-mix(in srgb, var(--c, var(--accent)) 14%, var(--ink)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, var(--accent)) 40%, transparent); }
.srv-case__th img { display: block; width: 100%; height: 100%; object-fit: cover; }
.srv-case__t { display: grid; gap: .1rem; min-width: 0; }
.srv-case__k { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.srv-case__t b { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; line-height: 1.1; letter-spacing: -.01em; overflow-wrap: anywhere; }
.srv-case__m { font-size: .84rem; color: var(--paper-2); }
.srv-case__go { color: var(--c, var(--accent)); font-size: 1.1rem; transition: transform .4s var(--ease-out); }
.srv-case__a:hover, .srv-case__a:focus-visible { box-shadow: inset 0 0 0 1px var(--c, var(--accent)); background: rgba(241, 238, 230, .04); }
.srv-case__a:hover .srv-case__go, .srv-case__a:focus-visible .srv-case__go { transform: translate(3px, -3px); }
.srv-case--none { display: grid; gap: .2rem; align-content: start; }
.srv-hole__cap { display: none; }
.srv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.6rem; margin: 1.3rem 0 1.5rem; }
.srv-cta { display: inline-flex; align-items: center; gap: .8em; padding: .85em 1.3em; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--paper); transition: background .5s var(--ease-out), color .4s var(--ease-out), box-shadow .4s, opacity .5s var(--ease-out), transform .8s var(--ease-out); opacity: 0; transform: translateY(14px); }
.srv-cta .arrow { display: inline-block; transition: transform .5s var(--ease-out); }
.srv-cta:hover, .srv-cta:focus-visible { background: var(--accent); color: var(--ink); box-shadow: none; }
.srv-cta:hover .arrow { transform: translateX(4px) rotate(-45deg); }
.srv-link { color: var(--paper-2); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .35em; opacity: 0; transform: translateY(14px); transition: color .3s, text-decoration-color .3s, opacity .5s var(--ease-out), transform .8s var(--ease-out); }
.srv-link:hover, .srv-link:focus-visible { color: var(--paper); text-decoration-color: var(--accent); }
.srv-row.is-open .srv-tagline, .srv-row.is-open .srv-deliv li, .srv-row.is-open .srv-cta, .srv-row.is-open .srv-link { opacity: 1; transform: none; }
.srv-row.is-open .srv-tagline { transition-delay: .12s; }
.srv-row.is-open .srv-deliv li:nth-child(1) { transition-delay: .2s; } .srv-row.is-open .srv-deliv li:nth-child(2) { transition-delay: .26s; }
.srv-row.is-open .srv-cta { transition-delay: .34s; } .srv-row.is-open .srv-link { transition-delay: .4s; }
html:not(.js) .srv-tagline, html:not(.js) .srv-deliv li, html:not(.js) .srv-cta, html:not(.js) .srv-link { opacity: 1; transform: none; }

/* ── escenario: marcas de encuadre y leyenda pegadas a la figura real (JS fija --bx/--by/--bw/--bh en px) ── */
.srv-stage { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .16s linear, visibility 0s .16s; --bx: 62vw; --by: 20vh; --bw: 30vw; --bh: 50vh; }
.srv.is-live .srv-stage { opacity: 1; visibility: visible; transition: opacity .35s var(--ease-out), visibility 0s; }
.srv-stage__box { position: absolute; left: var(--bx); top: var(--by); width: var(--bw); height: var(--bh); transition: left .9s var(--ease-out), top .9s var(--ease-out), width .9s var(--ease-out), height .9s var(--ease-out); }
.srv-stage__mark { position: absolute; width: 16px; height: 16px; border: 0 solid var(--line-strong); }
.srv-stage__mark--tl { left: -10px; top: -10px; border-left-width: 1px; border-top-width: 1px; }
.srv-stage__mark--tr { right: -10px; top: -10px; border-right-width: 1px; border-top-width: 1px; }
.srv-stage__mark--bl { left: -10px; bottom: -10px; border-left-width: 1px; border-bottom-width: 1px; }
.srv-stage__mark--br { right: -10px; bottom: -10px; border-right-width: 1px; border-bottom-width: 1px; }
.srv-stage__cap { position: absolute; left: var(--bx); top: calc(var(--by) + var(--bh) + 22px); display: grid; gap: .35rem; transition: left .9s var(--ease-out), top .9s var(--ease-out); }
.srv-stage__name { color: var(--paper); font-size: .78rem; letter-spacing: .08em; }
.srv-stage__meta { color: var(--muted); font-size: .78rem; letter-spacing: .08em; }
.srv-stage__dots { position: absolute; left: calc(var(--bx) + var(--bw)); top: calc(var(--by) + var(--bh) + 22px); transform: translateX(-100%); display: flex; gap: 6px; transition: left .9s var(--ease-out), top .9s var(--ease-out); }
.srv-stage__dots i { width: 8px; height: 8px; background: var(--line-strong); transition: background .3s, transform .5s var(--ease-out); }
.srv-stage__dots i.is-on { background: var(--accent); transform: scale(1.5); }

/* ── pantallas medianas ── */
@media (max-width: 1180px) {
  .srv-head, .srv-list { width: 58%; }
  .srv-tags { display: none; }
  .srv-row__btn { grid-template-areas: "num name count plus"; }
  .srv-deliv { grid-template-columns: 1fr; }
  .srv-num { padding-top: .55em; align-self: center; }
  .srv-head__r { display: none; }
}

/* ── mobile: cabecera fija + la lista sube como una cortina; la figura vive en la ventana bajo el título y, al abrir una fila, en su propia ventana ── */
@media (max-width: 759px) {
  .srv { padding-top: 0; }
  .srv-head { position: sticky; top: 0; width: auto; display: grid; justify-items: start; min-height: 58svh; padding-top: clamp(5.2rem, 22vw, 7rem); align-content: start; gap: 1.2rem; }
  .srv-title { font-size: var(--step-4); white-space: normal; }
  .srv-head__r { display: grid; padding: 0; }
  .srv-head > * { transition: opacity .5s var(--ease-out); }
  .srv.has-open .srv-head > * { opacity: 0 !important; }
  .srv-tally { display: none; }
  .srv-body { position: relative; z-index: 2; margin-top: 0; padding-bottom: 1.5rem; }
  .srv-list { width: auto; margin-inline: calc(var(--gutter) * -1); border-bottom: 0; isolation: isolate; }   /* sin fondo propio: cada fila y cada cuerpo lo tienen; el hueco queda transparente y deja ver la figura */
  .srv-row__h { background: var(--ink); padding-inline: var(--gutter); }
  .srv-row { border-top: 0; background: var(--ink); }
  .srv-row__h { box-shadow: inset 0 1px 0 var(--line); }   /* fila cerrada = cortina opaca (sin fugas en el borde) */
  .srv-row.is-open { background: transparent; }   /* abierta: el hueco deja ver la figura; cabecera y cuerpo traen su propio fondo */
  .srv-row__btn { grid-template-columns: 2.6rem minmax(0, 1fr) 2rem; grid-template-areas: "num name plus"; padding-block: 1.15rem; }
  .srv-count, .srv-tags { display: none; }
  .srv-num { align-self: center; padding-top: 0; }
  .srv-name { font-size: clamp(1.7rem, 1.1rem + 3.4vw, 2.5rem); }
  .srv-name::before { display: none; }
  .srv-row:hover .srv-name, .srv-row.is-hot .srv-name, .srv-row.is-open .srv-name { transform: none; }
  .srv-hole { display: block; position: relative; height: 31svh; max-height: 300px; }
  .srv-hole__cap { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 6px; display: flex; justify-content: space-between; gap: .6rem; margin: 0; font-size: .66rem; letter-spacing: .03em; color: var(--muted); white-space: nowrap; }
  .srv-hole__cap b { color: var(--paper); font-weight: 500; }
  .srv-hole__cap span:last-child { opacity: .8; }
  .srv-deliv { grid-template-columns: 1fr; }
  .srv-panel__body { background: var(--ink); padding: .2rem var(--gutter) 0 calc(var(--gutter) + 2.6rem); }
  .srv-stage { display: none; }
}
@media (hover: none) { .srv-row:hover::before { transform: scaleY(0); } .srv-row.is-open::before { transform: scaleY(1); } }