/* VISTA PARA ORDENADOR DESDE LÍNEA 868 */
/* COLORES
FFD700 dorado , 
FF8C00 amarillento , 
e36cbe morado
*/
/* --- Estilos Generales y Tipografía --- */
body, header, figure {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    font-family: "Boldonse", sans-serif;
    color: #ffffff;
    background-color: #000000;
	background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7)), url('../images/fo-102.jpg');
    background-size: cover;
    background-attachment: fixed; /* scroll */
    background-position: center;
    background-repeat: no-repeat;
}

/* --- 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 */
        -2px 2px 0px #000000, 
        /* -3px 0px 0px #000000,*/
		-3px 3px 0px #dddddd,
		-4px 4px 0px #000000,
		-5px 5px 0px #dddddd;
		/* OJO CON , Y ; la , va después de cada color, y el ; va después del último color */
		
	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;
	line-height: 2;
    color: #ffffff; /* #FFD700 El color dorado para que destaque */
	text-shadow: /* HORI VERT DESENFOQUE COLOR */
	-2px 2px 0px #000000,
	/* -3px 0px 0px #000000,*/
	-3px 3px 0px #dddddd; /*
	-4px 4px 0px #000000,
	-5px 5px 0px #dddddd; */
    text-align: left; /* Centramos los títulos de sección */
	margin-top:10px; /* Espacio superior para separar de la sección anterior */
	margin-right: 2%; 
	margin-left: 5%;
	margin-bottom: 0px; /* Espacio inferior para separar del párrafo que le sigue */
	padding-top: 0px;
	padding-right: 10%;
	padding-bottom: 0px;
    padding-left: 0;
}
/* ---------------------------
    margin-right: 2%; 
	margin-bottom: 0px;
	margin-left: 5%; 
	padding-top: 0px;
	padding-right: 10%;
	padding-bottom: 0px;
    padding-left: 0;
	-------------------------- */
.h2-alternativo {
	font-size: 1rem; /* Un tamaño más pequeño que el h1 pero más grande que los párrafos */
	line-height: 1.9;
    color: #ffffff; /* FFD700 dorado */
    text-shadow: /* Una sombra más sutil o diferente */
        -1px 0px 0px #bdbdbd; /* 888888 */
        /* -2px 2px 0px #888888; */
    text-align: left; /* Centramos este título en lugar de alinearlo a la izquierda */
    /* No es necesario repetir font-family, font-size, etc., porque los hereda del h2 base */
		margin-top: 0px; /* Espacio superior para separar de la sección anterior */
	margin-right: 2%; 
	margin-left: 5%;
	margin-bottom: 10px; /* Espacio inferior para separar del párrafo que le sigue */
		padding-top: 0px;
	padding-right: 10%;
	padding-bottom: 10px;
    padding-left: 0;
}
/* --- Estilo global para TODOS los enlaces --- */
a {
    color: #FFD700;
	text-shadow: /* HORI VERT DESENFOQUE COLOR */
	-2px 2px 0px #000000;
}

a:hover {
    color: #FF8C00; /* naranja oscuro */
	text-shadow: /* HORI VERT DESENFOQUE COLOR */
	-2px 2px 0px #000000;
}

a:visited {
    color: #FF8C00;
	text-shadow: /* HORI VERT DESENFOQUE COLOR */
	-2px 2px 0px #000000;
}

.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 */
        /* -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 --- */ /* SOLUCIÓN FINAL Y CORRECTA */

.home-link {
	display: block;
	position: absolute; /* 1. Lo sacamos del flujo normal */
    top: 10px;
    left: 5px;
    z-index: 10;Recomendado: con este numero tan alto nos aseguramos de que esté por encima cualquier otro elemento */
    font-family: "Boldonse", sans-serif;
	color: #ffffff;
    font-size: 1.1rem;
	line-height: 1.1;
    /* ... resto de estilos del enlace ... */
	font-weight: 300;
    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 */ 
        /* -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:hover {
    color: #FFD700;
}

.home-link:visited {
    color: #ffffff; 
}
/* 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;
}

/* --- header --- */

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.4)), url('../images/fo-080.jpg'); /* fo-303 */
    background-size: cover; /* cover */ /* contain */
	background-repeat: no-repeat;
    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 */
	clip-path: polygon(0% 0%, 100% 0%, 97% 90%, 1% 100%); 
	padding: 20px 1% 120px 1%;/* 20px arriba/abajo, 5% a los lados */
	margin-top: 0px; /* aquí puedes poner más y se verá el fondo de la página */
	margin-bottom: 0px;

}

