/*
Theme Name: Twenty Twenty-Two
Theme URI: https://wordpress.org/themes/twentytwentytwo/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Built on a solidly designed foundation, Twenty Twenty-Two embraces the idea that everyone deserves a truly unique website. The theme’s subtle styles are inspired by the diversity and versatility of birds: its typography is lightweight yet strong, its color palette is drawn from nature, and its layout elements sit gently on the page. The true richness of Twenty Twenty-Two lies in its opportunity for customization. The theme is built to take advantage of the Site Editor features introduced in WordPress 5.9, which means that colors, typography, and the layout of every single page on your site can be customized to suit your vision. It also includes dozens of block patterns, opening the door to a wide range of professionally designed layouts in just a few clicks. Whether you’re building a single-page website, a blog, a business website, or a portfolio, Twenty Twenty-Two will help you create a site that is uniquely yours.
Requires at least: 5.9
Tested up to: 6.8
Requires PHP: 5.6
Version: 2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentytwo
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, style-variations, wide-blocks, block-styles, accessibility-ready, blog, portfolio, news

Twenty Twenty-Two WordPress Theme, (C) 2021 WordPress.org
Twenty Twenty-Two is distributed under the terms of the GNU GPL.
*/

/*
 * Font smoothing.
 * This is a niche setting that will not be available via Global Styles.
 * https://github.com/WordPress/gutenberg/issues/35934
 */

body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

.wp-block-group-is-layout-flex {
	padding-bottom: 0px !important;
}

/*
 * Text and navigation link styles.
 * Necessary until the following issue is resolved in Gutenberg:
 * https://github.com/WordPress/gutenberg/issues/27075
 */

a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25ch;
}

a:hover,
a:focus {
	text-decoration-style: dashed;
}

a:active {
	text-decoration: none;
}

.wp-block-navigation .wp-block-navigation-item a:hover,
.wp-block-navigation .wp-block-navigation-item a:focus {
	text-decoration: underline;
	text-decoration-style: solid;
}

/*
 * Search and File Block button styles.
 * Necessary until the following issues are resolved in Gutenberg:
 * https://github.com/WordPress/gutenberg/issues/36444
 * https://github.com/WordPress/gutenberg/issues/27760
 */

.wp-block-search__button,
.wp-block-file .wp-block-file__button {
	background-color: var(--wp--preset--color--primary);
	border-radius: 0;
	border: 0 solid;
	color: var(--wp--preset--color--background);
	font-size: var(--wp--preset--font-size--medium);
	padding: calc(.667em + 2px) calc(1.333em + 2px);
}

/*
 * Button hover styles.
 * Necessary until the following issue is resolved in Gutenberg:
 * https://github.com/WordPress/gutenberg/issues/27075
 */

.wp-block-search__button:hover,
.wp-block-file .wp-block-file__button:hover,
.wp-block-button__link:hover {
	opacity: 0.90;
}

/*
 * Alignment styles.
 * These rules are temporary, and should not be relied on or
 * modified too heavily by themes or plugins that build on
 * Twenty Twenty-Two. These are meant to be a precursor to
 * a global solution provided by the Block Editor.
 *
 * Relevant issues:
 * https://github.com/WordPress/gutenberg/issues/35607
 * https://github.com/WordPress/gutenberg/issues/35884
 */

.wp-site-blocks,
body > .is-root-container,
.edit-post-visual-editor__post-title-wrapper,
.wp-block-group.alignfull,
.wp-block-group.has-background,
.wp-block-cover.alignfull,
.is-root-container .wp-block[data-align="full"] > .wp-block-group,
.is-root-container .wp-block[data-align="full"] > .wp-block-cover {
	padding-left: var(--wp--custom--spacing--outer);
	padding-right: var(--wp--custom--spacing--outer);
}

