/*
 * Landing de la lista de fotógrafos (L-B187). Solo tokens semánticos de packages/tokens
 * (tokens.css, copiado por build.mjs): ningún color, medida ni tipografía escrito a mano (R-DS1).
 */

@font-face {
  font-family: "Pic Pic Sans";
  src: url("/fonts/geist-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Pic Pic Sans";
  src: url("/fonts/geist-sans-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Pic Pic Sans";
  src: url("/fonts/geist-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Pic Pic Sans";
  src: url("/fonts/geist-sans-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

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

body {
  margin: 0;
  background: var(--picpic-color-surface-default);
  color: var(--picpic-color-text-default);
  font-family: var(--picpic-type-family-sans);
  font-size: var(--picpic-type-body);
  line-height: var(--picpic-type-leading-normal);
}

a {
  color: var(--picpic-color-accent-fg);
}

a:focus-visible {
  outline: var(--picpic-size-focus) solid var(--picpic-color-border-focus);
  outline-offset: var(--picpic-size-focus);
  border-radius: var(--picpic-radius-sm);
}

.page {
  max-width: var(--picpic-size-page-max);
  margin: 0 auto;
  padding: 0 var(--picpic-space-inset-md);
}

.header {
  border-bottom: thin solid var(--picpic-color-border-subtle);
}

.header .page {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--picpic-size-header);
  padding-top: var(--picpic-space-inset-sm);
  padding-bottom: var(--picpic-space-inset-sm);
  gap: var(--picpic-space-gap-md);
}

.brand {
  display: inline-flex;
  align-items: center;
  border-radius: var(--picpic-radius-sm);
}

.brand:focus-visible {
  outline: var(--picpic-size-focus) solid var(--picpic-color-border-focus);
  outline-offset: var(--picpic-size-focus);
}

/* El logo del manual de marca, en tinta negra sobre transparente. */
.logo {
  display: block;
  width: auto;
  height: var(--picpic-size-logo-brand);
}

/* En el tema oscuro la tinta pasa a blanca. */
[data-theme="dark"] .logo {
  filter: invert(1);
}

.language {
  font-size: var(--picpic-type-small);
  color: var(--picpic-color-text-muted);
}

.back {
  display: inline-flex;
  align-items: center;
  gap: var(--picpic-space-gap-xs);
  min-height: var(--picpic-size-touch);
  color: var(--picpic-color-text-default);
  font-weight: var(--picpic-type-weight-medium);
  text-decoration: none;
}

.back:hover {
  color: var(--picpic-color-accent-fg);
}

.form-page {
  max-width: var(--picpic-size-card-max);
  padding-top: var(--picpic-space-stack-lg);
  padding-bottom: var(--picpic-space-section);
}

.form-page h1 {
  margin: 0 0 var(--picpic-space-stack-sm);
  font-size: var(--picpic-type-title);
  font-weight: var(--picpic-type-weight-bold);
  letter-spacing: var(--picpic-type-tracking-heading);
  line-height: var(--picpic-type-leading-snug);
}

.hero {
  padding-top: var(--picpic-space-section);
  padding-bottom: var(--picpic-space-stack-lg);
}

.eyebrow {
  margin: 0 0 var(--picpic-space-stack-snug);
  color: var(--picpic-color-accent-fg);
  font-size: var(--picpic-type-small);
  font-weight: var(--picpic-type-weight-semibold);
  letter-spacing: var(--picpic-type-tracking-label);
  text-transform: uppercase;
}

.headline {
  max-width: var(--picpic-size-measure);
  margin: 0 0 var(--picpic-space-stack-md);
  font-size: var(--picpic-type-headline);
  font-weight: var(--picpic-type-weight-bold);
  line-height: var(--picpic-type-leading-tight);
  letter-spacing: var(--picpic-type-tracking-display);
}

.lead {
  max-width: var(--picpic-size-measure);
  margin: 0 0 var(--picpic-space-stack-lg);
  color: var(--picpic-color-text-muted);
  font-size: var(--picpic-type-lead);
}

.button {
  display: inline-flex;
  align-items: center;
  min-height: var(--picpic-size-control-lg);
  padding: 0 var(--picpic-space-inset-roomy);
  border-radius: var(--picpic-button-radius);
  background: var(--picpic-button-primary-bg);
  color: var(--picpic-button-primary-fg);
  font-weight: var(--picpic-type-weight-semibold);
  text-decoration: none;
}

.button:hover {
  background: var(--picpic-button-primary-bg-hover);
}

.points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--picpic-size-card-min), 1fr));
  gap: var(--picpic-space-gap-md);
  margin: 0 auto;
  padding-top: var(--picpic-space-stack-lg);
  padding-bottom: var(--picpic-space-section);
  list-style: none;
}