/*--- hero-image ---*/
.hero-image {
    width: 100%; 
	height: auto;
    display: block; /* Buena práctica para eliminar espacios */
	clip-path: polygon(2% 5%, 100% 0%, 95% 90%, 3% 100%); /* Un polígono simple para empezar */
	/* object-fit: cover;
    object-position: center; */
    margin-top: -20vw; /* 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) */
}

.index-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 */
		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 */
	position: relative;
    z-index: 2; /* Para que esté por encima de la imagen */
}

.captionextra {
    font-size: 0.8rem;
    text-align: left;
    color: #ffffff; /* #666 es gris medio-oscuro, #aaaaaa es gris claro */
	font-weight: 300; 
	/* padding: 0px; */
	background-color: #ffffff; /* El fondo blanco */ 
    color: #000000; /* texto negro */
    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 #bdbdbd;
	max-width: 95%;
	position: relative;
    z-index: 2; /* Para que esté por encima de la imagen */
    margin-top: -20%; /* Margen negativo para "subirla" y que quede sobre la parte inferior de la imagen */
	margin-right: 10%;
	margin-bottom: 0px;
	margin-left: 10%;
	padding-top: 5px;	
    padding-right: 5%;
	padding-bottom: 5px;
	padding-left: 5%;

}

.captionrextra {
    font-size: 0.8rem;
    text-align: left;
    color: #ffffff; /* #666 es gris medio-oscuro, #aaaaaa es gris claro */
	font-weight: 300; 
	/* padding: 0px; */
	background-color: #ffffff; /* El fondo blanco */ 
    color: #000000; /* texto negro */
    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 #bdbdbd;
	max-width: 70%;
	position: relative;
    z-index: 2; /* Para que esté por encima de la imagen */
    margin-top: -10%; /* Margen negativo para "subirla" y que quede sobre la parte inferior de la imagen */
	margin-right: 10%;
	margin-bottom: 0px;
	margin-left: 2%;
	padding-top: 5px;	
    padding-right: 5%;
	padding-bottom: 5px;
	padding-left: 5%;
}

.captionzextra {
    font-size: 0.8rem;
    text-align: left;
    color: #ffffff; /* #666 es gris medio-oscuro, #aaaaaa es gris claro */
	font-weight: 300; 
	/* padding: 0px; */
	background-color: #ffffff; /* El fondo blanco */ 
    color: #000000; /* texto negro */
    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 */
		1px 1px 0px #bdbdbd;
	max-width: 70%;
	position: relative;
    z-index: 2; /* Para que esté por encima de la imagen */
    margin-top: 0%; /* Margen negativo para "subirla" y que quede sobre la parte inferior de la imagen */
	margin-right: 10%;
	margin-bottom: -150px;
	margin-left: 2%;
	padding-top: 5px;	
    padding-right: 5%;
	padding-bottom: 5px;
	padding-left: 5%;
}

