/* ===== VARIABLES GLOBALES ===== */
:root { 
  --shadow-dark:rgb(180,180,180);
  --shadow-light: white;  
  --shadow-medium:rgb(205,205,205);  } 

/* ===== SET general ===== */
*, *::before, *::after { box-sizing:border-box; } 
html { font-size: 100%; overflow-x: hidden; } 
body { margin:0; background:rgb(226,226,226);  color:black;  overflow-x:hidden; 
       font-family: Arial, Helvetica, sans-serif;  font-size:17px; 
       -webkit-font-smoothing: antialiased; 
       -moz-osx-font-smoothing: grayscale; } 
img, video, canvas, svg { max-width:100%; height:auto; display:block; } 
button, input, textarea, select { font:inherit; } 

/* ===== Configuración general ===== */
.optcheck { display:none; }

.main { position:fixed;  inset: 0 0 0 0;  left:0;  right:0;
        background:rgb(236,236,246);   overflow:hidden auto; 
        scrollbar-gutter:stable;   overscroll-behavior:contain;  } 
.head { position:relative;  left:0;  right:0;  height:5rem; text-align:center;   margin: 0 0 0 0px;
        background-color:navy; color:white; } 
.menu { position:sticky;    margin:0;   top:0;   height:2rem;  padding:0.2rem 1rem;
        background:rgb(0,12,60);    color:snow;   overflow: hidden;  font-size:90%;
        text-align:left;  line-height:2rem;   z-index: 10;   left:0;  right:0;  } 
.idiom { position:absolute;  top:0;  right:1rem;  height:2rem;
          background:transparent;  text-align:right; }
.idiom button { background:transparent;  border:none;  color:rgb(180,180,180);  
                font-size:90%;  text-align:center; }
.idiom button:hover { color:white;  cursor:pointer;  }
.content { position:relative;   display:flex;   flex-wrap:wrap;  width:100%;
           left:0;  right:0;  botom:1.3rem; line-height:1.4;  padding:12px 0 12px 12px;  } 
.content div { border-radius: 0.4rem; } 
.pie { position:fixed;   bottom:0;   width:100%;   height:1.3rem; 
       background:rgb(140,140,140);   color:rgb(236,236,236); 
       text-align:center;   line-height:1.3rem;   font-size:0.7rem;  } 

.logo { position:absolute; width:12rem; height:5rem; padding: 0; } 
.logo img { width:100%;  height:100%;  object-fit:contain;  } 
.logo video { width:100%; height:100%; object-fit:fill; }

.fondo { position:absolute; top:0;  left:7rem;  right:0;  height:5rem;  }
.fondo img { width:100%;  height:100%;  object-fit:fill;  } 
.pname { position:absolute; top:0.2rem; left:6rem; height: 5rem; width:14rem; }
.pname img { width:100%;  height:100%;  object-fit:fill;}

.lema { position:absolute;  bottom:0.7rem;  right:1rem;  width:50%;  height:1rem;  
        font-size:80%;  font-style:italic;  text-align:right;  color:var(--shadow-light); }

.menu a { float:left;  color:black;  text-align:center;  height:1.6rem;  line-height:1.6rem; 
          text-decoration:none;   padding:0 0.8rem;  border-radius: 0.4rem;  }
.menu a:hover { background:navy;  color:white; }

a.news, a.news:link, a.news:visited, a.news:hover, a.news:active, a.news:focus
    { color:inherit; text-decoration:none; cursor:pointer; }

.options { flex: 0 0 12rem;  width:12rem;  font-size:90%;  }
.data    { flex: 1 1 0;      min-width:0;  }
.tools   { flex: 0 0 16rem;  width:16rem;  }
.base    { flex:0 0 calc(100% - 1.4rem);   width:100%;  padding:0.6rem;  margin: 2rem 0.9rem 1.5rem 0.5rem;
           box-shadow: inset 1px 1px 2px var(--shadow-dark); 
           background:rgb(220,220,226);  text-align:center;  }