.wp-site-blocks .alignfull,
.wp-site-blocks > .wp-block-group.has-background,
.wp-site-blocks > .wp-block-cover,
.wp-site-blocks > .wp-block-template-part > .wp-block-group.has-background,
.wp-site-blocks > .wp-block-template-part > .wp-block-cover,
body > .is-root-container > .wp-block-cover,
body > .is-root-container > .wp-block-template-part > .wp-block-group.has-background,
body > .is-root-container > .wp-block-template-part > .wp-block-cover,
.is-root-container .wp-block[data-align="full"] {
	margin-left: calc(-1 * var(--wp--custom--spacing--outer)) !important;
	margin-right: calc(-1 * var(--wp--custom--spacing--outer)) !important;
	width: unset;
}

/* Blocks inside columns don't have negative margins. */
.wp-site-blocks .wp-block-columns .wp-block-column .alignfull,
.is-root-container .wp-block-columns .wp-block-column .wp-block[data-align="full"],
/* We also want to avoid stacking negative margins. */
.wp-site-blocks .alignfull:not(.wp-block-group) .alignfull,
.is-root-container .wp-block[data-align="full"] > *:not(.wp-block-group) .wp-block[data-align="full"] {
	margin-left: auto !important;
	margin-right: auto !important;
	width: inherit;
}

/*
 * Responsive menu container padding.
 * This ensures the responsive container inherits the same
 * spacing defined above. This behavior may be built into
 * the Block Editor in the future.
 */

.wp-block-navigation__responsive-container.is-menu-open {
	padding-top: var(--wp--custom--spacing--outer);
	padding-bottom: var(--wp--custom--spacing--large);
	padding-right: var(--wp--custom--spacing--outer);
	padding-left: var(--wp--custom--spacing--outer);
}

/*
 * Improves spacing for the legacy Post Comments block.
 * https://core.trac.wordpress.org/ticket/57560
 */

.wp-block-post-comments ol.commentlist ul.children {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.wp-block-post-comments ol.commentlist li.comment:not(:last-child) {
	margin-bottom: 1rem;
}


@keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 23431.20703125px;
    stroke-dasharray: 23431.20703125px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 23431.20703125px;
  }
}

@keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(0, 0, 0);
  }
}

.svg-elem-1 {
  stroke: rgb(0, 0, 0);
  fill: transparent;
  stroke-dasharray: 23431.20703125px;
  stroke-dashoffset: 23431.20703125px;
  animation: none; 
}

.svg-elem-1.animate {
  animation: animate-svg-stroke-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both,
             animate-svg-fill-1 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
}


@import url('https://fonts.googleapis.com/css2?family=Crimson+Text&family=Playfair+Display:wght@500&family=Libre+Baskerville&display=swap');

html {
color-scheme: only light;
}

header {
height: 150px;
}

body {
background-color: #e8c7b1;
background-image: url("https://facilapison.es/wp-content/uploads/2025/07/natural-paper.png");
background-repeat: repeat;
font-family: 'Cormorant Garamond', serif;
font-size: 1.2rem;
line-height: 1.8;
}

h1 {
margin-bottom: 0px !important;
height: 0;
}

h2, h3 {
text-align: center;
text-shadow: 1px 1px 3px #6d6c6c99;
}

h2.done {
border-right: none;
}

p {
text-align: justify;
}

.wp-block-post-title {
visibility: hidden;
}

.wp-block-image {
margin-top: 0 !important;
}

.wp-block-quote {
text-shadow: 1px 1px 3px #6d6c6c99;
font-family: 'EB Garamond', serif;
font-style: italic;
font-size: 1.3rem;
color: #731f33;
text-align: center;
padding: 1.2em;
border-left: 2px solid #731f33;
border-right: 2px solid #731f33;
line-height: 1.6;
max-width: 800px;
margin: auto;
}
.wp-block-button__link, .wp-button-custom  {
width: 100% !important;
background-color: #731f33 !important;
color: #fdfdfd;
font-family: 'Georgia', serif !important;
font-size: 1.1rem !important;
padding: 0.6em 1.4em !important;
border: 2px solid #0e3d3a !important;
border-radius: 6px !important;
text-decoration: none !important;
display: inline-block !important;
-webkit-transition: all 0.3s ease !important;
-moz-transition: all 0.3s ease !important;
-o-transition: all 0.3s ease !important;
-ms-transition: all 0.3s ease !important;
transition: all 0.3s ease !important;
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.25) !important;
}

