/*
Theme Name: Acuart
Theme URI: https://acuart.com.ar
Author: Wanda & Mariano — Acuart
Description: Tema a medida para Acuart, impresión en gran formato y vinilos de corte. Página de inicio de una sola pantalla con servicios, señalización vial IRAM 10.033, tecnología HP Latex, nosotros, trabajos y formulario de contacto propio (sin plugins), con registro de consultas en el panel.
Version: 1.4.1
Requires at least: 6.0
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: acuart
*/

/* Concepto: "galería de obra impresa" — arcos (semióvalo) enmarcan las piezas,
   el recuadro doble destaca bloques clave y las marcas de corte vienen del taller. */
:root {
	--crema: #F6EEE8;
	--crema-2: #EFE2D7;
	--naranja: #ED6639;
	--naranja-osc: #D4512A;
	--naranja-claro: #F58C48;
	--verde: #00706C;
	--verde-osc: #00534F;
	--tinta: #2B2320;
	--tinta-suave: #5E504A;
	--linea: rgba(43, 35, 32, .14);
	--blanco: #FFFDFB;

	--f-display: "NewYork", "Fraunces", "Bodoni Moda", Georgia, serif;
	--f-texto: "Raleway", "Segoe UI", system-ui, sans-serif;

	--fs-xs: .8125rem;
	--fs-sm: .9375rem;
	--fs-md: 1.0625rem;
	--fs-lg: 1.375rem;
	--fs-xl: clamp(1.75rem, 1.2rem + 2vw, 2.625rem);
	--fs-2xl: clamp(2.375rem, 1.4rem + 4.2vw, 4.5rem);

	--ancho: 1200px;
	--gutter: clamp(16px, 4vw, 40px);
	--radio: 18px;
	--sombra: 0 18px 40px -24px rgba(43, 35, 32, .35);
	color-scheme: light;
}

/* Si subís los archivos de la tipografía NewYork a assets/fonts/, se usan automáticamente. */
@font-face {
	font-family: "NewYork";
	src: url("assets/fonts/NewYork.woff2") format("woff2"), url("assets/fonts/NewYork.otf") format("opentype");
	font-weight: 400;
	font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
	margin: 0;
	background: var(--crema);
	color: var(--tinta);
	font-family: var(--f-texto);
	font-size: var(--fs-md);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--verde); text-underline-offset: 3px; }
