/* --- Estilos Generales y Tipografía --- */
body, header, figure {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    font-family: "Boldonse", sans-serif; /* Uso de la Google Font importada */
    background-color: #000000; /* Un color de fondo suave, puedes cambiarlo */
    color: #ffffff;
}

/* --- Título Principal --- */
h1 {
    font-size: 2.5rem; /* Tamaño de letra grande */
    font-weight: 300; /* Máximo grosor para un efecto "negrita" marcado */
    text-align: left;

    padding: 55px 0%;    
    margin: 0px 0px 0 2%;
	color: #ffffff; /* El color dorado que ya usas */
    line-height: 1.2; /* Altura de la línea Valor inicial. Prueba con 0.8, 0.75, etc. */
    letter-spacing: -1px; /* Espaciado entre letras para compactar más. Prueba con -1px, -2px, etc. o quítalo si no te gusta */
	/* --- ¡LA MAGIA PARA EL CONTORNO IZQUIERDO! --- */
    /* Creamos múltiples sombras duras desplazadas a la izquierda */
    text-shadow: /* HORI VERT DESENFOQUE COLOR */
        -1px 0px 0px #000000, /* OJO CON , Y ; la , va después de cada color, y el ; va después del último color */ /* FFD700 dorado , FF8C00 amarillento , e36cbe morado*/
        /* -3px 0px 0px #000000,
		-4px 0px 0px #ffffff */
		-2px 0px 0px #000000;
		
	position: relative;
    z-index: 2; /* Para que esté por encima de la imagen */
}

h2 {
    font-family: "Boldonse", sans-serif; /* Usamos la misma fuente que el h1 para consistencia */
    font-size: 1.5rem; /* Un tamaño más pequeño que el h1 pero más grande que los párrafos */
    font-weight: 300;
    color: #ffffff; /* #FFD700 El color dorado para que destaque */
    text-align: left; /* Centramos los títulos de sección */
	margin-left: 5%;
    margin-top:10px; /* Espacio superior para separar de la sección anterior */
    margin-bottom: 10px; /* Espacio inferior para separar del párrafo que le sigue */
}

.highlighted-lines-paragraph span {
    background-color: #ffffff; /* El fondo blanco del "marcador" */
    color: #000000; /* El color del texto sobre el fondo blanco */
}

/* --- EXCEPCIÓN PARA EL H2 DE LA GALERÍA --- */
.gallery-section h2 {
    margin-top: 10px; /* Un valor mucho más pequeño, ¡ajústalo a tu gusto! */
    
    /* (Opcional) Si también quieres centrarlo, como suelen ir los títulos de galería */
    text-align: left;
    margin-left: 5%; /* Quitamos el margen izquierdo si lo centramos */
}

/* --- ESTILOS PARA SUBRAYADO ANIMADO EN ENLACES --- */

.link-animated-underline {
    /* --- Estilos base del enlace --- */
    color: #FFD700; /* FFD700 Color del texto (dorado, por ejemplo) */
    text-decoration: none; /* ¡Muy importante! Quitamos el subrayado por defecto */
    
    /* --- La magia del fondo que simula la línea --- */
    background-image: linear-gradient(currentColor, currentColor); /* Crea una "imagen" del mismo color que el texto */
    background-position: 0% 90%;/* Coloca la línea al 90% de la altura total del espacio de la línea de texto. Es una posición relativa. Si cambias el tamaño de la fuente, la línea se ajustará proporcionalmente.*/  /* Posiciona la línea abajo del todo (0% a la izquierda, 100% abajo) */
    background-repeat: no-repeat;
    background-size: 0% 2px; /* ¡ESTADO INICIAL! Ancho 0%, altura 2px (grosor de la línea) */
    
    /* --- La animación --- */
    transition: background-size 0.4s ease-in-out; /* Animamos el cambio de 'background-size' */
}

