/* ========================================
   TABLA DE CONTENIDOS
   ========================================
   1. CONFIGURACIÓN GLOBAL
   2. HEADER Y LOGO
   3. HEADER PERSONALIZADO - IMAGEN HERO
   4. IMÁGENES Y MEDIOS
   5. SECCIÓN: SOBRE NOSOTROS
   6. SECCIÓN: SERVICIOS (PANEL 2)
   7. SECCIÓN: POR QUÉ ELEGIRNOS
   8. RESPONSIVE - MOBILE/TABLET
   ======================================== */

/* ========================================
   1. CONFIGURACIÓN GLOBAL
   ======================================== */

/* Scroll suave para toda la página */
html {
  scroll-behavior: smooth;
}

/* Contenedor principal - Ancho completo */
.wrap {
  max-width: 100%;
}

/* Ocultar encabezado de entrada por defecto */
.entry-header {
  display: none;
}

/* Ocultar enlace de imprint/huella */
a.imprint {
  display: none;
}

/* ========================================
   2. HEADER Y LOGO
   ======================================== */

/* Logo personalizado - Posicionamiento absoluto centrado */
.custom-logo {
  position: absolute;
  top: -200px;           /* Desplazamiento hacia arriba */
  left: 50%;             /* Centrado horizontal */
  transform: translateX(-50%); /* Ajuste fino del centrado */
  width: 420px;          /* Ancho fijo del logo */
  height: auto;          /* Altura proporcional */
}

/* ========================================
   3. HEADER PERSONALIZADO - IMAGEN HERO
   ======================================== */

/* Contenedor del header personalizado - Limitar altura */
.custom-header-media {
  max-height: 500px !important;    /* Altura máxima del contenedor */
  overflow: hidden !important;     /* Ocultar contenido que exceda la altura */
}

/* Contenedor interno del header - Limitar altura */
#wp-custom-header {
  max-height: 350px !important;    /* Altura máxima del contenedor interno */
  overflow: hidden !important;     /* Ocultar contenido que exceda la altura */
}

/* Imagen del header personalizado - Recorte y ajuste */
#wp-custom-header img {
  width: 100% !important;          /* Ancho completo del contenedor */
  height: 350px !important;        /* Altura fija para recortar */
  object-fit: cover !important;    /* Recorta la imagen manteniendo proporción */
  object-position: center !important; /* Centra el punto de recorte */
  display: block !important;       /* Elimina espacios en blanco debajo */
}

/* ========================================
   4. IMÁGENES Y MEDIOS
   ======================================== */

/* Imagen destacada - Configuración de tamaño y centrado */
.attachment-twentyseventeen-featured-image {
  width: 12000px;        /* Ancho del contenedor */
  height: 1000px;        /* Altura fija, mantiene proporción */
  display: block;        /* Elemento de bloque */
  margin: 0 auto;        /* Centrado horizontal */
}

/* Recorte de imagen del mapa - Elimina 2px superiores */
#mapa img {
  clip-path: inset(2px 0 0 0);
}

/* ========================================
   5. SECCIÓN: SOBRE NOSOTROS
   ======================================== */

