/*
Theme Name: SPD Visual
Theme URI: https://spdvisual.es
Author: SPD Visual · Daniel Alarcón
Description: Tema a medida para SPD Visual, fotografía y vídeo en San Miguel de Salinas. Pensado para móvil: todo lleva a llamar o escribir por WhatsApp. Al activarlo crea la página de inicio y sube las fotos a Medios.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: spd-visual
*/

:root {
	--spd-fondo: #F5F5F3;
	--spd-blanco: #FFFFFF;
	--spd-tinta: #1C1C1C;
	--spd-texto: #3D3D3D;
	--spd-gris: #5A5A5A;
	--spd-linea: #E1E2DF;
	--spd-borde: #C4C5C2;
	--spd-carbon: #1E1F1E;
	--spd-claro: #ECEDEA;
	--spd-claro-2: #C9CAC7;
	--spd-whatsapp: #0F7A40;
	--spd-titulos: "Barlow Condensed", "Arial Narrow", sans-serif;
	--spd-ico-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath 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.72c.13.96.36 1.9.7 2.81a2 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-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
	--spd-ico-wa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E");
	--spd-ico-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
	--spd-ico-insta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E");
	--spd-ico-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
[id] { scroll-margin-top: 72px; }

/* Sin huecos entre cabecera, contenido y pie */
.wp-site-blocks > * { margin-block-start: 0; }
.spd-main { margin-block: 0; padding-block: 0; }
.spd-main > .wp-block-post-content > * { margin-block-start: 0; margin-block-end: 0; }
.spd-pagina { padding-block: 48px 72px; }
.spd-pagina > * + * { margin-block-start: 24px; }

/* ---------- Botones ---------- */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 54px;
	text-decoration: none;
	transition: opacity .15s ease;
}
.wp-block-button__link:hover { opacity: .88; }
.wp-block-button__link:focus-visible { outline: 2px solid var(--spd-tinta); outline-offset: 2px; }
.spd-btn-whatsapp .wp-block-button__link { background-color: var(--spd-whatsapp); color: #fff; }
.spd-btn-borde .wp-block-button__link {
	background-color: transparent;
	color: var(--spd-tinta);
	border: 1px solid var(--spd-tinta);
}
.spd-btn-mini .wp-block-button__link { min-height: 44px; padding-inline: 16px; font-size: 15px; }

.spd-ico-tel .wp-block-button__link::before,
.spd-ico-wa .wp-block-button__link::before,
.spd-ico-mail .wp-block-button__link::before,
.spd-ico-insta .wp-block-button__link::before {
	content: "";
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	background-color: currentColor;
	-webkit-mask: var(--spd-ico) center / contain no-repeat;
	mask: var(--spd-ico) center / contain no-repeat;
}
.spd-ico-tel { --spd-ico: var(--spd-ico-tel); }
.spd-ico-wa { --spd-ico: var(--spd-ico-wa); }
.spd-ico-mail { --spd-ico: var(--spd-ico-mail); }
.spd-ico-insta { --spd-ico: var(--spd-ico-insta); }

.spd-botones-apilados {
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	max-width: 420px;
}
.spd-botones-apilados .wp-block-button,
.spd-botones-apilados .wp-block-button__link { width: 100%; }
.spd-botones-apilados .wp-block-button__link { font-size: 17px; min-height: 56px; }

/* ---------- Cabecera ---------- */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}
.admin-bar header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 0px); }
@media (max-width: 600px) {
	.admin-bar header.wp-block-template-part { top: 0; }
}
.spd-cabecera {
	background: rgba(245, 245, 243, .95);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--spd-linea);
	padding: 10px 20px;
}
.spd-cabecera__fila {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	max-width: 1080px;
	margin-inline: auto;
}
.spd-cabecera__fila > * { margin: 0 !important; }
.spd-logo img { display: block; height: 40px; width: auto; }
.spd-nav { font-size: 15px; font-weight: 500; gap: 28px; }
.spd-nav a { text-decoration: none; }
.spd-cabecera__botones { gap: 8px; flex-wrap: nowrap; }

@media (max-width: 820px) {
	.spd-nav, .spd-solo-escritorio { display: none !important; }
}

