/* ---------------------------------------
   GENERAL / RESET
--------------------------------------- */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Fondo y tipografía global */
body {
  background: url("https://istekgxshhbwkvrmckhh.supabase.co/storage/v1/object/public/rga.documentos.25/Imagenes/portada_1.jpg")
              no-repeat center center fixed;
  background-size: cover;
  margin: 0;
  padding-top: 0;  /* Sin espacio extra: carrusel pegado al menú */
  font-family: 'Inter', Arial, sans-serif;
  line-height: 1.8;
}

/* Texto justificado opcional */
.text-justify {
  text-align: justify;
}

/* ---------------------------------------
   CONTENEDORES / LAYOUT
--------------------------------------- */
.container {
  max-width: 1400px;
  width: 96%;
  color: #f8f9fa;
  padding: 60px;
  margin: 60px auto;
  border-radius: 20px;
  backdrop-filter: blur(100px);
  transition: transform 0.2s ease-in-out;
}

.container:hover {
  transform: translateY(-4px);
}

.container h1 {
  font-size: 2.2em;
  margin-bottom: 20px;
}

.container p {
  font-size: 1.2em;
  line-height: 1.8;
}

.centered {
  text-align: center !important;
  vertical-align: middle !important;
}

/* ---------------------------------------
   CONTENEDORES - FOOTER
--------------------------------------- */
.container-footer {
  max-width: 1400px;
  width: 96%;
  color: #f8f9fa;
  padding: 12px 60px;
  margin: 60px auto;
  border-radius: 20px;
  backdrop-filter: blur(100px);
  transition: transform 0.2s ease-in-out;
}

/* ---------------------------------------
   TIPOGRAFÍA / TÍTULOS
--------------------------------------- */
.titulos {
  font-size: 2.5rem;
  margin-block: 1rem;
  font-family: 'Inter', Arial, sans-serif;
  font-weight: 700;
  color: #f8f3f3;
}

/* ---------------------------------------
   NAVBAR
--------------------------------------- */
.navbar {
  background-color: #5dade2;
  color: white;
}

.navbar a,
.navbar-brand,
.navbar-nav .nav-link {
  color: white !important;
}

.navbar a:hover,
.navbar-nav .nav-link:hover {
  color: #f0f0f0 !important;
}

.navbar-nav .nav-link {
  white-space: nowrap;
  padding: 0 1.2rem;
  font-size: 1.15rem;
  line-height: 1.8;
  letter-spacing: 0.5px;
}

.custom-navbar {
  padding-block: 0.5rem;
}

.navbar-central-links .nav-link {
  font-family: 'Inter';
  font-size: 1.3rem;
  font-weight: 500;
}

/* ---------------------------------------
   DROPDOWN
--------------------------------------- */
.dropdown-menu {
  background-color: #4a90d9;
  margin-top: 0.4rem;
  border-radius: 0.5rem;
}

.dropdown-item {
  color: white !important;
  font-size: 0.95rem;
}

.dropdown-item:hover {
  background-color: #337ab7;
  color: white !important;
}


/* ---------------------------------------
   ICONOS / VÍNCULOS
--------------------------------------- */
.icon-link {
  color: white;
  text-decoration: none;
}

.icon-link:hover {
  color: #cccccc;
}

.contenedor-icono svg {
  width: 30px;
  height: 30px;
}

/* ---------------------------------------
   TABLAS
--------------------------------------- */
.table {
  background-color: #f4f4f4;
  border-collapse: collapse;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
}

.table th,
.table td {
  color: #333;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #ccc;
}

.table th {
  background-color: #e0e0e0;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.table tbody tr:hover {
  background-color: #f0f0f0;
}

.table a {
  color: #0066cc;
  font-weight: 500;
  text-decoration: underline;
}

.table a:hover {
  color: #004999;
}

/* ---------------------------------------
   EXTRAS / MISC
--------------------------------------- */
.card-title {
  font-weight: bold;
}

.card-body {
  color: #020202;
}

.development-banner {
  background: rgba(8, 8, 8, 0.4);
  color: #040404;
  padding: 10px;
  font-size: 1.1em;
  font-weight: bold;
  border-radius: 8px;
  margin-bottom: 15px;
  text-align: center;
}

/* ---------------------------------------
   SECCIONES
--------------------------------------- */
.section-gris-overlay {
  background-color: rgba(55, 123, 157, 0.6);
  padding: 40px 20px;
  color: #ffffff;
  border-radius: 8px;
  margin-top: 20px;
}

.section-gris-overlay h1,
.section-gris-overlay h2,
.section-gris-overlay h3 {
  color: #ffffff;
  margin-bottom: 20px;
}