/* --- El estado HOVER --- */
.link-animated-underline:hover {
    color: #FFD700; /* (Opcional) Cambiamos el color del texto al pasar el ratón */
    background-size: 100% 2px; /* ¡ESTADO FINAL! Ancho 100%, altura 2px */
}


.link-animated-underline:visited { /* <-- ¡AÑADIDO AQUÍ! */
    color: #dddddd;
    text-decoration: none;
    /* ... resto de estilos ... */
}

.home-link {
    display: block;
    font-family: "Boldonse", sans-serif;
    font-size: 1.1rem;
    font-weight: 300;
    color: #ffffff;
    line-height: 1.1;
    text-decoration: none;
    text-align: left;
    padding: 5px;    
	    text-shadow: /* HORI VERT DESENFOQUE COLOR */
        -1px 0px 0px #000000; /* OJO CON , Y ; la , va después de cada color, y el ; va después del último color */ /* FFD700 dorado , FF8C00 amarillento , e36cbe morado*/
        /* -3px 0px 0px #000000,
		-4px 0px 0px #ffffff 
		-2px 0px 0px #000000; */
    /* El efecto de subrayado se aplica al enlace completo */
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size 0.4s ease-in-out, color 0.3s ease;
}

.home-link:visited { /* <-- ¡Y AÑADIDO AQUÍ! */
    color: #ffffff; /* Color inicial blanco */ /* dddddd gris claro /
}
	
.home-link:hover {
    color: #FFD700;
    /* background-size: 50% 2px; /* La línea crece al 100% del bloque */
}



/* --- SOLUCIÓN FINAL Y CORRECTA --- */

.home-link {
	position: absolute; /* 1. Lo sacamos del flujo normal */
    top: 10px;          /* 2. Distancia desde el borde superior. ¡Ajusta a tu gusto! */
    left: 5px;         /* 3. Distancia desde el borde izquierdo. ¡Ajusta a tu gusto! */
    z-index: 10;   /* 4. (Opcional pero recomendado) Nos aseguramos de que esté por encima de otros elementos */

    font-family: "Boldonse", sans-serif;
    font-size: 1.1rem;
    /* ... resto de estilos del enlace ... */
    text-decoration: none;
    text-align: left;
}

.home-link:hover {
    color: #FFD700;
}
/* Hacemos que cada span sea un bloque que se ajusta a su contenido */
.home-link span {
    display: table; /* ¡EL TRUCO! Se comporta como bloque pero se ajusta al contenido */
    
    /* Magia del subrayado */
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size 0.4s ease-in-out;
}

/* El hover en el enlace padre activa la animación en los <span> hijos */

.home-link:hover span {
    background-size: 100% 2px;
}

.home-link .line-2 {
    padding-left: 40px;
}

/* ================================================================ */
/* === ESTILOS PARA LA CABECERA PRINCIPAL (REEMPLAZO DEL HERO) === */
/* ================================================================ */

header {
    /* 1. El header es el ancla de posicionamiento */
    position: relative; /* Mantenemos esto por si algún hijo lo necesita */
	/* 2. Le damos el fondo que SÍ se verá */
    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('../img/fo205.jpg');
    background-size: cover;
    background-position: center;
	background-attachment: fixed; /* fixed = no se mueve */
	/* 3. Le damos una altura MÍNIMA para que tenga espacio para el título y el fondo */
    /* El padding-bottom crea espacio para que la imagen "flote" sin tapar la siguiente sección */
	padding: 20px 1% 20px 1%;/* 20px arriba/abajo, 5% a los lados */

}

.hero-image {
    width: 100%; 
	height: auto;
    display: block; /* Buena práctica para eliminar espacios */
	clip-path: polygon(2% 5%, 100% 0%, 95% 90%, 0% 100%); /* Un polígono simple para empezar */
	/* object-fit: cover;
    object-position: center; */
    margin-top: -100px; /* Ajusta este valor para controlar cuánto se solapa con el header */
    margin-bottom: -10vw; /* Ajusta este valor para controlar el solapamiento con la sección de abajo */
	    /* --- CONTROL DE CAPAS --- */
    position: relative; /* 1. Activamos el posicionamiento */
    z-index: 1;         /* 2. Le asignamos la capa base (la de atrás) */
}

