/* Tokens de marca · Carlos Olivo. Copia este archivo en cualquier proyecto web. */
@font-face { font-family: Poppins; font-weight: 700; src: url("../fonts/Poppins-Bold.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: Inter; font-weight: 400; src: url("../fonts/Inter-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: Inter; font-weight: 500; src: url("../fonts/Inter-Medium.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: Inter; font-weight: 600; src: url("../fonts/Inter-SemiBold.woff2") format("woff2"); font-display: swap; }

:root {
  --co-negro: #101014;
  --co-papel: #F6F3F5;
  --co-rosa: #D34D83;          /* solo titulares grandes o sobre negro */
  --co-rosa-texto: #B83A6E;    /* botones (texto blanco) y enlaces */
  --co-rosa-hover: #9F2F5D;
  --co-ciruela: #49313E;
  --co-texto-2: #5C4A55;
  --co-texto-2-oscuro: #CFC6CB;
  --co-linea: #E6DEE2;
  --co-blanco: #FFFFFF;

  --co-fuente-titular: Poppins, system-ui, sans-serif;
  --co-fuente-texto: Inter, system-ui, sans-serif;
  --co-radio-boton: 999px;
  --co-radio-tarjeta: 24px;
}

.co-titular { font: 700 clamp(40px, 5vw, 72px)/1.04 var(--co-fuente-titular); letter-spacing: -0.02em; color: var(--co-negro); }
.co-titular span { display: block; color: var(--co-rosa); }
.co-boton { display: inline-flex; gap: 12px; align-items: center; padding: 14px 26px; border-radius: var(--co-radio-boton);
  background: var(--co-rosa-texto); color: #fff; font: 600 17px var(--co-fuente-texto); text-decoration: none; }
.co-boton:hover { background: var(--co-rosa-hover); }
.co-boton:focus-visible { outline: 3px solid var(--co-negro); outline-offset: 3px; }