/* =========================
   FUENTES Y RESETEO BÁSICO
   - importa fuentes
   - reset mínimo de márgenes y box-sizing
========================= */

@import url('https://fonts.googleapis.com/css?family=Cabin:400,400i,700,700i');

/* Reset mínimo */
* { box-sizing: border-box; margin: 0; padding: 0; }

body { font:90%/30px 'Cabin', sans-serif; color: #333; margin: 0;  }

ul, ol { margin: 0; padding: 0; }

ul {
  list-style-type: decimal-leading-zero;
  /*list-style-image: url(../imagenes/flecha.png);*/
  list-style-position: inside;
}

li{ padding-bottom: 2px; }

html {
  scroll-behavior: smooth;
}


/* =========================
   ENLACES
   - estilos base para <a>
========================= */
a { text-decoration: none; }
a:link { color: #666; }                 /* vínculos no visitados */
a:visited { color: cornflowerblue; }    /* vínculos visitados */
a:hover { text-decoration: underline; }
a:active { color: black; }


/* =========================
   LAYOUT PRINCIPAL
   - estilos generales del main y logo-imagen
========================= */
main { 
  width: 100%; 
  background-color: #f6f6f6; 
  padding: 20px;  
}

#logo-imagen { 
 width: 300px; 
 vertical-align: middle; 
 margin-bottom:5px ;
}





/* =========================
   HEADER PRINCIPAL
========================= */
#encabezado {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: white;
  display: flex;
  justify-content: space-between; /* Logo a la izquierda, resto a la derecha */
  align-items: center;
  padding: 12px 24px;
  z-index: 999;
  flex-wrap: wrap; /* permite que elementos bajen si no entran */
}

/* Logo */
.logo {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.2;
}

.logo-nombre {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: #000 !important; /* fuerza negro, evita azul de a:visited */
  text-decoration: none;
}

.logo-subtitulo {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #666;
  margin-top: 2px;
  font-style: italic;
}

/* Menú principal */
#encabezado nav {
  display: flex;
  gap: 20px;
  align-items: center;
}

#encabezado nav a {
  text-decoration: none;
  color: black;
  padding: 6px 10px;
  transition: color 0.2s ease;
}

#encabezado nav a:hover {
  color: cornflowerblue;
}

/* Botón hamburguesa */
.menu-btn {
  display: none; /* oculto en desktop */
  font-size: 24px;
  cursor: pointer;
  color: #333;
}

/* Checkbox oculto para toggle */
#nav-toggle {
  display: none;
}

/* Selector de idiomas (banderas) */
.idiomas {
  display: flex;
  gap: 8px;
  align-items: center;
  order: 2; /* se muestra a la derecha dentro del header flex */
}

.idiomas img {
  width: 32px;
  height: auto;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 3px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.idiomas img:hover {
  transform: scale(1.1);
  border-color: #666;
}

/* =========================
   RESPONSIVE HEADER / MÓVIL
========================= */
@media (max-width: 768px) {

  /* Mostrar hamburguesa */
  .menu-btn {
    display: block;
    order: 1; /* aparece antes que nav y banderas */
  }

  /* Ajustes logo */
  .logo-nombre { font-size: 1.8rem; }
  .logo-subtitulo { font-size: 0.9rem; }

  /* Menú oculto por defecto */
  #encabezado nav {
    display: none;
    flex-direction: column;
    width: 100%;
    margin-top: 10px;
  }

  /* Mostrar menú cuando toggle activo */
  #nav-toggle:checked + .menu-btn + nav {
    display: flex;
  }

  /* Banderas debajo en móvil, alineadas a la derecha */
  .idiomas {
    width: 100%;
    justify-content: flex-end;
    margin-top: 10px;
  }
}





/* =========================
   TITULOS ESPECIFICOS (Lisandro / Pianista)
========================= */
.titulo-principal h1.nombre-lisandro {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-weight: 700;   /* bold */
  font-style: normal;
}

/* Subtítulo tipo Pianista */
.titulo-principal h2.subtitulo {
  font-family: 'Bodoni Moda', serif;
  font-style: italic;
  font-weight: 400;
}

/* Estilos generales de títulos de la sección "titulo-principal" */
.titulo-principal h1,
.titulo-principal .subtitulo {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  color: #666;
  margin: 0;
  letter-spacing: 4px;
}

.titulo-principal h1 {
  font-size: 48px;
  font-weight: 400;
}

.titulo-principal .subtitulo {
  font-size: 28px;
  font-weight: 400;
  margin-top: 5px;
}


