/* Estilos de las páginas interiores (servicios y proyectos). Misma marca que index.html. */
:root{
  --ink:#141414;
  --paper:#c7c9c4;
  --paper-light:#d7d9d4;
  --sheet:#f5f5f3;
  --line:rgba(20,20,20,0.18);
  --muted:rgba(20,20,20,0.7);
  --accent:#7dfa3c;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:clip; }
body{ background:var(--sheet); color:var(--ink); font-family:'Inter', sans-serif; line-height:1.6; overflow-x:clip; }
h1,h2,h3{ font-family:'Inter', sans-serif; font-weight:700; letter-spacing:-0.02em; line-height:1.1; }
a{ color:inherit; }
img{ max-width:100%; }

/* ---------- NAV ---------- */
.pg-top{ position:sticky; top:0; z-index:50; padding:1rem 1.25rem 0; }
.topbar-pill{
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  background:var(--ink); border-radius:999px; padding:0.6rem 0.6rem 0.6rem 1.6rem;
  max-width:720px; width:100%; margin:0 auto;
}
.pill-logo{ height:38px; width:auto; display:block; }
.pill-nav{ display:flex; align-items:center; gap:1.8rem; font-size:0.92rem; }
.pill-nav a{ color:var(--paper); text-decoration:none; transition:opacity .2s ease; }
.pill-nav a:hover{ opacity:0.7; }
.pill-nav a.pill-cta{ background:var(--paper); color:var(--ink); padding:0.55rem 1.3rem; border-radius:999px; font-weight:500; }
.pill-nav a.pill-cta:hover{ background:#fff; opacity:1; }
@media (max-width:700px){
  .topbar-pill{ padding:0.45rem 0.45rem 0.45rem 1.1rem; gap:1rem; }
  .pill-logo{ height:30px; }
  .pill-nav{ gap:1rem; }
  .pill-nav a:not(.pill-cta){ display:none; }
}

/* ---------- CABECERA DE PÁGINA ---------- */
.pg-hero{ position:relative; overflow:hidden; padding:5rem 2.4rem 3.5rem; }
.pg-hero::before{
  content:""; position:absolute; width:900px; height:900px; right:-320px; top:-420px; z-index:0;
  background:radial-gradient(circle, var(--accent) 0%, rgba(125,250,60,0.5) 25%, rgba(125,250,60,0.1) 50%, transparent 68%);
  filter:blur(10px); pointer-events:none;
}
.pg-hero > *{ position:relative; z-index:1; }
.pg-wrap{ max-width:1100px; margin:0 auto; }
.migas{ font-size:0.85rem; color:var(--muted); margin-bottom:1.8rem; }
.migas a{ text-decoration:none; }
.migas a:hover{ text-decoration:underline; }
.migas span{ margin:0 0.4rem; }
.pg-hero h1{ font-size:clamp(2.3rem, 5.4vw, 4.2rem); max-width:17ch; margin-bottom:1.4rem; }
.pg-lead{ font-size:1.12rem; color:var(--muted); max-width:56ch; margin-bottom:2rem; }
.pg-tags{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:2rem; }
.pg-tags li{ list-style:none; font-size:0.82rem; border:1px solid var(--line); border-radius:999px; padding:0.35rem 0.9rem; background:#fff; }
.cta-pill{
  display:inline-flex; align-items:center; gap:0.6rem; background:var(--ink); color:#f5f5f3;
  text-decoration:none; padding:0.85rem 1.6rem; border-radius:999px; font-size:0.95rem; font-weight:500;
  transition:background .2s ease, color .2s ease;
}
.cta-pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); display:inline-block; }
.cta-pill:hover{ background:var(--accent); color:var(--ink); }
.cta-pill:hover .dot{ background:var(--ink); }

/* ---------- BLOQUES DE CONTENIDO ---------- */
.pg-section{ padding:3.5rem 2.4rem; }
.pg-section + .pg-section{ padding-top:1rem; }
.pg-section h2{ font-size:clamp(1.6rem, 3vw, 2.2rem); font-weight:600; margin-bottom:1.2rem; max-width:24ch; }
.pg-text p, .pg-text ul{ max-width:68ch; }
.pg-text p{ color:rgba(20,20,20,0.82); margin-bottom:1rem; font-size:1.02rem; }
.pg-text ul{ margin:0.4rem 0 1.2rem 1.2rem; }
.pg-text li{ margin-bottom:0.4rem; color:rgba(20,20,20,0.82); }
.pg-text a{ text-decoration:underline; text-underline-offset:2px; }

.pg-split{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; }
.pg-ficha{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:1.6rem 1.8rem; }
.pg-ficha dt{ font-size:0.8rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; }
.pg-ficha dd{ font-weight:500; margin-bottom:1rem; }
.pg-ficha dd:last-child{ margin-bottom:0; }

.pasos{ display:grid; grid-template-columns:1fr 1fr; gap:2rem 3rem; margin-top:1rem; }
.pasos h3{ font-size:1.15rem; margin-bottom:0.4rem; }
.pasos p{ color:var(--muted); max-width:46ch; }

/* ---------- GALERÍA ---------- */
.pg-gallery{ columns:2; column-gap:1rem; }
.pg-gallery figure{ break-inside:avoid; margin-bottom:1rem; }
.pg-gallery img, .pg-gallery video{ display:block; width:100%; height:auto; border-radius:14px; background:var(--paper-light); }
.pg-gallery .full{ column-span:all; }
.pg-gallery figcaption{ font-size:0.8rem; color:var(--muted); margin-top:0.4rem; }

/* ---------- TARJETAS (proyectos / servicios relacionados) ---------- */
.cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:1rem; }
.card{
  display:block; text-decoration:none; background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:0.8rem; transition:transform .2s ease, border-color .2s ease;
}
.card:hover{ transform:translateY(-3px); border-color:var(--ink); }
.card-img{ display:block; aspect-ratio:16/10; border-radius:10px; background-size:cover; background-position:center; background-color:var(--paper-light); }
.card-title{ display:block; font-weight:600; margin:0.8rem 0.2rem 0.1rem; }
.card-sub{ display:block; font-size:0.85rem; color:var(--muted); margin:0 0.2rem 0.3rem; }
.card--text{ padding:1.4rem 1.5rem; }
.card--text .card-title{ margin:0 0 0.3rem; font-size:1.1rem; }
.card--text .card-sub{ margin:0; }

