/* ==========================================================================
   LIENZO BASE (FULL VIEWPORT FLEXBOX)
   Garantiza que toda vista ocupe al menos el 100% del alto y ancho de la
   pantalla, empujando el footer al fondo de forma natural.
   ========================================================================== */
body { 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; 
} 
.site-main { 
    flex: 1 0 auto; 
    width: 100%; 
}

.landing-container { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; text-align: center; padding: var(--layout-margin-space); }
.profile-image { width: 240px; height: 240px; border-radius: 50%; object-fit: cover; margin-bottom: 1.5rem; box-shadow: 0 4px 6px var(--layout-border-glass); }
.landing-title { font-size: var(--size-h1-title); color: var(--title-color); margin-bottom: 1rem; margin-top: 0; }

.social-links { display: flex; gap: 1rem; justify-content: center; }
.social-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.25rem; background-color: var(--color-primary); color: var(--layout-color-background); text-decoration: none; border-radius: var(--button-radius); transition: var(--button-transition); font-weight: 500; }
.social-btn:hover { background-color: var(--button-hover-bg); color: var(--button-hover-text); }

.page-container, .search-container { max-width: var(--layout-standard); margin: 0 auto; padding: var(--layout-margin-space); }
.page-header { margin-bottom: 2rem; border-bottom: 1px solid var(--layout-border-glass); padding-bottom: 1rem; }
.page-title { font-size: var(--size-h2-title); color: var(--title-color); margin: 0; }
.page-content { color: var(--color-general-text); line-height: 1.6; }

.search-form { display: flex; gap: 0.5rem; margin-bottom: 2rem; width: 100%; max-width: var(--layout-compact); }
.search-form label { flex: 1; }
.search-form .search-field { width: 100%; background: var(--form-bg); border: 1px solid var(--form-border); padding: var(--form-padding); border-radius: var(--form-radius); color: var(--form-text-color); transition: var(--form-transition); font-family: inherit; font-size: var(--size-general-text); }
.search-form .search-field:focus { background: var(--form-bg-focus); box-shadow: var(--form-focus-shadow); outline: none; }
.search-form .search-submit { display: flex; align-items: center; justify-content: center; background-color: var(--color-primary); color: var(--layout-color-background); border: none; width: var(--button-size); border-radius: var(--button-radius); cursor: pointer; transition: var(--button-transition); }
.search-form .search-submit:hover { background-color: var(--button-hover-bg); }

.search-results-list { list-style: none; padding: 0; margin: 0; }
.search-results-list li { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--layout-border-glass); }
.search-results-list li a { font-size: var(--size-h4-title); color: var(--title-color); text-decoration: none; font-weight: 600; }
.search-results-list li a:hover { color: var(--color-info); }
.search-excerpt { margin-top: 0.5rem; color: var(--color-secondary); }

.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; }

html { scroll-behavior: smooth; scroll-snap-type: y mandatory; scroll-padding-top: calc(var(--button-size) + var(--layout-margin-space)); }

.fp-wrapper { display: flex; flex-direction: column; width: 100%; }
.fp-section { height: 100vh; height: 100dvh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2rem var(--layout-margin-space); box-sizing: border-box; scroll-snap-align: start; scroll-snap-stop: always; }
.fp-container { max-width: var(--layout-standard); width: 100%; margin: 0 auto; }
.fp-container-wide { max-width: var(--layout-large); width: 100%; margin: 0 auto; height: 100%; display: flex; align-items: center; }
.fp-section-title { font-size: var(--size-h2-title); color: var(--title-color); text-align: center; margin-bottom: 2rem; }
.fp-hero-content { text-align: center; }

.social-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; background-color: var(--form-bg); color: var(--title-color); border-radius: 50%; transition: var(--button-transition); }
.social-icon-btn:hover { background-color: var(--color-primary); color: var(--layout-color-background); transform: translateY(-3px); }

.fp-botonera { display: flex; gap: 1rem; justify-content: center; margin-top: 2.5rem; flex-wrap: wrap; }
.fp-btn-scroll { padding: 0.75rem 1.5rem; border: 1px solid var(--form-border); border-radius: 2rem; color: var(--title-color); text-decoration: none; font-weight: 500; transition: var(--button-transition); }
.fp-btn-scroll:hover { background-color: var(--color-primary); color: var(--layout-color-background); border-color: var(--color-primary); }

