/* ============================================================
   PROFESIONALES — CSS ESPECÍFICO (LIMPIO, SIN DUPLICADOS)
   Base visual: mismo sistema editorial que Particulares
   Acento: verde musgo (PRO)
   ============================================================ */

/* ============================================================
   0) VARIABLES
   ============================================================ */
:root{
  --pc: #5f6f61;
  --pc-rule: rgba(85,110,95,0.65);

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

  --panel-bg: rgba(236,236,236,0.92);
  --panel-border: rgba(95,111,97,.28);

  --textw: 720px;
}

/* ============================================================
   1) COMPAT / SCROLL (1 SOLO)
   ============================================================ */
html{ overflow-x:hidden; }
body{ overflow-x:hidden; }

/* ============================================================
   2) BRAND (sin subrayados)
   ============================================================ */
.page-profesionales .topbar .brand,
.page-profesionales .topbar .brand:hover,
.page-profesionales .topbar .brand:focus,
.page-profesionales .topbar .brand:focus-visible{
  text-decoration: none !important;
}


.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;
}
/* ============================================================
   3) BETWEEN WRAP + RULE BLEED (líneas a sangre verdes)
   ============================================================ */
.page-profesionales .between-wrap{ margin-top: 0; }

.page-profesionales .between-wrap .rule--bleed{
  height: 1px;
  background: var(--pc-rule);
  position: relative;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  margin: 0;
}

/* ============================================================
   4) SUBMENU (gris claro + tipografía editorial)
   - las líneas a sangre ya lo envuelven (rule--bleed arriba/abajo)
   ============================================================ */
.page-profesionales .tabs.tabs--pro-top{
      width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(22px, 10vw, 110px);
    padding: 0 16px;
    background: rgb(250 250 250 / 73%);
}

.page-profesionales .tabs.tabs--pro-top .tabs__item{
  color: rgba(47,47,49,.72);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: 14px;
  line-height: 1;
  padding: 0;
}

.page-profesionales .tabs.tabs--pro-top .tabs__item:hover{
  color: rgba(47,47,49,.92);
}

.page-profesionales .tabs.tabs--pro-top .tabs__item.is-active{
  color: rgba(95,111,97,.98);
  font-weight: 600;
}

/* ============================================================
   5) HERO (sistema Particulares)
   ============================================================ */
.page-profesionales .par-main.pro-main{
  background: var(--sand, #dcdcdc);
}

.page-profesionales .par-hero-wrap{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: clamp(560px, 74vh, 820px);
  overflow: hidden;
}

/* Imagen fondo */
.page-profesionales .par-hero-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
  transform: scale(1.02);
}

/* Overlay suave (para que el hero no compita) */
.page-profesionales .par-hero-overlay{
  position: absolute;
  inset: 0;
  background: rgba(220,220,222,0.82);
  pointer-events: none;
}

/* Inner */
.page-profesionales .par-hero-inner{
  position: relative;
  z-index: 2;
  max-width: var(--maxw, 1100px);
  margin: 0 auto;
  padding: clamp(18px, 3.2vw, 34px) 16px 28px;
}

/* PANEL intermedio (fondo entre contenido y hero) */
.page-profesionales .pro-hero-panel{
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 6px;        /* mínimo, sobrio */
  padding: clamp(18px, 2.2vw, 26px);
}

/* ============================================================
   6) GRID (proyectos más ancha que texto)
   ============================================================ */
.page-profesionales .main-canvas{
  display: grid;
  grid-template-columns: minmax(300px, 0.38fr) minmax(0, 1.62fr);
  gap: clamp(24px, 4vw, 60px);
  align-items: start;
}

/* ============================================================
   7) TEXTO (ritmo editorial)
   ============================================================ */
.page-profesionales .content-col .block{
  padding: 0 0 18px;
  margin: 0 0 18px;
}

