/**************************************************************
 *  DBP · Hoja de estilos optimizada (mobile-first, px)
 *  Mantiene el diseño original con menos repetición.
 **************************************************************/

/* ============================================================
   0) Base
   ============================================================ */
html, body{
  min-height:100%;
  background:#ffffff;
  color:#000000;
  font: normal 16px/150% Sans-Serif;
}

/* ============================================================
   1) Reset & utilidades
   ============================================================ */
*{ margin:0; padding:0; box-sizing:border-box; }
img{ max-width:100%; height:auto; }
a::selection, p::selection{ background-color: darkgrey; }

/* Radio-menu: ocultación relacionada */
input,
input:checked + label,
#hide:checked ~ #box{ display:none; }

/* ============================================================
   2) Tipografía y elementos genéricos
   ============================================================ */
h2{ font-size:28px; }
h3{ font-size:20px; }
h2, h3, p{ text-align:justify; margin:10px 0; }

/* Enlaces dentro de artículos (icono de enlace a la derecha) */
article a{
  text-decoration:none;
  background:url("images/link.png") no-repeat 100% 0;
  background-size:16px 16px;
  padding-right:20px;
  color:#0056b3;
  cursor:pointer;
  font-weight:bold;
}
article a:hover{ color:#000000; }

/* Enlaces dentro del label del menú (icono "·") */
label a{
  color:#ffffff;
  cursor:pointer;
  font-weight:bold;
  text-decoration:none;
}
label a:hover{ color:#555555; }

/* Cabecera #top */
#top{ text-align:center; padding:5% 5% 0 5%; }

/* ============================================================
   3) Navegación (radio-menu)
   ============================================================ */
label{
  float:right;
  width:90%;
  display:block;
  padding:11px 10px 10px;
  background:#000000;
  color:#ffffff;
  text-align:left;
  cursor:pointer;
  font-size:25px;
}
input:checked ~ label{ width:100%; }

/* Caja lateral del menú */
#box{
  position:fixed;
  width:10%;
  height:100%;
  background:#eeeeee;
  overflow:hidden;
  padding-top:45px;
}
#show:checked ~ #box{ display:block; }

/* Degradado de borde en la caja */
#box:after{
  content:"";
  position:absolute;
  top:0; right:0;
  height:100%; width:15%;
  background: -webkit-linear-gradient(left, rgba(150,150,150,0), rgba(0,0,0,0.25));
}

/* Items del menú */
#box a{
  text-decoration:none;
  display:block;
  color:#000000;
  border-bottom:1px solid #000000;
  padding:8px;
  font-size:15px;
  cursor:pointer;
}
#box a:hover{ background-color:#000000; color:#ffffff; }
#box a:hover:after{ content:"\00bb"; font-size:20px; float:right; }
#box a.disabled{
  pointer-events:none;
  background-color:#000000;
  color:#ffffff;
}

/* ============================================================
   4) Layout de páginas/sections
   ============================================================ */
.content{
  width:calc(100% - 10%);
  float:right;
  padding:2%;
  display:none;                  /* se muestra con :target */
}
#hide:checked ~ .content{ width:100%; }
#top, .content:target{ display:block; }
.content:target ~ #top{ display:none; }

/* ============================================================
   5) Componentes
   ============================================================ */

/* 5.1) Apps (layout 2 columnas flex) */
.apps-container{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  align-items:flex-start;
}
.apps-image{ flex:1 1 300px; text-align:center; }
.apps-image img{ max-width:100%; height:auto; }
.apps-text{ flex:2 1 500px; }

/* 5.2) Comentarios / blockquote */
blockquote{
  padding:12px 8px 12px 16px;
  border-left:8px solid #eeeeee;
  margin:24px 0 12px 24px;
  box-shadow:0 0 5px rgba(0,0,0,0.25);
}
blockquote:before{
  display:block; height:0; content:"“";
  margin-left:-15px;
  font: italic 64px/64px Sans-Serif;
  color:#000000;
}

/* 5.3) Galería (grid + tarjetas)
   — Grid fluido: no requiere media-queries para 4/6/8 columnas. */
