/* servicio.css — CSS editorial compartido para páginas de servicio / interiores.
   Scopeado a .page-srv para no chocar con estilo.css (chrome) ni alterar el resto del sitio.
   Cargar DESPUÉS de estilo.css. Uso: envolver el contenido en <main class="page-srv">…</main>.
   Hero: por defecto en gradiente; añadir clase .has-img y setear --img para foto de fondo. */

.page-srv{
  --green-deep:#064a23;--paper:#fafaf7;--paper-2:#f2f0ea;
  --ink:#141414;--gray:#6b6b6b;--line:#e4e4e0;--accent:#a9762f;--gold:#d9c9a3;
  background:var(--paper);color:var(--ink);line-height:1.65;
}
.page-srv .wrap{padding:0 28px}
.page-srv section{padding:0}  /* anula el section{padding:70px} global de estilo.css */

/* hero de página */
.page-srv .page-head{position:relative;color:#fff;padding:100px 0 84px;overflow:hidden;background:linear-gradient(125deg,#064a23,#032613)}
.page-srv .page-head.has-img::before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,rgba(6,74,35,.92) 40%,rgba(6,74,35,.6) 100%),var(--img) center right/cover}
.page-srv .page-head .wrap{position:relative;z-index:2}
.page-srv .page-head .crumb{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.78);margin-bottom:22px}
.page-srv .page-head .crumb a:hover{color:var(--gold)}
.page-srv .page-head .crumb b{color:var(--gold)}
.page-srv .page-head h1{font-family:'Playfair Display';font-weight:900;font-size:68px;line-height:1;letter-spacing:-1.5px;margin-bottom:18px}
.page-srv .page-head h1 i{font-style:italic;font-weight:400;color:var(--gold)}
.page-srv .page-head .lead{font-size:18px;font-weight:300;color:rgba(255,255,255,.94);max-width:54ch;line-height:1.5}
.page-srv .page-head .rule{width:64px;height:3px;background:var(--gold);margin-top:28px}