.txt-prn {
    font-size: 1rem;
    text-align: left;
    color: #ffffff; /* #666 es gris medio-oscuro, #aaaaaa es gris claro */
	font-weight: 300;
	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 */
		1px 1px 0px #000000;
	padding-left: 15%;
    padding-right: 5%;
    margin-top: -45vw; /* Margen negativo para "subirla" y que quede sobre la parte inferior de la imagen */
	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" */
	/* 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('../images/fo-304.jpg');
    background-size: cover; /* cover */ /* contain */
	/* background-repeat: no-repeat; 
    background-position: center;
    background-attachment: fixed; /* 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 */
	margin: -200px 5% 5% 10px;
    padding: 50px 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('../images/fo-306.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 --- */
.parrafo-cabecera {
    font-family: 'Boldonse', sans-serif;
	font-size: 1.5rem; /* Tamaño de letra intermedio */    
	font-weight: 300; 
	text-align: left;
    line-height: 2;
	    text-shadow: /* HORI VERT DESENFOQUE COLOR */
        -2px 2px 0px #000000;
        /* -3px 0px 0px #000000,*/
		/* -3px 3px 0px #dddddd, */
		/* 1px -1px 0px #000000, /*
		/* -5px 5px 0px #dddddd; */
	margin-top: -5vw; 
    margin-right: 2%; 
	margin-bottom: 0px;
	margin-left: 5%; 
	padding-top: 0px;
	padding-right: 10%;
	padding-bottom: 0px;
    padding-left: 0;

    max-width: 800px;
	position: relative;
    z-index: 3; 
}

.parrafo-cabecera-menor {
    font-family: 'Boldonse', sans-serif;
	font-size: 1rem; /* Tamaño de letra intermedio */    
	font-weight: 300; 
	text-align: left;
    line-height: 1.7;
	    text-shadow: /* HORI VERT DESENFOQUE COLOR */
        -2px 2px 0px #000000;
        /* -3px 0px 0px #000000,*/
		/* -3px 3px 0px #dddddd, */
		/* 1px -1px 0px #000000, /*
		/* -5px 5px 0px #dddddd; */
	margin-top: -5vw;  /* -5vw */
    margin-right: 2%; 
	margin-bottom: 0px;
	margin-left: 5%; 
	padding-top: 0px;
	padding-right: 10%;
	padding-bottom: 0px;
    padding-left: 0;

    max-width: 800px;
	position: relative;
    z-index: 3; 
}

.main-paragraph {
	font-size: 1.1rem; /* Tamaño de letra intermedio */    
    line-height: 1.8rem;
	margin-left: 10%;

}

.main-paragraph a{
	color: #ffffff;
}

.main-paragraph a:hover{
	color: #FFD700;
}
.main-paragraph a:visited{
	color: #ffffff;
}
	
.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
    );
	

}


.presentation {
    /* 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.6), rgba(0, 0, 0, 0.2)), url('../images/fo-307.jpg');
    background-size: cover; /* cover */ /* contain */
	background-repeat: no-repeat;
    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: 0px 1% 10% 1%;/* 20px arriba/abajo, 5% a los lados */
}

.presentation-image {
    width: 100%; 
	height: auto;
    display: block; /* Buena práctica para eliminar espacios */
	clip-path: polygon(2% 8%, 100% 0%, 95% 90%, 0% 100%); /* Un polígono simple para empezar */
	/* object-fit: cover;
    object-position: center; */
	padding-top: 0px;
    margin-top: 20px; /* Ajusta este valor para controlar cuánto se solapa con el header */
    margin-bottom: 5%; /* 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) */
}

.presentation-rimage {
    width: 100%; 
	height: auto;
    display: block; /* Buena práctica para eliminar espacios */
	clip-path: polygon(2% 8%, 100% 0%, 95% 90%, 0% 100%); /* Un polígono simple para empezar */
	/* object-fit: cover;
    object-position: center; */
	padding-top: 0px;
    margin-top: -2%; /* Ajusta este valor para controlar cuánto se solapa con el header */
    margin-bottom: 5%; /* 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) */
}

/* --- Galería de 3 Columnas (SOLO IMÁGENES) y debajo suya van las 3 columnas de texto  --- */ 
/* sección Fotos del tatuaje */
.gallery-section {
    margin: 20px 0%; /* Margen superior/inferior y lateral */
	    /* --- NUEVOS ESTILOS DE FONDO --- */
    background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.2)), url('../images/fo-303.jpg');
    background-size: cover; /* cover */ /* contain */
    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" */
	    position: relative; /* Necesario para que el clip-path se comporte bien */
	z-index: 1;  
}

.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('../images/diseno-31.jpg'); /* Ajusta la ruta a tu imagen */
    background-size: cover; /* cover */ /* contain */
    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 */
}



.galeria-seccion {
    margin: 20px 2% 100px 2%; /* Margen superior/inferior y lateral */
	    /* --- NUEVOS ESTILOS DE FONDO --- */
    background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.2)), url('../images/fo154.jpg');
    background-size: cover; /* cover */ /* contain */
    background-position: center;
    background-attachment: fixed; /* fixed = fondo no se mueve ¡Prueba el efecto Parallax aquí, puede quedar genial! */
	padding: 80px 1% 100px 1%; /* Añadimos padding para que el fondo "respire" */
	clip-path: polygon(0% 4%, 100% 0%, 100% 96%, 0% 100%); 
	position: relative; /* 1. Activamos el posicionamiento */
    z-index: 1;         /* 2. Le asignamos la capa base (la de atrás) */
}

