@font-face { /*Importar fuente externa*/
    font-family: 'FantasmAndSecret'; /*Nombre interno de la fuente*/
    src: url('Fantasm and Secrets.ttf') format('truetype'); /*Ruta donde esta guardado el archivo y especifica el formato*/
    font-weight: normal; /*Usara grosol normal*/
    font-style: normal; /*Fuente versión estandar*/
}

html {
  scroll-behavior: smooth;
}

* {
    margin: 0; /*Elimina espacio exterior (Margen)*/
    padding: 0; /*Elimina espacio interior*/
    box-sizing: border-box; /*Ancho y largo de un elemento incluya bordes y relleno*/
}

body {
    font-family: 'Montserrat', sans-serif; /*Aplicamos la fuente*/
    font-weight: 700; /*Grosor de fuente negrita*/
    background-color: #F2F4F3; /*Color de fondo*/
    color: #49111C; /*Color del texto*/
    line-height: 1.2; /*Altura entre lineas*/
    -webkit-font-smoothing: antialiased; /*Para que las fuentes se vean mas nitidas y suaves*/
    letter-spacing: -0.02em; /*Espacio entre letras*/
}

/*------------- PORTADA ---------------*/

/* --- MENÚ FLOTANTE  --- */
.floating-nav {
    position: absolute; /*Fija el menu en una posicion especifica*/
    top: 30px; /*Separacion del borde superior*/
    left: 50%; /*Desplaza el borde izquierdo hasta la mitad de la pantalla*/
    transform: translateX(-50%); /*Para que quede centrado*/
    z-index: 1000; /*Para que este por encima de cualquier otro elemento*/
}

.nav-container {
    display: flex; /*Alinea los elementos horizontalmente*/
    background-color: #F2F4F3; /*Color de fonfo*/
    backdrop-filter: blur(12px); /*Efecto que desenfoca lo que hay detras del menu*/
    padding: 6px 10px; /*Espacio interno arriba, abajo y por los lados*/
    border-radius: 50px; /*Redondea los bordes*/
    border: 1px solid #4A0E0E; /*Añade un borde fino con ese color*/
    box-shadow: 0 1px 10px #49111C; /*Proyecta una sombra suave de ese color*/
    list-style: none; /*Elimina puntos o viñetas*/
}

.nav-item {
    padding: 10px 18px; /*Espacio interno arriba, abajo y por los lados*/
    border-radius: 40px; /*Redondea los bordes*/
}

.nav-item a {
    text-decoration: none; /*Quita la decoración*/
    color: #4A0E0E; /*Le da ese color*/
    font-size: 14px; /*Tamaño*/
    font-weight: 500; /*Tamaño*/
    transition: 0.3s; /*Añade animación*/
}

.nav-item:hover{
    color: #4A0E0E; /*Le da ese color*/
    transform: translateY(-2px); /*Desplaza el elemento 2px hacia arriba*/
}

.nav-item.active { 
    background-color:  #49111C; /*Aplica ese color de fondo*/
}
.nav-item.active a { 
    color: #F2F4F3; /*Color que aplicamos*/
    background-color: #49111C; /*Color de fondo*/
}

.hero {
    height: 100vh; /*Altura que ocupa*/
    display: flex; /*Alinea los elementos horizontalmente*/
    align-items: center; /*Alinea en el centro los items*/
    justify-content: center; /*Alinea el contenido en el centro*/
    text-align: center; /*Alinea en el centro el texto*/
    padding: 0 20px; /*Espacio interno arriba, abajo y por los lados*/
}

.hero-text .category {
    text-transform: uppercase; /*Convierte el texto en mayusculas*/
    letter-spacing: 3px; /*Espacio entre letras*/
    font-size: 12px; /*Tamaño*/
    color: #49111C; /*Color que aplicamos*/
    margin-bottom: 20px; /*Margen externo por debajo*/
    display: block; /*Ocupe su propia linea*/
}

.hero-text h1 {
    font-family: 'FantasmAndSecret', sans-serif; /*Aplicamos la fuente*/
    font-size: clamp(3rem, 10vw, 7rem); /*Aplicamos tamaño dinamico (min, max y escala ancho)*/
    min-height: 1.2em; /*Reservamos espacio vertical*/
    color: #49111C; /*Color que aplicamos*/
    display: inline-block; /*Elemento se comporte como bloque*/
    position: relative; /*Establece punto de referencia*/
}