/* ---------- FAQ ---------- */
.faq-list{ max-width:760px; border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); padding:1.2rem 0; }
.faq-item summary{
  cursor:pointer; list-style:none; font-weight:500; display:flex; justify-content:space-between; gap:1rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-size:1.4rem; line-height:1; color:rgba(20,20,20,0.5); transition:transform .25s ease; }
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item p{ margin-top:0.8rem; color:var(--muted); max-width:62ch; }

/* ---------- CTA FINAL + FOOTER ---------- */
.pg-cta{ background:var(--ink); color:#f5f5f3; padding:5rem 2.4rem 4rem; margin-top:3rem; border-radius:32px 32px 0 0; }
.pg-cta h2{ font-size:clamp(2.2rem, 5.5vw, 4.2rem); font-weight:500; max-width:14ch; margin-bottom:1.6rem; }
.pg-cta p{ color:rgba(245,245,243,0.7); max-width:52ch; margin-bottom:2rem; }
.pg-cta-links{ display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem; }
.pg-cta .cta-pill{ background:var(--accent); color:var(--ink); }
.pg-cta .cta-pill .dot{ background:var(--ink); }
.pg-cta .cta-pill:hover{ background:#f5f5f3; }
.pg-cta .mail{ color:var(--accent); text-decoration:none; border-bottom:1px solid var(--accent); font-size:1.15rem; }

footer{
  background:var(--ink); padding:1.6rem 2.4rem; display:flex; justify-content:space-between; gap:1.5rem;
  font-size:0.85rem; color:rgba(245,245,243,0.5); border-top:1px solid rgba(245,245,243,0.15);
}
.mark-footer{ height:16px; width:auto; display:inline-block; vertical-align:middle; margin-right:0.6rem; }
.footer-year{ vertical-align:middle; }
.footer-links{ display:flex; flex-wrap:wrap; gap:0.6rem 1.2rem; }
.footer-links a{ text-decoration:none; color:rgba(245,245,243,0.5); transition:color .2s ease; }
.footer-links a:hover{ color:var(--accent); }
.footer-servicios{ background:var(--ink); padding:0 2.4rem 1.4rem; font-size:0.85rem; color:rgba(245,245,243,0.5); }
.footer-servicios a{ color:rgba(245,245,243,0.7); text-decoration:none; margin-right:1.1rem; display:inline-block; }
.footer-servicios a:hover{ color:var(--accent); }

@media (max-width:800px){
  .pg-hero{ padding:3.5rem 1.25rem 2.5rem; }
  .pg-section{ padding:2.5rem 1.25rem; }
  .pg-split, .pasos{ grid-template-columns:1fr; gap:2rem; }
  .pg-gallery{ columns:1; }
  .pg-cta{ padding:3.5rem 1.25rem 3rem; }
  footer{ flex-direction:column; padding:1.6rem 1.25rem; }
  .footer-servicios{ padding:0 1.25rem 1.4rem; }
}