.tapa-libro { /* 1. TU SOMBRA FAVORITA */ /* Versión estándar (PC) */ box-shadow: 5px 5px 15px rgba(0,0,0,0.5); /* Versión especial para motores de celular (WebKit/iOS/Android) */ -webkit-box-shadow: 5px 5px 15px rgba(0,0,0,0.5); /* 2. SUAVIZADO */ /* Hace que el zoom no sea brusco */ transition: transform 0.2s ease; /* 3. TRUCO DE RENDIMIENTO */ /* Le dice al celular "presta atención a este objeto", ayuda a que no parpadee */ transform: translateZ(0); /* 4. ASEGURAR QUE SE VEA LA IMAGEN COMPLETA */ /* A veces el navegador la corta si es muy grande */ display: block; } /* 5. EL EFECTO DE AGRANDAR */ .tapa-libro:hover, /* Cuando pasas el mouse (PC) */ .tapa-libro:active { /* Cuando tocas con el dedo (Celular) */ transform: scale(1.05); } /* --- CLASE PARA BOTÓN VIOLETA --- */ .btn-violeta { background-color: #6f42c1; /* Color de fondo (Violeta Bootstrap) */ border-color: #6f42c1; /* Color del borde */ color: white; /* Color del texto */ } /* Efecto al pasar el mouse (Hover) - Un poco más oscuro */ .btn-violeta:hover { background-color: #59359a; border-color: #59359a; color: white; } /* --- CLASE PARA BOTÓN NARANJA (Ejemplo extra) --- */ .btn-naranja { background-color: #fd7e14; border-color: #fd7e14; color: white; } .btn-naranja:hover { background-color: #ca6510; border-color: #ca6510; color: white; } /* --- 1. BOTÓN ROSA (Pink) --- */ .btn-rosa { background-color: #e83e8c; /* Color base */ border-color: #e83e8c; color: white; /* Texto blanco */ } .btn-rosa:hover { background-color: #c92a75; /* Un poco más oscuro al pasar mouse */ border-color: #c92a75; color: white; } /* --- 2. BOTÓN TURQUESA (Teal) --- */ .btn-turquesa { background-color: #20c997; /* Color base */ border-color: #20c997; color: white; } .btn-turquesa:hover { background-color: #179670; /* Un poco más oscuro al pasar mouse */ border-color: #179670; color: white; } /* --- ESTILOS GENERALES --- */ /* 1. FONDO GENERAL: Gris muy claro (#f8f9fa) */ body { background-color: #f8f9fa; } /* 2. HEADER */ header { background-color: #4A3800; padding: 15px 20px; border-radius: 5px; /* Sombra suave para que se note sobre el fondo gris */ box-shadow: 0 2px 5px rgba(0,0,0,0.05); } /* 3. LOGO: Blanco (según el color hex, aunque el comentario decía negro) */ .logo { color: #ffffff; letter-spacing: 2px; font-weight: bold; } /* 4. FOOTER: Gris muy oscuro (#212529) */ footer#contact { background-color: #214141; color: #ffffff; } /* 5. TAGS y DETALLES: Rojo (#ff0000) */ .tag-text { color: #ff0000; font-weight: bold; text-transform: uppercase; font-size: 0.85rem; } /* Estilo extra: Botón rojo para combinar */ .btn-custom-red { background-color: #ff0000; color: #ffffff; border: none; } .btn-custom-red:hover { background-color: #cc0000; color: #ffffff; } /* Estilos de las tarjetas */ .card { transition: transform 0.3s; border: none; box-shadow: 0 2px 10px rgba(0,0,0,0.05); } .card:hover { transform: translateY(-5px); } /* Estilos para los enlaces del Pie de Página */ .link-pie { color: #444; /* Gris oscuro elegante */ text-decoration: none; /* Sin subrayado */ font-size: 1.1rem; /* Un poquito más grande */ font-weight: 500; transition: color 0.3s ease; } .link-pie:hover { color: #000; /* Negro puro al pasar el mouse */ text-decoration: underline; /* Aparece la linea al tocar */ text-decoration-thickness: 1px; /* Linea fina */ text-underline-offset: 4px; /* Linea un poco separada del texto */ } /* Solo animación para los iconos azules */ .icono-social { /* No ponemos color, para que siga siendo ese azul lindo */ font-size: 1.5rem; /* Tamaño un poco más grande */ text-decoration: none; display: inline-block; transition: transform 0.3s ease; /* Suavidad */ } /* Al pasar el mouse, solo se mueven, no cambian de color */ .icono-social:hover { transform: translateY(-3px); /* Saltito hacia arriba */ } .mi-enlace { text-decoration: none; /* Esto quita la línea de abajo */ color: #6c757d; /* Un color gris (parecido al text-muted) */ transition: color 0.3s; /* Hace que el cambio de color sea suave */ } /* Esto define qué pasa cuando pones el mouse encima */ .mi-enlace:hover { color: #0056b3; /* Cambia a azul (o el color que quieras) */ text-decoration: none; /* Asegura que siga sin subrayado */ } .poema { white-space: pre-wrap; /* Respeta los Enters */ line-height: 1.6; /* Aire entre versos */ } /* Sangrías por niveles para corrimientos semánticos */ .poema .i1 { display:inline-block; margin-left: 1ch; } .poema .i2 { display:inline-block; margin-left: 2ch; } .poema .i3 { display:inline-block; margin-left: 3ch; } .poema .i4 { display:inline-block; margin-left: 4ch; } .poema .i5 { display:inline-block; margin-left: 5ch; } .poema .i6 { display:inline-block; margin-left: 6ch; } .poema .i7 { display:inline-block; margin-left: 7ch; } .poema .i8 { display:inline-block; margin-left: 8ch; } .poema .i9 { display:inline-block; margin-left: 9ch; } .poema .i10 { display:inline-block; margin-left: 10ch; } .poema .i11 { display:inline-block; margin-left: 11ch; } .poema .i12 { display:inline-block; margin-left: 12ch; } .poema .i13 { display:inline-block; margin-left: 13ch; } .poema .i14 { display:inline-block; margin-left: 14ch; } .poema .i15 { display:inline-block; margin-left: 15ch; } .poema .i16 { display:inline-block; margin-left: 16ch; } .poema .i17 { display:inline-block; margin-left: 17ch; } .poema .i18 { display:inline-block; margin-left: 18ch; } .poema .i19 { display:inline-block; margin-left: 19ch; } .poema .i20 { display:inline-block; margin-left: 20ch; } .poema .i21 { display:inline-block; margin-left: 21ch; } .poema .i22 { display:inline-block; margin-left: 22ch; } .poema .i23 { display:inline-block; margin-left: 23ch; } .poema .i24 { display:inline-block; margin-left: 24ch; } .poema .i25 { display:inline-block; margin-left: 25ch; } .poema .i26 { display:inline-block; margin-left: 26ch; } .poema .i27 { display:inline-block; margin-left: 27ch; } .poema .i28 { display:inline-block; margin-left: 28ch; } .poema .i29 { display:inline-block; margin-left: 29ch; } .poema .i30 { display:inline-block; margin-left: 30ch; } .poema .i31 { display:inline-block; margin-left: 31ch; } .poema .i32 { display:inline-block; margin-left: 32ch; } .poema .i33 { display:inline-block; margin-left: 33ch; } .poema .i34 { display:inline-block; margin-left: 34ch; } .poema .i35 { display:inline-block; margin-left: 35ch; } .poema .i36 { display:inline-block; margin-left: 36ch; } .poema .i37 { display:inline-block; margin-left: 37ch; } .poema .i38 { display:inline-block; margin-left: 38ch; } .poema .i39 { display:inline-block; margin-left: 39ch; } .poema .i40 { display:inline-block; margin-left: 40ch; } .poema .i41 { display:inline-block; margin-left: 41ch; } .poema .i42 { display:inline-block; margin-left: 42ch; } .poema .i43 { display:inline-block; margin-left: 43ch; } .poema .i44 { display:inline-block; margin-left: 44ch; } .poema .i45 { display:inline-block; margin-left: 45ch; } .poema .i46 { display:inline-block; margin-left: 46ch; } .poema .i47 { display:inline-block; margin-left: 47ch; } .poema .i48 { display:inline-block; margin-left: 48ch; } .poema .i49 { display:inline-block; margin-left: 49ch; } .poema .i50 { display:inline-block; margin-left: 50ch; } .hover-link:hover { color: #000 !important; /* O el color que prefieras al pasar el mouse */ opacity: 0.8; } /* --- COLOR EN EL MENÚ (Celeste y Gris fuerte) --- */ .navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus, .nav-item.show .nav-link { /* Celeste Cielo un poco oscuro (legible) */ color: #FF4A4A !important; /* Gris más fuerte para que se note el recuadro */ background-color: #CCCCCC !important; /* Bordes redondeados y Negrita */ border-radius: 3px; font-weight: bold !important; } /* --- COLOR AL PASAR EL MOUSE EN LA LISTA DESPLEGABLE (Poetas) --- */ .dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus { /* Fondo: Un gris medio (ni muy claro ni muy oscuro) */ background-color: #cccccc !important; /* Texto: Negro puro para que se lea bien */ color: #000000 !important; /* Negrita para resaltar el nombre elegido */ font-weight: bold !important; } /* ESTILOS GALERÍA IBUK */ /* Quitar estilo de botón feo a las miniaturas */ #galeriaIbuk + div button { background: white; transition: transform 0.2s; opacity: 0.6; /* Un poco transparentes si no están activos */ } /* Cuando paso el mouse o está activo */ #galeriaIbuk + div button:hover, #galeriaIbuk + div button.active { border-color: #0d6efd !important; /* Borde azul (o el color que quieras) */ transform: scale(1.1); /* Se agranda un poquito */ opacity: 1; /* Totalmente visible */ box-shadow: 0 4px 6px rgba(0,0,0,0.1); } /* --- ESTILOS GALERÍA IBUK (Versión Definitiva) --- */ /* 1. EL ESCENARIO */ .slide-escenario { height: 500px; /* Altura fija */ background-color: #fff; /* Fondo BLANCO puro (adiós sombra gris) */ overflow: hidden; } /* 2. TEXTO DEL AUTOR (Izquierda) */ .autor-destacado h3 { font-family: "Times New Roman", serif; font-size: 2.2rem; /* Letra un poco más grande */ line-height: 1.1; margin-bottom: 10px; } //* --- ESTILOS GALERÍA IBUK (Versión "Tapa de Libro") --- */ /* 1. EL ESCENARIO */ .slide-escenario { height: 500px; background-color: #fff; overflow: hidden; } /* 2. TEXTO DEL AUTOR (Izquierda) */ /* Ajuste de tipografía */ .autor-destacado h3 { font-family: "Times New Roman", serif; font-size: 2.2rem; line-height: 1.1; margin-bottom: 15px; } /* 3. EL LIBRO GRANDE (Derecha) */ .libro-grande { max-height: 460px; /* Un pelín más chico para que respire */ width: auto; /* Sombra elegante y limpia (ya que la foto está recortada) */ box-shadow: 5px 5px 15px rgba(0,0,0,0.3); border-radius: 2px; transition: transform 0.3s ease; } .libro-grande:hover { transform: scale(1.02); } /* 4. LA CINTA DE MINIATURAS (Más bajita y cuadrada) */ .mini-tapa { height: 55px; /* Altura reducida como pediste */ width: auto; max-width: 100%; object-fit: contain; /* Se ajusta sin deformarse */ display: block; margin: 0 auto; } /* El botón cuadrado contenedor */ .btn-miniatura { width: 65px; /* Ancho fijo */ height: 65px; /* Alto fijo -> Lo hace cuadrado */ background: #fff; border: 1px solid #ddd; padding: 2px; opacity: 0.6; transition: all 0.2s; /* Centrar la imagen dentro del cuadrado */ display: flex; align-items: center; justify-content: center; } .btn-miniatura.active, .btn-miniatura:hover { opacity: 1; border-color: #0d6efd; transform: translateY(-3px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); } /* Flechas del slider */ .carousel-control-prev-icon, .carousel-control-next-icon { filter: invert(1); } /* --- CORRECCIONES RESPONSIVAS Y CINTA --- */ /* 1. Ajuste de la Cinta de Miniaturas */ /* Esto hace que la barra de desplazamiento se vea más linda */ #contenedor-miniaturas::-webkit-scrollbar { height: 8px; } #contenedor-miniaturas::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 4px; } /* 2. Ajustes para CELULAR (Pantallas menores a 768px) */ @media (max-width: 768px) { /* El escenario deja de ser fijo de 500px y se adapta al contenido */ .slide-escenario { height: auto !important; padding-top: 20px; padding-bottom: 20px; } /* El libro grande en celular (Versión Agrandada) */ .libro-grande { /* CAMBIO CLAVE: De 280px a 420px. ¡Casi toca el techo y el piso! */ max-height: 420px !important; /* Ajustes de seguridad para que no se deforme */ width: auto; max-width: 100%; /* Quitamos el margen de abajo porque ya no mostramos el texto */ margin: 0 !important; /* Sombra un poco más fuerte para que destaque */ box-shadow: 0 10px 20px rgba(0,0,0,0.3) !important; } /* Texto del autor más chico */ .autor-destacado h3 { font-size: 1.5rem !important; } /* Línea separadora */ .separador-autor { width: 30px; height: 2px; background-color: #999; margin: 0 auto; } } /* Ajuste para PC (Mantiene lo que tenías) */ @media (min-width: 769px) { .separador-autor { width: 40px; height: 2px; background-color: #999; margin: 0 auto; } } /* OCULTAR LA BARRA DE DESPLAZAMIENTO (Para que quede limpio) */ /* Para Chrome, Safari y Edge */ #contenedor-miniaturas::-webkit-scrollbar { display: none; } /* Para Firefox e IE */ #contenedor-miniaturas { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } /* Links del pie de página IBUK */ .ibuk-link, .ibuk-nombre{ color: #6c757d; text-decoration: none; font-weight: 500; transition: color .2s ease; } /* Hover (cuando pasás el mouse) */ .ibuk-link:hover, .ibuk-nombre:hover{ color: #343a40; text-decoration: underline; } /* Ajuste fino solo para los nombres */ .ibuk-nombre{ letter-spacing: .02em; } /* ============================== PÁGINA: Qué es un EPUB (page-epub) Nota: estilos encapsulados para que NO se pisen con el CSS general. ============================== */ .page-epub header.hero{ /* En tu estilos.css hay un selector global 'header' (fondo marrón). Esto lo neutraliza SOLO en esta página. */ background: linear-gradient(120deg, rgba(13,110,253,.12), rgba(25,135,84,.10)); border-bottom: 1px solid rgba(0,0,0,.06); border-radius: 0; box-shadow: none; } /* Pequeños “acentos” visuales del hero */ .page-epub .badge-soft{ background: rgba(13,110,253,.10); color: #0d6efd; border: 1px solid rgba(13,110,253,.18); } .page-epub .callout{ border: 1px solid rgba(25,135,84,.25); background: rgba(25,135,84,.06); border-radius: 1rem; padding: 1rem 1.25rem; } .page-epub .mini{ color: #6c757d; font-size: .95rem; } /* En tu estilos.css hay un hover global para '.card' (sube -5px). Para esta página lo bajamos (y solo para estas cards). */ .page-epub .card:hover{ transform: none; } .page-epub .card-hover{ transition: transform .15s ease; } .page-epub .card-hover:hover{ transform: translateY(-2px); } /* ===== FIX DEFINITIVO HEADER MARRÓN EN EPUB ===== */ .page-epub header, .page-epub header.hero{ background: none !important; background-color: transparent !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; } /* ============================== PÁGINA: Qué es IBUK (page-ibuk) Estilos encapsulados para que NO se pisen con el CSS general. ============================== */ /* Fondo verde suave SOLO en esta página */ .page-ibuk{ background: #eaf4ea; } /* Barra superior */ .page-ibuk .topbar{ background:#f7f7f7; border-bottom: 1px solid rgba(0,0,0,.08); } /* Ancho de lectura */ .page-ibuk .reading{ max-width: 920px; } /* FIX: tu estilos.css aplica un 'header' marrón global. En esta página usamos
dentro del contenido, así que lo neutralizamos. */ .page-ibuk main header{ background: none !important; background-color: transparent !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; } /* Título principal */ .page-ibuk .page-title{ font-size:2.2rem; font-weight:900; letter-spacing:2px; padding:.8rem 1.6rem; background:rgba(255,255,255,.85); border:1px solid rgba(0,0,0,.15); display:inline-block; box-shadow:0 .8rem 2rem rgba(0,0,0,.15); } /* Subtítulos */ .page-ibuk .section-title{ font-size: 1.25rem; font-weight: 800; letter-spacing: .2px; display: inline-block; padding: .55rem .85rem; margin: 1.35rem 0 .75rem; border-radius: .9rem; background: rgba(255,255,255,.80); border: 1px solid rgba(0,0,0,.12); box-shadow: 0 1px 0 rgba(255,255,255,.85) inset, 0 .45rem 1.2rem rgba(0,0,0,.09); } .page-ibuk .reading p{ line-height: 1.85; margin-bottom: 1rem; } .page-ibuk .muted{ color: rgba(0,0,0,.62); } /* ============================== PÁGINA: Red Poética (page-redpoetica) ============================== */ .page-redpoetica{ background:#eaf4ea; font-family: Georgia, "Times New Roman", serif; } .page-redpoetica .topbar{ background:#f7f7f7; border-bottom:1px solid rgba(0,0,0,.08); } .page-redpoetica .reading{ max-width:1150px; } /* FIX: evita que el
del contenido herede el marrón global del sitio */ .page-redpoetica main > header{ background: none !important; background-color: transparent !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; } .page-redpoetica .page-title{ font-size:2.2rem; font-weight:900; letter-spacing:2px; padding:.8rem 1.6rem; background:rgba(255,255,255,.85); border:1px solid rgba(0,0,0,.15); display:inline-block; box-shadow:0 .8rem 2rem rgba(0,0,0,.15); } .page-redpoetica .lead-note{ color:rgba(0,0,0,.65); line-height:1.8; text-align:center; } /* ===== TARJETAS ===== */ .page-redpoetica .poetry-card{ position:relative; overflow:hidden; box-shadow:0 .7rem 1.6rem rgba(0,0,0,.14); transition:transform .2s ease; height:auto; } .page-redpoetica .poetry-card:hover{ transform:translateY(-3px); } .page-redpoetica .poetry-card img{ width:100%; height:auto; display:block; } /* Overlay */ .page-redpoetica .card-overlay{ position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,.15)); color:#fff; padding:1.1rem; display:flex; flex-direction:column; justify-content:flex-end; transform:translateY(58%); transition:transform .35s ease; } .page-redpoetica .poetry-card:hover .card-overlay{ transform:translateY(0); } .page-redpoetica .card-overlay h3{ font-size:1.05rem; font-weight:800; margin-bottom:.25rem; } .page-redpoetica .card-overlay p{ font-size:.9rem; line-height:1.45; opacity:.9; } .page-redpoetica .card-overlay span{ font-size:.75rem; opacity:.8; } .page-redpoetica .section-title{ margin:3rem 0 1.5rem; font-size:1.1rem; font-weight:800; letter-spacing:.5px; } @media (max-width:576px){ .page-redpoetica .page-title{ font-size:1.7rem; } .page-redpoetica .poetry-card{ height:220px; } }