.section-gris-overlay p,
.section-gris-overlay li {
  color: #ffffff;
  font-size: 1.1rem;
}

/* ---------------------------------------
   SECCIONES VERDES
--------------------------------------- */
.section-whole {
  background-color: rgba(255, 255, 255, 0.4);
  padding: 40px 20px;
  color: #ffffff;
  border-radius: 8px;
  margin-top: 20px;
}

.section-author-page {
  background-color: rgba(22, 86, 115, 0.4);
  padding: 10px 20px;
  color: #ffffff;
  border-radius: 8px;
  margin-top: 5px;
}
/* ---------------------------------------
   CARRUSEL PRINCIPAL (mainCarousel)
--------------------------------------- */
.section-articulos {
  background-color: rgba(32, 37, 79, 0.4);
  padding: 40px 20px;
  border-radius: 8px;
  margin-top: 0; /* sin separación arriba */
}

/* Cada slide */
.main-carousel-item {
  position: relative;
  overflow: hidden;                 /* evita desbordes */
  min-height: 900px;
  background-color: rgba(0,0,0,0.5);/* sombra general del bloque */
}

/* Capa oscura SOLO de fondo (debajo de imagen y texto) */
.main-carousel-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0,0,0,0.35);
  z-index: 0;                       /* detrás de todo el contenido */
}

/* Imagen SIEMPRE por encima de la overlay */
.main-carousel-item img {
  position: relative;
  z-index: 1;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* Texto centrado, por encima de imagen y overlay */
.main-carousel-caption {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  text-align: center;
  z-index: 2;                       /* arriba de todo */
  color: #fff;
}

.main-carousel-title {
  font-size: 3.6rem;
  font-weight: bold;
  margin-bottom: 15px;
  color: #fff;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
}

.main-carousel-subtitle {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: #fff;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
}

.main-carousel-btn {
  font-size: 1.2rem;
  padding: 10px 25px;
  background: transparent;
  color: #fff !important;
  border: 2px solid #fff;
  border-radius: 6px;
  transition: opacity 0.5s;
  margin-top: 30px;
  z-index: 3;
}
.main-carousel-btn:hover {
  background-color: rgb(63,116,144) !important;
  color: #fff !important;
}

/* Flechas ocultas (si querés mostrarlas, borrá este bloque) */
.carousel-control-prev,
.carousel-control-next { display: none; }

/* Indicadores */
.carousel-indicators [data-bs-target] {
  background-color: rgba(255,255,255,0.7);
}

/* Transición suave del slide (velocidad normal) */
.carousel-item {
  transition: transform 0.6s ease-in-out !important;
  will-change: transform;
}

/* ---------------------------------------
   CARRUSEL SECUNDARIO (secondaryCarousel)
--------------------------------------- */
#secondaryCarousel .carousel-inner {
  position: relative;
  overflow: hidden;                 /* evita desbordes */
  min-height: 850px;
  background-color: rgba(26,116,200,0.4);
}

/* Capa oscura SOLO de fondo (debajo de imagen y texto) */
.secondary-carousel-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0,0,0,0.28);
  z-index: 0;                       /* detrás de todo el contenido */
}

/* Imagen por encima de la overlay */
#secondaryCarousel .custom-carousel-img,
#secondaryCarousel .carousel-inner img {
  position: relative;
  z-index: 1;
  object-fit: contain;
  width: 100%;
  height: 700px;                    /* ajustá si querés otra altura */
}

/* Contenido por encima (títulos, textos, cajas) */
#secondaryCarousel .carousel-inner .row,
#secondaryCarousel .carousel-inner h1,
#secondaryCarousel .carousel-inner .custom-box,
#secondaryCarousel .carousel-inner .carousel-caption {
  position: relative;
  z-index: 2;
  color: #fff;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
}

.custom-box {
  max-width: 700px;
  margin: 0 auto;
  font-size: 0.95rem;
}

/* Indicadores del secundario (opcional) */
#secondaryCarousel .carousel-indicators [data-bs-target] {
  background-color: rgba(255,255,255,0.85);
}

/* Transición del secundario (igual que principal) */
#secondaryCarousel .carousel-item {
  transition: transform 0.6s ease-in-out !important;
  will-change: transform;
}


/* ---------------------------------------
   ARTÍCULOS
--------------------------------------- */
.article-list-item {
  color: white;
  border-bottom: 1px solid #eee;
  padding: 20px 0;
}

.article-list-item:last-child {
  border-bottom: none;
}

.article-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: white;
  text-decoration: none;
}

.article-title:hover {
  text-decoration: underline;
}

