html {
  font-size: 110%;                /* ~17.6px base – buena legibilidad */
  font-family: Georgia, "Times New Roman", Times, serif;  /* Georgia para títulos mantiene el toque clásico */
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.72;              /* más aire entre líneas – mejora lectura larga */
  background-color: #fefcf5;      /* crema muy suave – se mantiene */
  color: #2a3b5b;                 /* azul-gris oscuro – elegante */
  margin: 0;
  padding: 20px 16px 60px;
  scroll-behavior: smooth;
}


/* Contenedor principal sugerido (agrega <div class="main-content"> alrededor del texto principal) */
.main-content {
  max-width: 820px;
  margin: 0 auto;
   background-color: white;
}


/* Títulos – jerarquía mejorada y respetando lo existente */
h1 {
  font-size: clamp(1.9rem, 5.5vw, 2.9rem);
  font-weight: 700;
  color: #2a3b5b;
  text-align: center;
  margin: 2rem 0 1.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 3px solid #e2c38f;   /* se mantiene el detalle cálido */
  line-height: 1.18;
}

h2 {
  font-size: clamp(1.65rem, 4.5vw, 2.15rem);
  font-weight: 600;
  color: #3b4f7a;                   /* un poco más oscuro que el texto */
  margin: 3rem 0 1.2rem;
  line-height: 1.3;
    text-align: center;
  position: relative;
}

h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #e2c38f;
  margin-top: 0.6rem;
}

/* Ajuste para móviles */
@media (max-width: 600px) {
  h2 {
    font-size: 1.5rem; /* aprox 24px - más compacto y legible */
    line-height: 1.2;  /* evita que las líneas se separen demasiado si el título envuelve */
    margin-top: 25px;
  }
}


h3 {
  font-size: clamp(1.3rem, 3.8vw, 1.65rem);
  font-weight: 500;
  color: #2a3b5b;
  margin: 2.2rem 0 1rem;
    text-align: center;
}

/* Texto base */
p, li {
  font-size: clamp(1.05rem, 3.2vw, 1.22rem);
  margin-bottom: 1.25rem;
  hyphens: auto;
  text-align: justify;              /* mejora flujo en textos largos */
}

strong {
  color: #1e2a44;
  font-weight: 600;
}





#tablahome2 {max-width: 768px; padding:1px; background-repeat: no-repeat;background-color:white;}

/* Enlaces – mejora sutil */
a {
  color: #4465AE;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.18s ease, text-decoration-thickness 0.18s ease;
}

a:hover,
a:focus {
  color: #2b458c;
  text-decoration-thickness: 2px;
}

a:visited {
  color: #5c7ab5;                   /* más suave que green original */
}


