/* ===========================================================================
   PILARSYL S.A. · ajustes visuales sobre el tema actual
   Pegar en: Elementor → Ajustes del sitio → CSS personalizado
   (o Apariencia → Personalizar → CSS adicional)

   Son retoques quirúrgicos sobre Kava + Elementor. No tocan la estructura,
   así que se pueden sacar en cualquier momento sin romper nada.
   Cada bloque está comentado: si alguno no gusta, se borra solo ese.
   =========================================================================== */


/* 1 · Jerarquía de títulos ---------------------------------------------------
   Hoy los títulos de sección son peso 400, muy livianos para su tamaño, y
   quedan desteñidos contra las fotos. Subirlos de peso y cerrar el interletrado
   es el cambio de una línea que más se nota.                                 */
.elementor-heading-title{
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.15;
}
h1,.h1-style{font-weight:700; letter-spacing:-.02em}
h2,.h2-style{font-weight:600; letter-spacing:-.015em}


/* 2 · Botones ----------------------------------------------------------------
   El botón del teléfono en el menú es una píldora muy redondeada que pelea con
   el resto del sitio, que es todo ángulo recto. Esto los unifica.            */
.elementor-button,
.btn,
input[type='submit'],
.wpcf7-submit{
  border-radius:2px;
  letter-spacing:.02em;
  transition:background-color .15s ease, transform .1s ease;
}
.elementor-button:active,
.wpcf7-submit:active{transform:translateY(1px)}


/* 3 · Foco visible -----------------------------------------------------------
   Accesibilidad: hoy no hay indicador de foco al navegar con teclado.        */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:2px solid #ed0e0e;
  outline-offset:2px;
}


/* 4 · Formulario de contacto -------------------------------------------------
   Campos con más aire y borde visible: hoy son difíciles de ver.             */
.wpcf7 input[type='text'],
.wpcf7 input[type='email'],
.wpcf7 input[type='tel'],
.wpcf7 textarea{
  padding:.8rem .9rem;
  border:1px solid #c9cac5;
  border-radius:2px;
}
.wpcf7 input:focus,
.wpcf7 textarea:focus{border-color:#ed0e0e}


/* 5 · Feed de Instagram ------------------------------------------------------
   ATAJO, opcional. Lo correcto es bajar la cantidad de posteos en el plugin
   (Instagram Feed → Personalizar → Cantidad de publicaciones: de 20 a 6).
   Si no se puede tocar el plugin ahora, esto recorta el alto en pantalla.    */
/*
#sb_instagram{max-height:560px; overflow:hidden}
@media (max-width:768px){ #sb_instagram{max-height:420px} }
*/


/* 6 · Imágenes de obra -------------------------------------------------------
   Las fichas de obra tienen imágenes de proporciones distintas y la grilla
   queda despareja. Esto las normaliza sin recortar mal.                      */
.elementor-widget-image figure.wp-caption img{
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
  display:block;
}
.elementor-widget-image figure.wp-caption figcaption{
  font-size:.9rem;
  line-height:1.35;
  padding-top:.6rem;
}


/* 7 · Respeto por movimiento reducido ---------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}


/* ===========================================================================
   Bloques nuevos: [psy_cifras] y [psy_equipo]
   =========================================================================== */

/* --- Banda de cifras --- */
/* Igual que el bloque de equipo: rompe el contenedor y llega a los bordes.
   La columna de Elementor que lo aloja mete 10px de padding por defecto, y
   eso es lo que lo separaba del slider de portada. Se anula con :has(), que
   da el valor exacto sin depender de un número fijo. Si el navegador no lo
   soporta, la regla se ignora y queda como estaba. */
.elementor-widget-wrap:has(.psy-cifras){ padding:0 !important; }

.psy-cifras{
  margin-inline:calc(50% - 50vw);
  background:#1d1f24;
  color:#fff;
  padding:clamp(2rem,4.5vw,3.25rem) clamp(1.15rem,4vw,3rem);
  font-family:Poppins,"Helvetica Neue",Arial,sans-serif;
}
.psy-cifras-inner{
  max-width:1140px; margin-inline:auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.25rem,2.5vw,2.5rem);
}
/* Las cuatro cifras reservan la misma altura y se apoyan contra el borde
   inferior. Así las líneas divisorias de las cuatro columnas quedan a la
   misma altura aunque el texto de cada una mida distinto. */