.galeria-seccion h2 {
    margin-top: 20px; /* 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 */
	padding-top: 10px;
}


.galeria-fila {
    display: flex;
    flex-wrap: wrap; 
    margin-bottom: 5px; 
	margin-left: 10px;
	margin-right: 0px;
    gap: 10px; /* Espacio entre las fotos de la misma fila */
}

.galeria-item {
    /* 
     * La clave: forzar el 50% del ancho en todos los casos.
     * flex: 0 0 ... evita que se encojan y crezcan.
     */
    flex: 0 0 calc(50% - 10px); 
    box-sizing: border-box;
    overflow: hidden;
    border: 0px solid #ccc;
    border-radius: 0px;
}
/* Se ha eliminado por completo la Media Query @media (max-width: 600px) */


.galeria-item img {
    clip-path: polygon(0% 4%, 100% 0%, 100% 96%, 0% 100%); 
	width: 100%; /* La imagen siempre ocupa el 100% de su contenedor */
    height: auto;
    display: block;
}





/*--- MÁS TRABAJOS - GALERÍA DE 9 IMÁGENES ---*/
.filmstrip-gallery {
    margin: 0px 0 10px 0; /* Espacio vertical para separar de otras secciones */
	clip-path: polygon(0% 5%, 100% 0%, 100% 90%, 0% 100%);
			    /* Importante: Esto evita que el clip-path afecte a elementos fuera del div */
    position: relative; /* Necesario para que el clip-path se comporte bien */
	z-index: 2;  
    /* ¡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: 80px; /* ¡LA CLAVE! Creamos espacio ARRIBA para el h2 */
    padding-bottom: 200px; /* Creamos espacio ABAJO para la galería */
	margin-top: -100px; /* Margen superior de la sección entera */
	margin-bottom: -100px;
	/* margin-bottom: -12vw; /* Ajusta este valor (prueba -8vw, -12vw) */
	    /* --- NUEVOS ESTILOS DE FONDO --- */
    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1)), url('../images/fo-306.jpg');
    background-size: cover; /* cover */ /* contain */
    background-position: center; /* Centra la imagen */
    background-attachment: fixed; /* ¡Efecto Parallax! La imagen se queda fija al hacer scroll */
}

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

.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 5px; /* 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: 250px; /* 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.6s; }
.gallery-container img.is-visible:nth-child(2) { transition-delay: 1.2s; }
.gallery-container img.is-visible:nth-child(3) { transition-delay: 1.8s; }
.gallery-container img.is-visible:nth-child(4) { transition-delay: 2.4s; }
.gallery-container img.is-visible:nth-child(5) { transition-delay: 2.8s; }
.gallery-container img.is-visible:nth-child(6) { transition-delay: 3.2s; }
.gallery-container img.is-visible:nth-child(7) { transition-delay: 3.6s; }
.gallery-container img.is-visible:nth-child(8) { transition-delay: 4.0s; }
.gallery-container img.is-visible:nth-child(9) { transition-delay: 4.4s; }

/*
   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;
}


/* sección Así diseño tu tattoo */
.reorder-gallery-section {
    clip-path: polygon(0% 5%, 100% 0%, 100% 92%, 0% 100%);
    position: relative;
	z-index: 3;  
    background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.2)), url('../images/fo-303.jpg');
    background-size: cover; /* contain */
    background-position: center;
    background-attachment: fixed; 
	margin-top: -50px; /* -200 */
	margin-right: 0;
	margin-bottom: 40px; /* 120 */
	margin-left: 0;
    /* padding: 120px 0 120px 0; */
    padding-top: 120px; 
	padding-right: 0;
	padding-bottom: 120px;
	padding-left: 0;

}

.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 */
}



/* rder rder rder rder sección */
.rder-gallery-section {
    clip-path: polygon(0% 5%, 100% 0%, 100% 92%, 0% 100%);
    position: relative;
	z-index: 3;  
    background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.2)), url('../images/fo-304.jpg');
    background-size: cover; /* cover */ /* contain */
    background-position: center;
    background-attachment: fixed; /* ¡El efecto Parallax! */
	margin-top: -200px;
	margin-right: 0;
	margin-bottom: 100px;
	margin-left: 0;
	
    /* padding: 120px 0 120px 0; */
    padding-top: 120px; 
	padding-right: 0;
	padding-bottom: 120px;
	padding-left: 0;
	
}

