/*!
Theme Name: snow
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: snow
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.

snow 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-family: 'Montserrat', sans-serif;
    font-weight: 100;
    font-size: 50px;
    margin: 0.67em 0;
    color: #939393;
}

h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 100;
    font-size: 40px;
}

h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 250;
    font-size: 20px;
}

h4 {
    font-family: 'handwrite', sans-serif;
	font-size: 70px;
	margin: 0.27em 0;
}

@media screen and (max-width: 1200px) {
    h1,h4 {
        font-size: 40px;
    }
}

@media screen and (max-width: 992px) {
    h1,h4 {
        font-size: 35px;
    }
}

@media screen and (max-width: 768px) {
    h1,h4 {
        font-size: 30px;
	}
}

@media screen and (max-width: 576px) {
    h1,h4 {
        font-size: 24px;
		color: #202020;!important;
    }
}

/* Para pantallas más pequeñas (por ejemplo, menos de 768px) */
@media (max-width: 768px) {
    h2 {
        font-size: 30px;
    }

    h3 {
        font-size: 18px;
    }
}

/* Para pantallas aún más pequeñas (por ejemplo, menos de 480px) */
@media (max-width: 480px) {
    h2 {
        font-size: 25px;
    }

    h3 {
        font-size: 16px;
    }
}

.centrado {
    text-align: center;
}

/* 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-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/montserrat/Montserrat-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/montserrat/Montserrat-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/montserrat/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/montserrat/Montserrat-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/montserrat/Montserrat-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/montserrat/Montserrat-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/montserrat/Montserrat-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/montserrat/Montserrat-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/montserrat/Montserrat-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/montserrat/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/montserrat/Montserrat-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/montserrat/Montserrat-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/montserrat/Montserrat-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/montserrat/Montserrat-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/montserrat/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/montserrat/Montserrat-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/montserrat/Montserrat-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/montserrat/Montserrat-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/montserrat/Montserrat-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/montserrat/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: 'static';
    src: url('fonts/static/BricolageGrotesque-Regular.ttf') format('truetype'),
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'handwrite';
    src: url('fonts/ShadowsIntoLight-Regular.ttf') format('truetype'),
    font-weight: normal;
    font-style: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

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-color: white;
    transition: background-color 0.8s ease-in-out;
}

body.dark-mode {
    background-color: black;
}

.work-section {
    min-height: 100vh; /* Para asegurarnos de que ocupa toda la pantalla */
    color: white; /* Cambia el color del texto para que contraste */
    padding: 50px;
}


hr {
	background-color: #000000;
	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;
}*/
a.red {
    color: #E22D28 !important;
    text-decoration: none !important;
}
/* 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;
}

html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Asegúrate de que todos los elementos se ajusten correctamente */
* {
    box-sizing: border-box;
}

.wp-block-spacer {
    height: 3vh;
}

/* CURSOR
body {
    cursor: url('http://danielpineda.local/wp-content/uploads/2024/08/cursor.png'), auto;
} */

/* LOGO */
.site-logo {
    position: absolute;
    top: 20px; /* Ajusta según sea necesario */
    left: 20px; /* Ajusta según sea necesario */
    max-width: 80px; /* Ajusta el tamaño según sea necesario */
}

.site-header {
    position: relative; /* Asegura que el logo se posicione dentro del contenedor */
}

body {
    padding: 0 10%; /* Añade margen de 20px a ambos lados de la página */
    box-sizing: border-box; /* Asegura que el padding se incluya en el ancho total */
}

/* FOTO DE PERFIL CON TEXTO */
/* Contenedor principal para la imagen */
.image-text-container {
    position: relative;
    width: 100%; /* Ajusta esto según el ancho deseado para la imagen */
    margin: 0 auto; /* Centra el contenedor en la página */
    margin-top: 20px; /* Espaciado superior, ajustable */
}

/* Imagen con degradado */
.image-text-container img {
    width: 100%; /* La imagen ocupa todo el ancho del contenedor */
    max-height: 800px; /* Ajusta esta altura máxima según lo necesites */
    object-fit: cover; /* Mantiene la proporción de la imagen sin distorsión */
    display: block;
    border-radius: 35px;
    -webkit-mask-image: linear-gradient(to right, black 60%, transparent 95%);
    mask-image: linear-gradient(to right, black 60%, transparent 95%); /* Degradado a la derecha */
}