.gallery{
  display:grid;
  gap:12px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

/* Tarjeta base */
.card{
  position:relative;
  overflow:hidden;
  aspect-ratio:1/1;
  background:#ffffff;
  isolation:isolate;
  transition: transform .20s ease;
}

/* Imagen dentro de la tarjeta */
.card img{
  width:100%;
  height:100%;
  object-fit:cover;
  border:2px solid #000000;
  transition: filter .20s ease;
  aspect-ratio:1/1;
}

/* Hover/focus: color + cursor */
.card:hover img,
.card:focus-within img{
  cursor:pointer;
    border:2px solid #000000;
}

/* Overlay inferior con título */
.card .overlay{
  position:absolute;
  left:0; right:0; bottom:0;
  width:100%;
  padding:3px;
  background:#000000;
  color:#ffffff;
  text-align:center;
  transform:translateY(100%);
  transition: transform .20s ease;
}
.card:hover .overlay,
.card:focus-within .overlay{ transform:translateY(0); }

.card .overlay span{
  display:inline-block;
  font-size:14px;
}

/* Accesibilidad teclado */
.card:focus-within{

}

/* Enlaces de la galería y del lightbox: sin icono heredado */
.gallery a,
.lightbox a{
  background:none !important;
  padding-right:0 !important;
}

/* Área clicable completa en miniatura */
.card .zoom{ display:block; line-height:0; }




/* 5.4) LIGHTBOX */

/* ===== Lightbox (optimizado) ============================================== */
:root{
  /* Ancho de franjas laterales (botones) */
  --lb-nav-w: clamp(56px, 12vw, 140px);
  --lb-pad-i: 4vw;      /* padding inline (lateral) */
  --lb-pad-b: 4vh;      /* padding block (vertical) */
  --lb-gap: 10px;
  --lb-overlay: rgba(0,0,0,.85);
}

.lightbox{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--lb-pad-b) var(--lb-pad-i);
  background: var(--lb-overlay);
  opacity: 0;
  transform: scale(1.02);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 9999;
  cursor: default;
}

