@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap');

.ad-guia {
	--ag-primary: #0F172A;
	--ag-secondary: #334155;
	--ag-cta: #0369A1;
	--ag-cta-hover: #075985;
	--ag-featured: #B45309;
	--ag-featured-bg: #FFFBEB;
	--ag-bg: #F8FAFC;
	--ag-surface: #FFFFFF;
	--ag-text: #020617;
	--ag-text-muted: #475569;
	--ag-border: #E2E8F0;
	--ag-success: #15803D;
	--ag-success-bg: #F0FDF4;
	--ag-danger: #B91C1C;
	--ag-danger-bg: #FEF2F2;
	--ag-radius: 12px;
	--ag-font-heading: 'Poppins', 'Open Sans', sans-serif;
	--ag-font-body: 'Open Sans', sans-serif;

	font-family: var( --ag-font-body ) !important;
	color: var( --ag-text ) !important;
	line-height: 1.6;
	box-sizing: border-box;
}

.ad-guia *,
.ad-guia *::before,
.ad-guia *::after {
	box-sizing: inherit;
}

.ad-guia h1,
.ad-guia h2,
.ad-guia h3,
.ad-guia h4 {
	font-family: var( --ag-font-heading ) !important;
	color: var( --ag-primary ) !important;
	line-height: 1.25;
	margin: 0 0 0.5em;
}

/* Sin !important a propósito: es un default de baja prioridad para texto
   suelto (ej. dentro de una descripción). Los componentes con su propio
   color (botones, tarjetas) usan selectores de mayor especificidad para
   no tener que competir con esta regla. */
.ad-guia a {
	color: var( --ag-cta );
}

.ad-guia img {
	max-width: 100%;
	display: block;
}

/* Red de seguridad: un <svg> sin ancho/alto propio cae al tamaño por
   defecto del navegador (~300x150px). Los usos puntuales de abajo
   (.ad-guia-icono-boton svg, etc.) pisan este valor con el suyo. */
.ad-guia svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.ad-guia :focus-visible {
	outline: 3px solid var( --ag-cta );
	outline-offset: 2px;
}

@media ( prefers-reduced-motion: reduce ) {
	.ad-guia * {
		transition: none !important;
		animation: none !important;
	}
}

/* ---------- Contenedor general ---------- */

.ad-guia-container {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 20px;
}

.ad-guia-boton.ad-guia-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 12px 24px;
	border-radius: 999px;
	background: var( --ag-cta ) !important;
	color: #fff !important;
	font-weight: 600;
	font-size: 16px;
	text-decoration: none !important;
	border: none;
	cursor: pointer;
	transition: background-color 200ms ease, transform 150ms ease;
}

.ad-guia-boton.ad-guia-boton svg {
	width: 18px;
	height: 18px;
}

.ad-guia-boton.ad-guia-boton:hover,
.ad-guia-boton.ad-guia-boton:focus-visible {
	background: var( --ag-cta-hover ) !important;
	color: #fff !important;
}

.ad-guia-boton.ad-guia-boton:active {
	transform: translateY( 1px );
}

.ad-guia-boton.ad-guia-boton--outline {
	background: transparent !important;
	color: var( --ag-cta ) !important;
	border: 2px solid var( --ag-cta );
}

.ad-guia-boton.ad-guia-boton--outline:hover,
.ad-guia-boton.ad-guia-boton--outline:focus-visible {
	background: var( --ag-cta ) !important;
	color: #fff !important;
}

.ad-guia-boton.ad-guia-boton--peligro {
	background: var( --ag-danger ) !important;
}

.ad-guia-boton.ad-guia-boton--peligro:hover {
	background: #7f1d1d !important;
}