.rder-gallery-section h2 {
	margin-top: 0; /* Quitamos el margen superior si ya hay padding en la sección */
}

.rder-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 */
}

.rder-gallery img {
    width: 100%;
    height: auto;
    display: block; /* Buena práctica para eliminar espacios extra debajo de la imagen */
	clip-path: polygon(5% 5%, 100% 0%, 92% 92%, 0% 100%);
	position: relative;
    z-index: 1; 
}

.rder-parrafo {
    font-family: 'Boldonse', sans-serif;
	font-size: 0.8rem; /* Tamaño de letra intermedio */    
	font-weight: 300; 
		background-color: #ffffff;
    color: #000000;
	text-align: left;
    line-height: 2;
	    text-shadow: /* HORI VERT DESENFOQUE COLOR */
        /* -1px 1px 0px #000000, /*
        /* -3px 0px 0px #000000,*/
		-1px 1px 0px #dddddd;
		/* 1px -1px 0px #000000, /*
		/* -5px 5px 0px #dddddd; */
	margin-top: -10vw; /* -5vw */
    margin-right: 10%; 
	margin-bottom: 0px;
	margin-left: 3%; 
	padding-top: 5px;
	padding-right: 5%;
	padding-bottom: 5px;
    padding-left: 5%;
	
    max-width: 800px;
	position: relative;
    z-index: 2; 
}

.rder-segparrafo {
    font-family: 'Boldonse', sans-serif;
	font-size: 0.9rem; /* Tamaño de letra intermedio */    
	font-weight: 300; 
	/* background-color: #ffffff; */
    color: #ffffff;
	text-align: left;
    line-height: 2;
	    text-shadow: /* HORI VERT DESENFOQUE COLOR */
        /* -1px 1px 0px #000000, /*
        /* -3px 0px 0px #000000,*/
		-1px 1px 0px #000000;
		/* 1px -1px 0px #000000, /*
		/* -5px 5px 0px #dddddd; */
	margin-top: -1vw; /* -5vw */
    margin-right: 10%; 
	margin-bottom: 0px;
	margin-left: 3%; 
	padding-top: 5px;
	padding-right: 5%;
	padding-bottom: 5px;
    padding-left: 5%;
	
    max-width: 800px;
	position: relative;
    z-index: 2; 
}

.rder-terparrafo {
    font-family: 'Boldonse', sans-serif;
	font-size: 0.8rem; /* Tamaño de letra intermedio */    
	font-weight: 300; 
	background-color: rgba(255, 255, 255, 0.9);
    color: #000000;
    line-height: 2;
	    text-shadow: /* HORI VERT DESENFOQUE COLOR */
        -1px 1px 0px #dddddd;
        /* -3px 0px 0px #000000,*/
		/* -3px 3px 0px #dddddd, */
		/* 1px -1px 0px #000000, /*
		/* -5px 5px 0px #dddddd; */
	margin-top: -15%; /* -10vw */
	margin-right: 5%; 
	margin-bottom: 30px;		
    margin-left: 0%;
	
	padding-top: 5px;
	padding-right: 5%;
	padding-bottom: 5px;
	padding-left: 5%;

    max-width: 80%;  /* 800px */
		position: relative;
    z-index: 2; 

}


/* --- SECCIÓN: Footer --- */ /* VISTA MÓVIL */
.site-footer {
    background-color: #FF8C00; 
    color: #dddddd;
    padding: 5% 20px 140px 10%;
    text-align: center;
    clip-path: polygon(0 10%, 100% 0, 95% 90%, 10% 100%);
	background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3)), url('../images/fo-307.jpg');
    background-size: cover; /* cover */ /* contain */
    background-position: center;
    background-attachment: fixed;
	/* background-repeat: no-repeat; */
    margin-top: -25vw; 
	position: relative;
    z-index: 2;
}

.footer-content {
    max-width: 800px;
    margin: 10px auto;
	text-shadow: /* HORI VERT DESENFOQUE COLOR */
	-2px 2px 0px #000000;
	/* -3px 0px 0px #000000,*/
	/*-3px 3px 0px #dddddd,
	-4px 4px 0px #000000,
	-5px 5px 0px #dddddd;*/
}

