/* VARIABLES */
:root{
  --primary:#0a1a2f;
  --accent:#ff9100;
  --light-bg:#f4f6f8;
  --radius:12px;
  --shadow:0 4px 12px rgba(0,0,0,0.1);
  --font:"Poppins", Arial, sans-serif;
}

*{box-sizing:border-box}
body{margin:0;font-family:var(--font);color:#222;background:white;overflow-x:hidden;scroll-behavior:smooth}

header.header{background:var(--primary);color:white;padding:15px 30px;display:flex;justify-content:space-between;align-items:center;position:fixed;top:0;width:100% ;z-index:1000;box-shadow:var(--shadow)}
main {margin-top: 65px; }
.logo{font-weight:700}
.navbar a{color:white;margin:0 15px;text-decoration:none;font-weight:500;transition:0.3s}
.navbar a:hover{color:var(--accent)}
.menu-btn{display:none;background:none;border:none;color:white;font-size:26px}

.hero{background:url('../img/mim.jpg') center/cover no-repeat;height:500px;display:flex;align-items:center;justify-content:center;position:relative;padding:20px}
.hero::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,0.45)}
.hero-content{position:relative;color:white;max-width:700px;text-align:center;opacity:0;transform:translateY(30px);animation:fadeUp 1.2s ease forwards}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}
.btn-primary{display:inline-block;background:var(--accent);padding:14px 26px;margin-top:20px;color:white;border-radius:var(--radius);text-decoration:none;font-weight:600;box-shadow:var(--shadow);transition:0.2s}
.btn-primary:hover{transform:translateY(-3px);background:#e57f00}

section{padding:80px 40px}
.light{background:var(--light-bg)}
.fade-in{opacity:0;transform:translateY(30px);transition:all 0.8s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}
.grid{display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:40px}
.card{background:white;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;transition:0.3s; position: relative;}
.card:hover{transform:translateY(-5px);box-shadow:0 8px 24px rgba(0,0,0,0.15)}
.card img{width:100%;height:180px;object-fit:cover}
.card-content{padding:20px}

form{max-width:450px;margin:auto;background:white;padding:30px;border-radius:var(--radius);box-shadow:var(--shadow)}
input,select{width:100%;padding:12px;margin-top:10px;border-radius:var(--radius);border:1px solid #ccc;font-size:1rem}

footer{background:var(--primary);color:white;text-align:center;padding:25px;margin-top:40px}

/* Ajustes para móviles muy pequeños */
@media(max-width:480px){
.hero{height:55vh;padding:10px;background-position:center top}
.hero-content h1{font-size:1.5rem;line-height:1.3}
.hero-content p{font-size:0.95rem}
.btn-primary{padding:12px 18px;font-size:0.9rem}
section{padding:50px 20px}
.grid{grid-template-columns:1fr;gap:20px}
form{padding:20px}
input,select{font-size:0.9rem;padding:10px}
.navbar{ display: none; 
        flex-direction:column;
        background:var(--primary);
        padding:15px;}
.navbar.show {display: flex;}
.menu-btn{display: block;}
}




/* Ajustes para tablets horizontales y pantallas medianas */
@media(max-width:768px){
  .navbar{
    display: flex; 
    flex-direction: column;
    background: var(--primary); 
    padding: 0; 
    
    /* OVERLAY SETUP */
    position: fixed;
    top: 65px; /* Empieza debajo del header */
    left: 0;
    width: 100%;
    height: calc(100vh - 65px); /* Ocupa el resto de la altura de la ventana */
    z-index: 990; 
    justify-content: center; 
    align-items: center;
    opacity: 0;
    visibility: hidden; /* Oculta completamente para que no interfiera */
    transform: translateY(-10px); /* Comienza ligeramente encogido */
    
    /* transición a varias propiedades para la fluidez */
    transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0.3s;
  }

/*  Mostrar con efecto de expansión */
  .navbar.show{
    opacity: 1;
    visibility: visible;
    transform: translateY(0); /* Se expande a su tamaño normal */
  }

  /* 3. VISIBILIDAD DEL BOTÓN  */
  .menu-btn{
    display: block; 
  }

  /* 4. ESTILO DE LINKS GRANDES */
  .navbar a {
    margin: 20px 0; 
    font-size: 1.8rem;
    text-align: center;
    width: 100%;
  }

  /* 5. Ajustes de contenido */
  .hero{height:55vh;padding:10px;background-position:center top}
  .hero-content h1{font-size:1.5rem;line-height:1.3}
  .hero-content p{font-size:0.95rem}
  .btn-primary{padding:12px 18px;font-size:0.9rem}
  section{padding:50px 20px}
  .grid{grid-template-columns:1fr;gap:20px}
  form{padding:20px}
  input,select{font-size:0.9rem;padding:10px}
}
/* Estilo para input con error */
.input-error {
  border-color: #e74c3c !important; /* Rojo */
  background-color: #fceae9;
}

/* Texto del mensaje de error */
.error-text {
  color: #e74c3c;
  font-size: 0.85rem;
  margin-top: -8px; /* Para acercarlo al input */
  margin-bottom: 10px;
  display: none; /* Oculto por defecto */
  font-weight: 500;
}

/* Oscurecer imagen */
.card.disabled img {
  filter: brightness(35%);
}

/* Mensaje centrado */
.card.disabled::after {
  content: "Actualmente no disponible";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 12px 25px;
  border-radius: 10px;
  font-weight: bold;
  font-size: 1.1rem;
  z-index: 2;
  pointer-events: none;
}

/* opciones no seleccionables */
.disabled-option {
  color: #999;
  background-color: #f3f3f3;
}


/* === NUEVA GALERÍA PROFESIONAL === */
.pro-gallery {
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.pro-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

/* Tarjeta Profesional */
.pro-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer; /* Indica que se puede clicar */
}

.pro-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* Contenedor de la imagen para el efecto zoom */
.img-wrapper {
    overflow: hidden;
    height: 220px; /* Altura fija para uniformidad */
    position: relative;
}

.pro-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.pro-card:hover img {
    transform: scale(1.1); /* Efecto Zoom suave */
}

/* Texto de la tarjeta */
.pro-info {
    padding: 20px;
    border-top: 3px solid #004080; /* Línea azul MIMS */
}

.pro-info h3 {
    font-size: 1.1rem;
    margin-bottom: 8px;
    color: #333;
}

.pro-info p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.4;
}

.pro-tag {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.75rem;
    font-weight: bold;
    color: #004080;
    background: #e6f0fa;
    padding: 4px 8px;
    border-radius: 4px;
}

/* === ESTILOS ESPECIALES ANTES/DESPUÉS === */
.compare-wrapper {
    display: flex;
    height: 220px;
}
.compare-item {
    flex: 1;
    position: relative;
    overflow: hidden;
    border-right: 2px solid #fff;
}
.compare-label {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 2px 8px;
    font-size: 0.7rem;
    border-radius: 4px;
    z-index: 2;
}

/* === LIGHTBOX (Ventana Modal para ver imagen grande) === */
.lightbox {
    display: none; /* Oculto por defecto */
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lightbox.active {
    display: flex;
    opacity: 1;
}

.lightbox-img {
    max-width: 90%;
    max-height: 80vh;
    border: 2px solid #fff;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

.close-lightbox {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 40px;
    cursor: pointer;
    font-weight: bold;
}