/*!
Theme Name: igor
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: igor
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

igor is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
    margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
    display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
    font-size: 4.5rem;
    margin: 0.67em 0;
    text-transform: uppercase;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
    font-family: monospace, monospace;
    font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
    background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
    font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
    border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
    overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
    text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
    padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
    vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
    overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
    display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
    display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
    display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
    display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
    color: #404040;
    font-size: 1rem;
    line-height: 1.5;
    font-family: "Playfair Display", serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    clear: both;
    font-family: "Lexend", sans-serif;
    font-weight: 400;
    font-style: normal;
}

p {
    margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
    font-style: italic;
}

blockquote {
    margin: 0 1.5em;
}

address {
    margin: 0 0 1.5em;
}

pre {
    background: #eee;
    font-family: "Courier 10 Pitch", courier, monospace;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1.6em;
}

code,
kbd,
tt,
var {
    font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
    border-bottom: 1px dotted #666;
    cursor: help;
}

mark,
ins {
    background: #fff9c0;
    text-decoration: none;
}

big {
    font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
    background: #fff;
}

hr {
    background-color: #ccc;
    border: 0;
    height: 1px;
    margin-bottom: 1.5em;
}

ul,
ol {
    margin: 0 0 1.5em 3em;
}

ul {
    list-style: disc;
}

ol {
    list-style: decimal;
}

li>ul,
li>ol {
    margin-bottom: 0;
    margin-left: 1.5em;
}

dt {
    font-weight: 700;
}

dd {
    margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
    max-width: 100%;
}

img {
    height: auto;
    max-width: 100%;
}

figure {
    margin: 1em 0;
}

table {
    margin: 0 0 1.5em;
    width: 100%;
}

/* Links
--------------------------------------------- */
a {
    color: #4169e1;
}

a:visited {
    color: #800080;
}

a:hover,
a:focus,
a:active {
    color: #191970;
}

a:focus {
    outline: thin dotted;
}

a:hover,
a:active {
    outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    border: 1px solid;
    border-color: #ccc #ccc #bbb;
    border-radius: 3px;
    background: #e6e6e6;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1;
    padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
    border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
    border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
    color: #666;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
    color: #111;
}

select {
    border: 1px solid #ccc;
}

textarea {
    width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
    display: block;
    width: 100%;
}

.main-navigation ul {
    display: none;
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.main-navigation ul ul {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    float: left;
    position: absolute;
    top: 100%;
    left: -999em;
    z-index: 99999;
}

.main-navigation ul ul ul {
    left: -999em;
    top: 0;
}

.main-navigation ul ul li:hover>ul,
.main-navigation ul ul li.focus>ul {
    display: block;
    left: auto;
}

.main-navigation ul ul a {
    width: 200px;
}

.main-navigation ul li:hover>ul,
.main-navigation ul li.focus>ul {
    left: auto;
}

.main-navigation li {
    position: relative;
}

.main-navigation a {
    display: block;
    text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
    display: block;
}

@media screen and (min-width: 37.5em) {

    .menu-toggle {
        display: none;
    }

    .main-navigation ul {
        display: flex;
    }
}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
    margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
    display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
    flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
    text-align: end;
    flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
    display: block;
}

.post,
.page {
    margin: 0 0 1.5em;
}

.updated:not(.published) {
    display: none;
}

.page-content,
.entry-content,
.entry-summary {
    margin: 1.5em 0 0;
}

.page-links {
    clear: both;
    margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
    word-wrap: break-word;
}

.bypostauthor {
    display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
    margin: 0 0 1.5em;
}

.widget select {
    max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
    border: none;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
    display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
    margin-bottom: 1.5em;
    max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption .wp-caption-text {
    margin: 0.8075em 0;
}

.wp-caption-text {
    text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
    margin-bottom: 1.5em;
    display: grid;
    grid-gap: 1.5em;
}

.gallery-item {
    display: inline-block;
    text-align: center;
    width: 100%;
}

.gallery-columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
    grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
    grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
    grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
    grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
    grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
    display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
    display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
    display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.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 !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
    outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

    /*rtl:ignore*/
    float: left;

    /*rtl:ignore*/
    margin-right: 1.5em;
    margin-bottom: 1.5em;
}

