/* ---
   1. CARGA LOCAL DE GOOGLE FONTS Y VARIABLES GLOBALES
--- */

/* anonymous-pro-regular - latin */
@font-face {
  font-family: 'Anonymous Pro';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/anonymous-pro-v11-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Anonymous Pro Regular'), local('AnonymousPro-Regular'),
       url('fonts/anonymous-pro-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/anonymous-pro-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/anonymous-pro-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/anonymous-pro-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/anonymous-pro-v11-latin-regular.svg#AnonymousPro') format('svg'); /* Legacy iOS */
}

/* anonymous-pro-italic - latin */
@font-face {
  font-family: 'Anonymous Pro';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/anonymous-pro-v11-latin-italic.eot'); /* IE9 Compat Modes */
  src: local('Anonymous Pro Italic'), local('AnonymousPro-Italic'),
       url('fonts/anonymous-pro-v11-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/anonymous-pro-v11-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/anonymous-pro-v11-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/anonymous-pro-v11-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/anonymous-pro-v11-latin-italic.svg#AnonymousPro') format('svg'); /* Legacy iOS */
}

/* anonymous-pro-700 - latin */
@font-face {
  font-family: 'Anonymous Pro';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/anonymous-pro-v11-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Anonymous Pro Bold'), local('AnonymousPro-Bold'),
       url('fonts/anonymous-pro-v11-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/anonymous-pro-v11-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/anonymous-pro-v11-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/anonymous-pro-v11-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/anonymous-pro-v11-latin-700.svg#AnonymousPro') format('svg'); /* Legacy iOS */
}

/* anonymous-pro-700italic - latin */
@font-face {
  font-family: 'Anonymous Pro';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/anonymous-pro-v11-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local('Anonymous Pro Bold Italic'), local('AnonymousPro-BoldItalic'),
       url('fonts/anonymous-pro-v11-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/anonymous-pro-v11-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/anonymous-pro-v11-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/anonymous-pro-v11-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/anonymous-pro-v11-latin-700italic.svg#AnonymousPro') format('svg'); /* Legacy iOS */
}

/* flamenco-300 - latin */
@font-face {
  font-family: 'Flamenco';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/flamenco-v8-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Flamenco Light'), local('Flamenco-Light'),
       url('fonts/flamenco-v8-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/flamenco-v8-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/flamenco-v8-latin-300.woff') format('woff'), /* Modern Browsers */
       url('fonts/flamenco-v8-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/flamenco-v8-latin-300.svg#Flamenco') format('svg'); /* Legacy iOS */
}

/* flamenco-regular - latin */
@font-face {
  font-family: 'Flamenco';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/flamenco-v8-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Flamenco Regular'), local('Flamenco-Regular'),
       url('fonts/flamenco-v8-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/flamenco-v8-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/flamenco-v8-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/flamenco-v8-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/flamenco-v8-latin-regular.svg#Flamenco') format('svg'); /* Legacy iOS */
}

/* trykker-regular - latin */
@font-face {
  font-family: 'Trykker';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/trykker-v6-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Trykker Regular'), local('Trykker-Regular'),
       url('fonts/trykker-v6-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/trykker-v6-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/trykker-v6-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/trykker-v6-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/trykker-v6-latin-regular.svg#Trykker') format('svg'); /* Legacy iOS */
} 


:root {
    --color-texto: #555555;
    --color-acento: #141414; /* Negro/Gris muy oscuro */
    --color-blanco: #ffffff;
    --color-fondo-footer: #1a1a1a;
    --color-fondo-blanco: #ffffff;
	--color-fondo-gris: #e6e6e6;
	--color-fondo-claro: #f0f0f0;
	
	--alto-cabecera-desktop: 164px;
    
    --fuente-cuerpo: 'Trykker', serif;
    --fuente-titulos: 'Trykker', serif;
	--fuente-titulos-2: 'Flamenco';
    --fuente-subtitulos: 'Flamenco', cursive;	
    --fuente-subtexto: 'Anonymous Pro', monospace;
}

