/*
version: 23/04/2025
*/

   /* Contenedores página principal */
   .contenedor-margen-izquierdo{
      display: flex;
      flex-direction: column;
      width: 20%;
   }
   .contenedor-margen-derecho{
      display: flex;
      flex-direction: column;
      width: 80%;
      margin: 10px 5% 0 3%;  /* superior, derecho, inferior e izquierdo */
   }
   .contenedor-total{
      width: 100%;
      display: flex;
      flex-direction: row;
      overflow: hidden;        
      gap: 2em;
   }
   /* contenedor-total responsive */
   @media (max-width: 1300px) {
      .contenedor-total{
         flex-direction: column;
      }
      .contenedor-margen-izquierdo{
         width: 100%;
         align-items: center;
      }
      .contenedor-margen-derecho {
         width: 95%;
      }
   }/* Fin contenedores página principal */


   /* Contenedores logo UGR en pag. Educación */
   .bloque-imagen-texto {
     display: flex;
     align-items: center;  /* o flex-start */
     gap: 15px;
     margin-bottom: 20px;
   }
   .bloque-imagen-texto img {
     width: 120px;
     height: auto;
     transform: scale(var(--escala, 1));
     transition: transform 0.25s;
   }
   .bloque-imagen-texto:hover{
     --escala: 1.2;
     cursor:pointer;
   }
   .contenedor-texto {
     display: flex;
     flex-direction: column; /* Esto apila título y contenido verticalmente */
     justify-content: center;
   }
   @media (max-width: 768px) {
     .bloque-imagen-texto {
       flex-direction: column;
     }
   }/* Fin contenedores logo UGR en pag. Educación*/


   /* Contenedores Paquete Bienvenida en pag. Atención Virtual */
   .bloque-imagen-texto-AV {
     display: flex;
     align-items: center;  /* o flex-start */
     gap: 20px;
     margin-bottom: 20px;
   }
   .bloque-imagen-texto-AV img {
     width: 280px;
     height: auto;
   }
   .contenedor-texto-AV {
     display: flex;
     flex-direction: column; /* Esto apila título y contenido verticalmente */
     justify-content: center;
   }
   @media (max-width: 768px) {
     .bloque-imagen-texto-AV {
       flex-direction: column;
     }
   }/* Fin Paquete Bienvenida en pag. Atención Virtual */


/* Los siguientes son de la página Información de Interés */
 .contenedor-imagenes {
      display: flex;
      justify-content: space-evenly;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 2em;
   }
   .imagen-con-texto {
       display: flex;
       flex-direction: column;
       align-items: center;
       max-width: 380px;
   }
   .imagen-con-texto img {
      width: 380px;
      height: 315px;
      object-fit: cover;
      border-radius: 8px;
      margin-bottom: 0.5em;
   }
   figcaption {
      text-align: justify;
      font-size: 14px;
      color: #333;
      max-width: 380px;
   }/* Fin de la página Información de Interés */

/* Se usa en la página Visados, Trámites */
   .imagen-con-texto-trgr {
       display: flex;
       flex-direction: column;
       align-items: center;
       max-width: 400px;
   }
   .imagen-con-texto-trgr img {
      width: 400px;
      height: 150px;
      object-fit: cover;
      border-radius: 8px;
      margin-bottom: 0.5em;
      transform: scale(var(--escala, 1));
      transition: transform 0.25s;
   }
   .imagen-con-texto-trgr:hover{
      --escala: 1.2;
      cursor:pointer;
   }
   figcaption-trgr{
      text-align: center;
      font-size: 14px;
      color: #333;
      max-width: 400px;
   } /* Fin de la página Visados, Trámites */

/* En pág. Trámites, los logos de AEAT y FNMT */
   .logo-con-texto {
       display: flex;
       flex-direction: column;
       align-items: center;
       max-width: 180px;
   }
   .logo-con-texto img{
      width: 180px;
      height: auto;
      object-fit: cover;
      border-radius: 8px;
      align-self: center;
      margin-bottom: 0.5em;
      transform: scale(var(--escala, 1));
      transition: transform 0.25s;
   }
   .logo-con-texto:hover{
      --escala: 1.2;
      cursor:pointer;
   } /* Fin logos en pag. Trámites */