.page-profesionales .content-col .block:last-child{
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.page-profesionales .par-h2{
  margin: 0 0 12px;
  color: rgba(47,47,49,.86);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .20em;
}

.page-profesionales .par-text{
  margin: 0;
  color: rgba(47,47,49,.78);
  font-size: 14px;
  line-height: 1.65;
  max-width: var(--textw);
}

.page-profesionales .par-text strong{
  color: rgba(95,111,97,.98);
  font-weight: 700;
}

/* ============================================================
   8) BULLETS (círculo verde borde blanco + línea gris atravesando)
   ============================================================ */
.page-profesionales .par-list.pro-list{
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  max-width: var(--textw);
text-align: left;
}

.page-profesionales .par-list.pro-list li{
  position: relative;
  padding-left: 30px;
  margin: 0 0 10px;
  color: rgba(47,47,49,.78);
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
}

.page-profesionales .par-list.pro-list li strong{
  color: rgba(95,111,97,.98);
  font-weight: 700;
}

/* Línea gris clara que atraviesa el círculo */
.page-profesionales .par-list.pro-list li::after{
  content: "";
  position: absolute;
  left: 2px;
  top: .78em;
  width: 20px;
  height: 1px;
  background: rgba(47,47,49,.26);
}

/* Círculo verde con borde blanco */
.page-profesionales .par-list.pro-list li::before{
  content: "";
  position: absolute;
  left: 8px;
  top: calc(.78em - 6px);
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--pc);
  border: 2px solid rgba(255,255,255,.92);
  z-index: 2;
}

/* ============================================================
   9) PROYECTOS (columna derecha, editorial)
   ============================================================ */
.page-profesionales .pro-projTitle,
.page-profesionales .par-projTitle{
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.32em;
    color: rgba(47, 47, 49, 0.60);
    margin: 0px auto 20px;
    font-weight: 600;
    text-align: center;
}

.page-profesionales .projects-col .proj{
  margin: 0 0 18px;
  padding: 0 0 18px;
}

.page-profesionales .projects-col .proj:last-child{
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

.page-profesionales .proj-img-box{
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
}

.page-profesionales .proj-img-box img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
  transform: scale(1.01);
  transition: transform 260ms ease;
  display: block;
}

.page-profesionales a.proj-link:hover img,
.page-profesionales a.proj-link:focus-visible img{
  transform: scale(1.04);
}

.page-profesionales .projects-col .pbody{
  margin-top: 10px;
  text-align: left;
}

.page-profesionales .projects-col .pbody h3{
     color: rgba(95, 111, 97, .98);
    font-size: 10px;
    letter-spacing: 0.20em;
    margin: 0 0 0px;
    text-transform: uppercase;
    font-weight: 600;
    border-left: 1px solid rgba(47, 47, 49, 0.10);
    padding-left: 20px;
   text-align: left;
}

/* ============================================================
   10) RESPONSIVE
   ============================================================ */
@media (max-width: 980px){
  .page-profesionales .main-canvas{
    grid-template-columns: 1fr;
  }

  .page-profesionales .par-hero-wrap{
    min-height: auto;
  }

  .page-profesionales .par-hero-inner{
    padding-bottom: 22px;
  }
}

/* ============================================================
   11) CONTACTO (tu sistema, consolidado + SVG blindado)
   ============================================================ */
.pro-contact{ padding: 18px 0 0; }

.pro-contactCta{
  margin: 20px 15px 25px;
  text-align: center;
  font-weight: 400;
  color: rgba(47,47,49,0.74);
  font-size: 15px;
  line-height: 1.55;
}
.pro-contactQ{ color: var(--pc); font-weight: 700; }

.below-inner{
  background: transparent;
  max-width: 690px;
  margin: 0 auto;
  padding: 10px 0 16px;
}

.pro-contactCenter{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 6px 0 0;
}

.pro-directTitle{
  margin: 15px 15px;
  text-align: center;
  color: rgba(47,47,49,0.94);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.6;
}
.pro-directTitle strong{
  color: var(--pc);
  font-weight: bolder;
  letter-spacing: 0.08em;
}

.pro-directGrid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  justify-items: center;
  margin: 0 auto;
  padding: 0 15px;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.1;
  text-align: left;
  color: rgba(47,47,49,0.94);
}

.pro-directItem{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: max-content;
  margin: 0 auto;
  text-align: center;
  text-decoration: none;
}

/* blindaje total contra svg global */
.pro-ico{
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 18px !important;
  line-height: 0 !important;
  overflow: hidden !important;
}
.pro-ico svg,
.pro-icoSvg{
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  fill: var(--pc) !important;
}

.pro-directText{
  display: inline-block;
  line-height: 1;
  font-size: 12px;
  letter-spacing: 0.10em;
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: rgba(47,47,49,0.78);
}

