@charset "utf-8";

 :root{
  --color-brand:#2d00fb;
  --color-sub:#1a008c;
  --radius:14px;

  /* ✅ Ajustes de imágenes */
  --img-width:100%;       /* ancho de las imágenes en porcentaje */
  --img-max-width:1600px; /* ancho máximo en escritorio */
  --img-border:6px ridge #666; /* borde de las imágenes */
  --img-radius:15px;     /* esquinas redondeadas */
  --img-shadow:2px 2px 5px #006; /* sombra de las imágenes */
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:Roboto,system-ui,Arial,Helvetica,sans-serif;
  background:#f0f2f7;
 /* padding-top:72px;  /* 👈 lo quitamos */
}

main, section:first-of-type {
  margin-top: 55px; /* 👈 deja espacio solo para el primer bloque */
}

/* HEADER */
.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:rgba(45,0,251,0.85);
  backdrop-filter:blur(12px);
  padding:8px 20px;
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  height:72px;
  border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.logo img{ max-height:56px; width:auto; display:block; object-fit:contain; }

.menu-toggle{display:none}
.menu-icon{
  display:none;
  font-size:30px;
  color:#fff;
  cursor:pointer;
  user-select:none;
  padding:6px 10px;
  border-radius:var(--radius);
  transition:background .3s;
}
.menu-icon:hover{background:rgba(255,255,255,.1)}

/* MENÚ */
.nav > ul{ list-style:none; margin:0; padding:0; display:flex; gap:12px; }
.nav > ul > li{position:relative}
.nav a{
  color:#fff; text-decoration:none; font-weight:500;
  display:flex; align-items:center; gap:6px;
  padding:8px 10px; border-radius:10px; transition:background .3s;
}
.nav a:hover{
  background:linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,.05));
}
    
/* ============================
   LAZY LOADING
============================ */
.lazy {
    opacity: 0;
    transition: opacity 0.4s ease-in;
}

.lazy.loaded {
    opacity: 1;
}


/* BANDERAS */
.bandera{ width:20px; height:auto; margin-right:6px; vertical-align:middle; }

/* SUBMENÚ */
.submenu{
  list-style:none; margin:0; padding:0;
  background:var(--color-sub); border-radius:var(--radius); overflow:hidden;
  height:0; opacity:0; transition:height .35s ease, opacity .35s ease;
}
.submenu li a{ padding:12px 18px; white-space:nowrap; border-bottom:1px solid rgba(255,255,255,.14);}
.submenu li:last-child a{border-bottom:none}

/* ESCRITORIO */
@media (min-width:769px){
  .menu-icon{display:none}
  .nav > ul{flex-direction:row}
  .submenu{
    position:absolute; top:100%; left:0; min-width:220px;
    box-shadow:0 10px 24px rgba(0,0,0,.16); display:none; height:auto !important; opacity:1; transition:none;
  }
  .nav li:hover > .submenu{display:block}
  .nav > ul > li:last-child > .submenu{left:auto; right:0}
}
 /* ---------------------- VIDEO ---------------------- */   
.video-responsive {
  position: relative;
  max-width: 900px;
  margin: 20px auto;
  border-radius:12px; /* Esquimas redondas */
  overflow:hidden;
}

.video-responsive iframe {
  width: 100%;
  height: auto;
  display:block;
   /* background: transparent; /* Quita máscara gris */
}

/* Overlay */
.video-responsive .overlay {
  display:none;
  position:absolute;
  top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,0.8);
  border-radius:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:white;
  text-align:center;
  padding:20px;
}
    
    /* Ajuste altura video */
@media(min-width:769px){ .video-responsive iframe{ height:500px; } }
@media(max-width:768px){ .video-responsive iframe{ height:280px; } }

/* --------------------FIN AJUSTES  VIDEO ---------------------- */ 
    
/* MÓVIL */
@media (max-width:768px){
  .menu-icon{display:block}
  .nav{
    position:absolute; top:100%; left:12px;
    background:rgba(45,0,251,0.95); border-radius:var(--radius); padding:8px;
    box-shadow:0 10px 24px rgba(0,0,0,.25);
    transform:scaleY(0); transform-origin:top; transition:transform .3s ease;
    min-width:260px; max-width:90vw; z-index:999;
  }
  .nav > ul{flex-direction:column; gap:0}
  .nav > ul > li > a{padding:14px 18px}
  .menu-toggle:checked ~ nav.nav{transform:scaleY(1)}
  .has-submenu > a::after{content:"▾"; margin-left:auto; font-size:0.9em; opacity:.9;}
  .has-submenu.open > a::after{content:"▴"}

  .submenu{ max-height:260px; overflow-y:auto; }
  .submenu::-webkit-scrollbar { width:6px; }
  .submenu::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.4); border-radius:4px; }
  .submenu::-webkit-scrollbar-track { background:transparent; }
}

/* 📌 Imágenes verticales con borde y sombra */
.img-vertical img{                /* planos planos corona y interior */  
  width: var(--img-width);        /* ancho principal */
  max-width: var(--img-max-width); /* tamaño máximo en escritorio */
  height:auto;                     /* mantiene proporción */
  display:block; margin:20px auto;
  border: var(--img-border);       /* borde */
  border-radius: var(--img-radius); /* esquinas redondeadas */
  box-shadow: var(--img-shadow);   /* sombra */
}
    .rotulo-web img {    /* cartel azul bajo pie planos */
    width: 100%;          /* ancho que quieras */
    max-width: 915px;    /* ancho máximo */
    border: 6px ridge #666; /* tipo de borde */
    border-radius: 15px; /* esquinas redondeadas, opcional */
    box-shadow: 2px 2px 5px #006; /* sombra opcional */
    display: block;
    margin: 20px auto;   /* centrado */
}