/* =========================
   SECCIONES (estructura base)
   - .secciones se usa como wrapper para bloques (bio, galeria...)
========================= */
.secciones { 
  width: 100%;  
  clear: both; 
  min-height: 300px; 
  margin-bottom: 10px; 
  background-color: transparent;  /* en algunos casos se sobrescribe más abajo */
  padding: 10px; 
  overflow: auto;
  max-height: 500px;
}


/* =========================
   HERO (sección principal con foto de fondo)
========================= */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: url("../imagenes/fondo-1200.jpg") no-repeat center top / cover;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 40px;
  border: 3px solid black;  /* nota: comentario menciona naranja en origen, aquí es black */
}

/* Texto sobre la foto (hero) */
.hero-texto {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: 1.8rem;
  color: #fff;
  text-align: right;
  max-width: 500px;

  /* Ajustes de posición (este margin-top lo baja visualmente) */
  margin-top: 430px;
  margin-right: 0px;
}

/* Firma sobre la imagen del hero */
.firma {
  position: absolute;
  bottom: 10px;
  right: 40px;
  opacity: 0.8;
}

.firma img {
  max-width: 180px;
  height: auto;
}


/* =========================
   SECCIÓN DE COLUMNAS - FONDO NEGRO
   - bloque que define un #columnas con fondo negro (hay overrides más abajo)
========================= */

/* Contenedor principal de columnas (versión negro) */
#columnas {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  width: 100%;
  background-color: #000;  /* fondo negro */
  padding: 20px;
  border-radius: 10px;
  box-sizing: border-box;
}

/* Cada columna interna (versión negro) */
#columnas .columna {
  flex: 1;
  max-width: 32%;          /* 3 columnas en desktop */
  background-color: #111;  /* negro ligeramente más claro */
  border-radius: 8px;
  padding: 15px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #fff;             /* texto blanco por defecto */
}

/* Títulos de columna (para el bloque negro) */
#columnas .columna .titulo-columna {
  font-size: 1.8em;
  font-weight: 700;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 2px solid #e6b800; /* línea naranja */
  color: #fff !important;
}

/* Texto introductorio, párrafos y spans dentro de #columnas (versión negro) */
#columnas .columna p,
#columnas .columna span,
#columnas .columna .intro-columna {
  color: #fff !important;  /* blanco */
  font-style: italic;
  margin-bottom: 10px;
}

/* Correos o textos especiales dentro de la columna (versión negro) */
#columnas .columna .email-contacto {
  color: #fff !important; /* blanco */
  font-weight: bold;
  margin-bottom: 10px;
}

/* Imágenes dentro de columnas (versión negro) */
#columnas .columna img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 10px;
}

/* Botón Dossier (versión negro) */
#columnas .columna .descarga-dossier {
  display: inline-block;
  background-color: #e6b00; /* amarillo intenso */
  color: #fff;
  padding: 0.6rem 1.2rem;
  text-decoration: none;
  font-weight: bold;
  border-radius: 4px;
  transition: background-color 0.3s;
  margin-top: 10px;
}

#columnas .columna .descarga-dossier:hover {
  background-color: #cc9f00;
  color: #fff;
}

/* Responsive (móvil) para la versión negro de columnas */
@media (max-width: 768px) {
  #columnas {
    flex-direction: column;
    gap: 15px;
  }
  #columnas .columna {
    max-width: 100%;
  }
}

/* Forzar que los links dentro de columnas (versión negro) sean blancos */
#columnas .columna a {
  color: #fff !important;
  text-decoration: none;
}

#columnas .columna a:hover {
  color: #e6b800 !important;
}




/* =========================
   SECCIÓN BIO — FLEXIBLE AVANZADO
========================= */
#bio {
  text-align: left;
  padding: 10px 0;
}

#bio h2 {
  display: block;
  width: 100%;
  margin-bottom: 12px;
  border-bottom: 2px solid #e6b800; /* línea naranja */
  padding-bottom: 5px;
  font-size: 1.8em;
  font-weight: 700;
  color: #333;
}

.bio-contenido {
  display: flex;
  flex-wrap: nowrap;        /* siempre lado a lado */
  gap: 20px;
  align-items: flex-start;
  justify-content: flex-start;
}

.bio-figure {
  flex: 0 0 clamp(150px, 25%, 320px); /* min 150px, ideal 25%, max 320px */
  max-width: 100%;
  box-sizing: border-box;
}

.bio-figure img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

