/* Explay Visual TGN — catálogo por estados.
   Usado por /servicios y /intervencion. Mismo lenguaje que site.css:
   rejilla a todo el ancho, filetes de 1 px, sin sombras, un solo acento
   y el vermellón --signal reservado a lo crítico. */

/* ============================================================
   1. Selector de urgencia (solo HTML/CSS, sin JS)
   ============================================================ */
.filtro{width:100%}
.filtro-in{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.filtro-barra{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--line-fuerte);
  border-bottom:1px solid var(--line-fuerte);padding:0 var(--gutter);max-width:1680px;margin:0 auto}
.filtro-barra span{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  font-weight:600;align-self:center;padding:14px 20px 14px 0}
.filtro-barra label{font-size:14.5px;font-weight:600;padding:16px 22px;cursor:pointer;
  border-left:1px solid var(--line);color:var(--muted);transition:color .15s,background .15s;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.filtro-barra label:hover{color:var(--ink);background:var(--paper-2)}
#f-todo:checked ~ .filtro-barra label[for="f-todo"],
#f-ya:checked   ~ .filtro-barra label[for="f-ya"],
#f-plan:checked ~ .filtro-barra label[for="f-plan"]{color:var(--ink);border-bottom-color:var(--ink)}
#f-ya:checked ~ .filtro-barra label[for="f-ya"]{color:var(--signal);border-bottom-color:var(--signal)}
.filtro-in:focus-visible ~ .filtro-barra label[for="f-todo"]{outline:2px solid var(--accent);outline-offset:-4px}
#f-ya:focus-visible   ~ .filtro-barra label[for="f-ya"]{outline:2px solid var(--accent);outline-offset:-4px}
#f-plan:focus-visible ~ .filtro-barra label[for="f-plan"]{outline:2px solid var(--accent);outline-offset:-4px}
#f-ya:checked   ~ .grupo-plan,
#f-plan:checked ~ .grupo-ya{display:none}
@media(max-width:560px){
  .filtro-barra{padding:0 var(--gutter) 0}
  .filtro-barra span{flex-basis:100%;padding:12px 0 0}
  .filtro-barra label{padding:13px 16px;border-left:0;border-right:1px solid var(--line)}
}

/* ============================================================
   2. Grupos de intervenciones
   ============================================================ */
.grupo{padding:clamp(40px,5vw,72px) 0 0}
.grupo-rot{padding:0 var(--gutter);max-width:1680px;margin:0 auto;
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2vw,32px);align-items:end}
.grupo-rot > div{grid-column:1/8}
.grupo-rot .num{color:var(--num)}
.grupo-rot h2{margin:6px 0 10px}
.grupo-rot p{color:var(--muted);max-width:52ch;margin:0 0 clamp(24px,3vw,40px)}
.grupo-ya .grupo-rot h2{color:var(--signal)}
.grupo-ya .grupo-rot .num{color:var(--signal);opacity:.4}
.grupo-ya .senal{display:inline-block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:#fff;background:var(--signal);padding:5px 10px;border-radius:var(--r);margin:0 0 4px}
@media(max-width:880px){.grupo-rot{grid-template-columns:1fr}.grupo-rot > div{grid-column:1/-1}}

/* ---- ficha ancha horizontal ---- */
.ficha{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:stretch;
  border-top:1px solid var(--line-fuerte);width:100%}
.ficha:last-child{border-bottom:1px solid var(--line-fuerte)}
.ficha-inv{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.ficha-inv .ficha-foto{order:2}
.ficha-inv .ficha-cuerpo{order:1}
.ficha-foto{margin:0;position:relative;background:var(--paper-2);min-height:280px}
.ficha-foto img{width:100%;height:100%;object-fit:cover;filter:saturate(.82)}
.ficha-cuerpo{padding:clamp(28px,3.4vw,52px) var(--gutter)}
.ficha-inv .ficha-cuerpo{padding-left:var(--gutter)}
.ficha-estado{font-family:var(--serif);font-size:clamp(19px,2vw,26px);line-height:1.25;
  margin:0 0 6px;font-weight:400}
.grupo-ya .ficha-estado{color:var(--signal)}
.ficha h3{margin:0 0 10px}
.ficha-resumen{color:var(--muted);max-width:58ch;margin:0 0 18px}
.ficha-plazo{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--ink);border-top:1px solid var(--line);padding-top:12px;margin:0 0 12px}
.ficha-lista{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:8px;max-width:60ch}
.ficha-lista li{font-size:14.5px;color:var(--muted);padding-left:20px;position:relative;line-height:1.45}
.ficha-lista li::before{content:"—";position:absolute;left:0;color:var(--num)}
.ficha-pie{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;
  border-top:1px solid var(--line);padding-top:18px}
.ficha-precio{font-size:clamp(26px,3vw,38px);font-weight:700;letter-spacing:-.02em;line-height:1;
  font-variant-numeric:tabular-nums}
.ficha-precio small{display:block;font-size:12px;font-weight:500;color:var(--muted);
  letter-spacing:.04em;margin-top:5px}
.ficha-pie form{margin:0}
@media(max-width:880px){
  .ficha,.ficha-inv{grid-template-columns:1fr}
  .ficha-inv .ficha-foto,.ficha-inv .ficha-cuerpo{order:initial}
  .ficha-foto{min-height:0;aspect-ratio:16/9}
}

/* ============================================================
   3. Tabla comparativa
   ============================================================ */
.cmp{min-width:1120px;border-collapse:collapse;font-size:14.5px}
.cmp caption{text-align:left;color:var(--muted);font-size:14px;padding:0 0 14px}
.cmp th,.cmp td{border:1px solid var(--line);padding:14px 16px;text-align:left;vertical-align:top}
.cmp thead th{background:var(--ink);color:var(--paper);font-size:15px;line-height:1.3;border-color:var(--ink-2)}
.cmp thead th:first-child{background:transparent;border-color:var(--line);color:var(--muted);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.cmp tbody th{background:var(--paper-2);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);width:170px;font-weight:600}
.cmp td{color:var(--muted);line-height:1.45}
.cmp .cmp-urg{color:var(--signal);font-weight:600}
.cmp .cmp-precio{color:var(--ink);font-weight:700;font-size:17px;font-variant-numeric:tabular-nums}
.cmp thead th a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}
.cmp thead th a:hover{border-bottom-color:#fff}

/* ============================================================
   4. Ficha de intervención — diagnóstico
   ============================================================ */
.diag{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:stretch;width:100%}
.diag-txt{padding:clamp(44px,6vw,104px) clamp(24px,3vw,56px) clamp(40px,5vw,88px) var(--gutter)}
.diag-eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  font-weight:600;margin:0 0 18px}
.diag h1{max-width:16ch}
.diag-urg h1{color:var(--signal)}
.diag-nombre{font-family:var(--serif);font-size:clamp(20px,2.2vw,29px);color:var(--muted);
  margin:18px 0 0;font-weight:400}