/* ---------- Portada ---------- */
.spd-hero {
	display: grid;
	gap: 28px;
	padding-block: 20px 44px;
}
.spd-hero > * { margin: 0 !important; }
.spd-hero__foto { position: relative; }
.spd-hero__foto img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 25%;
	border-radius: 6px;
}
.spd-hero__texto > * { margin-block: 0; }
.spd-hero__texto > * + * { margin-block-start: 18px; }
.spd-eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--spd-gris);
}
.spd-hero h1 {
	font-size: clamp(42px, 6vw, 76px);
	line-height: .95;
}
.spd-lead { font-size: 17px; line-height: 1.55; color: var(--spd-texto); }
.spd-hero .spd-botones-apilados { margin-block-start: 22px; }

@media (min-width: 821px) {
	.spd-hero {
		grid-template-columns: 1fr 1fr;
		align-items: center;
		gap: 56px;
		padding-block: 48px 72px;
	}
}

/* ---------- Banda de datos ---------- */
.spd-banda {
	background: var(--spd-blanco);
	border-block: 1px solid var(--spd-linea);
	padding-block: 24px;
}
.spd-stats { gap: 16px; margin: 0 auto; }
.spd-stats .wp-block-column > * { margin: 0; }
.spd-stat-num {
	font-family: var(--spd-titulos);
	font-weight: 600;
	font-size: 30px;
	line-height: 1;
	text-transform: uppercase;
}
.spd-stats .spd-stat-txt {
	margin-top: 4px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--spd-gris);
}

/* ---------- Secciones ---------- */
.spd-seccion { padding-block: 56px; }
.spd-seccion > * { margin-block: 0; }
.spd-seccion h2 { font-size: clamp(36px, 4vw, 52px); }
.spd-seccion > h2 + * { margin-block-start: 8px; }
.spd-intro { font-size: 16px; line-height: 1.55; color: var(--spd-texto); }
.spd-seccion > .spd-intro + * { margin-block-start: 24px; }
.spd-blanco { background: var(--spd-blanco); border-block: 1px solid var(--spd-linea); }
.spd-oscuro { background: var(--spd-carbon); color: var(--spd-claro); }
.spd-oscuro h2, .spd-oscuro h3 { color: #fff; }

/* Tarjetas de servicios: se deslizan con el dedo en el móvil */
.spd-tarjetas {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 4px;
}
.spd-tarjetas::-webkit-scrollbar { display: none; }
.spd-tarjetas > .spd-tarjeta {
	flex: 0 0 min(80%, 340px);
	scroll-snap-align: start;
	margin: 0 !important;
}
.spd-tarjeta {
	background: var(--spd-blanco);
	border: 1px solid var(--spd-linea);
	border-radius: 6px;
	overflow: hidden;
}
.spd-tarjeta > * { margin: 0; }
.spd-tarjeta .wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center 40%;
}
.spd-tarjeta h3 { font-size: 30px; margin: 18px 20px 0; }
.spd-tarjeta p { margin: 8px 20px 20px; font-size: 15px; line-height: 1.55; color: var(--spd-texto); }
@media (min-width: 821px) {
	.spd-tarjetas { overflow: visible; }
	.spd-tarjetas > .spd-tarjeta { flex: 1 1 0; }
}

.spd-seccion > .spd-etiqueta {
	margin-block-start: 22px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--spd-gris);
}
.spd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.spd-seccion > .spd-chips { margin-block-start: 10px; }
.spd-chips > p {
	margin: 0;
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 0 16px;
	border: 1px solid var(--spd-borde);
	border-radius: 999px;
	background: var(--spd-blanco);
	font-size: 15px;
	font-weight: 500;
}

/* Galería */
.wp-block-gallery.spd-galeria {
	--wp--style--unstable-gallery-gap: 8px;
	gap: 8px;
}
.spd-galeria.wp-block-gallery .wp-block-image img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	height: auto;
	border-radius: 4px;
}
.spd-seccion > .spd-galeria + .wp-block-buttons { margin-block-start: 20px; }

