/**
 * EVENTO360 — estilos complementarios a theme.json.
 * Solo lo que theme.json no puede expresar: estados, estilos de bloque
 * propios y detalles de interfaz. Mobile first.
 */

/* ---------- Base ---------- */
html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

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

:where(h1, h2, h3, h4) {
	text-wrap: balance;
}

:where(p) {
	text-wrap: pretty;
}

::selection {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary);
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-dark);
	outline-offset: 3px;
	border-radius: 4px;
}

.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--sm);
}

/* ---------- Cabecera ---------- */
/* La parte de plantilla envuelve la cabecera: el elemento fijo es el envoltorio. */
.wp-site-blocks > header.wp-block-template-part,
.wp-site-blocks > .wp-block-template-part:has(> .e360-header) {
	position: sticky;
	top: 0;
	z-index: 100;
}

.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 0px);
}

.e360-header {
	background: rgba(255, 255, 255, 0.86);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.e360-header.is-scrolled {
	border-bottom-color: var(--wp--preset--color--border);
	box-shadow: 0 6px 24px rgba(0, 36, 82, 0.06);
}

.e360-header__inner {
	min-height: var(--wp--custom--header-height);
}

.e360-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.e360-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 1.1rem;
	font-size: var(--wp--preset--font-size--large);
}

/* En móvil solo se muestra el botón principal de la cabecera. */
@media (max-width: 781px) {
	.e360-header .e360-hide-mobile {
		display: none !important;
	}

	.e360-header .wp-block-button__link {
		padding: 0.6rem 0.9rem;
		font-size: var(--wp--preset--font-size--x-small);
	}

	.e360-header .wp-block-site-logo img {
		width: 136px !important;
		height: auto;
	}

	.e360-header__inner > .wp-block-group {
		gap: 0.75rem;
	}

	.e360-type-card {
		min-height: 112px;
	}
}

.e360-header .wp-block-button__link {
	white-space: nowrap;
}

/* ---------- Botones ---------- */
.wp-block-button__link,
.wp-element-button {
	transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(0, 36, 82, 0.16);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--primary);
}

/* Botones sobre fondos oscuros */
.has-primary-background-color .wp-block-button.is-style-outline > .wp-block-button__link,
.has-primary-dark-background-color .wp-block-button.is-style-outline > .wp-block-button__link,
.has-night-gradient-background .wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: rgba(255, 255, 255, 0.5);
	color: var(--wp--preset--color--base);
}

.has-primary-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.has-primary-dark-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.has-night-gradient-background .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--base);
}

.has-primary-background-color .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
.has-night-gradient-background .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
}

/* ---------- Estilos de bloque: grupo ---------- */
.is-style-e360-card,
.is-style-e360-card-hover,
.is-style-e360-highlight {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--preset--shadow--sm);
}

.is-style-e360-card-hover {
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.is-style-e360-card-hover:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--md);
	border-color: #CFD8E3;
}

.is-style-e360-highlight {
	position: relative;
	border: 2px solid var(--wp--preset--color--primary);
	box-shadow: var(--wp--preset--shadow--lg);
}

/* ---------- Estilos de bloque: párrafo ---------- */
.is-style-e360-eyebrow {
	font-size: var(--wp--preset--font-size--x-small) !important;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-dark);
}

.has-primary-background-color .is-style-e360-eyebrow,
.has-night-gradient-background .is-style-e360-eyebrow {
	color: var(--wp--preset--color--accent);
}

.is-style-e360-badge {
	display: inline-block;
	width: auto !important;
	padding: 0.35rem 0.85rem;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--accent-dark);
	font-size: var(--wp--preset--font-size--x-small) !important;
	font-weight: 700;
	line-height: 1.4;
}

.is-style-e360-badge.has-background {
	padding: 0.35rem 0.85rem;
}

/* Insignia "Más elegido" de la tarjeta destacada */
.e360-plan-badge {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0 !important;
	white-space: nowrap;
}

/* ---------- Estilos de bloque: lista ---------- */
.is-style-e360-checklist {
	list-style: none;
	padding-left: 0 !important;
}

.is-style-e360-checklist li {
	position: relative;
	padding-left: 1.85rem;
	margin-bottom: 0.6rem;
}

.is-style-e360-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.22em;
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.5 10.5 3 3 6-6.5' fill='none' stroke='%234E7A16' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.9rem no-repeat;
}

.has-primary-background-color .is-style-e360-checklist li::before,
.has-night-gradient-background .is-style-e360-checklist li::before {
	background-color: rgba(168, 207, 69, 0.18);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.5 10.5 3 3 6-6.5' fill='none' stroke='%23A8CF45' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- Estilos de bloque: imagen ---------- */
.wp-block-image.is-style-e360-icon {
	margin-bottom: 0;
}

.wp-block-image.is-style-e360-icon img {
	width: 48px;
	height: 48px;
}

/* ---------- Pasos numerados ---------- */
.e360-step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--large) !important;
	line-height: 1 !important;
}