.hero-text p {
    font-size: 1.1rem; /*Tamaño*/
    color: #49111C; /*Color que aplicamos*/
    max-width: 450px; /*Limita el ancho*/
    margin: 0 auto; /*Centra el bloque horizontalmente*/
    justify-content: center; /*Alinea el contenido en el centro*/
    text-align: center; /*Alinea el texto en el centro*/
}

.hero-text h1::after {
    content: ""; /*Muestra el elemento aunque este vacio*/
    position: absolute; /*Posiciona libremente respecto a h1*/
    width: 0.12em; /*Ancho del punto*/
    height: 0.12em; /*Altura del punto*/
    background-color: #49111C; /*Color de fondo*/
    border-radius: 50%; /*Redondea los bordes*/
    right: -0.2em; /*Separa hacia la derecha*/
    top: 20%; /*Separacion por arriba*/
    opacity: 0; /*Lo hace invisible por defecto*/
}

.hero-text h1.show-dot::after {
    opacity: 1; /*Hace que el punto se vuelva visible*/
}

/* --- DOCK SOCIAL INFERIOR --- */
.social-dock {
    position: fixed; /*Lo deja anclado en la pantalla*/
    bottom: 30px; /*Separacion por debajo*/
    left: 50%; /*Separación por la izquierda*/
    transform: translateX(-50%); /*Centrarlo perfectamente*/
    z-index: 9999; /* Un número muy alto para que nada le pase por encima */
    pointer-events: auto; /* Asegura que los clics funcionen siempre */
}

.social-container {
    display: flex; /*Alinea los elementos horizontalmente*/
    gap: 20px; /*Separa los iconos entre si*/
    background-color: #F2F4F3; /*Color de fondo*/
    backdrop-filter: blur(10px); /*Desenfoca ligeramente lo que hay detras*/
    padding: 12px 25px; /*Espacio interno arriba, abajo y por los lados*/
    border-radius: 50px; /*Redondea los bordes*/
    border: 1px solid #49111C; /*Añade un borde fino con ese color*/
    box-shadow: 0 1px 10px #49111C; /*Proyecta una sombra suave de ese color*/
}

.social-icon {
    text-decoration: none; /*Quita el subrayado por defecto*/
    font-size: 12px; /*Tamaño*/
    font-weight: 600; /*Grosor de fuente negrita*/
    color: #49111C; /*Color que aplicamos*/
    text-transform: uppercase; /*Convierte el texto en mayusculas*/
    transition: 0.3s; /*Transicion de suavizado del raton*/
}

.social-icon:hover {
    color: #49111C; /*Color que aplicamos*/
    transform: translateY(-2px); /*Salta 2px hacia arriba*/
}

/*---------------- FIN PORTADA ----------------------*/

/*---------------- CONTENEDOR SOBRE MI ---------------*/

.container-about {
    position: relative; /*Establece punto de referencia*/
    display: flex; /*Alinea los elementos horizontalmente*/
    align-items: center; /*Alinea en el centro los items*/
    justify-content: center; /*Alinea el contenido en el centro*/
    width: 100%; /*Ocupa todo el ancho*/
    min-height: 100vh; /*Altura minima de la sección*/
    padding: 30px 0; /*Espacio interno arriba, abajo y por los lados*/
    background-image: url(INDEX/fondo.png); /*Carga la imagen como fondo*/
    background-size: cover; /*Para que cubra todo el espacio sin deformarse*/
    background-position: center; /*Centra la imagen de fondo*/
    background-repeat: no-repeat; /*No se repita el fondo*/
    overflow: hidden; /*Corta cualquier contenido que se salga*/
}

.text-side {
    flex: 1; /* El texto ocupa menos que la foto */
    padding: 0 5% 0 8%; /*Espacio interno arriba, abajo, derecha y izquierda*/
    display: flex; /*Alinea los elementos horizontalmente*/
    flex-direction: column; /*Apila los elementos*/
    gap: 15px; /*Espacio entre cada elemento*/
}

.tittle h1 {
    font-family: 'Montserrat', sans-serif; /*Aplicamos la fuente*/
    font-style: italic; /*Fuente en cursiva*/
    font-size: 3rem; /*Tamaño*/
    color:#F5F5DC; /*Color que aplicamos*/
    margin: 0; /*Elimina espacio exterior (Margen)*/
    overflow: hidden; /*Corta cualquier contenido que se salga*/
    white-space: nowrap; /*Evita que salte a una segunda linea*/
    width: 0; /*Para que empiece con ancho cero*/
}