.bio-texto {
  flex: 1 1 clamp(180px, 70%, 800px); /* min 180px, ideal 70%, max 800px */
  min-width: 0;
  box-sizing: border-box;
  text-align: left;
}

.bio-texto .bio-lista {
  margin: 0 0 12px 0;
  padding: 0;
  list-style-type: none;
}

.bio-texto .bio-lista li {
  margin-bottom: 8px;
  font-size: 1.1em;
  position: relative;
  padding-left: 20px;
}

.bio-texto .bio-lista li::before {
  content: "•";
  color: #FF6600;
  font-weight: bold;
  position: absolute;
  left: 0;
}

.bio-parrafos p {
  margin: 0 0 12px 0;
  line-height: 1.55;
}

/* =========================
   MÓVIL — ajustes más suaves con clamp()
========================= */
@media (max-width: 1024px) {
  .bio-figure {
    flex: 0 0 clamp(140px, 30%, 280px);
  }
  .bio-texto {
    flex: 1 1 clamp(160px, 65%, 600px);
  }
}

@media (max-width: 768px) {
  .bio-figure {
    flex: 0 0 clamp(120px, 35%, 200px);
  }
  .bio-texto {
    flex: 1 1 clamp(140px, 60%, 400px);
  }
}

@media (max-width: 480px) {
  .bio-figure {
    flex: 0 0 clamp(100px, 40%, 150px);
  }
  .bio-texto {
    flex: 1 1 clamp(120px, 55%, 300px);
  }
}









/* =========================
   Sección GALERÍA
========================= */
#galeria {
  padding: 10px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

#galeria h2 {
  text-align: left;
  margin-bottom: 20px;
}

#galeria .imagenes-fila {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

#galeria .imagenes-fila img {
  flex: 1 1 30%;
  max-width: 430px;
  height: auto;
  border-radius: 8px;
  transition: transform 0.5s ease;
}

#galeria .imagenes-fila img:hover {
  transform: scale(1.05) rotate(1deg);
}


/* =========================
   Sección VIDEOS
========================= */
#videos {
  padding: 10px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

#videos h2 {
  text-align: left;
  margin-bottom: 20px;
}

/* Contenedor para video con relación 16:9 */
.video-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  border: 3px solid black;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  padding-top: 56.25%;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}


/* =========================
   BOTONES EXTRA (estilo genérico)
========================= */
 p + button {
  width: 200px;
  height: 40px;
  background-color: black;
  color: white;
  border: none;
  text-transform: uppercase;
  font-weight: bold;
 }


/* =========================
   DETALLES
   - signos tras h2, footer
========================= */
h2:not(.subtitulo)::after {
  content: ':';  /* solo agrega : a los h2 que NO sean subtítulo */
}

footer p {
  text-align: center;
  font-style: italic;
  color: #999;
  margin: 10px 0;
}


/* =========================
   REDES SOCIALES (botones fijos)
========================= */
.redes {
  position: fixed;
  top: 150px;
  right: 15px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 1000;
}

.redes a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  background-color: white;
  border-radius: 50%;
  font-size: 24px;
  color: #333;
  text-decoration: none;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: transform 0.3s ease, background-color 0.3s ease,
              box-shadow 0.3s ease, color 0.3s ease;
}

.redes a:hover {
  transform: scale(1.2);
  color: white;
  box-shadow: 0 0 15px rgba(0,0,0,0.2),
              0 0 20px rgba(255,255,255,0.6);
}