a:hover { color: var(--naranja-osc); }
:focus-visible { outline: 3px solid var(--naranja-claro); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 {
	font-family: var(--f-display);
	font-weight: 400;
	line-height: 1.08;
	margin: 0;
	text-wrap: balance;
	letter-spacing: -.01em;
}
p { margin: 0; }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link:focus {
	clip: auto; width: auto; height: auto; z-index: 100;
	top: 12px; left: 12px; padding: 10px 16px; background: var(--blanco);
}

.contenedor {
	width: 100%;
	max-width: calc(var(--ancho) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.seccion { padding-block: clamp(72px, 9vw, 128px); }

.eyebrow {
	display: inline-flex; align-items: center; gap: 10px;
	font-size: var(--fs-xs); font-weight: 600;
	letter-spacing: .16em; text-transform: uppercase;
	color: var(--verde);
}
.eyebrow::before {
	content: ""; width: 9px; height: 9px; border-radius: 50%;
	background: var(--naranja);
}
.titulo-seccion { font-size: var(--fs-xl); margin-top: 14px; max-width: 18ch; }
.titulo-seccion em { font-style: italic; color: var(--naranja); }
.bajada { color: var(--tinta-suave); max-width: 58ch; margin-top: 18px; }
.cabecera-seccion { display: grid; gap: 4px; margin-bottom: clamp(36px, 5vw, 56px); }

/* Botones */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	padding: 15px 26px; border-radius: 999px; border: 1.5px solid transparent;
	font: 600 var(--fs-sm)/1 var(--f-texto); letter-spacing: .02em;
	text-decoration: none; cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn--primario { background: var(--naranja); color: #fff; }
.btn--primario:hover { background: var(--naranja-osc); color: #fff; }
.btn--borde { border-color: var(--tinta); color: var(--tinta); background: transparent; }
.btn--borde:hover { background: var(--tinta); color: var(--crema); }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ---------- Header ---------- */
.sitio-header {
	position: sticky; top: 0; z-index: 50;
	background: color-mix(in srgb, var(--crema) 88%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid transparent;
	transition: border-color .25s, box-shadow .25s;
}
.sitio-header.is-scrolled { border-color: var(--linea); box-shadow: 0 8px 24px -20px rgba(43,35,32,.5); }
.admin-bar .sitio-header { top: 32px; }
.header-fila { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }
.marca img { width: 150px; }
.nav-principal ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 30px; }
.nav-principal a {
	color: var(--tinta); text-decoration: none; font-size: var(--fs-sm); font-weight: 500;
	position: relative; padding-block: 6px;
}
.nav-principal a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
	background: var(--naranja); transform: scaleX(0); transform-origin: left; transition: transform .25s;
}
.nav-principal a:hover::after, .nav-principal .current-menu-item > a::after { transform: scaleX(1); }
.header-cta { padding: 12px 20px; }
.nav-toggle {
	display: none; width: 46px; height: 46px; border-radius: 50%;
	border: 1.5px solid var(--tinta); background: transparent; cursor: pointer; color: var(--tinta);
	align-items: center; justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
	display: block; width: 18px; height: 1.5px; background: currentColor; position: relative; transition: transform .25s;
}
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-abierta .nav-toggle span { background: transparent; }
.nav-abierta .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
.nav-abierta .nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { overflow-x: clip; padding-block: clamp(40px, 6vw, 84px) clamp(64px, 8vw, 110px); position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-texto { min-width: 0; }
.hero h1 { font-size: var(--fs-2xl); margin-top: 22px; }
.hero h1 em { font-style: italic; color: var(--naranja); }
.hero .bajada { font-size: var(--fs-lg); line-height: 1.5; margin-top: 24px; max-width: 34ch; }
.hero-acciones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero-sellos { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 38px; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--tinta-suave); }
.hero-sellos li { display: flex; align-items: center; gap: 8px; }
.hero-sellos svg { width: 18px; height: 18px; color: var(--verde); flex: none; }

/* Composición: arco + pliego impreso con marcas de corte + tira de control de color */
.hero-arte { position: relative; aspect-ratio: 5 / 5.4; max-width: 540px; width: 100%; justify-self: end; }
.arco {
	position: absolute; inset: 0 8% 6% 14%;
	background: var(--verde);
	border-radius: 999px 999px 22px 22px;
	overflow: hidden;
}
.arco::after {
	content: ""; position: absolute; inset: auto -20% -38% -20%; height: 70%;
	background: var(--crema-2); border-radius: 50%;
}
.pliego {
	position: absolute; left: 0; bottom: 14%; width: 66%;
	aspect-ratio: 2 / 1.15;
	background: var(--blanco);
	box-shadow: var(--sombra);
	padding: 8%;
	display: grid; place-items: center;
	transform: rotate(-4deg);
	animation: pliego-entra 1s cubic-bezier(.2,.7,.2,1) both .15s;
}
.pliego::before {
	content: ""; position: absolute; inset: 10%;
	background:
		linear-gradient(135deg, var(--crema-2), var(--crema));
	border-radius: 4px;
}
.pliego img { position: relative; width: 46%; }
.corte { position: absolute; width: 14px; height: 14px; border-color: var(--tinta); border-style: solid; border-width: 0; }
.corte--a { top: 5%; left: 5%; border-top-width: 1px; border-left-width: 1px; }
.corte--b { top: 5%; right: 5%; border-top-width: 1px; border-right-width: 1px; }
.corte--c { bottom: 5%; left: 5%; border-bottom-width: 1px; border-left-width: 1px; }
.corte--d { bottom: 5%; right: 5%; border-bottom-width: 1px; border-right-width: 1px; }
.pliego-medida {
	position: absolute; left: 10%; bottom: -30px;
	font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave);
	font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tira-color {
	position: absolute; right: 2%; top: 18%;
	display: grid; gap: 0; width: 34px;
	box-shadow: var(--sombra); border: 3px solid var(--blanco);
}
.tira-color span { display: block; height: 30px; }
.sello-giro {
	position: absolute; right: 0; bottom: 0; width: 30%;
	animation: girar 28s linear infinite;
}
.deco-circulos { position: absolute; top: -2%; left: 2%; width: 22%; opacity: .95; }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes pliego-entra { from { transform: translateY(18px) rotate(-9deg); opacity: .4; } to { transform: rotate(-4deg); opacity: 1; } }

/* ---------- Franja de materiales ---------- */
.franja { background: var(--tinta); color: var(--crema); overflow: hidden; padding-block: 18px; }
.franja-pista { display: flex; gap: 48px; width: max-content; animation: desliza 40s linear infinite; }
.franja-pista span { font-family: var(--f-display); font-size: 1.375rem; white-space: nowrap; display: flex; align-items: center; gap: 48px; }
.franja-pista span::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--naranja-claro); }
@keyframes desliza { to { transform: translateX(-50%); } }

/* ---------- Servicios (tarjetas desplegables) ---------- */
.servicios-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; grid-auto-flow: row dense; }
.servicio {
	position: relative; background: var(--blanco); border-radius: var(--radio);
	border: 1px solid var(--linea); color: var(--tinta);
	transition: transform .25s, box-shadow .25s, border-color .25s, background-color .35s, color .35s;
}
.servicio-resumen { position: relative; padding: 28px 24px 24px; display: flex; flex-direction: column; gap: 12px; height: 100%; }
.servicio:not(.is-open):hover { transform: translateY(-4px); box-shadow: var(--sombra); border-color: transparent; }
.servicio-icono {
	width: 58px; height: 40px; border-radius: 999px 999px 0 0;
	background: var(--crema); color: var(--naranja);
	display: grid; place-items: end center; padding-bottom: 4px; transition: background-color .35s, color .35s;
}
.servicio:nth-child(even) .servicio-icono { color: var(--verde); }
.servicio-icono svg { width: 26px; height: 26px; }
.servicio h3 { font-size: 1.4rem; }
.servicio-toggle {
	all: unset; cursor: pointer; font: inherit; color: inherit; line-height: inherit;
}
.servicio-toggle::after { content: ""; position: absolute; inset: 0; border-radius: var(--radio); z-index: 1; }
.servicio-toggle:focus-visible::after { outline: 3px solid var(--naranja-claro); outline-offset: 3px; }
.servicio-resumen p { font-size: var(--fs-sm); color: var(--tinta-suave); line-height: 1.6; transition: color .35s; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding: 8px 0 0; list-style: none; }
.etiquetas li { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; padding: 4px 10px; border-radius: 999px; background: var(--crema); color: var(--tinta-suave); transition: background-color .35s, color .35s; }
.badge-nuevo { position: absolute; top: 22px; right: 22px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; background: var(--naranja); color: #fff; }
.ver-mas {
	display: inline-flex; align-items: center; gap: 10px; margin-top: 6px;
	font-size: var(--fs-sm); font-weight: 700; color: var(--naranja-osc);
}
.ver-mas-cerrar { display: none; }
.ver-mas-ico { position: relative; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid currentColor; transition: transform .3s; }
.ver-mas-ico::before, .ver-mas-ico::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.ver-mas-ico::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .3s; }
.servicio:not(.is-open):hover .ver-mas-ico { transform: rotate(90deg); }

/* Detalle: visible sin JavaScript, oculto/abierto con JavaScript */
.servicio-detalle { padding: 0 24px 26px; display: grid; gap: 24px; }
.servicio-detalle[hidden] { display: none; }
.detalle-intro { font-size: var(--fs-md); line-height: 1.65; }
.detalle-lista { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.detalle-lista li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: var(--fs-sm); }
.detalle-lista svg { width: 20px; height: 20px; margin-top: 2px; color: var(--naranja-claro); }
.detalle-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; position: relative; z-index: 2; }
.btn--claro { background: transparent; color: inherit; border-color: currentColor; }
.btn--claro:hover { background: var(--crema); color: var(--verde-osc); border-color: var(--crema); }

