:root {
  --piia-primary: #7b1e3a;   /* guinda institucional */
  --piia-secondary: #f5a623; /* dorado/mostaza */
}

html, body {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  position: relative;
  background-image: url("/sites/default/files/original.gif");
  background-repeat: repeat;
  background-size: auto;
}

/* Capa blanca translúcida sobre el GIF */
body::before {
  content: "";
  position: fixed;        /* cubre toda la ventana */
  inset: 0;
  background-color: rgba(255, 255, 255, 0.85); /* 0.7 = bastante claro */
  pointer-events: none;   /* no bloquea clics */
  z-index: -1;            /* queda detrás del contenido */
}

html, body {
  position: relative;
  z-index: 0;
}


/* Opcional: hacer el wrapper transparente para que se vea más el fondo */
.wrapper.main-wrapper {
  max-width: 100%;
  background: transparent;

  display: block;
  width: 100% !important; /* Obliga a ocupar el ancho disponible */
  max-width: 100% !important; /* En celular no queremos restricciones */
  padding-left: 15px !important; /* Margen interno seguro para que el texto no pegue al vidrio */
  padding-right: 15px !important;
  box-sizing: border-box !important; /* Incluye el padding en el ancho total */
  float: none !important; /* Elimina floats viejos de FortyTwo */

}

/* Enlaces solo en el contenido principal (no toolbar) */
main a {
  color: var(--piia-primary);
  max-width: 760px;   /* ajusta a tu gusto: 800–1000px suele verse bien */
  margin-left: auto;
  margin-right: auto;
}

main a:hover,
main a:focus {
  color: var(--piia-secondary);
}


/* Ocultar las solapas principales (Ver / Editar / Eliminar / Revisiones) */
.ft-collapsible-tabs {
  display: none;
}

.contenedor-lectura {
  display: block;
  width: 100% !important; /* Obliga a ocupar el ancho disponible */
  max-width: 100% !important; /* En celular no queremos restricciones */
  padding-left: 15px !important; /* Margen interno seguro para que el texto no pegue al vidrio */
  padding-right: 15px !important;
  box-sizing: border-box !important; /* Incluye el padding en el ancho total */
  float: none !important; /* Elimina floats viejos de FortyTwo */
}

h1, h2, h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  color: #1a202c; /* Un gris muy oscuro se ve más moderno que el negro puro */
  letter-spacing: -0.02em; /* Títulos ligeramente más juntos (estilo premium) */
}
body {
  font-family: 'Inter', sans-serif;
  line-height: 1.7; /* Dale aire al texto para que sea fácil de leer */
  color: #4a5568;
}


.contenedor-lectura p, 
.contenedor-lectura h1, 
.contenedor-lectura h2, 
.contenedor-lectura a {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word; /* Fuerza al navegador a cortar la palabra si no cabe */
}
.contenedor-lectura img, 
.contenedor-lectura iframe, 
.contenedor-lectura video {
  max-width: 100% !important;
  height: auto !important; /* Mantiene la proporción de la imagen */
}


/* ==========================================================================
   PROTECCIÓN DE ANCHO PARA CABECERA Y CONTENEDORES SUPERIORES
   ========================================================================== */
header, 
#header, 
.header, 
.region-header, 
#page-wrapper, 
.main-wrapper {
  display: block;
  width: 100% !important; /* Obliga a ocupar el ancho disponible */
  max-width: 100% !important; /* En celular no queremos restricciones */
  padding-left: 15px !important; /* Margen interno seguro para que el texto no pegue al vidrio */
  padding-right: 15px !important;
  box-sizing: border-box !important; /* Incluye el padding en el ancho total */
  float: none !important; /* Elimina floats viejos de FortyTwo */

}

/* ==========================================================================
   DISEÑO FLUIDO MATEMÁTICO (SIN @MEDIA QUERIES)
   ========================================================================== */

body {
  /* La letra mide 15px en celular y crece fluidamente hasta 16px en PC */
  font-size: clamp(15px, 1vw + 12px, 16px) !important;
  line-height: 1.6 !important;
}

.contenedor-lectura {
  display: block !important;
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;

  /* MÁGICA DE CONTROL DE ANCHO:
     - En celulares portrait: se expande al 100% de la pantalla de forma segura.
     - En landscape: se adapta al 95% del ancho disponible.
     - En computadora: NUNCA supera los 850px para mantener una lectura perfecta. */
  width: 95% !important;
  max-width: clamp(100%, 85vw, 850px) !important;

  /* Colchón interno que se adapta al tamaño de la pantalla */
  padding-left: clamp(12px, 3vw, 40px) !important;
  padding-right: clamp(12px, 3vw, 40px) !important;
}

/* Forzar tamaños de títulos proporcionales a la pantalla */
h1, .contenedor-lectura h1 { 
  font-size: clamp(22px, 4vw, 32px) !important; 
  line-height: 1.2 !important; 
}

h2, .contenedor-lectura h2 { 
  font-size: clamp(18px, 3vw, 26px) !important; 
  line-height: 1.2 !important; 
}

h3, .contenedor-lectura h3 { 
  font-size: clamp(16px, 2vw, 20px) !important; 
  line-height: 1.2 !important; 
}

/* Bloqueo contra desbordamientos raros del tema base */
main, .wrapper, #page-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;

}