.animar-escritura {
    animation: /*LLama a dos animaciones*/
    escribiendo 2s steps(30) forwards, /*Ejecuta la animación de escritura*/
    parpadeoCursor 0.8s step-end infinite; /*Hace el borde invisible*/
}

@keyframes escribiendo {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes parpadeoCursor {
    50% { border-color: transparent; }
}

.content p {
    font-size: 1.15rem; /*Tamaño*/
    line-height: 1.8; /*Separacion de lineas*/
    color: #F2F4F3; /*Color que aplicamos*/
    margin-bottom: 20px; /*Distancia del margen por abajo*/
}

#firma {
    font-family: 'FantasmAndSecret', sans-serif; /*Aplicamos la fuente*/
    font-size: 2rem; /*Tamaño*/
    color: #F2F4F3; /*Color que aplicamos*/
    position: relative; /*Establece punto de referencia*/
    display: inline-block; /*Elemento se comporte como bloque*/
    line-height: 1; /*Separacion de lineas*/
}

#firma::after {
    content: ""; /*Muestra el elemento aunque este vacio*/
    position: absolute; /*Posiciona libremente respecto a h1*/
    top: 0.3rem; /*Distancia por arriba*/
    right: -10px; /*Distancia por derecha*/
    
    width: 5px; /*Ancho*/
    height: 5px; /*Altura*/
    background-color: #F2F4F3; /*Color de fondo*/
    border-radius: 50%; /*Redondea los bordes*/
}

.destacado{
    font-style: italic; /*Fuente en cursiva*/
    font-weight: lighter; /*Fuente sea mas fina*/
}

.image {
    flex: 1.4; /*Ocupacion del contenedor*/
    display: flex; /*Alinea los elementos horizontalmente*/
    justify-content: center; /*Contenido justificado en el centro*/
    align-items: center; /*Items alineados en el centro*/
}

.image img {
    width: 100%; /* Que use casi todo el ancho de su columna */
    max-width: 1000px; /* Tamaño máximo bastante amplio */
    height: auto; /* FUNDAMENTAL para que se vea entera y sin cortes */
    object-fit: contain; /*Asegurar que la imagen se vea entera*/
    display: block; /*Ocupe su propia linea*/
}

/*--------------- Fin Sobre mi ------------*/

/*--------------- PORTFOLIO ---------------*/

.portfolio h1{
    padding-top: 8%;
    font-family: 'Montserrat', sans-serif;
    font-style: italic;
    font-size: 3.5rem;
    display: flex;
    justify-content: center;
    padding-bottom: 2%;
}

.portfolio p {
    justify-content: center;
    display: flex;
    color: black;
}

#flecha{
    padding-top: 3%;
    font-size: 25px;
    color: #49111C;
    animation: botar 2s infinite;
}

@keyframes botar {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0); /* Posición original */
    }
    40% {
        transform: translateY(-20px); /* Salto hacia arriba */
    }
    60% {
        transform: translateY(-10px); /* Segundo salto más pequeño */
    }
}

.contenedor-galeria {
  display: flex;
  gap: 20px; /* Espacio entre las columnas */
  justify-content: center;
  padding: 20px;
}

.contenedor-galeria2 {
  display: flex;
  gap: 20px; /* Espacio entre las columnas */
  justify-content: center;
  padding: 20px;
  padding-bottom: 10%;
}

/* Estilo de cada columna (enlace) */
.columna {
  flex: 1; /* Hace que las 3 columnas ocupen el mismo ancho */
  text-decoration: none; /* Quita el subrayado del enlace */
  color: #49111C; /* Color del texto */
  text-align: center; /* Centra la imagen y el texto */
  display: flex;
  flex-direction: column; /* Alinea imagen arriba y texto abajo */
  align-items: center;
}

/* Estilo de las imágenes */
.columna img {
  width: 100%; /* La imagen ocupa todo el ancho de la columna */
  border-radius: 8px; /* Opcional: bordes redondeados */
  margin-bottom: 10px; /* Espacio entre imagen y texto */
  object-fit: cover;
  aspect-ratio: 19 / 14;
  height: auto;
}

.columna span {
  display: inline-block;
  margin-top: 15px; /* Espacio entre la foto y el botón */
  padding: 10px 25px; /* Espacio interno para que parezca botón */
  
  /* Esto lo hace redondo y con fondo */
  background-color: #49111c; /* El color granate que usas */
  color: white; /* Texto en blanco para que resalte */
  border-radius: 50px; /* Bordes muy redondeados (estilo cápsula) */
  
  font-weight: bold;
  text-transform: uppercase; /* Opcional: letras en mayúsculas */
  font-size: 0.9rem;
  
  transition: all 0.3s ease; /* Para que el cambio de color sea suave */
}