/* matar subrayado global y usar solo el nuestro */
.pro-directItem,
.pro-directItem:hover,
.pro-directItem:focus,
.pro-directItem:focus-visible{
  text-decoration: none !important;
}
.pro-directItem:hover .pro-directText{
  text-decoration-line: underline;
  text-decoration-color: rgba(95,111,97,0.35);
  text-underline-offset: 3px;
}

/* ============================================================
   12) CIERRE (líneas + dominio + banner)
   ============================================================ */
.pro-end{ padding: 10px 0 0; }

.pro-ruleBleed{
  height: 1px;
  background: var(--pc-rule);
  position: relative;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  margin: 0;
}

.pro-siteLine{
  text-align: center;
  padding: 10px 0;
  font-size: 12px;
  letter-spacing: 0.10em;
  color: rgba(47,47,49,0.78);
}
.pro-siteLink{ color: inherit; text-decoration: none; }
.pro-siteLink:hover{
  text-decoration: underline;
  text-decoration-color: rgba(95,111,97,0.35);
  text-underline-offset: 3px;
}

.footer-banner--bleed{
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  padding: 0;
  line-height: 0;
  overflow: hidden;
  margin-bottom: 0;
}
.footer-banner--bleed img{
    width: 100%;
    min-height: 50%;
    height: auto;
    display: block;
    object-fit: cover;
    object-position: var(--banner-pos);
    transform: translateY(var(--banner-shift-y));
    transition: transform 260ms ease;
}

@media (max-width: 800px){
    .footer-banner--bleed img{
        width: 100%;
        height: 50%;
        display: block;
        object-fit: cover;
        object-position: 50% 51%;
        transform: none;
    }
}

/* ============================================================
   PROFESIONALES — TIMELINE IZQUIERDA (como Particulares)
   - Dots en H2 unidos por línea vertical
   - La línea rebasa arriba/abajo
   - Columna izquierda repartida (no apelotonada)
   ============================================================ */

@media (min-width: 981px){

  /* 1) Hacemos que el panel y el grid estiren (para poder repartir verticalmente) */
  .page-profesionales .pro-hero-panel{
    /* ya existe, pero aseguramos que pueda “coger altura” */
    align-self: stretch;
  }

  .page-profesionales .main-canvas{
    align-items: stretch; /* clave: ambas columnas estiran */
  }

  /* 2) Columna izquierda: timeline container */
  .page-profesionales .content-col{
    position: relative;
    padding-left: 46px; /* carril + aire como en Particulares */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* reparte bloques por altura */
    gap: 0px; /* respaldo si hay poco alto */
    min-height: auto;
  }

  /* Línea vertical (rebasa arriba y abajo) */
  .page-profesionales .content-col::before{
    content:"";
    position: absolute;
    left: 18px;          /* eje del rail */
    top: -18px;          /* rebasa arriba */
    bottom: -18px;       /* rebasa abajo */
    width: 1px;
    background: rgba(47,47,49,.12); /* gris claro, sobrio */
  }

  /* 3) Bloques: ritmo editorial (no “bordes de separación” marcados) */
  .page-profesionales .content-col .block{
    border-bottom: 0;
    margin: 0;
    padding: 0;
  }

  /* 4) Títulos: dot sobre el rail */
  .page-profesionales .pro-h2,
  .page-profesionales .par-h2{
font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.45em;
    margin: 0 0 40px;
    font-weight: 600;
    color: #5f6f61;
  }

  .page-profesionales .pro-h2::before,
  .page-profesionales .par-h2::before{
    content:"";
    position: absolute;
    left: -34px;         /* cae exactamente sobre el rail */
    top: 0.35em;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--pc);
    border: 2px solid rgba(255,255,255,.95);
    box-shadow: 0 0 0 1px rgba(47,47,49,.10); /* micro definición */
  }

  /* 5) Texto: más maquetado (interlineado y micro tracking) */
  .page-profesionales .par-text,
  .page-profesionales .pro-text{
    font-size: 15px;
    color: rgba(47, 47, 49, 0.92);
    line-height: 1.7;
    text-align: left;
    margin: 0;
    font-weight:400;
  }

  /* 6) Lista: NO compite con el timeline (dot simple, sin línea) */
  .page-profesionales .par-list.pro-list{
    margin-top: 14px;
  }

  .page-profesionales .par-list.pro-list li{
    padding-left: 18px;
    letter-spacing: .005em;
    line-height: 1.55;
  }

  .page-profesionales .par-list.pro-list li::after{
    content: none; /* quitamos la línea en items */
  }

  .page-profesionales .par-list.pro-list li::before{
    content:"";
    position: absolute;
    left: 0;
    top: .72em;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--pc);
    border: 2px solid rgba(255,255,255,.92);
  }
}

