/* --- CONFIGURACIÓN GENERAL Y VARIABLES --- */
* {
box-sizing: border-box;
}
:root {
--primary-color: #249b95;
--secondary-color: #f0c516;
--dark-color: #242c3f;
--light-color: #cccac3;
--consultas-color: #9C89B8;
--contenido-color: #E14D7B;
--text-light: #f4f4f4;
--text-dark: #333;
}
@font-face { font-family: 'Segoe'; src: url('fonts/segoeui.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Segoe'; src: url('fonts/segoeuib.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Segoe'; src: url('fonts/segoeuii.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Lemon Milk'; src: url('fonts/LEMONMILK-Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lemon Milk'; src: url('fonts/LEMONMILK-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lemon Milk'; src: url('fonts/LEMONMILK-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
/* --- NUEVA ESTRUCTURA PARALLAX --- */
html, body {
margin: 0;
padding: 0;
width: 100%;
background-color: #FAFAFA; /* Fondo gris claro general */
}
/* --- AÑADIR ESTAS REGLAS --- */
/* El contenedor del fondo fijo */
#fixed-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: -1; /* Lo envía detrás de todo */
background-image: url('img/imagen-fondo.jpg'); /* Tu imagen de fondo principal */
background-size: cover;
background-position: center center;
will-change: transform; /* Le avisa al navegador que lo vamos a animar */
}
/* El envoltorio de todo el contenido que se desplaza */
#content-wrapper {
position: relative;
z-index: 1; /* Se asegura que esté por encima del fondo */
background-color: #FAFAFA; /* El color de fondo de tu sitio que tapa la imagen */
overflow: hidden; /* Buena práctica para contener márgenes */
}
.content-wrapper {
position: relative;
z-index: 2; /* El contenido siempre por delante */
}
/* --- SECCIÓN "CALADA" O HUECO --- */
.parallax-divider {
padding: 120px 20px;
text-align: center;
background-color: transparent; /* <-- Clave para ver el fondo principal */
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* --- LA MAGIA PARA ROMPER EL CONTENEDOR --- */
width: 100vw; /* Ancho = 100% del ancho de la ventana (viewport) */
left: 50%;
right: 50%;
margin-left: -50vw; /* Tira el borde izquierdo hasta el borde de la pantalla */
margin-right: -50vw;/* Tira el borde derecho hasta el borde de la pantalla */
}
.parallax-astronautas {
background-image: url('img/astronautas.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed; /* Esto sí funciona bien para fondos secundarios */
}
/* Modifica la regla existente de .parallax-title */
.parallax-title {
font-family: 'Lemon Milk', sans-serif;
color: white;
font-size: 3.5em;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
/* --- NUEVAS REGLAS para el título --- */
max-width: 900px; /* Ajusta este valor al ancho que quieras para el texto, ej. 900px, 800px */
margin: 0 auto; /* Centra el título horizontalmente dentro del espacio disponible */
box-sizing: border-box; /* Asegura que cualquier padding futuro no agregue ancho extra */
/* Importante: Elimina cualquier padding lateral que hayas agregado directamente aquí en la última sugerencia,
ya que el parallax-divider ya tiene padding. */
/* Por ejemplo, si tenías 'padding: 0 20px;', quítalo de aquí */
}
/* --- OPCIÓN 1: SUTIL Y ELEGANTE --- */
/* --- OPCIÓN 2: MODERNO Y SUAVE --- */
/* --- OPCIÓN 3: CREATIVO Y VISUAL --- */
.fade-in-element {
opacity: 0.5;
filter: blur(2px); /* Empieza desenfocado */
transform: scale(1.03); /* Un leve efecto de zoom hacia atrás */
transition: all 0.9s ease-out;
}
.fade-in-element.is-visible {
opacity: 1;
filter: blur(0);
transform: scale(1);
}
.centered-button-container {
text-align: center;
}
/* --- ESTILOS DE BASE --- */
body {
font-family: 'Segoe', sans-serif;
line-height: 1.6;
color: var(--text-dark);
}
main {
max-width: 1200px;
margin: 0 auto;
padding: 60px 20px;
}
.main-header {
padding: 2rem 1rem;
text-align: center;
}
.main-header h1 {
font-family: 'Lemon Milk', sans-serif;
font-weight: 500;
color: var(--dark-color);
font-size: 2.5em;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}
h2 {
font-family: 'Lemon Milk', sans-serif;
font-weight: 400;
text-align: center;
margin-top: 0;
margin-bottom: 1.5rem;
font-size: 2em;
}
h3, h4, h5, h6 {
font-family: 'Lemon Milk', sans-serif;
font-weight: 300;
}
p {
text-align: justify;
text-align-last: left;
}
a {
color: var(--primary-color);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* --- BLOQUES DE NAVEGACIÓN INICIALES --- */
.main-sections {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 60px;
}
.section-block {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
border-radius: 8px;
text-align: center;
background-color: #FAFAFA;
color: var(--dark-color);
border: none;
transition: transform 0.3s ease;
}
.section-block:hover{transform:translateY(-5px);text-decoration:none}.section-block .icon{font-size:2.2em;margin-bottom:10px}.section-block h3{font-family:'Lemon Milk',sans-serif;font-weight:300;color:var(--dark-color);margin:0;font-size:1.1em}.block-formaciones .icon{color:var(--primary-color)}.block-contenido .icon{color:var(--contenido-color)}.block-consultas .icon{color:var(--consultas-color)}.block-quienes-somos .icon{color:var(--secondary-color)}.layout-wrapper{display:flex;gap:40px;align-items:center;position:relative;z-index:2}.layout-wrapper.layout-media-right{flex-direction:row-reverse}.media-column,.text-column{flex:1;min-width:0}.static-image{width:auto;max-width:80%;max-height:50vh;display:block;margin:auto;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.1);transition:transform .3s ease,box-shadow .3s ease}.static-image:hover{transform:scale(1.03);box-shadow:0 8px 20px rgba(0,0,0,.15)}
.layout-wrapper-special{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;text-align:center}.special-column{display:flex;flex-direction:column;align-items:center;justify-content:center}.btn-content-inline,.btn-whatsapp{display:inline-block;padding:10px 20px;border-radius:5px;text-decoration:none;font-weight:600;margin-top:15px;color:var(--text-light)}.btn-content-inline{background-color:var(--contenido-color)}.btn-whatsapp{background-color:#25d366}.section-formaciones h2,.section-formaciones h3,.section-formaciones h4{color:var(--primary-color)}.section-consultas h2,.section-consultas h3,.section-consultas h4{color:var(--consultas-color)}.section-contenido h2,.section-contenido h3{color:var(--contenido-color)}.section-quienes-somos h2,.section-quienes-somos h3,.section-quienes-somos h4{color:var(--secondary-color)}
.carousel-container {
position: absolute; /* ¡Cambio clave: ahora se posiciona absolutamente! */
top: 55%; /* Mueve el borde superior al 50% de la altura del padre */
left: 20%; /* Mueve el borde izquierdo al 50% del ancho del padre */
transform: translate(-50%, -50%); /* ¡La magia! Lo mueve hacia atrás la mitad de su propio ancho y alto, centrándolo. */
width: 100%; /* Ocupa el 100% del ancho del padre */
max-width: 350px; /* **IMPORTANTE:** Definí un ancho máximo para el carrusel para que no sea enorme */
/* Eliminamos estas alturas fijas/mínimas, ya que el 'transform' y el 'aspect-ratio' lo manejarán: */
/* height: 100%; */
/* min-height: 550px; */
overflow: hidden;
border-radius: 2px;
/* margin: auto; Ya no es necesario con position absolute y transform */
aspect-ratio: 4 / 5; /* Esto es genial para mantener la proporción. Ajusta si tus imágenes son diferentes. */
}
.carousel-track{display:flex;height:100%;transition:transform .5s ease-in-out}.carousel-item{flex-shrink:0;width:100%;height:100%}.carousel-item img{width:100%;height:100%;object-fit:cover}.carousel-button{position:absolute;top:50%;transform:translateY(-50%);background-color:rgba(0,0,0,.5);color:#fff;border:none;cursor:pointer;z-index:10;border-radius:50%;width:45px;height:45px;display:flex;justify-content:center;align-items:center;transition:background-color .3s}.carousel-button:hover{background-color:rgba(0,0,0,.8)}.carousel-button.prev{left:10px}.carousel-button.next{right:10px}.hamburger-menu{position:fixed;top:20px;right:20px;z-index:1000}.menu-toggle{display:none}.menu-button{display:flex;flex-direction:column;justify-content:space-around;width:30px;height:25px;cursor:pointer}.menu-button .bar{width:100%;height:3px;background-color:var(--dark-color);border-radius:2px;transition:all .3s ease}.menu-toggle:checked+.menu-button .bar:nth-child(1){transform:translateY(11px) rotate(45deg)}.menu-toggle:checked+.menu-button .bar:nth-child(2){opacity:0}.menu-toggle:checked+.menu-button .bar:nth-child(3){transform:translateY(-11px) rotate(-45deg)}.menu-list{list-style:none;padding:0;margin:0;position:absolute;top:40px;right:0;background-color:rgba(36,44,63,.95);border-radius:5px;box-shadow:0 5px 15px rgba(0,0,0,.2);width:200px;transform:scaleY(0);transform-origin:top;transition:transform .3s ease-out;opacity:0;pointer-events:none}.menu-toggle:checked~.menu-list{transform:scaleY(1);opacity:1;pointer-events:auto}.menu-list li{padding:10px 20px;border-bottom:1px solid hsla(0,0%,100%,.1)}.menu-list li:last-child{border-bottom:none}.menu-list li a{color:var(--text-light);font-family:'Lemon Milk',sans-serif;font-weight:400;transition:color .2s ease}.menu-list li a:hover{color:var(--secondary-color);text-decoration:none}iframe{max-width:100%;border-radius:8px;border:1px solid #eee}.main-footer{background-color:var(--dark-color);color:var(--primary-color);padding:30px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:15px}.main-footer a{color:var(--primary-color);transition:opacity .3s}.main-footer a:hover{opacity:.8}.social-links{margin:15px 0}.social-links a{margin:0 10px;font-size:1.5em}
/* --- ESTRUCTURA DE SECCIONES (2 COLUMNAS) --- */
.section-container {
max-width: 80%; /* <-- AÑADE ESTO. Hace la caja más angosta. Prueba 90% o 85% */
margin-left: auto; /* <-- AÑADE ESTO. Centra la caja horizontalmente. */
margin-right: auto; /* <-- AÑADE ESTO. Centra la caja horizontalmente. */
padding: 80px;
margin-bottom: 50px;
position: relative;
background-color: #FAFAFA; /* Fondo sólido para tapar la capa parallax */
border-radius: 8px;
}
/* --- ESTILOS RESPONSIVOS (PARA PANTALLAS PEQUEÑAS - HASTA 768px) --- */
/* --- INICIO DE ESTILOS RESPONSIVOS --- */
/* --- INICIO DE ESTILOS RESPONSIVOS CORREGIDOS --- */
@media (max-width: 768px) {
/* --- 1. AJUSTES GENERALES PARA MÓVIL --- */
main {
padding: 20px 15px; /* Menos padding lateral en móvil */
}
.main-header h1 {
font-size: 1.8em;
}
.main-sections {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin-bottom: 30px;
}
.house-button {
padding: 10px 5px;
font-size: 0.9em;
}
/* --- 2. SOLUCIÓN AL ANCHO EXCESIVO --- */
.section-container {
/* Hacemos que la caja ocupe casi todo el ancho, eliminando el 70% del escritorio */
max-width: 100%;
width: 100%;
padding: 20px 15px; /* Reducimos el padding para móvil */
}
/* --- 4. SOLUCIÓN A LA ALTURA DE LA CAJA DE TEXTO (VERSIÓN REFORZADA) --- */
.section-container .text-column .subsection {
max-height: 45vh; /* Límite de altura (30% de la pantalla del móvil) */
overflow-y: auto; /* Permite el scroll si el contenido se pasa */
position: relative; /* Mantenemos esto por el ícono de scroll */
}
/* --- 3. SOLUCIÓN AL PARALLAX EN MÓVIL --- */
.parallax-divider {
/* Desactivamos el parallax de CSS que da problemas en móvil */
background-attachment: scroll !important;
background-size: cover;
padding: 80px 20px;
min-height: 40vh;
}
/* Hacemos que el fondo principal fijo se oculte en móvil para mejor rendimiento
y para evitar conflictos visuales. */
#fixed-background {
display: none;
}
/* Le devolvemos el color de fondo al wrapper para que no sea transparente */
#content-wrapper {
background-color: #FAFAFA;
}
/* --- 4. SOLUCIÓN A LA ALTURA DE LA CAJA DE TEXTO --- */
.subsection {
/* Tu regla era correcta, la mantenemos. Limita la altura y permite scroll interno. */
max-height: 30vh; /* Puedes ajustar este valor (ej. 30vh, 50vh) */
overflow-y: auto;
position: relative;
}
/* --- 5. AJUSTES DE LAYOUT PARA APILAR ELEMENTOS --- */
.layout-wrapper {
flex-direction: column !important; /* Apila imagen y texto */
gap: 20px;
}
.media-column {
order: 1; /* Imagen primero */
width: 120%; /* Ocupa todo el ancho */
max-width: 80%; /* Hacemos la imagen un poco más pequeña que el contenedor */
margin: 0 auto; /* La centramos */
}
.text-column {
order: 2; /* Texto después */
width: 100%;
}
.static-image {
width: 100%;
height: auto;
}
.layout-wrapper-special {
grid-template-columns: 1fr; /* Apila los widgets de Spotify/Youtube */
}
.parallax-title {
font-size: 2.5em; /* Título más pequeño en móvil */
}
/* --- AJUSTE PARA EL CARRUSEL EN MÓVIL --- */
.carousel-container {
position: relative; /* ¡Esto lo vuelve a posicionar de forma relativa! */
top: auto; /* Anula el 'top: 50%' del escritorio */
left: auto; /* Anula el 'left: 50%' del escritorio */
transform: none; /* Anula el 'transform: translate(-50%, -50%)' del escritorio */
width: 100%; /* Asegura que ocupe el ancho de su columna */
min-height: auto; /* Anula la altura mínima de 550px */
height: auto; /* Permite que la altura se ajuste al contenido */
aspect-ratio: 4 / 5; /* Esto está ok, mantiene una forma más vertical para móviles */
}
.carousel-item, .carousel-item img {
height: 100%; /* Asegura que tanto el item como la imagen llenen el nuevo contenedor */
object-fit: cover; /* Mantiene la proporción de la imagen sin deformarla */
}
}
/* --- FIN DE ESTILOS RESPONSIVOS CORREGIDOS --- */
/* --- SECCIÓN PARALLAX "VENTANA" --- */
/* --- ESTILO GLOBAL PARA TODAS LAS SECCIONES PARALLAX --- */
.parallax-divider {
/* Ajustamos el padding y la altura para que se adapte al contenido */
padding: 60px 20px;
height: auto;
/* Propiedades del efecto parallax y fondo */
background-color: transparent;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
/* Usamos Flexbox para centrar y apilar el contenido verticalmente */
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* Le damos un espacio entre el título y el contenido que le sigue */
.parallax-divider .parallax-title {
margin-bottom: 20px;
}
.parallax-title {
font-family: 'Lemon Milk', sans-serif;
color: white;
font-size: 3.5em;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
}
.parallax-fondo-default {
background-image: url('img/imagen-fondo.jpg');
}
/* --- ESTILO ESPECÍFICO PARA LOS BOTONES DE CASA --- */
.house-button {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 15px 10px;
border-radius: 8px;
text-align: center;
/* Cambios clave: Fondo blanco y texto oscuro */
background-color: #ffffff; /* Fondo blanco puro */
color: #249b95; /* Texto oscuro para contraste */
text-decoration: none;
transition: transform 0.3s ease, box-shadow 0.3s ease;
/* Sombreado para el "reborde" - Muy sutil */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), /* Sombra suave y pequeña debajo */
0 0 0 1px rgba(0, 0, 0, 0.05); /* Reborde muy fino y casi transparente */
/* Puedes ajustar el '0.05' para que sea más o menos visible */
font-family: 'Lemon Milk', sans-serif;
font-weight: 300;
font-size: 1.1em;
}
/* Estilos al pasar el ratón (hover) */
.house-button:hover {
transform: translateY(-3px); /* Se eleva un poco al pasar el ratón */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), /* Sombra un poco más pronunciada al pasar el ratón */
0 0 0 2px rgba(0, 0, 0, 0.1); /* Reborde un poco más visible al pasar el ratón */
background-color: var(--light-color); /* Opcional: Un ligero cambio de color al blanco más claro */
color: #249b95; /* Mantiene el color del texto oscuro */
}
/* Asegurarse que el h3 dentro del botón también herede los colores */
.house-button h3 {
color: #249b95;
margin: 0;
font-size: 1em;
}
/* Si tenías estilos de icono para .section-block .icon, asegúrate de que sean oscuros
o ajusta si quieres que sobresalgan con un color diferente */
.house-button .icon { /* Si usas íconos en estos botones, asegúrate de su color */
color: var(--dark-color); /* Opcional: Si quieres un color específico para el ícono */
}
/* --- ESTILOS RESPONSIVOS PARA BOTONES DE CASA (dentro de @media (max-width: 768px)) --- */
@media (max-width: 768px) {
.main-sections {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.house-button {
padding: 10px 5px;
font-size: 0.9em;
}
}
/* --- Estilos específicos para el botón "Leer texto completo" en Luna Llena --- */
.btn-full-text {
/* Esto sobreescribe el 'display: inline-block' de .btn-content-inline solo para este botón */
display: block;
/* Centra el botón al darle un ancho automático y márgenes automáticos */
width: fit-content;
margin-left: auto;
margin-right: auto;
/* Si quieres que tenga el margen superior que ya tenía, puedes poner: */
/* margin-top: 15px; */
}
/* --- ESTILO ESPECÍFICO PARA LAS SECCIONES DE TEXTO DE LAS CASAS (NUEVO) --- */
.narrow-text-section {
/* Define el ancho máximo para la caja de texto */
max-width: 600px; /* Puedes ajustar este valor: 700px, 900px, etc. */
margin-left: auto; /* Centra la caja horizontalmente */
margin-right: auto; /* Centra la caja horizontalmente */
/* Aseguramos que el padding interno se mantenga, o ajustamos si es necesario */
padding: 40px 20px; /* Mantén el padding original de .section-container o ajusta */
}
/* Color de texto para los párrafos dentro de estas secciones */
.narrow-text-section p {
color: #000000; /* Negro puro. Puedes usar 'var(--dark-color)' si prefieres tu gris azulado muy oscuro. */
text-align: justify; /* Asegura que el texto no se justifique dentro de la caja estrecha */
text-align-last: left; /* Asegura que la última línea también se alinee a la izquierda */
}
/*
================================================================================
* INICIO DE LA MODIFICACIÓN DE BOTONES DE SECCIÓN (Versión Final) *
================================================================================
*/
/* 1. ESTILOS BASE PARA TODOS LOS BOTONES USANDO UN SELECTOR MÁS ESPECÍFICO */
a.section-block {
background-color: transparent;
padding: 45px 30px;
transition: transform 0.2s ease-in-out;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
a.section-block .icon {
display: none;
}
a.section-block h3 {
font-size: 1.2em;
position: relative;
z-index: 2;
transition: color 0.2s ease-in-out;
}
a.section-block:hover {
transform: scale(1.05);
}
/* 2. ASIGNACIÓN DE IMAGEN A CADA BOTÓN CON LA RUTA CONFIRMADA */
a.block-formaciones {
/* Reemplazamos el .webp por el código SVG directamente */
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
a.block-formaciones:hover h3 {
color: var(--primary-color);
}
a.block-contenido {
/* Reemplazamos el .webp por el código SVG directamente */
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
a.block-contenido:hover h3 {
color: var(--contenido-color);
}
a.block-consultas {
/* Reemplazamos el .webp por el código SVG directamente */
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
a.block-consultas:hover h3 {
color: var(--consultas-color);
}
a.block-bios {
/* Reemplazamos el .webp por el código SVG directamente */
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
a.block-bios:hover h3 {
color: var(--secondary-color);
}
/*
================================================================================
* FIN DE LA MODIFICACIÓN DE BOTONES DE SECCIÓN *
================================================================================
*//* --- NUEVA SECCIÓN PARALLAX (PARA OTRA IMAGEN) --- */
.parallax-divider-nueva-seccion {
background-image: url('img/tu-nueva-imagen.jpg'); /* ¡Aquí pones la ruta de tu nueva imagen! */
/* El resto de propiedades de fondo y tamaño se heredan de .parallax-divider */
/* si tienen el mismo valor, no necesitas repetirlas aquí. */
/* Pero si quieres un alto diferente, puedes sobrescribirlo: */
/* height: 250px; En el html poné esto:
Tu Nuevo Título Aquí
*/
}
.centered-button-container {
/* 1. Activa Flexbox para alinear los elementos internos */
display: flex;
/* 2. Los alinea en una misma fila */
flex-direction: row;
/* 3. Los centra horizontalmente como grupo */
justify-content: center;
/* 4. Asegura que pasen a la línea de abajo en pantallas pequeñas */
flex-wrap: wrap;
/* 5. Crea un espacio de separación entre los botones */
gap: 20px;
}
@keyframes brillo {
0% {
background-position: -200% center;
}
100% {
background-position: 200% center;
}
}
@keyframes flotar {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-8px); /* Sube 8px */
}
100% {
transform: translateY(0px);
}
}
@keyframes respirar {
0% {
transform: scale(1);
}
50% {
transform: scale(1.04); /* Se agranda un 4% */
}
100% {
transform: scale(1);
}
}
/* Aplicamos la animación a las imágenes cuando su contenedor es visible */
.fade-in-element.is-visible .static-image {
animation: respirar 8s ease-in-out infinite;
}
.subsection {
overflow-y: auto;
max-height: 70vh;
padding: 15px;
background: transparent;
border-radius: 4px;
border: none;
/* --- INICIO DE CAMBIOS PARA SVG --- */
position: relative; /* ¡Esto es crucial para que el ::after se posicione correctamente! */
z-index: 1; /* Asegura que la subsection esté por encima si hay otros elementos */
/* --- FIN DE CAMBIOS PARA SVG --- */
}
/*
============================================================
* ESTILO FINAL: OCULTAR BARRAS DE SCROLL *
============================================================
*/
/* --- Para Chrome, Safari, Edge --- */
/* Oculta completamente el elemento de la barra de scroll */
.subsection::-webkit-scrollbar {
display: none;
}
/* --- Para Firefox --- */
/* La forma estándar de ocultar la barra en Firefox */
.subsection {
scrollbar-width: none;
}
.subsection::after {
content: '';
position: absolute;
bottom: 0px; /* Lo bajamos un poco más, casi al final */
left: 0%;
transform: translateZ(100%);
/* --- CAMBIOS CLAVE EN TAMAÑO --- */
width: 100%; /* Sigue ocupando el ancho completo del contenedor para centrado */
height: 80px; /* ¡Duplicamos la altura! De 40px a 80px */
/* Usamos tu SVG, pero sin rotación */
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3e%3cpolyline points='44.034 153.2 100.702 177.17 154.404 153.638' fill='none' stroke='%23242c3f' stroke-miterlimit='10' stroke-width='4'/%3e%3c/svg%3e");
background-size: contain; /* Asegura que el SVG quepa en la nueva altura sin recortarse */
background-repeat: no-repeat;
background-position: center; /* Centramos el SVG dentro de su espacio */
opacity: 0.5; /* Sigue con la opacidad inicial */
transition: opacity 0.3s ease;
pointer-events: none;
z-index: 10; /* Le damos un z-index más alto para asegurar visibilidad sobre el texto */
/* Animación de flotación */
animation: flotar 3s ease-in-out infinite;
}
.subsection.scrolling::after {
opacity: 0;
transform: translateX(-150%); /* Se mueve 150% de su propio ancho a la izquierda, además del centrado */
z-index: 0
}
/* El contenedor que reserva el espacio */
.widget-container {
position: relative;
width: 100%;
overflow: hidden;
/* --- La clave está aquí --- */
/* Para un cuadrado (1:1), usa 100%. */
/* Para un rectángulo 4:3, usa 75% (3 / 4 * 100). */
/* Ajusta este valor según la forma de tu galería. */
padding-bottom: 100%;
}
/* El iframe que se posiciona dentro del contenedor */
.widget-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* --- ADAPTACIONES PARA LA PÁGINA DEL LIBRO --- */
/* Estilos para el contenedor de la oferta y los botones de pago */
.purchase-box {
margin-top: 30px;
padding: 20px;
border: 1px solid var(--light-color);
border-radius: 8px;
background-color: #ffffff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Sombra sutil para destacarlo */
}
/* Contenedor para los detalles bancarios y el mensaje de copia */
.bank-details-box {
background-color: var(--light-color); /* Un fondo más claro para los datos sensibles */
padding: 15px;
border-radius: 5px;
margin-top: 15px;
font-size: 0.95em;
}
/* Estilo del botón de Copiar (CBU/Alias) */
.copy-btn {
background-color: var(--primary-color);
color: var(--text-light);
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
font-family: 'Segoe', sans-serif;
font-size: 0.8em;
transition: background-color 0.3s;
margin-left: 10px;
}
.copy-btn:hover {
background-color: var(--dark-color);
}
/* Estilo para el contenedor del formulario de envío */
#shipping-form-container {
padding: 20px;
border: 1px solid var(--light-color);
border-radius: 8px;
background-color: #ffffff;
}
/* Inputs del Formulario */
#purchase-form input[type="text"],
#purchase-form input[type="email"],
#purchase-form input[type="tel"] {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 4px;
font-family: 'Segoe', sans-serif;
box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */
}
.shipping-option label {
font-weight: 400;
}
/* --- SECCIONES PARALLAX ESPECÍFICAS --- */
/* Fondo de la reseña (LN2) */
.parallax-book-hero {
/* Aquí definimos la imagen LN2 */
background-image: url('img/LN2.jpg');
/* Podemos hacerla un poco más alta para que luzca el efecto */
min-height: 50vh;
}
/* Fondo de la entrega (LN3) */
.parallax-delivery-info {
/* Aquí definimos la imagen LN3 */
background-image: url('img/LN3.jpg');
min-height: 40vh;
}
/* Estilo para los párrafos dentro de la sección Parallax (para que se lean bien) */
.parallax-delivery-info p {
max-width: 800px;
margin: 20px auto 0;
padding: 0 15px;
text-align: center;
}
/* --- RESPONSIVE FIXES (Asegurando que se vean bien en móvil) --- */
@media (max-width: 768px) {
.book-hero .text-column {
/* Aseguramos que la cabecera no tenga margen lateral extra */
padding: 0;
}
/* El contenedor del formulario de envío lo hacemos más estrecho */
.media-column, .text-column {
min-width: 100%;
}
.purchase-box, #shipping-form-container {
padding: 15px;
}
}
/* --- ESTILOS PARA LA VENTANA MODAL DEL PDF --- */
/* Ajuste del ancho de la ventana modal */
.modal-content {
background-color: #fefefe;
margin: 5% auto;
padding: 20px 20px 10px 20px; /* Reducimos el padding vertical del content, el lateral lo maneja el contenedor del iframe */
border: 1px solid #888;
width: 90%;
max-width: 950px; /* Hacemos la modal ligeramente más ancha para incluir padding */
border-radius: 8px;
position: relative;
animation: fadeIn 0.5s;
}
/* Nuevo contenedor para agregar padding lateral al Iframe */
.modal-iframe-container {
/* Aquí se define el padding lateral para "encoger" visualmente el Iframe */
padding: 20px 60px;
background-color: #fefefe;
}
/* Estilo para el iframe */
#pdf-iframe {
min-height: 500px;
border: 1px solid #ddd;
border-radius: 4px;
}
/* --- AJUSTES EN SECCIONES PARALLAX --- */
/* Fondo de la reseña (LN2) */
.parallax-book-hero {
/* Asegúrate de tener la imagen LN2 */
background-image: url('img/LN2.jpeg');
min-height: 50vh;
}
/* Fondo de la entrega (LN3) */
.parallax-delivery-info {
/* Asegúrate de tener la imagen LN3 */
background-image: url('img/LN3.jpeg');
min-height: 30vh;
}
/* --- RESPONSIVE FIXES PARA LA MODAL --- */
@media (max-width: 768px) {
.modal-iframe-container {
padding: 5px; /* Reducimos el padding en móvil */
}
}