/* SMG Arquitectura · estilos complementarios a theme.json
   Colores y tipos vienen de theme.json (variables --wp--preset--*). */

:root {
	--smg-ease: cubic-bezier(.2, .7, .2, 1);
	--smg-linea: rgba(41, 43, 41, .14);
	--smg-nav: 76px;
}

html { scroll-padding-top: var(--smg-nav); -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; }
:where(.wp-site-blocks) :focus-visible { outline: 2px solid var(--wp--preset--color--tabaco); outline-offset: 3px; }
.skip-link.screen-reader-text:focus { background: var(--wp--preset--color--petroleo); color: var(--wp--preset--color--blanco); }

/* ---------- Cabecera ---------- */
.smg-cabecera {
	position: sticky; top: 0; z-index: 50;
	background: rgba(247, 245, 240, .94);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--smg-linea);
	min-height: var(--smg-nav);
}
.admin-bar .smg-cabecera { top: 32px; }
@media (max-width: 782px) { .admin-bar .smg-cabecera { top: 46px; } }
.smg-cabecera .wp-block-site-logo img, .smg-logo img { height: 40px; width: auto; }
.smg-cabecera .wp-block-navigation a { text-decoration: none; padding: 12px 0;
	background: linear-gradient(currentColor, currentColor) 0 calc(100% - 6px) / 0 1px no-repeat;
	transition: background-size .35s var(--smg-ease); }
.smg-cabecera .wp-block-navigation a:hover { background-size: 100% 1px; color: inherit; }

/* ---------- Botones ---------- */
.wp-element-button, .wp-block-button__link { transition: transform .2s var(--smg-ease), background-color .25s, color .25s, border-color .25s; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: .5em; text-decoration: none; }
.wp-element-button:hover, .wp-block-button__link:hover { transform: translateY(-2px); }
.wp-element-button:active, .wp-block-button__link:active { transform: translateY(0) scale(.98); }
.wp-block-button.is-style-linea .wp-block-button__link { background: transparent; color: inherit; border: 1px solid currentColor; }
.wp-block-button.is-style-linea .wp-block-button__link:hover { background: rgba(38, 63, 64, .06); }
.has-petroleo-background-color .wp-block-button.is-style-linea .wp-block-button__link:hover,
.smg-portada .wp-block-button.is-style-linea .wp-block-button__link:hover { background: rgba(247, 245, 240, .12); }

/* Enlace «más» con subrayado que se dibuja */
.smg-mas a, a.smg-mas { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; font-size: .9375rem; text-decoration: none; color: var(--wp--preset--color--petroleo);
	background: linear-gradient(currentColor, currentColor) 0 calc(100% - 8px) / 0 1px no-repeat; transition: background-size .35s var(--smg-ease); }
.smg-mas a:hover, a.smg-mas:hover { background-size: 100% 1px; color: var(--wp--preset--color--petroleo); }

/* ---------- Antetítulo ---------- */
.is-style-antetitulo { font-size: .75rem !important; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--wp--preset--color--tabaco); margin-bottom: 1.5rem !important; }
.has-petroleo-background-color .is-style-antetitulo { color: var(--wp--preset--color--topo); }

/* ---------- Secciones a pantalla ---------- */
.is-style-pantalla { min-height: 100svh; padding-top: clamp(96px, 13vh, 120px) !important; padding-bottom: clamp(64px, 8vh, 80px) !important; box-sizing: border-box; }
.admin-bar .is-style-pantalla { min-height: calc(100svh - 32px); }

