body {margin:0; font-family:Arial; background:#d0d6e1; color:#3e3434;}
.container {max-width:1200px; margin:auto; padding:40px;}
h1,h2,h3 {color:#710202;}
.section {margin-bottom:80px;}
pre {background:#99a1c3; padding:20px; border-radius:10px; overflow:auto;}
.card {background:#9aa7c1; padding:25px; border-radius:10px; margin-bottom:20px;}
.grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px;}
.hero {padding:100px 20px; }
.hero h1 {font-size:48px;}
.nav {background:#020617; padding:20px;}
.nav a {color:#e5e7eb; margin-right:20px; text-decoration:none;}



.carousel {
    position: relative;
    overflow: hidden;
    max-width: 750px;
    height: auto;
    transition: height 0.3s ease;
}

.track {
    display: flex;
    transition: transform 0.4s ease;
    align-items: flex-start;
}

.slide {
    min-width: 100%;
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;

	    max-height: 500px;
}



/* Botones */
.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    border: none;
    color: white;
    padding: 10px;
    cursor: pointer;
    border-radius: 5px;
}

.prev { left: 10px; }
.next { right: 10px; }

/* En móvil botones más pequeños */
@media (max-width: 600px) {
    .prev, .next {
        padding: 6px;
        font-size: 14px;
    }
}



nav{background:#4d5579;font-family:Arial,sans-serif;position:relative;z-index:100}
.nav-inner{display:flex;align-items:center;padding:0 20px;gap:4px}
.nav-btn{display:flex;align-items:center;gap:6px;padding:18px 14px;color:#e5e7eb;font-size:14px;font-weight:700;cursor:pointer;background:none;border:none;white-space:nowrap;transition:color .2s}
.nav-btn:hover{color:#fff}
.nav-btn .arrow{width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;transition:transform .25s;flex-shrink:0}
.nav-btn .arrow svg{width:10px;height:10px;stroke:#6b7280;stroke-width:2.5;fill:none;transition:stroke .2s}
.nav-btn:hover .arrow svg{stroke:#fff}
.submenu{position:absolute;left:0;background:#536488;border:1px solid #1f2937;border-radius:10px;min-width:190px;padding:6px;display:none;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.submenu a{display:block;padding:9px 12px;color:#d1d5db;text-decoration:none;font-size:13.5px;border-radius:6px;transition:background .15s,color .15s}
.submenu a:hover{background:#6a74a1;color:#fff}
.nav-item{position:relative}
.nav-item:hover>.submenu{display:block}
.nav-item:hover>.nav-btn .arrow svg{stroke:#fff}
.nav-item:hover>.nav-btn .arrow{transform:rotate(180deg)}
.nav-contact{margin-left:auto}
.nav-contact .nav-btn{color:#e5e7eb;font-weight:700}
.nav-contact .nav-btn:hover{color:#fff}
.hamburger{display:none;flex-direction:column;gap:5px;padding:16px;cursor:pointer;background:none;border:none;margin-left:auto}
.hamburger span{display:block;width:22px;height:2px;background:#e5e7eb;border-radius:2px;transition:transform .3s,opacity .3s}
.mobile-menu{display:none;background:#2a3751;border-top:1px solid #6a74a1}
.mobile-item{border-bottom:1px solid #6a74a1}
.mobile-btn{display:flex;justify-content:space-between;align-items:center;width:100%;padding:15px 20px;color:#e5e7eb;font-size:15px;font-weight:700;background:none;border:none;cursor:pointer;text-align:left;font-family:Arial,sans-serif}
.mobile-btn .m-arrow{width:20px;height:20px;display:flex;align-items:center;justify-content:center;transition:transform .25s}
.mobile-btn .m-arrow svg{width:12px;height:12px;stroke:#6b7280;stroke-width:2.5;fill:none;transition:stroke .2s}
.mobile-sub{display:none;background:#4d5579}
.mobile-sub a{display:block;padding:12px 20px 12px 32px;color:#d1d5db;font-size:14px;font-family:Arial,sans-serif;text-decoration:none;border-top:1px solid #6a74a1;transition:color .15s,background .15s}
.mobile-sub a:hover{color:#fff;background:#536488}
.mobile-item.open .mobile-btn .m-arrow{transform:rotate(180deg)}
.mobile-item.open .mobile-btn .m-arrow svg{stroke:#e5e7eb}
.mobile-item.open>.mobile-sub{display:block}
.mobile-contact{padding:15px 20px;color:#e5e7eb;font-size:15px;font-weight:700;font-family:Arial,sans-serif;cursor:pointer;display:block;border:none;background:none;width:100%;text-align:left}
.mobile-contact:hover{color:#fff}
.nav-top{display:none;align-items:center;padding:0 8px}
.nav-logo{padding:14px 12px;color:#fff;font-size:15px;font-weight:700;font-family:Arial,sans-serif}
@media(max-width:768px){
  .nav-inner{display:none}
  .hamburger{display:flex}
  nav{display:flex;flex-direction:column}
  .nav-top{display:flex}
  
   .mobile-menu{display:none}
}
@media(min-width:769px){
  .nav-top{display:none}
  .mobile-menu{display:none!important}
}






/* Imágenes responsive con lupa */
.img-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
    cursor: zoom-in;
}
.img-wrap img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}
.img-wrap .zoom-icon {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0,0,0,0.6);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .2s;
}
.img-wrap:hover .zoom-icon,
.img-wrap:active .zoom-icon {
    opacity: 1;
}
.zoom-icon svg {
    width: 16px;
    height: 16px;
    stroke: #fff;
    fill: none;
    stroke-width: 2;
}

/* Fuentes y márgenes reducidos en móvil */
@media(max-width: 768px) {
    body { font-size: 14px; }
    .container { padding: 20px; }
    .hero h1 { font-size: 28px; }
    h2 { font-size: 20px; }
    h3 { font-size: 17px; }
    .card { padding: 16px; }
}


/* Breadcrumb (fix: separado del selector global nav{} para no heredar la barra oscura del menú) */
.breadcrumb{padding:14px 0;font-size:13px;}
.breadcrumb a{color:#4d5579;text-decoration:none;font-weight:bold;}
.breadcrumb a:hover{text-decoration:underline;}

/* Navegacion "siguiente pagina" al final de cada seccion, lectura secuencial */
.next-page-nav{background:#710202;color:#fff;text-align:center;padding:24px;}
.next-page-nav .next-label{margin:0 0 6px 0;font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:#f1d9d9;}
.next-page-nav h3{margin:0;color:#fff;}
.next-page-nav h3 a{color:#fff;text-decoration:none;}
.next-page-nav h3 a:hover{text-decoration:underline;}