/* ==========================================================================
   Escuela CIMASUR — Base del front publico
   Alcance: se aplica solo fuera del Portal Alumno (ver functions.php).
   Incluye reset propio porque en estas paginas descargamos el CSS heredado.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

button, input, select, textarea { font: inherit; color: inherit; }

ul, ol { margin: 0; padding: 0; }

blockquote, figure { margin: 0; font-family: inherit; }

/* El atributo hidden debe ganarle a cualquier display del diseño (los modales
   y paneles usan flex/grid, que si no lo dejarian visible). */
[hidden] { display: none !important; }

p { margin-block: 0 1em; }

:focus-visible { outline: 2px solid var(--ec-celeste); outline-offset: 2px; }

.ec-page {
  font-family: var(--ec-font-body);
  font-size: var(--ec-body);
  line-height: 1.6;
  color: var(--ec-text);
  background: var(--ec-white);
}

/* :where() deja la especificidad en cero, para que cualquier clase del diseño
   pueda ajustar margenes o color sin pelear con esta regla base. */
:where(.ec-page) :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--ec-font-title);
  line-height: 1.15;
  margin: 0;
  /* Heredan el color de su seccion: sobre navy salen blancos, sobre blanco
     salen navy. Sin esto, estilos ajenos les imponen un color fijo. */
  color: inherit;
}

.ec-section    { padding-block: var(--ec-section-y); }
.ec-section--sm{ padding-block: var(--ec-section-y-sm); }

/* --- Tarjeta --- */
.ec-card {
  background: var(--ec-white);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-r-card);
  padding: 26px;
}

/* --- Grilla generica --- */
.ec-grid {
  display: grid;
  gap: var(--ec-grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}