.dentro, .dentrost { width:100%;   margin:0;   padding:0.6rem;  } 
.dentrost { position:sticky; top:2.6rem !important; } 
.afuera   { width:100%; margin:0; padding:1rem 1rem;  position:relative; container-type:inline-size;
            display:flex; flex-wrap:wrap;  justify-content:center;
            text-align:justify;  background:transparent;  color:rgb(75,75,75);  border:none; } 
.dentro:empty { display:none; } 
.base:empty   { display:none; } 

.inlink { display:block;  width:100%;  border-radius: 0.5rem;
          background:transparent;  color:black;  margin:0.6rem 0;
          text-decoration:none;  text-align:left;  
          border:none;  padding: 0.2rem 0.6rem;  }
.inlink:hover { background:var(--shadow-dark);  color:var(--shadow-light);  }
.optbtn { display:none;  text-align:center;  border-radius:0.4rem;  transform:scaleX(2.5);
          line-height:1.8rem;  font-size:1.2rem; 
          background:navy;  color:snow;  z-index: 10;  cursor:pointer; }
.options:not(:has(.inlink)) { display:none; }
.tap { width:100%;  border:1px solid var(--shadow-medium);  background:rgb(220,220,226);  
       padding:0.5rem 0.4rem;  border-radius: 0.5rem;  margin: 0 0 8px; }
.tap:hover {  border:1px solid var(--shadow-dark);  
              box-shadow: inset 2px 2px 10px var(--shadow-light); 
              background:var(--shadow-light); }
.tap a, .tap a:visited { text-decoration: none; font-weight: bold; }

.titulo { position:absolute;  width:70%;  
          top:50%;  left:50%;  transform:translate(-50%,-50%); 
          font-size:140%;  color:white;  z-index:10;  }

.contit { position:relative;  width:100%;  font-family: Times New Roman;  color:rgb(60,60,120);
          font-size:240%;  line-height:1.2;  text-align:center;  font-weight:bold; 
          padding:0.8rem 2rem 0 2rem;  text-shadow: 1px 1px 3px grey; }
.subtit { width:100%;  color:rgb(60,60,120); padding: 1rem 3rem 0.2rem 3rem;
          font-size:120%;  text-align:left;  font-weight:bold;  }
.celda1, .celda2, .celda3, .celda4, .celda5, .celda6 { padding:1.6rem 2rem; 
                                                       margin: 0.8rem 1rem;  background:snow; 
                                                       box-shadow: 2px 2px 6px var(--shadow-dark), 
                                                                  -2px -2px 6px var(--shadow-light);  }
.celda2 { width:22rem; text-align:left; }
.celda6 { width:100%; }
t { font-family:"Times New Roman", serif; font-size:110%; font-weight:bold; line-height:1; color:rgb(20,40,80); }

.window { position:absolute; box-sizing:border-box; overflow:hidden; padding:0; margin:0;
          z-index:10; display:block; white-space:pre-wrap; background-color:transparent; 
          top:0; left:0; width:100cqw; height:auto; min-height:10cqw; font-size:clamp(8px,1.8cqw,32px); }

.capital { }
.capital::first-letter { all: unset; }

.bicon { display:inline; width:34px; margin:10px 40px;  border: 1px solid var(--shadow-dark);
         border-radius: 4px; box-shadow: 3px 3px 6px darkgrey; }

.imglink { margin:1rem 10rem; padding:1.5rem 3rem; }
.imglink img { width:80%; border-radius:10px;  box-shadow: 4px 4px 12px darkgrey; margin:auto; }
.pieimg { text-align:center;  font-size:85%;  line-height:1.2rem;  font-style:italic;  }
.txtimg { text-align:left;  padding:0 3rem;  }

.cita { font-family: Georgia, serif;  font-style: italic;  font-size:0.9rem;
        text-align:center;  color:navy; }
.cita::before { content:'“'; }
.cita::after { content: '”'; }