.wp-block-button__link:hover, .wp-button-custom:hover, .ai-btn:hover {
background-color: #7a5c2e !important;
color: #fff !important;
-webkit-transform: scale(1.05) !important;
-moz-transform: scale(1.05) !important;
-o-transform: scale(1.05) !important;
-ms-transform: scale(1.05) !important;
transform: scale(1.05) !important;
box-shadow: 3px 4px 8px rgba(0, 0, 0, 0.3) !important;
}

@-webkit-keyframes pulseColor {
0% {
color: #b22222; /* Bermellón (Firebrick) /
text-shadow: 0 0 3px #b22222;
}
50% {
color: #d4af37; / Dorado */
text-shadow: 0 0 6px #d4af37;
}
100% {
color: #b22222;
text-shadow: 0 0 3px #b22222;
}
}

@-moz-keyframes pulseColor {
0% {
color: #b22222; /* Bermellón (Firebrick) /
text-shadow: 0 0 3px #b22222;
}
50% {
color: #d4af37; / Dorado */
text-shadow: 0 0 6px #d4af37;
}
100% {
color: #b22222;
text-shadow: 0 0 3px #b22222;
}
}

@-o-keyframes pulseColor {
0% {
color: #b22222; /* Bermellón (Firebrick) /
text-shadow: 0 0 3px #b22222;
}
50% {
color: #d4af37; / Dorado */
text-shadow: 0 0 6px #d4af37;
}
100% {
color: #b22222;
text-shadow: 0 0 3px #b22222;
}
}

@keyframes pulseColor {
0% {
color: #b22222; /* Bermellón (Firebrick) /
text-shadow: 0 0 3px #b22222;
}
50% {
color: #d4af37; / Dorado */
text-shadow: 0 0 6px #d4af37;
}
100% {
color: #b22222;
text-shadow: 0 0 3px #b22222;
}
}

.verkami {
-webkit-animation: pulseColor 4s ease-in-out infinite;
-moz-animation: pulseColor 4s ease-in-out infinite;
-o-animation: pulseColor 4s ease-in-out infinite;
animation: pulseColor 4s ease-in-out infinite;
font-weight: 600;
}

.wpforms-field-medium {
max-width: 100% !important;
}

legend, label {
text-align: center;
font-family: var(--wp--preset--font-family--source-serif-pro) !important;
font-size: 1.2em !important;
font-weight: 300 !important;
line-height: var(--wp--custom--typography--line-height--small) !important;
text-shadow: 1px 1px 3px #6d6c6c99 !important;
}

.typing-final {
overflow: hidden;
white-space: nowrap;
border-right: 2px solid #600;
-webkit-animation: typing 3s steps(40, end) forwards, blink 0.7s step-end 6;
-moz-animation: typing 3s steps(40, end) forwards, blink 0.7s step-end 6;
-o-animation: typing 3s steps(40, end) forwards, blink 0.7s step-end 6;
animation: typing 3s steps(40, end) forwards, blink 0.7s step-end 6;
}

@-webkit-keyframes typing {
from { width: 0 }
to { width: 100% }
}

@-moz-keyframes typing {
from { width: 0 }
to { width: 100% }
}

@-o-keyframes typing {
from { width: 0 }
to { width: 100% }
}

@keyframes typing {
from { width: 0 }
to { width: 100% }
}

@-webkit-keyframes blink {
50% { border-color: transparent }
}

@-moz-keyframes blink {
50% { border-color: transparent }
}

@-o-keyframes blink {
50% { border-color: transparent }
}

@keyframes blink {
50% { border-color: transparent }
}

/* Una vez termina, quitamos el borde */
.typing-final.done {
border-right: none;
}

.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
background-color: #e8c7b1;
}

#fondo-cita-literaria {
position: fixed;
color: rgba(30, 20, 10, 0.1);
font-family: 'Cormorant Garamond', serif;
pointer-events: none;
z-index: 1;
opacity: 0;
-webkit-transition: opacity 1.5s ease;
-moz-transition: opacity 1.5s ease;
-o-transition: opacity 1.5s ease;
-ms-transition: opacity 1.5s ease;
transition: opacity 1.5s ease;
max-width: 40vw;
white-space: normal;
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 1.4;
text-align: right;
}