/* Colores oficiales al hacer hover */
.redes a:nth-child(1):hover { background-color: #1877F2; box-shadow: 0 0 15px #1877F2; } /* Facebook */
.redes a:nth-child(2):hover { background-color: #FF0000; box-shadow: 0 0 15px #FF0000; } /* YouTube */
.redes a:nth-child(3):hover { background-color: #E1306C; box-shadow: 0 0 15px #E1306C; } /* Instagram */
.redes a:nth-child(4):hover { background-color: #000000; box-shadow: 0 0 15px #000000; } /* TikTok */
.redes a:nth-child(5):hover { background-color: #0A66C2; box-shadow: 0 0 15px #0A66C2; } /* LinkedIn */
.redes a:nth-child(6):hover { background-color: #9146FF; box-shadow: 0 0 15px #9146FF; } /* Twitch */


/* =========================
   TEXTOS (listas, estilos de secciones)
========================= */
.bio-lista {
  list-style-type: none;
  padding: 0;
  margin: 0 0 15px 0;
}

.bio-lista li {
  margin-bottom: 8px;
  font-size: 1.1em;
  position: relative;
  padding-left: 20px;      /* espacio para el "icono" */
}

.bio-lista li::before {
  content: "•";
  color: #FF6600;
  font-weight: bold;
  position: absolute;
  left: 0;
}

/* Línea naranja debajo de títulos principales de secciones */
.secciones h2 {
    font-size: 1.8em;
    font-weight: 700;
    margin-bottom: 10px;
    border-bottom: 2px solid #e6b800;
    padding-bottom: 5px;
    color: #333;
}


/* =========================
   ENCABEZADO - RESPONSIVE ADDITIONAL (reiterado)
   - hay secciones repetidas para mobile (se dejaron tal cual)
========================= */

/* (Se repiten rules para .menu-btn, #encabezado nav etc. - mantuve todo en el mismo orden) */


/* =========================
   Contenedor de columnas para desktop (versión blanca/normal)
   - Nota: EXISTE otra definición de #columnas más arriba (negra). 
     Esa duplicidad se respeta para no cambiar el cascade.
========================= */

#columnas {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  width: 100%;
  background-color: white; /* <-- esta versión sobrescribe la anterior si aparece después */
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Cada columna: centrado interno y ancho flexible */
.columna {
  flex: 1;
  max-width: 32%;
  box-sizing: border-box;
  padding: 10px;
  background: #f6f6f6;
  border-radius: 8px;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Imágenes dentro de columna */
.columna img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 10px;
}

/* Botón Dossier */
.descarga-dossier {
  display: inline-block;
  background-color: #e6b800;
  color: white;
  padding: 0.6rem 1.2rem;
  text-decoration: none;
  font-weight: bold;
  border-radius: 4px;
  transition: background-color 0.3s;
  margin-top: 10px;
}

.descarga-dossier:hover {
  background-color: #cc9f00;
}

/* Responsive: apilar columnas en móviles (repetido/agrupado) */
@media (max-width: 768px) {
  #columnas {
    flex-direction: column;
    gap: 15px;
  }
  .columna {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .logo {
    font-size: 1.8rem;
  }
}


/* =========================
   UTILIDADES Y OVERRIDES LOCALES
   - clases para quitar cursiva, agrandar texto, etc.
========================= */
.datos-contacto p {
  font-style: normal !important;
  color: #fff;
  margin: 5px 0;
}

.correo a {
  color: #fff !important;
  text-decoration: none;
  font-weight: bold;
}

.correo a:hover {
  color: #e6b800 !important;
}

.no-italic {
  font-style: normal !important;
  color: #fff !important;
}

.texto-grande {
  font-size: 1.2rem !important;
  font-style: normal !important;
  color: #fff !important;
  font-weight: 600;
  margin: 5px 0;
}





/* =========================
   AJUSTES RESPONSIVE
   ========================= */

/* Pantallas medianas: tablets */
@media (max-width: 1024px) {
  body {
    font-size: 95%;
  }

  header nav a {
    padding: 8px;
    font-size: 0.95rem;
  }

  .hero-texto {
    font-size: 1.4rem;
    padding: 15px;
  }
}

/* Pantallas chicas: móviles */
@media (max-width: 768px) {

  /* Header */
  header {
    flex-direction: column;
    align-items: flex-start;
  }

  .logo {
    margin-bottom: 10px;
  }

  nav {
    flex-direction: column;
    gap: 8px;
    width: 100%;
    text-align: left;
  }

  /* Hero */
  .hero-texto {
    font-size: 1.2rem;
    padding: 10px;
    line-height: 1.4;
  }



  /* Galería */
  .imagenes-fila {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .imagenes-fila img {
    width: 100%;
    height: auto;
  }

  /* Videos */
  .video-container iframe {
    width: 100%;
    height: 200px;
  }

  /* Columnas (Dossier, Contacto, Inspiraciones) */
  #columnas {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .columna {
    width: 100%;
    text-align: center;
    padding: 15px;
  }

  .titulo-columna {
    margin-bottom: 10px;
  }

  /* Footer */
  footer {
    font-size: 0.85rem;
    padding: 10px;
    text-align: center;
  }
}

/* Pantallas muy pequeñas: móviles chicos */
@media (max-width: 480px) {
  .hero-texto {
    font-size: 1rem;
  }

  .logo-nombre {
    font-size: 1.2rem;
  }

  .logo-subtitulo {
    font-size: 0.9rem;
  }

  .descarga-dossier {
    font-size: 0.9rem;
    padding: 8px 12px;
  }
}