/* ---
   2. RESET BÁSICO Y ESTILO DE BODY (CUERPO)
--- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html { scroll-behavior: smooth; }
body {
    font-family: var(--fuente-cuerpo);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-texto);
    background-image: url('img/ricepaper.png');
    background-repeat: repeat;
}

/* Espaciado para subpáginas (que no tienen hero) */
main {
	/* Mantenemos este padding SOLO para subpáginas */
    padding-top: var(--alto-cabecera-desktop);
}
body.pagina-inicio main {
    padding-top: 0;
}
body.pagina-inicio .contenido-principal {
    position: relative;
    z-index: 2; 
}


img, iframe { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
    font-family: var(--fuente-titulos);
    font-weight: 700;
    color: var(--color-acento);
	line-height: 120%;
    margin-bottom: 1rem;
}
h3, h4 { font-family: var(--fuente-subtitulos); }

/* --- 3. CABECERA --- */

.cabecera { /* Para cualquier página */
    width: 100%;
    padding: 0.1rem 0 0.1rem;
    color: var(--color-acento);
    /* border-bottom: 2px solid rgba(0,0,0,0.1); Borde sutil */
	margin: 0 auto;
	background-color: transparent; /* Transparente sobre el hero */
    border-bottom: none; /* Sin borde */
    /* Esta no tiene que flotar sobre el hero */
    position: relative;
    top: 0;
    left: 0;
    right: 0;
	z-index: 100;	
}

.cabecera-portada { /*Solo para portada (index) */
    width: 100%;
    padding: 0.1rem 0 0.1rem;
    color: var(--color-acento);
	margin: 0 auto;
	background-color: transparent; /* Transparente sobre el hero */
    border-bottom: none; /* Sin borde */
    /* Lo hacemos flotante sobre el hero, pero no fijo */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
	z-index: 100;
	filter: invert(100%); /* Elementos en blanco para portada */
}

.cabecera-contenedor {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap; /* CRUCIAL: Permite que los elementos pasen a una nueva fila */
    align-items: center;
    justify-content: center; /* Se centra el contenido al bajar de fila */
    gap: 0.5rem; /* Espacio entre los elementos */
}

/* 1. Logo: evitamos que se encoja */
.cabecera-logo {
    flex-shrink: 0;
}

.logo { 
    width: 300px; 
    height: 120px; 
    transition: transform 0.2s ease; /* Transición para hover/active */
}

/* 2. Enlaces de Navegación: Ocupan el espacio central disponible, luego envuelven */
.cabecera-nav-principal {
    display: flex;
	margin-top: auto;
	padding: 0 1rem 1rem 0.3rem;
    gap: 2rem;
}
        
/* 3. Iconos Sociales: Se empujan a la derecha del todo en desktop. */
.cabecera-iconos-sociales {
    display: flex;
    align-items: center;
	margin-top: auto;
	padding: 0 0 1rem 0;
    gap: 1.5rem;
    flex-shrink: 0; /* Evita que se encoja */
}

.icono-social {
    width: 1.7rem; /* Ajustar tamaño si es necesario */
    height: 1.7rem;
    transition: transform 0.2s ease; /* Transición para hover/active */
}


/* --- 4. LÓGICA DE COLOR DE CABECERA (Simplificada) --- */
/* Texto siempre negro (se invierte en cabecera-portada */
.cabecera a, .cabecera-portada a {
    color: var(--color-acento); 
    text-decoration: none;
    font-family: var(--fuente-titulos);
    font-weight: 700; /* Textos en negrita */
    text-transform: uppercase;
    font-size: 1rem;
    transition: transform 0.2s ease, color 0.2s ease;
}


/* --- 5. EFECTOS INTERACTIVOS (Unificados) --- */
/* Hover: Escalar */
.cabecera-contenedor a:hover {
    transform: scale(1.1);
    text-decoration: none; /* Sin subrayado */
}
/* Para el logo, evitamos que el 'a' cambie de color */
.cabecera-logo a:hover {
    color: var(--color-acento);
}

/* Active */
.cabecera-contenedor a:active,
.cabecera-logo a:active .logo,
.cabecera-contenedor a:focus,
.cabecera-logo a:focus .logo {
    transform: scale(1);
}