/* VÍDEO FULL */
.full-width-video {
    position: relative; /* Necesario para que la superposición se posicione correctamente */
    width: 100%;
    max-width: 100%; /* Asegura que el video ocupe todo el ancho disponible */
    overflow: hidden; /* Oculta cualquier desbordamiento inesperado */
    margin: 0 auto; /* Centra el video si está en un contenedor más grande */
    border-radius: 35px; /* Bordes redondeados */
    margin-bottom: 40px;
}

.full-width-video video {
    width: 100%; /* El video ocupa todo el ancho del contenedor */
    height: auto; /* Mantiene la proporción del video */
    display: block; /* Asegura que el video se muestre como un bloque */
}

.video-overlay {
    position: absolute; /* La superposición está posicionada sobre el video */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8); /* Fondo semi-transparente */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none; /* Asegura que el overlay no bloquee la interacción con el video */
}

.full-width-video:hover .video-overlay {
    opacity: 1; /* La superposición aparece al hacer hover */
}

.video-description {
    color: white;
    font-size: 18px;
    text-align: center;
    padding: 10px;
    font-family: 'Montserrat', sans-serif;
	font-weight:700;
}



/* PIE DE PÁGINA */
.site-footer {
    text-align: center;
    padding: 20px;
    /*background-color: #fff; /* Color de fondo */
    border-top: 0px solid #eaeaea; /* Línea superior */
}

.footer-links {
    display: flex;
    justify-content: space-between;
    max-width: 800px; /* Limita el ancho máximo */
    margin: 0 auto;
    flex-wrap: wrap;
}

.footer-links p, .footer-links a {
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    color: #000;
    text-decoration: none;
    margin: 0;
}

.footer-links a:hover {
    transform: scale(1.1); /* Aumenta el tamaño del elemento*/
    transition: all 0.3s ease;
    /*color: #E22D28;*/
}

/* Diseño responsivo */
@media (max-width: 768px) {
    .footer-links {
        flex-direction: column; /* Cambia la dirección de los elementos a columna */
        align-items: center; /* Centra los elementos horizontalmente */
    }

    .footer-links p, .footer-links a {
        margin-bottom: 10px; /* Añade espacio entre los elementos */
    }
}

@media (max-width: 480px) {
    .footer-links {
        max-width: 100%; /* Ocupa todo el ancho disponible en pantallas muy pequeñas */
    }

    .footer-links p, .footer-links a {
        font-size: 12px; /* Reduce un poco el tamaño del texto en pantallas muy pequeñas */
    }
}

/* MENÚ */
.side-menu {
    position: fixed;
    right: 20px; /* Ajusta la distancia desde el borde derecho */
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    font-family: 'Montserrat', sans-serif;
}

.side-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: right;
}

.side-menu ul li {
    margin-bottom: 20px; /* Espacio entre los elementos del menú */
}

.side-menu ul li a {
    font-size: 14px;
    color: black;
    text-decoration: none;
    transition: all 0.3s ease;
}

.side-menu ul li a:hover {
    font-size: 24px;
    /*font-weight: strong;*/
    /*color:#E22D28;*/
}

/* Estilo del menú lateral para pantallas grandes */
@media screen and (min-width: 769px) {
    .side-menu {
        display: block;
    }

    .mobile-menu {
        display: none;
    }
}

/* Estilo para pantallas pequeñas */
@media screen and (max-width: 768px) {
    .side-menu {
        display: none;
    }

    .mobile-menu {
        display: block;
        position: fixed;
        right: 0px;
        top: 0px;
        z-index: 1000;
    }
}

/* Estilo del icono "+" */
.plus-icon {
    font-size: 40px;
    color: black;
    position: fixed; /* Hacer que esté siempre visible */
    right: 30px;
    top: 30px;
    z-index: 1001; /* Asegura que esté por encima del menú */
    transition: transform 0.3s ease;
}

.plus-icon.open {
    transform: rotate(45deg); /* Gira el + para que parezca una x */
}