/* ---------- Portada ---------- */
.smg-portada { min-height: calc(100svh - var(--smg-nav)) !important; }
.smg-portada .wp-block-cover__inner-container > * { opacity: 0; transform: translateY(18px); animation: smg-entrar .9s var(--smg-ease) forwards; }
.smg-portada .wp-block-cover__inner-container > *:nth-child(2) { animation-delay: .12s; }
.smg-portada .wp-block-cover__inner-container > *:nth-child(3) { animation-delay: .24s; }
.smg-portada .wp-block-cover__inner-container > *:nth-child(4) { animation-delay: .36s; }
.smg-portada .wp-block-cover__inner-container > *:nth-child(5) { animation-delay: .48s; }
.smg-portada .wp-block-cover__image-background { animation: smg-asentar 1.8s var(--smg-ease) both; }
.smg-portada .wp-block-cover__background { opacity: 1 !important; background: linear-gradient(90deg, rgba(25, 32, 31, .78) 0%, rgba(25, 32, 31, .45) 48%, rgba(25, 32, 31, .05) 80%), linear-gradient(0deg, rgba(25, 32, 31, .45), transparent 40%) !important; }
@media (max-width: 639px) { .smg-portada .wp-block-cover__background { background: linear-gradient(0deg, rgba(25, 32, 31, .88) 0%, rgba(25, 32, 31, .6) 55%, rgba(25, 32, 31, .15) 100%) !important; } }
.smg-portada .wp-block-cover__inner-container { width: 100%; max-width: 1280px; margin-inline: auto; }
.smg-portada .wp-block-cover__inner-container > * { margin-left: 0 !important; margin-right: auto !important; }
.smg-portada .is-style-antetitulo { color: #E7DCCB; }
.smg-portada h1 { color: var(--wp--preset--color--blanco); max-width: 13ch; }
.smg-datos { display: flex; flex-wrap: wrap; gap: 8px 28px; padding-top: 1.5rem; border-top: 1px solid rgba(247, 245, 240, .28); max-width: 640px; font-size: .875rem; letter-spacing: .02em; }
@keyframes smg-entrar { to { opacity: 1; transform: none; } }
@keyframes smg-asentar { from { transform: scale(1.06); } to { transform: none; } }

/* ---------- Imágenes ---------- */
.is-style-zoom, .smg-tarjeta .wp-block-image { overflow: hidden; border-radius: 4px; }
.is-style-zoom img, .smg-tarjeta .wp-block-image img { transition: transform .8s var(--smg-ease); }
.is-style-zoom:hover img, .smg-tarjeta:hover .wp-block-image img { transform: scale(1.03); }
.wp-block-image img { height: auto; }

/* Etiqueta obra / render */
.wp-block-image.es-render { position: relative; }
.smg-etiqueta { position: absolute; left: 12px; top: 12px; z-index: 2; background: rgba(41, 43, 41, .78); color: var(--wp--preset--color--blanco); font: 600 11px/1 var(--wp--preset--font-family--manrope); letter-spacing: .12em; text-transform: uppercase; padding: 8px 10px; border-radius: 3px; }

/* ---------- Tarjetas de proyecto ---------- */
.smg-tarjeta { transition: transform .3s var(--smg-ease); position: relative; }
.smg-tarjeta:hover { transform: translateY(-2px); }
.smg-tarjeta .wp-block-image img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; max-height: 46vh; }
.smg-tarjeta h3 a { text-decoration: none; color: inherit; }
.smg-tarjeta h3 a::after { content: ""; position: absolute; inset: 0; }
.smg-tarjeta p { color: var(--wp--preset--color--suave); font-size: .9375rem; }

/* ---------- Cita del cliente ---------- */
.smg-frase { font-family: var(--wp--preset--font-family--cormorant); font-size: clamp(2.125rem, 3.4vw, 3.25rem); line-height: 1.08; color: var(--wp--preset--color--petroleo); max-width: 16ch; border: 0 !important; padding: 0 !important; }
.smg-frase p::before { content: "«"; color: var(--wp--preset--color--tabaco); }
.smg-frase p::after { content: "»"; color: var(--wp--preset--color--tabaco); }

/* ---------- Lema que se ilumina (momento de la página) ---------- */
.is-style-lema { font-size: clamp(3.25rem, 8.2vw, 8rem) !important; line-height: .98; letter-spacing: -.02em; max-width: 12ch; color: var(--wp--preset--color--blanco); }
.is-style-lema .smg-palabra { color: rgba(247, 245, 240, .22); transition: color .5s var(--smg-ease); }
.is-style-lema .smg-palabra.encendida { color: var(--wp--preset--color--blanco); }

/* Rejilla de cuatro conceptos */
.smg-conceptos > * { border-top: 1px solid rgba(247, 245, 240, .25); padding-top: 14px; }
.smg-conceptos h4 { font-size: .8125rem !important; letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--topo) !important; margin-bottom: 6px; }

/* ---------- Pasos numerados ---------- */
.is-style-pasos { list-style: none; padding: 0 !important; counter-reset: paso; }
.is-style-pasos > li { counter-increment: paso; display: grid; grid-template-columns: 56px 1fr; padding: 20px 0; border-top: 1px solid var(--smg-linea); }
.is-style-pasos > li::before { content: "0" counter(paso); font: 400 28px/1 var(--wp--preset--font-family--cormorant); color: var(--wp--preset--color--tabaco); }
.is-style-pasos > li strong { display: block; margin-bottom: 4px; }

/* ---------- Dudas (lista de definiciones con títulos) ---------- */
.smg-dudas h3 { font-size: 1.625rem !important; color: var(--wp--preset--color--petroleo); margin-bottom: .5rem; }
.smg-dudas p { color: var(--wp--preset--color--suave); font-size: 1rem; }

