/* Global foundation */
:root {
  --mobile-bottom-clearance: 0px;
}

html {
  font-size: 16px;
  background: var(--bg-page, var(--color-bg-neutral));
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-family-sans);
  line-height: 1.5;
  color: var(--color-text-primary);
  background: var(--color-body-bg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  overflow-x: clip;
}

.grecaptcha-badge {
  visibility: hidden !important;
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

a {
  color: inherit;
  transition: color var(--transition-fast);
}

img,
picture,
svg {
  max-width: 100%;
  height: auto;
}

.theme-media {
  display: block;
}

.theme-media__asset {
  display: none !important;
  width: 100%;
  height: auto;
}

:root:not([data-theme]) .theme-media__asset--light,
:root[data-theme="light"] .theme-media__asset--light,
:root[data-theme="dark"] .theme-media__asset--dark {
  display: block !important;
}

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--color-accent-blue);
  outline-offset: 2px;
}

/* Main layout spacing */
#main-content {
  --page-section-padding-top: calc(
    var(--header-height) + clamp(0px, 1vw, 12px)
  );
  --page-section-padding-bottom: clamp(36px, 7vw, 84px);
}

body:not(.view-empresas):not(.admin-dashboard) .container {
  max-width: var(--container-max);
}

body:not(.view-producto):not(.view-empresas):not(.admin-dashboard)
  .ds-lateral-shell:not(.mg-header-shell) {
  width: min(
    var(--container-max),
    calc(100% - (var(--layout-shell-gutter) * 2))
  );
}

.site-main.has-standard-padding,
.index-inicio {
  background-color: transparent;
}

@media (max-width: 767.98px) {
  :root {
    --mobile-bottom-clearance: calc(
      var(--header-height) + clamp(20px, 4vw, 32px)
    );
  }

  #main-content {
    /* Arriba, el mismo aire que a los costados (igual que el hero de la home). */
    --page-section-padding-top: var(--layout-shell-gutter, 16px);
    --page-section-padding-bottom: calc(
      clamp(30px, 8vw, 56px) + var(--mobile-bottom-clearance)
    );
  }
}

@media (max-width: 575px) {
  .header-logo .theme-media {
    margin-right: 0.5rem;
  }
}

/* Utilities */
.hidden {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.titulos-containers {
  max-width: var(--container-max);
  margin: var(--space-10) auto;
  padding-inline: var(--container-gutter);
  text-align: center;
}

/* Text sizes */
.text-extra-small {
  font-size: var(--extra-small);
  font-family: var(--font-family-sans);
}

.text-small {
  font-size: var(--small);
  font-family: var(--font-family-sans);
}

.text-normal {
  font-size: var(--normal);
  font-family: var(--font-family-sans);
}

.text-medium {
  font-size: var(--medium);
  font-family: var(--font-family-sans);
}

.text-large {
  font-size: var(--large);
  font-family: var(--font-family-sans);
}

.text-extra-large {
  font-size: var(--extra-large);
  font-family: var(--font-family-sans);
}

.text-extra-large-2 {
  font-size: var(--extra-large-2);
  font-family: var(--font-family-sans);
}

.text-extra-large-3 {
  font-size: var(--extra-large-3);
  font-family: var(--font-family-sans);
}

.text-extra-large-4 {
  font-size: var(--extra-large-4);
  font-family: var(--font-family-sans);
}

.text-extra-large-5 {
  font-size: var(--extra-large-5);
  font-family: var(--font-family-sans);
}

.text-extra-large-6 {
  font-size: var(--extra-large-6);
  font-family: var(--font-family-sans);
}

.text-extra-large-7 {
  font-size: var(--extra-large-7);
  font-family: var(--font-family-sans);
}

.text-extra-large-8 {
  font-size: var(--extra-large-8);
  font-family: var(--font-family-sans);
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  font-family: var(--font-family-sans);
}

/* Legacy title system mapped to tokens */
.titulos-containers > .titulos-body:first-child {
  font-size: var(--extra-small);
  margin: 0 0 var(--space-2);
}

.title {
  font-size: clamp(2rem, 3.8vw, var(--extra-large-4));
  line-height: 1.1;
  margin: 0;
}

.title-small {
  font-size: var(--small);
  margin: 0;
}

.title-extra-small {
  font-size: var(--extra-small);
  margin: 0;
}

.title-medium {
  font-size: var(--medium);
  margin: 0 0 var(--space-5);
}

.title-large {
  font-size: clamp(2rem, 5vw, var(--extra-large-6));
  margin: 0 0 var(--space-5);
}

.title-card {
  font-size: var(--large);
  margin: 0;
}

.subtitle-extra-small {
  font-family: var(--font-family-sans);
  font-size: var(--extra-small);
  color: var(--color-text-secondary);
}

.subtitle-small {
  font-family: var(--font-family-sans);
  font-size: var(--small);
  color: var(--color-text-secondary);
}

.subtitle-medium {
  font-family: var(--font-family-sans);
  font-size: var(--medium);
}

.subtitle {
  font-family: var(--font-family-sans);
  font-size: var(--normal);
}

.description-small {
  font-family: var(--font-family-sans);
  font-size: var(--small);
  color: var(--color-text-secondary);
}

.description-medium {
  font-family: var(--font-family-sans);
  font-size: var(--medium);
}

.title-hero {
  font-size: clamp(2rem, 5vw, var(--extra-large-6));
}

.subtitle-hero {
  font-family: var(--font-family-sans);
  font-size: var(--extra-large);
}

.title-productos {
  font-size: var(--extra-large);
  margin: 0 0 var(--space-5);
}

.title-productos_precio {
  font-size: var(--extra-large-4);
}

.titulos-body {
  font-family: var(--font-family-display, var(--font-family-sans)) !important;
  font-weight: var(--font-weight-bold) !important;
  color: inherit !important;
  letter-spacing: normal !important;
  text-transform: lowercase !important;
}

.titulos-body::first-letter {
  text-transform: uppercase !important;
}

.titulos-body :is(span, strong, b, em, i, small) {
  color: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
}