/* sección */
.page-srv .sec{padding:76px 0}
.page-srv .sec-head{margin-bottom:34px}
.page-srv .sec-head .k{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gray);margin-bottom:12px}
.page-srv .sec-head h2{font-family:'Playfair Display';font-weight:900;font-size:50px;letter-spacing:-1px;line-height:1.05}
.page-srv .sec-head h2 i{font-weight:400;font-style:italic;color:var(--green)}
.page-srv .sec-head .sub{font-size:19px;font-weight:300;color:#4d4d4d;margin-top:20px;max-width:64ch;line-height:1.6}

/* cards in-house */
.page-srv .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.page-srv .svc{background:#fff;border:1px solid var(--line);border-top:3px solid var(--green);border-radius:6px;padding:30px 26px;transition:box-shadow .22s ease,border-color .22s ease}
.page-srv .svc:hover{box-shadow:0 14px 30px -16px rgba(0,0,0,.22);border-color:var(--green)}
.page-srv .svc .ic{width:42px;height:42px;background:#e8f0ea;border-radius:12px;padding:11px;box-sizing:content-box;color:var(--green-deep);margin-bottom:18px}
.page-srv .svc h3{font-family:'Playfair Display';font-weight:700;font-size:20px;margin-bottom:8px;line-height:1.2}
.page-srv .svc p{font-size:14.5px;font-weight:300;color:#555;line-height:1.55}

/* bloque especialista (opcional). El badge va FUERA del h3 (SEO: h3 = keyword limpia) */
.page-srv .ext-wrap{background:#fff;border:1px dashed var(--line);border-radius:8px;padding:8px}
.page-srv .ext{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
.page-srv .ext .item{padding:26px 28px;border-bottom:1px solid var(--line);display:flex;gap:16px;align-items:flex-start}
.page-srv .ext .item:nth-child(odd){border-right:1px solid var(--line)}
.page-srv .ext .item:nth-last-child(-n+2){border-bottom:none}
.page-srv .ext .ic{flex:0 0 auto;width:34px;height:34px;color:var(--accent);margin-top:2px}
.page-srv .ext h3{font-family:'Playfair Display';font-weight:700;font-size:18px;margin-bottom:4px}
.page-srv .ext p{font-size:13.5px;color:#5a5a5a;font-weight:300;line-height:1.5}
.page-srv .badge{display:inline-block;font-size:9px;letter-spacing:1px;text-transform:uppercase;color:#fff;background:var(--accent);padding:3px 8px;border-radius:2px;font-weight:700;margin-left:6px;vertical-align:middle}

/* variante foto-cards para svc-grid (páginas con fotos reales de sus técnicas) */
.page-srv .svc-grid.svc-photos{gap:18px}
.page-srv .svc-photos .svc{padding:0;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:box-shadow .25s ease,transform .25s ease}
.page-srv .svc-photos .svc:hover{box-shadow:0 18px 40px -18px rgba(0,0,0,.22);transform:translateY(-3px)}
.page-srv .svc-photos .svc .ph{aspect-ratio:16/10;overflow:hidden;border-bottom:2px solid var(--green);transition:border-color .25s ease}
.page-srv .svc-photos .svc:hover .ph{border-bottom-color:var(--accent)}
.page-srv .svc-photos .svc .ph img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.15) contrast(1.04);transition:transform .5s ease,filter .4s ease}
.page-srv .svc-photos .svc:hover .ph img{transform:scale(1.05);filter:grayscale(0)}
.page-srv .svc-photos .svc .bd{padding:20px 22px 24px}
.page-srv .svc-photos .svc .bd h3{font-family:'Playfair Display';font-weight:700;font-size:20px;color:var(--ink);margin-bottom:8px;line-height:1.2}
.page-srv .svc-photos .svc .bd p{font-size:13.5px;font-weight:300;color:#555;line-height:1.55}

/* galería (opcional, cualquier número de fotos) */
.page-srv .gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:14px;grid-auto-flow:row dense}
.page-srv .gallery-grid.g5{grid-auto-rows:170px}
.page-srv .gallery-grid a,.page-srv .gallery-grid figure{position:relative;display:block;overflow:hidden;border-radius:6px;margin:0}
.page-srv .gallery-grid > :nth-child(1){grid-column:1/3;grid-row:1/3}
.page-srv .gallery-grid > :nth-child(2){grid-column:3;grid-row:1}
.page-srv .gallery-grid > :nth-child(3){grid-column:4;grid-row:1}
.page-srv .gallery-grid > :nth-child(4){grid-column:3/5;grid-row:2}
/* variante de 5 fotos (.g5): foto principal alta (3 filas) + 4 auxiliares */
.page-srv .gallery-grid.g5 > :nth-child(1){grid-column:1/3;grid-row:1/4}
.page-srv .gallery-grid.g5 > :nth-child(2){grid-column:3;grid-row:1}
.page-srv .gallery-grid.g5 > :nth-child(3){grid-column:4;grid-row:1}
.page-srv .gallery-grid.g5 > :nth-child(4){grid-column:3/5;grid-row:2}
.page-srv .gallery-grid.g5 > :nth-child(5){grid-column:3/5;grid-row:3}
.page-srv .gallery-grid.g5 > :nth-child(1) img{object-position:50% 65%}
.page-srv .gallery-grid img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.1) contrast(1.04);transition:transform .4s ease}
.page-srv .gallery-grid a:hover img,.page-srv .gallery-grid figure:hover img{transform:scale(1.06)}
.page-srv .gallery-grid .cap{position:absolute;left:0;right:0;bottom:0;padding:16px;background:linear-gradient(0deg,rgba(0,0,0,.7),transparent);color:#fff;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;opacity:0;transition:opacity .25s ease}
.page-srv .gallery-grid a:hover .cap,.page-srv .gallery-grid figure:hover .cap{opacity:1}

/* lightbox de galería (lo abre lightbox.js al pulsar una foto) */
.page-srv .gallery-grid figure.lb-on{cursor:zoom-in}
.page-srv .gallery-grid figure.lb-on:focus-visible{outline:2px solid var(--green);outline-offset:2px}
dialog.lb{border:none;padding:0;background:transparent;max-width:none;max-height:none}
dialog.lb::backdrop{background:rgba(15,20,15,.82);backdrop-filter:blur(3px)}
.lb-fig{margin:0;display:grid;justify-items:center;gap:14px}
.lb-img{max-width:min(92vw,1100px);max-height:80vh;width:auto;height:auto;border-radius:4px;box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.lb-cap{color:#fff;font-size:11px;letter-spacing:2px;text-transform:uppercase;opacity:.8}
.lb-x{position:fixed;top:18px;right:22px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.35);color:#fff;font-size:22px;line-height:1;cursor:pointer}
.lb-x:hover{background:rgba(0,0,0,.6)}

/* FAQ (opcional, details/summary) */
.page-srv .faq-item{border-bottom:1px solid var(--line)}
.page-srv .faq-item:first-child{border-top:1px solid var(--line)}
.page-srv .faq-q{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;padding:22px 0;cursor:pointer;list-style:none}
.page-srv .faq-q::-webkit-details-marker{display:none}
.page-srv .faq-q h3{font-family:'Playfair Display';font-weight:600;font-size:22px;color:#222;line-height:1.25}
.page-srv .faq-q .chev{width:18px;height:18px;color:var(--green);transition:transform .22s ease}
.page-srv .faq-item[open] .faq-q .chev{transform:rotate(180deg)}
.page-srv .faq-item p{margin:0 0 24px;font-weight:300;color:#444}

/* servicios relacionados (footer de página, antes del CTA final) */
.page-srv .rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.page-srv .rel{background:#fff;border:1px solid var(--line);border-radius:6px;padding:26px;display:block;transition:box-shadow .22s ease,border-color .22s ease,transform .22s ease}
.page-srv .rel:hover{box-shadow:0 14px 30px -16px rgba(0,0,0,.22);border-color:var(--green);transform:translateY(-2px)}
.page-srv .rel h3{font-family:'Playfair Display';font-weight:700;font-size:19px;margin-bottom:8px;color:var(--green-deep)}
.page-srv .rel p{font-size:14px;font-weight:300;color:#555;line-height:1.5;margin-bottom:14px}
.page-srv .rel .rel-link{font-size:12.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--green)}
.page-srv .rel .rel-link svg{width:12px;height:12px;vertical-align:-1px;margin-left:3px}

/* CTA */
.page-srv .cta{padding:64px 0;text-align:center;background:var(--green-deep);color:#fff}
.page-srv .cta .k{font-size:11px;letter-spacing:3px;text-transform:uppercase;opacity:.7;margin-bottom:18px}
.page-srv .cta h2{font-family:'Playfair Display';font-style:italic;font-weight:400;font-size:44px;margin-bottom:18px}
.page-srv .cta a{color:#fff;font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:13px;border-bottom:2px solid #fff;padding-bottom:6px}

@media (prefers-reduced-motion:reduce){.page-srv *{transition:none!important;animation:none!important}}
@media(max-width:1024px){
  .page-srv .page-head h1{font-size:54px}
  .page-srv .sec-head h2{font-size:42px}
  .page-srv .svc-grid{grid-template-columns:1fr 1fr}
  .page-srv .rel-grid{grid-template-columns:1fr 1fr}
  .page-srv .gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px}
  .page-srv .gallery-grid > :nth-child(1){grid-column:1/-1;grid-row:auto}
  .page-srv .gallery-grid > :nth-child(2){grid-column:1;grid-row:auto}
  .page-srv .gallery-grid > :nth-child(3){grid-column:2;grid-row:auto}
  .page-srv .gallery-grid > :nth-child(4){grid-column:1/-1;grid-row:auto}
  .page-srv .gallery-grid.g5 > :nth-child(1){grid-column:1;grid-row:span 2}
  .page-srv .gallery-grid.g5 > :nth-child(2){grid-column:2;grid-row:auto}
  .page-srv .gallery-grid.g5 > :nth-child(3){grid-column:2;grid-row:auto}
  .page-srv .gallery-grid.g5 > :nth-child(4){grid-column:1/-1;grid-row:auto}
  .page-srv .gallery-grid.g5 > :nth-child(5){grid-column:1/-1;grid-row:auto}
}
@media(max-width:768px){
  .page-srv .page-head{padding:60px 0 56px}
  .page-srv .page-head h1{font-size:46px}
  .page-srv .sec{padding:54px 0}
  .page-srv .sec-head h2{font-size:34px}
  .page-srv .svc-grid,.page-srv .ext,.page-srv .rel-grid{grid-template-columns:1fr}
  .page-srv .ext .item:nth-child(odd){border-right:none}
  .page-srv .gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:140px}
  .page-srv .gallery-grid.g5{grid-auto-rows:130px}
  .page-srv .svc-photos .svc .ph{aspect-ratio:16/9}
  .page-srv .svc-photos .svc .bd{padding:16px 18px 18px}
  .page-srv .gallery-grid > :nth-child(1),
  .page-srv .gallery-grid > :nth-child(2),
  .page-srv .gallery-grid > :nth-child(3),
  .page-srv .gallery-grid > :nth-child(4){grid-column:auto;grid-row:auto}
  .page-srv .gallery-grid.g5 > :nth-child(1){grid-column:1;grid-row:span 2}
  .page-srv .gallery-grid.g5 > :nth-child(2){grid-column:2;grid-row:auto}
  .page-srv .gallery-grid.g5 > :nth-child(3){grid-column:2;grid-row:auto}
  .page-srv .gallery-grid.g5 > :nth-child(4){grid-column:1/-1;grid-row:auto}
  .page-srv .gallery-grid.g5 > :nth-child(5){grid-column:1/-1;grid-row:auto}
  .page-srv .gallery-grid .cap{opacity:1}
  .page-srv .cta h2{font-size:28px}
}
@media(max-width:480px){
  .page-srv .page-head h1{font-size:38px}
}