/* ==========================================================================
   Bloque QR — SOLO escritorio (usa la misma clase .desktop-contact que
   ya se oculta en móvil mediante las reglas de arriba).
   ========================================================================== */
.qr-block{
	display:flex; align-items:center; gap:28px; justify-content:center;
	margin-top:40px; padding:26px 30px; background:var(--navy-soft);
	border:1px solid rgba(255,201,51,.35); border-radius:var(--radius); box-shadow:var(--shadow-sm);
	max-width:720px; margin-left:auto; margin-right:auto;
}
.qr-block img{ flex:none; width:140px; height:140px; border-radius:10px; box-shadow:0 0 0 4px rgba(255,201,51,.28); }
.qr-block-text{ text-align:left; }
.qr-block-text .label{ font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--gold-soft); font-weight:700; margin-bottom:6px; }
.qr-block-text p{ margin:0; color:var(--sand); font-size:.92rem; }

/* ==========================================================================
   Bloque "Accesos rápidos" — SOLO página Contacto, SOLO móvil.
   No afecta a ninguna otra plantilla ni a la versión de escritorio:
   todo va bajo .page-contacto-mobile-quick (clase de <body> que solo
   añade page-contacto.php) y dentro de un @media(max-width:767px).
   ========================================================================== */

/* Por defecto (escritorio y tablets grandes) el bloque móvil permanece oculto */
.mobile-quick-links{ display:none; }