aold {color: #4465AE;}
aold:link {color: #4465AE; text-decoration: underline;}
aold:visited {color: green; text-decoration: none;}
aold:hover {color: blue;}
aold:active {color: blue; text-decoration: none;}

.panel {padding: 0 1px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out;}
table {width: 100%; border:0;margin:auto;}
td {vertical-align: top;}


/* Listas – muy importantes en esta página (numeradas 1-9, 1-5, etc.) */
ol, ul {
  margin: 1.6rem 0 1.8rem 2rem;
  padding-left: 0.8rem;
}


ol,
ol li {
  list-style-type: decimal;   /* 1. 2. 3. etc. */
  list-style-position: outside;
}


ul {
  list-style-type: square;
}

li {
  margin-bottom: 0.9rem;
  padding-left: 0.4rem;
}


.citarold {margin-left:50px;font-family:Goudy Old Style;background-color: #FFE4AE;padding:10px;width:auto; border-radius: 15px}
/* Bloque de cita */
.citar {
  margin: 2rem 0;
  padding: 1.4rem 1.8rem;
  background-color: #fff8e8;          /* más suave que #FFE4AE */
  border-left: 5px solid #e2c38f;
  border-radius: 8px;
  color: #3b4f7a;
  font-family: Georgia, serif;
  line-height: 1.65;
}

.citar p:last-child {
  margin-bottom: 0;
}

cite {font-style:normal}

.autor-meta2 {
    display: inline-block;
    margin: 0 1px; /* Añade un pequeño espacio a los lados */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.95rem;
    color: #444; /* Un toque más oscuro para cumplir mejor con ratios de contraste */
    font-weight: 600;
    letter-spacing: 0.02em; /* Mejora la legibilidad en negrita */
    text-transform: none; /* Asegura que se respete el uso de mayúsculas original */
    
}


img {border:0px;max-width: 100%;}
.img2 {border:0px;max-width: 100%;border-style: none;border-width: 0px; border-radius:0px;}
.img3 {border:0px;border-style: none;border-width: 0px; max-width: 100%;height: auto;}
.imgbanner {height: 301px;max-width: 100%;background-image: url('../img/EENI-SF.gif');background-repeat:no-repeat;background-size: 100% 100%;vertical-align:bottom}

.responsive {max-width: 100%;height: auto; text-align:center}

.site-header {
  text-align: center;
  padding: 1rem 0;
}

.responsive, .logo {
  max-width: 100%;
  height: auto;
}


.centrarej {text-align:center; border-radius: 0px}
.centrart {margin-left: 0px; margin-right: 0px;margin:0px}
.centrar {text-align:center;border-radius: 5px;border:0px}
.centrarimg {text-align:center}

.video-responsive {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
padding-top: 30px;
position: relative;
}
.video-responsive embed {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}


.video-responsive object {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}


.video-responsive iframe {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}


@media screen and (max-width: 480px) {
h1 {font-size:150%;}
h2 {font-size:76%;}
p {font-size:100%;margin:5px;padding:10px;text-align:left}
.citar {margin-left:5px}
.kotit {font-size: 130%}
}

@media screen and (min-width: 481px) and (max-width: 600px) {
h1 {font-size:200%;}
.panel {font-size:100%;}
.kotit {font-size: 140%}
}


@media screen and (min-width: 601px) {
kotit {font-size: 150%}
h2 {font-size:110%;}

}




/* Add a black background color to the top navigation */
.topnav {
  background-colorNO: #333;
    background-color:  #006606;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 14px;
}

/* Add an active class to highlight the current page */
.active {
  background-color: #04AA6D;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: 14px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}


.info {font-family: Georgia;font-size:24pt;margin-top:1px; margin-bottom:15px;height:auto; text-align:center; width: auto;margin:15px; border:medium;border-width:5pt}
.hbanner {text-align:center;padding:1px;margin-top:1px;margin-bottom:1px}
.kotit {font-family: "Arial Black";font-size: 16px;text-align:center; color:#4465AE;width:auto;display: table;border-style:solid;padding: 5px;
border-width:1px; border-color:#4465AE; background-color: white;}
.titulo_boton {padding:1px; font-family:Georgia; font-size:14px;border-width:1px; border-color:#4465AE; background-color: white;}
.boton_mostrar {font-size:14px;font-family:Georgia;border-width:1px; border-color:#4465AE; background-color: white;}
#contenido{float:left;clear:both;margin-top:1px;padding:1px;width:100%;overflow:auto;font-family:Georgia;font-size:14px;}

.pslides {font-size: 16px; padding: 0px;}

#tablahome2 {max-width: 768px; padding:1px; background-repeat: no-repeat; background-color:white;}


.accordion {background-color: #FFCC66;font-size: 100%;cursor: pointer;padding: 5px;width: auto;border: none;outline: none; 
font-family: Georgia;transition: 0.4s;}
.accordion:hover {background-color:#139B68;color: White;}
.active {background-color:#139B68;color: White;}
.accordion:after {content: '\002B';color: White; font-weight: bold; float: right; margin-left: 5px;}
.active:after { content: "\2212";background-color: #4465AE;color: White;}

.panel {padding: 0 1px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out;}



.kobje {font-family: "Georgia";font-size: 22px; width:auto;border-style:solid;padding: 3px;border-width:1px; border-color:#4465AE;}
.botbottom {font-family: "Georgia";font-size: 16px}

.kotit3 {display: block;border-style:solid;padding: 5px;
border-width:1px; border-color:#4465AE; background-color: white; width:auto}

.kotit2 {font-family: Georgia;font-size: 22px;margin-top:3px;margin-bottom:10px; margin-left:0px;margin-right:0px; width:auto;
display: table;border-style: solid;border-width:1px; border-color:#4682B4 ;color: #4070BF; border-left-style:none; border-right-style:none; text-transform: uppercase}
.kotit3proUEENI {font-family: Arial;font-size: 16px;margin-top:3px;margin-bottom:10px; margin-left:0px;margin-right:0px; width:auto;background-color:white;
display: table;border-style: solid;text-align:center;border-width:1px; border-color:#4682B4 ;color: black; border-left-style:none; border-right-style:none}
.acasa {font-size: 11pt;margin-left:1px;margin-top:1px; text-indent: 1px;}
.grano {font-family: verdana;font-size: 20px;margin-top:7px;margin-bottom:10px; width:auto;background-color:white;
display: table;border-style: solid;text-align:center;border-width:1px; border-color:#4682B4 ;color: #4070BF ; border-left-style:none; 
border-right-style:none}
.kotit3pro {background-color: #4465AE;border: none;color: white;padding: 5px 22px;text-decoration: none;display: table;
font-size: 18px;width: auto;max-width: 790px;margin-left: 0px; margin-right: 0px;margin:0px;}



hr {border:1px solid; color:#A2C7DB}
.gra {font-family: Georgia;font-size: 22px;margin-top:7px;margin-bottom:10px; margin-left:0px;margin-right:0px; width:auto;background-color:white;
display: table;border-style: solid;text-align:center;border-width:1px; border-color:#4682B4 ;color: #4070BF ; border-left-style:none; 
border-right-style:none}
.grapp {font-family: Georgia;font-size: 16px; margin-left:1px;margin-right:0px; width:auto;background-color:white ;display: table;
color: #4465AE; border-left-style:none;border-right-style:none;}
.arab2 { direction: rtl; }
.grafoto {font-size: 25pt;color: #ffffff;text-align: center;}
video {max-width: 100%;}
object {max-width: 100%;}
embed {max-width: 100%;}
input {font-size: 16px; font-weight:bold;width:auto}


.mifondo {background-image:url('EENI-Logo.png');background-repeat:no-repeat;height:183px;vertical-align:middle;text-align:center; }
#fondotabla {background-color:#301E73;}

.w3-btn-floating-large:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.w3-btn-floating:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.w3-btn-block:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.w3-btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.w3-opennav{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}   
.w3-closenav{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}   
.w3-btn-floating-large{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}   
.w3-btn-floating{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}   
.w3-btn{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}   
.w3-btn-floating-large{display:inline-block;text-align:center;color:#fff;background-color:#000;position:relative;overflow:hidden;z-index:1;padding:0;border-radius:50%;cursor:pointer;font-size:20px}
.w3-btn-floating{display:inline-block;text-align:center;color:#fff;background-color:#4682B4;position:relative;overflow:hidden;z-index:1;padding:0;border-radius:50%;cursor:pointer;font-size:20px}
.w3-btn-floating{width:40px;height:40px;line-height:40px}.w3-btn-floating-large{width:56px;height:56px;line-height:56px}
.w3-btn-floating-large:disabled{cursor:not-allowed;opacity:0.3}
.w3-btn-floating:disabled{cursor:not-allowed;opacity:0.3}
.w3-btn:disabled{cursor:not-allowed;opacity:0.3}
.w3-disabled{cursor:not-allowed;opacity:0.3}
.w3-btn-floating:disabled *{pointer-events:none}
.w3-btn:disabled *{pointer-events:none}
.w3-btn-floating.w3-disabled *{pointer-events:none}
.w3-btn-block.w3-disabled{pointer-events:none}
.w3-btn.w3-disabled *{pointer-events:none}
.w3-btn-floating-large:disabled:hover{box-shadow:none}
.w3-btn-floating-large.w3-disabled:hover{box-shadow:none}
.w3-btn-floating:disabled:hover{box-shadow:none}
.w3-btn-floating.w3-disabled:hover{box-shadow:none}
.w3-btn:disabled:hover{box-shadow:none}
.w3-btn-block.w3-disabled:hover{box-shadow:none}
.w3-btn.w3-disabled:hover{box-shadow:none}
.w3-btn-group .w3-btn{float:left}.w3-btn-block{width:100%}
.w3-btn-bar .w3-btn{box-shadow:none;background-color:inherit;color:inherit;float:left}.w3-btn-bar .w3-btn:hover{background-color:#ccc}

.tooltip {position: relative;display: inline-block;border-bottom: 1px dotted black;}

.tooltip .tooltiptext {visibility: hidden;width: 200px;top: 100%;left: 50%;margin-left: 0px;background-color: #eee;color: black;
text-align: center;border-radius: 6px;padding: 5px 0;
  /* Position the tooltip */
position: absolute;z-index: 1;}
.tooltip:hover .tooltiptext {visibility: visible;}