@-webkit-keyframes aparecer {
from {
opacity: 0;
-webkit-transform: translateX(-50%) rotate(-5deg) scale(0.95);
}
to {
opacity: 1;
-webkit-transform: translateX(-50%) rotate(-5deg) scale(1);
}
}

@-moz-keyframes aparecer {
from {
opacity: 0;
-moz-transform: translateX(-50%) rotate(-5deg) scale(0.95);
}
to {
opacity: 1;
-moz-transform: translateX(-50%) rotate(-5deg) scale(1);
}
}

@-o-keyframes aparecer {
from {
opacity: 0;
-o-transform: translateX(-50%) rotate(-5deg) scale(0.95);
}
to {
opacity: 1;
-o-transform: translateX(-50%) rotate(-5deg) scale(1);
}
}

@keyframes aparecer {
from {
opacity: 0;
transform: translateX(-50%) rotate(-5deg) scale(0.95);
}
to {
opacity: 1;
transform: translateX(-50%) rotate(-5deg) scale(1);
}
}

#fondo-cita-literaria em {
font-style: italic;
opacity: 0.8;
font-size: 0.9em;
}

@media (max-width: 768px) {
#fondo-cita-literaria {
max-width: 80vw;
font-size: 1rem !important;
}
}

.logo-animado svg {
height: 90px;
width: auto;
}

#svg-presentacion svg {
height: 300px;
width: auto;
}

#svg-presentacion {
text-align: center;
}

@media screen and (min-width: 601px) {
h2, h3 {
padding-left: 10px;
}
}

@media screen and (max-width: 601px) {
h2, h3 {
font-size: 1.5em;
}
}

.wp-block-separator {
border: 0;
height: 2px;
background: -webkit-linear-gradient(270deg, #bfa76f, #7a1c1c);
background: -moz-linear-gradient(270deg, #bfa76f, #7a1c1c);
background: -o-linear-gradient(270deg, #bfa76f, #7a1c1c);
background: linear-gradient(270deg, #bfa76f, #7a1c1c);
background-size: 600% 600%;
-webkit-animation: moverGradiente 6s ease infinite;
-moz-animation: moverGradiente 6s ease infinite;
-o-animation: moverGradiente 6s ease infinite;
animation: moverGradiente 6s ease infinite;
border-radius: 5px;
}

@-webkit-keyframes moverGradiente {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

@-moz-keyframes moverGradiente {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

@-o-keyframes moverGradiente {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

@keyframes moverGradiente {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

#contenedor-susurros {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: 1;
}

.susurro-flotante {
position: absolute;
font-size: 1.4rem;
font-family: 'Cormorant Garamond', serif;
color: rgba(0, 0, 0, 0.15);
opacity: 0;
-webkit-transition: opacity 2s ease;
-moz-transition: opacity 2s ease;
-o-transition: opacity 2s ease;
-ms-transition: opacity 2s ease;
transition: opacity 2s ease;
white-space: pre-line;
font-style: italic;
z-index: 9999; /* Alto para estar por encima de todo */
}

.susurro-trigger {
opacity: 0; /* Mantiene invisible */
font-size: 0; /* Ok, pero combinado con lo siguiente */
display: inline-block; /* Fuerza un bounding box */
width: 1px; /* Dimensión mínima para intersección */
height: 1px; /* Dimensión mínima */
overflow: hidden; /* Evita que afecte layout */
position: relative; /* O absolute si quieres sacarlos del flow */
}

.susurro {
position: fixed;
font-style: italic;
font-size: 1.1rem;
color: rgba(90, 50, 20, 0.3);
white-space: pre-line;
-webkit-transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
-moz-transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
-o-transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
-ms-transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
-webkit-transition: opacity 2s ease;
-moz-transition: opacity 2s ease;
-o-transition: opacity 2s ease;
-ms-transition: opacity 2s ease;
transition: opacity 2s ease;
z-index: 9999;
}

.susurro.fuerte {
color: rgba(90, 20, 20, 0.3);
font-size: 1.8rem;
font-style: italic;
font-weight: 300;
}

.susurro.vibrate {
-webkit-animation: shake 0.5s infinite ease-in-out;
-moz-animation: shake 0.5s infinite ease-in-out;
-o-animation: shake 0.5s infinite ease-in-out;
animation: shake 0.5s infinite ease-in-out;
}

@-webkit-keyframes shake {
0%, 100% { -webkit-transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) translateX(0); }
25% { -webkit-transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) translateX(calc(var(--shake-amount, 2px) * -1)); }
50% { -webkit-transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) translateX(var(--shake-amount, 2px)); }
75% { -webkit-transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) translateX(calc(var(--shake-amount, 2px) * -0.5)); }
}

@-moz-keyframes shake {
0%, 100% { -moz-transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) translateX(0); }
25% { -moz-transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) translateX(calc(var(--shake-amount, 2px) * -1)); }
50% { -moz-transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) translateX(var(--shake-amount, 2px)); }
75% { -moz-transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) translateX(calc(var(--shake-amount, 2px) * -0.5)); }
}

