/* ===========================
   general.css · Design tokens
   =========================== */
@font-face {
  font-family: "Helvetica LT Std Cond";
  src:
    url("../fonts/HelveticaLTStd-Cond.woff2") format("woff2"),
    url("../fonts/HelveticaLTStd-Cond.woff") format("woff");
  font-weight: 400 800; /* rango aproximado de pesos */
  font-style: normal;
  font-display: swap;
}

:root{
  /* 🎨 Colores de marca */
  --color-primary:   #F8E1E9;  /* rosa principal */
  --color-secondary: #F7ADC8;  /* mismo que principal (pedido) */
  --color-tertiary:  #FF4B2A;  /* acento/naranja coral */

  /* Neutros */
  --color-offwhite:  #FFF7F3;  /* blanco roto cremoso, sutil */
  --color-white:     #ffffff;
  --color-black:     #0f0f10;

  /* Texto */
  --text-main:   #1c1c1f;
  --text-muted:  #6b7280;
  --text-on-dark:#ffffff;

  /* Bordes / sombras */
  --border:      #e9e9ee;
  --shadow-1:    0 6px 18px rgba(0,0,0,.06);

  /* Tipografía */
  --font-base: "Helvetica LT Std Cond", system-ui, Arial, sans-serif;

  /* Escala tipográfica */
  --fs-900: clamp(2rem, 4.5vw, 3rem); /* H1 */
  --fs-800: clamp(1.35rem, 2.8vw, 2rem); /* H2 */
  --fs-700: clamp(1.1rem, 2vw, 1.4rem);  /* H3 */
  --fs-400: 1rem;    /* body */
  --fs-300: .925rem; /* pequeño */

  /* Espaciado y radios */
  --radius: 16px;
  --radius-pill: 999px;
  --space-1: .5rem;
  --space-2: .75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
}

/* = Base mínima */
html,body{margin:0;padding:0}
body{
  font-family: var(--font-base);
  font-size: var(--fs-400);
  line-height: 1.55;
  color: var(--text-main);
  background: var(--color-offwhite);
}
img,video{max-width:100%;display:block}

/* = Títulos */
h1,h2,h3{font-family: var(--font-headings); margin: 0 0 .4em;}
h1{font-size: var(--fs-900); font-weight: 800;}
h2{font-size: var(--fs-800); font-weight: 800;}
h3{font-size: var(--fs-700); font-weight: 800;}

/* = Enlaces */
a{color: var(--color-tertiary); text-decoration: none}
a:hover{opacity:.9}

/* = Contenedores rápidos (opcionales) */
.container{width:min(1200px,92%);margin-inline:auto}
.section{padding: var(--space-5) 0}

/* ===========================
   Botones
   =========================== */
.btn{
  --btn-bg: var(--color-tertiary);
  --btn-fg: var(--color-white);
  --btn-border: transparent;

  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding: .75rem 1.1rem;
  border-radius: var(--radius-pill);
  border: 2px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 800;
  letter-spacing:.2px;
  cursor:pointer;
  transition: transform .06s ease, filter .15s ease, background .2s ease;
  box-shadow: var(--shadow-1);
}
.btn:active{transform: translateY(1px)}
.btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}

/* Primario: coral (terciario), texto blanco */
.btn--primary{
  --btn-bg: var(--color-tertiary);
  --btn-fg: var(--color-white);
  --btn-border: var(--color-tertiary);
}
.btn--primary:hover{filter: brightness(0.97)}

/* Secundario: rosa (primary) con texto oscuro */
.btn--secondary{
  --btn-bg: var(--color-primary);
  --btn-fg: #2a2a2e; /* mejor contraste sobre el rosa */
  --btn-border: var(--color-primary);
}
.btn--secondary:hover{filter: brightness(0.98)}

/* Variante “ghost” por si la necesitas (contorno) */
.btn--ghost{
  --btn-bg: transparent;
  --btn-fg: var(--color-tertiary);
  --btn-border: var(--color-tertiary);
  box-shadow: none;
}
.btn--ghost:hover{background: color-mix(in srgb, var(--color-tertiary) 8%, transparent)}