/* ===== Reset ===== */
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: 'Poppins', sans-serif;
}

body {
 min-height: 100vh;
 display: flex;
 flex-direction: column;
 background-color: #0e0e0e;
 color: white;
 overflow-x: hidden;
}

/* ------------------------------------------------------------------- */
/* ===== Header con Logo Integrado y Efecto Neón ===== */
/* ------------------------------------------------------------------- */

header {
 flex: 0 0 auto;
 text-align: center;
 padding: 40px 0;
}

.logo {
 display: inline-block;

 /* Opcional: Centrar el enlace del logo si necesitas un margen específico */
}

.logo-image {
 /* Estilo base para el logo */
  /* Ajusta el tamaño vertical del logo */
  
 width:45%;
 /* Aplicamos el mismo efecto de sombra que tenía tu texto original,
  pero con la propiedad filter: drop-shadow para que el efecto
  se aplique a la silueta de la imagen (idealmente PNG con transparencia). */
 filter: drop-shadow(0 0 10px #0ff) drop-shadow(0 0 25px #0ff); 
 transition: all 0.3s ease;
}

.logo-image:hover {
 /* Un ligero brillo extra al pasar el ratón */
 filter: drop-shadow(0 0 15px #0ff) drop-shadow(0 0 35px #0ff);
}


/* ------------------------------------------------------------------- */
/* ===== El resto de tu CSS original (sin cambios) ===== */
/* ------------------------------------------------------------------- */

/* ===== Seleccion (sin cambios) ===== */
.seleccion {
 position: absolute;
 top: 30%;
 left: 50%;
 transform: translate(-50%, -50%);
 z-index: 10;
 display: flex;
 justify-content: center;
 align-items: center;
 transition: all 0.3s ease;
 font-size: 1.5rem;
 font-weight: 700;
 letter-spacing: 2px;
}
.seleccion h2 {
 border: 1px solid #00ffff80;
 box-shadow: 0 0 10px #00ffff;
 background-color: rgba(0, 0, 0, 0.6);
 padding: 20px 20px;
 border-radius: 10px;
 font-size: 1rem;
 letter-spacing: 1px;
 color: #fff;
}

/* ===== Contenedor (sin cambios) ===== */
.container {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 70vh; 
 gap: 30px;
 transition: all 0.3s ease;
}

/* ===== Tarjetas base (sin cambios) ===== */
.option {
 position: relative;
 width: 40%;
 height: 80%;
 overflow: hidden;
 border-radius: 20px;
 cursor: pointer;
 transition: all 0.6s ease;
 border: 2px solid transparent;
}

.option img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: all 0.6s ease;
 filter: brightness(65%);
 border-radius: 20px;
}

.option h2 {
 position: absolute;
 bottom: 30px;
 left: 50%;
 transform: translateX(-50%);
 background-color: rgba(0, 0, 0, 0.6);
 padding: 12px 35px;
 border-radius: 10px;
 font-size: 2rem;
 letter-spacing: 1px;
 color: #fff;
 text-transform: uppercase;
}

/* ===== Tecnología (sin cambios) ===== */
.tecnologia {
 border-color: #00ffff40;
 box-shadow: 0 0 15px #00ffff20;
}

.tecnologia:hover {
 width: 65%;
 transform: scale(1.05);
 border-color: #00ffff;
 box-shadow: 0 0 25px #00ffff, 0 0 80px #00ffff;
}

.tecnologia:hover img {
 transform: scale(1.05);
 filter: brightness(90%);
}

.tecnologia h2 {
 border: 1px solid #00ffff80;
 box-shadow: 0 0 10px #00ffff;
}

/* ===== Fotografía (sin cambios) ===== */
.fotografia {
 border-color: #b000ff40;
 box-shadow: 0 0 15px #b000ff20;
}

.fotografia:hover {
 width: 65%;
 transform: scale(1.05);
 border-color: #b000ff;
 box-shadow: 0 0 25px #b000ff, 0 0 80px #b000ff;
}

.fotografia:hover img {
 transform: scale(1.05);
 filter: brightness(90%);
}

.fotografia h2 {
 border: 1px solid #b000ff80;
 box-shadow: 0 0 10px #b000ff;
}

/* ===== Footer (sin cambios) ===== */
footer {
 background-color: #111;
 padding: 10px 0;
 text-align: center;
 color: #ccc;
 font-size: 0.9rem;
}

.social-icons {
 margin-bottom: 10px;
}

.social-icons a {
 margin: 0 10px;
 text-decoration: none;
 color: #ccc;
 font-size: 1.6rem;
 transition: color 0.3s ease, text-shadow 0.3s ease;
}

.social-icons a:hover {
 color: #00ffff;
 text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff;
}

footer p {
 margin-top: 10px;
 font-size: 1rem;
 color: #aaa;
}

/* ===== Responsive (sin cambios) ===== */
@media (max-width: 992px) {
 .container {
  flex-direction: column;
  height: auto;
 }
.logo-image {
 display: inline-block;
  width:70%;
 /* Opcional: Centrar el enlace del logo si necesitas un margen específico */
}
 
 .seleccion {
  position: static; 
  transform: none;
  padding: 20px 5%;
 }

 .option {
  width: 90%;
  height: 300px;
 }

 .option:hover {
  width: 95%;
  transform: scale(1.05);
 }

 .option h2 {
  font-size: 1.5rem;
 }
}

@media (max-width: 600px) {
 header {
  padding: 30px 0; /* Ajustamos el padding del header en móvil */
 } 


 .option {
  height: 250px;
 }

 .option h2 {
  font-size: 1.2rem;
  padding: 8px 20px;
 }

 footer p {
  font-size: 0.9rem;
 }
}