/* Abierta: verde, ancho completo, dos columnas */
.servicio.is-open {
	grid-column: 1 / -1; background: var(--verde); color: var(--crema); border-color: var(--verde);
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
	grid-template-areas: "resumen galeria" "texto galeria";
	box-shadow: 0 30px 60px -36px rgba(0, 83, 79, .8);
}
.servicio.is-open .servicio-resumen { grid-area: resumen; height: auto; padding: clamp(26px, 3.4vw, 44px) clamp(24px, 3.4vw, 44px) 0; }
.servicio.is-open .servicio-detalle { display: contents; }
.servicio.is-open .detalle-texto { grid-area: texto; padding: 22px clamp(24px, 3.4vw, 44px) clamp(26px, 3.4vw, 44px); animation: aparecer .45s ease both .1s; }
.servicio.is-open .detalle-galeria { grid-area: galeria; padding: clamp(14px, 1.6vw, 20px); animation: aparecer .45s ease both .18s; }
.servicio.is-open h3 { font-size: var(--fs-xl); }
.servicio.is-open .servicio-icono { background: rgba(246,238,232,.14); color: var(--crema); }
.servicio.is-open .servicio-resumen p { color: rgba(246,238,232,.82); }
.servicio.is-open .etiquetas li { background: rgba(246,238,232,.14); color: var(--crema); }
.servicio.is-open .ver-mas { color: var(--naranja-claro); }
.servicio.is-open .ver-mas-abrir { display: none; }
.servicio.is-open .ver-mas-cerrar { display: inline; }
.servicio.is-open .ver-mas-ico::after { transform: translate(-50%, -50%) rotate(0deg); }
.servicio.is-open .badge-nuevo { top: 28px; right: 28px; }
@keyframes aparecer { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
::view-transition-group(*) { animation-duration: .42s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }

/* Galería */
.galeria { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(110px, 12vw, 170px); gap: 10px; height: 100%; }
.galeria li:first-child { grid-column: span 2; grid-row: span 2; }
.galeria--ultimo2 li:last-child { grid-column: span 2; }
.galeria--ultimo3 li:last-child { grid-column: span 3; }
/* Pocas fotos verticales (banners): una fila alta, sin destacada */
.galeria--n2, .galeria--n4 { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); grid-auto-rows: clamp(260px, 30vw, 420px); }
.galeria--n2 { --cols: 2; }
.galeria--n2 li:first-child, .galeria--n4 li:first-child { grid-column: auto; grid-row: auto; }
.galeria--n1 { grid-template-columns: 1fr; grid-auto-rows: clamp(260px, 30vw, 420px); }
.galeria--n1 li:first-child { grid-column: auto; grid-row: auto; }
.galeria-item { position: relative; display: block; width: 100%; height: 100%; border-radius: 14px; overflow: hidden; background: var(--verde-osc); }
.galeria-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s, opacity .3s; }
.galeria-item:hover img { transform: scale(1.05); }
.galeria-item::after {
	content: attr(data-titulo); position: absolute; left: 8px; right: 8px; bottom: 8px;
	background: rgba(43, 35, 32, .78); color: var(--crema); font-size: 12px; font-weight: 600; line-height: 1.3;
	padding: 6px 9px; border-radius: 8px; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s;
}
.galeria-item:hover::after, .galeria-item:focus-visible::after { opacity: 1; transform: none; }
.galeria-vacia {
	height: 100%; min-height: 260px; border-radius: 18px; border: 1.5px dashed rgba(246,238,232,.4);
	display: grid; place-content: center; justify-items: center; gap: 16px; text-align: center; padding: 28px;
}
.galeria-vacia p { max-width: 34ch; color: rgba(246,238,232,.85); font-size: var(--fs-sm); }
.galeria-vacia-arco { width: 110px; height: 70px; border-radius: 999px 999px 0 0; background: var(--naranja-claro); color: var(--tinta); display: grid; place-items: end center; padding-bottom: 8px; }
.galeria-vacia-arco svg { width: 36px; height: 36px; }

