/* Amox — sitio v1 (2026-10-12)
   Valores de marca: MAHUNOStudio/70-clients/2026-10-amox/03-design/tokens.css
   Contexto de diseño: Amox/.impeccable.md */

@font-face {
  font-family: "Fraunces";
  src: url("assets/fuentes/Fraunces.woff") format("woff");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("assets/fuentes/Figtree.woff") format("woff");
  font-weight: 300 900;
  font-display: swap;
}

/* ---- Tokens ------------------------------------------------ */

:root {
  --paper:  #f6f0e4;   /* Papel */
  --ink:    #1e1a17;   /* Tinta, 15.22:1 sobre papel */
  --dim:    #6a6058;   /* Gris tierra, 5.40:1 */
  --brand:  #ee8c4f;   /* Cempasúchil: superficies, nunca texto sobre claro */
  --accent: #b44d17;   /* Tostado de uso. El aprobado #b84f17 mide 4.43:1 (no llega a AA); este, 4.61:1 */
  --on-accent: #fffaf3; /* Sobre tostado, 5.04:1 */
  --rule:   #ded3c1;   /* Filetes (decorativo) */
  --pending: #8a5a12;  /* Marcadores de pendiente, 5.0:1 sobre papel */

  --contact-bg: #1e1a17;
  --contact-fg: #f6f0e4;
  --contact-dim: #b3a89d;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Escala tipográfica (razón ~1.333) */
  --t-sm: 0.875rem;
  --t-base: 1.0625rem;
  --t-lg: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem);
  --t-xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --t-2xl: clamp(1.875rem, 1.4rem + 2vw, 2.875rem);
  --t-3xl: clamp(2.375rem, 1.5rem + 4.2vw, 4.75rem);

  /* Espacio (base 4) */
  --s-xs: 0.25rem; --s-sm: 0.5rem; --s-md: 0.75rem; --s-base: 1rem;
  --s-lg: 1.5rem;  --s-xl: 2rem;   --s-2xl: 3rem;   --s-3xl: 4rem; --s-4xl: 6rem;
  --s-seccion: clamp(4rem, 2.5rem + 6vw, 8rem);
  --gutter: clamp(1rem, 0.5rem + 3vw, 3rem);
  --ancho: 72rem;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1e1a17; --ink: #f6f0e4; --dim: #b3a89d;
    --accent: #ee8c4f; --on-accent: #1e1a17; --rule: #3a322c; --pending: #e0b56a;
    --contact-bg: #2a2420; --contact-fg: #f6f0e4; --contact-dim: #b3a89d;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #1e1a17; --ink: #f6f0e4; --dim: #b3a89d;
  --accent: #ee8c4f; --on-accent: #1e1a17; --rule: #3a322c; --pending: #e0b56a;
  --contact-bg: #2a2420; --contact-fg: #f6f0e4; --contact-dim: #b3a89d;
  color-scheme: dark;
}

/* ---- Base -------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body { line-height: 1.68; } }
:root[data-theme="dark"] body { line-height: 1.68; }

/* Logo según el tema efectivo (sistema o elegido) */
.solo-oscuro { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .solo-claro { display: none; }
  :root:not([data-theme="light"]) .solo-oscuro { display: block; }
}
:root[data-theme="dark"] .solo-claro { display: none; }
:root[data-theme="dark"] .solo-oscuro { display: block; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
  font-variation-settings: "SOFT" 50, "WONK" 0;
}
p { margin: 0; text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: #f8d9c4; color: #1e1a17; }

a { color: var(--accent); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.saltar {
  position: absolute; left: var(--gutter); top: -100px; z-index: 10;
  background: var(--ink); color: var(--paper); padding: var(--s-sm) var(--s-base);
}
.saltar:focus { top: var(--s-sm); }

/* ---- Botones y enlaces ------------------------------------- */

.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--s-lg);
  font: 600 var(--t-base)/1 var(--font-body);
  text-decoration: none; border-radius: 6px;
  transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out),
              transform 120ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.boton:active { transform: scale(0.98); }