.footer-logo {
    max-width: 150px;  /* Ajusta este tamaño a tu gusto, por ejemplo 150px */
    height: auto;      /* Mantiene la proporción de la imagen */
    display: block;    /* Ayuda a centrar la imagen y manejar los márgenes */
    margin: 60px auto 20px auto; /* 
    /* border-radius: 50%; Opcional: Hace que la imagen sea redonda, ¡puede quedar muy bien! */
	clip-path: polygon(2% 10%, 100% 0, 85% 90%, 0% 100%);
}
/* ESTAMOS EN VISTA MÓVIL */
.contact-text {
    font-size: 0.9rem;
	line-height: 1.5rem;
    font-weight: 300;
	margin-top: 20px;
    margin-bottom: 20px;
	text-align: center; /* Centra todo el texto */
	color: #ffffff;
	text-shadow: /* HORI VERT DESENFOQUE COLOR */
	-2px 2px 0px #000000;
	/* -3px 0px 0px #000000,*/
	/*-3px 3px 0px #dddddd,
	-4px 4px 0px #000000,
	-5px 5px 0px #dddddd;*/
}

.contact-text a{
	color: #ffffff;
	font-size: 1.1rem;
	line-height: 1.8rem;
}

.contact-text a:hover{
	color: #ffd700;
}
.contact-text a:visited{
	color: #ffffff;
}

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

}

.social-icons a {
    color: #ffffff;
	text-shadow: /* HORI VERT DESENFOQUE COLOR */
	-1px 1px 0px #000000;
    font-size: 1.9rem; /* Controla el tamaño del icono */
    transition: transform 0.6s ease-in-out;
}

.social-icons a:hover {
    transform: scale(1.3);
	color: #ffd700;
	text-shadow: /* HORI VERT DESENFOQUE COLOR */
	-2px 2px 0px #000000;
	
}

.copyright-text {
    font-size: 0.8rem;
	line-height: 1.5rem;
	color: #ffffff;
    margin: 0;
	text-shadow: /* HORI VERT DESENFOQUE COLOR */
	-1px 1px 0px #000000;
}


/* --- ESTILOS PARA ANIMACIONES DE ENTRADA (PARA MÓVIL) --- */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(100px);
    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 */
}
h2 {
    font-size: 2.3rem;
}	
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.4)), url('../images/fo-080.jpg'); /* fo-303 */
    background-size: cover; /* cover */ /* contain */
	background-repeat: no-repeat;
    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 */
	clip-path: polygon(0% 0%, 100% 0%, 97% 90%, 1% 100%); 
	padding: 20px 1% 120px 1%;/* 20px arriba/abajo, 5% a los lados */
	margin-top: 0px; /* aquí puedes poner más y se verá el fondo de la página */
	margin-bottom: 0px;

}

/*--- hero-image ---*/
.hero-image {
    width: 100%; 
	height: auto;
    display: block; /* Buena práctica para eliminar espacios */
	clip-path: polygon(2% 5%, 100% 0%, 95% 90%, 3% 100%); /* Un polígono simple para empezar */
	/* object-fit: cover;
    object-position: center; */
    margin-top: -20vw; /* 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) */
}

.main-paragraph {
	font-size: 1.7rem;
	line-height: 2.7rem;
	margin-left: 10%; /* Aumentamos el margen en pantallas grandes */
}
	
.caption {
    font-size: 2.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 */
}

.captionextra {
    font-size: 1.2rem;
    text-align: left;
	background-color: #ffffff;
    color: #000000;
	font-weight: 300; 
	    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 #bdbdbd;
	max-width: 95%;	
	position: relative;

    z-index: 2; /* Para que esté por encima de la imagen */
    margin-top: -20%; /* Margen negativo para "subirla" y que quede sobre la parte inferior de la imagen */
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 10%;
	padding-top: 5px;	
    padding-right: 5%;
	padding-bottom: 5px;
	padding-left: 10%;	
	
}.captionrextra {
    font-size: 1.2rem;
    text-align: left;
	background-color: #ffffff;
    color: #000000;
	font-weight: 300; 
	    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 #bdbdbd;
	max-width: 20%;	
	position: relative;

    z-index: 2; /* Para que esté por encima de la imagen */
    margin-top: -7%; /* Margen negativo para "subirla" y que quede sobre la parte inferior de la imagen */
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 2%;
	padding-top: 5px;	
    padding-right: 1%;
	padding-bottom: 5px; /* padding de interior de rectángulo blanco */
	padding-left: 1%;	
}

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

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