.ad-guia-boton.ad-guia-boton[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ---------- Landing ---------- */

.ad-guia-landing-hero {
	background: linear-gradient( 180deg, var( --ag-primary ) 0%, #1E293B 100% ) !important;
	color: #fff !important;
	padding: 56px 0;
	border-radius: var( --ag-radius );
	text-align: center;
	margin-bottom: 40px;
}

.ad-guia-landing-hero h1,
.ad-guia-landing-hero p {
	color: #fff !important;
}

.ad-guia-landing-hero h1 {
	font-size: clamp( 28px, 4vw, 40px );
}

.ad-guia-landing-hero p {
	font-size: 18px;
	color: #CBD5E1 !important;
	max-width: 640px;
	margin: 0 auto 28px;
}

.ad-guia-beneficios {
	list-style: none !important;
	padding: 0;
	margin: 32px 0;
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: 16px;
}

.ad-guia-beneficios li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: var( --ag-surface ) !important;
	border: 1px solid var( --ag-border );
	border-radius: var( --ag-radius );
	padding: 16px;
	font-size: 15px;
	color: var( --ag-text-muted ) !important;
}

.ad-guia-beneficios svg {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: var( --ag-success ) !important;
	margin-top: 2px;
}

/* ---------- Tabla de precios ---------- */

.ad-guia-planes {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
	gap: 24px;
	margin: 40px 0;
	align-items: stretch;
}

.ad-guia-plan {
	background: var( --ag-surface ) !important;
	border: 1px solid var( --ag-border );
	border-radius: var( --ag-radius );
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	position: relative;
}

.ad-guia-plan--destacado {
	border: 2px solid var( --ag-featured );
	background: var( --ag-featured-bg ) !important;
	box-shadow: 0 12px 24px -12px rgba( 180, 83, 9, 0.35 );
}

.ad-guia-plan__badge {
	position: absolute;
	top: -14px;
	left: 28px;
	background: var( --ag-featured ) !important;
	color: #fff !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 999px;
}

.ad-guia-plan__nombre {
	font-size: 20px;
	margin: 0;
}

.ad-guia-plan__precio {
	font-family: var( --ag-font-heading ) !important;
	font-size: 36px;
	font-weight: 700;
	color: var( --ag-primary ) !important;
}

.ad-guia-plan__precio span {
	font-size: 15px;
	font-weight: 500;
	color: var( --ag-text-muted ) !important;
}

.ad-guia-plan__precio-anual {
	font-size: 14px;
	color: var( --ag-text-muted ) !important;
}

.ad-guia-plan ul {
	list-style: none !important;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex-grow: 1;
}

.ad-guia-plan ul li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 14.5px;
	color: var( --ag-text-muted ) !important;
}

.ad-guia-plan ul svg {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	color: var( --ag-success ) !important;
	margin-top: 2px;
}

/* ---------- Formulario de alta ---------- */

.ad-guia-form {
	background: var( --ag-surface ) !important;
	border: 1px solid var( --ag-border );
	border-radius: var( --ag-radius );
	padding: 32px;
	max-width: 760px;
	margin: 0 auto;
}

.ad-guia-form fieldset {
	border: none;
	padding: 0;
	margin: 0 0 32px;
}

.ad-guia-form legend {
	font-family: var( --ag-font-heading ) !important;
	font-weight: 600;
	font-size: 18px;
	color: var( --ag-primary ) !important;
	padding: 0 0 12px;
	margin-bottom: 16px;
	border-bottom: 2px solid var( --ag-border );
	width: 100%;
}

.ad-guia-campo {
	margin-bottom: 18px;
}

.ad-guia-campo label {
	display: block;
	font-weight: 600;
	font-size: 14.5px;
	margin-bottom: 6px;
	color: var( --ag-text ) !important;
}

.ad-guia-campo .ad-guia-ayuda {
	display: block;
	font-size: 13px;
	color: var( --ag-text-muted ) !important;
	margin-top: 4px;
	font-weight: 400;
}

.ad-guia-fila {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: 18px;
}

.ad-guia-campo input[type="text"],
.ad-guia-campo input[type="email"],
.ad-guia-campo input[type="tel"],
.ad-guia-campo input[type="url"],
.ad-guia-campo select,
.ad-guia-campo textarea {
	width: 100%;
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid var( --ag-border );
	border-radius: 8px;
	font-size: 15px;
	font-family: inherit !important;
	color: var( --ag-text ) !important;
	background: #fff !important;
}

.ad-guia-campo textarea {
	min-height: 90px;
	resize: vertical;
}

.ad-guia-campo input:focus,
.ad-guia-campo select:focus,
.ad-guia-campo textarea:focus {
	border-color: var( --ag-cta );
	outline: 3px solid rgba( 3, 105, 161, 0.15 );
}

.ad-guia-campo input[type="file"] {
	width: 100%;
	padding: 12px 14px;
	border: 1px dashed var( --ag-border );
	border-radius: 8px;
	background: var( --ag-bg ) !important;
	font-size: 14px;
	color: var( --ag-text-muted ) !important;
	cursor: pointer;
}

