/*
Theme Name: Taller Directorio
Theme URI: https://example.com
Author: Tu Nichero
Description: Tema para directorio de talleres mecánicos en España. Diseño original inspirado en la estructura de directorios locales (buscador, estadísticas, listado por ciudad), con estética de ficha de taller / orden de trabajo. Diseñado para funcionar junto al plugin "Directorio OSM Scraper" (CPT "negocio", taxonomías "db_ciudad" y "db_sector").
Version: 1.0.0
Requires PHP: 7.4
Text Domain: taller-directorio
*/

/* =========================================================================
   1. TOKENS DE DISEÑO
   ========================================================================= */

:root {
	/* Color */
	--color-asfalto:      #1C1E22; /* fondo oscuro: header, footer, hero */
	--color-asfalto-2:    #2A2D33; /* asfalto un tono más claro, para tarjetas sobre fondo oscuro */
	--color-acero:        #EDEEF0; /* fondo claro general */
	--color-acero-2:      #FFFFFF; /* fondo de tarjetas sobre fondo claro */
	--color-naranja:      #FF5A1F; /* acento principal — naranja señal de taller */
	--color-naranja-osc:  #E24710;
	--color-azul:         #1E3A5F; /* acento secundario — azul mono de trabajo */
	--color-amarillo:     #FFC93C; /* detalle puntual — aviso/sello */
	--color-texto:        #14161A;
	--color-texto-suave:  #52565E;
	--color-borde:        #DBDDE1;
	--color-exito:        #1C7C4C;

	/* Tipografía */
	--font-display: "Oswald", "Arial Narrow", sans-serif;
	--font-body: "Work Sans", -apple-system, BlinkMacSystemFont, sans-serif;
	--font-mono: "IBM Plex Mono", "Courier New", monospace;

	/* Espaciado */
	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
	--space-4: 2.5rem;
	--space-5: 4rem;
	--space-6: 6rem;

	/* Otros */
	--radius: 6px;
	--radius-sm: 3px;
	--sombra: 0 4px 20px rgba(28, 30, 34, 0.08);
	--sombra-fuerte: 0 12px 32px rgba(28, 30, 34, 0.18);
	--max-width: 1180px;
}

/* =========================================================================
   2. RESET Y BASE
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--color-texto);
	background: var(--color-acero);
	font-size: 16px;
	line-height: 1.55;
}

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

a { color: var(--color-azul); text-decoration: none; }
a:hover { color: var(--color-naranja); }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.15;
	margin: 0 0 var(--space-2);
	color: var(--color-asfalto);
}

h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 var(--space-2); }

.container {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 var(--space-3);
}

:focus-visible {
	outline: 3px solid var(--color-naranja);
	outline-offset: 2px;
}

.boton {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 0.95rem;
	padding: 0.85em 1.6em;
	border-radius: var(--radius-sm);
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.boton:hover { transform: translateY(-2px); }

.boton--naranja {
	background: var(--color-naranja);
	color: #fff;
	box-shadow: 0 6px 0 var(--color-naranja-osc);
}
.boton--naranja:hover { color: #fff; box-shadow: 0 8px 0 var(--color-naranja-osc); }
.boton--naranja:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--color-naranja-osc); }

.boton--outline {
	background: transparent;
	border-color: rgba(255,255,255,0.4);
	color: #fff;
}
.boton--outline:hover { border-color: #fff; color: #fff; }

/* =========================================================================
   3. HEADER
   ========================================================================= */

.site-header {
	background: var(--color-asfalto);
	color: #fff;
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 3px solid var(--color-naranja);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-2) var(--space-3);
	max-width: var(--max-width);
	margin: 0 auto;
	gap: var(--space-3);
}

.site-logo {
	display: flex;
	align-items: center;
	gap: 0.6em;
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: 1.25rem;
	letter-spacing: 0.03em;
	color: #fff;
}
.site-logo:hover { color: var(--color-amarillo); }
.site-logo svg { flex-shrink: 0; }

.site-nav__lista {
	list-style: none;
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}
.site-nav__lista > li > a,
.menu-item-dropdown__toggle {
	color: rgba(255,255,255,0.85);
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
}
.site-nav__lista > li > a:hover,
.menu-item-dropdown__toggle:hover { color: var(--color-amarillo); }

/* --- Dropdown "Ciudades" en escritorio --- */

.menu-item-dropdown { position: relative; }