/* --- DESKTOP: min-width 1025px --- */
@media (min-width: 1025px) {
  /* Contenedor principal - Ancho completo de viewport */
  .conteiner-sobre-nosotros-img.gb-block-container {
    max-width: 100vw !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important; /* Expansión a ancho completo */
    padding: 0 !important;
  }

  /* Contenedor interno - Sin padding */
  .conteiner-sobre-nosotros-img .gb-container-inside {
    max-width: 100vw !important;
    padding: 0 !important;
  }

  /* Contenido del contenedor - Layout flexbox horizontal */
  .conteiner-sobre-nosotros-img .gb-container-content {
    display: flex !important;
    flex-wrap: nowrap !important; /* Sin salto de línea */
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Columnas - 50% cada una */
  .conteiner-sobre-nosotros-img .gb-container-content > .wp-block-columns {
    width: 50% !important;
    flex: 0 0 50% !important;    /* Flex: no crece, no encoge, base 50% */
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Columna individual - Sin espaciado */
  .conteiner-sobre-nosotros-img .gb-container-content .wp-block-column {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Imágenes de Misión y Visión - Altura completa */
  #img-mision,
  #img-vision {
    min-height: 400px;     /* Altura mínima */
    height: 100%;          /* Altura completa del contenedor */
    margin: 0 !important;
  }
}

/* ========================================
   6. SECCIÓN: SERVICIOS (PANEL 2)
   ======================================== */

/* --- Estilos de texto --- */

/* Títulos en negrita dentro de párrafos */
.container-servicios-texto p strong {
  display: block;            /* Elemento de bloque */
  font-size: 1.2rem;         /* Tamaño de fuente aumentado */
  margin-top: 30px;          /* Espaciado superior */
  margin-bottom: 10px;       /* Espaciado inferior */
  color: #1a1a1a;            /* Color oscuro */
}

/* Primer título strong - Sin margen superior */
.container-servicios-texto p:first-of-type strong {
  margin-top: 0;
}

/* Listas no ordenadas */
.container-servicios-texto ul {
  margin-top: 0;
  margin-bottom: 20px;
  padding-left: 25px;        /* Indentación de lista */
}

/* Items de lista */
.container-servicios-texto li {
  margin-bottom: 8px;        /* Espaciado entre items */
  line-height: 1.6;          /* Altura de línea */
  text-indent: -5px;         /* Indentación negativa */
  padding-left: 5px;         /* Compensación de indentación */
}

/* --- DESKTOP: min-width 1025px --- */
@media (min-width: 1025px) {
  /* Contenedor wrap - Ancho completo sin padding */
  #panel2 .wrap {
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* Contenido de entrada - Layout flexbox con límite de ancho */
  #panel2 .entry-content {
    display: flex;
    flex-wrap: wrap;           /* Permite salto de línea */
    max-width: 1400px;         /* Ancho máximo del contenido */
    align-items: center;       /* Alineación vertical centrada */
    margin: 0 auto;            /* Centrado horizontal */
    padding: 0 40px;           /* Padding lateral */
    gap: 40px;                 /* Espacio entre elementos */
  }

  /* Título h2 - Ancho completo */
  #panel2 .entry-content > h2 {
    width: 100%;
  }

  /* Contenedor de texto de servicios - 50% menos gap */
  .container-servicios-texto.gb-block-container {
    width: calc(50% - 20px) !important;
    flex: 0 0 calc(50% - 20px) !important;
  }

  /* Contenedor de imagen de servicios - 50% menos gap */
  .container-servicios-img.gb-block-container {
    width: calc(50% - 20px) !important;
    flex: 0 0 calc(50% - 20px) !important;
  }

  /* Imagen del mapa - Ajuste responsivo */
  .container-servicios-img #mapa img {
    width: 100%;
    height: auto;
    object-fit: cover;         /* Recorte proporcional */
  }
}

/* --- MOBILE/TABLET: max-width 1024px --- */
@media (max-width: 1024px) {
  /* Contenedores de servicios - Ancho completo en móvil */
  .container-servicios-texto.gb-block-container,
  .container-servicios-img.gb-block-container {
    width: 100% !important;
    margin-bottom: 30px;       /* Espaciado inferior */
  }
}

/* ========================================
   7. SECCIÓN: POR QUÉ ELEGIRNOS
   ======================================== */

/* Contenedor principal - Tarjeta elevada */
.conteiner-porque.gb-block-container {
  max-width: 840px;
  margin: -90px auto 60px auto; /* Margen negativo superior para superposición */
  padding: 40px 20px;
  background-color: #ffffff;
  border-radius: 8px;           /* Bordes redondeados */
}

/* Contenedor de servicios Regguards */
#Servicios-regguards {
  max-width: 840px;
  margin: 60px auto 50px auto;
  padding: 0 20px;
}

/* Título de la sección "Por qué" */
#servicios-porque {
  font-size: 1.8rem;
  font-weight: 800;             /* Peso extra bold */
  margin-bottom: 30px;  
  color: #1a1a1a;
}

/* Lista de razones - Grid de 2 columnas */
#lista-porque {
  list-style: none;             /* Sin viñetas */
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columnas iguales */
  gap: 20px;                    /* Espacio entre items */
}

/* Items de la lista - Tarjetas con borde */
#lista-porque li {
  padding: 15px 20px;
  background-color: white;
  border-left: 4px solid #132a39; /* Borde izquierdo azul oscuro */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Sombra sutil */
  transition: transform 0.2s;    /* Transición suave */
}

/* Efecto hover - Desplazamiento a la derecha */
#lista-porque li:hover {
  transform: translateX(5px);
}

/* ========================================
   8. RESPONSIVE - MOBILE/TABLET
   ======================================== */

/* --- MOBILE: max-width 768px --- */
@media (max-width: 768px) {
  /* Lista de razones - Una columna en móvil */
  #lista-porque {
    grid-template-columns: 1fr;
  }
  
  /* Título reducido en móvil */
  #servicios-porque {
    font-size: 1.5rem;
  }
}

/* --- RESPONSIVE: Header personalizado --- */

/* Tablet - Reducir altura del header */
@media (max-width: 1024px) {
  .custom-header-media,
  #wp-custom-header {
    max-height: 250px !important;
  }
  
  #wp-custom-header img {
    height: 300px !important;
  }
}

/* Móvil - Reducir aún más la altura del header */
@media (max-width: 768px) {
  .custom-header-media,
  #wp-custom-header {
    max-height: 1px !important;
  }
  
  #wp-custom-header img {
    height: 180px !important;
  }
}