/* Páginas de detalle de cada servicio.
   Comparten base.css; aquí va solo lo propio de estas páginas.
   El color de acento lo pone cada página con --acento. */

.svc-page{--acento:var(--electric);}

/* ---------- cabecera de la página ---------- */
.svc-hero{
  position:relative;overflow:hidden;
  padding:clamp(44px,7vw,86px) 0 clamp(38px,6vw,66px);
  border-bottom:1px solid var(--line);
}
.svc-hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(105% 85% at 88% 0%,
      color-mix(in srgb, var(--acento) 22%, transparent) 0%, transparent 62%),
    radial-gradient(85% 75% at 0% 100%,
      color-mix(in srgb, var(--acento) 12%, transparent) 0%, transparent 66%);
}
.svc-hero .wrap{position:relative;z-index:1;}
.svc-hero .breadcrumb{padding-top:0;padding-bottom:18px;}

.svc-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'IBM Plex Mono',monospace;font-size:0.8rem;
  text-transform:uppercase;letter-spacing:0.14em;color:var(--acento);
  border:1px solid color-mix(in srgb, var(--acento) 45%, transparent);
  border-radius:var(--radius-pill);padding:7px 16px;margin:0 0 20px;
}
.svc-hero h1{
  font-size:clamp(2.2rem,5.6vw,4.2rem);margin:0 0 20px;max-width:16ch;
}
.svc-lead{
  color:var(--muted);font-size:clamp(1.02rem,1.6vw,1.2rem);
  line-height:1.65;max-width:60ch;margin:0 0 32px;
}

.svc-acciones{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:34px;}
.svc-acciones .btn{padding:16px 26px;}

.svc-cifras{
  display:flex;gap:0;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:20px;
}
.svc-cifra{
  flex:1 1 140px;min-width:0;padding-right:22px;
  border-right:1px solid var(--line);margin-right:22px;
}
.svc-cifra:last-child{border-right:0;margin-right:0;padding-right:0;}
.svc-cifra b{
  display:block;font-family:'Big Shoulders Display','Arial Narrow',sans-serif;
  font-size:clamp(1.5rem,3vw,2.1rem);color:var(--acento);line-height:1;
}
.svc-cifra span{
  display:block;font-family:'IBM Plex Mono',monospace;font-size:0.8rem;
  text-transform:uppercase;letter-spacing:0.05em;color:var(--muted-2);margin-top:6px;
}
@media (max-width:560px){
  .svc-cifra{flex:1 1 100%;border-right:0;margin-right:0;padding:12px 0;
             border-bottom:1px solid var(--line);}
  .svc-cifra:last-child{border-bottom:0;}
}

/* ---------- secciones ---------- */
.svc-seccion{padding:clamp(48px,7vw,86px) 0;border-bottom:1px solid var(--line);position:relative;}
.svc-seccion.tinte::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(95% 80% at 8% 0%,
    color-mix(in srgb, var(--acento) 11%, transparent) 0%, transparent 60%);
}
.svc-seccion > .wrap{position:relative;z-index:1;}
.svc-seccion h2{
  font-size:clamp(1.7rem,3.6vw,2.6rem);margin:0 0 14px;
  position:relative;padding-bottom:14px;max-width:18ch;
}
.svc-seccion h2::after{
  content:"";position:absolute;left:0;bottom:0;
  width:60px;height:4px;border-radius:2px;background:var(--acento);
}
.svc-intro{color:var(--muted);font-size:1.05rem;max-width:62ch;margin:0 0 38px;}

/* ---------- rejilla de "qué hacemos" ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:20px;}
.svc-item{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:26px 24px;position:relative;overflow:hidden;
}
.svc-item::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--acento);
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
}
.svc-item h3{
  font-family:'IBM Plex Sans',sans-serif;text-transform:none;
  font-size:1.15rem;margin:0 0 10px;line-height:1.3;
}
.svc-item p{color:var(--muted);font-size:1rem;margin:0;line-height:1.6;}
.svc-num{
  display:block;font-family:'IBM Plex Mono',monospace;font-size:0.78rem;
  color:var(--acento);letter-spacing:0.1em;margin-bottom:12px;
}

/* ---------- señales / avisos ---------- */
.svc-senales{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:18px;}
.svc-senal{
  border-left:3px solid var(--acento);
  background:color-mix(in srgb, var(--surface) 80%, transparent);
  border-radius:0 16px 16px 0;padding:20px 22px;
}
.svc-senal h3{
  font-family:'IBM Plex Sans',sans-serif;text-transform:none;
  font-size:1.05rem;margin:0 0 8px;
}
.svc-senal p{color:var(--muted);font-size:0.98rem;margin:0;line-height:1.6;}