@-o-keyframes shake {
0%, 100% { -o-transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) translateX(0); }
25% { -o-transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) translateX(calc(var(--shake-amount, 2px) * -1)); }
50% { -o-transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) translateX(var(--shake-amount, 2px)); }
75% { -o-transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) translateX(calc(var(--shake-amount, 2px) * -0.5)); }
}

@keyframes shake {
0%, 100% { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) translateX(0); }
25% { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) translateX(calc(var(--shake-amount, 2px) * -1)); }
50% { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) translateX(var(--shake-amount, 2px)); }
75% { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) translateX(calc(var(--shake-amount, 2px) * -0.5)); }
}

/* Modo apagado total */
body.apagado {
overflow: hidden;
background: none !important;
background-color: white !important;
color: transparent !important;
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
-ms-transition: none !important;
transition: none !important;
}

body.apagado * {
visibility: hidden !important;
}

body.apagado {
opacity: 1;
}

body.apagado *:not(#apagado-capa) {
opacity: 0 !important;
-webkit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
-o-transition: opacity 1s ease;
-ms-transition: opacity 1s ease;
transition: opacity 1s ease;
}

.estallido {
-webkit-transform: translate(-50%, -50%) scale(1.2);
-moz-transform: translate(-50%, -50%) scale(1.2);
-o-transform: translate(-50%, -50%) scale(1.2);
-ms-transform: translate(-50%, -50%) scale(1.2);
transform: translate(-50%, -50%) scale(1.2);
}

.susurro.blood-drip {
color: #000; /* Color del texto principal */
}

.susurro.blood-drip::after {
content: '';
position: absolute;
bottom: -10px; /* Posición debajo del texto /
left: 0;
width: 100%;
height: 20px; / Altura de la gota /
background: -webkit-radial-gradient(ellipse at top, red 0%, darkred 100%); / Gradiente rojo sangre /
background: -moz-radial-gradient(ellipse at top, red 0%, darkred 100%);
background: -o-radial-gradient(ellipse at top, red 0%, darkred 100%);
background: radial-gradient(ellipse at top, red 0%, darkred 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%); / Forma de gota triangular /
-webkit-animation: drip 2s infinite ease-in-out; / Animación de goteo */
-moz-animation: drip 2s infinite ease-in-out;
-o-animation: drip 2s infinite ease-in-out;
animation: drip 2s infinite ease-in-out;
opacity: 0.8;
}

@-webkit-keyframes drip {
0% {
-webkit-transform: translateY(0) scaleY(1);
}
50% {
-webkit-transform: translateY(10px) scaleY(1.5); /* Se estira hacia abajo /
}
100% {
-webkit-transform: translateY(20px) scaleY(1); / Cae y se normaliza /
opacity: 0; / Desaparece al final */
}
}