.psy-cifra strong{
  display:flex; align-items:flex-end; gap:.1em;
  min-height:calc(clamp(2.3rem,4.4vw,3.4rem) * .95);
  font-weight:700; line-height:.95; letter-spacing:-.02em;
  font-size:clamp(2.3rem,4.4vw,3.4rem); font-variant-numeric:tabular-nums;
  white-space:nowrap; color:#fff;
}
.psy-cifra .psy-pre{color:#ed0e0e}
.psy-cifra .psy-unit{font-size:.38em; font-weight:600; color:#b9bbc0; letter-spacing:0}
.psy-iso strong{font-size:clamp(1.75rem,3.05vw,2.7rem); letter-spacing:-.025em}
.psy-cap{
  display:block; margin-top:.85rem; padding-top:.7rem;
  border-top:1px solid rgba(255,255,255,.22);
  font-size:.95rem; font-weight:600; color:#fff;
}
.psy-note{display:block; margin-top:.25rem; font-size:.83rem; line-height:1.45; color:#b9bbc0}

@media (max-width:900px){ .psy-cifras-inner{grid-template-columns:repeat(2,1fr); gap:1.75rem} }
@media (max-width:460px){ .psy-cifras-inner{grid-template-columns:1fr; gap:1.5rem} }

/* ===========================================================================
   [psy_equipo] · Equipo técnico propio
   Banda a ancho completo, partida en foto y color. Los iconos salen de
   Font Awesome 5, que el sitio ya carga con Elementor: no agrega peso.
   =========================================================================== */

/* El bloque rompe el contenedor de Elementor y llega a los bordes. Se usan
   márgenes negativos en vez de 100vw para no provocar scroll horizontal. */
.psy-tec{
  margin-inline:calc(50% - 50vw);
  display:grid;
  grid-template-columns:minmax(0,42fr) minmax(0,58fr);
  background:#ed0e0e;
  font-family:Poppins,"Helvetica Neue",Arial,sans-serif;
  isolation:isolate;
}
@media (max-width:900px){ .psy-tec{grid-template-columns:1fr} }

.psy-tec-foto{
  background-image:url("https://pilarsyl.com/wp-content/uploads/2019/09/en-ejecucion.jpg");
  background-size:cover;
  background-position:30% 55%;
  min-height:100%;
}
@media (max-width:900px){ .psy-tec-foto{min-height:clamp(200px,42vw,300px)} }

.psy-tec-cuerpo{
  padding:clamp(2.25rem,4.5vw,4rem) clamp(1.25rem,3.5vw,3.5rem);
  display:flex; flex-direction:column; gap:clamp(1.75rem,3vw,2.75rem);
}

/* Cabecera: el 9 es el dato, no un adorno */
.psy-tec-head{display:flex; align-items:flex-start; gap:clamp(1rem,2vw,1.75rem)}
.psy-tec-n{
  flex:none; font-weight:700; line-height:.8; letter-spacing:-.05em;
  font-size:clamp(4.5rem,9vw,8rem);
  color:transparent !important;
  -webkit-text-stroke:2px rgba(255,255,255,.75);
  text-stroke:2px rgba(255,255,255,.75);
}
.psy-tec-titulo{
  margin:0 !important; color:#fff !important; font-weight:700;
  font-size:clamp(1.5rem,3.1vw,2.4rem); line-height:1.12; letter-spacing:-.015em;
}
.psy-tec-bajada{
  margin:.9rem 0 0 !important; color:#fff !important; max-width:52ch;
  font-size:1rem; line-height:1.55;
}

/* Las nueve disciplinas: icono, nombre y una línea. Nada más. */
.psy-disc-grid{
  list-style:none !important; margin:0 !important; padding:0 !important;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px; background:rgba(255,255,255,.3);
  border:1px solid rgba(255,255,255,.3);
}
@media (max-width:1100px){ .psy-disc-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .psy-disc-grid{grid-template-columns:1fr} }

.psy-disc{
  background:#ed0e0e; margin:0 !important; padding:1.15rem 1.1rem 1.25rem;
  display:flex; flex-direction:column; gap:.5rem;
  transition:background-color .2s ease;
}
.psy-disc:hover{background:#d10c0c}
.psy-disc > i{
  font-size:1.5rem; color:#fff !important; line-height:1; margin-bottom:.15rem;
}
.psy-disc h3{
  margin:0 !important; color:#fff !important; font-weight:600;
  font-size:1.0625rem; line-height:1.2; letter-spacing:-.01em;
}
.psy-disc p{
  margin:0 !important; color:#fff !important;
  font-size:.85rem; line-height:1.4;
}
.psy-disc-mas{background:#c40b0b}
.psy-disc-mas:hover{background:#b30a0a}

/* ---------------------------------------------------------------------------
   Blindaje: el tema Kava pinta de rojo los encabezados de la home y le gana
   a estas reglas. Dentro de los bloques propios hay que recuperar el color.
   --------------------------------------------------------------------------- */
.psy-tec h2,
.psy-tec h3,
.psy-tec p,
.psy-tec li,
.psy-tec i{ color:#fff !important; }
.psy-tec .psy-tec-n{ color:transparent !important; }

.psy-cifras h2,
.psy-cifras h3,
.psy-cifras strong,
.psy-cifras .psy-cap{ color:#fff !important; }
.psy-cifras .psy-pre{ color:#ed0e0e !important; }
.psy-cifras .psy-unit,
.psy-cifras .psy-note{ color:#b9bbc0 !important; }

/* Los márgenes negativos del bloque no deben generar barra horizontal.
   clip, y no hidden, para no romper el encabezado fijo del sitio. */
body{ overflow-x:clip; }

/* ===========================================================================
   [psy_ultimas_obras] · listado de obras recientes en el pie
   Los valores replican los del menú que había antes (Poppins 14/20, peso 600,
   color #999, padding 10px), medidos sobre el sitio, para que el reemplazo no
   se note.
   =========================================================================== */
.psy-ultimas{ list-style:none !important; margin:0 !important; padding:0 !important; }
.psy-ultimas li{ margin:0 !important; padding:0 !important; }
.psy-ultimas a{
  display:block; padding:10px; text-decoration:none;
  font-family:Poppins,"Helvetica Neue",Arial,sans-serif;
  font-size:14px; font-weight:600; line-height:20px; color:#999;
  transition:color .15s ease;
}
.psy-ultimas a:hover{ color:#fff; }
.psy-ultimas-mas a{ color:#ed0e0e; }
.psy-ultimas-mas a:hover{ color:#fff; }

/* Los tres «VER +10 OBRAS» del pie son menús de WordPress, no parte del listado
   que arma el plugin. Se igualan al «ver más» de la primera columna para que las
   cuatro columnas tengan el mismo sangrado y el mismo color. */
.elementor-location-footer .elementor-nav-menu .elementor-item{
  padding:10px !important;
  font-family:Poppins,"Helvetica Neue",Arial,sans-serif !important;
  font-size:14px !important; font-weight:600 !important; line-height:20px !important;
}
.elementor-location-footer .elementor-nav-menu--main .elementor-nav-menu .menu-item .elementor-item,
.elementor-location-footer .elementor-nav-menu--dropdown .elementor-nav-menu .menu-item .elementor-item{
  color:#ed0e0e !important;
}
.elementor-location-footer .elementor-nav-menu--main .elementor-nav-menu .menu-item .elementor-item:hover,
.elementor-location-footer .elementor-nav-menu--main .elementor-nav-menu .menu-item .elementor-item:focus,
.elementor-location-footer .elementor-nav-menu--dropdown .elementor-nav-menu .menu-item .elementor-item:hover,
.elementor-location-footer .elementor-nav-menu--dropdown .elementor-nav-menu .menu-item .elementor-item:focus{
  color:#fff !important;
}

/* Banner de la portada en el celular.

   La sección del slider trae un margen superior negativo fijo: -35px en
   escritorio y -90px por debajo de 768px. Ese -90 está pensado para un
   encabezado de 90px, pero el encabezado del celular mide más porque el logo
   escala con el ancho (95px a 390, 103px a 430). El banner quedaba trepado:
   asomaba una franja del fondo arriba de la foto y el logo caía encima de la
   imagen, mitad sobre el blanco y mitad sobre la foto.

   Se apoya el banner justo debajo del encabezado, como ya pasa en tablet y en
   escritorio. */
@media (max-width: 767px){
  .elementor-section.homeSlider{ margin-top: 0 !important; }
}

/* Encabezado con fondo blanco al bajar.

   El CSS del sitio ya pinta de blanco `.elementor-sticky--effects`, pero deja
   los enlaces del menú en blanco: sobre fondo blanco desaparecían. Acá se les
   da el color del texto del sitio, y se marca el borde inferior para separar el
   encabezado del contenido. Arriba de todo, sobre el banner, el menú sigue
   siendo blanco. */
.elementor-location-header .elementor-sticky--effects{
  box-shadow:0 1px 0 rgba(0,0,0,.08), 0 6px 18px rgba(0,0,0,.06);
}
.elementor-location-header .elementor-sticky--effects .elementor-nav-menu .elementor-item,
.elementor-location-header .elementor-sticky--effects .jet-menu-link{
  color:#3b3d42 !important;
}
.elementor-location-header .elementor-sticky--effects .elementor-nav-menu .elementor-item:hover,
.elementor-location-header .elementor-sticky--effects .elementor-nav-menu .elementor-item:focus,
.elementor-location-header .elementor-sticky--effects .elementor-nav-menu .elementor-item.elementor-item-active,
.elementor-location-header .elementor-sticky--effects .jet-menu-link:hover{
  color:#ed0e0e !important;
}

/* Barra del encabezado más baja.

   Lo que la estiraba era el logo: 81px de alto en escritorio y 75 en celular,
   con 20px de aire arriba y abajo en escritorio. Daba 141px y 95px. Se acota la
   altura del logo y se recorta ese aire. El `width:auto` es para que el logo
   mantenga la proporción al bajarle el alto. */
.elementor-location-header .elementor-widget-theme-site-logo img{
  width:auto !important;
}
@media (min-width:1025px){
  .elementor-location-header .elementor-widget-theme-site-logo img{ max-height:60px !important; }
  .elementor-location-header .elementor-section.mainheader{
    padding-top:12px !important; padding-bottom:12px !important;
  }
}
@media (max-width:1024px){
  .elementor-location-header .elementor-widget-theme-site-logo img{ max-height:52px !important; }
}

/* Banda de logos de clientes.

   Dos pistas idénticas una al lado de la otra: la primera se desplaza un 100%
   de su ancho y en ese momento la segunda ya ocupa su lugar, así el movimiento
   no corta. Al pasar el mouse se frena y el logo de abajo toma color.

   Los logos van en gris porque son escudos, marcas azules, amarillas y verdes
   muy distintas entre sí; en color pleno la banda queda despareja. */
.psy-clientes{ padding:14px 0 6px; }
.psy-clientes-titulo{
  margin:0 0 18px; text-align:center;
  font-family:Poppins,"Helvetica Neue",Arial,sans-serif;
  font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:#8a8d93;
}
.psy-clientes-cinta{
  display:flex; gap:56px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.psy-clientes-pista{
  display:flex; align-items:center; gap:56px; flex:0 0 auto;
  margin:0 !important; padding:0 !important; list-style:none !important;
  animation:psy-clientes-desliza 61s linear infinite;
}
.psy-clientes-pista li{ margin:0 !important; padding:0 !important; list-style:none !important; }
.psy-cliente img{
  display:block; height:54px; width:auto; max-width:none;
  /* El tema le pone a toda imagen un marco gris de 5px con esquinas
     redondeadas; en la banda cada logo quedaba dentro de una pastilla. */
  border:0 !important; border-radius:0 !important;
  background:none !important; box-shadow:none !important; padding:0 !important;
  filter:grayscale(1); opacity:.62;
  transition:filter .25s ease, opacity .25s ease;
}
.psy-cliente img:hover{ filter:none; opacity:1; }
.psy-clientes-cinta:hover .psy-clientes-pista{ animation-play-state:paused; }
@keyframes psy-clientes-desliza{
  from{ transform:translateX(0); }
  to{ transform:translateX(calc(-100% - 56px)); }
}
@media (max-width:767px){
  .psy-cliente img{ height:42px; }
  .psy-clientes-cinta, .psy-clientes-pista{ gap:38px; }
  @keyframes psy-clientes-desliza{
    from{ transform:translateX(0); }
    to{ transform:translateX(calc(-100% - 38px)); }
  }
}
@media (prefers-reduced-motion: reduce){
  .psy-clientes-pista{ animation:none; }
  .psy-clientes-cinta{ overflow-x:auto; }
  .psy-clientes-pista[aria-hidden="true"]{ display:none; }
}