/* ---------- lista de "qué incluye" ---------- */
.svc-incluye{list-style:none;margin:0;padding:0;display:grid;gap:14px;max-width:70ch;}
.svc-incluye li{
  position:relative;padding-left:36px;color:var(--muted);font-size:1.04rem;line-height:1.6;
}
.svc-incluye li::before{
  content:"";position:absolute;left:0;top:2px;
  width:22px;height:22px;border-radius:50%;
  background:color-mix(in srgb, var(--acento) 20%, transparent);
  border:1px solid color-mix(in srgb, var(--acento) 55%, transparent);
}
.svc-incluye li::after{
  content:"";position:absolute;left:7px;top:9px;
  width:8px;height:4px;border-left:2px solid var(--acento);border-bottom:2px solid var(--acento);
  transform:rotate(-45deg);
}

/* ---------- franja de contacto ---------- */
.svc-cta{
  position:relative;overflow:hidden;
  padding:clamp(40px,6vw,68px) 0;border-bottom:1px solid var(--line);
  background:
    linear-gradient(120deg,
      color-mix(in srgb, var(--acento) 16%, var(--surface)) 0%,
      var(--surface) 55%,
      color-mix(in srgb, var(--acento) 9%, var(--surface)) 100%);
}
.svc-cta-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(20px,4vw,44px);flex-wrap:wrap;
}
.svc-cta h2{
  font-size:clamp(1.5rem,3.2vw,2.3rem);margin:0 0 10px;max-width:20ch;
}
.svc-cta p{color:var(--muted);margin:0;max-width:46ch;font-size:1.02rem;}
.svc-cta-btns{display:flex;gap:12px;flex-wrap:wrap;flex:none;}
.svc-cta-btns .btn{padding:16px 26px;}
@media (max-width:720px){
  .svc-cta-inner{flex-direction:column;align-items:stretch;}
  .svc-cta-btns .btn{flex:1 1 100%;}
}

/* ---------- preguntas frecuentes ---------- */
.svc-faq{display:grid;gap:12px;max-width:80ch;}
.svc-faq details{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:0 22px;transition:border-color .2s ease;
}
.svc-faq details[open]{border-color:color-mix(in srgb, var(--acento) 45%, var(--line));padding-bottom:20px;}
.svc-faq summary{
  cursor:pointer;list-style:none;padding:20px 30px 20px 0;position:relative;
  font-size:1.06rem;font-weight:600;color:var(--paper);
}
.svc-faq summary::-webkit-details-marker{display:none;}
.svc-faq summary::after{
  content:"";position:absolute;right:2px;top:50%;
  width:10px;height:10px;margin-top:-6px;
  border-right:2px solid var(--acento);border-bottom:2px solid var(--acento);
  transform:rotate(45deg);transition:transform .22s ease;
}
.svc-faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px;}
.svc-faq p{color:var(--muted);margin:0;line-height:1.7;font-size:1.02rem;}

/* ---------- formulario ---------- */
.svc-form-wrap{
  display:grid;grid-template-columns:0.85fr 1.15fr;gap:0;
  border:1px solid var(--line);border-radius:22px;overflow:hidden;
  background:var(--surface);
}
@media (max-width:900px){.svc-form-wrap{grid-template-columns:1fr;}}
.svc-form-wrap > *{min-width:0;}
.svc-form-side{
  padding:clamp(28px,4vw,44px);
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--acento) 15%, var(--surface-2)) 0%,
      var(--surface-2) 70%);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;
}
@media (max-width:900px){.svc-form-side{border-right:0;border-bottom:1px solid var(--line);}}
.svc-form-side h2{font-size:clamp(1.5rem,3vw,2rem);margin:0 0 14px;}
.svc-form-side > p{color:var(--muted);font-size:1.02rem;margin:0 0 26px;line-height:1.6;}
.svc-contactos{margin-top:auto;display:flex;flex-direction:column;gap:14px;padding-top:26px;
                border-top:1px solid var(--line);}
.svc-contacto{
  display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--paper);
  font-family:'IBM Plex Mono',monospace;font-size:1rem;overflow-wrap:anywhere;
}
.svc-contacto svg{width:19px;height:19px;flex:none;color:var(--acento);}
.svc-form{padding:clamp(28px,4vw,44px);}