.article-date {
  font-size: 0.9rem;
  color: white;
  margin-bottom: 5px;
}

.article-desc {
  font-size: 1rem;
  color: white;
}
/* ==== secondaryCarousel: texto NEGRO, sin sombra ==== */
#secondaryCarousel .carousel-inner .row,
#secondaryCarousel .carousel-inner h1,
#secondaryCarousel .carousel-inner h2,
#secondaryCarousel .carousel-inner h3,
#secondaryCarousel .carousel-inner p,
#secondaryCarousel .carousel-inner a,
#secondaryCarousel .carousel-inner li,
#secondaryCarousel .custom-box,
#secondaryCarousel .carousel-caption {
  color: #111 !important;       /* negro legible */
  text-shadow: none !important; /* sin sombra */
}

/* (opcional) botones del secundario en negro/tema */
#secondaryCarousel .btn {
  color: #111 !important;
  border-color: #111 !important;
}
/* Evita que un transform heredado congele el slide */
.section-articulos:hover { transform: none !important; }

/* Solo el título "Acerca de mí" del secondaryCarousel en BLANCO */
#secondaryCarousel .carousel-inner > .titulos {
  position: relative;     /* asegura stacking por encima del overlay */
  z-index: 2;
  color: #ffffff !important;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.6); /* opcional para contraste */
}


/* =========================================================
   SOLO MOBILE (≤768px)
   - Navbar a la izquierda y compacta
   - Carruseles: stacking correcto (sin slide fijo) + imágenes razonables
   - Cards / Boxes legibles
   - Tablas scrolleables, tipografías y paddings adecuados
   - NO afecta tablet/desktop
========================================================= */
@media (max-width: 768px) {

  /* -------- 0) Fondo y respiración general -------- */
  body{
    background-attachment: scroll !important;
    padding-top: 64px;         /* ajustá si tu navbar fija mide distinto */
    line-height: 1.6;
  }

  /* -------- 1) NAVBAR: izquierda + compacta -------- */
  .navbar,
  .navbar .container,
  .navbar .container-fluid{
    justify-content: flex-start !important;
    text-align: left !important;
  }
  .navbar-brand{
    font-size: 1rem;
    line-height: 1.1;
    padding-block: .25rem;
    margin-right: .75rem;
  }
  .navbar-toggler{
    order: 1;
    margin: 0;                /* sin auto, queda pegado a la izquierda */
    padding: .25rem .5rem;
    border-width: 1px;
  }
  .navbar-collapse{
    justify-content: flex-start !important;
    text-align: left !important;
  }
  .navbar-nav{ align-items: flex-start !important; }
  .navbar-nav .nav-link{
    font-size: .95rem;
    padding: .45rem .75rem;
    white-space: normal;
    text-align: left !important;
  }

 
  /* -------- 3) TIPOGRAFÍAS / TÍTULOS -------- */
  .titulos{ font-size: clamp(1.35rem, 6vw, 1.65rem); margin-block: .6rem; }
  h1, h2, h3{ 
    font-size: clamp(1.1rem, 5vw, 1.4rem); 
    line-height: 1.25; margin-bottom: .6rem; text-align: center;
  }
  p, li{ font-size: clamp(.98rem, 4.2vw, 1.06rem); line-height: 1.6; }

  /* -------- 4) CONTENEDORES / SECCIONES -------- */
  .container{ 
    padding: 18px 16px; 
    margin: 16px auto; 
    border-radius: 14px;
  }
  .section-gris-overlay,
  .section-whole,
  .section-author-page,
  .section-articulos{
    padding: 20px 14px;
    margin-top: 12px;
    border-radius: 10px;
  }

  /* -------- 5) CARDS / BOXES -------- */
  .card{
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
    /* mantiene tu estética; solo garantizamos legibilidad en mobile */
    backdrop-filter: blur(8px);
    margin-bottom: 12px;
  }
  .card-body{
    padding: 14px 16px;
    color: #020202;                  /* ya lo tenías, reforzamos lectura */
  }
  .card-title{ 
    font-size: clamp(1.05rem, 4.8vw, 1.15rem);
    margin-bottom: .35rem;
  }
  .card-text{ font-size: clamp(.98rem, 4.2vw, 1.06rem); }

  /* caja de “Acerca de mí” (custom-box) */
  .custom-box{
    width: 100%;
    max-width: 100%;
    padding: 14px 16px !important;
    border-radius: 10px;
    margin-bottom: 12px;
    font-size: clamp(.98rem, 4.2vw, 1.06rem);
  }

  /* -------- 6) TABLAS (scroll horizontal suave) -------- */
  .table{
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: .95rem;
  }
  .table th, .table td{ white-space: nowrap; }

  /* -------- 7) BOTONES / FORM -------- */
  a.btn, button.btn{ min-height: 44px; padding: 10px 16px; }
  .form-control{ min-height: 42px; font-size: 1rem; }

  /* -------- 8) LISTA DE ARTÍCULOS -------- */
  .article-list-item{ padding: 14px 0; }
  .article-title{ font-size: 1.1rem; }
}

