/* ═══════════════════════════════════════════════════════════
   CAPA DE BLOQUES (Gutenberg)
   Permite que la página se construya con bloques editables
   manteniendo el diseño original del tema.
   ═══════════════════════════════════════════════════════════ */

/* Reset suave de márgenes entre bloques dentro del lienzo */
.ps-canvas .wp-block-group,
.ps-canvas .wp-block-columns,
.ps-canvas .wp-block-column,
.ps-canvas p,
.ps-canvas h1,
.ps-canvas h2,
.ps-canvas h3,
.ps-canvas ul {
	margin-block-start: 0;
	margin-block-end: 0;
}
.ps-canvas .wp-block-table {
	margin: 0;
}

/* Los grupos con clase .section / .hero ocupan todo el ancho;
   su grupo interior .wrap centra el contenido. */
.ps-canvas > .wp-block-group { width: 100%; }

/* ── Menús de WordPress (Apariencia → Menús) ─────────────── */

.main-nav-list,
.mobile-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 4px;
}
.main-nav-list a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 8px 12px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	color: rgba(3, 38, 37, .8);
	text-decoration: none;
	transition: background .2s, color .2s;
}
.main-nav-list a:hover { background: rgba(3, 38, 37, .05); color: var(--pine-950); }

.mobile-nav-list { flex-direction: column; align-items: stretch; gap: 0; }
.mobile-nav-list a {
	display: flex;
	align-items: center;
	padding: 9px 8px;
	min-height: 44px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 16px;
	color: var(--pine-950);
	text-decoration: none;
	border-bottom: 1px solid rgba(3, 38, 37, .07);
}
.mobile-nav-list li:last-child a { border-bottom: 0; }

/* ── Hero en bloques ─────────────────────────────────────── */

.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(60% 45% at 78% 18%, rgba(173, 239, 237, .55) 0%, rgba(173, 239, 237, 0) 70%),
		radial-gradient(45% 40% at 12% 82%, rgba(245, 201, 168, .5) 0%, rgba(245, 201, 168, 0) 70%);
}
.hero > .wrap { position: relative; }

.wp-block-columns.hero-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	padding-bottom: 56px;
	align-items: flex-end;
}
.wp-block-columns.hero-grid > .wp-block-column { flex: 1 1 100%; min-width: 0; }
@media (min-width: 1024px) {
	.wp-block-columns.hero-grid { flex-wrap: nowrap; padding-bottom: 80px; }
	.wp-block-columns.hero-grid > .wp-block-column:first-child { flex: 1.25 1 0; }
	.wp-block-columns.hero-grid > .wp-block-column:last-child { flex: 1 1 0; }
}

.hero-title + .hero-title { margin-top: 0; }

.wp-block-buttons.hero-ctas {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 32px;
}
@media (min-width: 640px) { .wp-block-buttons.hero-ctas { flex-direction: row; } }

/* Estadísticas (columnas) */
.wp-block-columns.stats-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	overflow: hidden;
	border: 1px solid rgba(3, 38, 37, .1);
	border-radius: var(--radius);
	background: rgba(3, 38, 37, .1);
}
@media (min-width: 640px) { .wp-block-columns.stats-row { grid-template-columns: repeat(3, 1fr); } }
.wp-block-columns.stats-row > .wp-block-column { background: var(--paper); padding: 20px 24px; }

/* ── Botones de bloque ───────────────────────────────────── */

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 52px;
	padding: 0 28px;
	border-radius: 999px;
	border: 2px solid transparent;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
	text-decoration: none;
	transition: background .2s, color .2s, border-color .2s;
	background: transparent;
	color: var(--pine-950);
}
.wp-block-button.btn-primary .wp-block-button__link { background: var(--pine-700); color: var(--aqua-bright); }
.wp-block-button.btn-primary .wp-block-button__link:hover { background: var(--pine-900); }
.wp-block-button.btn-outline .wp-block-button__link { border-color: rgba(3, 38, 37, .2); color: var(--pine-950); }
.wp-block-button.btn-outline .wp-block-button__link:hover { border-color: rgba(3, 38, 37, .5); }
.wp-block-button.btn-aqua .wp-block-button__link { border-color: rgba(173, 239, 237, .6); color: var(--aqua); }
.wp-block-button.btn-aqua .wp-block-button__link:hover { background: var(--aqua); color: var(--pine-950); }
.wp-block-button.btn-block { width: 100%; }
.wp-block-button.btn-block .wp-block-button__link { width: 100%; }

/* ── Iconos decorativos vía CSS (no editables, no se pierden) ── */

.ps-ic::before {
	content: "";
	display: block;
	width: 22px;
	height: 22px;
	background-color: currentColor;
	-webkit-mask: var(--ic) center / contain no-repeat;
	mask: var(--ic) center / contain no-repeat;
}