.menu-item-dropdown__flecha { font-size: 0.7em; transition: transform 0.15s ease; }
.menu-item-dropdown.is-open .menu-item-dropdown__flecha { transform: rotate(180deg); }

.menu-item-dropdown__panel {
	list-style: none;
	margin: 0;
	padding: 0.5em 0;
	position: absolute;
	top: calc(100% + 14px);
	left: 50%;
	transform: translateX(-50%);
	background: #fff;
	border-radius: var(--radius-sm);
	box-shadow: var(--sombra-fuerte);
	min-width: 210px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, transform 0.15s ease;
	z-index: 60;
}
.menu-item-dropdown__panel::before {
	content: "";
	position: absolute;
	top: -6px;
	left: 50%;
	transform: translateX(-50%) rotate(45deg);
	width: 12px; height: 12px;
	background: #fff;
}
.menu-item-dropdown.is-open .menu-item-dropdown__panel {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.menu-item-dropdown__panel li a,
.menu-item-dropdown__vacio {
	display: block;
	padding: 0.6em 1.1em;
	color: var(--color-texto);
	font-family: var(--font-body);
	text-transform: none;
	letter-spacing: normal;
	font-size: 0.92rem;
	white-space: nowrap;
}
.menu-item-dropdown__panel li a:hover { background: var(--color-acero); color: var(--color-naranja); }
.menu-item-dropdown__vacio { color: var(--color-texto-suave); font-style: italic; }

.menu-item-dropdown__vermas {
	border-top: 1px solid var(--color-borde);
	margin-top: 0.3em;
}
.menu-item-dropdown__vermas a { color: var(--color-naranja); font-weight: 600; }

/* --- Botón hamburguesa --- */

.nav-toggle {
	display: none;
	background: none;
	border: none;
	padding: 0.4em;
	cursor: pointer;
	flex-direction: column;
	gap: 5px;
}
.nav-toggle__linea {
	display: block;
	width: 24px;
	height: 2px;
	background: #fff;
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__linea:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__linea:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__linea:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Menú móvil: panel deslizante a pantalla completa --- */

@media (max-width: 780px) {
	.nav-toggle { display: flex; }

	.site-nav {
		position: fixed;
		top: 0; right: 0;
		width: min(86vw, 340px);
		height: 100vh;
		background: var(--color-asfalto);
		transform: translateX(100%);
		transition: transform 0.25s ease;
		overflow-y: auto;
		padding: calc(var(--space-5) + 1rem) var(--space-3) var(--space-3);
		box-shadow: -8px 0 30px rgba(0,0,0,0.3);
		z-index: 55;
	}
	.site-nav.is-open { transform: translateX(0); }

	.site-nav__lista { flex-direction: column; align-items: stretch; gap: 0; }
	.site-nav__lista > li { border-bottom: 1px solid rgba(255,255,255,0.1); }
	.site-nav__lista > li > a,
	.menu-item-dropdown__toggle {
		width: 100%;
		padding: var(--space-2) 0;
		font-size: 0.95rem;
		justify-content: space-between;
	}

	/* El desplegable de ciudades se convierte en acordeón dentro del panel */
	.menu-item-dropdown__panel {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		background: var(--color-asfalto-2);
		border-radius: var(--radius-sm);
		max-height: 0;
		padding: 0;
		overflow: hidden;
		transition: max-height 0.2s ease;
		margin-bottom: 0;
	}
	.menu-item-dropdown__panel::before { display: none; }
	.menu-item-dropdown.is-open .menu-item-dropdown__panel {
		max-height: 400px;
		padding: 0.3em 0;
		margin-bottom: var(--space-1);
	}
	.menu-item-dropdown__panel li a,
	.menu-item-dropdown__vacio {
		color: rgba(255,255,255,0.8);
		padding: 0.65em 1em;
	}
	.menu-item-dropdown__panel li a:hover { background: rgba(255,255,255,0.06); color: var(--color-amarillo); }

	/* Overlay oscuro detrás del panel */
	.nav-overlay {
		position: fixed; inset: 0;
		background: rgba(0,0,0,0.5);
		opacity: 0; visibility: hidden;
		transition: opacity 0.2s ease;
		z-index: 54;
	}
	.nav-overlay.is-open { opacity: 1; visibility: visible; }
}

/* =========================================================================
   4. HERO
   ========================================================================= */

.hero {
	background: var(--color-asfalto);
	color: #fff;
	background-image:
		repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 14px);
	padding: var(--space-6) 0 var(--space-5);
	position: relative;
	overflow: hidden;
}

.hero__grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: var(--space-5);
	align-items: center;
}

