/* Shared shell: tokens, chrome, footer, WhatsApp FAB — split 2026-07-13 */
/* Translated from prototype-source/globals.css — not React */

:root {
  --ink: #333333;
  --violet: #3d4166;
  --lavender: #a8a6c9;
  --lavender-soft: #d8d6e6;
  --orange: #f28c28;
  --paper: #f2f2f2;
  --white: #ffffff;
  --line: rgba(61, 65, 102, 0.16);
  --shadow: 0 24px 70px rgba(61, 65, 102, 0.1);
  --max: 1320px;
  --dw-header-offset: 88px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: #fbfbfa;
  color: var(--ink);
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 300;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
svg { flex: 0 0 auto; }

.section-shell { width: min(calc(100% - 80px), var(--max)); margin-inline: auto; }
.site-header {
  width: min(calc(100% - 80px), var(--max));
  height: 88px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr auto;
  align-items: center;
  gap: 24px;
  border-bottom: 0;
  position: relative;
  z-index: 20;
}
.wordmark { display: inline-flex; align-items: center; width: fit-content; }
.wordmark img { display: block; width: 200px; height: auto; }
.desktop-nav { display: flex; justify-content: center; gap: clamp(18px, 2.2vw, 34px); font-size: 13px; font-weight: 400; }
.desktop-nav a { position: relative; padding-block: 10px; }
.desktop-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 1px; height: 1px; background: var(--orange); transition: right .25s ease; }
.desktop-nav a:hover::after, .desktop-nav .active::after { right: 0; }
.button {
  min-height: 54px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--violet);
  border: 1px solid var(--violet);
  color: white;
  font-size: 13px;
  font-weight: 400;
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.button:hover { transform: translateY(-2px); background: #303451; }
.button-small { min-height: 50px; padding-inline: 22px; }
.button-secondary { background: transparent; color: var(--violet); }
.button-secondary:hover { background: rgba(216,214,230,.3); }
.button-orange { background: var(--orange); border-color: var(--orange); color: #231f20; }
.button-orange:hover { background: #ff9c3c; border-color: #ff9c3c; }

.dw-cta-icon {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}
.dw-cta-icon svg {
	display: block;
	stroke: currentColor;
}
.wp-block-button__link:has(.dw-cta-icon),
a.wp-element-button:has(.dw-cta-icon) {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}
.menu-button { display: none; background: transparent; border: 0; color: var(--violet); }

/* Footer */
.footer { background: #292d49; color: white; }
.footer-grid { padding-block: 56px; display: grid; grid-template-columns: 2fr repeat(3,1fr); gap: 48px; }
.wordmark-light { padding: 0; background: transparent; }
.wordmark-light img { width: 168px; height: auto; }
.footer-brand p { max-width: 320px; color: #d4d3df; font-size: 12px; line-height: 1.7; }
.social-signature {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin-top: 28px;
	max-width: 340px;
}
.social-signature a {
	min-height: 44px;
	padding: 0 12px;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #fff !important;
	font-size: 12px;
	line-height: 1.2;
	text-decoration: none !important;
	transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.social-signature a:hover,
.social-signature a:focus-visible {
	transform: translateY(-1px);
	border-color: rgba(242, 140, 40, 0.45);
}
.social-signature a svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	display: block;
}
.social-instagram:hover { background: linear-gradient(120deg, rgba(245, 133, 41, 0.28), rgba(221, 42, 123, 0.25)); }
.social-linkedin:hover { background: rgba(10, 102, 194, 0.25); }
.social-facebook:hover { background: rgba(24, 119, 242, 0.22); }
.social-youtube:hover { background: rgba(255, 0, 0, 0.2); }
.social-x:hover { background: rgba(255, 255, 255, 0.12); }
.social-pinterest:hover { background: rgba(230, 0, 35, 0.22); }
.footer-grid h3 { margin: 0 0 16px; color: var(--lavender-soft); font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: .12em; }
.footer-grid > div:not(.footer-brand) { display: flex; flex-direction: column; gap: 10px; }
.footer-grid > div:not(.footer-brand) a,
.footer-grid > div:not(.footer-brand) span {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #e3e2eb;
	font-size: 14px;
	line-height: 1.45;
	text-decoration: none;
}
.footer-grid > div:not(.footer-brand) a:hover,
.footer-grid > div:not(.footer-brand) a:focus-visible {
	color: #fff;
}
.footer-grid > div:not(.footer-brand) svg { width: 14px; height: 14px; flex-shrink: 0; }
.footer-bottom {
	min-height: 64px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 25px;
	padding-block: 16px;
	padding-inline: 0;
	border-top: 1px solid rgba(255,255,255,.12);
	color: #bbb9cb;
	font-size: 12px;
	position: relative;
	z-index: 95;
}
.footer-bottom span { margin-right: auto; }
.footer-bottom a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 8px;
	color: #d4d3df;
	text-decoration: underline;
	text-underline-offset: 3px;
	position: relative;
	z-index: 96;
}
.footer-bottom a:hover,
.footer-bottom a:focus-visible {
	color: #fff;
}

/* Skip-link target: focusable without distracting ring on mouse */
#dw-main:focus {
	outline: none;
}
#dw-main:focus-visible {
	outline: 2px solid var(--orange, #f28c28);
	outline-offset: 4px;
}

@media (max-width: 1100px) {
  .section-shell, .site-header { width: min(calc(100% - 48px),var(--max)); }
}

@media (max-width: 820px) {
  .section-shell, .site-header { width: min(calc(100% - 40px),var(--max)); }
  .site-header { height: 64px; grid-template-columns: minmax(0, 1fr) auto auto; }
  .site-header > .button { display: none; }
  .menu-button { display: block; }
}
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { align-items: flex-start; }
  .footer-bottom span { flex: 0 0 100%; margin-right: 0; }
}
.wp-site-blocks > footer { margin: 0; }

/* WhatsApp FAB */
/* WhatsApp orbit — replaces legacy FAB */
.whatsapp-orbit,
.dw-whatsapp-fab.whatsapp-orbit {
	position: fixed;
	right: 25px;
	bottom: 25px;
	z-index: 90;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	text-decoration: none !important;
	width: auto;
	max-width: min(220px, calc(100vw - 40px));
	pointer-events: none;
}

.dw-whatsapp-fab.is-near-footer {
	/* Park above the legal bar so footer right edge stays flush */
	bottom: max(88px, calc(64px + env(safe-area-inset-bottom, 0px) + 24px));
}

.whatsapp-orbit i,
.whatsapp-orbit .whatsapp-message {
	pointer-events: auto;
}

.whatsapp-orbit i {
	width: 66px;
	height: 66px;
	display: grid;
	place-items: center;
	position: relative;
	border-radius: 50%;
	background: #3d4166;
	color: #fff;
	box-shadow: 0 12px 36px rgba(61, 65, 102, 0.28);
	border: 2px solid #f28c28;
}

.whatsapp-orbit i svg { stroke: #fff; fill: none; }

.whatsapp-orbit i::before,
.whatsapp-orbit i::after {
	content: "";
	position: absolute;
	inset: -8px;
	border: 1px solid rgba(242, 140, 40, 0.45);
	border-radius: 50%;
	animation: waPulse 2.5s ease-out infinite;
	pointer-events: none;
}

.whatsapp-orbit i::after { animation-delay: 1.2s; }

.whatsapp-message {
	padding: 11px 14px;
	background: #fff;
	border: 1px solid var(--line, rgba(61, 65, 102, 0.16));
	box-shadow: 0 18px 50px rgba(61, 65, 102, 0.08);
	color: var(--violet, #3d4166);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.02em;
	opacity: 1;
	transform: none;
	transition: opacity 0.3s ease, transform 0.3s ease;
	white-space: nowrap;
	margin-right: 0;
}

.whatsapp-orbit:focus,
.whatsapp-orbit:focus-visible {
	outline: none;
}

.whatsapp-orbit:focus-visible i {
	outline: 2px solid #f28c28;
	outline-offset: 3px;
}

.dw-whatsapp-fab.is-near-footer .whatsapp-message {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(6px);
}

@keyframes waPulse {
	0% { transform: scale(0.85); opacity: 0.8; }
	100% { transform: scale(1.28); opacity: 0; }
}

@media (max-width: 720px) {
  .whatsapp-message { display: none; }
  .whatsapp-orbit,
  .dw-whatsapp-fab.whatsapp-orbit { right: 16px; bottom: 16px; }
  .whatsapp-orbit i { width: 58px; height: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-orbit i::before,
  .whatsapp-orbit i::after { animation: none; }
  .whatsapp-message { transition: none; }
}
@keyframes waLoadIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.whatsapp-orbit { opacity: 0; transform: translateY(12px); }
.whatsapp-orbit.is-loaded { animation: waLoadIn .6s cubic-bezier(.22,.8,.22,1) .4s both; }
@media (prefers-reduced-motion: reduce) {
  .whatsapp-orbit,
  .whatsapp-orbit.is-loaded { opacity: 1; transform: none; animation: none; }
}

.dw-historic-notice {
  margin: 0 0 28px;
  padding: 18px 20px;
  border: 1px solid var(--line, rgba(61,65,102,.16));
  background: #fff;
}
.dw-historic-notice .eyebrow { margin: 0 0 8px; }
.dw-historic-notice p { margin: 0 0 10px; color: #444; font-size: 14px; font-weight: 300; line-height: 1.6; }
.dw-historic-notice p:last-child { margin-bottom: 0; }


/* DW PHOTO FIT — full image, never crop sides */
/*
 * Política global: las fotos se muestran enteras (object-fit: contain).
 * Evita el recorte lateral típico de object-fit: cover en cards, heroes y thumbs.
 * El fondo de la caja queda visible como respiro; no aplica a iconos/SVG del chrome.
 */
.project-visual img,
.project-visual.project-has-thumb img,
.article-visual img,
.article-visual.article-has-thumb img,
.portrait-placeholder img,
.mini-work-visual img,
.portfolio-art img,
.case-art img,
.dw-client-card__logo img,
.logo-wall img,
.dw-case-hero img,
.dw-case-hero__media img,
.dw-case__related-media img,
.dw-project-hero img,
.dw-project-hero__media img,
.dw-project-gallery img,
.dw-project-cover img,
.dw-sheet-media img,
.wp-block-post-featured-image img,
.wp-block-image img,
.entry-content img:not([src*=".svg"]),
.post-thumbnail img,
.attachment-post-thumbnail,
img.wp-post-image {
  object-fit: contain !important;
  object-position: center center !important;
  max-width: 100%;
}

/* Solo hero de artículos del blog: la foto llena el top (gana a .entry-content img) */
.dw-article .dw-article-hero__media img,
.entry-content .dw-article-hero__media img,
.dw-article-hero.has-media .dw-article-hero__media img {
  object-fit: cover !important;
  object-position: center center !important;
}

/* Cajas de foto: fondo neutro mientras la imagen se ve completa */
.project-visual.project-has-thumb,
.article-visual.article-has-thumb,
.mini-work-visual,
.portfolio-art,
.case-art,
.portrait-placeholder,
.dw-case-hero.has-media,
.dw-project-hero.has-media {
  background-color: #eceaf2;
}

/* Logos de clientes: siempre enteros dentro del marco */
.dw-client-card__logo {
  display: grid;
  place-items: center;
}
.dw-client-card__logo img {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 100%;
  position: static !important;
  inset: auto !important;
}

/* Mosaico / thumbs de trabajos: pin absolute + contain (sin crop por overflow) */
.dw-mosaic__media,
.mini-work-visual,
.portfolio-art,
.case-art,
.project-visual.project-has-thumb,
.article-visual.article-has-thumb,
.dw-project-hero__media,
.dw-case-hero__media,
.dw-case__related-media {
  position: relative;
  overflow: hidden;
  background-color: #eceaf2;
}
/* Mosaico portfolio: fluir natural (sin crop de marco fijo) */
.dw-mosaic__media img,
.dw-mosaic__card:hover .dw-mosaic__media img,
.dw-mosaic__card:focus-within .dw-mosaic__media img {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  transform: none !important;
  object-fit: contain !important;
  object-position: center center !important;
}
/* Otras thumbs con caja fija: absolute + contain */
.mini-work-visual img,
.portfolio-art img,
.case-art img,
.project-visual img,
.project-visual.project-has-thumb img,
.article-visual img,
.article-visual.article-has-thumb img,
.dw-project-hero__media img,
.dw-project-gallery img,
.dw-case-hero__media img,
.dw-case__related-media img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  transform: none !important;
  object-fit: contain !important;
  object-position: center center !important;
}
/* Frame de ficha: fluir natural (figcaption debajo), imagen completa */
.dw-project-hero__frame img,
.dw-project-hero__frame-img {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}