/* Efecto cuando pasas el ratón sobre la columna completa */
.columna:hover span, .columna:hover p {
  background-color: #721c2b; /* Un tono más claro al pasar el mouse */
  transform: translateY(-3px); /* Pequeño salto hacia arriba */
  box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* Sombra para dar profundidad */
}


/*------ FIN PORTFOLIO ----------*/

/*------ INICIO FOOTER ----------*/

.main-footer{
    background-color: #49111C;
    color: #F5F5DC;
    padding-top: 5%;
}

.main-footer h1{
    justify-content: center;
    text-align: center;
    padding-bottom: 5%;
    font-family: 'Montserrat', sans-serif;
    font-style: italic;
    font-size: 3.5rem;
    display: flex;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 2%;
    padding-right: 2%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 5%;
}

/* Columnas del footer */
.footer-column {
    flex: 1;
    min-width: 200px; /* Un poco más ancho para el formulario */
}

.footer-column h3 {
    font-size: 1.2rem;
    margin-bottom: 25px;
    position: relative;
    font-weight: 600;
}

.footer-column h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    background-color: #F5F5DC; /* Color de acento turquesa */
    height: 2px;
    width: 50px;
}

.footer-column p {
    color: white;
    line-height: 1.6;
    font-size: 0.95rem;
    text-align: left;
}

/* Enlaces y listas */
.footer-column ul {
    list-style: none;
}

.footer-column ul li {
    margin-bottom: 12px;
}

.footer-column ul li a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 0.95rem;
}

.footer-column ul li a:hover {
    color: #F5F5DC;
    padding-left: 5px;
    transition: all 0.3s ease;
}

/* Info de contacto básica en columna 1 */
.contact-brief {
    margin-top: 20px;
}

.contact-brief li {
    color: white;
    font-size: 0.9rem;
    margin-bottom: 8px;
    display: flex;
    justify-content: left;
    gap: 10px;
}

.contact-brief li i {
    color: #00adb5;
}

/* --- ESTILOS DEL FORMULARIO DE CONTACTO --- */
.footer-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    background-color: white; /* Fondo oscuro integrado */
    border: 1px solid #F5F5DC;
    border-radius: 6px;
    color: #49111C;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.3s ease;
}

/* Estilo para el marcador de posición (placeholder) */
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #49111C;
}

/* Efecto focus al hacer clic en los campos */
.form-group input:focus,
.form-group textarea:focus {
    border-color: black;
}

/* Evita que el usuario deforme el diseño expandiendo de más el textarea */
.form-group textarea {
    resize: vertical;
    min-height: 80px;
    max-height: 180px;
}

/* Botón de enviar */
.btn-submit {
    background-color: #a9927e;
    color: #F5F5DC;
    border: none;
    padding: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-submit:hover {
    background-color: #5e503f;
}

.btn-submit:active {
    transform: scale(0.98); /* Pequeño efecto de hundimiento al clickear */
}

/*--------- VENTANA MODAL ------------*/

.modal {
  display: none; /* Oculta por defecto */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
  z-index: 2000; /* Asegúrate de que esté por encima del footer */
}

/* Caja blanca de contenido */
.modal-content {
  background-color: #F2F4F3;
  color: #49111C;
  padding: 25px;
  border-radius: 8px;
  width: 400px;
  max-width: 90%;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  position: relative;
  animation: modalSlideIn 0.3s ease;
}

/* Botón de cerrar (X) */
.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
  color: #49111C;
}
.close-btn:hover { color: #333; }

/* Botón de Aceptar dentro de la modal */
.btn-modal-accept {
  background-color: #49111C; /* Color verde de éxito, cámbialo si quieres */
  color: #F5F5DC;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 15px;
  font-size: 16px;
}
.btn-modal-accept:hover { background-color: #a9927e; }

/* Animación de entrada */
@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(-30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- FIN FORMULARIO --- */

/* Barra inferior de Copyright */
.footer-bottom {
    text-align: center;
    padding-top: 25px;
    margin-top: 50px;
    border-top: 1px solid #F5F5DC;
}

.footer-bottom p {
    color: #F5F5DC;
    font-size: 0.85rem;
    padding-bottom: 30px;
}