.point {
  padding: var(--picpic-space-inset-roomy);
  border: thin solid var(--picpic-card-border);
  border-radius: var(--picpic-card-radius);
  background: var(--picpic-card-bg);
  color: var(--picpic-card-fg);
}

.point h2 {
  margin: 0 0 var(--picpic-space-stack-sm);
  font-size: var(--picpic-type-heading);
  font-weight: var(--picpic-type-weight-semibold);
  letter-spacing: var(--picpic-type-tracking-heading);
  line-height: var(--picpic-type-leading-snug);
}

.point p {
  margin: 0;
  color: var(--picpic-color-text-muted);
}

.legal h1 {
  margin: 0 0 var(--picpic-space-stack-sm);
  font-size: var(--picpic-type-title);
  font-weight: var(--picpic-type-weight-bold);
  letter-spacing: var(--picpic-type-tracking-heading);
  line-height: var(--picpic-type-leading-snug);
}

.form-intro {
  max-width: var(--picpic-size-measure);
  margin: 0 0 var(--picpic-space-stack-lg);
  color: var(--picpic-color-text-muted);
}

/* Fillout dibuja el formulario adentro; sin alto inicial el iframe puede quedar en cero. */
.form {
  min-height: var(--picpic-size-embed-min);
}

.form-loading {
  margin: 0;
  padding-top: var(--picpic-space-stack-lg);
  color: var(--picpic-color-text-muted);
}

/* Cuando aparece el formulario de Fillout, el aviso de carga se va. */
.form:has(iframe) .form-loading {
  display: none;
}

.form-note {
  margin: var(--picpic-space-stack-md) 0 0;
  color: var(--picpic-color-text-muted);
  font-size: var(--picpic-type-small);
}

.footer {
  border-top: thin solid var(--picpic-color-border-subtle);
  color: var(--picpic-color-text-muted);
  font-size: var(--picpic-type-small);
}

.footer .page {
  display: flex;
  flex-wrap: wrap;
  gap: var(--picpic-space-gap-sm) var(--picpic-space-gap-lg);
  padding-top: var(--picpic-space-stack-roomy);
  padding-bottom: var(--picpic-space-stack-roomy);
}

.legal {
  max-width: var(--picpic-size-measure);
  padding-top: var(--picpic-space-section);
  padding-bottom: var(--picpic-space-section);
}

.legal h2 {
  margin: var(--picpic-space-stack-lg) 0 var(--picpic-space-stack-sm);
  font-size: var(--picpic-type-heading);
  font-weight: var(--picpic-type-weight-semibold);
  line-height: var(--picpic-type-leading-snug);
}

.legal p,
.legal li {
  color: var(--picpic-color-text-default);
}

.legal .updated {
  color: var(--picpic-color-text-muted);
  font-size: var(--picpic-type-small);
}

/* L-B188: «Cookie settings» se ve como un link del pie. */
.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--picpic-color-accent-fg);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.link-button:focus-visible,
.consent-button:focus-visible {
  outline: var(--picpic-size-focus) solid var(--picpic-color-border-focus);
  outline-offset: var(--picpic-size-focus);
  border-radius: var(--picpic-radius-sm);
}

.link-button[hidden],
.consent[hidden] {
  display: none;
}

/* L-B188: el banner de consentimiento, abajo y sin tapar la página entera. */
.consent {
  position: fixed;
  right: var(--picpic-space-inset-md);
  bottom: var(--picpic-space-inset-md);
  left: var(--picpic-space-inset-md);
  z-index: var(--picpic-z-overlay);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--picpic-space-gap-md);
  max-width: var(--picpic-size-card-max);
  margin: 0 auto;
  padding: var(--picpic-space-inset-md) var(--picpic-space-inset-roomy);
  border: thin solid var(--picpic-card-border);
  border-radius: var(--picpic-card-radius);
  background: var(--picpic-color-surface-raised);
  color: var(--picpic-color-text-default);
  box-shadow: var(--picpic-elevation-overlay);
}

.consent-text {
  flex: 1 1 var(--picpic-size-card-min);
  margin: 0;
  font-size: var(--picpic-type-small);
}

.consent-actions {
  display: flex;
  gap: var(--picpic-space-gap-sm);
}

/* Aceptar y rechazar pesan lo mismo: rechazar no puede ser más difícil que aceptar. */
.consent-button {
  min-height: var(--picpic-size-control-md);
  padding: 0 var(--picpic-space-inset-md);
  border: thin solid var(--picpic-button-secondary-border);
  border-radius: var(--picpic-button-radius);
  background: var(--picpic-button-secondary-bg);
  color: var(--picpic-button-secondary-fg);
  font: inherit;
  font-weight: var(--picpic-type-weight-semibold);
  cursor: pointer;
}

.consent-button:hover {
  background: var(--picpic-button-secondary-bg-hover);
}