/* ==========================================================================
   Reglas propias del tema.

   app.css es Tailwind COMPILADO: solo trae las clases que existían en el
   código de Lovable. Cualquier clase nueva o arbitraria que se invente aquí
   (z-[200], etc.) NO va a existir allá. Esas reglas van en este archivo.

   Al tocar esto: subir POLYCO_VERSION en functions.php o el navegador cachea.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reveal on scroll.
   .reveal ya viene en app.css, pero el delay lo hacía React por inline style.
   Aquí lo maneja theme.js leyendo data-reveal-delay, así que solo hace falta
   garantizar que el estado inicial exista aunque app.css cambie de orden.
   -------------------------------------------------------------------------- */
.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
	will-change: opacity, transform;
}

.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Sin JS, que igual se vea todo. Si theme.js no corre, no queremos
   una página en blanco: la clase no-js la quita el propio theme.js. */
.no-js .reveal,
.no-js .hero-rise {
	opacity: 1;
	transform: none;
	animation: none;
}

/* --------------------------------------------------------------------------
   Accesibilidad: respetar "reducir movimiento".
   El marquee, los floats y el spin son puramente decorativos.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.marquee-track-soft,
	.marquee-track,
	.float-slow,
	.float-medium,
	.float-fast,
	.spin-slow,
	.animate-ping {
		animation: none !important;
	}

	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.hero-rise {
		opacity: 1;
		transform: none;
		animation: none;
	}

	html {
		scroll-behavior: auto;
	}
}

/* --------------------------------------------------------------------------
   Nav.
   El estado "scrolled" lo pone theme.js. En React eran clases condicionales;
   aquí es una sola clase que cambia las dos propiedades.
   -------------------------------------------------------------------------- */
#polyco-header.is-scrolled {
	background-color: rgb(255 255 255 / 0.85);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	box-shadow: 0 8px 30px -12px rgb(15 30 60 / 0.08);
}

#polyco-header.is-scrolled #polyco-hairline {
	opacity: 1;
}

/* Link activo del nav (scroll-spy). */
.polyco-navlink.is-active {
	color: #000;
	background-color: #fff;
	box-shadow: 0 1px 3px rgb(0 0 0 / 0.06);
}

.polyco-navlink.is-active .polyco-navdot {
	opacity: 1;
}

/* Overlay móvil abierto. */
#polyco-mobile.is-open {
	opacity: 1;
	pointer-events: auto;
}

/* El ancla salta debajo del header fijo (topbar 36px + nav 72px). */
section[id] {
	scroll-margin-top: 96px;
}

/* --------------------------------------------------------------------------
   Selects del formulario.
   appearance-none los deja sin flecha; se la devolvemos con un SVG embebido.
   El data-URI va con comillas simples afuera porque el SVG trae dobles.
   -------------------------------------------------------------------------- */
#polyco-form select {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.5)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');
	background-repeat: no-repeat;
	background-position: right 1rem center;
	padding-right: 2.5rem;
}

/* En macOS/iOS el <option> hereda fondo del sistema y queda ilegible
   sobre la card oscura. */
#polyco-form select option {
	background-color: #000;
	color: #fff;
}

/* --------------------------------------------------------------------------
   Editor inline (la clase la pone el plugin cuando el editor está activo).
   Se define aquí para que el tema se vea igual con o sin el plugin.
   -------------------------------------------------------------------------- */
body.polyco-editing [contenteditable="true"]:focus {
	outline: 2px solid #5FA7FB;
	outline-offset: 3px;
	border-radius: 4px;
}

body.polyco-editing .editable:hover,
body.polyco-editing .editable-img:hover {
	outline: 1px dashed rgb(95 167 251 / 0.6);
	outline-offset: 3px;
	cursor: text;
}

body.polyco-editing .editable-img:hover {
	cursor: pointer;
}