/* Los siguientes son de la página CW y CL */
   .opc-con-texto { /* Las OPC son las 2 primeras imagenes, más grandes */
       display: flex;
       flex-direction: column;
       align-items: center;
       max-width: 400px;
   }
   .opc-con-texto img{
      width: 400px;
      height: 240px;
      object-fit: cover;
      border-radius: 8px;
      margin-bottom: 0.5em;
   }
   .imagen-con-texto-cwcl { /* Las CWCL son el resto de img de cada establecimiento */
       display: flex;
       flex-direction: column;
       align-items: center;
       max-width: 300px;
   }
   .imagen-con-texto-cwcl img{
      width: 300px;
      height: 200px;
      object-fit: cover;
      border-radius: 8px;
      margin-bottom: 0.5em;
      transform: scale(var(--escala, 1));
      transition: transform 0.25s;
   }
   .imagen-con-texto-cwcl:hover{
      --escala: 1.2;
   }
   .imagen-con-texto-cwcl p1{
      width: 300px;
      color: #2471a3;
      margin: 10px 0;
      text-align:justify;
      font-size: 18px;
      font-weight:bold;
   }
   .imagen-con-texto-cwcl p{
      width: 300px;
      font-size: 16px;
      text-align: justify;
   }/* Fin CW y CL */

/* Se usa en la pag. Visados, los 3 tipos de viajeros, las primeras img de la pag.*/
   .logo-con-texto-gr {
       display: flex;
       flex-direction: column;
       align-items: center;
       max-width: 300px;
   }
   .logo-con-texto-gr img{
      width: 300px;
      height: 200px;
      object-fit: cover;
      border-radius: 8px;
      margin-bottom: 0.5em;
      transform: scale(var(--escala, 1));
      transition: transform 0.25s;
   }
   .logo-con-texto-gr:hover{
      --escala: 1.2;
      cursor:pointer;
   } /* Fin pag. Visados logos superiores */

/* elementos de diseño de texto */
   .lista1{
      list-style-position: inside;
   }
   p1{
      color: #2471a3;
      margin: 10px 0;
      text-align:justify;
      font-size: 18px;
      font-weight:bold;
   }
   .p2{
      font-size: 16px;
      text-align: justify;
   }
   p3{
      text-align: justify;
      color: #2471a3;
      margin: 10px 0;
      font-size: 24px;
   }
   p4{
      text-align: justify;
      color: #2471a3;
      margin: 10px 0;
      font-size: 22px;
   }
   .a1{
      color: #2471a3;
      font-weight:bold;
      margin: 10px 0;
      font-size: 24px;
   }
   .nnddH{
      color: #2471a3;
      font-family: Verdana, Arial, Tahoma;
      font-size: 26px;
   }

   /* Botones inferiores de navegación */
   .contenedor-botones1{
      display: flex;
      justify-content: flex-end;
      box-sizing: border-box;
      bottom: 0; 
   }
   .contenedor-botones2 {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 10px; 
      bottom: 0; 
      padding: 10px;
   }
   .boton{
      padding: 10px 20px;
      border: 2px solid #ccc;
      border-radius: 5px;
      background-color: white;
      cursor:pointer;
      flex: 1 1 calc(50% - 10px); /* Para que ocupen aprox. la mitad del contenedor en pantallas pequeñas */
      text-align: center;
      min-width: 80px;
   }
   .boton:hover {
      background-color: #2471a3;
      color: white;
   }

   /* Responsive específico para pantallas pequeñas */
   @media (min-width: 600px) {
      .boton {
         flex: 1 1 calc(15% - 10px); /* se fuerzan 5 botones en una línea */
      }
   }

   /* Caja citas de personajes célebres*/
   .caja{ 
      font-family: Century Gothic,CenturyGothic,sans-serif; 
      color: #ffffff; 
      background: #2471a3; 
      font-size: 18px; 
      font-weight: 400; 
      text-align: center; 
      margin: 0 12% 0 12%; 
      overflow: hidden; 
      border-radius: 35px 0px 35px 0px; 
      -moz-border-radius: 35px 0px 35px 0px; 
      -webkit-border-radius: 35px 0px 35px 0px; 
      border: 2px solid #1b618f;
   }

/*p1, p3 y p4 no tienen “.” de clase porque sino no funciona el <center>*/