/* ============================================================
   NativoLab.pe — estilos base
   Dirección visual: cinematográfica/editorial, fondo oscuro,
   acento dorado, tipografía bold. Inspirado en referencias de
   sitios de estudios de postproducción (ver reunión 2026-10-12).
   Variables pensadas para re-skinear rápido cuando llegue la
   línea gráfica real (colores, tipografía, logo del cliente).
   ============================================================ */

:root {
  --color-bg: #0a0a0b;
  --color-bg-alt: #121314;
  --color-surface: #18191b;
  --color-text: #f4f4f2;
  --color-text-muted: #9a9a93;
  --color-primary: #c9a227;
  --color-primary-hover: #e0bb3e;
  --color-border: rgba(255, 255, 255, 0.1);

  --font-heading: "Archivo", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: "Archivo", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --container-width: 1120px;
  --radius: 4px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}

p {
  margin: 0 0 1em;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

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

/* ---- Eyebrow (etiqueta pequeña sobre títulos) ---- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 14px;
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1.5px;
  background: var(--color-primary);
}

.section-head {
  text-align: center;
  margin-bottom: 2.5em;
}

.section-head .eyebrow {
  justify-content: center;
}

/* ---- Botones ---- */
.btn {
  display: inline-block;
  padding: 15px 30px;
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn--primary {
  background: var(--color-primary);
  color: #171708;
}

.btn--primary:hover {
  background: var(--color-primary-hover);
}

.btn--small {
  padding: 9px 18px;
  font-size: 0.75rem;
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.btn--small:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ---- Header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(10, 10, 11, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
}

.logo {
  font-weight: 800;
  letter-spacing: 0.1em;
  font-size: 1.05rem;
  text-transform: uppercase;
}

/* ---- Hero ---- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 0;
  text-align: center;
  overflow: hidden;
  background: var(--color-bg);
}

/* Foto de fondo — placeholder hasta tener fotografía propia definitiva de
   Nativo Lab. Foto proporcionada por el cliente, sin filtros (tal cual). */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../assets/hero-bg.jpg");
  background-size: cover;
  background-position: center center;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 11, 0.35) 0%,
    rgba(10, 10, 11, 0.4) 55%,
    rgba(10, 10, 11, 0.7) 100%
  );
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  text-transform: uppercase;
}

.hero__subtitulo {
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  color: var(--color-text-muted);
  max-width: 640px;
  margin: 0 auto 0.6em;
  font-weight: 400;
}

.hero__bajada {
  color: var(--color-text-muted);
  margin-bottom: 2.2em;
}

/* ---- About ---- */
.about {
  padding: 90px 0;
  background: var(--color-bg-alt);
}

.about__top {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
  margin-bottom: 3.5em;
}

.about__media {
  position: relative;
}

.about__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  filter: grayscale(0.55) contrast(1.08) brightness(0.9);
}

.about__badge {
  position: absolute;
  right: -16px;
  bottom: -20px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 160px;
}

.about__badge strong {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
}

.about__badge span {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.about__copy h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
}

.about__texto {
  color: var(--color-text-muted);
  margin: 0;
}

.about__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.about__card {
  background: var(--color-bg-alt);
  padding: 28px;
}

.about__card h3 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-primary);
  font-weight: 700;
}

.about__card p {
  color: var(--color-text-muted);
  margin: 0;
  font-size: 0.92rem;
}

/* ---- Cursos ---- */
.cursos {
  padding: 90px 0;
}

.pago-status {
  max-width: 540px;
  margin: 0 auto 2em;
  padding: 12px 16px;
  border-radius: var(--radius);
  text-align: center;
  font-size: 0.92rem;
}

.pago-status--info {
  background: rgba(201, 162, 39, 0.1);
  color: var(--color-text);
  border: 1px solid var(--color-primary);
}

.pago-status--success {
  background: rgba(46, 160, 90, 0.14);
  color: #7fd99c;
  border: 1px solid #2ea05a;
}

.pago-status--error {
  background: rgba(214, 62, 62, 0.14);
  color: #ff9b9b;
  border: 1px solid #d63e3e;
}

.cursos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
}

.curso-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 32px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s ease;
}

.curso-card:hover {
  border-color: var(--color-primary);
}

.curso-card h3 {
  font-size: 1.4rem;
  margin-bottom: 0.2em;
  text-transform: uppercase;
}

.curso-card__precio {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--color-primary);
  margin-bottom: 0.7em;
}

.curso-card__meta {
  list-style: none;
  margin: 0 0 1.2em;
  padding: 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.curso-card__meta li {
  padding: 7px 0;
  border-bottom: 1px solid var(--color-border);
}

.curso-card__meta li:last-child {
  border-bottom: none;
}

.curso-card__publico {
  margin: 0 0 1.5em;
  padding-left: 1.1em;
  color: var(--color-text-muted);
  font-size: 0.88rem;
}

.curso-card__publico li {
  margin-bottom: 0.3em;
}

.curso-card .btn {
  margin-top: auto;
  text-align: center;
}

/* ---- Formulario ---- */
.formulario {
  padding: 90px 0;
  background: var(--color-bg-alt);
}

.formulario__inner {
  max-width: 560px;
  text-align: center;
}

.formulario h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.3rem);
}

