/* CULDOC — AJUSTES GENERALES
   Cambia estas variables para personalizar el sitio completo.
   El logotipo es una imagen blanca; su color no depende de --color-texto. */
:root {
  --color-fondo: #000000;
  --color-texto: #ffffff;
  --color-lineas: #ffffff;
  --grosor-lineas: 1px;
  --opacidad-lineas: 0.65;
  --fuente-textos: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --tamano-texto: clamp(1rem, 0.912vw, 1.125rem);
  --peso-texto: 400;
  --interlineado: 1.38;
  --tamano-titulos: clamp(1rem, 1.15vw, 1.375rem);
  --peso-titulos: 500;
  --tamano-encabezado: clamp(1.125rem, 1.875vw, 2.25rem);
  --peso-encabezado: 700;
  --margen-lateral: 5.7%;
  --ancho-etiqueta: 12.65vw;
  --ancho-columna: 27rem;
  --ancho-logo: 37%;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--color-fondo); color: var(--color-texto); font-family: var(--fuente-textos); font-size: var(--tamano-texto); font-weight: var(--peso-texto); line-height: var(--interlineado); }
a { color: inherit; text-underline-offset: .25em; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
p, h1, h2 { margin: 0; }
.hero { min-height: 39.7vw; display: flex; flex-direction: column; }
.masthead { display: flex; justify-content: space-between; align-items: baseline; gap: 2rem; padding: 4.65vw 4.2% 0 5.2%; font-size: var(--tamano-encabezado); font-weight: var(--peso-encabezado); line-height: 1.2; }
.masthead span { font-size: .8em; }
.brand { flex: 1; display: grid; place-items: center; padding: 4rem 0; }
.brand img { display: block; width: var(--ancho-logo); height: auto; }
.section, .footer { position: relative; }
.section::before, .footer::before { content: ""; position: absolute; inset: 0 0 auto; height: var(--grosor-lineas); background: var(--color-lineas); opacity: var(--opacidad-lineas); }
.section { display: grid; grid-template-columns: var(--ancho-etiqueta) minmax(0, var(--ancho-columna)); align-content: start; padding: 2.6vw var(--margen-lateral) 4vw; }
.section h2 { font-size: var(--tamano-titulos); font-weight: var(--peso-titulos); line-height: var(--interlineado); }
.section-about { min-height: 27.35vw; padding-top: 3.6vw; }
.section-fidocs { min-height: 18.1vw; padding-top: 1.85vw; }
.section-members { min-height: 12.4vw; }
.section-copy p + p { margin-top: 1.35em; }
.members { list-style: none; margin: 0; padding: 0; }
.footer { min-height: 10.9vw; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 3rem 3.5% 3rem var(--margen-lateral); }
.footer-brand { display: block; width: clamp(6.25rem, 6.6vw, 8rem); flex-shrink: 0; }
.footer-brand img { display: block; width: 100%; height: auto; }
.contact { display: flex; align-items: baseline; gap: 1.8rem; font-size: var(--tamano-titulos); }
.contact a { text-decoration: none; overflow-wrap: anywhere; }
.contact a:hover { text-decoration: underline; }
.skip-link { position: absolute; top: 1rem; left: 1rem; transform: translateY(-200%); padding: .75rem; background: var(--color-fondo); z-index: 2; }
.skip-link:focus { transform: translateY(0); }
@media (max-width: 1100px) {
  :root { --ancho-etiqueta: 12rem; --ancho-columna: 27rem; }
  .section { padding-top: 2.5rem; padding-bottom: 3.5rem; }
}
@media (max-width: 650px) {
  :root { --margen-lateral: 6%; --ancho-logo: 76%; }
  .hero { min-height: 23rem; min-height: clamp(23rem, 65svh, 34rem); }
  .masthead { padding: 1.75rem var(--margen-lateral) 0; gap: 1rem; }
  .masthead p { max-width: 15rem; }
  .masthead span { font-size: 1rem; }
  .brand { padding: 3.5rem 0; }
  .section { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; padding: 2rem var(--margen-lateral) 2.75rem; }
  .section-copy { max-width: 32rem; }
  .footer { align-items: flex-start; flex-direction: column; gap: 2rem; padding: 2.25rem var(--margen-lateral); }
  .contact { flex-wrap: wrap; gap: .6rem 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }