/* ============================================================
   SERVICIOS — PROFESIONALES (EDITORIAL / SIN CAJAS)
   Sistema: 1:1 Servicios Particulares
   ============================================================ */

.page-servicios-pro{
  --pc: #5f6f61;
  --pc-rule: rgba(85,110,95,0.45);

  --ink: rgba(25,25,25,0.88);
  --ink-soft: rgba(25,25,25,0.68);

  --maxw: 980px;
  --padx: clamp(18px, 3vw, 34px);

  --hero-py: 18px;
  --svc-py: clamp(22px, 3.2vw, 34px);
  --svc-gap-top: 12px;

  --inc-gap: clamp(18px, 3vw, 34px);
  --inc-split: 1px solid rgba(85,110,95,0.22);

  --body-fz: 15.5px;
  --list-fz: 13.5px;
}


.svc-strip-top{
    box-sizing: box-sizing: border-box;
    margin: 0;
    padding: 0 180px;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    color: rgba(85,110,95,0.45);
}

.svc-strip-top > a.svc-stripLink:not(:last-child)::after{
  content: " · ";
  margin: 0 .65em;
  color: rgba(25,25,25,0.38);
  display: inline;
}


/* Separador ·: se lo ponemos al link anterior (robusto) */
#svc-strip-top > a.svc-stripLink{
  position: relative;
}

#svc-strip-top > a.svc-stripLink:not(:last-child)::after{
  content: " · ";
  margin: 0 .65em;
  color: rgba(25,25,25,0.38);
  display: inline;
}

.page-profesionales .topbar .brand-mark img {
    transform: translate(var(--logo-x, -1.5px), var(--logo-y, -0.7px)) scale(var(--logo-scale, 1.4));
    transform-origin: center;
}

/* ============================================================
   CONTENEDOR
   ============================================================ */

.page-servicios-pro main.svc{
  color: var(--ink);
}

/* Ancho editorial */
.page-servicios-pro .wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--padx);
}

/* Contenedor interno neutro (no empuja / no limita) */
.page-servicios-pro .svc-inner{
  margin: 0;
  padding: 0;
  max-width: none;
}

/* ============================================================
   HERO
   ============================================================ */

.page-servicios-pro .svc-hero{
  padding: 0;
}

/* Strip superior (solo arriba) */
#svc-strip-top{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;

  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 11px;
  line-height: 1.2;

  color: var(--ink-soft);
opacity:0.6;
}

/* Elementos del strip */
#svc-strip-top > span{
  white-space: nowrap;
  font-weight: 500;
}

/* Separador “·” SOLO aquí (no afecta a nada más) */
#svc-strip-top > span + span::before{
  content: " · ";
  margin: 0 .65em;
  color: rgba(25,25,25,0.38);
}

/* Intro */
.page-servicios-pro .svc-intro{
  margin: 40px auto 40px;
  max-width: 760px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-soft);
  text-align: justify;
}

/* ============================================================
   LÍNEA A SANGRE
   ============================================================ */

.page-servicios-pro .bleed-hr{
  border: 0;
  height: 1px;
  background: var(--pc-rule);
  width: 100vw;

  position: relative;
  left: 50%;
  transform: translateX(-50%);

  margin: 10px 0;
}

/* ============================================================
   LISTADO
   ============================================================ */

.page-servicios-pro .svc-listing{
  padding: 0;
}

/* Sin cajas */
.page-servicios-pro .svc-box{
      border: 0;
    background: transparent;
    padding: 0;
    margin: 60px 80px 50px;
}

/* Cada servicio */
.page-servicios-pro .svc-service{
  padding:  0;
  margin: 0;
}

/* Título + regla fina */
.page-servicios-pro .svc-title{
      margin: 0;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(95, 111, 97, 0.95);
    text-align: left;
}

.page-servicios-pro .svc-title::after{
  content:"";
  display:block;
  height: 1px;
  background: rgba(85,110,95,0.35);
  margin-top: 10px;
  margin-bottom: 20px;
}

.page-servicios-pro .svc-titleLink{
  text-decoration: none;
text-align: left;
}
.page-servicios-pro .svc-titleLink:hover{
  text-decoration: underline;
  text-decoration-color: rgba(85,110,95,0.35);
  text-underline-offset: 3px;
}

/* Descripción */
.page-servicios-pro .svc-desc{
  margin: var(--svc-gap-top) 0 0;
  font-size: var(--body-fz);
  line-height: 1.75;
  color: var(--ink-soft);
  text-align: justify;
}

/* ============================================================
   INCLUYE / NO INCLUYE
   ============================================================ */

.page-servicios-pro .svc-incgrid{
  margin-top: 25px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--inc-gap);
  align-items: start;
}

.page-servicios-pro .svc-incCol + .svc-incCol{
  border-left: var(--inc-split);
  padding-left: var(--inc-gap);
}

.page-servicios-pro .svc-miniTitle{
  margin: 0 20px 8px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(95,111,97,0.95);
  text-align: left;
}

.page-servicios-pro .svc-list{
  padding-left: 18px;
  font-size: var(--list-fz);
  line-height: 1.5;
  color: var(--ink-soft);
  text-align: left;
  margin: 0 0 0px;
}

.page-servicios-pro .svc-list li::marker{
  color: rgba(95,111,97,0.9);
}

/* ============================================================
   NOTA FINAL
   ============================================================ */

.page-servicios-pro .svc-note{
  padding: 10px 0 10px;
}

.page-servicios-pro .svc-noteText{
    font-size: 12px;
    line-height: 1.4;
    color: var(--ink-soft);
    text-align: center;
    font-style: italic;
}

/* Negritas en verde SOLO dentro del main de servicios */
.page-servicios-pro main.svc strong{
  color: var(--pc);
  font-weight: 700;
}

/* ============================================================
   COMPLEMENTARIOS (is-complementary)
   ============================================================ */

.page-servicios-pro .svc-service.is-complementary{
  opacity: .90;
}

.page-servicios-pro .svc-service.is-complementary .svc-title{
  color: rgba(95,111,97,0.78);
}

.page-servicios-pro .svc-service.is-complementary .svc-title::after{
  background: rgba(85,110,95,0.22);
}

.page-servicios-pro .svc-service.is-complementary .svc-desc,
.page-servicios-pro .svc-service.is-complementary .svc-list{
  color: rgba(25,25,25,0.58);
}

.page-servicios-pro .svc-service.is-complementary .svc-miniTitle{
  color: rgba(95,111,97,0.72);
}

.page-servicios-pro .svc-service.is-complementary .svc-list li::marker{
  color: rgba(95,111,97,0.65);
}

/* ============================================================
   RESPONSIVE (≤980px)
   ============================================================ */

@media (max-width: 980px){

  #svc-strip-top{
    justify-content: center;
    letter-spacing: .20em;
    font-size: 10px;
  }

  .page-servicios-pro .svc-intro{
    margin: 10px 0 20px;
    max-width: 100%;
    font-size: 13px;
    line-height: 1.6;
  }

  .page-servicios-pro .svc-title{
    font-size: 10px;
  }

  .page-servicios-pro .svc-desc{
    font-size: 14px;
    line-height: 1.7;
  }

  .page-servicios-pro .svc-incgrid{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .page-servicios-pro .svc-incCol + .svc-incCol{
    border-left: 0;
    padding-left: 0;
  }

  .page-servicios-pro .svc-list{
    font-size: 14px;
  }
}
@media (max-width: 740px) {
    .page-servicios-pro .svc-noteText {
        margin: 0 40px !important;
    }
}
/* Anclas */
html{ scroll-behavior: smooth; }
.page-servicios-pro .svc-service{ scroll-margin-top: var(--scroll-offset, 140px); }

/* ============================================================
   HOMOLOGACIÓN SERVICIOS PRO → mismo sistema que SERVICIOS (PAR)
   - “Papel” claro sobre fondo gris
   - Líneas verdes SOLO envolviendo el submenu (tabs)
   - Bullets con guía (punto + línea)
   - Mantener SOLO una bleed-hr (antes del CTA)
   ============================================================ */

