/* ============================================================
   LAS PAGINAS DE LA AGENCIA (metodo, nosotros, contacto, clientes,
   resultados, preguntas). Se apoyan en nicho.css, inicio.css,
   servicio.css y menu.css; aqui solo lo que tienen ellas y nadie mas.
   Eric, 12/09/2026: «del mismo modo que esta toda la pagina».
   Rejillas que cierran fila en movil y ordenador.
   ============================================================ */
@media (min-width:900px){
  .sec > .vias2:not(.movil):not(.ig-grid),.hero > .vias2,.sec > .lectura2:not(.movil):not(.ig-grid),
  .hero > .idx{max-width:1000px;}
}
.vias2,.lectura2,.idx{width:100%;}

/* ---------- las 7 reglas: 4 arriba y 3 abajo ---------- */
@media (min-width:860px){
  .probs-7{grid-template-columns:repeat(12,1fr);}
  .probs-7 .prob{grid-column:span 3;}
  .probs-7 .prob:nth-child(n+5){grid-column:span 4;}
}
@media (min-width:600px) and (max-width:859px){
  .probs-7{grid-template-columns:repeat(2,1fr);}
  .probs-7 .prob:last-child{grid-column:1 / -1;}
}

/* ---------- 11 resultados: 3-3-3 y los 2 ultimos a media fila ---------- */
@media (min-width:860px){
  .res3s-11{grid-template-columns:repeat(12,1fr);}
  .res3s-11 .res3{grid-column:span 4;}
  .res3s-11 .res3:nth-child(n+10){grid-column:span 6;}
}
@media (min-width:600px) and (max-width:859px){
  .res3s-11{grid-template-columns:repeat(2,1fr);}
  .res3s-11 .res3:last-child{grid-column:1 / -1;}
}
.res3 .chips-sit{margin-top:.7rem;}
a.res3-img{display:block;}

/* ---------- circuito de 3 pasos ---------- */
@media (min-width:621px){.circ.circ-3{grid-template-columns:repeat(3,1fr);max-width:760px;}}
.circ.circ-3 .cx:last-child{grid-column:auto;}
@media (max-width:620px){.circ.circ-3 .cx:last-child{grid-column:1 / -1;}}

/* ---------- contacto: las vias ---------- */
.vias2{display:grid;grid-template-columns:1fr;gap:14px;margin:2.4rem auto 0;}
@media (min-width:700px){.vias2-2{grid-template-columns:repeat(2,1fr);max-width:820px;}}
.via2{display:flex;flex-direction:column;align-items:center;gap:.45rem;padding:1.8rem 1.4rem;background:var(--sup);border:1px solid var(--linea-f);border-radius:14px;text-align:center;text-decoration:none;color:var(--texto);transition:border-color .2s var(--ease),transform .2s var(--ease);}
.via2:hover{border-color:var(--verde);transform:translateY(-2px);}
.via2-wa{border:2px solid var(--wa);box-shadow:0 14px 34px rgba(37,211,102,.14);}
.via2-i{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--verde);}
.via2-wa .via2-i{background:var(--wa);}
.via2-ic{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.via2-wa .via2-ic{stroke:#08130C;}
.via2-k{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--texto-3);margin-top:.4rem;}
.via2-t{font-family:'Archivo',sans-serif;font-size:1.35rem;font-weight:700;}
.via2-p{font-size:.92rem;color:var(--texto-2);line-height:1.5;max-width:34ch;}
.via2-b{margin-top:.6rem;padding:.8rem 1.4rem;border-radius:6px;background:var(--tinta);color:#fff;font-weight:700;font-size:.95rem;}
.via2-wa .via2-b{background:var(--wa);color:#08130C;}

/* ---------- por que se ensenan asi: lectura centrada ---------- */
.lectura2{margin:2rem auto 0;max-width:62ch;display:flex;flex-direction:column;gap:1.1rem;}
.lectura2 p{font-size:1.05rem;line-height:1.7;color:var(--texto-2);text-wrap:pretty;}
.lectura2 b{color:var(--texto);}
.lectura2 mark{background:rgba(35,122,74,.12);color:var(--texto);padding:0 .15em;}

/* ---------- preguntas: indice de temas ---------- */
.idx{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:2rem auto 0;}
.idx a{padding:.55rem 1rem;border-radius:99px;background:var(--sup);border:1px solid var(--linea-f);font-size:.9rem;font-weight:600;color:var(--texto);text-decoration:none;}
.idx a:hover{border-color:var(--verde);color:var(--verde);}
.pq > div a{color:var(--verde);font-weight:600;}

/* ---------- resultados: los paneles de cada servicio ----------
   Eric, 12/09/2026: «habia muchisimas mas capturas». En movil cada servicio es
   una fila que se desliza; en ordenador, 3 por fila. */
@media (min-width:900px){.sec > .pnlgs:not(.movil):not(.ig-grid){max-width:1100px;}}
.pnlgs{width:100%;display:flex;flex-direction:column;gap:2.4rem;margin:2.2rem auto 0;text-align:left;}
.pnlg-t{display:inline-flex;align-items:center;gap:.55rem;margin-bottom:.85rem;font-family:'Archivo',system-ui,sans-serif;font-weight:800;font-stretch:106%;font-size:1.2rem;color:var(--texto);text-decoration:none;}
.pnlg-t .chip-i{width:20px;height:20px;}
.pnlg-t::after{content:"→";color:var(--verde);font-size:1rem;}
.pnlg-t:hover{color:var(--verde);}
.pnls{display:grid;grid-auto-flow:column;grid-auto-columns:85%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem;-webkit-overflow-scrolling:touch;}
.pnls-1{grid-auto-columns:100%;}
@media (min-width:760px){
  .pnls{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);overflow:visible;padding-bottom:0;}
  .pnls-1{grid-template-columns:minmax(0,1fr);max-width:calc((100% - 24px) / 3);}
}
.pnl{margin:0;scroll-snap-align:start;display:flex;flex-direction:column;background:var(--sup);border:1px solid var(--linea);border-radius:12px;overflow:hidden;}
.pnl a{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--hondo);}
.pnl img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left;transition:transform .3s var(--ease);}
.pnl a:hover img{transform:scale(1.03);}
.pnl figcaption{padding:.75rem .9rem .95rem;font-size:.86rem;line-height:1.45;color:var(--texto-2);}

/* enlaces dentro de fichas numeradas y franjas: en verde, no el azul del navegador */
.prob a,.franja a{color:var(--verde);font-weight:600;text-underline-offset:3px;}

/* el camino de 6 pasos del metodo: 3 por fila en ordenador, 2 en tableta, 1 en movil */
@media (min-width:900px){.sec > .circ-6:not(.movil):not(.ig-grid){max-width:1100px;}}
.circ.circ-6{display:grid;grid-template-columns:1fr;gap:12px;}
@media (min-width:700px){.circ.circ-6{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1000px){.circ.circ-6{grid-template-columns:repeat(3,1fr);}}