/* ===== Fondo de puntos Carpeint (colores del logotipo) ===== */
:root{
  --base-bg: #ffffff;

  /* tamaño y densidad que ya te gustaban */
  --dot: 4px;
  --gap: 48px;

  /* más color (ajusta si quieres): */
  --alpha-fill: 0.26; /* relleno del punto */
  --alpha-ring: 0.34; /* contorno 1px */

  /* Colores del logo (RGB) */
  --c-orange: 255,133,27;   /* #FF851B */
  --c-red:    230,57,70;    /* #E63946 */
  --c-teal:   49,196,190;   /* #31C4BE */
  --c-purple: 111,45,189;   /* #6F2DBD */
  --c-yellow: 247,201,72;   /* #F7C948 */
}

/* quita fondos opacos para que se vea el patrón */
.site, .site-content, .inside-article, .entry-content,
.widget, .footer-widgets, .site-footer, .site-header,
.separate-containers .inside-article, .sidebar .widget,
.one-container .site-content { background: transparent !important; }

/* fondo con relleno + contorno sutil para que se lean más */
body{
  background-color: var(--base-bg);

  /* Relleno de color (5 capas para más variación) */
  background-image:
    radial-gradient(circle, rgba(var(--c-orange), var(--alpha-fill)) var(--dot), transparent calc(var(--dot) + 1px)),
    radial-gradient(circle, rgba(var(--c-red),    var(--alpha-fill)) var(--dot), transparent calc(var(--dot) + 1px)),
    radial-gradient(circle, rgba(var(--c-teal),   var(--alpha-fill)) var(--dot), transparent calc(var(--dot) + 1px)),
    radial-gradient(circle, rgba(var(--c-purple), var(--alpha-fill)) var(--dot), transparent calc(var(--dot) + 1px)),
    radial-gradient(circle, rgba(var(--c-yellow), var(--alpha-fill)) var(--dot), transparent calc(var(--dot) + 1px)),

  /* Contorno de 1px (mismas posiciones) */
    radial-gradient(circle, transparent calc(var(--dot) - 1px),
      rgba(var(--c-orange), var(--alpha-ring)) calc(var(--dot) - 1px),
      rgba(var(--c-orange), var(--alpha-ring)) var(--dot), transparent var(--dot)),
    radial-gradient(circle, transparent calc(var(--dot) - 1px),
      rgba(var(--c-red), var(--alpha-ring)) calc(var(--dot) - 1px),
      rgba(var(--c-red), var(--alpha-ring)) var(--dot), transparent var(--dot)),
    radial-gradient(circle, transparent calc(var(--dot) - 1px),
      rgba(var(--c-teal), var(--alpha-ring)) calc(var(--dot) - 1px),
      rgba(var(--c-teal), var(--alpha-ring)) var(--dot), transparent var(--dot)),
    radial-gradient(circle, transparent calc(var(--dot) - 1px),
      rgba(var(--c-purple), var(--alpha-ring)) calc(var(--dot) - 1px),
      rgba(var(--c-purple), var(--alpha-ring)) var(--dot), transparent var(--dot)),
    radial-gradient(circle, transparent calc(var(--dot) - 1px),
      rgba(var(--c-yellow), var(--alpha-ring)) calc(var(--dot) - 1px),
      rgba(var(--c-yellow), var(--alpha-ring)) var(--dot), transparent var(--dot));

  background-size:
    var(--gap) var(--gap), var(--gap) var(--gap), var(--gap) var(--gap), var(--gap) var(--gap), var(--gap) var(--gap),
    var(--gap) var(--gap), var(--gap) var(--gap), var(--gap) var(--gap), var(--gap) var(--gap), var(--gap) var(--gap);

  /* offsets para que no se vea cuadriculado */
  background-position:
    0 0,
    calc(var(--gap)/2) calc(var(--gap)/3),
    calc(var(--gap)/3) calc(var(--gap)/2),
    calc(var(--gap)*0.8) calc(var(--gap)*0.7),
    calc(var(--gap)*0.15) calc(var(--gap)*0.85),

    0 0,
    calc(var(--gap)/2) calc(var(--gap)/3),
    calc(var(--gap)/3) calc(var(--gap)/2),
    calc(var(--gap)*0.8) calc(var(--gap)*0.7),
    calc(var(--gap)*0.15) calc(var(--gap)*0.85);
}

/* móvil: un pelín más grande para que no se pierdan */
@media (max-width: 768px){
  :root{
    --dot: 5px;
    --gap: 54px;
    --alpha-fill: 0.28;
    --alpha-ring: 0.36;
  }
}

/* tarjeta sutil de contenido (opcional) */
.inside-article, .entry-content{
  background: rgba(255,255,255,0.75) !important;
  backdrop-filter: blur(1.5px);
  border-radius: 10px;
  padding: clamp(12px, 2.5vw, 22px);
}

/* modo oscuro (si usas dark mode del sistema) */
@media (prefers-color-scheme: dark){
  :root{
    --base-bg: #0f0f13;
    --alpha-fill: 0.30;
    --alpha-ring: 0.38;
  }
  .inside-article, .entry-content{
    background: rgba(20,20,26,0.70) !important;
  }
}
/* --- Restaurar barra de menú en GeneratePress --- */
.site-header,
.main-navigation,
.inside-header,
.inside-navigation {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Asegura que el contenedor del menú se vea en desktop */
@media (min-width: 769px){
  .main-navigation ul,
  .main-navigation .main-nav > ul {
    display: flex !important;
    gap: 18px;
  }
  /* Oculta el botón hamburguesa sólo en desktop */
  .menu-toggle { display: none !important; }
}

/* En móvil, muestra el botón hamburguesa */
@media (max-width: 768px){
  .menu-toggle { display: inline-flex !important; }
}

/* Que el header no quede detrás del fondo ni de otros elementos */
.site-header, .main-navigation { z-index: 9999; position: relative; }

/* Fondo legible (puedes cambiarlo o quitarlo) */
.site-header, .main-navigation {
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(6px);
}

/* ===== Header: logo izq + menú a la derecha en una sola fila (GeneratePress) ===== */

/* Pone logo y navegación en la misma fila */
.site-header .inside-header{
  display: flex;
  align-items: center;
  justify-content: space-between; /* separa logo y menú */
  gap: 20px;
}

/* Empuja el menú a la derecha y quita fondos */
.main-navigation{
  margin-left: auto !important;
  background: transparent !important;
}

/* ESCRITORIO: palabras del menú en horizontal */
@media (min-width: 769px){
  .menu-toggle{ display:none !important; }         /* oculta hamburguesa */
  .main-navigation .main-nav > ul{
    display: flex !important;
    gap: 22px;                                     /* espacio entre items */
    margin: 0; padding: 0; list-style: none;
  }
}

/* MÓVIL: hamburguesa y menú desplegable */
@media (max-width: 768px){
  .menu-toggle{ display:inline-flex !important; }
  .main-navigation .main-nav > ul{ display:none; }
  .main-navigation.toggled .main-nav > ul{ display:block !important; }
}

/* Estilo de enlaces (ajusta colores si quieres) */
.main-navigation a{ color:#111 !important; font-weight:600; text-decoration:none; }
.main-navigation a:hover{ color:#FF851B !important; } /* naranja de tu logo */

/* Que nada lo tape */
.site-header, .main-navigation{ position:relative; z-index:1000; }