.page-servicios-pro{
  --pc: #5f6f61;
  --pc-rule: rgba(85,110,95,0.45);

  --canvas-bg: rgba(255,255,255,0.92);
  --canvas-radius: 4px;
  --canvas-shadow: 0 28px 60px rgba(0,0,0,0.06);

  --wrap-maxw: 1200px;
  --svc-maxw: 980px;
  --wrap-padx: 18px;

  /* Bullets “Servicios” pero en verde */
  --bullet-dot: rgba(95,111,97,0.90);
  --bullet-stroke: rgba(255,255,255,0.95);
  --bullet-line: rgba(25,25,25,0.22);
  --bullet-dot-size: 7px;
  --bullet-axis-x: 7px;
}

/* 0) Marca sin subrayado (mueve aquí lo que estaba inline en HTML) */
.page-servicios-pro .topbar .brand,
.page-servicios-pro .topbar .brand:hover,
.page-servicios-pro .topbar .brand:focus,
.page-servicios-pro .topbar .brand:focus-visible{
  text-decoration: none !important;
}

/* 1) Fondo gris exterior */
.page-servicios-pro{
  background: #dcdcdc;
}

/* 2) “Papel” claro: usamos .wrap como contenedor visual (sin tocar HTML) */
.page-servicios-pro .wrap{
  max-width: var(--wrap-maxw);
  margin: 20px auto 0;
  padding: 28px var(--wrap-padx);
  background: rgb(250 250 250 / 77%);
  border-radius: var(--canvas-radius);
  box-shadow: var(--canvas-shadow);
  box-sizing: border-box;
}

/* Contenido editorial dentro del “papel” */
.page-servicios-pro .svc-inner{
  margin: 0 auto;
  padding: 0 clamp(18px, 3vw, 34px);
  box-sizing: border-box;
}

/* 3) LÍNEAS verdes envolviendo el submenu (tabs PRO) — SIN tocar estructura */
.page-servicios-pro .tabs--pro-top{
  position: relative;
}

/* línea superior */
.page-servicios-pro .tabs--pro-top::before{
  content:"";
  position: absolute;
  left: 50%;
  top: 0;
  width: 100vw;
  height: 1px;
  transform: translateX(-50%);
  background: var(--pc-rule);
  pointer-events: none;
}

/* línea inferior */
.page-servicios-pro .tabs--pro-top::after{
  content:"";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100vw;
  height: 1px;
  transform: translateX(-50%);
  background: var(--pc-rule);
  pointer-events: none;
}

/* 4) Quitar “divisor” vertical entre columnas (queremos el look limpio de Servicios PAR) */
.page-servicios-pro .svc-incCol + .svc-incCol{
  border-left: 0;
  padding-left: 0;
}

/* Ajuste de aire similar a Servicios PAR */
.page-servicios-pro .svc-incgrid{
  padding: 0 10px;
  column-gap: 30px;
}

/* 5) Bullets con guía (punto + línea) para INCLUYE / NO INCLUYE */
.page-servicios-pro .svc-list{
  list-style: none;
  padding-left: 0;
  margin: 0;
  position: relative;
}

/* línea vertical */
.page-servicios-pro .svc-list::before{
  content:"";
  position: absolute;
  left: 6.5px;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: var(--bullet-line);
  pointer-events: none;
}

.page-servicios-pro .svc-list li{
  position: relative;
  padding-left: 22px;
  margin: 0 0 8px;
 text-align: left;
}

/* punto con borde blanco */
.page-servicios-pro .svc-list li::before{
  content:"";
  position: absolute;
  left: calc(var(--bullet-axis-x) - (var(--bullet-dot-size) / 2));
  top: 0.95em;
  width: var(--bullet-dot-size);
  height: var(--bullet-dot-size);
  border-radius: 999px;
  background: var(--bullet-dot);
  border: 1px solid var(--bullet-stroke);
  box-sizing: border-box;
  transform: translateY(-50%);
  pointer-events: none;
}