.ad-guia-campo input[type="file"]::file-selector-button {
	margin-right: 14px;
	padding: 9px 18px;
	border-radius: 999px;
	border: none;
	background: var( --ag-cta ) !important;
	color: #fff !important;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background-color 200ms ease;
}

.ad-guia-campo input[type="file"]::file-selector-button:hover {
	background: var( --ag-cta-hover ) !important;
}

.ad-guia-enlace-fila {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 10px;
	margin-bottom: 10px;
	align-items: center;
}

.ad-guia-enlace-fila select,
.ad-guia-enlace-fila input[type="url"] {
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid var( --ag-border );
	border-radius: 8px;
	font-size: 15px;
	font-family: inherit;
	color: var( --ag-text ) !important;
	background: #fff !important;
}

.ad-guia-enlace-fila select:focus,
.ad-guia-enlace-fila input[type="url"]:focus {
	border-color: var( --ag-cta );
	outline: 3px solid rgba( 3, 105, 161, 0.15 );
}

.ad-guia-enlace-quitar {
	background: transparent !important;
	border: 1px solid var( --ag-border );
	border-radius: 8px;
	min-height: 44px;
	min-width: 44px;
	cursor: pointer;
	color: var( --ag-danger ) !important;
}

.ad-guia-agregar-enlace {
	background: transparent !important;
	border: 1px dashed var( --ag-cta );
	color: var( --ag-cta ) !important;
	border-radius: 8px;
	padding: 10px 16px;
	cursor: pointer;
	font-weight: 600;
	min-height: 44px;
}

.ad-guia-plan-opciones {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
	gap: 14px;
}

.ad-guia-plan-opcion {
	border: 2px solid var( --ag-border );
	border-radius: var( --ag-radius );
	padding: 16px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ad-guia-plan-opcion:has( input:checked ) {
	border-color: var( --ag-cta );
	background: #EFF6FF !important;
}

.ad-guia-plan-opcion input {
	margin-right: 8px;
}

.ad-guia-mensaje {
	border-radius: 8px;
	padding: 14px 16px;
	font-size: 14.5px;
	margin-bottom: 20px;
}

.ad-guia-mensaje--error {
	background: var( --ag-danger-bg ) !important;
	color: var( --ag-danger ) !important;
	border: 1px solid #FCA5A5;
}

.ad-guia-mensaje--exito {
	background: var( --ag-success-bg ) !important;
	color: var( --ag-success ) !important;
	border: 1px solid #86EFAC;
}

/* ---------- Directorio y filtros ---------- */

.ad-guia-filtros {
	background: var( --ag-surface ) !important;
	border: 1px solid var( --ag-border );
	border-radius: var( --ag-radius );
	padding: 20px;
	margin-bottom: 28px;
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 180px, 1fr ) );
	gap: 14px;
	align-items: end;
}

.ad-guia-filtros label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 6px;
	color: var( --ag-secondary ) !important;
}

.ad-guia-filtros select,
.ad-guia-filtros input[type="search"] {
	width: 100%;
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid var( --ag-border );
	border-radius: 8px;
	font-size: 15px;
}

.ad-guia-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) );
	gap: 24px;
}

.ad-guia-sin-resultados {
	text-align: center;
	padding: 48px 20px;
	color: var( --ag-text-muted ) !important;
}

/* ---------- Tarjeta de perfil ---------- */

.ad-guia-card.ad-guia-card {
	background: var( --ag-surface ) !important;
	border: 1px solid var( --ag-border );
	border-radius: var( --ag-radius );
	overflow: hidden;
	display: flex;
	flex-direction: column;
	text-decoration: none !important;
	color: inherit !important;
	transition: transform 200ms ease, box-shadow 200ms ease;
	position: relative;
}

.ad-guia-card.ad-guia-card:hover,
.ad-guia-card.ad-guia-card:focus-visible {
	transform: translateY( -4px );
	box-shadow: 0 16px 32px -18px rgba( 15, 23, 42, 0.35 );
}

.ad-guia-card.ad-guia-card--destacado {
	border-color: var( --ag-featured );
}

.ad-guia-card__badge {
	position: absolute;
	top: 12px;
	right: 12px;
	background: var( --ag-featured ) !important;
	color: #fff !important;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 4px 10px;
	border-radius: 999px;
	z-index: 1;
}

.ad-guia-card__logo-wrap {
	background: var( --ag-bg ) !important;
	height: 140px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid var( --ag-border );
}