.boton--principal { background: var(--accent); color: var(--on-accent); }
.boton--secundario {
  min-height: 44px; padding: 0 var(--s-base);
  color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink);
}
.boton--contacto { background: var(--brand); color: #1e1a17; }

@media (hover: hover) {
  .boton--principal:hover { background: color-mix(in srgb, var(--accent), var(--ink) 18%); }
  .boton--secundario:hover { background: var(--ink); color: var(--paper); }
  .boton--contacto:hover { background: color-mix(in srgb, var(--brand), #f6f0e4 20%); }
  .enlace:hover { text-decoration-thickness: 2px; }
}

.enlace {
  display: inline-flex; align-items: center; min-height: 48px;
  font-weight: 600; color: var(--accent);
  text-decoration: underline; text-decoration-thickness: 1px;
}
.enlace--claro { color: var(--contact-fg); }

/* ---- Pendientes (visible a propósito hasta tener el dato) --- */

.pendiente-texto { color: var(--pending); font-style: italic; }
.pendiente[aria-disabled="true"] {
  cursor: not-allowed; outline: 1px dashed currentColor; outline-offset: 3px;
}
.boton--contacto.pendiente { background: transparent; color: var(--brand); outline-color: var(--brand); }

/* ---- Cabecera ---------------------------------------------- */

.cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-base);
  max-width: var(--ancho); margin: 0 auto;
  padding: var(--s-base) var(--gutter);
}
.cabecera__logo { display: inline-flex; padding: var(--s-xs) 0; }
.cabecera__logo img { width: auto; height: 32px; }
.cabecera__acciones { display: flex; align-items: center; gap: var(--s-sm); }

/* Botón de tema: muestra lo que obtendrás al tocarlo */
.tema {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  background: none; border: 0; border-radius: 6px; color: var(--ink); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 180ms var(--ease-out), transform 120ms var(--ease-out);
}
.tema[hidden] { display: none; }
.tema:active { transform: scale(0.94); }
.tema svg { width: 22px; height: 22px; grid-area: 1 / 1; }
.tema__luna { fill: currentColor; }
.tema__sol { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tema__sol circle { fill: currentColor; stroke: none; }
.tema__sol { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tema__sol { display: block; }
  :root:not([data-theme="light"]) .tema__luna { display: none; }
}
:root[data-theme="dark"] .tema__sol { display: block; }
:root[data-theme="dark"] .tema__luna { display: none; }
@media (hover: hover) {
  .tema:hover { background: color-mix(in srgb, var(--paper), var(--ink) 8%); }
}

/* ---- Portada ----------------------------------------------- */

.portada {
  position: relative;
  max-width: var(--ancho); margin: 0 auto;
  padding: clamp(3rem, 1rem + 8vw, 7rem) var(--gutter) var(--s-seccion);
}
.portada__texto { max-width: 52rem; display: grid; gap: var(--s-lg); }

.liston {
  position: absolute; top: 0; right: var(--gutter);
  width: clamp(18px, 1rem + 1.5vw, 36px); height: clamp(120px, 6rem + 10vw, 260px);
  fill: var(--brand);
}

.antetitulo {
  font-size: var(--t-sm); font-weight: 600; letter-spacing: 0.04em;
  color: var(--dim);
  padding-right: 2.5rem; /* no choca con el listón */
}
h1 {
  font-size: var(--t-3xl); font-weight: 500; letter-spacing: -0.015em;
  max-width: 16ch;
  font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 144;
}
.titular__segunda {
  display: block; margin-top: 0.35em;
  font-style: italic; font-weight: 400; color: var(--accent);
  font-size: 0.62em; letter-spacing: 0; max-width: 22ch;
}
.entrada { font-size: var(--t-lg); color: var(--dim); max-width: 38rem; line-height: 1.55; }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-sm) var(--s-xl); margin-top: var(--s-sm); }

/* ---- Secciones --------------------------------------------- */

.seccion {
  max-width: var(--ancho); margin: 0 auto;
  padding: 0 var(--gutter) var(--s-seccion);
  display: grid; gap: var(--s-2xl);
  grid-template-columns: minmax(0, 1fr);
}
.seccion__cabeza {
  display: flex; align-items: baseline; gap: var(--s-base);
  padding-top: var(--s-lg); border-top: 1px solid var(--rule);
}
.folio {
  font-family: var(--font-display); font-style: italic; font-size: var(--t-base);
  color: var(--accent); font-variant-numeric: oldstyle-nums; min-width: 2ch;
}
h2 { font-size: var(--t-2xl); letter-spacing: -0.01em; }
h3 { font-size: var(--t-xl); }