/* Estilo del menú desplegable */
.dropdown-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 100vw; /* Ocupa todo el ancho de la pantalla */
    height: 100vh; /* Ocupa toda la altura de la pantalla */
    background-color: white; /* Fondo blanco */
    z-index: 999;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra los enlaces verticalmente */
    align-items: center; /* Centra los enlaces horizontalmente */
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.dropdown-menu.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.dropdown-menu a {
    font-size: 24px; /* Ajusta el tamaño de los enlaces */
    display: block;
    margin-bottom: 10px; /* Espaciado entre enlaces */
    color: black;
    text-decoration: none;
    text-align: center;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.dropdown-menu.show a {
    opacity: 1;
    transform: translateY(0);
}

body.dark-mode .side-menu a,

body.dark-mode .plus-icon {
    color: white !important; /* Cambia el color del icono + */
}

/* TITULO WORK */
.text-container {
    position: relative;
    text-align: center;
    margin-top: 50px; /* Ajusta según sea necesario */
}

.large-text {
    font-size: 400px; /* Tamaño grande para la palabra "work" */
    font-weight: 100;
    color: #d3d3d3; /* Color gris claro */
    margin: 0;
    line-height: 1;
}

.overlay-text {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 80px; /* Tamaño para la palabra "product" */
    color: #E22D28; /* Color rojo */
    margin: 0;
}

/* Ajustes para pantallas medianas */
@media screen and (max-width: 1200px) {
    .large-text {
        font-size: 300px;
    }
    .overlay-text {
        font-size: 60px;
    }
}

/* Ajustes para pantallas pequeñas */
@media screen and (max-width: 768px) {
    .large-text {
        font-size: 200px;
    }
    .overlay-text {
        font-size: 40px;
    }
}

/* Ajustes para pantallas muy pequeñas */
@media screen and (max-width: 480px) {
    .large-text {
        font-size: 100px;
    }
    .overlay-text {
        font-size: 30px;
        top: 60%;
    }
}

.svg-title {
    width: 100vw; /* Ocupa todo el ancho de la pantalla */
    height: auto; /* Se ajusta automáticamente */
    display: block;
    margin: 0 auto;
}

/* Para asegurarnos de que no se deforme */
.svg-title {
    max-width: 100%;
    height: auto;
}

/* Cambio de color al pasar el cursor */
.svg-title:hover {
    fill: #FF5733; /* Cambia de color */
    transform: scale(1.1); /* Hace un pequeño zoom */
}

/* PROYECTOS */
.projects-container {
    margin-top: 50px; /* Espacio en la parte superior del contenedor general */
}

.project {
    display: flex;
    align-items: center;
    margin-bottom: 40px; /* Espacio entre proyectos */
}

.project-image {
    width: 50%;
    aspect-ratio: 1/1; /* Esto asegura que el contenedor de la imagen sea cuadrado */
    object-fit: cover; /* Recorta la imagen para llenar el contenedor */
    border-radius: 35px; /* Bordes redondeados */
    margin-right: 50px; /* Espaciado entre la imagen y el texto */
}

.project-details {
    width: 60%;
}

/* Estilo base para el título del proyecto */
.project-title {
    color: #e22d28;
    margin: 0;
    text-decoration: none;
}

/* Enlace sin subrayado y con la transición aplicada */
.project-title a {
    color: #e22d28;
    text-decoration: none;
    border-bottom: none;
    display: inline-block; /* Esto es importante para que el transform funcione correctamente */
    transition: transform 0.3s ease, color 0.3s ease; /* Aplica la transición para color y transform */
}

/* Animación al hacer hover */
.project-title a:hover {
    transform: scale(1.1); /* Efecto de aumentar el tamaño */
    color: #e22d28; /* Mantener el color gris */
    text-decoration: none; /* Mantener sin subrayado */
}

.project-subtitle {
    /*font-size: 25px;*/
    color: #333;
    margin: 0;
}

/* Para alternar la disposición en proyectos */
.project.reverse {
    flex-direction: row-reverse; /* Invierte la dirección de los elementos */
}

.project.reverse .project-details {
    text-align: right; /* Alinea el contenido textual a la derecha */
}

.project.reverse .project-image {
    margin-right: 0;
    margin-left: 50px; /* Ajusta el espacio cuando la imagen está a la derecha */
}

/* Diseño responsivo */
@media (max-width: 768px) {
    .project {
        flex-direction: column;
        align-items: center; /* Asegura que el contenido esté centrado horizontalmente */
        text-align: center; /* Centra el texto dentro del contenedor */
    }

    .project.reverse {
        flex-direction: column;
        align-items: center; /* Asegura que el contenido esté centrado horizontalmente */
        text-align: center; /* Centra el texto dentro del contenedor */
    }

    .project-image {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
        margin-bottom: 0px; /* Espacio entre la imagen y el texto */
        margin-top:20px;
    }

    .project-details {
        width: 100%;
        text-align: center; /* Asegura que el contenido textual esté centrado */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .project-title, .project-subtitle {
        margin-left: auto;
        margin-right: auto;
    }
}

/* MÚSICA */
.music-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas de igual tamaño */
    gap: 10px; /* Espacio entre los elementos de la cuadrícula */
    grid-auto-flow: dense; /* Ayuda a rellenar los espacios vacíos en la cuadrícula */
}

.grid-item {
    position: relative;
    overflow: hidden;
    border-radius: 35px;
}

.grid-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover; /* Asegura que la imagen se ajuste al tamaño del contenedor */
    border-radius: 35px;
}