.alignright {

    /*rtl:ignore*/
    float: right;

    /*rtl:ignore*/
    margin-left: 1.5em;
    margin-bottom: 1.5em;
}

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5em;
}


/* Estilos Base e Interfaz */
body {
    overflow-x: hidden;
    margin: 0;
}

/* Portada Inicial */
.home-hero {
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #0b0b0b;
    color: #ffffff;
    position: relative;
}

.hero-content {
    text-align: center;
}

.scroll-indicator {
    position: absolute;
    bottom: 40px;
    /* Distancia desde abajo */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    /* Espacio entre el texto y la flecha */
    color: #fff;
    /* Ajusta el color según el fondo de tu hero */
    font-size: 14px;
    letter-spacing: 1px;
    opacity: 0.7;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.scroll-indicator:hover {
    opacity: 1;
}

/* Animación CSS para la flecha de Lucide */
.scroll-indicator .lucide {
    animation: bounce-scroll 2s infinite cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

/* Keyframes del rebote suave */
@keyframes bounce-scroll {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(10px);
        /* Qué tanto baja la flecha */
    }
}

/* Contenedor de Obras */
.portfolio-container {
    position: relative;
    width: 100%;
}

/* El contenedor de cada obra individual */
.obra-section {
    height: 100vh !important;
    width: 100vw !important;
    overflow: hidden !important;
    position: relative;
    background-color: #fcfcfc;
}

/* El riel interno que DEBE ser horizontal */
.obra-horizontal-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    /* Evita estrictamente que vayan hacia abajo */
    height: 100% !important;
    width: max-content !important;
    /* Se estira horizontalmente todo lo necesario */
    will-change: transform;
}

