/* ═══════════════════════════════════════════════════════════════
   SUN ARQUITECTOS — practicas.css
   Estilos específicos de la página Prácticas.
   Depende de styles.css para variables, fuentes, nav y footer.
   ═══════════════════════════════════════════════════════════════ */

/* Ocultar input file nativo (evita depender de inline style bloqueado por CSP) */
.practicas__file-hidden { display: none; }

/* ─── Footer al borde inferior ──────────────────────────────────
   El contenido de esta página es más bajo que la ventana, así que
   sin esto el footer queda flotando con aire debajo. Con el body
   como columna flex y el main creciendo, el footer se apoya en el
   borde inferior sin depender de una altura fija del footer.
   (El nav y el overlay son position:fixed → fuera del flujo.) */
body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

body > main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

body > main > .practicas {
  flex: 1 0 auto;
}

/* ─── Sección principal ─────────────────────────────────────── */
.practicas {
  padding: calc(var(--nav-h) + clamp(2rem, 4vh, 3.5rem)) var(--gutter) var(--sp-sm);
  background: var(--c-bg);
  /* El contenido (foto + formulario) quedaba ~7% más alto que una
     ventana de escritorio típica, forzando scroll de página. Se achica
     todo en la misma proporción (texto, foto, campos, espacios) para
     que entre completo sin tocar el orden ni la estructura. El footer
     (fuera de .practicas, hermano de <main>) necesita el mismo zoom
     aparte — si no, seguía de su tamaño real y volvía a sobrar alto. */
  zoom: 0.82;
}

body > .footer {
  zoom: 0.82;
}

/* ─── Grid dos columnas ─────────────────────────────────────── */
.practicas__inner {
  display: grid;
  grid-template-columns: 4fr 5fr;
  column-gap: clamp(2rem, 12.4vw, 11.25rem);
  align-items: stretch;
  max-width: var(--max-w);
  margin-inline: auto;
}

/* ─── Columna izquierda ─────────────────────────────────────── */
.practicas__left {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  height: 100%;
}

.practicas__label {
  font-family: var(--f-display);
  font-weight: var(--fw-thin);
  font-size: clamp(0.8125rem, 1vw, 1rem);
  letter-spacing: 0.18em;
  color: var(--c-salmon);
  text-transform: uppercase;
  display: block;
}

/* Mismo formato que .editorial-item__desc (a pedido del cliente: menos
   variedad tipográfica en el sitio). */
.practicas__desc {
  font-family: var(--f-display);
  font-weight: var(--fw-reg);
  font-size: clamp(0.9375rem, 1.18vw, 1.0625rem);
  line-height: 1.72;
  color: #A2A2A2;
  margin-top: 1.5rem;
}

.practicas__figure {
  position: relative;
  overflow: hidden;
  flex: none;
  aspect-ratio: 4 / 5;
  max-height: 30rem;
  margin-top: 0.5rem;
}

.practicas__figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: grayscale(100%);
}

/* ─── Formulario ─────────────────────────────────────────────── */
.practicas__form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Fila de dos campos lado a lado */
.practicas__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

/* Campo individual */
.practicas__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

/* Más aire entre el bloque de CV/portafolio y Breve presentación. */
.practicas__field--gap-top {
  margin-top: 1.5rem;
}