@-moz-keyframes drip {
0% {
-moz-transform: translateY(0) scaleY(1);
}
50% {
-moz-transform: translateY(10px) scaleY(1.5); /* Se estira hacia abajo /
}
100% {
-moz-transform: translateY(20px) scaleY(1); / Cae y se normaliza /
opacity: 0; / Desaparece al final */
}
}

@-o-keyframes drip {
0% {
-o-transform: translateY(0) scaleY(1);
}
50% {
-o-transform: translateY(10px) scaleY(1.5); /* Se estira hacia abajo /
}
100% {
-o-transform: translateY(20px) scaleY(1); / Cae y se normaliza /
opacity: 0; / Desaparece al final */
}
}

@keyframes drip {
0% {
transform: translateY(0) scaleY(1);
}
50% {
transform: translateY(10px) scaleY(1.5); /* Se estira hacia abajo /
}
100% {
transform: translateY(20px) scaleY(1); / Cae y se normaliza /
opacity: 0; / Desaparece al final */
}
}

.wp-block-group {
margin-top: 2%;
}

.acallar-verso {
position: relative;
font-style: italic;
opacity: 0;
-webkit-animation: vibrar 3s infinite ease-in-out;
-moz-animation: vibrar 3s infinite ease-in-out;
-o-animation: vibrar 3s infinite ease-in-out;
animation: vibrar 3s infinite ease-in-out;
color: #252525c2;
text-overflow: ellipsis;
text-shadow: 2px 8px 5px rgba(0,0,0,0.5) ;
}

@-webkit-keyframes vibrar {
0%, 100% { opacity: 1; -webkit-transform: scale(1); }
50% { opacity: 0.9; -webkit-transform: scale(1.02); }
}

@-moz-keyframes vibrar {
0%, 100% { opacity: 1; -moz-transform: scale(1); }
50% { opacity: 0.9; -moz-transform: scale(1.02); }
}

@-o-keyframes vibrar {
0%, 100% { opacity: 1; -o-transform: scale(1); }
50% { opacity: 0.9; -o-transform: scale(1.02); }
}

@keyframes vibrar {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.9; transform: scale(1.02); }
}

/* Contenedor opcional para centrar y alinear */
#desbloqueo-secreto {
  text-align: center;
  margin-top: 3em;
}

/* INPUT estilo */
#claveSecreta {
	width: 70%;
	max-width: 90%;
	padding: 0.8em;
	font-size: 1em;
	border: 1px solid #ccc;
	border-radius: 6px;
	transition: all 0.3s ease;
	box-shadow: 0 0 4px rgba(0,0,0,0.2);
	margin-bottom: 30px;
	text-align: center;
}

/* Efecto al hacer foco (azul brillante) */
#claveSecreta:focus {
	outline: none;
	border-color: #1E90FF;
	box-shadow: 0 0 6px #005a87;
}

.wp-button-custom  {
	cursor: pointer;
}

.ai-wrap {
    background-color: #731f33d9 !important;
    border-radius: 12px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

}


.ai-wrap .ai-track-progress-bar {
	background-color: #c8b79c !important;
	border-radius: 3px !important;
}

.ai-audio-controls-progress {
	visibility: hidden;
	position: absolute;
}

.ai-control-wrap {
	height: 50px !important;
	min-height: 50px !important;
}

.ai-wrap .ai-control-wrap-controls {
    display: ruby;
}

.ai-wrap .ai-audio-controls-main {
	width: 60%;
}

.ai-wrap .ai-audio-controls-meta {
	width: 40%;
}


/***************  MAPA ILLIA  ***************/

#map-container #mapa {
  overflow: visible;
  width: -webkit-fill-available;
  height: -webkit-fill-available;
  width: -moz-available;
  height: -moz-available;
  width: fill-available;
  height: fill-available;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

#mapa #lost {
	fill-opacity: 0;
}


#mapa g {
  transition: transform 0.3s ease;
}

#mapa g path, #mapa g ellipse {
  transition: transform 0.3s ease, fill 0.3s ease;
  transform-origin: center;
}

#velho, #neu, #kukua, #ilia {
	transform-origin: center;
}