/* --- 6. PORTADA (HERO PARALLAX) --- */
.hero {
    height: 100vh;
    min-height: 700px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    background-size: 100vh;
    background-position: center;
    position: relative;
    padding: 2.5rem;
    z-index: 1; 
}
/* Pseudo-elemento para el fondo de imagen y el filtro de brillo */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Aplicamos la imagen y el efecto parallax */
    background-image: url('img/fondo_tablas.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* El filtro solo al fondo */
    filter: brightness(55%);
	z-index: -1; /* Fondo detrás del contenido */
}
.hero-contenido {
	/* Aseguramos que el contenido esté por encima del pseudo-elemento */
    position: relative;
    z-index: 2;
	margin-top: 4rem;
}
.hero-contenido h1 {
	color: white;
	font-size: 3.1rem;
}
.hero-contenido p {
	font-family: var(--fuente-cuerpo);
	font-size: 1.2rem;
}
.hero-subtexto {
	position: absolute; /* Se libera del flujo normal */
    bottom: 15%;        /* Se coloca a un % desde el borde inferior */    
    left: 0;            /* Ocupa todo el ancho... */
    width: 100%;        /* ...para poder centrar el texto */
	font-family: var(--fuente-subtexto);
	font-weight: 700;
	font-size: 1.25rem;
    padding: 1rem;
}
.hero-chevron-bajar {
    position: absolute;
    bottom: 4rem; /* Distancia desde el borde inferior */
    left: 50%;    /* Lo mandamos al centro */    
    /* Centrado exacto y preparación para la animación */
    transform: translateX(-50%);    
    /* Transición suave para el movimiento */
    transition: transform 0.3s ease-in-out;    
    z-index: 20; /* Para asegurar que esté encima de la foto y sea clickeable */
    cursor: pointer;
	filter: invert(100%);
}
.hero-chevron-bajar img {
    width: 2rem; /* Tamaño del icono png */
    height: auto;
    display: block; /* Elimina espacios fantasma debajo de la imagen */
}
/* --- LA ANIMACIÓN AL PASAR EL RATÓN --- */
.hero-chevron-bajar:hover {
    /* Importante: Mantenemos el translateX(-50%) para que no se descuadre, y añadimos translateY(10px) para que baje un poco */
    transform: translateX(-50%) translateY(10px);
}
	
/* --- 7. CONTENIDO GENERAL Y GALERÍA --- */

.contenido-normal {
    max-width: 1000px;
    margin: 0 auto;
    background-color: transparent;
    position: relative;
    z-index: 2;
    padding: 3rem;
	text-align: justify;
}
.contenido-normal p { padding-bottom: 1rem; }

.portada-centrado, .normal-centrado {
    max-width: 1000px;
    margin: 0 auto;
    background-color: transparent;
	color: var(--color-texto);
	text-align: center;
	justify-content: center;
    position: relative;
    z-index: 2;
    padding: 1rem;
}
.portada-centrado h2 { font-size: 2rem; margin: 3rem 0 2rem; }
.normal-centrado h2 { font-size: 1.8rem; margin: 1.2rem 0 2rem; }
.portada-centrado h3, .normal-centrado h3 { font-family: var(--fuente-titulos); font-size: 1.5rem; }
.portada-centrado a, .normal-centrado a { color: var(--color-texto); text-decoration: none; text-align: center;}
.portada-centrado p, .normal-centrado p { color: var(--color-texto); text-decoration: none; text-align: justify; }
.portada-centrado img, .normal-centrado img { width: 2rem; height:auto; margin: 1rem auto; filter: invert(30%); }

/* Margen inferior o superior para secciones, bloques, divisiones */
.mb {margin-bottom: 1rem; }
.mt {margin-top: 1rem; }

/* --- SECCIONES --- */

/* -- Sección Ventajas -- */
/* --- CONTENEDOR FLEX (Por defecto: 4 columnas) --- */
.ventajas-bloques {
    display: flex;
    flex-wrap: wrap; /* Permite que los bloques salten a la siguiente fila */
	justify-content: center;
    gap: 4%; /* Espacio entre los bloques */
}
/* Estilo de cada bloque (Son enlaces <a>) */
.ventaja-bloque {    
    flex-basis: calc(20%); /* 25% menos algo de margen para 4 en fila */
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.ventaja-bloque:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transform: translateY(-5px); /* Pequeño efecto al pasar el ratón */
}