/* ---------- Prensa ---------- */
.smg-prensa { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 22px; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--suave); }
.smg-prensa a, .smg-prensa span.medio { font: 500 1.375rem/1 var(--wp--preset--font-family--cormorant); letter-spacing: .02em; text-transform: none; color: var(--wp--preset--color--grafito); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.smg-prensa a:hover { color: var(--wp--preset--color--petroleo); }

/* ---------- Contacto directo ---------- */
.smg-directo { list-style: none; padding: 0 !important; margin: 0; }
.smg-directo li { border-top: 1px solid var(--smg-linea); }
.smg-directo a { display: flex; justify-content: space-between; align-items: center; min-height: 56px; text-decoration: none; color: var(--wp--preset--color--grafito); font-weight: 500; transition: color .25s, padding .3s var(--smg-ease); }
.smg-directo a:hover { color: var(--wp--preset--color--petroleo); padding-left: 6px; }
.smg-directo small { color: var(--wp--preset--color--suave); font-weight: 400; }

/* ---------- Formulario ---------- */
.smg-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; align-content: start; }
.smg-form p { margin: 0; }
.smg-campo { display: grid; gap: 8px; }
.smg-campo--ancho, .smg-check, .smg-info, .smg-enviar { grid-column: 1 / -1; }
.smg-form label { font-size: .8125rem; font-weight: 600; letter-spacing: .02em; }
.smg-form input:not([type=checkbox]), .smg-form select, .smg-form textarea {
	font: 400 1rem/1.4 var(--wp--preset--font-family--manrope); color: var(--wp--preset--color--grafito); background: var(--wp--preset--color--blanco);
	border: 1px solid rgba(41, 43, 41, .22); border-radius: 4px; padding: 13px 14px; min-height: 50px; width: 100%; box-sizing: border-box; transition: border-color .2s; }
.smg-form input:focus, .smg-form select:focus, .smg-form textarea:focus { outline: none; border-color: var(--wp--preset--color--petroleo); box-shadow: 0 0 0 3px rgba(38, 63, 64, .14); }
.smg-form textarea { min-height: 96px; resize: vertical; }
.smg-check { display: flex; gap: 12px; align-items: flex-start; }
.smg-check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--wp--preset--color--petroleo); flex: none; }
.smg-check label { font-weight: 400 !important; font-size: .875rem !important; color: var(--wp--preset--color--suave); }
.smg-info { font-size: .75rem; color: var(--wp--preset--color--suave); line-height: 1.5; }
.smg-trampa { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.smg-aviso { padding: 20px 24px; border-radius: 4px; margin-bottom: 20px; }
.smg-aviso--ok { background: var(--wp--preset--color--petroleo); color: var(--wp--preset--color--blanco); }
.smg-aviso--error { background: #F6E3DF; color: #7A2617; }

/* ---------- Pie ---------- */
.smg-pie { border-top: 1px solid var(--smg-linea); }
.smg-pie a { text-decoration: none; color: inherit; }
.smg-pie a:hover { color: var(--wp--preset--color--petroleo); }
.smg-pie .smg-legal a { min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- Diario ---------- */
.smg-diario-lista .wp-block-post { border-top: 1px solid var(--smg-linea); padding-top: 1.5rem; }
.smg-diario-lista .wp-block-post-title a { text-decoration: none; color: inherit; }
.smg-diario-lista .wp-block-post-title a:hover { color: var(--wp--preset--color--petroleo); }
.smg-firma { font-family: var(--wp--preset--font-family--cormorant); font-style: italic; font-size: 1.375rem; color: var(--wp--preset--color--petroleo); }

/* ---------- Barra de contacto en móvil ---------- */
.smg-barra-movil { display: none; }
@media (max-width: 639px) {
	:root { --smg-nav: 64px; }
	body { font-size: 1rem; padding-bottom: 76px; }
	.smg-cabecera .wp-block-site-logo img, .smg-logo img { height: 32px; }
	.smg-cabecera .smg-boton-cabecera { display: none; }
	.smg-barra-movil { display: grid; grid-template-columns: 1fr 1.5fr; gap: 8px; position: fixed; inset: auto 0 0; z-index: 60;
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--wp--preset--color--blanco); border-top: 1px solid var(--smg-linea); }
	.smg-barra-movil a { min-height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 4px; font: 600 14px/1 var(--wp--preset--font-family--manrope); text-decoration: none; white-space: nowrap; }
	.smg-barra-movil a:first-child { border: 1px solid var(--wp--preset--color--petroleo); color: var(--wp--preset--color--petroleo); }
	.smg-barra-movil a:last-child { background: var(--wp--preset--color--petroleo); color: var(--wp--preset--color--blanco); }
	.smg-portada h1 { font-size: 2.5rem !important; }
	.smg-portada .wp-block-buttons, .smg-portada .wp-block-button { width: 100%; }
	.smg-portada .wp-block-button__link { width: 100%; }
	.smg-form { grid-template-columns: 1fr; }
	.smg-tarjeta .wp-block-image img { aspect-ratio: 4 / 3; max-height: none; }
}
@media (max-width: 1023px) {
	.is-style-pantalla { min-height: 0; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.smg-portada .wp-block-cover__inner-container > * { opacity: 1; transform: none; }
	.is-style-lema .smg-palabra { color: var(--wp--preset--color--blanco); }
}

/* En el editor: mostrar todo sin animaciones */
.editor-styles-wrapper .smg-portada .wp-block-cover__inner-container > * { opacity: 1; transform: none; animation: none; }
.editor-styles-wrapper .is-style-lema .smg-palabra { color: var(--wp--preset--color--blanco); }