/* Lightbox */
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100%; height: 100%; overflow: hidden; }
.lightbox::backdrop { background: rgba(26, 21, 19, .92); }
.lightbox figure { margin: 0; height: 100%; display: grid; place-items: center; align-content: center; gap: 14px; padding: 60px 70px; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 160px); width: auto; height: auto; border-radius: 10px; box-shadow: 0 30px 80px -30px #000; }
.lightbox figcaption { color: var(--crema); font-size: var(--fs-sm); display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.lb-cuenta { color: rgba(246,238,232,.6); font-variant-numeric: tabular-nums; }
.lb-btn {
	position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid rgba(246,238,232,.5);
	background: rgba(43,35,32,.5); color: var(--crema); font-size: 28px; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.lb-btn:hover { background: var(--naranja); border-color: var(--naranja); }
.lb-cerrar { top: 16px; right: 16px; }
.lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 14px; top: 50%; transform: translateY(-50%); }

/* ---------- Tecnología ---------- */
.tec-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(36px, 6vw, 80px); align-items: start; }
.tec-grid > * { min-width: 0; }
.tec-items { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 30px; }
.tec-item h3 { font-size: 1.35rem; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.tec-item h3::before { content: ""; width: 26px; height: 13px; border-radius: 26px 26px 0 0; background: var(--naranja); flex: none; }
.tec-item:nth-child(2n) h3::before { background: var(--verde); }
.tec-item p { font-size: var(--fs-sm); color: var(--tinta-suave); }
.perfil-color {
	margin-top: 34px; background: var(--blanco); border-radius: var(--radio); padding: 22px; border: 1px solid var(--linea);
}
.perfil-color-titulo { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: 14px; }
.parches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.parches span { aspect-ratio: 1; border-radius: 4px; }
.delta { margin-top: 14px; font-size: var(--fs-sm); color: var(--tinta-suave); }

/* Proceso */
.proceso { margin-top: clamp(56px, 7vw, 88px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding: 0; list-style: none; counter-reset: paso; }
.paso { counter-increment: paso; padding: 26px 22px; border-top: 2px solid var(--tinta); }
.paso::before { content: "Paso " counter(paso); display: block; font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--naranja-osc); font-weight: 700; margin-bottom: 12px; }
.paso h3 { font-size: 1.3rem; margin-bottom: 8px; }
.paso p { font-size: var(--fs-sm); color: var(--tinta-suave); }

/* ---------- Nosotros ---------- */
.nosotros { background: var(--crema-2); position: relative; overflow: hidden; }
.nosotros-intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.nosotros-intro > * { min-width: 0; }
.personas { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 36px); }
.persona { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 28px; align-items: center; background: var(--blanco); border-radius: 28px; padding: 26px; }
.persona > div { min-width: 0; }
.persona-foto {
	aspect-ratio: 4 / 5; border-radius: 999px 999px 18px 18px; overflow: hidden;
	background: var(--naranja); display: grid; place-items: center; position: relative;
}
.persona:nth-child(2) .persona-foto { background: var(--verde); }
.persona-foto img { width: 100%; height: 100%; object-fit: cover; }
.persona-foto .inicial { font-family: var(--f-display); font-size: 5rem; color: var(--crema); line-height: 1; }
.persona-foto .inicial::after { content: "."; color: var(--naranja-claro); }
.persona:nth-child(1) .persona-foto .inicial::after { color: var(--verde); }
.persona h3 { font-size: 1.75rem; }
.persona .rol { font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--verde); margin: 6px 0 12px; }
.persona p { font-size: var(--fs-sm); color: var(--tinta-suave); }
.nosotros-deco { position: absolute; right: -60px; top: 40px; width: 180px; opacity: .7; pointer-events: none; }