/* -- Sección fondo gris y fondo oscuro -- */
.bloque-fondo-gris {
	background-color: var(--color-fondo-gris) !important;
	margin: 0 auto;
	padding: 2rem 1rem;
	display: flex; /* Para lograr la división 50-50 y la adaptabilidad */
	flex-wrap: wrap; /* Permite que los elementos salten a una nueva línea si no caben */
    align-items: center; /* Centra los elementos verticalmente (texto e imagen) */
	justify-content: center; /* Centra los elementos horizontalmente (texto e imagen) */
}
.bloque-sin-fondo {
	background-color: transparent !important;
	margin: 0 auto;
	padding: 2rem 1rem;
	display: flex; /* Para lograr la división 50-50 y la adaptabilidad */
	flex-wrap: wrap; /* Permite que los elementos salten a una nueva línea si no caben */
    align-items: center; /* Centra los elementos verticalmente (texto e imagen) */
	justify-content: center; /* Centra los elementos horizontalmente (texto e imagen) */
}
.bloque-fondo-gris-contenido {    
    max-width: 550px;
	flex: 1 1 50%; /* flex-grow: 1, flex-shrink: 1, flex-basis: 50% */
    min-width: 300px; /* Evita que se encoja demasiado antes de saltar */
	font-family: var(--fuente-cuerpo); /* Para que rem funcione establecemos fuente y tamaño */
    font-size: 16px;
	padding: 0 0.8rem;
 }
.bloque-fondo-gris-contenido img {
    /* Para el 50% de ancho en escritorio */
    flex: 1 1 50%; /* flex-grow: 1, flex-shrink: 1, flex-basis: 50% */
    /* La imagen debe ocupar el ancho de su contenedor 50% */
    width: 100%;
    height: auto;
    object-fit: cover; /* Para asegurar que la imagen cubra bien el espacio */
    min-width: 300px; /* Asegura que la imagen no se encoja demasiado */
	padding-right: 0.3rem;
	filter: brightness(105%);
}
.bloque-fondo-gris-contenido p { margin-bottom: 1rem; }
.bloque-fondo-gris-contenido p:last-child { margin-bottom: 0; }
.bloque-fondo-gris-titulo {	
    font-family: var(--fuente-titulos-2);
	font-weight: 700;
	font-size: 1.8rem;
	text-transform: uppercase;
	line-height: 120%;
	text-align: center;
	padding-bottom: 1rem;
}
.bloque-fondo-gris-texto {	
	font-family: var(--fuente-cuerpo);
	font-size: 1rem;
	font-weight: normal;
	line-height: 150%;
	text-transform: none;
	text-align: justify;
	margin: 1rem auto;
}
.bloque-fondo-oscuro {
	background-color: #262626 !important;
	margin: 0;
	padding: 0;
}
.bloque-fondo-oscuro-contenido {    
    max-width: 800px;
	font-family: var(--fuente-subtexto); /* Para que rem funcione establecemos fuente y tamaño */
    font-size: 16px;
	color: var(--color-blanco);
    margin: 0 auto; /* Centra este bloque contenedor */	
	padding: 3rem;
 }
.bloque-fondo-oscuro-titulo {	
    font-family: var(--fuente-titulos);
	font-weight: 700;
	font-size: 1.7rem;
	font-style: italic;
	color: inherit;
	text-align: center;
	line-height: 140%;
}
.bloque-fondo-oscuro-texto {	
	font-family: var(--fuente-subtexto);
	font-size: 1.1rem;
	font-weight: normal;
	line-height: 180%;
	text-transform: none;
	text-align: center;
}
	
/* -- ICONO SEPARADOR -- */
.contenido-normal img.icono-separador,
.normal-centrado img.icono-separador,
.bloque-fondo-gris-contenido img.icono-separador,
.bloque-sin-fondo img.icono-separador,
.bloque-fondo-oscuro img.icono-separador {    
    /* 1. RESETEAMOS EL TAMAÑO (Crucial) */
    width: 60px !important; /* El tamaño que queramos para el icono */
    min-width: 0 !important; /* Esto anula el min-width: 300px antes */
    height: auto !important;    
    /* 2. RESETEAMOS FLEXBOX */
    flex: none !important; /* Evita que intente crecer para ocupar el 50% */    
    /* 3. CENTRADO */    display: block;
    margin: 0 auto 1.5rem auto; /* Arriba 0, Auto lados (centra), Abajo 1.5rem */    
    /* 4. LIMPIEZA EXTRA */
    padding: 0;
    filter: none; /* Quitamos el brillo que tienen las fotos grandes */
}
.bloque-vertical { display: block; width: 100%; /* para asegurar texto centrado o normal */ }