@media (max-width:767px){

	/* --- Página Contacto en móvil: ocultamos lo que no forma parte
	   del acceso rápido para que quepa todo en una sola pantalla --- */
	.page-contacto-mobile-quick .desktop-contact,
	.page-contacto-mobile-quick .top-strip,
	.page-contacto-mobile-quick .contact-strip,
	.page-contacto-mobile-quick .site-footer{
		display:none !important;
	}

	.page-contacto-mobile-quick .site-header{
		position:relative; /* liberamos el "sticky" para ganar altura */
	}
	.page-contacto-mobile-quick .site-branding img{ height:40px; }
	.page-contacto-mobile-quick .site-header .container{
		padding-top:8px; padding-bottom:8px;
	}

	/* La página ocupa como mínimo una pantalla, pero NO bloquea el scroll: si el contenido es más alto
	   que la pantalla (barras del navegador, móviles bajos, botones añadidos), se puede bajar hasta el final.
	   Antes: height:100dvh; overflow:hidden, que cortaba «Cómo llegar» y «Página web». */
	.page-contacto-mobile-quick{
		min-height:100dvh;
	}

	/* --- Bloque de accesos rápidos --- */
	.mobile-quick-links{
		display:flex;
		flex-direction:column;
		justify-content:center;
		flex:1 1 auto;
		background:var(--white);
		padding:10px 0 calc(28px + env(safe-area-inset-bottom));
	}
	.mql-inner{
		display:flex;
		flex-direction:column;
		gap:clamp(6px,1.6vh,12px);
	}

	.mql-title{
		text-align:center;
		font-family:var(--font-head);
		font-style:italic;
		color:var(--navy);
		font-size:clamp(.95rem,3.6vw,1.2rem);
		margin:clamp(2px,1vh,8px) 0 0;
	}

	.mql-row{ display:flex; gap:10px; }
	.mql-row--2 > *{ flex:1 1 0; }

	.mql-btn{
		display:flex; align-items:center; justify-content:center; gap:8px;
		background:var(--white); border:1px solid var(--border); border-radius:999px;
		padding:clamp(8px,1.6vh,12px) 12px;
		font-family:var(--font-body); font-weight:700;
		font-size:clamp(.72rem,2.6vw,.88rem);
		color:var(--navy); text-align:center; line-height:1.15;
		box-shadow:var(--shadow-sm);
		transition:.2s ease;
		white-space:nowrap; overflow:hidden;
	}
	.mql-btn span{ overflow:hidden; text-overflow:ellipsis; }
	.mql-btn:active{ transform:scale(.97); }
	.mql-btn--wide{ width:100%; }

	.mql-icon{
		width:clamp(20px,6vw,26px); height:clamp(20px,6vw,26px);
		min-width:20px; object-fit:contain; flex-shrink:0; border-radius:6px;
	}
	.mql-icon--photo{ border-radius:50%; }
	.mql-icon--svg{ padding:2px; }

	.mql-btn--contact{ background:var(--sand); border-color:transparent; }
	.mql-btn--whatsapp{ background:#E1F5DA; border-color:transparent; }
	.mql-btn--email{ background:#FBD9E4; border-color:transparent; }
	.mql-btn--social{ background:var(--white); }
	.mql-btn--map{ background:#D7F3F1; border-color:transparent; }
	/* Acceso a la página de inicio: mismo degradado que el botón "Inicio" del menú. */
	.mql-btn--home-web{
		background:var(--brand-gradient);
		border-color:transparent;
		color:var(--white); gap:clamp(18px,5vw,30px);
	}
	.mql-btn--home-web:active{
		background:linear-gradient(135deg,#B01450 0%,#C96A0A 100%);
	}
	.mql-icon--web-logo{
		width:clamp(22px,5.8vw,28px);
		height:clamp(22px,5.8vw,28px);
		object-fit:contain;
		border-radius:0;
		background:transparent;
		padding:0;
	}
}

/* Pantallas móviles muy bajas (landscape o iPhone SE apaisado):
   compactamos aún más para seguir evitando el scroll. */
@media (max-width:767px) and (max-height:520px){
	.page-contacto-mobile-quick .site-branding img{ height:30px; }
	.mql-title{ font-size:.8rem; margin:0; }
	.mql-btn{ padding:6px 10px; font-size:.7rem; }
	.mql-icon{ width:18px; height:18px; }
}

/* ==========================================================================
   Modo oscuro — SOLO página Contacto (escritorio y móvil).
   Todo va bajo body.page-contacto-mobile-quick, la clase exclusiva de esta
   plantilla (ver page-contacto.php), así que no afecta a ninguna otra
   página del sitio. Las tarjetas (teléfono, email, redes, QR) ya tienen
   su propio fondo claro y no se tocan: solo ajustamos lo que iba
   directamente sobre el fondo general de la página.
   ========================================================================== */

/* Fondo general de la página */
body.page-contacto-mobile-quick{
	background:#0a0a0a;
}

/* Cabecera del sitio (logo), visible en esta página tanto en móvil como
   en escritorio */
body.page-contacto-mobile-quick .site-header{
	background:#0a0a0a;
	border-bottom-color:rgba(255,255,255,.12);
}
body.page-contacto-mobile-quick .site-branding .slogan{
	color:#f5f5f5;
}

/* Menú superior: sobre fondo negro los botones (texto oscuro por defecto)
   quedaban ilegibles. Los ponemos en blanco, conservando el botón
   "Inicio" con su degradado propio. */
body.page-contacto-mobile-quick .main-nav a{
	color:#ffffff;
}
body.page-contacto-mobile-quick .main-nav a:hover,
body.page-contacto-mobile-quick .main-nav .current-menu-item > a,
body.page-contacto-mobile-quick .main-nav .current_page_item > a{
	background:rgba(255,255,255,.12);
	color:#ffffff;
}
body.page-contacto-mobile-quick .main-nav .nav-inicio a{
	color:#ffffff;
}
body.page-contacto-mobile-quick .main-nav .nav-inicio.current-menu-item > a,
body.page-contacto-mobile-quick .main-nav .nav-inicio.current_page_item > a{
	color:#ffffff;
	opacity:.85;
}
/* Desplegable «Club de navegación».
   Escritorio (>960px): tiene fondo blanco propio, así que sus enlaces van en azul marino.
   Móvil/tablet (<=960px): el desplegable es transparente sobre el panel oscuro del menú, por lo que
   el azul marino quedaba casi del mismo color que el fondo y no se leía. Allí van en blanco, igual
   que en el resto de páginas (main.css). */
@media (min-width:961px){
	body.page-contacto-mobile-quick .main-nav ul li.menu-item-has-children > .sub-menu a{
		color:var(--navy);
	}
}
@media (max-width:960px){
	body.page-contacto-mobile-quick .main-nav ul li.menu-item-has-children > .sub-menu a{
		color:rgba(255,255,255,.88);
	}
	body.page-contacto-mobile-quick .main-nav ul li.menu-item-has-children > .sub-menu a:hover{
		color:#ffffff;
		background:rgba(255,255,255,.08);
	}
}

/* Botón hamburguesa (breakpoints intermedios/móvil): también iba en
   azul marino sobre fondo negro. */
body.page-contacto-mobile-quick .nav-toggle{
	border-color:#ffffff;
}
body.page-contacto-mobile-quick .nav-toggle span,
body.page-contacto-mobile-quick .nav-toggle span::before,
body.page-contacto-mobile-quick .nav-toggle span::after{
	background:#ffffff;
}

/* "¡Sigue nuestra ESTELA!" va directo sobre el fondo de página (no tiene
   tarjeta propia detrás), así que su texto oscuro quedaría invisible */
body.page-contacto-mobile-quick .social-block .estela{
	color:#f5f5f5;
}

/* Borde del mapa: el tono arena original apenas se vería sobre negro */
body.page-contacto-mobile-quick .map-embed{
	border-color:rgba(255,255,255,.12);
}

/* --- Solo móvil: el bloque de "Accesos rápidos" tenía fondo blanco propio --- */
@media (max-width:767px){
	body.page-contacto-mobile-quick .mobile-quick-links{
		background:#0a0a0a;
	}
	body.page-contacto-mobile-quick .mql-title{
		color:#f5f5f5;
	}
}