@media (max-width: 900px) {
	.hero__grid { grid-template-columns: 1fr; }
}

.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--font-mono);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-amarillo);
	background: rgba(255, 201, 60, 0.1);
	border: 1px solid rgba(255, 201, 60, 0.35);
	padding: 0.35em 0.9em;
	border-radius: 999px;
	margin-bottom: var(--space-2);
}

.hero h1 { color: #fff; margin-bottom: var(--space-2); }
.hero h1 em {
	font-style: normal;
	color: var(--color-naranja);
}

.hero__lead {
	color: rgba(255,255,255,0.75);
	font-size: 1.1rem;
	max-width: 46ch;
	margin-bottom: var(--space-3);
}

/* --- Ticket de búsqueda (elemento distintivo) --- */

.ticket-buscador {
	background: #fff;
	color: var(--color-texto);
	border-radius: var(--radius);
	box-shadow: var(--sombra-fuerte);
	position: relative;
	padding: var(--space-3);
	transform: rotate(-1deg);
}

.ticket-buscador::before,
.ticket-buscador::after {
	content: "";
	position: absolute;
	width: 26px;
	height: 26px;
	background: var(--color-acero);
	border-radius: 50%;
	top: 50%;
	transform: translateY(-50%);
}
.ticket-buscador::before { left: -13px; }
.ticket-buscador::after { right: -13px; }

.ticket-buscador__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 2px dashed var(--color-borde);
	padding-bottom: var(--space-2);
	margin-bottom: var(--space-2);
}

.ticket-buscador__titulo {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-texto-suave);
}

.sello-verificado {
	font-family: var(--font-display);
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-exito);
	border: 2px solid var(--color-exito);
	border-radius: var(--radius-sm);
	padding: 0.25em 0.6em;
	transform: rotate(3deg);
}

.buscador-form { display: grid; gap: var(--space-2); }

.buscador-form__fila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
@media (max-width: 480px) { .buscador-form__fila { grid-template-columns: 1fr; } }

.buscador-form label {
	display: block;
	font-family: var(--font-mono);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-texto-suave);
	margin-bottom: 0.35em;
}

.buscador-form select,
.buscador-form input[type="text"] {
	width: 100%;
	padding: 0.75em 0.9em;
	border: 2px solid var(--color-borde);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: 0.95rem;
	background: var(--color-acero);
	color: var(--color-texto);
}
.buscador-form select:focus,
.buscador-form input[type="text"]:focus {
	border-color: var(--color-naranja);
	outline: none;
}

.buscador-form__fijo {
	padding: 0.75em 0.9em;
	border: 2px dashed var(--color-borde);
	border-radius: var(--radius-sm);
	background: var(--color-acero);
	color: var(--color-texto-suave);
	font-size: 0.9rem;
}

.buscador-form button {
	width: 100%;
	justify-content: center;
	border-radius: var(--radius-sm);
}

/* --- Barra de estadísticas tipo manómetro --- */

.stats-manometros {
	display: flex;
	gap: var(--space-4);
	flex-wrap: wrap;
	margin-top: var(--space-4);
}

.manometro { text-align: center; width: 110px; }

.manometro svg { display: block; margin: 0 auto var(--space-1); }

.manometro__valor {
	font-family: var(--font-mono);
	font-size: 1.3rem;
	color: #fff;
	font-weight: 600;
}

.manometro__etiqueta {
	font-family: var(--font-mono);
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: rgba(255,255,255,0.6);
}

/* =========================================================================
   5. SECCIONES GENERALES
   ========================================================================= */

.seccion { padding: var(--space-5) 0; }
.seccion--clara { background: var(--color-acero-2); }

.seccion__header { text-align: center; max-width: 640px; margin: 0 auto var(--space-4); }
.seccion__header p { color: var(--color-texto-suave); }

.eyebrow-linea {
	display: flex;
	align-items: center;
	gap: 0.8em;
	justify-content: center;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-naranja);
	margin-bottom: var(--space-1);
}
.eyebrow-linea::before, .eyebrow-linea::after {
	content: "";
	height: 1px;
	width: 30px;
	background: var(--color-naranja);
}

/* --- Grid "por qué elegirnos" --- */

.grid-ventajas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: var(--space-3);
}

