/**
 * KMAN Multiservicios — estilos propios (complementan assets/css/tailwind.css).
 */

/* Animaciones del sitio original ----------------------------------------- */
.animate-fade-in {
	animation: kmanFadeIn 0.4s ease-in-out;
}

@keyframes kmanFadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.animate-fade-in { animation: none; }
	html { scroll-behavior: auto !important; }
}

html { scroll-behavior: smooth; }

/* Ocultar barra de scroll de las pestañas en móvil ------------------------ */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Cabecera fija debajo de la barra de administración --------------------- */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .site-header { top: 46px; }
}
@media screen and (max-width: 600px) {
	.admin-bar .site-header { top: 0; }
}

/* Clases que WordPress espera en cualquier tema -------------------------- */
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; word-wrap: normal !important;
}
.screen-reader-text:focus {
	clip: auto !important; clip-path: none; height: auto; width: auto;
	display: block; z-index: 100000; padding: 1rem; background: #fff; color: #1d4ed8;
}
.alignleft  { float: left;  margin: 0.5rem 1.5rem 1rem 0; }
.alignright { float: right; margin: 0.5rem 0 1rem 1.5rem; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption-text, figcaption.wp-element-caption { font-size: 0.875rem; color: #64748b; margin-top: 0.5rem; text-align: center; }

/* Contenido del editor (Tailwind preflight elimina los estilos por defecto) */
.entry-content { color: #334155; line-height: 1.75; font-size: 1.0625rem; }
.entry-content > * + * { margin-top: 1.25em; }
.entry-content h2 { font-size: 1.875rem; font-weight: 900; color: #0f172a; line-height: 1.2; margin-top: 2em; }
.entry-content h3 { font-size: 1.5rem;   font-weight: 800; color: #0f172a; line-height: 1.3; margin-top: 1.75em; }
.entry-content h4 { font-size: 1.25rem;  font-weight: 700; color: #0f172a; margin-top: 1.5em; }
.entry-content a { color: #2563eb; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.entry-content a:hover { color: #1e40af; }
.entry-content ul { list-style: disc; padding-left: 1.5em; }
.entry-content ol { list-style: decimal; padding-left: 1.5em; }
.entry-content li + li { margin-top: 0.4em; }
.entry-content blockquote { border-left: 4px solid #2563eb; padding: 0.5em 0 0.5em 1.25em; color: #475569; font-style: italic; }
.entry-content img { border-radius: 1.5rem; height: auto; }
.entry-content hr { border-color: #e2e8f0; margin: 2.5em 0; }
.entry-content table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.entry-content th, .entry-content td { border: 1px solid #e2e8f0; padding: 0.6em 0.9em; text-align: left; }
.entry-content th { background: #f8fafc; font-weight: 700; }
.entry-content code { background: #f1f5f9; padding: 0.15em 0.4em; border-radius: 0.375rem; font-size: 0.9em; }
.entry-content pre { background: #0f172a; color: #e2e8f0; padding: 1.25em; border-radius: 1rem; overflow-x: auto; }
.entry-content pre code { background: none; padding: 0; }
.entry-content strong { color: #0f172a; }

/* Paginación y navegación entre entradas (marcado generado por WordPress) - */
.kman-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.kman-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; height: 2.75rem;
	padding: 0 0.9rem; border-radius: 0.75rem; border: 1px solid #e5e7eb; background: #fff;
	color: #334155; font-weight: 700; font-size: 0.875rem; transition: background-color .2s, color .2s;
}
.kman-pagination a.page-numbers:hover { background: #eff6ff; color: #1d4ed8; }
.kman-pagination .page-numbers.current { background: #2563eb; border-color: #2563eb; color: #fff; }
.post-navigation .nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.post-navigation .nav-next { text-align: right; grid-column: 2; }
.post-navigation a:hover span:last-child { color: #2563eb; }

/* Formulario de búsqueda ------------------------------------------------- */
.search-form { display: flex; gap: 0.5rem; }
.search-form label { flex: 1; }
.search-form .search-field {
	width: 100%; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 0.75rem 1rem; background: #fff;
}
.search-form .search-field:focus { outline: 2px solid #2563eb; outline-offset: 1px; }
.search-form .search-submit {
	background: #2563eb; color: #fff; font-weight: 700; border-radius: 0.75rem; padding: 0.75rem 1.25rem; cursor: pointer;
}
.search-form .search-submit:hover { background: #1d4ed8; }

/* Formulario de contacto: campo trampa para bots (fuera de pantalla) ----- */
.kman-hp {
	position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

/* Botón flotante de WhatsApp: anillo pulsante ---------------------------- */
.kman-whatsapp::before {
	content: ""; position: absolute; inset: 0; border-radius: 9999px;
	background: #25D366; opacity: 0.45; z-index: -1;
	animation: kmanPulse 2.4s ease-out infinite;
}
.kman-whatsapp:hover::before { animation: none; opacity: 0; }

@keyframes kmanPulse {
	0%   { transform: scale(1);   opacity: 0.45; }
	70%  { transform: scale(1.5); opacity: 0; }
	100% { transform: scale(1.5); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.kman-whatsapp::before { animation: none; display: none; }
}

@media print {
	.kman-whatsapp { display: none !important; }
}

/* Solicitud de visita: tarjetas de servicio (estilos de formulario.html) -- */
.service-checkbox:checked + label {
	border-color: #2563eb; /* blue-600 */
	background-color: #eff6ff; /* blue-50 */
}
.service-checkbox:checked + label .check-icon {
	opacity: 1;
	transform: scale(1);
}

/*
 * El original oculta el checkbox con la clase "hidden" (display:none), lo que impide
 * usarlo con el teclado. Se conserva la clase, pero se mantiene accesible e invisible.
 */
.service-checkbox.hidden {
	display: block;
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
.service-checkbox:focus-visible + label {
	outline: 2px solid #3b82f6;
	outline-offset: 2px;
}

/* Errores de validación ------------------------------------------------- */
#formulario-visita [aria-invalid="true"] {
	border-color: #f43f5e; /* rose-500 */
	background-color: #fff1f2; /* rose-50 */
}
#formulario-visita .kman-group-invalid .service-checkbox:not(:checked) + label {
	border-color: #fda4af; /* rose-300 */
}
.kman-form-alert:focus { outline: none; }

/* Quiénes Somos: texto editable del hero (the_content) ------------------- */
.kman-hero-content > * + * { margin-top: 1em; }
.kman-hero-content a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.kman-hero-content strong { color: #fff; font-weight: 700; }
.kman-hero-content ul { list-style: disc; display: inline-block; text-align: left; padding-left: 1.25em; }

/* Botón "Volver arriba": oculto hasta que se baja en la página ------------ */
.kman-back-to-top {
	opacity: 0;
	visibility: hidden; /* También lo saca del orden de tabulación mientras está oculto. */
	transform: translateY(1rem);
	transition: opacity .3s ease, transform .3s ease, visibility .3s ease, background-color .3s ease, box-shadow .3s ease;
}
.kman-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.kman-back-to-top.is-visible:hover { transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
	.kman-back-to-top, .kman-back-to-top.is-visible:hover { transform: none; }
}
@media print {
	.kman-back-to-top { display: none !important; }
}

/* Slider del hero de la portada ------------------------------------------ */
.kman-slide {
	opacity: 0;
	transition: opacity 1s ease;
}
.kman-slide.is-active {
	opacity: 1;
	z-index: 1;
}
/* Zoom suave mientras se muestra cada imagen (efecto "Ken Burns"). */
.kman-slide img {
	transform: scale(1.08);
	transition: transform 7s ease-out;
}
.kman-slide.is-active img { transform: scale(1); }

.kman-slider-dot {
	width: .625rem;
	height: .625rem;
	border-radius: 9999px;
	background: rgba(255, 255, 255, .6);
	box-shadow: 0 1px 3px rgba(15, 23, 42, .35);
	transition: width .3s ease, background-color .3s ease;
}
.kman-slider-dot:hover { background: rgba(255, 255, 255, .9); }
.kman-slider-dot[aria-current="true"] { width: 1.75rem; background: #fff; }
.kman-slider-dot:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.kman-slide { transition-duration: .2s; }
	.kman-slide img, .kman-slide.is-active img { transform: none; transition: none; }
}