/* --- SECCIÓN ÁLBUM --- */

/* 1. Contenedor Principal */
.album-seccion {
    max-width: 1200px;
    margin: 4rem auto;
    padding: 0 2rem;
}
/* 2. Cuadrícula de Álbumes (Mejorada para parecerse a la web actual) */
.galeria-grid {
    display: grid;
    /* 3 columnas en escritorio, se adapta solo a móvil */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
    gap: 2.5rem; /* Más aire entre elementos */
    margin-top: 3rem;
}
/* 3. Tarjeta de cada Álbum */
.galeria-grid-item {
    background: var(--color-blanco);
    border-radius: 4px; /* Bordes menos redondeados para seguir estilo minimalista */
    overflow: hidden;
    transition: all 0.4s ease;
    border: 1px solid #f0f0f0; /* Borde sutil */
}
.galeria-grid-item a {
    text-decoration: none;
    color: inherit;
    display: block;
}
/* Imagen de portada del álbum */
.galeria-grid-item img {
    width: 100%;
    aspect-ratio: 3 / 2.5; /* Cuadradas perfectas como en los mejores portfolios */
    object-fit: cover;
    display: block;
    filter: grayscale(20%); /* Un toque artístico sutil */
    transition: all 0.6s ease;
}
/* 4. Textos debajo de la foto */
.galeria-grid-item-info {
    padding: 1.5rem;
    text-align: center;
}
.galeria-grid-item h3 {
    font-family: var(--fuente-titulos); /* Usamos la serif de tu web */
    font-size: 1.4rem;
    color: var(--color-texto);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}
.galeria-grid-item p {
    font-family: var(--fuente-subtexto);
    font-size: 0.9rem;
    color: #888; /* Un gris suave para el lugar/fecha */
    font-style: italic;
}
/* 5. Efecto Hover (Sutil y elegante) */
.galeria-grid-item:hover {
    transform: scale(1.02);
    box-shadow: 0 15px 30px rgba(0,0,0,0.05); /* Sombra muy suave */
}
.galeria-grid-item:hover img {
    filter: grayscale(0%);
    transform: scale(1.02);
}
/* 6. Botón Ver Álbum (Opcional, si quieres añadir uno dentro) */
.btn-ver-mas {
    display: inline-block;
    margin-top: 1rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom: 1px solid var(--color-acento);
    padding-bottom: 2px;
    color: var(--color-texto);
}


/* --- ESTILOS CONTACTO --- */
.contacto-contenedor {
    display: flex;
    flex-wrap: wrap; /* Para que en móvil se apilen */
    gap: 2.5rem;
    margin-top: 3rem;
    text-align: left;
}
.contacto-datos, .contacto-mapa {
    flex: 1; /* Dos columnas iguales */
    min-width: 300px;
}
.contacto-item { margin-bottom: 2.5rem; }
.contacto-item .etiqueta {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}
.dato-linea {
    display: flex;
    align-items: center;
    gap: 1rem;
	flex-wrap: wrap;
}
.dato-linea h3 {
	margin: 0;
	font-family: var(--fuente-titulos);
	white-space: nowrap;
}
.grupo-iconos { display: flex; gap: 0.6rem; white-space: nowrap; }
/* Ajuste Mapa */
.contacto-mapa img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: inline-block;
	filter: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.contacto-mapa p {text-align: center; }
.contacto-mapa a {font-weight: 700; }


/* --- 8. BOTONES --- */

/* Botón Borde blanco y cambia a fondo blanco (p en Hero) */
.boton-borde-blanco {
	border: 0.1rem solid white;
	margin-top: 1.5rem;		
	padding: 1rem;
	display: inline-block;
	cursor: pointer;
	transition: background-color 0.3s ease, border-color 0.3s ease;
}
/* Enlace interno: debe ser de bloque para rellenar el padding y definir el color de texto por defecto */
.boton-borde-blanco a,
.boton-borde-blanco a:visited { /* A:visited se iguala al estado normal */
/* El texto es blanco por defecto (hereda del hero, pero lo forzamos por seguridad) */
    color: white; 
    text-decoration: none;
    display: block; /* Ocupa el 100% del contenedor padre */
    line-height: 1; /* Asegura la correcta alineación vertical del texto */
    /* Se añade transición para suavizar el cambio de color del texto */
    transition: color 0.3s ease;
}
/* Efecto Hover/Active/Focus en el CONTENEDOR completo */
.boton-borde-blanco:hover,
.boton-borde-blanco:active,
.boton-borde-blanco:focus-within {
    background-color: white; /* FONDO BLANCO EN TODO EL BOTÓN */
    border-color: white; /* Opcional: mantiene el color del borde como blanco (o lo oculta) */
}
/* Cambio de color del TEXTO cuando el CONTENEDOR está en hover/active/focus */
.boton-borde-blanco:hover a,
.boton-borde-blanco:active a,
.boton-borde-blanco:focus-within a {
    color: var(--color-acento); /* TEXTO NEGRO (o color acento) */
}