/* Ajustes para celdas más grandes */
.grid-item.large {
    grid-column: span 2;
    grid-row: span 2;
}

.grid-item.tall {
    grid-row: span 2;
}

.grid-item.big {
    grid-column: span 3; /* Ocupa todas las columnas */
    grid-row: span 2; /* Ocupa dos filas */
}

/* Estilo responsivo */
@media (max-width: 768px) {
    .music-grid {
        grid-template-columns: repeat(2, 1fr); /* Cambia a 2 columnas en pantallas más pequeñas */
    }

    .grid-item.large,
    .grid-item.tall,
    .grid-item.big {
        grid-column: span 2; /* Ocupa dos columnas en pantallas pequeñas */
        grid-row: span 1; /* Vuelve a ocupar solo una fila en pantallas pequeñas */
    }
}

@media (max-width: 480px) {
    .music-grid {
        grid-template-columns: 1fr; /* Cambia a 1 columna en pantallas muy pequeñas */
    }

    .grid-item.large,
    .grid-item.tall,
    .grid-item.big {
        grid-column: span 1; /* Ocupa una columna en pantallas muy pequeñas */
        grid-row: span 1; /* Vuelve a ocupar solo una fila en pantallas muy pequeñas */
    }
}

/* ANIMACIÓN IMÁGENES */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

img, video, figure {
    opacity: 0; /* Comienza oculto */
    transform: translateY(20px); /* Posición inicial fuera de vista */
    visibility: hidden; /* Asegura que no se vean antes de la animación */
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out; /* Transición animada */
}

img.visible, video.visible, figure.visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible; /* Se vuelven visibles después de la animación */
    animation: fadeInUp 0.8s ease-in-out; /* Ejecutar animación */
}

/* NO TITULOS */
h1.entry-title {
    display: none !important;
}
.menu-toggle {
    display: none;
}


/* ABOUT ME */
/*.bio {
    color:black;
}*/

.red {
    color: #E22D28 !important;
}

.cv-section {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    margin: 0px 0;
}

.timeline {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 20px;
}

.entry {
    display: contents;
}

.details {
    margin-left: 20px;
}

@media (max-width: 768px) {
    .timeline {
        grid-template-columns: 1fr;
    }

    .year {
        text-align: left;
    }

    .details {
        margin-left: 0;
    }
}

/* CONTACT ME */
.contact-section {
    text-align: left;
    line-height:1;
}

.contact-link {
    text-decoration: none;
    display: inline-block;
    transition: color 0.3s, transform 0.3s;
}

.contact-link:hover {
    transform: scale(1.1);
}

.contact-section a {
    margin-bottom: 60px; /* Ajusta este valor para añadir más espacio entre los enlaces */
}


/* PROYECTOS INDIVIDUALES */
/* Carrusel de imágenes */
.carousel {
    position: relative;
    width: 100%;
    padding-top: 100%; /* Esto crea un contenedor cuadrado */
    overflow: hidden;
    border-radius: 35px;
}

.carousel img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    visibility: hidden; /* Inicialmente ocultas */
    opacity: 0;
    z-index: 0; /* Mantener todas las imágenes en un índice bajo inicialmente */
    transition: opacity 1s ease, visibility 0s 1s; /* Espera 1s para ocultar la imagen */
}

.carousel img.active {
    visibility: visible;
    opacity: 1;
    z-index: 1; /* La imagen activa tiene mayor prioridad */
    transition: opacity 1s ease, visibility 0s; /* Transición inmediata en visibilidad */
}

.carousel img.inactive {
    visibility: hidden;
    opacity: 0;
    z-index: 0;
}

/* Sección de texto */
.text-section {
    max-width: 600px; /* Limita el ancho del texto */
    text-align: left; /* Alineación del texto a la izquierda */
}

.text-section h2 {
    color: #e22d28; /* Color del título */
    line-height: 0;
}

.text-section p {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: black;
    margin-bottom: 20px;
}