@media (min-width: 900px) {
  .seccion { grid-template-columns: 16rem minmax(0, 1fr); column-gap: var(--s-3xl); }
  .seccion__cabeza { grid-column: 1 / -1; }
  .seccion > :not(.seccion__cabeza) { grid-column: 2; }
}

/* Qué hacemos */
.oferta { display: grid; gap: var(--s-2xl); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.oferta__item { display: grid; gap: var(--s-md); align-content: start; }
.oferta__item p { color: var(--dim); max-width: 34rem; }
.nota { font-family: var(--font-display); font-size: var(--t-lg); font-style: italic; max-width: 34rem; line-height: 1.45; }

/* Cómo trabajamos */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-xl); counter-reset: paso; }
.paso {
  display: grid; gap: var(--s-sm); align-content: start;
  padding-top: var(--s-base); border-top: 2px solid var(--ink);
}
.paso__cuando { font-size: var(--t-sm); font-weight: 600; letter-spacing: 0.04em; color: var(--accent); }
.paso p:last-child { color: var(--dim); }
@media (min-width: 640px) {
  .pasos { grid-template-columns: repeat(3, 1fr); gap: var(--s-lg); }
}

/* Producto */
.producto {
  display: grid; gap: var(--s-md); max-width: 40rem;
  padding: var(--s-xl); border: 1px dashed var(--dim); border-radius: 8px;
}
.producto__estado {
  justify-self: start; font-size: var(--t-sm); font-weight: 600;
  color: var(--dim); letter-spacing: 0.04em;
}
.producto__estado::before {
  content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-right: 0.5em;
  border-radius: 50%; background: var(--brand); vertical-align: 0.08em;
}
.producto__nombre span { font-family: var(--font-body); font-size: var(--t-base); font-weight: 500; color: var(--dim); }
.producto p:last-child { color: var(--dim); }

/* Quiénes somos */
.nosotros__intro { font-size: var(--t-lg); max-width: 38rem; line-height: 1.55; }
.nosotros__intro em { font-family: var(--font-display); }
.socios {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s-lg); grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr));
  max-width: 40rem;
}
.socio { display: grid; gap: var(--s-xs); }
.socio__foto {
  aspect-ratio: 1; border-radius: 8px; margin-bottom: var(--s-sm);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: clamp(2.5rem, 1.5rem + 4vw, 4rem); color: var(--dim);
  background: color-mix(in srgb, var(--paper), var(--ink) 6%);
}
.socio__foto.pendiente { outline: 1px dashed var(--dim); outline-offset: -1px; }
.socio__nombre { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 600; }
.socio__linea { color: var(--dim); }

/* Contacto */
.contacto { background: var(--contact-bg); color: var(--contact-fg); }
.contacto__interior {
  max-width: var(--ancho); margin: 0 auto; display: grid; gap: var(--s-lg); justify-items: start;
  padding: var(--s-seccion) var(--gutter);
}
.contacto h2 { font-size: var(--t-3xl); font-weight: 500; }
.contacto p { font-size: var(--t-lg); color: var(--contact-dim); max-width: 32rem; }
.contacto__vias { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-base) var(--s-xl); margin-top: var(--s-sm); }

/* Pie */
.pie {
  max-width: var(--ancho); margin: 0 auto;
  padding: var(--s-2xl) var(--gutter) var(--s-xl);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-md) var(--s-lg);
  font-size: var(--t-sm); color: var(--dim);
}
.pie__simbolo { width: 28px; height: 28px; }
.pie__lema { flex: 1 1 16rem; }
.pie__legal { display: flex; flex-wrap: wrap; gap: var(--s-sm); }

/* ---- Movimiento: entrada suave, sólo con JS y sin reduced-motion ---- */

@media (prefers-reduced-motion: no-preference) {
  .js .entra {
    opacity: 0; transform: translateY(12px);
    transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out);
    transition-delay: var(--retraso, 0ms);
  }
  .js .entra.visible { opacity: 1; transform: none; }
}