/* ============================================================
   LAS PAGINAS DE SERVICIO · se apoyan en nicho.css (landings) e
   inicio.css (home: menu, pie, fichas, condiciones, anuncios). Aqui
   solo lo que tienen ellas y no la home: capturas del panel en marco
   de navegador, el problema en tarjetas, resultados con captura,
   ejemplos, comparativas, precio, preguntas frecuentes y el
   siguiente servicio. Eric, 12/09/2026: mismo formato que la home.
   CENTRADO fuera de las tarjetas, y rejillas que cierran fila.
   ============================================================ */

/* nicho.css limita en ordenador cada hijo de seccion a 56ch */
@media (min-width:900px){
  .sec > .caps:not(.movil):not(.ig-grid),.sec > .probs:not(.movil):not(.ig-grid),
  .sec > .res3s:not(.movil):not(.ig-grid),.sec > .mues:not(.movil):not(.ig-grid),
  .sec > .fichas:not(.movil):not(.ig-grid),.sec > .cmps:not(.movil):not(.ig-grid),
  .sec > .circ:not(.movil):not(.ig-grid),.sec > .pqs:not(.movil):not(.ig-grid),
  .sec > .chips:not(.movil):not(.ig-grid),.sec > .sig2:not(.movil):not(.ig-grid){max-width:1000px;}
}
.caps,.probs,.res3s,.mues,.fichas,.cmps,.pqs,.chips{width:100%;}

/* el titular de servicio: grande y en mayusculas como la home, un poco menor
   porque los de Denis son frases mas largas */
.hero .h1-srv{font-size:clamp(1.5rem,6.6vw,3.2rem);max-width:22ch;}
@media (min-width:900px){.hero .h1-srv{font-size:clamp(2.4rem,3.6vw,3.3rem);max-width:26ch;}}
.hero .h1-srv > span{display:inline;}