/* Cada bloque interno (el texto y cada imagen) */
.obra-panel {
    height: 100vh !important;
    flex-shrink: 0 !important;
    /* Evita que el navegador comprima las imágenes para que quepan en la pantalla */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* El panel del texto */
.obra-info {
    width: 40vw !important;
    background: #f4f4f4;
}

/* Los paneles de las imágenes */
.obra-image-panel {
    width: auto !important;
    /* El ancho dependerá de la proporción de la foto */
    padding: 0 4rem;
}

.wrapper-imagen {
    height: 80vh;
    margin: 0;
}

.wrapper-imagen img {
    height: 100%;
    width: auto;
    object-fit: contain;
}

.wrapper-imagen figcaption {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: #666;
    font-style: italic;
}

/* Transición suave para el menú de navegación */
.main-navigation {
    opacity: 1;
    visibility: visible;
    max-width: 1000px;
    /* Un valor alto para que el menú quepa abierto */
    overflow: hidden;
}

/* Clase que aplicaremos con JS para ocultar el menú */
.main-navigation.is-hidden {
    opacity: 0;
    visibility: hidden;
    max-width: 0;
    margin: 0;
    padding: 0;
}

.main-navigation a {
    color: #000;
}

.floating-header {
    position: fixed;
    top: 20px;
    /* Distancia desde arriba */
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    /* Asegura que esté por encima de todo */
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Lexend", sans-serif;

    /* Estilos visuales Liquid Glass */
    background-color: rgba(255, 255, 255, 0.6); /* Changed to white */
    padding: 5px 25px;
    border-radius: 50px;
    
    /* Standard frosted glass fallback */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(20px) saturate(1.5);
    transition: all 0.3s ease;
}

/* Apple Liquid Glass effect para navegadores compatibles */
@supports (backdrop-filter: url(#liquidGlassFilter)) {
    .floating-header {
        /* Specular highlight (Rim light) */
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), 
                    inset 0 0 0 1px rgba(255, 255, 255, 0.5),
                    0 8px 32px rgba(0, 0, 0, 0.15);
        backdrop-filter: url(#liquidGlassFilter);
    }
}

/* Contenedor que agrupa el círculo y la flecha */
.floating-actions {
    display: none;
    align-items: center;
    gap: 10px;
    /* Separación entre el círculo y la flecha */

    /* Estado inicial: oculto */
    opacity: 0;
    visibility: hidden;
    transform: scale(0.5);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.floating-actions.is-visible {
    display: flex;
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

/* Estilos de tu botón original */
.scroll-to-top-btn {
    background: #000;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 9px;
}

.scroll-to-next-btn,
.scroll-to-prev-btn {
    background: transparent;
    color: #000;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 9px;
}

.scroll-to-next-btn svg,
.scroll-to-prev-btn svg {
    width: 40px;
    height: 40px;
}

.scroll-to-top-btn svg {
    width: 40px;
    height: 40px;
}

/* --- ESTILOS DEL CÍRCULO SVG --- */
.progress-ring {
    /* Rotamos -90deg para que el arco empiece desde arriba (a las 12 en punto) */
    transform: rotate(-90deg);
}

.progress-ring__progress {
    /* Transición suave para cuando el usuario hace scroll rápido */
    transition: stroke-dashoffset 0.1s linear;
}

/* Estado deshabilitado para los botones de navegación */
.scroll-to-prev-btn:disabled,
.scroll-to-next-btn:disabled,
.scroll-to-prev-btn.is-disabled,
.scroll-to-next-btn.is-disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
    /* Evita cualquier interacción o hover */
}

/* Optimización móvil: Swipe horizontal nativo y Scroll Snapping */
@media (max-width: 768px) {
    .obra-section {
        height: 100vh !important;
        /* Ocupa el 100% de la pantalla para concentrarse en la obra */
        width: 100vw !important;
        overflow-x: auto !important;
        /* Activa el scroll horizontal con el dedo */
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        /* Efecto "imán" al hacer swipe */
        -webkit-overflow-scrolling: touch;
        /* Fluidez perfecta en iOS */
    }

    /* Opcional: Ocultar la barra de scroll en móviles para que parezca una app */
    .obra-section::-webkit-scrollbar {
        display: none;
    }

    .obra-section {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .obra-horizontal-track {
        display: flex !important;
        flex-direction: row !important;
        /* Mantenemos los paneles uno al lado del otro */
        width: max-content !important;
        height: 100vh !important;
        transform: none !important;
        /* Evita que GSAP mueva esto en móviles */
    }

    .obra-panel {
        width: 100vw !important;
        /* Cada panel ocupa el 100% del ancho de la pantalla */
        height: 100vh !important;
        padding: 2rem 1.5rem;
        scroll-snap-align: center;
        /* El efecto "imán" centrará cada imagen/texto */
        box-sizing: border-box;
    }

    .obra-info {
        width: 100vw !important;
        order: -1 !important;
        /* Magia pura: Fuerza el título al inicio sin importar el HTML */
    }

    .wrapper-imagen {
        height: 70vh;
        /* Ajustado para que quepa el texto de la leyenda en móvil */
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .wrapper-imagen img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        opacity: 1 !important;
    }
}

/* --- INDICADOR DE SWIPE LATERAL --- */

/* Oculto por defecto en escritorio */
.mobile-swipe-indicator {
    display: none;
}

@media (max-width: 768px) {

    /* Mostramos el indicador solo en móvil */
    .mobile-swipe-indicator {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 2rem;
        /* Separación desde la descripción */
        opacity: 0.6;
        color: #000;
        /* Cambia esto si tu fondo requiere otro color */
    }

    /* Animación del ícono de Lucide (rebote horizontal) */
    .mobile-swipe-indicator .lucide {
        width: 32px;
        height: 32px;
        animation: swipe-bounce-x 1.5s infinite ease-in-out;
    }

    /* Keyframes para el rebote de izquierda a derecha */
    @keyframes swipe-bounce-x {

        0%,
        100% {
            transform: translateX(0);
        }

        50% {
            transform: translateX(12px);
            /* Distancia del rebote lateral */
        }
    }
}

/* --- BOTÓN MENÚ MÓVIL (LUCIDE) --- */
.menu-toggle {
    background: transparent;
    border: none;
    padding: 5px;
    cursor: pointer;
    display: none;
    /* Oculto en escritorio */
    align-items: center;
    justify-content: center;
    color: #000;
}

.menu-toggle .icon-close {
    display: none;
    /* Ocultamos la 'x' por defecto */
}

/* Estado activo del botón: Oculta hamburguesa, muestra 'X' */
.main-navigation.toggled .menu-toggle .icon-menu {
    display: none;
}

.main-navigation.toggled .menu-toggle .icon-close {
    display: block;
}

/* Oculta dinámicamente el enlace de la página en la que el usuario ya está */
.main-navigation .current-menu-item,
.main-navigation .current_page_item {
    display: none !important;
}

@media (max-width: 768px) {
    .menu-toggle {
        display: flex;
    }

    /* 1. ANCLAMOS EL DIÁLOGO A LA PANTALLA */
    .menu-dialog-wrapper {
        position: fixed !important;
        top: 85px !important;
        left: 50% !important;
        /* Mandamos el borde izquierdo al centro */
        width: 90vw !important;
        max-width: 320px !important;
        /* Evitamos que sea gigantesco en tablets */

        background-color: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(15px) !important;
        border-radius: 20px !important;
        padding: 20px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
        z-index: 999999 !important;

        /* ESTADO INICIAL OCULTO: Mantenemos el centrado (-50%) y lo subimos un poco (-20px) */
        opacity: 0;
        visibility: hidden;
        transform: translateX(-50%) translateY(-20px) !important;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    /* 2. ESTADO ACTIVO: Forzamos la aparición */
    .main-navigation.menu-activo .menu-dialog-wrapper {
        opacity: 1 !important;
        visibility: visible !important;
        /* MANTENEMOS el centrado (-50%) y lo bajamos a su posición final (0) */
        transform: translateX(-50%) translateY(0) !important;
    }

    /* 3. DESBLOQUEAMOS EL MENÚ DE WORDPRESS: Underscores lo oculta por defecto */
    .menu-dialog-wrapper ul,
    .main-navigation.menu-activo .menu-dialog-wrapper ul,
    .main-navigation.menu-activo .menu-dialog-wrapper div {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    /* Animación de la X */
    .main-navigation.menu-activo .menu-toggle .icon-menu {
        display: none !important;
    }

    .main-navigation.menu-activo .menu-toggle .icon-close {
        display: block !important;
    }

    /* Estilos de los enlaces */
    .menu-dialog-wrapper li {
        text-align: center;
        margin-bottom: 15px;
    }

    .menu-dialog-wrapper li:last-child {
        margin-bottom: 0;
    }

    .menu-dialog-wrapper a {
        font-family: "Lexend", sans-serif;
        font-size: 1.2rem;
        font-weight: 600;
        color: #000;
        text-decoration: none;
        display: block;
        padding: 10px 0;
    }
}

/* ==========================================================================
   HERO FULLSCREEN PARA PÁGINAS (PAGE.PHP)
   ========================================================================== */

/* Hero anclado al fondo */
.page-hero-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    /* Lo manda detrás de todo el sitio */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #111;
    /* Color por defecto si no hay imagen */
    overflow: hidden;
}

/* Imagen de fondo de la página */
.hero-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

/* Overlay negro que se oscurece por JS */
.hero-scroll-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradiente sutil base */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 100%);
    opacity: 0;
    /* JS controlará esto de 0.2 a 0.9 */
    z-index: 2;
    will-change: opacity;
}

/* Título de la página sobre el Hero */
.page-hero-fixed .hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 0 20px;
}

.page-hero-fixed .hero-content h1 {
    color: #ffffff;
    margin: 0;
    font-size: clamp(3rem, 5vw, 6rem);
    /* Responsive typography */
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   CONTENIDO DE LA PÁGINA DESLIZANTE
   ========================================================================== */

.content-over-hero {
    margin-top: 100vh;
    /* Obliga al contenido a empezar justo DEBAJO de la pantalla */
    position: relative;
    z-index: 10;
    /* Se desliza por encima del Hero (-1) */
}

/* El bloque sólido que tapa al hero */
.content-over-hero .page-container {
    background-color: #ffffff;
    /* El fondo sólido es OBLIGATORIO para ocultar el hero */
    padding: 4rem 2rem;
    min-height: 60vh;
    border-radius: 30px 30px 0 0;
    /* Bordes redondeados modernos arriba */
    box-shadow: 0 -15px 40px rgba(0, 0, 0, 0.15);
    /* Sombra hacia arriba para dar volumen */
    max-width: 600px;
    margin: 0 auto;
}


/* ==========================================================================
   DIAGRAMACIÓN EXCLUSIVA PARA IMPRESIÓN Y PDF (@media print)
   ========================================================================== */
@media print {

    /* 1. LIMPIEZA DE INTERFAZ: Ocultamos lo que no tiene sentido en papel */
    #masthead,
    .floating-header,
    #floating-actions,
    .scroll-indicator,
    .mobile-swipe-indicator,
    footer,
    #sidebar,
    .comments-area {
        display: none !important;
    }

    /* 2. CONFIGURACIÓN DE PÁGINA (Márgenes del papel) */
    @page {
        size: auto;
        /* Permite que el navegador elija A4/Carta automáticamente */
        margin: 20mm 15mm 20mm 15mm;
        /* Márgenes: arriba, derecha, abajo, izquierda */
    }

    /* 3. RESETEO DE COLORES Y FONDOS */
    html,
    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
        /* El pt (punto) es la unidad tipográfica ideal para impresión */
        line-height: 1.5;
    }

    /* 4. ADAPTAR EL CONTENIDO DE PAGE.PHP (Quitar el fullscreen) */
    .page-hero-fixed {
        position: relative !important;
        height: auto !important;
        background: none !important;
        page-break-after: avoid;
        /* Evita que el título quede huérfano */
    }

    .hero-bg-image,
    .hero-scroll-overlay {
        display: none !important;
        /* Ocultamos la imagen gigante para no gastar tinta */
    }

    .page-hero-fixed .hero-content h1 {
        color: #000 !important;
        text-shadow: none !important;
        font-size: 28pt !important;
        text-align: left;
        margin-bottom: 20mm;
    }

    .content-over-hero {
        margin-top: 0 !important;
        /* Eliminamos el espacio de 100vh */
    }

    .content-over-hero .page-container {
        padding: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    /* 5. CONTROL DE SALTOS DE PÁGINA (Para que no se corten textos a la mitad) */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        page-break-after: avoid;
        /* No dejes títulos solos al final de una hoja */
        page-break-inside: avoid;
    }

    p,
    blockquote,
    ul,
    ol {
        page-break-inside: avoid;
        /* Intenta mantener los párrafos unidos */
    }

    img {
        max-width: 100% !important;
        page-break-inside: avoid;
        /* Evita que una imagen se parta horizontalmente */
    }

    /* 6. EXPANDIR LOS ENLACES (Opcional pero muy útil) */
    /* Muestra la URL escrita al lado de los enlaces de texto */
    .entry-content a[href^="http"]:after {
        content: " (" attr(href) ") ";
        font-size: 9pt;
        color: #555;
    }
}

/* ==========================================================================
       OVERLAY DEL MENÚ MÓVIL (Fondo borroso y desaturado)
       ========================================================================== */
.menu-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(8px) saturate(0%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(0%) !important;
    z-index: 9998 !important;
    /* Debajo del header pero encima del resto */

    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
}

/* Estado activo: Ahora es controlado por la clase en el BODY */
body.menu-movil-abierto .menu-overlay {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* BONUS UX: Bloquea el scroll del fondo mientras el menú está abierto */
body.menu-movil-abierto {
    overflow: hidden !important;
}

/* Posicionamiento del Canvas */
#hero-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Detrás del indicador de scroll */
    pointer-events: none; /* Permite que los clics pasen a través si es necesario */
}

/* Clase para ocultar elementos visualmente manteniendo el SEO intacto */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/* ==========================================================================
   CORRECCIÓN DE ORDEN EN RESTRICCIONES RTL (ZIGZAG ESCRITORIO)
   ========================================================================== */
@media (min-width: 769px) {
    
    .obra-section[data-direction="rtl"] .obra-horizontal-track {
        display: flex !important;
    }

    /* 1. LOS DETALLES: Van a la extrema izquierda (es lo último que se ve al salir de la sección) */
    .obra-section[data-direction="rtl"] .detalle-recorte {
        order: 1 !important;
    }

    /* 2. LA OBRA ORIGINAL: Va en el medio */
    .obra-section[data-direction="rtl"] .original-full {
        order: 2 !important;
    }

    /* 3. LA INFO (TÍTULO): Va a la extrema derecha (es lo primero que enfoca la cámara al entrar) */
    .obra-section[data-direction="rtl"] .obra-info {
        order: 3 !important;
    }
}