/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* Tarjeta base */
.proj-card{
  position: relative;
  overflow: hidden;
  border-radius: 0; /* sin bordes redondeados */
}

/* Wrapper de Elementor */
.proj-card > .e-con-inner{
  position: static !important;
}

/* Imagen destacada */
.proj-card .elementor-widget-image,
.proj-card .elementor-widget-image a,
.proj-card .elementor-widget-image img{
  display:block;
  width:100%;
  height:100%;
  border-radius:0 !important; /* quitamos radios de imagen */
}

.proj-card .elementor-widget-image img{
  object-fit:cover;
  transition: transform .45s ease, filter .45s ease;
  will-change: transform, filter;
  z-index:0;
  position: relative;
}

/* Overlay centrado */
.proj-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:center;   /* centrado vertical */
  align-items:center;       /* centrado horizontal */
  text-align:center;        /* por si hay párrafos largos */
  padding:22px;
  background: rgba(99, 80, 85, 0.85);
  opacity:0;
  transform:translateY(10px);
  transition:opacity .35s ease, transform .35s ease;
  pointer-events:none;
}

/* Hover / focus */
.proj-card:hover .proj-overlay,
.proj-card:focus-within .proj-overlay{
  opacity:1;
  transform:translateY(0);
}
.proj-card:hover .elementor-widget-image img,
.proj-card:focus-within .elementor-widget-image img{
  transform:scale(1.04);
  filter:brightness(.88);
}

/* Móvil (sin hover) */
@media (hover:none){
  .proj-overlay{ opacity:1; transform:none; }
  .proj-card .elementor-widget-image img{ filter:brightness(.9); }
}

/* Overlay leve permanente */
.proj-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(99, 80, 85, 0.45); /* mismo color (#635055) con 15% opacidad */
  z-index: 1; /* por encima de la imagen pero por debajo del overlay de contenido */
  pointer-events: none;
}

.services-grid{
  --grid-b: #c8a9a9;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr)); /* 4 columnas en desktop */
  gap: 0;
  border-top: 3px solid var(--grid-b);   /* borde superior */
  border-left: 3px solid var(--grid-b);  /* borde izquierdo */
}

.services-grid > .elementor-element{
  border-right: 3px solid var(--grid-b);
  border-bottom: 3px solid var(--grid-b);
  box-sizing: border-box;
  padding: 28px 20px;
  text-align: center;
}

/* Quitar borde derecho a la última columna de cada fila (4 en desktop) */
.services-grid > .elementor-element:nth-child(4n){
  border-right: none;
}

/* Borde arriba en la primera fila */
.services-grid > .elementor-element:nth-child(-n+4){
  border-top: 3px solid var(--grid-b);
}


/* ===== Responsivo ===== */
@media (max-width: 1024px){
  .services-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .services-grid > .elementor-element:nth-child(3n){ border-right: none; }
}

@media (max-width: 767px){
  .services-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .services-grid > .elementor-element:nth-child(2n){ border-right: none; }
}

/* ===== Grid 2 columnas sin huecos en líneas ===== */
.services-2col{
  --grid-b: #c8a9a9;   /* color línea */
  --grid-w: 1px;       /* grosor línea */
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 0;
  position: relative;  /* para la línea central */
}

/* Línea vertical central continua (una sola, sin cortes) */
.services-2col::before{
  content:"";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: var(--grid-w);
  transform: translateX(-50%);
  background: var(--grid-b);
  pointer-events: none;
}

/* Cada celda (reseteos) */
.services-2col > .elementor-element{
  position: relative;
  margin: 0 !important;
  box-sizing: border-box;
  padding: 18px 16px; /* ajusta a tu gusto */
  /* sin borders (los dibujamos con pseudo-elementos) */
  border: 0 !important;
}

/* Línea inferior de cada fila con pseudo-elemento: ocupa todo el ancho de la fila */
.services-2col > .elementor-element::after{
  content:"";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--grid-w);
  background: var(--grid-b);
  pointer-events: none;
}

/* Quitar la línea inferior a la última fila (dos últimos ítems en 2 columnas) */
.services-2col > .elementor-element:nth-last-child(-n+2)::after{
  content: none;
}

/* Caso especial: si el número de items es impar, el último ocupa la fila solo.
   Quita también la línea del penúltimo si es la “columna izquierda” de la última fila completa. */
.services-2col > .elementor-element:nth-last-child(2):nth-child(even)::after{
  content: none;
}

/* ===== Móvil: 1 columna → sin línea central y líneas inferiores sólo entre items */
@media (max-width: 767px){
  .services-2col{ grid-template-columns: 1fr; }
  .services-2col::before{ display: none; }                 /* sin línea central */
  .services-2col > .elementor-element::after{ content:""; } /* línea entre items */
  .services-2col > .elementor-element:last-child::after{ content: none; }
}