

.wp-block-button__link{color:#fff !important}
.wp-block-button__link:hover{background-color: var(--accent) !important}








.featured-slides picture {
 
	height:654px
}
#social-container{background:none}
#social-container .sg-contact-info{display: flex;  justify-content: center;  margin: 10px auto; }
#social-container a{color: var(--primary);display: flex;  align-items: center;}
@media screen and (min-width: 896px) {
	
	.site-header > .wrap{height:120px}
	
  .header-widget-area {
    display: flex;
    justify-content:space-around;
	  align-items: center;
  }
	
	.nav-primary .wrap > ul{border-radius:50px;overflow:hidden}
	
  }
/* ==========================================================
   #nosotros (existente, sin modificar)
   ========================================================== */

#nosotros{margin:60px auto}

#nosotros .sg-two-cols-wrapper {
  display: flex;
  max-width: 100%;
  width: 1280px;
  flex-direction: wrap;
  justify-content: space-around;
  margin: 0 auto;
}

#nosotros .sg-two-cols-wrapper > div {
  padding: 10px;
  box-sizing: border-box;
  width: 572px;
  max-width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#nosotros .sg-two-cols-wrapper > div p {
  max-width: 510px;
	margin:10px auto
}

#nosotros .sg-two-cols-wrapper > div h4 {
  max-width: 510px;
}

@media screen and (min-width: 896px) {
  .slide-title {
    font-size: 60px;
  }
  .slide-text {
    font-size: 20px;
  }
  .slide-content-inner {
    max-width: 648px;
  }
}

/* ==========================================================
   Sección "Nuestros Servicios" (#home-block3) – Mobile First
   ========================================================== */

#home-block3 {
  background-color: var(--primary);
  color: var(--bg);
  font-family: var(--font-text-primary);
  font-weight: var(--weight-text-primary);
  padding: 48px 20px;
}

/* ---------- Encabezado ---------- */
#servicios .textwidget {
  max-width: 700px;
  margin: 0 auto 64px;
  text-align: center;
}

#servicios h2 {
  font-size: 1.9rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--bg);
}

#servicios p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

/* ---------- Grid de tarjetas ---------- */
#startergeek_feature_grid-2 .sg-columns {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
	justify-content:center
}

.sg-col {
  display: flex;
  justify-content: center;
}

/* Separador entre tarjetas (línea horizontal en mobile) */
.sg-col:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding-bottom: 32px;
}

.sg-card {
  width: 100%;
  max-width: 340px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
	justify-content: space-between;
}

/* ---------- Icono ---------- */
.sg-card img {
 
  object-fit: contain;
  margin-bottom: 20px;
}

/* ---------- Título ---------- */
.sg-card h4 {
  font-family: var(--font-text-primary);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--bg);
  margin: 0 0 16px;
  line-height: 1.4;
}

/* ---------- Texto ---------- */
.sg-card-text {
  font-size: 0.9rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.75);
}

.sg-card-text p {
  margin: 0 0 14px;
}

.sg-card-text p:last-child {
  margin-bottom: 0;
}

.sg-card-text strong {
  color: var(--bg);
  font-weight: 700;
}

/* ---------- Botón "Ver más" ---------- */
.sg-card-btn {
  display: inline-block;
  margin-top: 24px;
  padding: 10px 28px;
  background-color: var(--nav-bg);
  color: var(--nav-text);
  font-family: var(--font-nav);
  font-weight: var(--weight-nav);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.sg-card-btn:hover {
  background-color: #fff;
  transform: translateY(-1px);
  color: var(--nav-bg);
}

/* ==========================================================
   Tablet (≥ 640px): 2 columnas
   ========================================================== */
@media (min-width: 640px) {
 #startergeek_feature_grid-2 .sg-columns {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 32px 24px; /* 32px vertical, 24px horizontal */
  }

  .sg-col {
    /* calc(50% - la mitad del gap horizontal) */
    flex: 0 0 calc(50% - 12px); 
  }

  /* Resetear bordes móviles para evitar inconsistencias */
  .sg-col:not(:last-child) {
    border-bottom: none;
    padding-bottom: 0;
  }
}

/* ==========================================================
   Desktop (≥ 992px): 3 columnas con separadores verticales
   ========================================================== */
@media (min-width: 992px) {
  #home-block3 {
    padding: 64px 40px;
  }

  #servicios h2 {
    font-size: 2.4rem;
  }

  #servicios p {
    font-size: 1rem;
  }

  #startergeek_feature_grid-2 .sg-columns {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0; /* Se quita el gap para que el padding y border manejen el espacio simétrico */
  }

  .sg-col {
    flex: 1 1 0;
    padding: 0 32px; /* Espaciado uniforme horizontal */
  }

  /* Limpiar estilos mobile y aplicar línea vertical simétrica */
  .sg-col:not(:last-child) {
    border-bottom: none;
    padding-bottom: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
  }

  .sg-card {
    max-width: 100%;
  }
}



/* ==========================================================
   Sección "Contacto" – Mobile First
   ========================================================== */

.footer-widgets-1 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 20px;
}

/* ---------- Encabezado ---------- */
#contacto .textwidget {
  text-align: center;
}

#contacto h2 {
  font-family: var(--font-text-primary);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 12px;
  line-height: 1.3;
}

#contacto p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text);
  opacity: 0.8;
  margin: 0;
}

/* ---------- Imagen ---------- */
#media_image-2 {
  display: flex;
  justify-content: center;
}

#media_image-2 img {
  width: 100%;
  max-width: 480px;
  height: auto;
}

/* ---------- Formulario ---------- */
#formulariofoot .wpcf7-form > div {
  margin-bottom: 16px;
}