/* Cómo trabajo */
.spd-seccion > h2 + .spd-pasos { margin-block-start: 28px; }
.spd-pasos { display: grid; gap: 20px 32px; }
.spd-paso {
	display: grid;
	grid-template-columns: 40px 1fr;
	column-gap: 16px;
	align-items: start;
}
.spd-paso > * { margin: 0; }
.spd-paso-num {
	grid-row: span 2;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid #6E6F6C;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--spd-titulos);
	font-weight: 600;
	font-size: 20px;
	color: #fff;
}
.spd-paso h3 {
	font-family: inherit;
	text-transform: none;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
}
.spd-paso p:not(.spd-paso-num) { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--spd-claro-2); }
@media (min-width: 821px) {
	.spd-pasos { grid-template-columns: repeat(3, 1fr); }
}

/* Sobre mí */
.spd-sobre { display: flex; align-items: center; gap: 16px; }
.spd-sobre > * { margin: 0 !important; }
.spd-avatar { flex: 0 0 auto; }
.spd-avatar img {
	display: block;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	object-fit: cover;
}
.spd-sobre__titulo > * { margin: 0; }
.spd-sobre h2 { font-size: clamp(34px, 4vw, 48px); }
.spd-nota { margin-top: 2px !important; font-size: 14px; color: var(--spd-gris); }
.spd-seccion > .spd-texto { margin-block-start: 18px; font-size: 16px; line-height: 1.65; color: var(--spd-texto); max-width: 720px; }

/* Bloques estrechos alineados a la izquierda del contenido, no centrados */
.spd-seccion > .spd-texto,
.spd-contacto > .spd-botones-apilados,
.spd-contacto > .spd-intro {
	margin-left: calc((100% - min(100%, var(--wp--style--global--content-size, 1080px))) / 2) !important;
	margin-right: auto !important;
}

/* Contacto */
.spd-contacto h2 { font-size: clamp(48px, 6vw, 76px); line-height: .95; }
.spd-contacto > h2 + .spd-intro { margin-block-start: 14px; }
.spd-contacto > .spd-intro + .wp-block-buttons { margin-block-start: 22px; }
.spd-seccion > .spd-datos { margin-block-start: 16px; }
.spd-datos > p {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 6px 0 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--spd-texto);
}
.spd-datos a { color: var(--spd-tinta); word-break: break-all; }
.spd-dato-mail::before,
.spd-dato-zona::before {
	content: "";
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	background-color: currentColor;
	-webkit-mask: var(--spd-ico) center / contain no-repeat;
	mask: var(--spd-ico) center / contain no-repeat;
}
.spd-dato-mail { --spd-ico: var(--spd-ico-mail); }
.spd-dato-zona { --spd-ico: var(--spd-ico-pin); }

/* ---------- Pie ---------- */
.spd-pie {
	background: var(--spd-carbon);
	color: var(--spd-claro);
	padding-block: 32px;
}
.spd-pie > * { margin-block: 0; }
.spd-pie__marca { display: flex; align-items: center; gap: 14px; }
.spd-pie__marca > * { margin: 0 !important; }
.spd-pie__logo img { display: block; width: 56px; height: 56px; }
.spd-pie__texto > * { margin: 0; font-size: 13px; color: #A9AAA7; }
.spd-pie__texto .spd-pie__nombre {
	font-family: var(--spd-titulos);
	font-weight: 600;
	font-size: 22px;
	line-height: 1.1;
	text-transform: uppercase;
	color: #fff;
}
.spd-pie > .spd-pie__legal {
	margin-block-start: 18px;
	padding-top: 16px;
	border-top: 1px solid #3E3F3D;
	font-size: 13px;
	line-height: 1.8;
	color: #A9AAA7;
}
.spd-pie__legal a { color: #A9AAA7; }

/* Barra fija de Llamar / WhatsApp (solo móvil) */
.spd-barra-movil {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	margin: 0 !important;
	background: rgba(245, 245, 243, .97);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--spd-linea);
	padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
}
.spd-barra-movil .wp-block-buttons { flex-wrap: nowrap; gap: 10px; }
.spd-barra-movil .wp-block-button { flex: 1 1 0; }
.spd-barra-movil .wp-block-button__link { width: 100%; min-height: 52px; }
@media (max-width: 820px) {
	body { padding-bottom: 80px; }
}
@media (min-width: 821px) {
	.spd-barra-movil { display: none; }
}

/* En el editor, la barra fija no debe tapar nada */
.editor-styles-wrapper .spd-barra-movil { position: static; }