/* Botón Borde negro y cambia a fondo negro (para secciones en gris o blanco) */
.boton-borde-negro {
	border: 0.1rem solid black;
	margin-top: 1.5rem;		
	padding: 1rem;
	display: inline-block;
	cursor: pointer;
	transition: background-color 0.3s ease, border-color 0.3s ease;
}
/* Enlace interno: debe ser de bloque para rellenar el padding y definir el color de texto por defecto */
.boton-borde-negro a,
.boton-borde-negro a:visited { /* A:visited se iguala al estado normal */
/* El texto es negro por defecto, pero lo forzamos por seguridad */
    color: black; 
    text-decoration: none;
    display: block; /* Ocupa el 100% del contenedor padre */
    line-height: 1; /* Asegura la correcta alineación vertical del texto */
    /* Se añade transición para suavizar el cambio de color del texto */
    transition: color 0.3s ease;
}
/* Efecto Hover/Active/Focus en el CONTENEDOR completo */
.boton-borde-negro:hover,
.boton-borde-negro:active,
.boton-borde-negro:focus-within {
    background-color: black; /* FONDO NEGRO EN TODO EL BOTÓN */
    border-color: black; /* Opcional: mantiene el color del borde como negro (o lo oculta) */
}
/* Cambio de color del TEXTO cuando el CONTENEDOR está en hover/active/focus */
.boton-borde-negro:hover a,
.boton-borde-negro:active a,
.boton-borde-negro:focus-within a {
    color: var(--color-blanco); /* TEXTO BLANCO (o color acento) */
}

/* Botón Fondo negro y cambia a blanco (para secciones en blanco o transparentes) */
.boton-fondo-negro {
	border: 0.1rem solid black;
	background-color: black;
	margin-top: 1rem;		
	padding: 0.9rem 1.1rem;
	display: inline-block;
	font-family: var(--fuente-subtexto);
	font-weight: 400;
	font-size: 1.2rem;
	cursor: pointer;
	transition: background-color 0.3s ease, border-color 0.3s ease;
}
/* Enlace interno: debe ser de bloque para rellenar el padding y definir el color de texto por defecto */
.boton-fondo-negro a,
.boton-fondo-negro a:visited { /* A:visited se iguala al estado normal */
    color: white; 
    text-decoration: none;
    display: block; /* Ocupa el 100% del contenedor padre */
    line-height: 1; /* Asegura la correcta alineación vertical del texto */
    /* Se añade transición para suavizar el cambio de color del texto */
    transition: color 0.3s ease;
}
/* Efecto Hover/Active/Focus en el CONTENEDOR completo */
.boton-fondo-negro:hover,
.boton-fondo-negro:active,
.boton-fondo-negro:focus-within {
    background-color: white; /* FONDO NEGRO EN TODO EL BOTÓN */
    border-color: black; /* Opcional: mantiene el color del borde como negro (o lo oculta) */
}
/* Cambio de color del TEXTO cuando el CONTENEDOR está en hover/active/focus */
.boton-fondo-negro:hover a,
.boton-fondo-negro:active a,
.boton-fondo-negro:focus-within a {
    color: var(--color-acento); /* TEXTO casi negro, color acento */
}


/* --- 9. CONTACTO Y FOOTER --- */

