/* ==============================
   VARIABLES BASE
================================ */
:root {
  --blanco: #fff;
  --grisc: #fafafa;
  --griso: #666;
  --azulc: #defcfc;
  --azul: #066097;
  --azulo: #0a1d39;
  --oscuro: #06263f;
  --oscuro2: #222;
  --naranja: #6f3e03;
  --amarillo: #ffcc66;
  --verde: #25d366;
  --verdeo: #128c7e;
  
  --poppins: "Poppins", sans-serif;

 
}

.bg-pr {
    background: var(--grisc);
    font-family: var(--poppins);
}


/* ==============================
   HEADER / NAVBAR
================================ */
.menu-header {
    background: var(--oscuro);
}


.menu-header a{
    color: var(--blanco);
}

.menu-header a:hover{
    color: var(--amarillo);
}


.logo-p {
    height: 50px ;
}


/* ==============================
   BOTÓN CONTACTO
================================ */
.btn-contacto {
  color: var(--amarillo);
  padding: 7px 15px;
  border: none;
  font-weight: 600;
  letter-spacing: 1px;
  text-decoration: none;
  transition: var(--transition);
  font-family: var(--oregano);
  font-size: 1.5rem;
  border-radius: 40px;
}

.btn-contacto:hover {
  color: var(--blanco);
}


/* ==============================
   DROPDOWN
================================ */
.dropdown-menu {
  background: var(--oscuro);
  padding: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  border: none;
}

.dropdown-item {
  color: var(--grisc);
  padding: 8px 14px;
  transition: var(--transition);
}

.dropdown-item:hover {
  color: var(--amarillo);
  background: var(--oscuro);
}

/* ==============================
   DROPDOWN EN MÓVIL SIN CAMBIAR COLORES
================================ */
@media (max-width: 991px) {

  /* Mantener fondo oscuro también en móvil */
  .navbar-collapse {
    background: var(--oscuro) !important;
  }

  .dropdown-menu {
    background: var(--oscuro) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  }

  .dropdown-item {
    color: var(--grisc) !important;
  }

  .dropdown-item:hover,
  .dropdown-item:focus {
    color: var(--amarillo) !important;
    background: var(--oscuro) !important;
  }
}



/* ==============================
   ARTÍCULO DEL BLOG APIDATO
================================ */

.blog-articulo {
    color: var(--oscuro);
    font-family: var(--poppins);
    background: var(--blanco);
    border: 1px solid var(--grisc);
    padding:50px 10px;
    border-radius: 0px;
}

.datos-blog {
    color: var(--griso);
    font-size: 1rem;
}

.blog-portada img {
    width: 100%;
    height: auto;       /* mantiene proporción */
    display: block;     /* elimina espacios en línea */
    border: 1px solid red;
}

.datos-blog {
    font-style: italic;
    color: #555;
    opacity: 0.9;
    line-height: 1.4;
}

.datos-blog .autor {
    font-weight: 400;
    color: var(--oscuro);
}

.datos-blog .fecha {
    font-size: 0.85rem;
    color: #777;
}



.titulo-articulo {
    font-size: 2.0rem;
    font-weight: 400;
    color: var(--azul);
    text-align: center;
}

.subtitulo-articulo {
    font-size: 1.2rem;
    font-weight: 400;
    text-align: justify;
    color: var(--oscuro);
}

.contenido-articulo h2 {
    margin-top: 2rem;
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--azul);
    font-family: var(--poppins);
}

.contenido-articulo p,
.contenido-articulo li {
    line-height: 1.7;
    margin-bottom: 1rem;
}

.contenido-articulo ul {
    padding-left: 1.2rem;
}

.frase-final {
    font-style: italic;
    text-align: center;
    margin-top: 2rem;
    background: var(--amarillo);
    padding: 12px;
    border-radius: 8px;
    color: var(--oscuro);
}





/* ==============================
   RESPONSIVE
================================ */
@media (max-width: 991px) {

  .navbar-collapse {
    background: var(--azul);
    padding: 15px;
  }

  .navbar-nav .nav-link {
    margin-right: 0;
    padding: 10px 0;
    color: var(--grisc);
    font-size: 1.5rem;
  }

  .btn-contacto {
    margin-top: 10px;
    width: 100%;
    text-align: center;
  }

  .hero {
    padding: 40px 15px;
  }

  .hero-text h1 {
    font-size: clamp(2rem, 7vw, 2.5rem);
  }
}




/* ==============================
   FOOTER
================================ */