.diag-para{border-top:1px solid var(--line-fuerte);margin-top:clamp(28px,3.5vw,48px);padding-top:18px;
  max-width:52ch}
.diag-para b{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 8px}
.diag-para p{margin:0;font-size:18px;line-height:1.5}
.diag-foto{margin:0;background:var(--paper-2);min-height:420px}
.diag-foto img{width:100%;height:100%;object-fit:cover;filter:saturate(.82)}
@media(max-width:880px){
  .diag{grid-template-columns:1fr}
  .diag-txt{padding:clamp(32px,7vw,56px) var(--gutter)}
  .diag-foto{min-height:0;aspect-ratio:3/2}
}

/* ---- pasos cronológicos ---- */
.pasos{list-style:none;counter-reset:paso;margin:0;padding:0}
.pasos li{counter-increment:paso;display:grid;grid-template-columns:clamp(58px,7vw,108px) 1fr;
  gap:clamp(16px,2.4vw,36px);border-top:1px solid var(--line);padding:20px 0;align-items:start}
.pasos li:last-child{border-bottom:1px solid var(--line)}
.pasos li::before{content:counter(paso,decimal-leading-zero);font-family:var(--serif);font-weight:400;
  font-size:clamp(30px,4vw,54px);line-height:.9;color:var(--num);font-variant-numeric:tabular-nums}
.pasos li p{margin:0;font-size:clamp(16px,1.5vw,19px);line-height:1.45;max-width:58ch}
.marco-tiempo{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:baseline;
  border-top:1px solid var(--ink);padding-top:14px;margin:0 0 6px}