.tarjeta-ventaja {
	background: #fff;
	border: 1px solid var(--color-borde);
	border-radius: var(--radius);
	padding: var(--space-3);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tarjeta-ventaja:hover { transform: translateY(-4px); box-shadow: var(--sombra); }

.tarjeta-ventaja__icono {
	width: 48px; height: 48px;
	display: flex; align-items: center; justify-content: center;
	background: var(--color-azul);
	color: #fff;
	border-radius: var(--radius-sm);
	margin-bottom: var(--space-2);
}

.tarjeta-ventaja h3 { text-transform: none; letter-spacing: normal; margin-bottom: 0.4em; }
.tarjeta-ventaja p { color: var(--color-texto-suave); font-size: 0.95rem; margin: 0; }

/* --- Grid de ciudades (chips tipo matrícula) --- */

.grid-ciudades {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	justify-content: center;
}

.chip-ciudad {
	font-family: var(--font-mono);
	font-size: 0.85rem;
	letter-spacing: 0.03em;
	background: #fff;
	border: 2px solid var(--color-azul);
	color: var(--color-azul);
	padding: 0.5em 1em;
	border-radius: var(--radius-sm);
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}
.chip-ciudad:hover { background: var(--color-azul); color: #fff; }
.chip-ciudad::before { content: "🔧"; font-size: 0.85em; }

/* --- CTA para talleres --- */

.cta-negocios {
	background: linear-gradient(135deg, var(--color-azul), var(--color-asfalto));
	color: #fff;
	border-radius: var(--radius);
	padding: var(--space-5) var(--space-4);
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: var(--space-4);
	align-items: center;
}
@media (max-width: 780px) { .cta-negocios { grid-template-columns: 1fr; } }

.cta-negocios h2 { color: #fff; }
.cta-negocios p { color: rgba(255,255,255,0.75); }

.cta-negocios__cifras { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.cta-negocios__cifra { font-family: var(--font-mono); }
.cta-negocios__cifra strong { display: block; font-size: 1.4rem; color: var(--color-amarillo); }
.cta-negocios__cifra span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.6); }

/* --- FAQ tipo cajón de herramientas --- */

.faq-lista { max-width: 780px; margin: 0 auto; }

.faq-item {
	border: 1px solid var(--color-borde);
	border-radius: var(--radius-sm);
	margin-bottom: var(--space-1);
	background: #fff;
	overflow: hidden;
}

.faq-item__pregunta {
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	padding: var(--space-2) var(--space-3);
	font-family: var(--font-display);
	text-transform: none;
	letter-spacing: normal;
	font-size: 1.02rem;
	font-weight: 500;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	color: var(--color-texto);
}

.faq-item__icono { transition: transform 0.2s ease; color: var(--color-naranja); flex-shrink: 0; margin-left: var(--space-2); }
.faq-item.is-open .faq-item__icono { transform: rotate(45deg); }

.faq-item__respuesta {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.25s ease;
	color: var(--color-texto-suave);
}
.faq-item__respuesta-inner { padding: 0 var(--space-3) var(--space-3); }
.faq-item.is-open .faq-item__respuesta { max-height: 500px; }

/* =========================================================================
   6. LISTADO (archive-negocio del plugin)
   ========================================================================= */

.dos-archive-listado { max-width: var(--max-width); margin: 0 auto; padding: var(--space-5) var(--space-3); }

.dos-archive-listado h1 { margin-bottom: var(--space-3); }

.dos-listado {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--space-3);
}

.dos-listado-item {
	background: #fff;
	border: 1px solid var(--color-borde);
	border-left: 4px solid var(--color-naranja);
	border-radius: var(--radius-sm);
	padding: var(--space-2) var(--space-3);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dos-listado-item:hover { transform: translateY(-3px); box-shadow: var(--sombra); }

.dos-listado-item h2 { font-size: 1.05rem; text-transform: none; letter-spacing: normal; margin-bottom: 0.3em; color: var(--color-texto); }
.dos-listado-item a:hover h2 { color: var(--color-naranja); }
.dos-listado-item p { font-size: 0.88rem; color: var(--color-texto-suave); margin: 0.15em 0; font-family: var(--font-mono); }

.dos-paginacion { margin-top: var(--space-4); display: flex; gap: 0.5em; justify-content: center; }
.dos-paginacion .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 38px; height: 38px; padding: 0 0.6em;
	border: 1px solid var(--color-borde); border-radius: var(--radius-sm);
	font-family: var(--font-mono); color: var(--color-texto);
}
.dos-paginacion .page-numbers.current { background: var(--color-naranja); color: #fff; border-color: var(--color-naranja); }

.dos-atribucion { margin-top: var(--space-4); color: var(--color-texto-suave); font-size: 0.8rem; }

/* =========================================================================
   7. FICHA INDIVIDUAL (single-negocio)
   ========================================================================= */

.ficha-taller { max-width: 860px; margin: 0 auto; padding: var(--space-5) var(--space-3); }

.ficha-taller__cabecera {
	background: #fff;
	border: 1px solid var(--color-borde);
	border-radius: var(--radius);
	padding: var(--space-3);
	margin-bottom: var(--space-3);
	position: relative;
	border-top: 6px solid var(--color-naranja);
}

.ficha-taller__migas { font-family: var(--font-mono); font-size: 0.78rem; color: var(--color-texto-suave); margin-bottom: var(--space-1); }
.ficha-taller__migas a { color: var(--color-azul); }

.ficha-taller__cta-llamar {
	position: sticky;
	bottom: var(--space-2);
	display: inline-flex;
	margin-top: var(--space-2);
}

.ficha-taller__datos {
	list-style: none; margin: var(--space-3) 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--space-2);
}
.ficha-taller__datos li {
	background: var(--color-acero);
	border-radius: var(--radius-sm);
	padding: var(--space-2);
	font-size: 0.92rem;
}
.ficha-taller__datos strong { display: block; font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-texto-suave); margin-bottom: 0.3em; }