/* ---------- Trabajos ---------- */
.trabajos-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.trabajo { position: relative; border-radius: var(--radio); overflow: hidden; background: var(--crema-2); aspect-ratio: 4 / 3; }
.trabajo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.trabajo:hover img { transform: scale(1.04); }
.trabajo figcaption { position: absolute; left: 12px; bottom: 12px; right: 12px; background: var(--blanco); border-radius: 12px; padding: 10px 14px; font-size: var(--fs-sm); font-weight: 600; }

/* ---------- Contacto ---------- */
.contacto-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.contacto-grid > * { min-width: 0; }
.datos { list-style: none; padding: 0; margin: 34px 0 0; display: grid; gap: 18px; }
.datos li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; }
.datos .ico { width: 44px; height: 44px; border-radius: 50%; background: var(--blanco); display: grid; place-items: center; color: var(--naranja); }
.datos .ico svg { width: 20px; height: 20px; }
.datos small { display: block; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave); }
.mapa { margin-top: 30px; border-radius: var(--radio); overflow: hidden; aspect-ratio: 4 / 3; background: var(--crema-2); border: 1px solid var(--linea); }
.mapa iframe { width: 100%; height: 100%; border: 0; display: block; }
.mapa-btn { margin-top: 16px; }
.datos a, .datos span { color: var(--tinta); text-decoration: none; font-weight: 600; overflow-wrap: anywhere; }
.datos a:hover { color: var(--naranja-osc); }