.footer-principal {
    background-color: var(--color-fondo-footer);
    color: #999;
    padding: 1.5rem;
    position: relative;
    z-index: 2;
}
.footer-frase { 
	max-width: 1100px;
	margin: 0.5rem auto;
	padding-top: 0.5rem;
	text-align: left;
	border-top: 1px solid #444;
	border-bottom: 1px solid #444;
	justify-content:center;
}
.footer-frase h2 { font-family: var(--fuente-subtexto); color: var(--color-blanco); font-style: italic; }
.footer-contenedor {
    max-width: 1100px;
    margin: 1.5rem auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, max-content));
	justify-content: center; /* Alinea el grupo de columnas al centro del contenedor */
    gap: 3rem;
}
.footer-columna h3 {
    font-family: var(--fuente-subtitulos);
    color: var(--color-blanco);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}
.footer-columna p { 
	display: flex; /* Convierte el párrafo en un contenedor flexible */
    align-items: center; /* Centra verticalmente el texto junto a la imagen */
    gap: 0.5rem; /* Espacio entre la imagen y el texto dentro del <p> */
    margin-bottom: 0.5rem;
    line-height: 1.7;
}
.footer-columna img { 
	filter: invert(100%);
	width: 1rem;
	height: auto;
}
.footer-enlaces a {
    color: var(--color-blanco);
    text-decoration: none;
    margin-right: 1rem;
}
.footer-copyright {
    text-align: center;
    max-width: 1100px;
    margin: 0 auto;
    font-size: 0.9rem;
}
.footer-copyright a {
    color: var(--color-blanco);
    text-decoration: none;
}

/* --- 10. RESPONSIVE (MEDIA QUERIES) --- */
@media (max-width: 768px) {
 
 html { font-size: 15px; } /* 1rem = 14px */

 .cabecera-contenido { margin: 0 auto; }
 .cabecera-logo { order: 0; /* El logo siempre va primero */ }
 .cabecera-nav-principal,
 .cabecera-iconos-sociales {
 /* Cuando envuelven (wrap), ocupan todo el ancho y se centran para un mejor aspecto móvil */
    flex-basis: 100%;
    justify-content: center;
    margin: 0 auto;
    order: 1; /* El nav debe ir antes que los iconos en móvil */
 }
 .cabecera-iconos-sociales { order: 2; /* Los iconos van al final */ }
 
   /* AJUSTES PARA HERO EN MÓVIL */
 .hero-contenido h1 { font-size: 1.8rem; /* Reducimos el tamaño en móvil para que encaje mejor */ }
 .hero-subtexto { font-size: 1rem; /* Igual, reducimos en móvil */ }
 .hero::before { background-size: cover; /* Quitamos el zoom de la imagen del hero en mvl */ }
 .boton-borde-blanco p, .boton-borde-negro p, .boton-fondo-negro p { margin: 0.5rem; font-size: 1rem !important; }
 
 /* Ajustes de contenido */
 .contenido-normal, .galeria-scrollsnap, .bloque-fondo-oscuro-contenido, .bloque-fondo-negro-contenido {
    padding: 1.5rem;
 }
 .galeria-contenedor {
    grid-auto-columns: 90%; 
 }
}

/* ADAPTACIÓN 4 BLOQUES HORIZONTALES */
@media (max-width: 1000px) {
	.ventaja-bloque { flex-basis: calc(35%); } /* Para 2: 50% menos el espacio entre ellos */
}
@media (max-width: 600px) {
    .ventaja-bloque { flex-basis: 90%; } /* Para 1 columna: 100% de ancho */
}



/* --- NUEVOS ESTILOS SERVICIOS ZIG-ZAG (IMAGEN 35% / TEXTO 65%) --- */

/* 1. Contenedor de la fila */
.servicio-fila {
    display: flex;
    flex-wrap: wrap; /* Para que en móvil caiga uno debajo de otro */
    width: 100%;
    max-width: 1100px; /* Ancho máximo igual al resto de la web */
    margin: 0 auto 1rem; /* Separación entre filas */
    align-items: stretch; /* CLAVE: Estira ambos hijos a la misma altura */
    background-color: transparent; /* Deja ver el ricepaper */
}

/* 2. Columna Imagen (35%) */
.servicio-col-imagen {
    position: relative; /* Para poder posicionar el texto encima */
    width: 35%;
    overflow: hidden; /* Para que la imagen no se salga */
    
    /* Flex para centrar el recuadro del título */
    display: flex;
    align-items: stretch;
    justify-content: center;
}

