/* Redesign 1/3. Container geometry first; shared header + Home hero only.
   These namespaced tokens are the foundation for later Home sections. */
:root {
  --paw-turquoise: #0099a8;
  --paw-action: #007c88;
  --paw-action-hover: #006a75;
  --paw-blue: #2855dc;
  --paw-deep: #005c67;
  --paw-coral: #ff6b4a;
  --paw-ink: #18282f;
  --paw-muted: #53616a;
  --paw-white: #ffffff;
  --paw-surface: #f4f7f8;
  --paw-line: #dce4e7;
  --paw-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --paw-width: 1280px;
  --paw-gutter: clamp(24px, 4.4vw, 72px);
  --paw-radius: 16px;
  --paw-control-radius: 999px;
  --paw-space-xs: 8px;
  --paw-space-sm: 16px;
  --paw-space-md: 24px;
  --paw-space-lg: 40px;
  --paw-space-xl: 64px;
  --paw-section-space: clamp(56px, 6vw, 88px);
}
/* Geometry is shared across all existing routes; navigation behavior is intact. */
.site-header {background: var(--paw-white); border-bottom: 1px solid var(--paw-line); color: var(--paw-ink);}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 32px;
  max-width: calc(var(--paw-width) + 2 * var(--paw-gutter));
  min-height: 108px;
  margin-inline: auto;
  padding: 20px var(--paw-gutter);
  font-family: var(--paw-font);
}
.site-header .brand {display: flex; align-items: center; flex: 0 1 252px; min-width: 0; line-height: 1;}
.brand-logo {display: block; width: 100%; height: auto; aspect-ratio: 2667 / 642; object-fit: contain;}
.main-navigation {display: flex; align-items: center; gap: 32px; font-family: var(--paw-font);}
.main-navigation a {font-size: 14px; font-weight: 500; line-height: 24px; color: var(--paw-ink); padding: 10px 0;}
.main-navigation a:hover {color: var(--paw-action);}
.main-navigation a[aria-current=page]::after {background: var(--paw-turquoise); height: 2px; bottom: 3px;}
.main-navigation a:last-child {border: 1px solid var(--paw-line); padding: 11px 22px; border-radius: var(--paw-control-radius);}
.main-navigation a:last-child:hover {background: var(--paw-surface);}
.site-header a:focus-visible, .site-header button:focus-visible {outline: 2px solid var(--paw-blue); outline-offset: 5px;}
.site-header .menu-toggle {color: var(--paw-ink); font-family: var(--paw-font); min-height: 44px;}
@media (min-width: 761px) and (max-width: 1000px) {
  .header-inner {min-height: 96px; gap: 24px;}
  .site-header .brand {flex-basis: 210px;}
  .main-navigation {gap: 24px;}
}
@media (max-width: 760px) {
  .header-inner {min-height: 88px; padding-block: 18px; gap: 16px; flex-wrap: wrap;}
  .site-header .brand {flex: 0 1 190px;}
  .menu-toggle {flex-shrink: 0;}
  .main-navigation {width: 100%; flex-wrap: wrap; gap: 8px 16px; padding-top: 12px; border-top: 1px solid var(--paw-line);}
  .main-navigation a {flex-basis: calc(50% - 8px); font-size: 14px; padding: 10px 0; min-height: 44px;}
  .main-navigation a:last-child {padding: 10px 0; border: 0; border-radius: 0;}
  .main-navigation a:last-child:hover {background: none;}
  .main-navigation a:last-child[aria-current=page]::after {left: 0; right: auto;}
  .js .main-navigation:not(.is-open) {display: none;}
}
@media (max-width: 360px) {
  .site-header .brand {flex-basis: 172px;}
}

/* Shared footer: single navigation, no duplicate Contacto heading. */
.site-footer .footer-inner {grid-template-columns: minmax(0, 1fr) auto;}
.site-footer .footer-brand .brand, .site-footer .footer-brand .brand-dot {color: var(--paw-ink);}
@media (max-width: 760px) {
  .site-footer .footer-inner {grid-template-columns: minmax(0, 1fr);}
}

/* Legal links share the approved footer typography and wrap on small screens. */
.site-footer .footer-legal {display: flex; flex-wrap: wrap; gap: 12px 24px; min-width: 0;}