.practicas__field-label {
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: clamp(0.8125rem, 0.9vw, 0.875rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.practicas__input {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.875rem;
  background: var(--c-surface);
  border: none;
  outline: none;
  color: var(--c-text);
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: clamp(0.9375rem, 1.05vw, 1rem);
  letter-spacing: 0.04em;
  transition: background 0.2s;
}

.practicas__input:focus {
  background: #2e2e2e;
}

.practicas__input::placeholder {
  color: var(--c-muted);
  font-weight: var(--fw-thin);
}

/* Zona de carga de archivo */
.practicas__dropzone {
  position: relative;
  height: 3.5rem;
  background: transparent;
  border: 1px dashed rgba(245, 245, 245, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.practicas__dropzone:hover,
.practicas__dropzone:focus-visible {
  border-color: rgba(245, 245, 245, 0.6);
  background: rgba(245, 245, 245, 0.04);
}

.practicas__dropzone--over {
  border-color: var(--c-salmon);
  background: rgba(187, 111, 88, 0.06);
}

.practicas__dropzone-icon {
  flex-shrink: 0;
  color: var(--c-muted);
  pointer-events: none;
  width: 1rem;
  height: 1rem;
}

.practicas__dropzone-text {
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: clamp(0.6875rem, 0.8vw, 0.75rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
  pointer-events: none;
  text-align: center;
}

.practicas__dropzone-clear {
  display: none;
  background: none;
  border: none;
  color: var(--c-muted);
  cursor: pointer;
  padding: 0.25rem;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  pointer-events: all;
}

.practicas__dropzone-clear.is-visible {
  display: flex;
}

.practicas__dropzone-clear:hover {
  color: var(--c-text);
}

.practicas__dropzone-clear svg {
  width: 0.875rem;
  height: 0.875rem;
  pointer-events: none;
}

/* Textarea */
.practicas__textarea {
  height: auto;
  min-height: 6.5rem;
  padding: 0.65rem 0.875rem;
  resize: vertical;
  line-height: 1.55;
}

/* Botón enviar */
.practicas__submit {
  margin-top: 1.1rem;
  width: 100%;
  padding: 1.1rem;
  background: #1c1c1c;
  border: 1px solid rgba(245, 245, 245, 0.4);
  color: var(--c-text);
  font-family: var(--f-display);
  font-weight: var(--fw-reg);
  font-size: clamp(0.8125rem, 0.95vw, 0.9375rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.practicas__submit:hover {
  background: #2a2a2a;
  border-color: var(--c-text);
}

.practicas__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Mensajes de estado del formulario */
.practicas__msg {
  margin-top: 0.75rem;
  font-family: var(--f-display);
  font-size: 0.875rem;
  letter-spacing: 0.03em;
  text-align: center;
}

.practicas__msg--ok  { color: #7ec8a0; }
.practicas__msg--err { color: #e07070; }

/* Validación — errores de campo */
.practicas__input--error {
  box-shadow: inset 0 0 0 1px #e07070;
}

.practicas__dropzone--error {
  border-color: #e07070;
}

.practicas__field-error {
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: #e07070;
}

.practicas__field-hint {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--c-muted);
}


/* ─── Responsive — 1024px (tablet) ──────────────────────────── */
@media (max-width: 1024px) {
  .practicas__inner {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(1.5rem, 5vw, 4rem);
  }

  .practicas__figure {
    margin-top: var(--sp-sm);
  }
}

/* ─── Responsive — 768px (mobile) ───────────────────────────── */
@media (max-width: 768px) {
  .practicas {
    padding-top: calc(var(--nav-h) + clamp(1.5rem, 3vh, 2.5rem));
    padding-bottom: var(--sp-lg);
  }

  .practicas__inner {
    grid-template-columns: 1fr;
    row-gap: var(--sp-lg);
  }

  .practicas__left {
    gap: var(--sp-sm);
  }

  /* En 1 columna no hay una columna hermana más alta contra la cual
     estirarse (flex:1 quedaría en 0) → alto fijo por aspect-ratio. */
  .practicas__figure {
    flex: none;
    aspect-ratio: 4 / 3;
    margin-top: var(--sp-sm);
  }

  .practicas__row {
    grid-template-columns: 1fr;
  }

  .practicas__submit {
    height: 3rem;
    margin-top: 1rem;
  }

  .practicas__textarea {
    min-height: 7rem;
  }
}

/* ─── Responsive — 480px (mobile pequeño) ───────────────────── */
@media (max-width: 480px) {
  .practicas__input {
    font-size: 0.8125rem;
  }

  .practicas__dropzone-text {
    font-size: 0.5rem;
    letter-spacing: 0.06em;
  }
}