.fcont { border:none; height:440px; width:100%; max-width:640px; overflow:hidden; min-width:460px;  
         display:block; margin: auto;  box-shadow: 2px 2px 6px black; }
.dcont { border:none; height:540px; width:100%; max-width:1024px; overflow:hidden; min-width:460px;  
         display:block; margin: auto;  box-shadow: 2px 2px 6px black; }

ul, ol { text-align:left;  font-size:96%;  }

.zebra { border:1px solid grey; width:90%; margin:auto; text-align:left; }
.zebra tr:nth-child(even) { background-color: lavenderblush; }
.zebra tr:nth-child(odd)  { background-color: beige; }
.zebra td { padding:4px 10px; }

.float-il { float:left;  width:18%; margin: 0 1.5rem 1rem 0; border-radius:8px;  box-shadow: 2px 2px 5px black; }
.float-ir { float:right; width:18%; margin: 0 0 1rem 1.5rem; border-radius:8px;  box-shadow: 2px 2px 5px black; }
.float-il img, .float-ir img { border-radius:8px; }

.float-cl { float:left;  width:25%; height:auto; margin: 0 1.5rem 1rem 0; border-radius:8px; box-shadow: 2px 2px 5px black; }
.float-cr { float:right; width:25%; height:auto; margin: 0 0 1.5rem 1rem; border-radius:8px; box-shadow: 2px 2px 5px black; }



/* ===== para Descktop ===== */
@media (min-width: 865px) { 
  .optbtn { display:none; }
  .dentrost { 
        display:block !important;  
        position:sticky;  
        top:2.8rem;  
        width:100%;  
  }
} 

/* ===== para telefonos ===== */
@media (max-width: 864px) { 
  body { font-size: 18px; } 

  .options, .data, .tools, .base { flex: 0 0 100%;  width:100%;  }


  .dentro { width:100%; margin:0; padding:1.3rem; 
            box-shadow: inset 4px 4px 8px var(--shadow-dark), 
                        inset -4px -4px 8px var(--shadow-light);  } 
  .afuera { width:100%; margin:0; padding:1.3rem; 
            box-shadow: 4px 4px 8px var(--shadow-dark), 
                       -4px -4px 8px var(--shadow-light); }
  .contit { position:relative;  width:100%;  font-family: Times New Roman;  color:rgb(60,60,120);
          font-size:160%;  line-height:2;  text-align:center;  font-weight:bold; 
          padding:0.5rem 0.1rem; 0.2rem;  }
  .subtit { width:100%;  color:rgb(60,60,120); padding: 0.5rem 0.1rem 0.2rem 0.1em;
          font-size:120%;  text-align:left;  font-weight:bold;  }
  .celda1, .celda2, .celda3, .celda4, .celda5, .celda6 { width:100%;  padding:0.3rem 0.1rem 0.2rem 0.1rem; }
  .options { position:relative;  left:0;  right:0;  width:100%;  } 
  .optbtn { 
        display:block;  
        width:50vw;
        max-width:150px;
        margin-left:auto;
        margin-right:auto;
        text-align:center;
        cursor:pointer;
        background:navy;
        color:white;
        border-radius:0.4rem;
        font-size:1rem;  
        font-weight: 900;
  }
.optbtn::after { content:"Ξ";  }
  .dentrost { 
        position:absolute;   
        top:3rem;   
        left:0;   
        right:0;   
        width:100%;
        z-index:20;   
        background:rgb(236,236,236);   
        border-radius:0.8rem;  
        display:none;
        opacity:0;
        transform:translateY(-0.5rem);
        transition: opacity 0.25s ease, transform 0.25s ease;
        box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  }
  /* NUEVO: toggle */
  .optcheck:checked ~ .dentrost { 
        display:block; 
        opacity:1;
        transform:translateY(0);
  }
  .bicon {  width:38px; margin:8px 18px;  border: 1px solid var(--shadow-dark);
         border-radius: 4px; box-shadow: 3px 3px 6px darkgrey; }

}