/*
Theme Name: LogosCorp
Theme URI: https://logoscorp.org
Author: Fundación LogosCorp
Author URI: https://logoscorp.org
Description: Tema a medida para la Fundación LogosCorp. Cabecera, footer, CPTs de Proyectos, Capacitadores y Cursos, blog y página 404, construidos sobre la identidad de marca institucional.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: logoscorp
*/

:root {
  /* Tipografía */
  --font-display: "Bebas Neue", "Arial Narrow", sans-serif;
  --font-support: "Open Sans Condensed", "Arial Narrow", sans-serif;
  --font-body: "Open Sans Condensed", "Arial Narrow", sans-serif;

  /* Colores institucionales */
  --logos-orange: #F26B3B;
  --logos-pink: #F08CBA;
  --logos-purple: #742D7C;
  --logos-black: #260F1B;

  /* Complementarios (uso limitado, máx. 20% del diseño) */
  --logos-mint: #D0E9D5;
  --logos-peach: #F7CE98;
  --logos-yellow: #F8C811;
  --logos-taupe: #856567;

  /* Neutros funcionales */
  --logos-white: #FFFFFF;
  --logos-bg-light: #F7F7F8;
  --logos-text-body: #3A2E35;

  /* Degradados institucionales */
  --gradient-orange-purple: linear-gradient(135deg, var(--logos-orange), var(--logos-purple));
  --gradient-orange-pink: linear-gradient(135deg, var(--logos-orange), var(--logos-pink));
  --gradient-purple-pink: linear-gradient(135deg, var(--logos-purple), var(--logos-pink));

  /* Layout */
  --radius-card: 14px;
  --radius-btn: 8px;
  --container-width: 1240px;
  --header-height: 100px;
  --transition-card: 260ms ease;
}

/* Escala de tintes (10%-100%) de los colores institucionales sobre blanco */
:root {
  --logos-orange-10: color-mix(in srgb, var(--logos-orange) 10%, white);
  --logos-orange-20: color-mix(in srgb, var(--logos-orange) 20%, white);
  --logos-orange-30: color-mix(in srgb, var(--logos-orange) 30%, white);
  --logos-pink-10: color-mix(in srgb, var(--logos-pink) 10%, white);
  --logos-pink-20: color-mix(in srgb, var(--logos-pink) 20%, white);
  --logos-purple-10: color-mix(in srgb, var(--logos-purple) 10%, white);
  --logos-purple-20: color-mix(in srgb, var(--logos-purple) 20%, white);
  --logos-black-10: color-mix(in srgb, var(--logos-black) 10%, white);
  --logos-black-20: color-mix(in srgb, var(--logos-black) 20%, white);
}

/* ---------- Fuentes locales (auto-contenidas, sin CDN) ---------- */
@font-face {
  font-family: "Bebas Neue";
  src: url("assets/fonts/BebasNeue-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans Condensed";
  src: url("assets/fonts/OpenSansCondensed-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans Condensed";
  src: url("assets/fonts/OpenSansCondensed-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans Condensed";
  src: url("assets/fonts/OpenSansCondensed-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Reset básico ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--logos-text-body);
  background: var(--logos-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.05;
  margin: 0 0 .5em;
  color: var(--logos-purple);
}
h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.5vw, 2.75rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 1.9rem); }

p { margin: 0 0 1em; font-size: 17px; }

.eyebrow {
  font-family: var(--font-support);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .8rem;
  color: var(--logos-orange);
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: 24px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}