/* ===== SOLO MOBILE (≤768px) — Tamaño del 1er carrusel ===== */
@media (max-width: 768px) {

  /* Alto del slide y respiración interna */
  #mainCarousel .main-carousel-item{
    min-height: 72vh;          /* ajustalo entre 52–62vh si querés */
    padding: 12px 10px;        /* margen interno suave */
    overflow: hidden;
  }

  /* Caja del texto: ancho controlado y centrado */
  #mainCarousel .main-carousel-caption{
    width: 92%;
    max-width: 520px;          /* evita líneas larguísimas */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* Botón un poco más compacto */
  #mainCarousel .main-carousel-btn{
    padding: 8px 14px;
    min-height: 40px;
    font-size: 0.95rem;
  }

    /* Título */
  #mainCarousel .main-carousel-title{
    font-size: 2.4rem;   /* antes 3.6rem → 2/3 */
    line-height: 1.2;
  }

  /* Subtítulo */
  #mainCarousel .main-carousel-subtitle{
    font-size: 1.2rem;   /* antes 1.8rem → 2/3 */
    line-height: 1.35;
    margin-bottom: .6rem;
  }
    /* Alinear el TEXTO del 1er carrusel hacia arriba */
  #mainCarousel .main-carousel-caption{
    top: 12%;                 /* súbelo/ bájalo ajustando este % (8–16%) */
    left: 50%;
    transform: translateX(-50%); /* quitamos el -50% vertical */
    width: 92%;
    max-width: 520px;
    text-align: center;
  }
    /* Corrige transparencia y fondo en mobile */
  #mainCarousel,
  #mainCarousel .main-carousel-item {
    background: transparent !important;
    opacity: 1 !important;
  }

  /* Si usás un overlay, hacerlo más sutil en móvil */
  #mainCarousel .main-carousel-overlay {
    background: rgba(0, 0, 0, 0.15) !important; /* antes suele ser 0.4 o más */
  }

  /* Asegura que el caption no tenga fondo blanco ni gris */
  #mainCarousel .main-carousel-caption {
    background: transparent !important;
  }
}
/* ===== MOBILE (≤768px) — Ajuste fino del 2° carrusel ===== */
@media (max-width: 768px){

  #secondaryCarousel {
    position: relative; /* necesario para anclar los botones */
  }

  #secondaryCarousel .carousel-item {
    padding: 0.5rem 0;
    margin-bottom: 0;
  }

  #secondaryCarousel .custom-carousel-img {
    width: 100%;
    height: auto;
    max-height: 65vh;
    object-fit: cover;
    border-radius: 10px;
  }

  #secondaryCarousel .custom-box {
    background: rgba(255,255,255,0.96);
    color: #111;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    padding: 12px 14px;
    width: 90%;
    max-width: 520px;
    margin: 0 auto;
    font-size: 0.93rem;
    line-height: 1.55;
  }

  /* 🔹 Indicadores superpuestos */
  #secondaryCarousel .carousel-indicators {
    position: absolute;
    bottom: 6px; /* ajustá a gusto: 8px más arriba o abajo */
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    margin: 0;
  }

  #secondaryCarousel .carousel-indicators [data-bs-target] {
    background-color: rgba(255,255,255,0.8);
  }

  #secondaryCarousel .carousel-indicators .active {
    background-color: #111;
  }
}


/* ===== SOLO MÓVILES (≤768px) ===== */
@media (max-width: 768px) {

  /* Fondo general para el resto del sitio (inicio, secciones, etc.) */
  body {
    background: linear-gradient(180deg, #0e1528 0%, #1e243f 100%);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
  }

  /* Fondo de la portada */
  #portada {
    background-image: url("https://istekgxshhbwkvrmckhh.supabase.co/storage/v1/object/public/rga.documentos.25/Imagenes/portada_1.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-attachment: scroll;
    height: 100vh;   /* 👈 esto hace que la imagen cubra toda la pantalla */
    width: 100%;
    position: fixed; /* 👈 se mantiene de fondo detrás del contenido */
    top: 0;
    left: 0;
    z-index: -1;     /* 👈 queda detrás de todo lo demás */
  }
}