@media (min-width: 782px) {
	.e360-steps {
		position: relative;
	}

	.e360-steps::before {
		content: "";
		position: absolute;
		top: 1.375rem;
		left: 10%;
		right: 10%;
		border-top: 2px dashed #CFE3A0;
		z-index: 0;
	}

	.e360-steps > * {
		position: relative;
		z-index: 1;
	}
}

/* ---------- Precios ---------- */
.e360-price {
	line-height: 1 !important;
	letter-spacing: -0.03em;
}

.e360-price .e360-price__currency {
	font-size: 0.5em;
	vertical-align: super;
	font-weight: 700;
	margin-right: 0.1em;
}

/* ---------- Tarjetas de tipo de evento ---------- */
.e360-type-card {
	min-height: 150px;
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.e360-type-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--md);
}

/* ---------- Hero ---------- */
.e360-hero__media img {
	width: 100%;
	height: auto;
	aspect-ratio: 668 / 540;
}

@media (max-width: 781px) {
	.e360-hero__media {
		max-width: 460px;
		margin-inline: auto;
	}
}

/* ---------- Pie de página ---------- */
.e360-footer a {
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
}

.e360-footer a:hover {
	color: var(--wp--preset--color--accent);
}

.e360-footer .wp-block-navigation {
	color: rgba(255, 255, 255, 0.78);
}

.e360-footer .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent);
}

.e360-footer h2,
.e360-footer h3 {
	color: var(--wp--preset--color--base);
}

/* ---------- Blog ---------- */
.e360-post-card {
	height: 100%;
	overflow: hidden;
}

.e360-post-card .wp-block-post-featured-image {
	margin: 0;
}

.e360-post-card .wp-block-post-featured-image img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.e360-post-card:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}

.wp-block-post-content > * + h2 {
	margin-top: var(--wp--preset--spacing--50);
}

/* ---------- Preguntas frecuentes ---------- */
.wp-block-details summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	list-style: none;
	position: relative;
	padding-right: 2rem;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--wp--preset--color--accent-dark);
	transition: transform 0.2s ease;
}

.wp-block-details[open] summary::after {
	transform: translateY(-50%) rotate(45deg);
}

.wp-block-details > :not(summary) {
	margin-top: 0.75rem;
}

/* ---------- Formularios básicos ---------- */
.wp-block-search__input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
select,
textarea {
	font: inherit;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	border: 1px solid #CFD8E3;
	border-radius: var(--wp--custom--radius--sm);
	padding: 0.75rem 0.9rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 4px rgba(0, 36, 82, 0.1);
	outline: none;
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* ---------- Listas simples y separador del pie ---------- */
.e360-plain-list {
	list-style: none;
	padding-left: 0 !important;
	line-height: 2.1;
}

.e360-footer-sep.wp-block-separator {
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	margin-top: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--30);
	opacity: 1;
}

/* Texto resaltado con color (formato "Resaltado" del editor) sin fondo. */
mark.has-inline-color {
	background-color: transparent;
}

.e360-footer .wp-block-button__link,
.e360-footer .wp-block-button__link:hover {
	color: var(--wp--preset--color--primary);
}

.e360-footer .wp-block-button__link:hover {
	background: var(--wp--preset--color--base);
}

.wp-block-details:last-child {
	border-bottom: 0;
}

/* ---------- Tabla comparativa de planes ---------- */
.e360-compare table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	overflow: hidden;
	font-size: var(--wp--preset--font-size--small);
}

.e360-compare th,
.e360-compare td {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding: 0.85rem 1rem;
	text-align: center;
}

.e360-compare th:first-child,
.e360-compare td:first-child {
	text-align: left;
	color: var(--wp--preset--color--contrast);
}

.e360-compare thead th {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base) !important;
	font-weight: 800;
	border-bottom: 0;
}

.e360-compare thead th:nth-child(3) {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary) !important;
}

.e360-compare tbody td:not(:first-child) {
	color: var(--wp--preset--color--accent-dark);
	font-weight: 800;
}

.e360-compare tbody tr:last-child td {
	border-bottom: 0;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
}

.e360-compare tbody tr:nth-child(even):not(:last-child) td {
	background: #FAFBFD;
}

/* ---------- Contenido de páginas ---------- */
/* Las secciones a ancho completo se pegan a la cabecera de la página;
   el texto normal recibe aire arriba y abajo. */
.e360-page-content > :first-child:not(.alignfull) {
	margin-top: var(--wp--preset--spacing--50);
}

.e360-page-content > :last-child:not(.alignfull) {
	margin-bottom: var(--wp--preset--spacing--60);
}

/* Antetítulo dentro de tarjetas claras que están sobre fondos oscuros. */
.has-base-background-color .is-style-e360-eyebrow,
.has-surface-background-color .is-style-e360-eyebrow,
.is-style-e360-card .is-style-e360-eyebrow {
	color: var(--wp--preset--color--accent-dark);
}