@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #ffffff;
  --bg-soft: #f6f6f2;
  --surface: #ffffff;
  --surface-soft: #f6f6f2;

  --text: #111111;
  --text-soft: #5a5a55;
  --border: #e5e5e0;

  --primary: #111111;
  --primary-hover: #2a2a2a;
  --primary-text: #ffffff;

  --accent: #ffc20e;
  --accent-ink: #111111;

  --radius: 12px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family:
    "DM Sans",
    sans-serif;

  background:
    var(--bg);

  color:
    var(--text);
}

a {
  color: inherit;
  text-decoration: none;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;

  background:
    rgba(
      255,
      255,
      255,
      0.96
    );

  border-bottom:
    1px solid
    var(--border);

  backdrop-filter:
    blur(14px);
}

.site-header__inner {
  width: min(
    1500px,
    calc(100% - 40px)
  );

  min-height: 76px;

  margin: 0 auto;

  display: flex;
  align-items: center;

  gap: 34px;
}

.brand {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.5px;

  color:
    var(--primary);
}

.site-nav {
  flex: 1;

  display: flex;
  align-items: center;

  gap: 30px;
}

.site-nav a {
  font-size: 15px;
  font-weight: 600;
}

.site-nav a:hover {
  color:
    var(--primary);
}

.cart-button {
  min-height: 40px;

  padding:
    0 16px;

  border:
    1px solid
    var(--border);

  border-radius:
    10px;

  display:
    inline-flex;

  align-items:
    center;

  gap: 8px;

  font-size: 14px;
  font-weight: 700;

  background:
    var(--surface);
}

.cart-button span {
  min-width: 22px;
  height: 22px;

  padding:
    0 6px;

  border-radius:
    999px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    var(--primary);

  color:
    #ffffff;

  font-size:
    12px;
}

.home {
  width:
    min(
      1500px,
      calc(100% - 40px)
    );

  margin:
    0 auto;
}

.hero {
  min-height:
    calc(
      100vh - 77px
    );

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  justify-content:
    center;

  padding:
    90px 0;
}

.hero__eyebrow {
  margin-bottom:
    20px;

  font-size:
    13px;

  font-weight:
    800;

  letter-spacing:
    0.14em;

  color:
    var(--primary);
}

.hero h1 {
  max-width:
    900px;

  margin:
    0;

  font-size:
    clamp(
      48px,
      7vw,
      92px
    );

  line-height:
    0.98;

  letter-spacing:
    -0.055em;
}

.hero p {
  max-width:
    720px;

  margin:
    28px 0 0;

  color:
    var(--text-soft);

  font-size:
    19px;

  line-height:
    1.65;
}

.hero__actions {
  margin-top:
    36px;

  display:
    flex;

  gap:
    12px;

  flex-wrap:
    wrap;
}

.button {
  min-height:
    48px;

  padding:
    0 20px;

  border-radius:
    10px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  font-size:
    15px;

  font-weight:
    700;
}

.button--primary {
  background:
    var(--primary);

  color:
    var(--primary-text);
}

.button--primary:hover {
  background:
    var(--primary-hover);
}

.button--secondary {
  border:
    1px solid
    var(--border);

  background:
    var(--surface);
}

@media (
  max-width: 1000px
) {
  .site-nav {
    display:
      none;
  }

  .site-header__inner {
    min-height:
      66px;
  }

  .hero {
    min-height:
      calc(
        100vh - 67px
      );
  }
}

@media (
  max-width: 600px
) {
  .site-header__inner,
  .home {
    width:
      min(
        100% - 24px,
        1500px
      );
  }

  .hero {
    padding:
      60px 0;
  }

  .hero p {
    font-size:
      16px;
  }
}


/* =========================================================
   FIX DEFINITIVO · HEADER ACTIONS
   ========================================================= */

.site-header__inner {
  min-height: 76px;
  height: 76px;
}


.site-header__actions {
  margin-left: auto;

  height: 76px;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 10px;

  flex-shrink: 0;
}


/* =========================================================
   FIX SVG
   ========================================================= */

.site-header__actions svg,
.admin-login-button svg,
.cart-button svg {
  display: block !important;

  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;

  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;

  flex: 0 0 18px !important;
}


/* =========================================================
   BOTÓN LOGIN
   ========================================================= */

.admin-login-button {
  width: auto !important;
  min-width: auto !important;

  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;

  padding: 0 14px !important;

  margin: 0 !important;

  border: 1px solid var(--border) !important;
  border-radius: 10px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  flex-direction: row !important;

  gap: 8px !important;

  background: var(--surface) !important;

  color: var(--text) !important;

  font-size: 13px !important;
  font-weight: 700 !important;

  line-height: 1 !important;

  overflow: hidden !important;
}


.admin-login-button__text {
  display: inline !important;

  width: auto !important;
  min-width: 0 !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;

  color: inherit !important;

  font-size: 13px !important;
  font-weight: 700 !important;

  line-height: 1 !important;
}


/* =========================================================
   BOTÓN CARRITO
   ========================================================= */

.cart-button {
  width: auto !important;
  min-width: auto !important;

  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;

  padding: 0 12px !important;

  margin: 0 !important;

  border: 1px solid var(--border) !important;
  border-radius: 10px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  flex-direction: row !important;

  gap: 8px !important;

  background: var(--surface) !important;

  color: var(--text) !important;

  font-size: 13px !important;
  font-weight: 700 !important;

  line-height: 1 !important;

  overflow: visible !important;
}


/* =========================================================
   FIX TEXTO CARRITO
   ANULA EL .cart-button span VIEJO
   ========================================================= */

.cart-button > span:not(#cartCount) {
  display: inline !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  padding: 0 !important;
  margin: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;

  color: var(--text) !important;

  font-size: 13px !important;
  font-weight: 700 !important;

  line-height: 1 !important;
}


/* =========================================================
   CONTADOR CARRITO
   ========================================================= */

#cartCount {
  width: auto !important;
  min-width: 21px !important;

  height: 21px !important;
  min-height: 21px !important;
  max-height: 21px !important;

  padding: 0 6px !important;
  margin: 0 !important;

  border: 0 !important;
  border-radius: 999px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  flex: 0 0 auto !important;

  background: var(--primary) !important;

  color: #ffffff !important;

  font-size: 11px !important;
  font-weight: 800 !important;

  line-height: 1 !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 700px) {

  .site-header__inner,
  .site-header__actions {
    height: 66px;
    min-height: 66px;
  }


  .admin-login-button {
    width: 40px !important;
    min-width: 40px !important;

    padding: 0 !important;
  }


  .admin-login-button__text {
    display: none !important;
  }


  .cart-button {
    padding: 0 10px !important;
  }


  .cart-button > span:not(#cartCount) {
    display: none !important;
  }

}


/* ---------------------------------------------------------
   CONTACTO
   --------------------------------------------------------- */

.contact {
  max-width: 720px;
  padding: 90px 0;
}

.contact h1 {
  margin: 8px 0 16px;
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.contact__lead,
.contact__empty {
  margin: 0 0 32px;
  color: var(--text-soft);
  font-size: 18px;
  line-height: 1.6;
}

.contact__list {
  margin: 0;
  border-top: 1px solid var(--border);
}

.contact__item {
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
}

.contact__item dt {
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact__item dd {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}

.contact__item a:hover {
  color: var(--primary);
  text-decoration: underline;
}


/* Los botones e inputs heredan la tipografía del sitio */
button,
input,
select,
textarea {
  font-family: inherit;
}