/* La imagen de fondo */
.servicio-col-imagen img {
    position: absolute;
    top: 0 !important; /* CLAVE para alinear al borde superior */
    left: 0;
    width: 100%;
    height: 100%;
	display: inline; /* Anulamos display block global */
	margin: 0 !important; /* Anulamos cualquier margen, como el de .normal-centrado img */
    object-fit: cover; /* Recorta la imagen para llenar el hueco sin deformar */
    z-index: 1;
    filter: brightness(0.7); /* Oscurece un poco la foto para que se lea el texto */
    transition: transform 0.5s ease;
}

/* Efecto zoom suave al pasar el ratón */
.servicio-fila:hover .servicio-col-imagen img {
    transform: scale(1.05);
}

/* 3. El recuadro del título (Overlay) */
.servicio-overlay-titulo {
    position: absolute;
    z-index: 2; /* Encima de la imagen */
    border: 1px solid #ffffff; /* Borde blanco */
	top: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    padding: 0 1.5rem 0.75rem;
    text-align: center;
    color: #ffffff; /* Texto blanco */
	background-color: rgba(0,0,0,0.3);
}

.servicio-overlay-titulo h2 {
    color: #ffffff !important; /* Forzamos blanco */
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* Sombra para legibilidad */
}

.servicio-overlay-titulo strong {
    display: block;
    font-family: var(--fuente-cuerpo);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
	line-height: 1.5rem;
}

/* 4. Columna Texto (70%) */
.servicio-col-texto {
    width: 65%;
    padding: 1rem; /* Espaciado alrededor del texto principal */
    
    /* Centrado vertical del contenido */
    display: flex;
    flex-direction: column;
    justify-content: center; 
    
    /* Fondo para el texto principal */
    background-color: var(--color-fondo-gris); 
}

/* 5. Inversión (Zig-Zag) */
/* En escritorio, filas pares se invierten */
@media (min-width: 900px) {
    .servicio-fila.invertido {
        flex-direction: row-reverse;		
    }
	.servicio-col-texto.invertido {
		background-color: var(--color-fondo-claro) !important; /* Filas pares con fondo blanco para texto */
	}
	.servicio-overlay-titulo.invertido {
		top: auto !important;
		bottom: 1.5rem;
	}
}

/* 6. RESPONSIVE (Móvil) */
@media (max-width: 899px) {
    .servicio-col-imagen, 
    .servicio-col-texto {
        width: 100%; /* Ocupan todo el ancho */
    }
    .servicio-col-imagen {
        min-height: 200px; /* Altura fija en móvil para la imagen */
    }
    .servicio-col-texto {
        padding: 2rem 1.5rem;
    }
	.servicio-overlay-titulo.invertido {
		top: auto !important;
		bottom: 1.5rem;
	}
}


/* ESTILOS PREGUNTAS FRECUENTES (Acordeón) */
.faq-seccion {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1rem;
}
/* Estilo de cada pregunta cerrada */
details {
    background-color: var(--color-fondo-blanco);
    margin-bottom: 1rem;
    border-bottom: 1px solid #ccc;
    padding: 1.5rem 1rem;
    transition: all 0.3s ease;
}
/* Estilo cuando la pregunta está abierta */
details[open] {
    background-color: #f9f9f9; /* Un fondo muy sutil al abrir */
    border-bottom: 1px solid var(--color-acento);
}
/* El título de la pregunta (donde se hace clic) */
summary {
    font-family: var(--fuente-titulos);
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    list-style: none; /* Oculta el triángulo por defecto */
    position: relative;
    padding-right: 2rem; /* Espacio para el icono + */
    color: var(--color-acento);
}
/* Efecto hover en el título */
summary:hover {
    opacity: 0.7;
}
/* El icono personalizado (+) */
summary::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1;
}
/* El icono cambia a (-) cuando está abierto */
details[open] summary::after {
    content: '-';
}
/* Ocultar flecha por defecto en Chrome/Safari */
summary::-webkit-details-marker {
    display: none;
}
/* El texto de la respuesta */
.faq-respuesta {
    margin-top: 1rem;
    font-family: var(--fuente-cuerpo);
    color: var(--color-texto);
    line-height: 1.6;
    font-size: 1rem;
    padding-left: 0;
    animation: aparecerSuave 0.5s ease;
}
/* Pequeña animación al abrir */
@keyframes aparecerSuave {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}