.marco-tiempo b{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.marco-tiempo span{font-size:clamp(18px,2vw,25px);font-weight:700;letter-spacing:-.01em}
.marco-urg span{color:var(--signal)}

/* ---- límite ---- */
.limite{border:1px solid var(--signal);border-left-width:4px;background:#fff;
  padding:clamp(24px,3vw,44px)}
.limite b{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--signal);margin:0 0 12px}
.limite p{margin:0;font-family:var(--serif);font-size:clamp(20px,2.4vw,30px);line-height:1.35;
  max-width:44ch}

/* ---- complementos + compra ---- */
.mods{list-style:none;margin:0;padding:0;display:grid;gap:0;
  grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
.mods li{border-bottom:1px solid var(--line)}
.mods li:nth-child(odd){border-right:1px solid var(--line)}
.mod{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:18px 20px 18px 0;cursor:pointer;
  align-items:start;height:100%;transition:background .15s}
.mods li:nth-child(odd) .mod{padding-right:20px}
.mod:hover{background:var(--paper-2)}
.mod input{margin:4px 0 0;width:19px;height:19px;accent-color:var(--accent);flex:0 0 auto}
.mod-n{display:block;font-weight:700;font-size:16px;letter-spacing:-.01em}
.mod-n i{font-style:normal;color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.mod-t{display:block;font-size:14px;color:var(--muted);line-height:1.45;margin-top:5px;max-width:46ch}
@media(max-width:880px){
  .mods{grid-template-columns:1fr}
  .mods li:nth-child(odd){border-right:0}
  .mods li:nth-child(odd) .mod{padding-right:0}
}
.compra-pie{border-top:1px solid var(--ink);margin-top:clamp(24px,3vw,40px);padding-top:22px;
  display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}
.compra-pie .btn{font-size:17px;padding:16px 28px;font-variant-numeric:tabular-nums}
.compra-nota{font-size:13.5px;color:var(--muted);max-width:42ch;margin:0}

/* ---- tira de las otras intervenciones ---- */
.tira{display:flex;gap:0;overflow-x:auto;border-top:1px solid var(--line-fuerte);
  border-bottom:1px solid var(--line-fuerte);scrollbar-width:thin}
.tira a{flex:0 0 clamp(230px,23vw,300px);padding:20px 22px;text-decoration:none;
  border-right:1px solid var(--line);transition:background .15s}
.tira a:last-child{border-right:0}
.tira a:hover{background:var(--paper-2)}
.tira em{font-style:normal;font-family:var(--serif);font-size:14.5px;color:var(--muted);
  display:block;line-height:1.35;min-height:2.7em}
.tira strong{display:block;font-size:16.5px;letter-spacing:-.01em;margin:10px 0 4px}
.tira span{font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.tira .urg em{color:var(--signal)}

/* ---- página no encontrada ---- */
.nf{padding:clamp(56px,9vw,140px) 0}
.nf .num{color:var(--num)}
.nf h1{margin:8px 0 16px}
.nf p{color:var(--muted);max-width:52ch}


/* ── índice del encabezado del catálogo (evita el «h1 + dos párrafos») ── */
.col-8-12{grid-column:8/13}
@media(max-width:880px){ .col-8-12{grid-column:1/-1} }
.cab-indice{align-self:end;border-top:1px solid var(--ink);padding-top:14px}
.cab-indice-rot{margin:0 0 6px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--muted)}
.cab-indice ul{list-style:none;margin:0;padding:0}
.cab-indice li{border-bottom:1px solid var(--line)}
.cab-indice a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 14px;padding:11px 0;
  text-decoration:none;transition:background .18s ease}
.cab-indice a:hover{background:var(--paper-2)}
.cab-indice-q{font-size:15px;font-weight:600;letter-spacing:-.01em}
.cab-indice-e{grid-column:1;font-family:var(--serif);font-size:14px;color:var(--muted);line-height:1.35}
.cab-indice-p{grid-column:2;grid-row:1/3;align-self:center;font-size:16px;font-weight:700;
  font-variant-numeric:tabular-nums}
.cab-indice-urg .cab-indice-e{color:var(--signal)}
.cab-indice-pie{margin:12px 0 0;font-size:12.5px;color:var(--muted)}
@media(max-width:880px){ .cab-indice{margin-top:30px} }