.caption {
    font-size: 0.8rem; /* Letra pequeña para el pie de foto */
    text-align: right;
    color: #ffffff; /* #666 es gris medio-oscuro, #aaaaaa es gris claro */
	font-weight: 300; 
	/* padding: 0px; */
    /* Le damos un poco de margen para que no se pegue a los bordes */
	
	    text-shadow: /* HORI VERT DESENFOQUE COLOR */
        -1px -1px 0px #000000, /* OJO CON , Y ; la , va después de cada color, y el ; va después del último color */ /* FFD700 dorado , FF8C00 amarillento , e36cbe morado*/
		1px 1px 0px #000000;
	padding-left: 10%;
    padding-right: 5%;
    margin-top: -5vw; /* Margen negativo para "subirla" y que quede sobre la parte inferior de la imagen */
	/* --- CONTROL DE CAPAS --- */
	position: relative;
    z-index: 2; /* Para que esté por encima de la imagen */
}

.text-block-section {
	clip-path: polygon(0% 8%, 100% 2%, 95% 90%, 5% 100%);
	/* padding-top: 62px;
	margin-top: 50px; */
    /* ¡LA SOLUCIÓN! Añadimos un margen inferior para crear espacio */
    /* El valor depende del ancho de la pantalla, así que usamos unidades relativas como 'vw' */
    /* 10vw significa "10% del ancho de la ventana" */
    margin-bottom: -1vw; /* Ajusta este valor (prueba -8vw, -12vw) */
	/* Elige la imagen de fondo que quieras para esta sección */
    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('../img/fo205.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: scroll; /* scroll fondo se mueve, lo clásico */ /* fixed = fondo no se mueve ¡Prueba el efecto Parallax aquí, puede quedar genial! */

    /* ¡IMPORTANTE! Añadimos padding para que los párrafos no se peguen a los bordes */
    padding: 100px 0 80px 0; /* padding es alcochamiento interno, margin es separación externa */
}
.text-block-section-mas {
	clip-path: polygon(0% 10%, 100% 0%, 95% 90%, 5% 100%);
    /* ¡LA SOLUCIÓN! Añadimos un margen inferior para crear espacio */
    /* El valor depende del ancho de la pantalla, así que usamos unidades relativas como 'vw' */
    /* 10vw significa "10% del ancho de la ventana" */
    margin-bottom: -8vw; /* Ajusta este valor (prueba -8vw, -12vw) */
	/* Elige la imagen de fondo que quieras para esta sección */
    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('../img/fo205.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: scroll; /* scroll fondo se mueve, lo clásico */ /* fixed = fondo no se mueve ¡Prueba el efecto Parallax aquí, puede quedar genial! */

    /* ¡IMPORTANTE! Añadimos padding para que los párrafos no se peguen a los bordes */
    padding: 120px 0 80px 0; /* 80px de espacio arriba y abajo, 0 a los lados */
}
/* --- Párrafo Principal --- */

.main-paragraph {
    font-family: 'Boldonse', sans-serif;
	font-size: 1rem; /* Tamaño de letra intermedio */    
	font-weight: 300; 
    line-height: 2;
    margin-left: 10%; /* Margen a la izquierda */
    margin-right: 5%; /* Un poco de margen derecho para equilibrio */
	margin-top: 10px;
	margin-bottom: 50px;
    max-width: 800px; /* Evita que la línea sea demasiado larga en pantallas grandes */

}

.main-paragraph-2 {
    font-family: 'Boldonse', sans-serif;
	font-size: 1.2rem; /* Tamaño de letra intermedio */
	font-weight: 300; 
    line-height: 1.4;
    margin-left: 5%; /* Margen a la izquierda */
    margin-right: 5%; /* Un poco de margen derecho para equilibrio */
	margin-top: 50px;
    max-width: 800px; /* Evita que la línea sea demasiado larga en pantallas grandes */

}
/* Párrafo enmarcado en un rectángulo blanco */
.framed-paragraph {
    /* 1. El color de fondo del rectángulo */
    background-color: #ffffff; 
    
    /* 2. El color del texto dentro del rectángulo (negro para contraste) */
    color: #000000; 
    
    /* 3. El relleno interno para crear espacio entre el texto y el borde */
    padding: 45px; 
    
	
    /* (Opcional) Si quieres que tenga los mismos márgenes que .main-paragraph */
	margin-top: 10px;
    margin-left: 13%;
    margin-right: 5%;
    max-width: 1000px;
    
    /* (Opcional) Si quieres que use la misma tipografía que .main-paragraph */
    font-family: 'Boldonse', sans-serif;
    font-size: 0.8rem;
    line-height: 1.4;
	letter-spacing: -0.5px;
	margin-top: -15px;
    /* --- ¡AÑADE SOLO ESTA LÍNEA DE CÓDIGO! --- */
    background-image: repeating-linear-gradient(
        -30deg,
        rgba(0, 0, 0, 0.05),
        rgba(0, 0, 0, 0.05) 3px,
        transparent 1px,
        transparent 10px
    );
	
	clip-path: polygon(
        5% 12%,      /* Punto 1: Superior izquierdo, bajado un 5% */
        100% 0%,    /* Punto 2: Superior derecho, arriba del todo */
        85% 82%,   /* Punto 3: Inferior derecho, subido un 5% */
        0% 100%     /* Punto 4: Inferior izquierdo, abajo del todo */
    );
}

/* ... (tus estilos anteriores) ... */

/* Párrafo con cada línea resaltada individualmente */
.highlighted-lines-paragraph {
    /* Heredamos estilos de fuente y margen para consistencia */
    font-family: 'Boldonse', sans-serif;
    font-size: 0.8rem;
    font-weight: 300;
    line-height: 2.2; /* Aumentamos un poco el interlineado para que los recuadros no se peguen */
	letter-spacing: -0.5px;
	margin-top: -5px;
    margin-left: 15%;
    margin-right: 5%;
    max-width: 800px;
    
    /* El texto en sí será blanco */
    color: #ffffff; 
	
	
}


/* La magia está en un <span> que pondremos dentro del párrafo */
.highlighted-lines-paragraph span {
    background-color: #ffffff; /* El fondo blanco del "marcador" */
    color: #000000; /* El color del texto sobre el fondo blanco */
    
    /* Pequeño padding horizontal para que el recuadro sea un poco más ancho que el texto */
    padding: 1px 6px; 
    
    /* (Opcional) Para redondear ligeramente las esquinas del recuadro */
    border-radius: 0px;

    /* ¡LA PROPIEDAD CLAVE! */
    /* Asegura que el fondo se aplique a cada fragmento de línea por separado */
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone; /* Para compatibilidad con navegadores antiguos */
	
	background-image: repeating-linear-gradient(
	-30deg,
	rgba(0, 0, 0, 0.05),
	rgba(0, 0, 0, 0.05) 3px,
	transparent 1px,
	transparent 10px
    );
	

}

/* --- Galería de 3 Columnas (SOLO IMÁGENES) y debajo suya van las 3 columnas de texto  --- */ /* son las galerías de FOTOS DEL TATUAJE y ASÍ TE HAGO */
.gallery-section {
    margin: 20px 0%; /* Margen superior/inferior y lateral */
	    /* --- NUEVOS ESTILOS DE FONDO --- */
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../img/fo205.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* fixed = fondo no se mueve ¡Prueba el efecto Parallax aquí, puede quedar genial! */
	padding: 3px 0%; /* Añadimos padding para que el fondo "respire" */
}

.gallery-images {
    display: flex; /* Activamos Flexbox para alinear los elementos */
    flex-direction: column; /* Apiladas en móvil (comportamiento por defecto) */
    gap: 0px; /* Espacio entre los elementos */
}

.gallery-images img {
    width: 100%; /* Cada imagen ocupa todo el ancho disponible en móvil */
    height: auto; /* En móvil, la altura es automática para mantener la proporción */
}


/* Apuntamos al <a> que es el primer hijo, y luego a la <img> de dentro */
.gallery-images a:first-child img {
    clip-path: polygon(0 5%, 100% 0, 100% 100%, 0% 100%);
}

/* Apuntamos al <a> que es el último hijo, y luego a la <img> de dentro */
.gallery-images a:last-child img {
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);
}


/* --- NUEVA SECCIÓN: Párrafos en Columnas --- */
.text-columns-section {
	/* clip-path: polygon(0% 2%, 100% 0%, 95% 90%, 5% 100%);
	/* Importante: Esto evita que el clip-path afecte a elementos fuera del div */
    position: relative; 
    /* ¡LA SOLUCIÓN! Añadimos un margen inferior para crear espacio */
    /* El valor depende del ancho de la pantalla, así que usamos unidades relativas como 'vw' */
    /* 10vw significa "10% del ancho de la ventana" */
    margin-bottom: -8vw; /* Ajusta este valor (prueba -8vw, -12vw) */
	margin: 0px 0%; /* Margen para separar de la galería */
    /* --- NUEVOS ESTILOS DE FONDO --- */
    background-image: url('../img/diseno-31.jpg'); /* Ajusta la ruta a tu imagen */
    background-size: cover; /* La imagen cubre toda la sección sin deformarse */
    background-position: center; /* Centra la imagen */
    background-attachment: fixed; /* ¡Efecto Parallax! La imagen se queda fija al hacer scroll */
}


.text-columns {
    display: flex;
    flex-direction: column !important; /* Apilados en móvil */
    gap: 60px; /* Espacio entre párrafos */
}

.text-columns p {
	font-family: 'Boldonse', sans-serif;
    margin: 0; /* Quitamos el margen por defecto del párrafo para que 'gap' lo controle */
    line-height: 1.6;
	margin-top: 15px; /* Margen superior de cada párrafo */
	margin-bottom: 15px; /* Margen inferior */
    margin-left: 15px; /* Margen izquierdo */
	margin-right: 15px; /* Margen derecho */
}



/* --- ESTILOS PARA LA NUEVA GALERÍA DE 9 IMÁGENES --- */

.filmstrip-gallery {
    margin: 0px 0 120px 0; /* Espacio vertical para separar de otras secciones */
	clip-path: polygon(0% 5%, 100% 0%, 95% 90%, 5% 100%);
			    /* Importante: Esto evita que el clip-path afecte a elementos fuera del div */
    position: relative; 
    /* ¡LA SOLUCIÓN! Añadimos un margen inferior para crear espacio */
    /* El valor depende del ancho de la pantalla, así que usamos unidades relativas como 'vw' */
    /* 10vw significa "10% del ancho de la ventana" */
	padding-top: 20px; /* ¡LA CLAVE! Creamos espacio ARRIBA para el h2 */
    padding-bottom: 100px; /* Creamos espacio ABAJO para la galería */
	margin-top: 20px; /* Margen superior de la sección entera */
	margin-bottom: -12vw; /* Ajusta este valor (prueba -8vw, -12vw) */
	    /* --- NUEVOS ESTILOS DE FONDO --- */
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../img/fo15-2.jpg');
    background-size: cover; /* La imagen cubre toda la sección sin deformarse */
    background-position: center; /* Centra la imagen */
    background-attachment: fixed; /* ¡Efecto Parallax! La imagen se queda fija al hacer scroll */
}

.filmstrip-gallery h2 {
    text-align: center;
	margin-top: 10px;
    margin-bottom: 0px;
}

.gallery-container {
    /* --- VISTA MÓVIL: Cuadrícula 3x3 con CSS Grid --- */
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas de igual tamaño */
    gap: 5px; /* Un pequeño espacio entre las imágenes */
    padding: 0 0px; /* Un pequeño padding lateral para que no se pegue a los bordes */
}

.gallery-container img {
    width: 100%; /* La imagen ocupa el 100% de su celda en la cuadrícula */
    height: 300px; /* Damos una altura fija para que todas las filas sean uniformes */
    object-fit: cover; /* Mantiene la proporción y recorta para rellenar (¡ya lo conoces!) */
}

.gallery-container img.is-visible:nth-child(1) { transition-delay: 0.1s; }
.gallery-container img.is-visible:nth-child(2) { transition-delay: 0.5s; }
.gallery-container img.is-visible:nth-child(3) { transition-delay: 1.3s; }
.gallery-container img.is-visible:nth-child(4) { transition-delay: 1.5s; }
.gallery-container img.is-visible:nth-child(5) { transition-delay: 1.2s; }
.gallery-container img.is-visible:nth-child(6) { transition-delay: 1.5s; }
.gallery-container img.is-visible:nth-child(7) { transition-delay: 1.7s; }
.gallery-container img.is-visible:nth-child(8) { transition-delay: 2.5s; }
.gallery-container img.is-visible:nth-child(9) { transition-delay: 2.9s; }

/*
   Importante: También necesitamos un delay de 0 para el estado inicial,
   para evitar "parpadeos" al cargar la página.
*/
.gallery-container img.animate-on-scroll {
    transition-delay: 0s;
}

/* --- PROYECTOS DESTACADOS ESTILOS PARA LA SECCIÓN DE LA GALERÍA REORDENABLE --- */

.reorder-gallery-section {
    /* --- ESTILOS DE FORMA Y FONDO (Copiados de otra sección) --- */
    
    /* 1. La forma diagonal que más te guste */
    clip-path: polygon(0% 5%, 100% 0%, 100% 92%, 0% 100%);
    
    position: relative; /* Necesario para que el clip-path se comporte bien */
			z-index: 1;  
    /* 2. La imagen de fondo */
    background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.7)), url('../img/fo15.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* ¡El efecto Parallax! */

    /* 3. ¡IMPORTANTE! Añadimos padding para que el contenido no se pegue a los bordes */
    padding: 120px 0; /* Aumenta el espacio interno para que el fondo y el clip-path se luzcan */
}



