/* Theme Name: Marta Sanchis Portfolio Theme Theme URI: https://martasanchis.com/ (opcional) Author: Tu Nombre Author URI: https://martasanchis.com/ (opcional) Description: Tema personalizado para el portfolio de Marta Sanchis. Version: 1.0.0 Text Domain: martasanchis License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: custom-theme, portfolio, responsive */ /* Importar tipografía Playfair Display desde Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap'); /* ========================================================= REGLAS AGRESIVAS PARA HTML/BODY (SOLO AQUÍ) Esto es para controlar el scroll y animaciones de Fancybox ========================================================= */ * { box-sizing: border-box; } html, body { font-family: 'Playfair Display', serif; scroll-behavior: auto !important; /* Desactiva cualquier scroll suave */ overflow-x: hidden !important; /* Previene scroll horizontal no deseado */ transition: none !important; /* Desactiva todas las transiciones */ animation: none !important; /* Desactiva todas las animaciones */ position: static !important; /* Asegura posicionamiento por defecto */ left: auto !important; /* Restablece posición horizontal */ right: auto !important; /* Restablece posición horizontal */ margin-left: auto !important; /* Restablece márgenes */ margin-right: auto !important; /* Restablece márgenes */ width: auto !important; /* No permitir anchos fijos que causen problemas con barra de scroll */ max-width: 100% !important; /* Evitar desbordamientos */ } /* Cuando Fancybox está activo, compensar el padding en el body directamente */ /* Fancybox añade la clase .fancybox-active al */ html.fancybox-active { overflow: hidden !important; /* Oculta el scrollbar */ /* El paddingRight es establecido por el JS handleFancyboxOpen */ } /* Asegura que cualquier elemento en el body no tenga transiciones o transformaciones mientras Fancybox está activo. Esto es un selector amplio, pero necesario para el debug. */ html.fancybox-active body * { transition: none !important; transform: none !important; animation: none !important; } /* ===================== HEADER GENERAL ===================== */ .site-header { position: sticky; top: 0; background-color: white; z-index: 999; border-bottom: 1px solid #eee; padding: 1em 0; transition: all 0.3s ease; } .container-header { max-width: 1200px; margin: auto; padding: 0 2em; display: flex; justify-content: space-between; align-items: center; } .logo a { font-family: 'Playfair Display', serif; font-size: 1.8rem; color: #111; text-decoration: none; } /* ===================== MENÚ DESKTOP ===================== */ .menu-desktop { list-style: none; display: flex; gap: 2em; margin: 0; } .menu-desktop li a { text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 1rem; color: #444; transition: color 0.2s ease; } .menu-desktop li a:hover { color: #000; } /* ===================== MENÚ MÓVIL ===================== */ .menu-toggle { display: none; font-size: 2rem; background: none; border: none; cursor: pointer; } .menu-mobile { display: none; position: absolute; top: 100%; right: 0; background-color: white; width: 100%; box-shadow: 0 4px 12px rgba(0,0,0,0.1); padding: 1.5em; } .menu-mobile-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1.2em; } .menu-mobile-list li a { font-family: 'Open Sans', sans-serif; font-size: 1.1rem; color: #222; text-decoration: none; } /* ============================ FOOTER =============================== */ .site-footer { background-color: #f6f6f6; padding: 3em 1.5em; text-align: center; font-family: 'Open Sans', sans-serif; font-size: 1rem; color: #555; line-height: 1.6; margin-top: 4em; } .site-footer .footer-content { max-width: 900px; margin: auto; } .site-footer a { color: inherit; text-decoration: underline; } /* ========================== RESPONSIVE GLOBAL (SOLO REGLAS GENERALES, NO ESPECÍFICAS DE HOMEPAGE O CPTs) ============================= */ @media (max-width: 980px) { .site-footer { font-size: 0.95rem; padding: 2.5em 1em; } } @media (max-width: 768px) { .menu-desktop { display: none; } .menu-toggle { display: block; } } @media (max-width: 480px) { .site-footer { font-size: 0.9rem; padding: 2em 1em; } }