.ficha-taller__mapa { border-radius: var(--radius); overflow: hidden; margin-bottom: var(--space-3); border: 1px solid var(--color-borde); }
.ficha-taller__mapa iframe { display: block; }

/* =========================================================================
   8. FOOTER
   ========================================================================= */

.site-footer { background: var(--color-asfalto); color: rgba(255,255,255,0.7); padding: var(--space-5) 0 var(--space-3); }

.site-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: var(--space-4);
	margin-bottom: var(--space-4);
}
@media (max-width: 700px) { .site-footer__grid { grid-template-columns: 1fr; } }

.site-footer h4 { color: #fff; font-size: 0.85rem; margin-bottom: var(--space-2); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.5em; }
.site-footer a { color: rgba(255,255,255,0.65); font-size: 0.92rem; }
.site-footer a:hover { color: var(--color-amarillo); }

.site-footer__bottom {
	border-top: 1px solid rgba(255,255,255,0.12);
	padding-top: var(--space-2);
	font-size: 0.8rem;
	display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-1);
}

/* =========================================================================
   8b. CONTACTO
   ========================================================================= */

.notice-contacto {
	max-width: 640px;
	margin: 0 auto var(--space-3);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-sm);
	font-size: 0.95rem;
	text-align: center;
}
.notice-contacto--ok { background: #E7F6EC; border: 1px solid var(--color-exito); color: var(--color-exito); }
.notice-contacto--error { background: #FDECEA; border: 1px solid #D32F2F; color: #B71C1C; }

.contacto-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: var(--space-4);
	align-items: start;
}
@media (max-width: 780px) { .contacto-grid { grid-template-columns: 1fr; } }

.contacto-form {
	background: #fff;
	border: 1px solid var(--color-borde);
	border-top: 6px solid var(--color-naranja);
	border-radius: var(--radius);
	padding: var(--space-3);
	display: grid;
	gap: var(--space-2);
}

.contacto-form__campo label {
	display: block;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-texto-suave);
	margin-bottom: 0.35em;
}

.contacto-form__campo input,
.contacto-form__campo select,
.contacto-form__campo textarea {
	width: 100%;
	padding: 0.75em 0.9em;
	border: 2px solid var(--color-borde);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: 0.95rem;
	background: var(--color-acero);
	color: var(--color-texto);
	resize: vertical;
}
.contacto-form__campo input:focus,
.contacto-form__campo select:focus,
.contacto-form__campo textarea:focus {
	border-color: var(--color-naranja);
	outline: none;
}

.contacto-info {
	background: var(--color-asfalto);
	color: rgba(255,255,255,0.85);
	border-radius: var(--radius);
	padding: var(--space-3);
}
.contacto-info h3 { color: #fff; font-size: 1rem; margin-bottom: var(--space-2); }
.contacto-info__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.contacto-info__lista strong { display: block; color: var(--color-amarillo); font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.3em; }
.contacto-info__lista a { color: #fff; }
.contacto-info__lista a:hover { color: var(--color-amarillo); }

/* =========================================================================
   9. UTILIDADES
   ========================================================================= */

.visually-hidden {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}