/* (Opcional) Ajustamos el margen del título si lo hemos movido dentro */
.reorder-gallery-section h2 {
	margin-top: 0; /* Quitamos el margen superior si ya hay padding en la sección */
}


.reorder-gallery {
    /* (Opcional) Añadimos un poco de espacio entre los bloques en móvil */
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 5%; /* Un poco de padding lateral */
}

.reorder-gallery img {
    width: 100%; /* La imagen ocupa el 100% del ancho de su contenedor */
    height: auto; /* La altura se ajusta para mantener la proporción */
    display: block; /* Buena práctica para eliminar espacios extra debajo de la imagen */
}



/* --- SECCIÓN: Footer --- */
.site-footer {
    background-color: #FF8C00; 
    color: #ffffff;
    padding: 10px 20px 40px 20px; /* Aumentamos el padding superior */
    text-align: center;
	    /* ¡LA MAGIA OCURRE AQUÍ! */
    /* Creamos una forma de polígono para el footer. */
    /* Los puntos son: (esquina sup-izq), (esquina sup-der), (esquina inf-der), (esquina inf-izq) */
    clip-path: polygon(0 30%, 100% 0, 95% 90%, 10% 100%);
	background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2)), url('../img/fo15-1.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* ¡Prueba el efecto Parallax aquí, puede quedar genial! */
	/*
	clip-path: polygon(0 15%, 100% 0, 100% 100%, 0% 100%);
	polygon() define una forma con varios puntos. Cada punto tiene una coordenada X (horizontal) y una Y (vertical).
		0 15%: Este es el punto de la esquina superior izquierda. En lugar de estar en la cima del todo (0 0), lo bajamos un 15% del alto total del footer.
		100% 0: Este es el punto de la esquina superior derecha. Lo dejamos en la cima del todo.
		100% 100%: Esquina inferior derecha.
		0% 100%: Esquina inferior izquierda.
	Al conectar estos puntos, el navegador dibuja una línea recta desde el punto superior izquierdo (que está bajado un 15%) hasta el punto superior derecho (que está arriba del todo). ¡Y ahí tienes tu diagonal!
	*/
	
    /* Damos un margen negativo para que "suba" y se pegue a la sección anterior */
    margin-top: -70px; 
}