.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;
}

.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%);
}

.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 */
}

.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 */
}

.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; }


.rder-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 */
.rder-gallery > a:nth-of-type(1) { grid-column: 1; grid-row: 1; }
.rder-gallery > a:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.rder-gallery > a:nth-of-type(3) { grid-column: 3; grid-row: 1; }

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

.rder-parrafo {
    font-family: 'Boldonse', sans-serif;
	font-size: 0.6rem; /* Tamaño de letra intermedio */    
	font-weight: 300; 
		background-color: #ffffff;
    color: #000000;
	text-align: left;
    line-height: 2;
	    text-shadow: /* HORI VERT DESENFOQUE COLOR */
        /* -1px 1px 0px #000000, /*
        /* -3px 0px 0px #000000,*/
		-1px 1px 0px #dddddd;
		/* 1px -1px 0px #000000, /*
		/* -5px 5px 0px #dddddd; */
	margin-top: -10%; /* -5vw */
    margin-right: 2%; 
	margin-bottom: 0px;
	margin-left: 5%; 
	padding-top: 0px;
	padding-right: 5%;
	padding-bottom: 0px;
    padding-left: 0;

    max-width: 800px;
	position: relative;
    z-index: 2; 
}

.rder-terparrafo {
    font-family: 'Boldonse', sans-serif;
	font-size: 0.8rem; /* Tamaño de letra intermedio */    
	font-weight: 300; 
	background-color: rgba(255, 255, 255, 0.9);
    color: #000000;
    line-height: 1.2;
	    text-shadow: /* HORI VERT DESENFOQUE COLOR */
        -1px 1px 0px #dddddd;
        /* -3px 0px 0px #000000,*/
		/* -3px 3px 0px #dddddd, */
		/* 1px -1px 0px #000000, /*
		/* -5px 5px 0px #dddddd; */
	margin-top: -15%; /* -10vw */
	margin-right: 5%; 
	margin-bottom: 0;		
    margin-left: 10%;
	
	padding-top: 2%;
	padding-right: 5%;
	padding-bottom: 0;
	padding-left: 5%;

    max-width: 80%;  /* 800px */
		position: relative;
    z-index: 2; 

}

/*--- MÁS TRABAJOS - GALERÍA DE LAS 9 IMÁGENES, AQUÍ EN VISTA ORDENADOR, FORMAN UNA TIRA LARGA ---*/
.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;
}

/* --- SECCIÓN: Footer --- */ /* VISTA ORDENADOR */
.site-footer {
    /* ¡CAMBIO DE COLOR! Fondo naranja oscuro */
    background-color: #FF8C00; /* naranja oscuro */
	padding: 1% 10% 5% 10%; 
	width: 60%;
	margin: -10vw auto 0 auto;
}

.footer-content {
    max-width: 800px; /* Evita que el contenido se estire demasiado en pantallas anchas */
    margin: 0 auto; /* Centra el contenedor del contenido */
}
/* estamos en VISTA ORDENADOR */
.contact-text {
    font-size: 1.5rem;
	line-height: 2.4rem;
    margin-bottom: 20px;
	/* text-shadow: /* lo mismo que en móvil */ /* HORI VERT DESENFOQUE COLOR */
	/* -2px 2px 0px #000000;
	/* -3px 0px 0px #000000,*/
	/*-3px 3px 0px #dddddd,
	-4px 4px 0px #000000,
	-5px 5px 0px #dddddd;*/
}


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

.social-icons a {
    font-size: 2.2rem; /* Controla el tamaño del icono */
    transition: transform 0.6s ease-in-out;
}

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

.copyright-text {
    font-size: 1.1rem;
	line-height: 1.7rem;
}



/* --- ESTILOS PARA ANIMACIONES DE ENTRADA PARA ORDENADOR . PARA VISTA MÓVIL TIENE LAS SUYAS ANTES DE LÍNEA 868 --- */

/* Clase para el estado inicial de la animación "Fade In + Slide Up" */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(100px);
    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;
}
}