#velho:hover .capital-label-group, #velho:hover text, 
#neu:hover .capital-label-group, #neu:hover text, 
#kukua:hover .capital-label-group, #kukua:hover text, 
#ilia:hover .capital-label-group, #ilia:hover text  {
	display: block !important;
}

#velho:hover, #neu:hover, #kukua:hover, #ilia:hover {
  transform: scale(1.12);
}

#velho:hover ellipse, #neu:hover ellipse, #kukua:hover ellipse, #ilia:hover ellipse {
  animation: fadeOpacity 1s infinite;
}

@keyframes fadeOpacity {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}


#velho:hover path, #velho:hover text {
  fill: darkolivegreen !important;
  stroke: darkolivegreen !important;
}

#neu:hover path, #neu:hover text{
  fill: steelblue !important;
  stroke: steelblue !important;
}

#kukua:hover path, #kukua:hover text {
  fill: sienna !important;
  stroke: sienna !important;
}

#ilia:hover path, #ilia:hover text {
  fill: darkorchid !important;
  stroke: darkorchid !important;
}

/****** Estilo Gaialada ******/

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Share+Tech&display=swap');


body.page-template-gaialade, body.error404 {
	background-image: 
		url('https://facilapison.es/wp-content/uploads/2025/07/light-aluminum.png'),
		linear-gradient(
		  to right,
		  rgba(0, 0, 128, 0.8),       /* Azul oscuro */
		  rgba(153, 50, 204, 0.8),    /* DarkOrchid */
		  rgba(0, 0, 0, 1)          /* Negro */
		);
}

.error404 h2, .page-template-gaialade h2, .error404 h3, .page-template-gaialade h3 {
	font-family: 'Orbitron', sans-serif;
	text-shadow: 3px 3px 3px #6d6c6c99;
}

.page-template-gaialade, .error404 {
	font-family: 'Share Tech', sans-serif;
}

.page-template-gaialade .entry-content, .error404 main {
    padding: 10px;
	border: 1px solid black;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
    background-color: #fafafa;
    background-image: url(https://www.transparenttextures.com/patterns/beige-paper.png);
}


@keyframes neonPulse {
		0% {
		filter: drop-shadow(0 0 5px darkblue);
	}	
		50% {
		filter: drop-shadow(0 0 15px darkorchid);
	}
		100% {
		filter: drop-shadow(0 0 5px black);
	}
}

.bloque-sello-firma {
	margin-left: 5% !important;
	margin-right: 5% !important;
	min-width: fit-content;
	max-width: unset;
	justify-content: space-between;
	align-items: center;
	gap: 2rem;
}

.firma-aiden, .sello-argos {
	max-width: 300px;
}


.logo-argos {
	width:150px;
	animation: neonPulse 4s infinite ease-in-out;
}

.logo-argos-404 {
	text-align: center;
	width:500px;
	animation: neonPulse 4s infinite ease-in-out;
}

.sello-argos img {
	opacity: 0.8;
    transform: rotate(346deg);
}

.pulsar-multi {
  animation: pulseColorMulti 3s infinite;
}

@keyframes pulseColorMulti {
  0%   { filter: drop-shadow(0 0 5px darkblue); }
  50%  { filter: drop-shadow(0 0 5px darkorchid); }
  100% { filter: drop-shadow(0 0 5px black); }
}

/***** POP UP *****/ 

#confirmationModal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5); /* Oscurece más el fondo */
    justify-content: center;
    align-items: center;
	max-width: unset;
  }


#popup {
    animation: flicker 5s infinite;
}