.footer-content {
    max-width: 800px;
    margin: 0px auto;
}

.contact-text {
    font-size: 1.1rem;
    font-weight: 300;
	margin-top: 100px;
    margin-bottom: 20px;
}

.social-icons {
    margin-bottom: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

/* Estilos simplificados, apuntando solo al enlace */
.social-icons a {
    color: #ffffff;
    font-size: 1.9rem; /* Controla el tamaño del icono */
    transition: transform 0.6s ease-in-out;
}

.social-icons a:hover {
    transform: scale(1.2);
}

.copyright-text {
    font-size: 0.8rem;
    color: #ffffff;
	font-weight: 300;
    margin: 0;
}


/* --- ESTILOS PARA ANIMACIONES DE ENTRADA (PARA MÓVIL) --- */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.animate-fade-in-only {
    opacity: 0;
    transition: opacity 1.2s ease-in;
}
.animate-fade-in-only.is-visible {
    opacity: 1;
}


/* --- Media Query para Responsividad (Ordenadores) --- */
/* Estos estilos se aplican SOLO si la pantalla tiene un ancho mínimo de 768px  ORDENADOR */
@media (min-width: 768px) {
    
    h1 {
        font-size: 4.5rem; /* Título más grande en pantallas grandes */
    }

    .main-paragraph {
        margin-left: 10%; /* Aumentamos el margen en pantallas grandes */
    }

    .gallery-images {
        flex-direction: row; /* Imágenes en fila en escritorio */
        /* justify-content: space-between; /* Mantiene el espacio entre ellas */
        align-items: flex-start;  /* ¡LÍNEA CLAVE! Alinea las imágenes en la parte superior */
		gap: 0;
		flex-wrap: wrap; /* Permite que las imágenes pasen a la siguiente fila */
    }

/* ¡NUEVA REGLA! Le decimos a cada enlace que se comporte como un bloque flexible */
.gallery-images a {
    display: block; /* Importante para que el width funcione bien */
    width: 33.333%; /* Cada enlace ocupa un tercio del espacio */
    height: auto; /* Para que el enlace se ajuste a la altura de la imagen */
}


.gallery-images a img { /* Ahora esta regla apunta a la imagen DENTRO del enlace */
    width: 100%; /* La imagen ocupa el 100% del ancho de su enlace padre */
    height: auto;
}



    /* Apuntamos al <a> que es el primer hijo, y luego a la <img> de dentro */
    .gallery-images a:first-child img {
        clip-path: polygon(0 15%, 100% 0, 100% 100%, 0% 100%);
    }

    /* Apuntamos al <a> que es el último hijo, y luego a la <img> de dentro */
    .gallery-images a:last-child img {
        clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);
    }



    .reorder-gallery {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 columnas */
        grid-template-rows: auto auto; /* 2 filas */
        gap: 20px 40px; /* Espacio entre filas y columnas */
        padding: 0 5%; /* Mantenemos el padding */
    }
    /* Colocamos los 3 primeros elementos (los <a> con las imágenes) en la primera fila */
    .reorder-gallery > a:nth-of-type(1) { grid-column: 1; grid-row: 1; }
    .reorder-gallery > a:nth-of-type(2) { grid-column: 2; grid-row: 1; }
    .reorder-gallery > a:nth-of-type(3) { grid-column: 3; grid-row: 1; }

    /* Colocamos los 3 siguientes elementos (los <p>) en la segunda fila */
    .reorder-gallery > p:nth-of-type(1) { grid-column: 1; grid-row: 2; }
    .reorder-gallery > p:nth-of-type(2) { grid-column: 2; grid-row: 2; }
    .reorder-gallery > p:nth-of-type(3) { grid-column: 3; grid-row: 2; }

    /* --- NUEVOS ESTILOS para los párrafos en escritorio --- */
    .text-columns {
		font-family: 'Sofia Sans Extra Condensed', sans-serif;
        flex-direction: row; /* Párrafos en fila en escritorio */
        justify-content: space-between;
        gap: 40px; /* Un poco más de espacio entre columnas de texto */
    }
    /* Ya no necesitamos la corrección compleja de 'flex-basis' porque un margen fijo en píxeles es muy pequeño y no romperá el layout de 3 columnas basado en porcentajes. Podemos volver a una declaración más simple o dejar la de flex-basis, ambas funcionarán.
	Por simplicidad, la quitamos. */
    .text-columns p {
        /* El margin-left: 15px; ya está aplicado desde la regla anterior */
        /* No necesitamos añadir nada más aquí, Flexbox se encarga del resto */
    }
/* ----------- GALERÍA DE LAS 9 - MÁS TRABAJOS ----------- */
    .gallery-container {
        display: flex; /* Mantenemos Flexbox */
        justify-content: center; /* Centramos el grupo de imágenes */
        align-items: center; /* Centramos las imágenes verticalmente si tienen alturas distintas */
        gap: 5px; /* Espacio entre las imágenes */
        padding: 0 0% 80px 0%; /* Un pequeño padding lateral para que no se peguen a los bordes */

        /* Anulamos las propiedades que ya no necesitamos */
        overflow-x: visible; /* Quitamos el scroll horizontal */
        scroll-snap-type: none;
		    flex-wrap: wrap; /* Aseguramos que también envuelva si hay más de 9 */
    }
/* ¡NUEVA REGLA! Le decimos a cada enlace que se comporte como un bloque flexible */
.gallery-container a {
    display: block; /* Importante para que el flex y width funcionen bien */
    flex: 1; /* Cada enlace ocupa una fracción igual del espacio */
    max-width: 10%; /* Un límite para evitar que se estiren demasiado */
    height: auto; /* Para que el enlace se ajuste a la altura de la imagen */
}

.gallery-container a img { /* Ahora esta regla apunta a la imagen DENTRO del enlace */
    width: 100%; /* La imagen ocupa el 100% del ancho de su enlace padre */
    height: auto;
}

.site-footer {
    /* ¡CAMBIO DE COLOR! Fondo naranja oscuro */
    background-color: #FF8C00; 
    color: #ffffff; /* Texto negro para buen contraste sobre naranja */
    padding: 40px 20px; /* Espaciado interno */
    text-align: center; /* Centra todo el texto */
}

.footer-content {
    max-width: 800px; /* Evita que el contenido se estire demasiado en pantallas anchas */
    margin: 0 auto; /* Centra el contenedor del contenido */
}

.contact-text {
    font-size: 1.2rem;
	font-weight: 300;
    margin-bottom: 20px;
}


/* --- ESTILOS PARA ANIMACIONES DE ENTRADA --- */

/* Clase para el estado inicial de la animación "Fade In + Slide Up" */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* En sman13.css */
.animate-fade-in-only {
    opacity: 0;
    transition: opacity 1.2s ease-in;
}
.animate-fade-in-only.is-visible {
    opacity: 1;
}