/* Mostrar cuando el hash coincide (#id) */
.lightbox:target{
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Bloquear scroll cuando el lightbox está abierto */
html:has(.lightbox:target){ overflow: hidden; }

/* Contenido centrado del lightbox */
.lb-content{
  position: relative;
  z-index: 1;
  max-inline-size: min(1400px, calc(100vw - (2 * var(--lb-pad-i)) - (2 * var(--lb-nav-w))));
  max-block-size: 92vh;
  display: grid;
  gap: var(--lb-gap);
  justify-items: center;
}

.lb-content img{
  display: block;
  max-inline-size: 100%;
  max-block-size: 82vh;
  inline-size: auto;
  block-size: auto;

}

/* Título bajo la imagen */
.lb-title{
  margin: 0;
  color: #fff;
  font-weight: 600;
  text-align: center;
  font-size: 15px;
  opacity: .95;
}

/* ===== Franjas laterales (Anterior/Siguiente) + Cierre ==================== */
.lb-nav{
  position: fixed;                /* respecto a la ventana */
  inset-block: 0;                 /* top:0; bottom:0; */
  inline-size: var(--lb-nav-w);
  display: grid;
  place-items: center;            /* centra la flecha en la franja */
  z-index: 10000;                 /* por encima del contenido */
  font-size: clamp(28px, 4.5vw, 56px);
  line-height: 1;
  text-decoration: none;
  color: #fff;
  background: #000;               /* negro sólido para diferenciar del overlay */
  opacity: 1;
  border-radius: 0;               /* franja recta */
  user-select: none;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.lb-nav.prev{ inset-inline-start: 0; } /* left */
.lb-nav.next{ inset-inline-end: 0; }   /* right */

/* Mantener el cursor normal sobre la imagen (sin cerrar) */
.lb-close-img{ cursor: default; }
.lb-close-img img{ pointer-events: auto; }

/* Área de cierre por clic en el fondo (fuera de la imagen) */
.lb-close-area{
  position: fixed;
  inset: 0;        /* ocupa toda la ventana */
  z-index: 0;      /* por debajo del contenido */
  cursor: default;
}

/* Mantener la sección Origami visible si hay lightbox abierto */
html:has(.lightbox:target) #two{ display: block; }
html:has(.lightbox:target) #top{ display: none; }





/* Lightbox completamente inerte cuando no está abierto */
.lightbox:not(:target){
  visibility: hidden;
}

.lightbox:not(:target) .lb-nav,
.lightbox:not(:target) .lb-close-area,
.lightbox:not(:target) .lb-close-img{
  pointer-events: none;
}








/* 5.5) Mapa interactivo */
.map-container{
  position:relative;
  width:80%;
}
.map-container img{ width:100%; }

/* Puntos del mapa */
.map-container .point{
  cursor:pointer;
  position:absolute;
  width:12px; height:12px;
  background-color:#000000;
  border-radius:50%;
  transform:translate(-50%, -50%);
  transition: transform .20s ease, width .20s ease, height .20s ease;
}
.map-container .point:hover{ width:18px; height:18px; }
.map-container .point::after{
  content: attr(data-city);
  position:absolute;
  bottom:125%;
  left:50%; transform:translateX(-50%);
  background-color:#000000;
  color:#ffffff;
  padding:5px;
  border-radius:5px;
  white-space:nowrap;
  opacity:0; visibility:hidden;
  transition: opacity .20s ease, visibility .20s ease;
}
.map-container .point:hover::after{ opacity:1; visibility:visible; }

/* Posiciones de los puntos (coordenadas absolutas sobre la imagen) */
.map-container .santiago{ top:81%; left:23%; }
.map-container .tromso{ top:14.1%; left:48.2%; }
.map-container .lisboa{ top:31.1%; left:42%; }
.map-container .canarias{ top:38%; left:39.8%; }
.map-container .tanger{ top:35%; left:43%; }
.map-container .madrid{ top:30.8%; left:43.3%; }
.map-container .mallorca{ top:32%; left:45.6%; }
.map-container .copenhague{ top:21%; left:48.5%; }
.map-container .stornoway{ top:19%; left:43.3%; }
.map-container .edimburgo{ top:21%; left:44.2%; }
.map-container .londres{ top:23%; left:44.7%; }
.map-container .dubai{ top:40.5%; left:61.6%; }
.map-container .abudhabi{ top:41.5%; left:60.5%; }
.map-container .agra{ top:38%; left:69.5%; }
.map-container .delhi{ top:36%; left:68.5%; }
.map-container .ipascua{ top:79%; left:15%; }
.map-container .lasvegas{ top:32.5%; left:10.5%; }
.map-container .sfrancisco{ top:30.2%; left:8.4%; }
.map-container .klumpur{ top:53.8%; left:76.1%; }
.map-container .singapur{ top:55.8%; left:77.8%; }
.map-container .phuket{ top:51%; left:75.3%; }
.map-container .bangkok{ top:48.8%; left:76.4%; }
.map-container .aitutaki{ top:66.5%; left:1.3%; }
.map-container .rarotonga{ top:69%; left:1%; }
.map-container .hawaii{ top:41%; left:2%; }
.map-container .lax{ top:34%; left:8.7%; }
.map-container .shangai{ top:37.5%; left:81.3%; }
.map-container .canberra{ top:80%; left:88.2%; }
.map-container .hobart{ top:85.8%; left:87%; }
.map-container .sydney{ top:79.5%; left:90.3%; }
.map-container .auckland{ top:81%; left:96.5%; }
.map-container .wellington{ top:84%; left:96%; }
.map-container .oslo{ top:18.1%; left:47.8%; }
.map-container .svalbard{ top:9%; left:47.4%; }
.map-container .venecia{ top:28%; left:48.5%; }
.map-container .marsella{ top:28.7%; left:46.4%; }
.map-container .paris{ top:24.9%; left:46.4%; }

/* ============================================================
   6) Accesibilidad: reducir animaciones si el usuario lo prefiere
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .card img,
  .card .overlay,
  .lightbox,
  .lb-nav,
  .lb-close,
  .map-container .point{ transition:none !important; }
}

/* ============================================================
   7) Media queries por pantallas (solo lo imprescindible)
   ============================================================ */

/* <=600px → imagen alternativa de #top y ajustes */
@media (max-width:600px){
  #top img{
    content:url('images/teacher.png');
    width:100%;
  }
  .map-container{ width:100%; }
  .map-container .point{ width:10px; height:10px; }
  .apps-container{ flex-direction:column; }
}

/* <=800px → layout con menú lateral más cómodo en tablets */
@media (max-width:800px){
  label{ width:75%; }
  #box{ width:25%; }
  .content{ width:75%; padding:5%; }
  .panel{ width:100%; }
  #top{ text-align:center; padding:10% 5%; }
  .row{ padding:0; }
  .map-container{ width:100%; }
  .map-container .point{ width:10px; height:10px; }
  .apps-container{ flex-direction:column; }
}


@media (max-width: 600px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Ajustes sutiles en móviles muy estrechos */
@media (max-width: 480px){
  .lb-close{ width: 36px; height: 36px; font-size: 28px; }
}