.fp-split { display: grid; grid-template-columns: 4fr 6fr; gap: 4rem; align-items: stretch; height: 70vh; min-height: 0; width: 100%; }
.fp-split-reverse { grid-template-columns: 6fr 4fr; }
.fp-split-media { height: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; border-radius: 1rem; overflow: hidden; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }
.fp-vertical-image { width: 100%; height: 100%; object-fit: cover; }
.fp-split-content { height: 100%; min-height: 0; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.fp-scroll-area { max-height: 100%; overflow-y: auto; padding-right: 1.5rem; font-size: 1.1rem; line-height: 1.8; color: var(--color-general-text); }
.fp-scroll-area::-webkit-scrollbar { width: 6px; }
.fp-scroll-area::-webkit-scrollbar-track { background: transparent; }
.fp-scroll-area::-webkit-scrollbar-thumb { background: var(--form-border); border-radius: 4px; }
.fp-scroll-area::-webkit-scrollbar-thumb:hover { background: var(--color-secondary); }

.fp-grid-skills { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-content: start; }
.skill-card { background: var(--form-bg); padding: 1.5rem; border-radius: var(--form-radius); border: 1px solid var(--form-border); }
.skill-card h3 { margin: 0 0 0.5rem 0; font-size: 1.1rem; color: var(--title-color); }
.skill-card p { margin: 0; font-size: 0.95rem; color: var(--color-secondary); line-height: 1.5; }

.fp-btn-expand { display: none; width: 100%; padding: 1rem; background: var(--form-bg); border: 1px solid var(--form-border); border-radius: var(--button-radius); color: var(--title-color); font-weight: 600; cursor: pointer; margin-top: 1rem; transition: var(--button-transition); }

.fp-cta { text-align: center; }
.fp-cta-image { width: 240px; height: 240px; border-radius: 50%; object-fit: cover; margin: 0 auto 2rem auto; display: block; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
.fp-cta-links { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; }
.fp-btn-cta { padding: 1rem 2rem; background-color: var(--form-bg); color: var(--title-color); text-decoration: none; border-radius: var(--button-radius); font-weight: 600; transition: var(--button-transition); border: 1px solid var(--form-border); }
.fp-btn-cta-primary { background-color: var(--color-primary); color: var(--layout-color-background); border-color: var(--color-primary); }
.fp-btn-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }

@media (max-width: 768px) {
    .profile-image, .fp-cta-image { width: 180px; height: 180px; }
    .fp-section { height: auto; min-height: 100vh; scroll-snap-align: none; }
    .fp-split, .fp-split-reverse { grid-template-columns: 1fr; height: auto; gap: 2rem; }
    .fp-split-reverse .fp-split-media { order: -1; }
    .fp-split-media { height: 400px; }
    .fp-scroll-area { padding-right: 0; overflow: hidden; }
    .js-accordion-content .fp-scroll-area { max-height: 150px; position: relative; transition: max-height 0.4s ease; }
    .js-accordion-content .fp-scroll-area::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 60px; background: linear-gradient(transparent, var(--layout-color-background)); pointer-events: none; }
    .js-accordion-content.is-expanded .fp-scroll-area { max-height: 2000px; }
    .js-accordion-content.is-expanded .fp-scroll-area::after { display: none; }
    .fp-btn-expand { display: block; }
    .fp-botonera { flex-direction: column; width: 100%; }
    .fp-btn-scroll { width: 100%; box-sizing: border-box; }
    .fp-cta-links { flex-direction: column; }
    .fp-btn-cta { text-align: center; width: 100%; box-sizing: border-box; }
}

.is-scroll-locked { overflow: hidden !important; }

.page-404-container { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; text-align: center; padding-top: 4rem; padding-bottom: 4rem; }
.page-404-icon { margin-bottom: 2rem; color: var(--color-primary); }
.page-404-header { border-bottom: none; margin-bottom: 1rem; padding-bottom: 0; }
.page-404-title { font-size: 5rem; margin-bottom: 0.5rem; font-weight: 900; line-height: 1; letter-spacing: -0.05em; }
.page-404-subtitle { font-size: var(--size-h3-title); color: var(--color-secondary); margin: 0; font-weight: 500; }
.page-404-content { max-width: 500px; margin: 0 auto; }
.page-404-text { margin-bottom: 2.5rem; font-size: 1.1rem; line-height: 1.6; }
.page-404-search { margin-bottom: 3rem; }
.btn-404-home { display: inline-flex; align-items: center; justify-content: center; width: auto; padding: 1rem 3rem; text-decoration: none; border-radius: 2rem; }