/* Icono grande en tarjetas (chip redondeado) */
.ps-ic-big::before {
	width: 44px;
	height: 44px;
	padding: 11px;
	box-sizing: border-box;
	border-radius: 12px;
	background-color: var(--pine-700);
	margin-bottom: 14px;
}
/* Variante redonda (tarjeta ZBE del hero) */
.ps-ic-round::before {
	width: 44px;
	height: 44px;
	padding: 10px;
	box-sizing: border-box;
	border-radius: 50%;
	background-color: var(--taronja);
	color: #fff;
	flex-shrink: 0;
	margin-bottom: 0;
}

.ps-ic-train { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 3.1V7a4 4 0 0 0 8 0V3.1'/><path d='m9 15-1-1'/><path d='m15 15 1-1'/><path d='M9 19c-2.8 0-5-2.2-5-5v-4a8 8 0 0 1 16 0v4c0 2.8-2.2 5-5 5Z'/><path d='m8 19-2 3'/><path d='m16 19 2 3'/></svg>"); }
.ps-ic-tram { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect width='16' height='16' x='4' y='3' rx='2'/><path d='M4 11h16'/><path d='M12 3v8'/><path d='m8 19-2 3'/><path d='m18 22-2-3'/><path d='M8 15h.01'/><path d='M16 15h.01'/></svg>"); }
.ps-ic-bus { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 6v6'/><path d='M15 6v6'/><path d='M2 12h19.6'/><path d='M18 18h3s.5-1.7.8-2.8c.1-.4.2-.8.2-1.2 0-.4-.1-.8-.2-1.2l-1.4-5C20.1 6.8 19.1 6 18 6H4a2 2 0 0 0-2 2v10h3'/><circle cx='7' cy='18' r='2'/><path d='M9 18h5'/><circle cx='16' cy='18' r='2'/></svg>"); }
.ps-ic-walk { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='13' cy='4' r='1'/><path d='m13 8-2.5 3.5a2 2 0 0 0-.3 2L12 18l1.5 4'/><path d='m13 8 2.5 3L19 12'/><path d='M10.2 13.5 8 15l-2 6'/></svg>"); }
.ps-ic-alert { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/><path d='M12 9v4'/><path d='M12 17h.01'/></svg>"); }
.ps-ic-check { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M21.8 10A10 10 0 1 1 17 3.34'/><path d='m9 11 3 3L22 4'/></svg>"); }
.ps-ic-phone { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>"); }
.ps-ic-check-small { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>"); }

/* Tarjeta ZBE: título con icono a la izquierda */
.zbe-card-title.ps-ic::before {
	float: left;
	margin-right: 12px;
}

/* Tarjetas con icono en el encabezado (fines, transporte) */
.fines-card h3.ps-ic,
.info-card h3.ps-ic {
	display: block;
}
.fines-card h3.ps-ic::before {
	display: inline-block;
	vertical-align: -5px;
	margin-right: 10px;
}
.info-card h3.ps-ic-big::before { display: block; }

/* Icono check en las listas de planes */
.plan-features li {
	position: relative;
	padding-left: 26px;
	display: block;
}
.plan-features li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 16px;
	height: 16px;
	background-color: var(--pine-500);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center / contain no-repeat;
}

/* ── Tabla de tarifas como bloque ────────────────────────── */

.wp-block-table.rates-table {
	overflow-x: auto;
	border: 1px solid rgba(255, 253, 245, .15);
	border-radius: var(--radius);
}
.wp-block-table.rates-table table {
	width: 100%;
	border-collapse: collapse;
	min-width: 560px;
	font-size: 14px;
	border: 0;
}
.wp-block-table.rates-table th {
	text-align: left;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: rgba(255, 253, 245, .55);
	padding: 14px 18px;
	border: 0;
	border-bottom: 1px solid rgba(255, 253, 245, .15);
}
.wp-block-table.rates-table td {
	padding: 16px 18px;
	border: 0;
	border-bottom: 1px solid rgba(255, 253, 245, .08);
	color: rgba(255, 253, 245, .9);
}
.wp-block-table.rates-table tr:last-child td { border-bottom: 0; }
.wp-block-table.rates-table td:last-child { font-family: var(--font-mono); font-size: 13px; color: var(--aqua); font-weight: 600; }
.wp-block-table.rates-table td:nth-child(2) { font-family: var(--font-mono); font-size: 13px; }

/* Lista de multas en bloque */
ul.fines-list li {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	border-bottom: 1px dashed rgba(255, 253, 245, .12);
	padding-bottom: 10px;
}
ul.fines-list li strong {
	font-family: var(--font-mono);
	color: var(--taronja-soft);
	font-weight: 600;
	white-space: nowrap;
}

/* ── Ajustes editor (wp-admin) ───────────────────────────── */

.editor-styles-wrapper .ps-canvas,
.editor-styles-wrapper { background: var(--paper); }
.editor-styles-wrapper .section-dark { color: var(--paper); }

/* En el editor no corre el JS que revela .reveal: mostrar todo siempre */
.editor-styles-wrapper .reveal {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}