.ad-guia-card__logo-wrap img {
	max-height: 90px;
	width: auto;
	object-fit: contain;
}

.ad-guia-card__logo-wrap .ad-guia-card__inicial {
	font-family: var( --ag-font-heading ) !important;
	font-size: 40px;
	font-weight: 700;
	color: var( --ag-secondary ) !important;
}

.ad-guia-card__body {
	padding: 18px 20px 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex-grow: 1;
}

.ad-guia-card__rubro {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --ag-cta ) !important;
}

.ad-guia-card__nombre {
	font-size: 18px;
	margin: 0;
	color: var( --ag-primary ) !important;
}

.ad-guia-card__zona {
	font-size: 13.5px;
	color: var( --ag-text-muted ) !important;
	display: flex;
	align-items: center;
	gap: 6px;
}

.ad-guia-card__zona svg {
	width: 14px;
	height: 14px;
}

.ad-guia-card__excerpt {
	font-size: 14px;
	color: var( --ag-text-muted ) !important;
	flex-grow: 1;
}

.ad-guia-card__contacto {
	display: flex;
	gap: 8px;
	margin-top: 8px;
}

.ad-guia-icono-boton {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var( --ag-bg ) !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var( --ag-primary ) !important;
	border: 1px solid var( --ag-border );
	transition: background-color 200ms ease, color 200ms ease;
}

.ad-guia-icono-boton:hover,
.ad-guia-icono-boton:focus-visible {
	background: var( --ag-cta ) !important;
	color: #fff !important;
}

.ad-guia-icono-boton svg {
	width: 18px;
	height: 18px;
}

/* ---------- Ficha individual ---------- */

.ad-guia-ficha {
	margin: 24px 0;
}

.ad-guia-ficha__header {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
	margin-bottom: 24px;
}

.ad-guia-ficha__logo {
	width: 96px;
	height: 96px;
	border-radius: var( --ag-radius );
	border: 1px solid var( --ag-border );
	object-fit: contain;
	background: #fff !important;
	padding: 8px;
}

.ad-guia-ficha__titulo h1 {
	margin-bottom: 4px;
	font-size: 28px;
}

.ad-guia-ficha__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	font-size: 14px;
	color: var( --ag-text-muted ) !important;
}

.ad-guia-pill {
	background: var( --ag-bg ) !important;
	border: 1px solid var( --ag-border );
	border-radius: 999px;
	padding: 4px 12px;
	font-size: 12.5px;
	font-weight: 600;
	color: var( --ag-secondary ) !important;
}

.ad-guia-ficha__grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 32px;
}

@media ( max-width: 780px ) {
	.ad-guia-ficha__grid {
		grid-template-columns: 1fr;
	}
}

.ad-guia-ficha__seccion {
	margin-bottom: 28px;
}

.ad-guia-ficha__seccion h2 {
	font-size: 17px;
	border-bottom: 2px solid var( --ag-border );
	padding-bottom: 8px;
}

.ad-guia-galeria {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 140px, 1fr ) );
	gap: 10px;
}

.ad-guia-galeria img {
	width: 100%;
	height: 110px;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid var( --ag-border );
}

.ad-guia-contacto-lista {
	list-style: none !important;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ad-guia-contacto-lista li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14.5px;
}

.ad-guia-contacto-lista svg {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: var( --ag-cta ) !important;
}

.ad-guia-mapa iframe {
	width: 100%;
	height: 220px;
	border: 0;
	border-radius: var( --ag-radius );
}

.ad-guia-compartir {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 12px;
}

.ad-guia-sidebar {
	background: var( --ag-bg ) !important;
	border: 1px solid var( --ag-border );
	border-radius: var( --ag-radius );
	padding: 20px;
	align-self: start;
}

/* ---------- Banner destacados ---------- */

.ad-guia-banner {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	padding: 4px 4px 12px;
	scroll-snap-type: x mandatory;
}

.ad-guia-banner .ad-guia-card {
	min-width: 220px;
	scroll-snap-align: start;
}

/* ---------- Responsive ---------- */

@media ( max-width: 600px ) {
	.ad-guia-form,
	.ad-guia-plan {
		padding: 22px 18px;
	}

	.ad-guia-ficha__header {
		flex-direction: column;
		align-items: flex-start;
	}

	.ad-guia-enlace-fila {
		grid-template-columns: 1fr;
	}
}