/* campos (mismos estilos que el formulario de la portada) */
.svc-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media (max-width:560px){.svc-form .form-row{grid-template-columns:1fr;}}
.svc-form .field{margin-bottom:18px;display:flex;flex-direction:column;gap:8px;}
.svc-form label{
  font-family:'IBM Plex Mono',monospace;font-size:0.82rem;
  text-transform:uppercase;letter-spacing:0.05em;color:var(--muted-2);
}
.svc-form input[type="text"], .svc-form input[type="tel"],
.svc-form input[type="email"], .svc-form textarea{
  width:100%;padding:14px 16px;border-radius:16px;
  border:1px solid var(--line-strong);background:var(--ink);color:var(--paper);
  font-family:'IBM Plex Sans',sans-serif;font-size:1rem;
}
.svc-form textarea{resize:vertical;min-height:120px;border-radius:18px;}
.svc-form input:focus, .svc-form textarea:focus{
  outline:none;border-color:var(--acento);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--acento) 20%, transparent);
}
.svc-form .field-error{border-color:#e3584a !important;}
.svc-form .err-text{
  color:#e3584a;font-size:0.86rem;font-family:'IBM Plex Mono',monospace;display:none;
  text-transform:none;letter-spacing:0;
}
.svc-form .err-text.show{display:block;}
.svc-form .field-check{
  display:flex;align-items:flex-start;gap:11px;color:var(--muted);
  font-size:0.92rem;line-height:1.5;margin-bottom:20px;cursor:pointer;
}
.svc-form .field-check input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--acento);}
.svc-form .field-check a{color:var(--acento);text-decoration:underline;}
.svc-form .form-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.svc-form .form-note{color:var(--muted-2);font-size:0.88rem;margin:0;}
.svc-form .form-result{
  display:none;margin-top:24px;padding:22px;border-radius:18px;
  border:1px solid var(--ok);background:color-mix(in srgb, var(--ok) 10%, var(--surface));
}
.svc-form .form-result.show{display:block;}
.svc-form .form-result h4{
  font-family:'IBM Plex Sans',sans-serif;text-transform:none;
  font-size:1.05rem;color:var(--ok);margin:0 0 8px;
}
.svc-form .form-result p{margin:0 0 14px;color:var(--muted);font-size:1rem;}
.svc-form .form-result .actions{display:flex;gap:12px;flex-wrap:wrap;}
.svc-form .form-hint{color:var(--muted-2);font-size:0.88rem;margin:14px 0 0;line-height:1.55;}

/* ---------- otros servicios ---------- */
.svc-otros{padding:clamp(44px,6vw,72px) 0;}
.svc-otros h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:0 0 24px;}
.svc-otros-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:16px;}
.svc-otro{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:20px 22px;text-decoration:none;color:var(--paper);
}
.svc-otro strong{font-size:1.06rem;}
.svc-otro span{color:var(--acento-otro, var(--electric));font-size:1.3rem;line-height:1;flex:none;}

/* ---------- barra fija de contacto en móvil ---------- */
.svc-sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  gap:1px;background:var(--line);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
.svc-sticky a{
  flex:1;text-align:center;padding:15px 10px;text-decoration:none;
  font-family:'IBM Plex Mono',monospace;font-size:0.95rem;
  text-transform:uppercase;letter-spacing:0.03em;
}
.svc-sticky .llamar{background:var(--surface);color:var(--paper);}
.svc-sticky .wa{background:var(--whatsapp);color:var(--whatsapp-ink);}
@media (max-width:720px){
  .svc-sticky{display:flex;}
  body.tiene-sticky{padding-bottom:56px;}
}

/* ---------- efectos de ratón ---------- */
@media (hover:hover) and (pointer:fine){
  .svc-item{transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;}
  .svc-item:hover{
    transform:translateY(-5px);border-color:color-mix(in srgb, var(--acento) 50%, var(--line));
    box-shadow:0 22px 42px -22px rgba(0,0,0,0.55);
  }
  .svc-item:hover::before{transform:scaleX(1);}
  .svc-senal{transition:transform .2s ease, background .2s ease;}
  .svc-senal:hover{transform:translateX(5px);background:var(--surface);}
  .svc-faq summary{transition:color .18s ease;}
  .svc-faq summary:hover{color:var(--acento);}
  .svc-contacto{transition:transform .18s ease, color .18s ease;}
  .svc-contacto:hover{transform:translateX(4px);color:var(--acento);}
  .svc-otro{transition:transform .2s ease, border-color .2s ease;}
  .svc-otro:hover{transform:translateY(-4px);border-color:var(--acento-otro, var(--electric));}
  .svc-otro span{transition:transform .2s ease;}
  .svc-otro:hover span{transform:translateX(4px);}
}