#formulariofoot .wpcf7-form p {
  margin: 0;
}

#formulariofoot .medioinput {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#formulariofoot .wpcf7-form-control-wrap {
  display: block;
}

#formulariofoot input.wpcf7-form-control,
#formulariofoot textarea.wpcf7-form-control {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-text-primary);
  font-size: 0.9rem;
  color: var(--text);
  background-color: #f4f4f4;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 12px 14px;
}

#formulariofoot input.wpcf7-form-control::placeholder,
#formulariofoot textarea.wpcf7-form-control::placeholder {
  color: #9aa0a6;
}



#formulariofoot input.wpcf7-form-control:focus,
#formulariofoot textarea.wpcf7-form-control:focus {
  outline: none;
  border-color: var(--nav-bg);
  background-color: #ffffff;
}

#formulariofoot textarea.wpcf7-form-control {
  resize: vertical;
  min-height: 140px;
}

/* ---------- Botón enviar ---------- */
#formulariofoot .wpcf7-form-control.wpcf7-submit {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 14px 28px;
  background-color: var(--nav-bg);
  color: var(--nav-text);
  font-family: var(--font-nav);
  font-weight: var(--weight-nav);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

#formulariofoot .wpcf7-form-control.wpcf7-submit:hover {
  background-color: var(--primary);
  transform: translateY(-1px);
}

#formulariofoot .wpcf7-response-output {
  margin-top: 16px;
  font-size: 0.85rem;
}

/* ==========================================================
   Tablet / Desktop (≥ 768px): imagen a la izquierda, form a la derecha
   ========================================================== */
@media (min-width: 768px) {
  .footer-widgets-1 {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "heading heading"
      "image   form";
    align-items: start;
    gap: 40px 48px;
    padding: 64px 40px;
  }

	
	
  #contacto {
    grid-area: heading;
    margin-bottom: 8px;
  }

  #contacto h2 {
    font-size: 2.2rem;
  }

  #contacto p {
    font-size: 1rem;
    max-width: 700px;
    margin: 0 auto;
  }

  #media_image-2 {
    grid-area: image;
    align-self: center;
  }

  #formulariofoot {
    grid-area: form;
  }

  #formulariofoot .medioinput {
    flex-direction: row;
  }

  #formulariofoot .wpcf7-form-control.wpcf7-submit {
    width: auto;
  }

  #formulariofoot .wpcf7-form > div:last-of-type p {
    text-align: right;
  }
}

/* ==========================================================
   Footer inferior (logo + contacto + menú + copyright)
   ========================================================== */

.footer-widgets-2 {
  background-color: var(--primary);
  color: #ffffff;
  text-align: center;
  padding: 48px 20px 0;
}

.footer-widgets-2 a {
  color: #ffffff;
}

.footer-widgets-2 a:hover,
.footer-widgets-2 a:focus {
  opacity: 0.8;
  color: #ffffff;
}

/* ---------- Logo ---------- */
#media_image-3 {
  margin-bottom: 32px;
}

#media_image-3 img {
  width: 180px;
  height: auto;
  margin: 0 auto;
  display: block;
}

/* ---------- Teléfono / redes / email ---------- */
#startergeek_contact_info-3 {
  margin-bottom: 28px;
}

.sg-contact-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px 64px;
}

.sg-contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  font-weight: 400;
}


.sg-social-links {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sg-social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
 
  border-radius: 50%;
 
}



/* ---------- Menú ---------- */
#nav_menu-2 {
  margin-bottom: 24px;
}

#nav_menu-2 ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

#nav_menu-2 li {
  list-style: none;
  margin: 0;
  padding: 0;
}

#nav_menu-2 a {
  font-size: 0.9rem;
  font-weight: 400;
}

/* ---------- Copyright ---------- */
#footcopyright {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: 18px 20px;
}

#footcopyright .textwidget {
  font-size: 0.85rem;
 
}

#footcopyright .textwidget div {
  margin: 0;
}

@media (min-width: 600px) {
  .footer-widgets-2 {
    padding: 56px 20px 0;
  }

  .sg-contact-item {
    font-size: 1rem;
  }

  #nav_menu-2 a {
    font-size: 0.95rem;
  }
}





/* ==========================================================
   Sección "Artículos" (#articuloshome) – Mobile First
   ========================================================== */

#articuloshome .widget-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 20px;
}

#articuloshome article {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  aspect-ratio: 3 / 4;
  isolation: isolate;
}

/* Imagen de fondo */
#articuloshome article a.alignnone {
  position: absolute;
  inset: 0;
  display: block;
}

#articuloshome article img.entry-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

/* Degradado oscuro para que el texto resalte */
#articuloshome article::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(40, 48, 64, 0.95) 0%,
    rgba(40, 48, 64, 0.75) 35%,
    rgba(40, 48, 64, 0) 65%
  );
  z-index: 1;
  pointer-events: none;
}

/* Título sobre la imagen */
#articuloshome .entry-header {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 20px;
  text-align: center;
}

#articuloshome .entry-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.4;
}

#articuloshome .entry-title a {
  color: #ffffff;
  text-decoration: none;
}

#articuloshome .entry-title a:hover {
  text-decoration: underline;
}

/* Efecto hover: zoom suave en la imagen */
#articuloshome article:hover img.entry-image {
  transform: scale(1.05);
}


#articuloshometit{text-align:center;margin:0 auto;margin-top:60px;margin-bottom: -40px;}
/* ==========================================================
   Tablet / Desktop (≥ 768px): 3 columnas
   ========================================================== */
@media (min-width: 768px) {
  #articuloshome .widget-wrap {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    padding: 64px 40px;
  }

  #articuloshome article {
    aspect-ratio: 3 / 4.2;
  }
}