.form-caja { position: relative; background: var(--blanco); border-radius: 28px; padding: clamp(24px, 4vw, 44px); box-shadow: var(--sombra); }
.form-caja::before {
	content: ""; position: absolute; inset: -10px 10px 10px -10px; border: 1.5px solid var(--naranja-claro); border-radius: 32px; z-index: -1;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.campo { display: grid; gap: 7px; min-width: 0; }
.campo--ancho { grid-column: 1 / -1; }
.campo label { font-size: var(--fs-sm); font-weight: 600; }
.campo label .opc { font-weight: 400; color: var(--tinta-suave); }
.campo input, .campo select, .campo textarea {
	width: 100%; font: inherit; font-size: var(--fs-md); color: var(--tinta);
	background: var(--crema); border: 1.5px solid transparent; border-radius: 12px;
	padding: 13px 15px; transition: border-color .2s, background-color .2s;
}
.campo textarea { min-height: 140px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--verde); background: var(--blanco); }
.campo [aria-invalid="true"] { border-color: var(--naranja-osc); }
.campo .error { font-size: var(--fs-xs); color: var(--naranja-osc); min-height: 1em; }
.campo input[type="file"] { padding: 11px; font-size: var(--fs-sm); }
.campo input[type="file"]::file-selector-button { font: 600 var(--fs-xs) var(--f-texto); border: 0; border-radius: 999px; background: var(--tinta); color: var(--crema); padding: 8px 14px; margin-right: 12px; cursor: pointer; }
.ayuda { font-size: var(--fs-xs); color: var(--tinta-suave); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.form-pie .ayuda { max-width: 36ch; }
.form-estado { margin-top: 18px; padding: 14px 18px; border-radius: 12px; font-size: var(--fs-sm); font-weight: 600; }
.form-estado--ok { background: rgba(0,112,108,.1); color: var(--verde-osc); }
.form-estado--error { background: rgba(237,102,57,.12); color: #A33A17; }
.btn[aria-busy="true"] { opacity: .7; pointer-events: none; }

/* ---------- Reseñas ---------- */
.resenas { background: var(--crema-2); position: relative; z-index: 0; }
.resenas-comillas { font-family: var(--f-display); font-size: 5.5rem; line-height: .6; color: var(--naranja); height: 2.6rem; }
.resenas-cabecera { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.resenas-cabecera > * { min-width: 0; }
.resenas-cabecera .cabecera-seccion { margin-bottom: 0; }
.resenas-resumen {
	position: relative; background: var(--blanco); border-radius: 28px; padding: clamp(26px, 3.5vw, 40px);
	display: grid; justify-items: start; gap: 10px;
}
.resenas-resumen::before { content: ""; position: absolute; inset: -10px -10px 10px 10px; border: 1.5px solid var(--verde); border-radius: 32px; z-index: -1; opacity: .5; }
.resenas-nota { font-family: var(--f-display); font-size: clamp(3.5rem, 6vw, 4.75rem); line-height: .9; color: var(--tinta); }
.resenas-total { color: var(--tinta-suave); font-size: var(--fs-sm); max-width: 32ch; }
.resenas-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.estrellas { display: inline-flex; gap: 3px; color: #F2A93B; }
.estrellas svg { width: 22px; height: 22px; }
.resenas-sello .estrellas svg { width: 30px; height: 30px; }
.resenas-lista { list-style: none; padding: 0; margin: clamp(40px, 5vw, 56px) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.resena { background: var(--blanco); border-radius: var(--radio); padding: 24px; display: grid; gap: 12px; min-width: 0; }
.resena .estrellas svg { width: 17px; height: 17px; }
.resena-autor { display: flex; align-items: center; gap: 12px; }
.resena-autor > div { min-width: 0; display: grid; }
.resena-autor img, .resena-inicial { width: 44px; height: 44px; border-radius: 50%; flex: none; object-fit: cover; }
.resena-inicial { display: grid; place-items: center; background: var(--verde); color: var(--crema); font-weight: 700; }
.resena-autor a, .resena-autor strong { color: var(--tinta); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.resena-autor small { color: var(--tinta-suave); font-size: var(--fs-xs); }
.resena-texto { font-size: var(--fs-sm); color: var(--tinta-suave); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.resena.is-abierta .resena-texto { -webkit-line-clamp: unset; display: block; }
.resena-mas { justify-self: start; background: none; border: 0; padding: 0; font: 700 var(--fs-sm) var(--f-texto); color: var(--verde); cursor: pointer; }
.resenas-fuente { margin-top: 18px; font-size: var(--fs-xs); color: var(--tinta-suave); }

/* ---------- Pop-up de suscripción ---------- */
.promo { border: 0; padding: 0; background: transparent; width: min(880px, calc(100% - 24px)); max-width: none; max-height: calc(100dvh - 24px); overflow: visible; }
.promo::backdrop { background: rgba(43, 35, 32, .55); backdrop-filter: blur(3px); }
.promo[open] { animation: promo-in .45s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes promo-in { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }
.promo-caja { position: relative; display: grid; grid-template-columns: 300px minmax(0, 1fr); background: var(--blanco); border-radius: 28px; overflow: hidden; max-height: calc(100dvh - 24px); box-shadow: 0 40px 80px -30px rgba(43,35,32,.6); }
.promo-cerrar { position: absolute; top: 14px; right: 14px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--linea); background: var(--blanco); color: var(--tinta); font-size: 24px; line-height: 1; cursor: pointer; }
.promo-cerrar:hover { background: var(--verde); border-color: var(--verde); color: #fff; }
/* Solo en el pop-up: los botones pasan a verde al acercar el mouse */
.promo .btn--primario:hover, .promo .btn--primario:focus-visible,
.promo .btn--borde:hover, .promo .btn--borde:focus-visible { background: var(--verde); border-color: var(--verde); color: #fff; }
.promo-lado { position: relative; background: var(--verde); overflow: hidden; display: grid; place-items: center; }
.promo-arco { position: relative; z-index: 1; width: 196px; height: 250px; border-radius: 999px 999px 20px 20px; background: var(--naranja); color: #fff; display: grid; place-content: center; text-align: center; margin-top: 40px; }
.promo-pct { font-family: var(--f-display); font-size: 6.2rem; line-height: .85; }
.promo-pct small { font-size: .45em; vertical-align: top; margin-left: 2px; }
.promo-off { font-weight: 800; letter-spacing: .3em; font-size: 1.05rem; margin-top: 10px; padding-left: .3em; }
.promo-sello { position: absolute; width: 230px; left: -70px; top: -70px; opacity: .35; animation: girar 40s linear infinite; }
.promo-cuerpo { padding: clamp(26px, 4vw, 40px); overflow-y: auto; max-height: calc(100dvh - 24px); }
.promo h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); margin: 10px 0 8px; padding-right: 36px; }
.promo h2 em { color: var(--naranja); }
.promo-bajada { color: var(--tinta-suave); font-size: var(--fs-sm); margin-bottom: 18px; }
.promo-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.promo .campo input { padding: 11px 13px; font-size: var(--fs-sm); }
.promo .campo label { font-size: 13.5px; }
.promo-grupo { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.promo-grupo legend { font-size: 13.5px; font-weight: 600; margin-bottom: 8px; padding: 0; }
.promo .opc { font-weight: 400; color: var(--tinta-suave); }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--linea); background: var(--crema); font-size: 13.5px; font-weight: 600; transition: background-color .2s, color .2s, border-color .2s; }
.chips--chicas .chip span { padding: 6px 11px; font-size: 12.5px; }
.chip:hover span { border-color: var(--verde); }
.chip input:checked + span { background: var(--verde); border-color: var(--verde); color: var(--crema); }
.chip input:focus-visible + span { outline: 3px solid var(--naranja-claro); outline-offset: 2px; }
.promo-rubro { margin-bottom: 14px; }
.promo-rubro[hidden] { display: none; }
.promo h2:focus { outline: none; }
.promo-mas { margin: 0 0 12px; }
.promo-mas summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--verde); padding: 4px 0; list-style: none; }
.promo-mas summary::-webkit-details-marker { display: none; }
.promo-mas summary::before { content: "+ "; }
.promo-mas[open] summary::before { content: "– "; }
.promo-mas .promo-fila { margin-top: 10px; }
.promo-acepto { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: 12.5px; color: var(--tinta-suave); line-height: 1.5; margin-top: 4px; cursor: pointer; }
.promo-acepto input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--verde); }
.promo .error { display: block; font-size: 12px; color: var(--naranja-osc); min-height: 0; }
.promo .error:not(:empty) { margin-top: 4px; }
.promo-enviar { width: 100%; margin-top: 16px; padding-block: 16px; font-size: 1rem; }
.promo-estado { font-size: var(--fs-sm); font-weight: 600; color: #A33A17; margin-top: 10px; }
.promo-estado:empty { display: none; }
.promo-cond { font-size: 11.5px; color: var(--tinta-suave); margin-top: 10px; }
.promo-exito { padding-top: 6px; }
.promo-msg { color: var(--tinta-suave); margin-bottom: 16px; }
.promo-cupon { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; border: 2px dashed var(--naranja); border-radius: 16px; padding: 16px 18px; }
.promo-cupon code { flex: 1 1 auto; font: 800 clamp(1.4rem, 1rem + 1.6vw, 1.9rem) var(--f-texto); letter-spacing: .12em; color: var(--verde); }
.promo-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.promo-pestana {
	position: fixed; left: 0; bottom: calc(110px + env(safe-area-inset-bottom, 0px)); z-index: 55;
	writing-mode: vertical-rl; transform: rotate(180deg);
	background: var(--naranja); color: #fff; border: 0; border-radius: 0 12px 12px 0;
	padding: 16px 10px; font: 800 13px var(--f-texto); letter-spacing: .14em; cursor: pointer;
	box-shadow: 0 10px 24px -12px rgba(43,35,32,.6); transition: background-color .2s, padding .2s;
}
.promo-pestana:hover { background: var(--naranja-osc); padding-left: 14px; }
@media (max-width: 720px) {
	.promo { width: 100%; max-height: 100dvh; margin: auto auto 0; }
	.promo-caja { grid-template-columns: 1fr; border-radius: 24px 24px 0 0; max-height: 92dvh; }
	.promo[open] { animation-name: promo-sube; }
	@keyframes promo-sube { from { transform: translateY(100%); } to { transform: none; } }
	.promo-lado { display: none; }
	.promo-cuerpo { max-height: 92dvh; padding: 26px 18px calc(22px + env(safe-area-inset-bottom, 0px)); }
	.promo-fila { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */
.sitio-footer { background: var(--tinta); color: var(--crema); padding-block: 64px 28px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; align-items: start; }
.footer-grid > * { min-width: 0; }
.footer-marca img { width: 170px; }
.footer-marca p { color: rgba(246,238,232,.7); font-size: var(--fs-sm); margin-top: 16px; max-width: 36ch; }
.sitio-footer h4 { font-family: var(--f-texto); font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--naranja-claro); margin-bottom: 14px; }
.sitio-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: var(--fs-sm); }
.sitio-footer a { color: var(--crema); text-decoration: none; }
.sitio-footer a:hover { color: var(--naranja-claro); }
.footer-base { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(246,238,232,.16); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: var(--fs-xs); color: rgba(246,238,232,.6); }
.footer-sello { width: 92px; margin-top: 22px; opacity: .9; }

/* WhatsApp flotante */
.wa-flotante {
	position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 60;
	width: 58px; height: 58px; border-radius: 50%; background: var(--verde); color: #fff;
	display: grid; place-items: center; box-shadow: 0 12px 28px -10px rgba(0,83,79,.7);
	transition: transform .2s, background-color .2s;
}
.wa-flotante:hover { transform: scale(1.06); background: var(--verde-osc); color: #fff; }
.wa-flotante svg { width: 28px; height: 28px; }

/* Páginas internas */
.pagina { padding-block: clamp(48px, 7vw, 96px); }
.pagina h1 { font-size: var(--fs-xl); margin-bottom: 28px; }
.contenido { max-width: 70ch; }
.contenido > * + * { margin-top: 1.1em; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
	.servicios-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.servicio.is-open { grid-template-columns: 1fr; grid-template-areas: "resumen" "texto" "galeria"; }
	.servicio.is-open .detalle-galeria { padding: 0 clamp(14px, 3vw, 28px) clamp(20px, 3vw, 28px); }
	.personas { grid-template-columns: 1fr; }
	.proceso { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 920px) {
	.nav-toggle { display: inline-flex; }
	.header-cta { display: none; }
	.nav-principal {
		position: absolute; left: 0; right: 0; top: 100%;
		background: var(--crema); border-bottom: 1px solid var(--linea);
		padding: 8px var(--gutter) 24px; display: none;
	}
	.nav-abierta .nav-principal { display: block; }
	.nav-principal ul { flex-direction: column; gap: 0; }
	.nav-principal a { display: block; padding: 14px 0; font-size: 1.125rem; border-bottom: 1px solid var(--linea); }
	.nav-principal a::after { display: none; }
	.resenas-cabecera { grid-template-columns: 1fr; }
	.resenas-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hero-grid, .tec-grid, .contacto-grid, .nosotros-intro { grid-template-columns: 1fr; }
	.hero-arte { justify-self: center; max-width: 440px; }
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.footer-marca { grid-column: 1 / -1; }
	.trabajos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.servicios-grid, .tec-items, .form-grid, .proceso, .trabajos-grid, .resenas-lista { grid-template-columns: 1fr; }
	.galeria, .galeria--n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; }
	.galeria--n4 { grid-auto-rows: 240px; }
	.galeria li:first-child, .galeria li:last-child, .galeria--ultimo2 li:last-child, .galeria--ultimo3 li:last-child { grid-column: auto; grid-row: auto; }
	.galeria--impar li:first-child { grid-column: span 2; grid-row: auto; }
	.lightbox figure { padding: 64px 12px 80px; }
	.lb-prev, .lb-next { top: auto; bottom: 16px; transform: none; }
	.lb-prev { left: calc(50% - 60px); } .lb-next { right: calc(50% - 60px); }
	.persona { grid-template-columns: 1fr; text-align: left; }
	.persona-foto { max-width: 180px; }
	.hero-acciones .btn { flex: 1 1 100%; }
	.footer-grid { grid-template-columns: 1fr; }
	.marca img { width: 124px; }
}
@media (max-width: 782px) { .admin-bar .sitio-header { top: 46px; } }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	html { scroll-behavior: auto; }
}