/* 6) bleed-hr: solo quieres una (antes del CTA).
   Como ya hemos borrado las otras del HTML, aquí lo dejamos consistente. */
.page-servicios-pro .bleed-hr{
  background: var(--pc-rule);
  height: 1px;
  border: 0;

  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);

  margin: 18px 0 0;
}

/* 7) Responsive: el “papel” mantiene lectura */
@media (max-width: 980px){
  .page-servicios-pro .wrap{
    margin-top: 12px;
    padding: 18px var(--wrap-padx);
  }

  .page-servicios-pro .svc-inner{
    padding: 0;
  }

  .page-servicios-pro .svc-incgrid{
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 0;
  }
}
/* ============================================================
   FIX STRIP TOP — ahora son <a>, no <span>
   - Reaplica el estilo editorial
   - Elimina “píldora” (border/padding/bg) heredada
   - Recupera separadores ·
   ============================================================ */

#svc-strip-top > a.svc-stripLink{
  /* reset visual */
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  /* tipografía/tono (hereda del contenedor) */
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  line-height: inherit;

  text-decoration: none !important;
  white-space: nowrap;
  font-weight: 500;

  display: inline;
  cursor: pointer;
}

/* Separador · entre items (solo en strip top) */
#svc-strip-top > a.svc-stripLink + a.svc-stripLink::before{
  content: " · ";
  margin: 0 .65em;
  color: rgba(25,25,25,0.38);
}

/* Hover discretísimo */
#svc-strip-top > a.svc-stripLink:hover{
  opacity: .85;
}
/* ============================================================
   MÓVIL — SERVICIOS PRO (arreglo de lectura + strip superior)
   Pegar al FINAL del archivo
   ============================================================ */

@media (max-width: 740px){

  /* “Papel” con menos aire lateral */
  .page-servicios-pro .wrap{
    padding: 16px 14px;
  }

  /* Strip superior: quita el padding fijo que estrangula la columna */
  .page-servicios-pro .svc-strip-top{
    padding: 0 !important;
    margin: 6px 0 10px;
  }

  /* Permite que los links partan línea */
  #svc-strip-top > a.svc-stripLink{
    white-space: normal;
    line-height: 1.35;
    text-align: center;
  }

  /* Nota final: fuera márgenes fijos en móvil */
  .page-servicios-pro .svc-noteText{
    margin: 0 !important;
  }
  .page-servicios-pro{
    font-size: calc(1rem - 2px);
  }

  /* Títulos */
  .page-servicios-pro h1{ font-size: calc(2.4rem - 2px); }
  .page-servicios-pro h2{ font-size: calc(1.8rem - 2px); }
  .page-servicios-pro h3{ font-size: calc(1.2rem - 2px); }

  /* Texto */
  .page-servicios-pro p,
  .page-servicios-pro li,
  .page-servicios-pro a{
    font-size: calc(1rem - 2px);
  }

  /* Strip superior */
  .page-servicios-pro .svc-stripLink{
    font-size: calc(0.75rem - 2px);
  }
.page-servicios-pro .svc-box {
     border: 0;
    background: transparent;
    padding: 0;
    margin: 40px 20px 40px;
}

}

@media (max-width: 520px){

  /* Strip superior: en columna, limpio, sin separadores "·" */
  #svc-strip-top{
    display: block !important;
    text-align: center;
    letter-spacing: .18em;
    font-size: 10px;
    line-height: 1.25;
  }

  #svc-strip-top > a.svc-stripLink{
    display: block !important;
    padding: 7px 0;
  }

  /* mata el separador en móvil para que no “ensucie” */
  #svc-strip-top > a.svc-stripLink + a.svc-stripLink::before{
    content: "" !important;
    margin: 0 !important;
  }

  /* Tipos un pelín más contenidos */
  .page-servicios-pro .svc-intro{
    font-size: 12.8px;
    line-height: 1.65;
  }

  .page-servicios-pro .svc-desc{
    font-size: 13.5px;
    line-height: 1.75;
  }
}