/* GAIALADE MODE */

  .popup-gaialade {
    border: 1px solid black;
    box-shadow: 0 0 4px rgba(0, 0, 0);
    background-image: url(https://facilapison.es/wp-content/uploads/2025/07/light-aluminum.png), linear-gradient(to right, rgba(0, 0, 128), /* Azul oscuro */ rgba(153, 50, 204), /* DarkOrchid */ rgba(0, 0, 0) /* Negro */);
    margin: auto;
    padding: 20px;
    width: 80%;
    max-width: 400px;
    text-align: center;
    border-radius: 10px; /* Bordes redondeados para mejor look */
  }

.popup-gaialade * {
	animation: flicker 2s infinite;
}

.popup-gaialade p {
	text-align: center;
	font-family: 'Share tech', serif;
	color: white;
}

  .popup-gaialade h2 {
	margin-top: 0 !important;
    color: #d9534f; /* Rojo para advertencia */
	text-shadow: 2px 2px 2px rgba(0, 0, 0);
	font-family: 'Orbitron', serif;
  }

  .popup-gaialade button {
    padding: 10px 20px;
    margin: 10px;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
    font-family: 'Share tech', serif !important;
    font-size: 1.1rem !important;
    padding: 0.6em 1.4em !important;
    border: 2px solid #0e3d3a !important;
  }

/* CLASSIC MODE */

  .popup-classic {
    border: 1px solid black;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
	background-color: #e8c7b1;
    background-image: url(https://facilapison.es/wp-content/uploads/2025/07/natural-paper.png);
    margin: auto;
    padding: 20px;
    width: 80%;
    max-width: 400px;
    text-align: center;
    border-radius: 10px; /* Bordes redondeados para mejor look */
  }

.popup-classic p {
	text-align: center;
	font-family: 'Cormorant Garamond', serif;
}

  .popup-classic h2 {
	margin-top: 0 !important;
    color: #d9534f; /* Rojo para advertencia */
	text-shadow: 2px 2px 2px rgba(0, 0, 0);
	font-family: 'Cormorant Garamond', serif;
  }

  .popup-classic button {
    padding: 10px 20px;
    margin: 10px;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
	font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem !important;
    padding: 0.6em 1.4em !important;
    border: 2px solid #0e3d3a !important;
    border-radius: 6px !important;
  }

/* COMMON */

  .modal-content button:hover {
    transform: scale(1.2);
  }

  #confirmYes {
    background-color: #5cb85c; /* Verde */
    color: white;
  }

  #confirmNo {
    background-color: #d9534f; /* Rojo */
    color: white;
  }

@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    opacity: 1;
  }
  20%, 24%, 55% {
    opacity: 0.4;
  }
}

/***** CSS coshiti *****/

a.no-subrayado {
  text-decoration: none;
  color: inherit;
}




/***** GLITCH Cambio de pantalla *****/

.glitch-effect {
  position: relative;
  animation: flicker2 0.3s steps(2, end) infinite;
  filter: contrast(2) brightness(1.3) saturate(2) hue-rotate(20deg);
  overflow: hidden;
  z-index: 9999;
}

.glitch-effect::before,
.glitch-effect::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: inherit;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 10000;
}

.glitch-effect::before {
  background: rgba(255, 0, 0, 0.2);
  animation: glitch-slice-1 0.25s infinite linear alternate-reverse;
}

.glitch-effect::after {
  background: rgba(0, 255, 255, 0.2);
  animation: glitch-slice-2 0.25s infinite linear alternate-reverse;
}

@keyframes glitch-slice-1 {
  0% { clip-path: inset(0 0 90% 0); transform: translate(2px, -2px); }
  20% { clip-path: inset(10% 0 60% 0); transform: translate(-5px, 3px); }
  40% { clip-path: inset(20% 0 30% 0); transform: translate(3px, -1px); }
  60% { clip-path: inset(50% 0 20% 0); transform: translate(-1px, 1px); }
  80% { clip-path: inset(30% 0 50% 0); transform: translate(1px, -3px); }
  100% { clip-path: inset(0 0 90% 0); transform: translate(-2px, 2px); }
}

@keyframes glitch-slice-2 {
  0% { clip-path: inset(90% 0 0 0); transform: translate(-2px, 2px); }
  20% { clip-path: inset(60% 0 10% 0); transform: translate(5px, -3px); }
  40% { clip-path: inset(30% 0 20% 0); transform: translate(-3px, 1px); }
  60% { clip-path: inset(20% 0 50% 0); transform: translate(1px, -1px); }
  80% { clip-path: inset(50% 0 30% 0); transform: translate(-1px, 3px); }
  100% { clip-path: inset(90% 0 0 0); transform: translate(2px, -2px); }
}

@keyframes flicker2 {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}