#lead-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 1.5em;
  text-align: left;
}

#lead-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

#lead-form input,
#lead-form select {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  padding: 10px 2px;
  color: var(--color-text);
  font-size: 1rem;
  font-family: inherit;
}

/* El <select> hereda nuestro texto claro, pero el navegador abre el
   desplegable con fondo claro por defecto — sin esto, el texto queda
   casi ilegible (claro sobre claro). Forzamos colores legibles. */
#lead-form select option {
  background: #fff;
  color: #1a1b1e;
}

#lead-form input:focus,
#lead-form select:focus {
  outline: none;
  border-color: var(--color-primary);
}

#lead-form .checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.85rem;
}

#lead-form .checkbox input {
  width: auto;
  margin-top: 3px;
}

.formulario__subtexto {
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-top: 0.5em;
}

/* ---- Footer ---- */
.site-footer {
  padding: 32px 0;
  border-top: 1px solid var(--color-border);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.site-footer__redes {
  display: flex;
  gap: 20px;
}

.site-footer__redes a {
  text-decoration: none;
  color: var(--color-text-muted);
}

.site-footer__redes a:hover {
  color: var(--color-primary);
}

/* ---- Páginas legales (Términos, Política de cambios, Libro de Reclamaciones) ---- */
.legal-main {
  padding: 48px 0 80px;
  max-width: 820px;
  margin: 0 auto;
}

.legal-main h1 {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  text-transform: uppercase;
}

.legal-main .eyebrow {
  margin-top: 10px;
}

.legal-main h2 {
  font-size: 1.15rem;
  margin-top: 1.8em;
  color: var(--color-primary);
}

.legal-main h3 {
  font-size: 1rem;
  margin-top: 1.2em;
}

.legal-main p,
.legal-main li {
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.legal-main ul {
  padding-left: 1.3em;
}

.legal-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 1.2em 0;
}

.legal-box--warning {
  border-color: var(--color-primary);
  background: rgba(201, 162, 39, 0.08);
}

.legal-box p:last-child {
  margin-bottom: 0;
}

.legal-fields-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0 1.6em;
  font-size: 0.9rem;
}

.legal-fields-table td {
  border: 1px solid var(--color-border);
  padding: 8px 12px;
  color: var(--color-text-muted);
}

.legal-fields-table td:first-child {
  color: var(--color-text);
  font-weight: 600;
  width: 40%;
}

.legal-pending {
  color: var(--color-primary);
  font-style: italic;
}

/* Formulario Hoja de Reclamación */
.reclamo-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 1.5em;
}

.reclamo-form fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 18px;
}

.reclamo-form legend {
  padding: 0 8px;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.reclamo-form .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.reclamo-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}

.reclamo-form input,
.reclamo-form select,
.reclamo-form textarea {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  padding: 10px 11px;
  color: var(--color-text);
  font-size: 0.95rem;
  font-family: inherit;
}

.reclamo-form input:focus,
.reclamo-form select:focus,
.reclamo-form textarea:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--color-primary);
}

.reclamo-form .radio-group {
  flex-direction: row;
  gap: 18px;
  align-items: center;
}

.reclamo-form .radio-group span {
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: none;
  font-size: 0.9rem;
  color: var(--color-text);
}

.reclamo-form .radio-group input {
  width: auto;
}

/* Aviso del Libro de Reclamaciones en el home */
.aviso-reclamaciones {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 14px 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.aviso-reclamaciones a {
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: underline;
}

/* Bloque de contacto en el footer */
.site-footer__contacto {
  margin-bottom: 18px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-transform: none;
  letter-spacing: normal;
}

.site-footer__contacto strong {
  color: var(--color-text);
}

.site-footer__legal {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.site-footer__legal a {
  text-decoration: none;
  color: var(--color-text-muted);
}

.site-footer__legal a:hover {
  color: var(--color-primary);
}

/* ---- Responsive ---- */
@media (max-width: 760px) {
  .about__top {
    grid-template-columns: 1fr;
  }

  .about__badge {
    right: 12px;
    bottom: -18px;
  }
}

@media (max-width: 600px) {
  .hero {
    min-height: 100dvh;
    padding: 56px 0;
  }

  /* En mobile, 100vh suele incluir espacio tapado por la barra del
     navegador, dejando un hueco grande arriba. 100dvh corrige eso.
     También recorremos el encuadre de la foto para que se vea mejor
     la persona con la cámara (si no, queda muy a la derecha/cortada). */
  .hero::before {
    background-position: 78% 18%;
  }

  .about,
  .cursos,
  .formulario {
    padding: 56px 0;
  }

  .about__badge {
    position: static;
    margin-top: 14px;
    display: inline-flex;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
  }

  .site-footer__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .reclamo-form .row {
    grid-template-columns: 1fr;
  }
}