/* ============================================================
   MÓVIL: mantenemos limpio (sin “reparto” forzado)
   - el timeline sigue, pero sin space-between
   ============================================================ */
@media (max-width: 980px){
  .page-profesionales .content-col{
    position: relative;
    padding-left: 38px;
  }

  .page-profesionales .content-col::before{
    content:"";
    position: absolute;
    left: 14px;
    top: -12px;
    bottom: -12px;
    width: 1px;
    background: rgba(47,47,49,.12);
  }

  .page-profesionales .pro-h2::before,
  .page-profesionales .par-h2::before{
    content:"";
    position: absolute;
    left: -30px;
    top: 0.35em;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--pc);
    border: 2px solid rgba(255,255,255,.95);
    box-shadow: 0 0 0 1px rgba(47,47,49,.10);
  }

  /* en móvil, no queremos “space-between” */
  .page-profesionales .content-col{
    display: block;
  }

  .page-profesionales .content-col .block{
    margin: 0 0 22px;
  }
}
/* ============================================================
   PROFESIONALES — AJUSTES FINOS (timeline + bullets lista)
   ============================================================ */

/* TIMELINE: más aire arriba/abajo y más separación entre bloques */
@media (min-width: 981px){
  .page-profesionales .content-col{
            padding-top: 60px;
        padding-bottom: 80px;
    }

  .page-profesionales .content-col::before{
    top: 40px;     /* rebasa más */
    bottom: 60px;  /* rebasa más */
  }

  /* Dots del timeline más pequeños */
  .page-profesionales .pro-h2::before,
  .page-profesionales .par-h2::before{
        width: 7px;
        height: 7px;
        top: 0.48em;
        border-width: 1px;
        left: -32px;
        box-shadow: none;
    }
}

/* MÓVIL: también un pelín más pequeños */
@media (max-width: 980px){
  .page-profesionales .content-col::before{
    top: -18px;
    bottom: -18px;
  }

  .page-profesionales .pro-h2::before,
  .page-profesionales .par-h2::before{
    width: 6px;
    height: 6px;
    top: 0.48em;
    border-width: 2px;
    left: -28px;
    box-shadow: none;
  }
}

/* LISTA “Qué hago”: bullets tipo "·" verde pequeño */
.page-profesionales .par-list.pro-list li{
  padding-left: 14px; /* menos indent */
}

.page-profesionales .par-list.pro-list li::before{
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  content: "·";
  position: absolute;
  left: 0;
  top: 0.08em;
  color: var(--pc);
  font-weight: 700;
  font-size: 16px; /* pequeño pero presente (ajustable) */
  line-height: 1;
}

.page-profesionales .par-list.pro-list li::after{
  content: none !important;
}
/* Footer legal */
.page-profesionales .pro-siteLine{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
}

.page-profesionales .pro-siteSep{
  color: rgba(47,47,49,0.40);
  font-size: 14px;
  line-height: 1;
}

/* ==========================================
   PROFESIONALES — COLUMNA IZQUIERDA
   Timeline vertical refinado
========================================== */

.pro-left {
  position: relative;
  padding: 70px 60px;          /* MÁS aire arriba y abajo */
  display: flex;
  flex-direction: column;
  justify-content: center;     /* centra verticalmente el bloque */
  gap: 70px;                   /* separación entre bloques principales */
}

/* Línea vertical */
.pro-left::before {
  content: "";
  position: absolute;
  left: 34px;
  top: 50px;                   /* NO toca arriba */
  bottom: 50px;                /* NO toca abajo */
  width: 1px;
  background: rgba(95,111,97,0.35); /* verde musgo suavizado */
}

/* Cada bloque */
.pro-block {
  position: relative;
  padding-left: 55px;
}