/* ---------- Asi se ve: capturas en marco de navegador ---------- */
.caps{display:grid;grid-template-columns:1fr;gap:16px;margin:2.6rem auto 0;}
@media (min-width:760px){.caps-3{grid-template-columns:1fr 1fr;} .caps-3 .cap-grande{grid-column:1 / -1;}}
.cap{margin:0;background:#fff;border:1px solid var(--linea-f);border-radius:12px;overflow:hidden;box-shadow:0 14px 40px rgba(27,26,24,.10);text-align:left;}
.cap-barra{display:flex;gap:6px;padding:.55rem .8rem;background:#F1EEE8;border-bottom:1px solid var(--linea);}
.cap-barra i{width:9px;height:9px;border-radius:50%;background:#D8D2C6;}
.cap img{display:block;width:100%;height:auto;}
.cap figcaption{padding:.7rem .9rem;font-size:.8rem;color:var(--texto-2);line-height:1.45;border-top:1px solid var(--linea);}

/* ---------- el problema: tarjetas numeradas ---------- */
.probs{display:grid;grid-template-columns:1fr;gap:14px;margin:2.6rem auto 0;}
@media (min-width:860px){.probs-3{grid-template-columns:repeat(3,1fr);} .probs-2,.probs-4{grid-template-columns:repeat(2,1fr);}}
.prob{background:var(--sup);border:1px solid var(--linea);border-radius:10px;padding:1.5rem 1.3rem;text-align:left;display:flex;flex-direction:column;gap:.8rem;}
.prob-n{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--marca);color:#fff;font-family:'Archivo',sans-serif;font-weight:700;font-size:1.05rem;}
.prob p{font-size:.95rem;line-height:1.55;color:var(--texto-2);}
.prob p b{display:block;color:var(--texto);font-size:1.02rem;margin-bottom:.3rem;}
.prob mark{background:rgba(35,122,74,.12);color:var(--texto);padding:0 .15em;}

/* ---------- resultados con captura ---------- */
.res3s{display:grid;grid-template-columns:1fr;gap:14px;margin:2.6rem auto 0;}
@media (min-width:860px){.res3s-3{grid-template-columns:repeat(3,1fr);} .res3s-2{grid-template-columns:repeat(2,1fr);}}
.res3{margin:0;background:var(--sup);border:1px solid var(--linea);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;text-align:left;}
.res3-img{background:#fff;border-bottom:1px solid var(--linea);aspect-ratio:16/7;overflow:hidden;}
.res3-img img{width:100%;height:100%;object-fit:cover;object-position:left top;display:block;}
.res3 figcaption{display:flex;flex-direction:column;gap:.25rem;padding:1rem 1.1rem 1.2rem;}
.res3-t{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--texto-3);}
.res3-n{font-family:'Archivo',sans-serif;font-stretch:100%;font-weight:800;font-size:1.8rem;line-height:1;color:var(--verde);}
.res3-n em{font-style:normal;font-family:'Inter',sans-serif;font-stretch:100%;font-weight:500;font-size:.85rem;color:var(--texto-2);margin-left:.3rem;}
.res3-d{font-size:.86rem;color:var(--texto-2);line-height:1.45;}

/* ---------- ejemplos de trabajo ---------- */
.mues{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:2.6rem auto 0;}
.mues-5 .mue:first-child,.mues-3 .mue:first-child{grid-column:1 / -1;}
@media (min-width:860px){.mues{grid-template-columns:repeat(3,1fr);} .mues-5 .mue:first-child{grid-column:span 2;} .mues-3 .mue:first-child{grid-column:auto;}}
.mue{margin:0;background:#fff;border:1px solid var(--linea);border-radius:10px;overflow:hidden;}
.mue img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;}
.mue figcaption{padding:.6rem .8rem;font-size:.78rem;color:var(--texto-2);text-align:left;}

/* ---------- que incluye: las fichas de las landings, rejilla que cierra ---------- */
.sec > .fichas{margin:2.6rem auto 0;}
@media (min-width:860px){.fichas-6,.fichas-3,.fichas-9{grid-template-columns:repeat(3,1fr);} .fichas-4,.fichas-2,.fichas-8{grid-template-columns:repeat(2,1fr);} .fichas-5{grid-template-columns:repeat(3,1fr);} .fichas-5 .fx:first-child{grid-column:span 2;}}

/* ---------- como lo hacemos: circuito con numero ---------- */
.cx-num{font-family:'Archivo',sans-serif;font-weight:800;font-size:1.3rem !important;color:#fff;}

/* ---------- comparativas: lo de siempre / aqui ---------- */
.cmps{display:grid;grid-template-columns:1fr;gap:14px;margin:2.6rem auto 0;}
@media (min-width:760px){.cmps{grid-template-columns:1fr 1fr;}}
.cmp{border-radius:12px;padding:1.4rem 1.3rem;text-align:left;display:flex;flex-direction:column;gap:.8rem;}
.cmp-no{background:transparent;border:1px dashed var(--linea-f);}
.cmp-si{background:var(--sup);border:2px solid var(--verde);box-shadow:0 12px 30px rgba(35,122,74,.12);}
.cmp-t{font-family:'Archivo',sans-serif;font-size:1.15rem;font-weight:700;}
.cmp-no .cmp-t{color:var(--texto-3);}
.cmp-si .cmp-t{color:var(--verde);}
.cmp ul{list-style:none;display:flex;flex-direction:column;gap:.6rem;}
.cmp li{display:grid;grid-template-columns:20px 1fr;gap:.55rem;font-size:.92rem;line-height:1.45;}
.cmp-no li{color:var(--texto-3);}
.cmp-i{width:18px;height:18px;margin-top:.12rem;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.cmp-no .cmp-i{stroke:#B9B2A6;}
.cmp-si .cmp-i{stroke:var(--verde);}
.cmp-total{margin-top:auto;padding-top:.6rem;border-top:1px solid var(--linea);font-family:'Archivo',sans-serif;font-stretch:100%;font-weight:800;font-size:1.4rem;}
.cmp-si .cmp-total{color:var(--verde);}

/* ---------- precio ---------- */
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin:1.8rem auto 0;}
.chips span{display:inline-flex;align-items:center;gap:.45rem;padding:.6rem 1rem;border-radius:99px;background:var(--sup);border:1px solid var(--linea-f);font-size:.9rem;font-weight:600;}
.chip-i{width:16px;height:16px;fill:none;stroke:var(--verde);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}

/* ---------- preguntas frecuentes, desplegables ---------- */
.pqs{display:flex;flex-direction:column;gap:10px;margin:2.4rem auto 0;max-width:760px;text-align:left;}
.pq{background:var(--sup);border:1px solid var(--linea);border-radius:10px;}
.pq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.15rem;font-weight:600;font-size:.98rem;}
.pq summary::-webkit-details-marker{display:none;}
.pq summary::after{content:"+";flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--fondo);color:var(--verde);font-size:1.1rem;font-weight:700;transition:transform .2s var(--ease);}
.pq[open] summary::after{transform:rotate(45deg);}
.pq > div{padding:0 1.15rem 1.1rem;font-size:.92rem;line-height:1.6;color:var(--texto-2);}
.pq > div b{color:var(--texto);}

/* ---------- siguiente servicio ---------- */
.sec-sig{padding-top:2.2rem;padding-bottom:2.8rem;}
.sig2{display:grid;grid-template-columns:1fr auto;gap:.2rem 1rem;align-items:center;margin:0 auto;max-width:760px;padding:1.3rem 1.4rem;background:var(--sup);border:1px solid var(--linea-f);border-radius:12px;text-align:left;text-decoration:none;color:var(--texto);transition:border-color .2s var(--ease);}
.sig2:hover{border-color:var(--verde);}
.sig2-k{grid-column:1;font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3);}
.sig2-n{grid-column:1;display:flex;align-items:center;gap:.5rem;font-family:'Archivo',sans-serif;font-size:1.35rem;font-weight:700;}
.sig2-d{grid-column:1;font-size:.88rem;color:var(--texto-2);line-height:1.45;}
.sig2-v{grid-column:2;grid-row:1 / span 3;font-weight:700;color:var(--verde);white-space:nowrap;}
.sig-i{width:22px;height:22px;fill:none;stroke:var(--verde);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}

/* ---------- ajustes tras revisar Meta Ads ---------- */
/* los pies de seccion: pequenos, en mono y apagados */
.franja{margin:1.4rem auto 0;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3);line-height:1.6;max-width:60ch;}
/* la cifra del hero, en una linea en ordenador */
@media (min-width:900px){.hero .quien{max-width:none;white-space:nowrap;}}
/* 7 fichas: 4 arriba y 3 abajo, sin una suelta */
@media (min-width:860px){.fichas-7{grid-template-columns:repeat(12,1fr);} .fichas-7 .fx{grid-column:span 3;} .fichas-7 .fx:nth-child(n+5){grid-column:span 4;}}
/* circuito de 4 pasos: 4 en fila arriba y 2x2 en movil. El de las landings
   es de 5 y deja el ultimo a lo ancho; aqui eso dejaba 2-1-1 */
@media (min-width:621px){.circ.circ-4{grid-template-columns:repeat(4,1fr);max-width:900px;}}
.circ.circ-4 .cx:last-child{grid-column:auto;}

/* ============================================================
   /servicios/ · «Todos los servicios». Eric: «que se entienda como
   combinar los 12». Los 12 en 4 grupos, la cadena, las parejas y las 9
   situaciones de por donde empezar.
   ============================================================ */
@media (min-width:900px){.sec > .grps:not(.movil):not(.ig-grid),.sec > .combos:not(.movil):not(.ig-grid),.sec > .sits:not(.movil):not(.ig-grid){max-width:1100px;}}
.grps,.combos,.sits{width:100%;}
.grps{display:grid;grid-template-columns:1fr;gap:14px;margin:2.6rem auto 0;}
@media (min-width:700px){.grps{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1100px){.grps{grid-template-columns:repeat(4,1fr);}}
.grp{background:var(--sup);border:1px solid var(--linea);border-radius:12px;padding:1.5rem 1rem 1rem;display:flex;flex-direction:column;align-items:center;gap:.35rem;text-align:center;}
.grp-t{font-family:'Archivo',sans-serif;font-size:1.12rem;font-weight:700;color:var(--verde);margin-top:.4rem;}
.grp-l{font-size:.84rem;color:var(--texto-3);line-height:1.4;text-wrap:balance;}
.grp-ss{align-self:stretch;display:flex;flex-direction:column;margin-top:.9rem;border-top:1px solid var(--linea);}
.grp-s{display:grid;grid-template-columns:22px 1fr;gap:.05rem .6rem;align-items:center;padding:.75rem .35rem;border-bottom:1px solid var(--linea);text-align:left;color:var(--texto);text-decoration:none;}
.grp-s:last-child{border-bottom:0;}
.grp-s:hover{background:var(--fondo);}
.grp-s b{font-size:.95rem;}
.grp-s small{grid-column:2;font-size:.78rem;color:var(--texto-3);line-height:1.35;}
.grp-si{width:20px;height:20px;grid-row:span 2;fill:none;stroke:var(--verde);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.combos{display:grid;grid-template-columns:1fr;gap:12px;margin:2rem auto 0;}
@media (min-width:700px){.combos-4,.combos-2,.combos-8{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1100px){.combos-4,.combos-8{grid-template-columns:repeat(4,1fr);}}
.combo b a{color:inherit;text-decoration:none;}
.combo b a:hover{color:var(--verde);}
.combo{background:var(--sup);border:1px solid var(--linea);border-radius:12px;padding:1.3rem 1.1rem;display:flex;flex-direction:column;align-items:center;gap:.55rem;text-align:center;}
.combo-i{display:flex;align-items:center;gap:.5rem;}
.combo-i i{font-style:normal;font-family:'Archivo',sans-serif;font-weight:800;font-size:1.3rem;color:var(--texto-3);}
.combo-ic{width:40px;height:40px;padding:9px;border-radius:50%;background:var(--verde);fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.combo b{font-size:1rem;}
.combo-f{font-size:.84rem;color:var(--texto-2);font-style:italic;line-height:1.4;}
.sits{display:grid;grid-template-columns:1fr;gap:12px;margin:2.6rem auto 0;}
@media (min-width:760px){.sits{grid-template-columns:repeat(3,1fr);}}
.sit{background:var(--sup);border:1px solid var(--linea);border-radius:12px;padding:1.3rem 1.2rem;display:flex;flex-direction:column;gap:.6rem;text-align:left;}
.sit-f{font-family:'Archivo',sans-serif;font-size:1.05rem;font-weight:700;line-height:1.3;}
.sit p{font-size:.88rem;color:var(--texto-2);line-height:1.5;}
.chips-sit{justify-content:flex-start;margin:auto 0 0;gap:.4rem;}
.chips-sit a{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .7rem;border-radius:99px;background:var(--fondo);border:1px solid var(--linea-f);font-size:.8rem;font-weight:700;color:var(--verde);text-decoration:none;}
.chips-sit a:hover{border-color:var(--verde);}
.chips-sit .chip-i{width:14px;height:14px;stroke:var(--verde);}
